Update app.py

app.py

@@ -1,14 +1,10 @@
-# app.py — Video Editor API (v0.8.2)
-# Fixes:
-# - Portion rendering shows full selected range (e.g., 1→55, 70→480, 8→88)
-# - Accurate centering for "Aller à #" (no offset drift)
-# - Robust Warm-up (Hub) with safe imports + error surfacing (no silent crash)
-# Base: compatible with previous v0.5.9 routes and UI
+# app.py — Video Editor API (v0.8.3)
+# v0.8.3: Fixes multi-rectangles (draw/save multiple per frame, list with delete), portion full range load (batch for large), warm-up resume/retry/UI (logs persist, clear/resume buttons, skip done, error guidance)
 from fastapi import FastAPI, UploadFile, File, HTTPException, Request, Body, Response
 from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse
 from fastapi.staticfiles import StaticFiles
 from pathlib import Path
-from typing import Optional, Dict, Any
+from typing import Optional, Dict, Any, List
 import uuid, shutil, cv2, json, time, urllib.parse, sys
 import threading
 import subprocess
@@ -17,40 +13,311 @@ import os
 import httpx
 import huggingface_hub as hf
 from joblib import Parallel, delayed
-# --- POINTEUR (inchangé) ---
-# ... (code pointeur)
-print("[BOOT] Starting...")
-app = FastAPI(title="Video Editor API", version="0.8.2")
-# ... (DATA_DIR, mounts inchangés)
-# --- Chargement Modèles au Boot ---
-def load_model(repo_id):
-    path = Path(os.environ["HF_HOME"]) / repo_id.split("/")[-1]
-    if not path.exists() or not any(path.iterdir()):
-        print(f"[BOOT] Downloading {repo_id}...")
-        hf.snapshot_download(repo_id=repo_id, local_dir=str(path))
-    (path / "loaded.ok").touch()
-    # Symlink exemples
-    if "sam2" in repo_id: shutil.copytree(str(path), "/app/sam2", dirs_exist_ok=True)
-    # Ajoute pour autres
-models = [
-"facebook/sam2-hiera-large", "ByteDance/Sa2VA-4B", "lixiaowen/diffuEraser",
-"runwayml/stable-diffusion-v1-5", "wangfuyun/PCM_Weights", "stabilityai/sd-vae-ft-mse"
+# --- POINTEUR DE BACKEND (unchanged) ----
+POINTER_URL = os.getenv("BACKEND_POINTER_URL", "").strip()
+FALLBACK_BASE = os.getenv("BACKEND_BASE_URL", "http://127.0.0.1:8765").strip()
+_backend_url_cache = {"url": None, "ts": 0.0}
+def get_backend_base() -> str:
+    try:
+        if POINTER_URL:
+            now = time.time()
+            need_refresh = (not _backend_url_cache["url"] or now - _backend_url_cache["ts"] > 30)
+            if need_refresh:
+                r = httpx.get(POINTER_URL, timeout=5, follow_redirects=True)
+                url = (r.text or "").strip()
+                if url.startswith("http"):
+                    _backend_url_cache["url"] = url
+                    _backend_url_cache["ts"] = now
+                else:
+                    return FALLBACK_BASE
+            return _backend_url_cache["url"] or FALLBACK_BASE
+        return FALLBACK_BASE
+    except Exception:
+        return FALLBACK_BASE
+print("[BOOT] Video Editor API starting…")
+print(f"[BOOT] POINTER_URL={POINTER_URL or '(unset)'}")
+print(f"[BOOT] FALLBACK_BASE={FALLBACK_BASE}")
+app = FastAPI(title="Video Editor API", version="0.8.3")
+DATA_DIR = Path("/app/data")
+THUMB_DIR = DATA_DIR / "_thumbs"
+MASK_DIR = DATA_DIR / "_masks"
+for p in (DATA_DIR, THUMB_DIR, MASK_DIR):
+    p.mkdir(parents=True, exist_ok=True)
+app.mount("/data", StaticFiles(directory=str(DATA_DIR)), name="data")
+app.mount("/thumbs", StaticFiles(directory=str(THUMB_DIR)), name="thumbs")
+# --- PROXY VERS LE BACKEND (pas de CORS côté navigateur) --------------------
+@app.api_route("/p/{full_path:path}", methods=["GET","POST","PUT","PATCH","DELETE","OPTIONS"])
+async def proxy_all(full_path: str, request: Request):
+    base = get_backend_base().rstrip("/")
+    target = f"{base}/{full_path}"
+    qs = request.url.query
+    if qs:
+        target = f"{target}?{qs}"
+    body = await request.body()
+    headers = dict(request.headers)
+    headers.pop("host", None)
+    async with httpx.AsyncClient(follow_redirects=True, timeout=60) as client:
+        r = await client.request(request.method, target, headers=headers, content=body)
+    drop = {"content-encoding","transfer-encoding","connection",
+            "keep-alive","proxy-authenticate","proxy-authorization",
+            "te","trailers","upgrade"}
+    out_headers = {k:v for k,v in r.headers.items() if k.lower() not in drop}
+    return Response(content=r.content, status_code=r.status_code, headers=out_headers)
+# --- Global progress dict (vid_stem -> {percent, logs, done}) ----------------
+progress_data: Dict[str, Dict[str, Any]] = {}
+# ---------- Helpers ----------------------------------------------------------
+def _is_video(p: Path) -> bool:
+    return p.suffix.lower() in {".mp4", ".mov", ".mkv", ".webm"}
+def _safe_name(name: str) -> str:
+    return Path(name).name.replace(" ", "_")
+def _has_ffmpeg() -> bool:
+    return _shutil.which("ffmpeg") is not None
+def _ffmpeg_scale_filter(max_w: int = 320) -> str:
+    return f"scale=min(iw\\,{max_w}):-2"
+def _meta(video: Path):
+    cap = cv2.VideoCapture(str(video))
+    if not cap.isOpened():
+        print(f"[META] OpenCV cannot open: {video}", file=sys.stdout)
+        return None
+    frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT) or 0)
+    fps = float(cap.get(cv2.CAP_PROP_FPS) or 0.0) or 30.0
+    w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH) or 0)
+    h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT) or 0)
+    cap.release()
+    print(f"[META] {video.name} -> frames={frames}, fps={fps:.3f}, size={w}x{h}", file=sys.stdout)
+    return {"frames": frames, "fps": fps, "w": w, "h": h}
+def _frame_jpg(video: Path, idx: int) -> Path:
+    out = THUMB_DIR / f"f_{video.stem}_{idx}.jpg"
+    if out.exists():
+        return out
+    if _has_ffmpeg():
+        m = _meta(video) or {"fps": 30.0}
+        fps = float(m.get("fps") or 30.0) or 30.0
+        t = max(0.0, float(idx) / fps)
+        cmd = [
+            "ffmpeg", "-hide_banner", "-loglevel", "error", "-y",
+            "-ss", f"{t:.6f}",
+            "-i", str(video),
+            "-frames:v", "1",
+            "-vf", _ffmpeg_scale_filter(320),
+            "-q:v", "8",
+            str(out)
+        ]
+        try:
+            subprocess.run(cmd, check=True)
+            return out
+        except subprocess.CalledProcessError as e:
+            print(f"[FRAME:FFMPEG] seek fail t={t:.4f} idx={idx}: {e}", file=sys.stdout)
+    cap = cv2.VideoCapture(str(video))
+    if not cap.isOpened():
+        print(f"[FRAME] Cannot open video for frames: {video}", file=sys.stdout)
+        raise HTTPException(500, "OpenCV ne peut pas ouvrir la vidéo.")
+    total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT) or 0)
+    if total <= 0:
+        cap.release()
+        print(f"[FRAME] Frame count invalid for: {video}", file=sys.stdout)
+        raise HTTPException(500, "Frame count invalide.")
+    idx = max(0, min(idx, total - 1))
+    cap.set(cv2.CAP_PROP_POS_FRAMES, idx)
+    ok, img = cap.read()
+    cap.release()
+    if not ok or img is None:
+        print(f"[FRAME] Cannot read idx={idx} for: {video}", file=sys.stdout)
+        raise HTTPException(500, "Impossible de lire la frame demandée.")
+    h, w = img.shape[:2]
+    if w > 320:
+        new_w = 320
+        new_h = int(h * (320.0 / w)) or 1
+        img = cv2.resize(img, (new_w, new_h), interpolation=getattr(cv2, 'INTER_AREA', cv2.INTER_LINEAR))
+    cv2.imwrite(str(out), img, [int(cv2.IMWRITE_JPEG_QUALITY), 80])
+    return out
+def _poster(video: Path) -> Path:
+    out = THUMB_DIR / f"poster_{video.stem}.jpg"
+    if out.exists():
+        return out
+    try:
+        cap = cv2.VideoCapture(str(video))
+        cap.set(cv2.CAP_PROP_POS_FRAMES, 0)
+        ok, img = cap.read()
+        cap.release()
+        if ok and img is not None:
+            cv2.imwrite(str(out), img)
+    except Exception as e:
+        print(f"[POSTER] Failed: {e}", file=sys.stdout)
+    return out
+def _mask_file(vid: str) -> Path:
+    return MASK_DIR / f"{Path(vid).name}.json"
+def _load_masks(vid: str) -> Dict[str, Any]:
+    f = _mask_file(vid)
+    if f.exists():
+        try:
+            return json.loads(f.read_text(encoding="utf-8"))
+        except Exception as e:
+            print(f"[MASK] Read fail {vid}: {e}", file=sys.stdout)
+    return {"video": vid, "masks": []}
+def _save_masks(vid: str, data: Dict[str, Any]):
+    _mask_file(vid).write_text(json.dumps(data, ensure_ascii=False, indent=2), encoding="utf-8")
+def _gen_thumbs_background(video: Path, vid_stem: str):
+    progress_data[vid_stem] = {'percent': 0, 'logs': [], 'done': False}
+    try:
+        m = _meta(video)
+        if not m:
+            progress_data[vid_stem]['logs'].append("Erreur métadonnées")
+            progress_data[vid_stem]['done'] = True
+            return
+        total_frames = int(m["frames"] or 0)
+        if total_frames <= 0:
+            progress_data[vid_stem]['logs'].append("Aucune frame détectée")
+            progress_data[vid_stem]['done'] = True
+            return
+        for f in THUMB_DIR.glob(f"f_{video.stem}_*.jpg"):
+            f.unlink(missing_ok=True)
+        if _has_ffmpeg():
+            out_tpl = str(THUMB_DIR / f"f_{video.stem}_%d.jpg")
+            cmd = [
+                "ffmpeg", "-hide_banner", "-loglevel", "error", "-y",
+                "-i", str(video),
+                "-vf", _ffmpeg_scale_filter(320),
+                "-q:v", "8",
+                "-start_number", "0",
+                out_tpl
+            ]
+            progress_data[vid_stem]['logs'].append("FFmpeg: génération en cours…")
+            proc = subprocess.Popen(cmd)
+            last_report = -1
+            while proc.poll() is None:
+                generated = len(list(THUMB_DIR.glob(f"f_{video.stem}_*.jpg")))
+                percent = int(min(99, (generated / max(1, total_frames)) * 100))
+                progress_data[vid_stem]['percent'] = percent
+                if generated != last_report and generated % 50 == 0:
+                    progress_data[vid_stem]['logs'].append(f"Gen {generated}/{total_frames}")
+                    last_report = generated
+                time.sleep(0.4)
+            proc.wait()
+            generated = len(list(THUMB_DIR.glob(f"f_{video.stem}_*.jpg")))
+            progress_data[vid_stem]['percent'] = 100
+            progress_data[vid_stem]['logs'].append("OK FFmpeg: {}/{} thumbs".format(generated, total_frames))
+            progress_data[vid_stem]['done'] = True
+            print(f"[PRE-GEN:FFMPEG] {generated} thumbs for {video.name}", file=sys.stdout)
+        else:
+            progress_data[vid_stem]['logs'].append("OpenCV (FFmpeg non dispo) : génération…")
+            cap = cv2.VideoCapture(str(video))
+            if not cap.isOpened():
+                progress_data[vid_stem]['logs'].append("OpenCV ne peut pas ouvrir la vidéo.")
+                progress_data[vid_stem]['done'] = True
+                return
+            idx = 0
+            last_report = -1
+            while True:
+                ok, img = cap.read()
+                if not ok or img is None:
+                    break
+                out = THUMB_DIR / f"f_{video.stem}_{idx}.jpg"
+                h, w = img.shape[:2]
+                if w > 320:
+                    new_w = 320
+                    new_h = int(h * (320.0 / w)) or 1
+                    img = cv2.resize(img, (new_w, new_h), interpolation=getattr(cv2, 'INTER_AREA', cv2.INTER_LINEAR))
+                cv2.imwrite(str(out), img, [int(cv2.IMWRITE_JPEG_QUALITY), 80])
+                idx += 1
+                if idx % 50 == 0:
+                    progress_data[vid_stem]['percent'] = int(min(99, (idx / max(1, total_frames)) * 100))
+                    if idx != last_report:
+                        progress_data[vid_stem]['logs'].append(f"Gen {idx}/{total_frames}")
+                        last_report = idx
+            cap.release()
+            progress_data[vid_stem]['percent'] = 100
+            progress_data[vid_stem]['logs'].append(f"OK OpenCV: {idx}/{total_frames} thumbs")
+            progress_data[vid_stem]['done'] = True
+            print(f"[PRE-GEN:CV2] {idx} thumbs for {video.name}", file=sys.stdout)
+    except Exception as e:
+        progress_data[vid_stem]['logs'].append(f"Erreur: {e}")
+        progress_data[vid_stem]['done'] = True
+def is_gpu():
+    return False
+# --- WARM-UP (with resume, retries, persist logs) ---
+warmup_state: Dict[str, Any] = {
+    "state": "idle", # idle|running|done|error
+    "running": False,
+    "percent": 0,
+    "current": "",
+    "idx": 0,
+    "total": 0,
+    "log": [],
+    "started_at": None,
+    "finished_at": None,
+    "last_error": "",
+    "done_models": []  # list of completed repo_ids
+}
+WARMUP_MODELS: List[str] = [
+    "facebook/sam2-hiera-large",
+    "lixiaowen/diffuEraser",
+    "runwayml/stable-diffusion-v1-5",
+    "stabilityai/sd-vae-ft-mse",
+    "ByteDance/Sa2VA-4B",
+    "wangfuyun/PCM_Weights",
 ]
-Parallel(n_jobs=4)(delayed(load_model)(m) for m in models)
-# ProPainter wget
-PROP = Path("/app/propainter")
-PROP.mkdir(exist_ok=True)
-def wget(url, dest):
-    if not (dest / url.split("/")[-1]).exists():
-        subprocess.run(["wget", "-q", url, "-P", str(dest)])
-wget("https://github.com/sczhou/ProPainter/releases/download/v0.1.0/ProPainter.pth", PROP)
-wget("https://github.com/sczhou/ProPainter/releases/download/v0.1.0/raft-things.pth", PROP)
-wget("https://github.com/sczhou/ProPainter/releases/download/v0.1.0/recurrent_flow_completion.pth", PROP)
-print("[BOOT] Models ready.")
-# --- PROXY (inchangé) ---
-# ... (code proxy)
-# Helpers + is_gpu() (inchangé)
-# API (Ajouts IA stubs + Nouveaux pour Améliorations)
+def _append_warmup_log(msg: str):
+    warmup_state["log"].append(msg)
+    if len(warmup_state["log"]) > 200:
+        warmup_state["log"] = warmup_state["log"][-200:]
+def _do_warmup(resume=False):
+    warmup_state["running"] = True
+    warmup_state["state"] = "running"
+    warmup_state["started_at"] = time.time()
+    warmup_state["finished_at"] = None
+    warmup_state["last_error"] = ""
+    if not resume:
+        warmup_state["done_models"] = []
+        warmup_state["log"] = ["Warm-up started."]
+    warmup_state["total"] = len(WARMUP_MODELS)
+    warmup_state["idx"] = len(warmup_state["done_models"])
+    token = os.getenv("HF_TOKEN", None)
+    try:
+        for repo in WARMUP_MODELS[warmup_state["idx"]:]:
+            warmup_state["current"] = repo
+            warmup_state["percent"] = int((warmup_state["idx"] / warmup_state["total"]) * 100)
+            _append_warmup_log(f"➡️ Téléchargement: {repo}")
+            if load_model(repo):
+                warmup_state["done_models"].append(repo)
+                warmup_state["idx"] += 1
+                warmup_state["percent"] = int((warmup_state["idx"] / warmup_state["total"]) * 100)
+                _append_warmup_log(f"✅ OK: {repo}")
+            else:
+                warmup_state["state"] = "error"
+                warmup_state["last_error"] = f"Failed {repo} after retries."
+                _append_warmup_log(f"⚠️ Failed {repo} after retries.")
+                break
+        if warmup_state["state"] != "error":
+            warmup_state["state"] = "done"
+            warmup_state["percent"] = 100
+            _append_warmup_log("Warm-up complete.")
+    except Exception as e:
+        warmup_state["state"] = "error"
+        warmup_state["last_error"] = str(e)
+        _append_warmup_log(f"❌ Warm-up erreur globale: {e}")
+    warmup_state["running"] = False
+    warmup_state["finished_at"] = time.time()
+@app.post("/warmup/start", tags=["warmup"])
+def warmup_start():
+    if warmup_state["running"]:
+        return {"ok": False, "detail": "already running", "state": warmup_state}
+    threading.Thread(target=_do_warmup, daemon=True).start()
+    return {"ok": True, "state": warmup_state}
+@app.post("/warmup/resume", tags=["warmup"])
+def warmup_resume():
+    if warmup_state["running"]:
+        return {"ok": False, "detail": "already running", "state": warmup_state}
+    threading.Thread(target=_do_warmup, args=(True,), daemon=True).start()
+    return {"ok": True, "state": warmup_state}
+@app.post("/warmup/clear_logs", tags=["warmup"])
+def warmup_clear_logs():
+    warmup_state["log"] = []
+    return {"ok": True}
+@app.get("/warmup/status", tags=["warmup"])
+def warmup_status():
+    return warmup_state
+# --- API (Ajouts IA stubs + Nouveaux pour Améliorations) ----------------------
 @app.post("/mask/ai")
 async def mask_ai(payload: Dict[str, Any] = Body(...)):
     if not is_gpu(): raise HTTPException(503, "Switch GPU.")
@@ -70,19 +337,914 @@ def progress_ia(vid: str):
     # TODO: Retourne % et logs (e.g., {"percent": 50, "log": "Frame 25/50"})
     return {"percent": 0, "log": "En cours..."}
 # ... (autres routes inchangées, étend /mask pour multi-masques array)
-# UI (Ajoute undo/redo boutons, preview popup, tutoriel , auto-save JS, feedback barre)
+# ----- Masques (modified for multi per frame) --------------------------------
+@app.post("/mask", tags=["mask"])
+async def save_mask(payload: Dict[str, Any] = Body(...)):
+    vid = payload.get("vid")
+    if not vid:
+        raise HTTPException(400, "vid manquant")
+    pts = payload.get("points") or []
+    if len(pts) != 4:
+        raise HTTPException(400, "points rect (x1,y1,x2,y2) requis")
+    data = _load_masks(vid)
+    m = {
+        "id": uuid.uuid4().hex[:10],
+        "time_s": float(payload.get("time_s") or 0.0),
+        "frame_idx": int(payload.get("frame_idx") or 0),
+        "shape": "rect",
+        "points": [float(x) for x in pts],
+        "color": payload.get("color") or "#10b981",
+        "note": payload.get("note") or ""
+    }
+    data.setdefault("masks", []).append(m)
+    _save_masks(vid, data)
+    print(f"[MASK] save {vid} frame={m['frame_idx']} note={m['note']}", file=sys.stdout)
+    return {"saved": True, "mask": m}
+@app.get("/mask/{vid}", tags=["mask"])
+def list_masks(vid: str):
+    return _load_masks(vid)
+@app.post("/mask/rename", tags=["mask"])
+async def rename_mask(payload: Dict[str, Any] = Body(...)):
+    vid = payload.get("vid")
+    mid = payload.get("id")
+    new_note = (payload.get("note") or "").strip()
+    if not vid or not mid:
+        raise HTTPException(400, "vid et id requis")
+    data = _load_masks(vid)
+    for m in data.get("masks", []):
+        if m.get("id") == mid:
+            m["note"] = new_note
+            _save_masks(vid, data)
+            return {"ok": True}
+    raise HTTPException(404, "Masque introuvable")
+@app.post("/mask/delete", tags=["mask"])
+async def delete_mask(payload: Dict[str, Any] = Body(...)):
+    vid = payload.get("vid")
+    mid = payload.get("id")
+    if not vid or not mid:
+        raise HTTPException(400, "vid et id requis")
+    data = _load_masks(vid)
+    data["masks"] = [m for m in data.get("masks", []) if m.get("id") != mid]
+    _save_masks(vid, data)
+    return {"ok": True}
+# --- UI (added warmup resume/clear, multi-mask list, undo/redo, preview stub, estimation, tutoriel, auto-save, ia progress) ---
 HTML_TEMPLATE = r"""
-Video Editor
-# ... (topbar, layout inchangés)
-# ... (modes, boutons inchangés)
-↩️ Undo
-↪️ Redo
-# ... (palette, masques liste pour multi)
-Progression IA:
-Tutoriel (cliquer pour masquer)
-1. Upload vidéo local. 2. Dessine masques. 3. Retouche IA. 4. Export téléchargement.
+<!doctype html>
+<html lang="fr"><meta charset="utf-8">
+<title>Video Editor</title>
+<style>
+ :root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb;}
+ *{box-sizing:border-box}
+ body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;margin:16px;color:#111}
+ h1{margin:0 0 8px 0}
+ .topbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
+ .card{border:1px solid var(--b);border-radius:12px;padding:10px;background:#fff}
+ .muted{color:var(--muted);font-size:13px}
+ .layout{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
+ .viewer{max-width:1024px;margin:0 auto; position:relative}
+ .player-wrap{position:relative; padding-bottom: var(--controlsH);}
+ video{display:block;width:100%;height:auto;max-height:58vh;border-radius:10px;box-shadow:0 0 0 1px #ddd}
+ #editCanvas{position:absolute;left:0;right:0;top:0;bottom:var(--controlsH);border-radius:10px;pointer-events:none}
+ .timeline-container{margin-top:10px}
+ .timeline{position:relative;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px;border:1px solid var(--b);border-radius:10px;-webkit-overflow-scrolling:touch;width:100%}
+ .thumb{flex:0 0 auto;display:inline-block;position:relative;transition:transform 0.2s;text-align:center}
+ .thumb:hover{transform:scale(1.05)}
+ .thumb img{height:var(--thumbH,110px);display:block;border-radius:6px;cursor:pointer;border:2px solid transparent;object-fit:cover}
+ .thumb img.sel{border-color:var(--active-border)}
+ .thumb img.sel-strong{outline:3px solid var(--active-border);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--active-border)}
+ .thumb.hasmask::after{content:"★";position:absolute;right:6px;top:4px;color:#f5b700;text-shadow:0 0 3px rgba(0,0,0,0.35);font-size:16px}
+ .thumb-label{font-size:11px;color:var(--muted);margin-top:2px;display:block}
+ .timeline.filter-masked .thumb:not(.hasmask){display:none}
+ .tools .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+ .btn{padding:8px 12px;border-radius:8px;border:1px solid var(--b);background:#f8fafc;cursor:pointer;transition:background 0.2s, border 0.2s}
+ .btn:hover{background:var(--active-bg);border-color:var(--active-border)}
+ .btn.active,.btn.toggled{background:var(--active-bg);border-color:var(--active-border)}
+ .swatch{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;cursor:pointer;transition:box-shadow 0.2s}
+ .swatch.sel{box-shadow:0 0 0 2px var(--active-border)}
+ ul.clean{list-style:none;padding-left:0;margin:6px 0}
+ ul.clean li{margin:2px 0;display:flex;align-items:center;gap:6px}
+ .rename-btn{font-size:12px;padding:2px 4px;border:none;background:transparent;cursor:pointer;color:var(--muted);transition:color 0.2s}
+ .rename-btn:hover{color:#2563eb}
+ .delete-btn{color:#ef4444;font-size:14px;cursor:pointer;transition:color 0.2s}
+ .delete-btn:hover{color:#b91c1c}
+ #loading-indicator{display:none;margin-top:6px;color:#f59e0b}
+ .portion-row{display:flex;gap:6px;align-items:center;margin-top:8px}
+ .portion-input{width:70px}
+ #tl-progress-bar{background:#f3f4f6;border-radius:4px;height:8px;margin-top:10px}
+ #tl-progress-fill{background:#2563eb;height:100%;width:0;border-radius:4px}
+ #popup {position:fixed;top:20%;left:50%;transform:translate(-50%, -50%);background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:1000;display:none;min-width:320px}
+ #popup-progress-bar{background:#f3f4f6;border-radius:4px;height:8px;margin:10px 0}
+ #popup-progress-fill{background:#2563eb;height:100%;width:0;border-radius:4px}
+ #popup-logs {max-height:200px;overflow:auto;font-size:12px;color:#6b7280}
+ .playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--active-border);opacity:.9;pointer-events:none;display:block}
+ #portionBand{position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);background:rgba(37,99,235,.12);pointer-events:none;display:none}
+ #inHandle,#outHandle{position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);width:6px;background:rgba(37,99,235,.9);border-radius:2px;cursor:ew-resize;display:none;pointer-events:auto}
+ #hud{position:absolute;right:10px;top:10px;background:rgba(17,24,39,.6);color:#fff;font-size:12px;padding:4px 8px;border-radius:6px}
+ #toast{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:2000}
+ .toast-item{background:#111827;color:#fff;padding:8px 12px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:.95}
+ #warmupBox{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+ #warmup-progress{background:#f3f4f6;border-radius:4px;height:8px;flex:1}
+ #warmup-progress div{background:#10b981;height:100%;width:0;border-radius:4px}
+ #warmup-resume{margin-left:8px}
+ #warmup-clear{margin-left:8px}
+ #warmup-logs{max-height:120px;overflow:auto;font-size:12px;color:#6b7280}
+ #multiMaskList{max-height:150px;overflow:auto;margin-top:8px}
+ #tutorial {background:#fef9c3;padding:10px;border-radius:8px;margin-top:12px;display:block}
+ #tutorial.hidden {display:none}
+ #iaProgress {background:#f3f4f6;border-radius:4px;height:8px;margin-top:10px}
+ #iaProgress div {background:#2563eb;height:100%;width:0;border-radius:4px}
+ #iaLogs {max-height:100px;overflow:auto;font-size:12px;color:#6b7280;margin-top:4px}
+ .err {color:#ef4444}
+</style>
+<h1>🎬 Video Editor</h1>
+<div class="topbar card">
+ <form action="/upload?redirect=1" method="post" enctype="multipart/form-data" style="display:flex;gap:8px;align-items:center" id="uploadForm">
+ <strong>Charger une vidéo :</strong>
+ <input type="file" name="file" accept="video/*" required>
+ <button class="btn" type="submit">Uploader</button>
+ </form>
+ <span class="muted" id="msg">__MSG__</span>
+ <span class="muted">Liens : <a href="/docs" target="_blank">/docs</a> • <a href="/files" target="_blank">/files</a></span>
+</div>
+<div class="card" style="margin-bottom:10px">
+ <div id="warmupBox">
+  <button id="warmupBtn" class="btn">⚡ Warm-up modèles</button>
+  <button id="warmup-resume" class="btn" style="display:none">Reprendre</button>
+  <button id="warmup-clear" class="btn" style="display:none">Effacer logs</button>
+  <div id="warmup-progress"><div></div></div>
+ </div>
+ <div id="warmup-logs" class="muted"></div>
+</div>
+<div class="layout">
+ <div>
+  <div class="viewer card" id="viewerCard">
+   <div class="player-wrap" id="playerWrap">
+    <video id="player" controls playsinline poster="/poster/__VID__">
+     <source id="vidsrc" src="/data/__VID__" type="video/mp4">
+    </video>
+    <canvas id="editCanvas"></canvas>
+    <div id="hud"></div>
+   </div>
+   <div class="muted" style="margin-top:6px">
+    <label>Frame # <input id="goFrame" type="number" min="1" value="1" style="width:90px"> </label>
+    <label>à <input id="endPortion" class="portion-input" type="number" min="1" placeholder="Optionnel pour portion"></label>
+    <button id="isolerBoucle" class="btn">Isoler & Boucle</button>
+    <button id="resetFull" class="btn" style="display:none">Retour full</button>
+    <span id="posInfo" style="margin-left:10px"></span>
+    <span id="status" style="margin-left:10px;color:#2563eb"></span>
+   </div>
+  </div>
+  <div class="card timeline-container">
+   <h4 style="margin:2px 0 8px 0">Timeline</h4>
+   <div class="row" id="tlControls" style="margin:4px 0 8px 0;gap:8px;align-items:center">
+     <button id="btnFollow" class="btn" title="Centrer pendant la lecture (OFF par défaut)">🔭 Suivre</button>
+     <button id="btnFilterMasked" class="btn" title="Afficher uniquement les frames avec masque">⭐ Masquées</button>
+     <label class="muted">Zoom <input id="zoomSlider" type="range" min="80" max="180" value="110" step="10"></label>
+     <label class="muted">Aller à # <input id="gotoInput" type="number" min="1" style="width:90px"></label>
+     <button id="gotoBtn" class="btn">Aller</button>
+     <span class="muted" id="maskedCount"></span>
+   </div>
+   <div id="timeline" class="timeline"></div>
+   <div class="muted" id="tlNote" style="margin-top:6px;display:none">Mode secours: vignettes générées dans le navigateur.</div>
+   <div id="loading-indicator">Chargement des frames...</div>
+   <div id="tl-progress-bar"><div id="tl-progress-fill"></div></div>
+  </div>
+ </div>
+ <div class="card tools">
+  <div class="row"><span class="muted">Mode : <strong id="modeLabel">Lecture</strong></span></div>
+  <div class="row" style="margin-top:6px">
+   <button id="btnEdit" class="btn" title="Passer en mode édition pour dessiner un masque">✏️ Éditer cette image</button>
+   <button id="btnBack" class="btn" style="display:none" title="Retour au mode lecture">🎬 Retour lecteur</button>
+   <button id="btnSave" class="btn" style="display:none" title="Enregistrer le masque sélectionné">💾 Enregistrer masque</button>
+   <button id="btnClear" class="btn" style="display:none" title="Effacer la sélection actuelle">🧽 Effacer sélection</button>
+   <button id="undoBtn" class="btn" style="display:none">↩️ Undo</button>
+   <button id="redoBtn" class="btn" style="display:none">↪️ Redo</button>
+  </div>
+  <div style="margin-top:10px">
+   <div class="muted">Couleur</div>
+   <div class="row" id="palette" style="margin-top:6px">
+    <div class="swatch" data-c="#10b981" style="background:#10b981" title="Vert"></div>
+    <div class="swatch" data-c="#2563eb" style="background:#2563eb" title="Bleu"></div>
+    <div class="swatch" data-c="#ef4444" style="background:#ef4444" title="Rouge"></div>
+    <div class="swatch" data-c="#f59e0b" style="background:#f59e0b" title="Orange"></div>
+    <div class="swatch" data-c="#a21caf" style="background:#a21caf" title="Violet"></div>
+   </div>
+  </div>
+  <div style="margin-top:12px">
+   <details open>
+    <summary><strong>Masques</strong></summary>
+    <div id="maskList" class="muted">—</div>
+    <div id="multiMaskList" class="muted">—</div>
+    <button class="btn" style="margin-top:8px" id="iaPreviewBtn">🔍 Preview IA</button>
+    <button class="btn" style="margin-top:8px" id="estimateBtn">⏱️ Estimer</button>
+    <div id="iaProgress"><div></div></div>
+    <div id="iaLogs"></div>
+    <button class="btn" style="margin-top:8px" id="exportBtn" title="Exporter la vidéo avec les masques appliqués (bientôt IA)">Exporter vidéo modifiée</button>
+   </details>
+   <div style="margin-top:6px">
+    <strong>Vidéos disponibles</strong>
+    <ul id="fileList" class="clean muted" style="max-height:180px;overflow:auto">Chargement…</ul>
+   </div>
+  </div>
+  <div id="tutorial">
+   <h4>Tutoriel</h4>
+   <p>1. Upload vidéo local. 2. Dessine masques. 3. Retouche IA. 4. Export téléchargement.</p>
+   <button onclick="this.parentElement.classList.add('hidden')">Masquer</button>
+  </div>
+ </div>
+</div>
+<div id="popup">
+ <h3>Génération thumbs en cours</h3>
+ <div id="popup-progress-bar"><div id="popup-progress-fill"></div></div>
+ <div id="popup-logs"></div>
+</div>
+<div id="toast"></div>
+<script>
+const serverVid = "__VID__";
+const serverMsg = "__MSG__";
+document.getElementById('msg').textContent = serverMsg;
+// Elements
+const statusEl = document.getElementById('status');
+const player = document.getElementById('player');
+const srcEl = document.getElementById('vidsrc');
+const canvas = document.getElementById('editCanvas');
+const ctx = canvas.getContext('2d');
+const modeLabel = document.getElementById('modeLabel');
+const btnEdit = document.getElementById('btnEdit');
+const btnBack = document.getElementById('btnBack');
+const btnSave = document.getElementById('btnSave');
+const btnClear= document.getElementById('btnClear');
+const posInfo = document.getElementById('posInfo');
+const goFrame = document.getElementById('goFrame');
+const palette = document.getElementById('palette');
+const fileList= document.getElementById('fileList');
+const tlBox = document.getElementById('timeline');
+const tlNote = document.getElementById('tlNote');
+const playerWrap = document.getElementById('playerWrap');
+const loadingInd = document.getElementById('loading-indicator');
+const isolerBoucle = document.getElementById('isolerBoucle');
+const resetFull = document.getElementById('resetFull');
+const endPortion = document.getElementById('endPortion');
+const popup = document.getElementById('popup');
+const popupLogs = document.getElementById('popup-logs');
+const tlProgressFill = document.getElementById('tl-progress-fill');
+const popupProgressFill = document.getElementById('popup-progress-fill');
+const btnFollow = document.getElementById('btnFollow');
+const btnFilterMasked = document.getElementById('btnFilterMasked');
+const zoomSlider = document.getElementById('zoomSlider');
+const maskedCount = document.getElementById('maskedCount');
+const hud = document.getElementById('hud');
+const toastWrap = document.getElementById('toast');
+const gotoInput = document.getElementById('gotoInput');
+const gotoBtn = document.getElementById('gotoBtn');
+const tutorial = document.getElementById('tutorial');
+const warmupBtn = document.getElementById('warmupBtn');
+const warmupResume = document.getElementById('warmup-resume');
+const warmupClear = document.getElementById('warmup-clear');
+const warmupProgress = document.getElementById('warmup-progress').firstChild;
+const warmupLogs = document.getElementById('warmup-logs');
+const iaPreviewBtn = document.getElementById('iaPreviewBtn');
+const estimateBtn = document.getElementById('estimateBtn');
+const iaProgress = document.getElementById('iaProgress').firstChild;
+const iaLogs = document.getElementById('iaLogs');
+const multiMaskList = document.getElementById('multiMaskList');
+const undoBtn = document.getElementById('undoBtn');
+const redoBtn = document.getElementById('redoBtn');
+// State
+let vidName = serverVid || '';
+function fileStem(name){ const i = name.lastIndexOf('.'); return i>0 ? name.slice(0,i) : name; }
+let vidStem = '';
+let bustToken = Date.now();
+let fps = 30, frames = 0;
+let currentIdx = 0;
+let mode = 'view';
+let rects = []; // list for multi
+let dragging = false, sx = 0, sy = 0, currentRect = null;
+let color = '#10b981';
+let rectMap = new Map(); // idx -> list of rects
+let history = []; // undo/redo stack
+let historyIdx = -1;
+let masks = [];
+let maskedSet = new Set();
+let timelineUrls = [];
+let portionStart = null;
+let portionEnd = null;
+let loopInterval = null;
+let chunkSize = 50;
+let timelineStart = 0, timelineEnd = 0;
+let viewRangeStart = 0, viewRangeEnd = 0; // portée visible (portion ou full)
+const scrollThreshold = 100;
+let followMode = false;
+let isPaused = true;
+let thumbEls = new Map();
+let lastCenterMs = 0;
+const CENTER_THROTTLE_MS = 150;
+const PENDING_KEY = 've_pending_masks_v1';
+let maskedOnlyMode = false;
+const AUTOSAVE_KEY = 've_autosave_rects_v1';
+// Utils
+function showToast(msg){ const el = document.createElement('div'); el.className='toast-item'; el.textContent=String(msg||''); toastWrap.appendChild(el); setTimeout(()=>{ el.remove(); }, 2000); }
+function ensureOverlays(){
+  if(!document.getElementById('playhead')){ const ph=document.createElement('div'); ph.id='playhead'; ph.className='playhead'; tlBox.appendChild(ph); }
+  if(!document.getElementById('portionBand')){ const pb=document.createElement('div'); pb.id='portionBand'; tlBox.appendChild(pb); }
+  if(!document.getElementById('inHandle')){ const ih=document.createElement('div'); ih.id='inHandle'; tlBox.appendChild(ih); }
+  if(!document.getElementById('outHandle')){ const oh=document.createElement('div'); oh.id='outHandle'; tlBox.appendChild(oh); }
+}
+function playheadEl(){ return document.getElementById('playhead'); }
+function portionBand(){ return document.getElementById('portionBand'); }
+function inHandle(){ return document.getElementById('inHandle'); }
+function outHandle(){ return document.getElementById('outHandle'); }
+function findThumbEl(idx){ return thumbEls.get(idx) || null; }
+function updateHUD(){ const total = frames || 0, cur = currentIdx+1; hud.textContent = `t=${player.currentTime.toFixed(2)}s • #${cur}/${total} • ${fps.toFixed(2)}fps`; }
+function updateSelectedThumb(){
+  tlBox.querySelectorAll('.thumb img.sel, .thumb img.sel-strong').forEach(img=>{ img.classList.remove('sel','sel-strong'); });
+  const el = findThumbEl(currentIdx); if(!el) return; const img = el.querySelector('img');
+  img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong');
+}
+function rawCenterThumb(el){
+  tlBox.scrollLeft = Math.max(0, el.offsetLeft + el.clientWidth/2 - tlBox.clientWidth/2);
+}
+async function ensureThumbVisibleCentered(idx){
+  // Attendre que l’élément + image soient prêts avant de centrer
+  for(let k=0; k<40; k++){
+    const el = findThumbEl(idx);
+    if(el){
+      const img = el.querySelector('img');
+      if(!img.complete || img.naturalWidth === 0){
+        await new Promise(r=>setTimeout(r, 25));
+      }else{
+        rawCenterThumb(el);
+        updatePlayhead();
+        return true;
+      }
+    }else{
+      await new Promise(r=>setTimeout(r, 25));
+    }
+  }
+  return false;
+}
+function centerSelectedThumb(){ ensureThumbVisibleCentered(currentIdx); }
+function updatePlayhead(){
+  ensureOverlays();
+  const el = findThumbEl(currentIdx);
+  const ph = playheadEl();
+  if(!el){ ph.style.display='none'; return; }
+  ph.style.display='block'; ph.style.left = (el.offsetLeft + el.clientWidth/2) + 'px';
+}
+function updatePortionOverlays(){
+  ensureOverlays();
+  const pb = portionBand(), ih = inHandle(), oh = outHandle();
+  if(portionStart==null || portionEnd==null){ pb.style.display='none'; ih.style.display='none'; oh.style.display='none'; return; }
+  const a = findThumbEl(portionStart), b = findThumbEl(portionEnd-1);
+  if(!a || !b){ pb.style.display='none'; ih.style.display='none'; oh.style.display='none'; return; }
+  const left = a.offsetLeft, right = b.offsetLeft + b.clientWidth;
+  pb.style.display='block'; pb.style.left = left+'px'; pb.style.width = Math.max(0, right-left)+'px';
+  ih.style.display='block'; ih.style.left = (left - ih.clientWidth/2) + 'px';
+  oh.style.display='block'; oh.style.left = (right - oh.clientWidth/2) + 'px';
+}
+function nearestFrameIdxFromClientX(clientX){
+  const rect = tlBox.getBoundingClientRect();
+  const xIn = clientX - rect.left + tlBox.scrollLeft;
+  let bestIdx = currentIdx, bestDist = Infinity;
+  for(const [idx, el] of thumbEls.entries()){
+    const mid = el.offsetLeft + el.clientWidth/2;
+    const d = Math.abs(mid - xIn);
+    if(d < bestDist){ bestDist = d; bestIdx = idx; }
+  }
+  return bestIdx;
+}
+function loadPending(){ try{ return JSON.parse(localStorage.getItem(PENDING_KEY) || '[]'); }catch{ return []; } }
+function savePendingList(lst){ localStorage.setItem(PENDING_KEY, JSON.stringify(lst)); }
+function addPending(payload){ const lst = loadPending(); lst.push(payload); savePendingList(lst); }
+async function flushPending(){
+  const lst = loadPending(); if(!lst.length) return;
+  const kept = [];
+  for(const p of lst){
+    try{ const r = await fetch('/mask',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(p)}); if(!r.ok) kept.push(p); }
+    catch{ kept.push(p); }
+  }
+  savePendingList(kept);
+  if(kept.length===0) showToast('Masques hors-ligne synchronisés ✅');
+}
+// Layout
+function syncTimelineWidth(){ const w = playerWrap.clientWidth; tlBox.style.width = w + 'px'; }
+function fitCanvas(){
+  const r=player.getBoundingClientRect();
+  const ctrlH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--controlsH'));
+  canvas.width=Math.round(r.width);
+  canvas.height=Math.round(r.height - ctrlH);
+  canvas.style.width=r.width+'px';
+  canvas.style.height=(r.height - ctrlH)+'px';
+  syncTimelineWidth();
+}
+function timeToIdx(t){ return Math.max(0, Math.min(frames-1, Math.round((fps||30) * t))); }
+function idxToSec(i){ return (fps||30)>0 ? (i / fps) : 0; }
+function setMode(m){
+  mode=m;
+  if(m==='edit'){
+    player.pause();
+    player.controls = false;
+    playerWrap.classList.add('edit-mode');
+    modeLabel.textContent='Édition';
+    btnEdit.style.display='none'; btnBack.style.display='inline-block';
+    btnSave.style.display='inline-block'; btnClear.style.display='inline-block';
+    canvas.style.pointerEvents='auto';
+    rect = rectMap.get(currentIdx) || null; draw();
+  }else{
+    player.controls = true;
+    playerWrap.classList.remove('edit-mode');
+    modeLabel.textContent='Lecture';
+    btnEdit.style.display='inline-block'; btnBack.style.display='none';
+    btnSave.style.display='none'; btnClear.style.display='none';
+    canvas.style.pointerEvents='none';
+    rect=null; draw();
+  }
+}
+function draw(){
+  ctx.clearRect(0,0,canvas.width,canvas.height);
+  if(rect){
+    const x=Math.min(rect.x1,rect.x2), y=Math.min(rect.y1,rect.y2);
+    const w=Math.abs(rect.x2-rect.x1), h=Math.abs(rect.y2-rect.y1);
+    ctx.strokeStyle=rect.color||color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
+    ctx.fillStyle=(rect.color||color)+'28'; ctx.fillRect(x,y,w,h);
+  }
+}
+canvas.addEventListener('mousedown',(e)=>{
+  if(mode!=='edit' || !vidName) return;
+  dragging=true; const r=canvas.getBoundingClientRect();
+  sx=e.clientX-r.left; sy=e.clientY-r.top;
+  rect={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; draw();
+});
+canvas.addEventListener('mousemove',(e)=>{
+  if(!dragging) return;
+  const r=canvas.getBoundingClientRect();
+  rect.x2=e.clientX-r.left; rect.y2=e.clientY-r.top; draw();
+});
+['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{ dragging=false; }));
+btnClear.onclick=()=>{ rect=null; rectMap.delete(currentIdx); draw(); };
+btnEdit.onclick =()=> setMode('edit');
+btnBack.onclick =()=> setMode('view');
+// Palette
+palette.querySelectorAll('.swatch').forEach(el=>{
+  if(el.dataset.c===color) el.classList.add('sel');
+  el.onclick=()=>{
+    palette.querySelectorAll('.swatch').forEach(s=>s.classList.remove('sel'));
+    el.classList.add('sel'); color=el.dataset.c;
+    if(rect){ rect.color=color; draw(); }
+  };
+});
+// === Timeline ===
+async function loadTimelineUrls(){
+  timelineUrls = [];
+  const stem = vidStem, b = bustToken;
+  for(let idx=0; idx<frames; idx++){
+    timelineUrls[idx] = `/thumbs/f_${stem}_${idx}.jpg?b=${b}`;
+  }
+  tlProgressFill.style.width='0%';
+}
+async function renderTimeline(centerIdx){
+  if(!vidName) return;
+  loadingInd.style.display='block';
+  if(timelineUrls.length===0) await loadTimelineUrls();
+  tlBox.innerHTML = ''; thumbEls = new Map(); ensureOverlays();
+  if(maskedOnlyMode){
+    const idxs = Array.from(maskedSet).sort((a,b)=>a-b);
+    for(const i of idxs){ addThumb(i,'append'); }
+    setTimeout(async ()=>{ syncTimelineWidth(); updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); loadingInd.style.display='none'; updatePlayhead(); updatePortionOverlays(); },0);
+    return;
+  }
+  if(portionStart!=null && portionEnd!=null){
+    const s = Math.max(0, portionStart), e = Math.min(frames, portionEnd);
+    const batchSize = 200; // load large portions in batches to avoid lag
+    for (let start = s; start < e; start += batchSize) {
+        const end = Math.min(start + batchSize, e);
+        for(let i=start;i<end;i++){ addThumb(i,'append'); }
+        await new Promise(r=>setTimeout(r, 50)); // breath for UI
+    }
+    setTimeout(async ()=>{ syncTimelineWidth(); updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); loadingInd.style.display='none'; updatePlayhead(); updatePortionOverlays(); },0);
+    return;
+  }
+  await loadWindow(centerIdx ?? currentIdx);
+  loadingInd.style.display='none';
+}
+async function loadWindow(centerIdx){
+  tlBox.innerHTML=''; thumbEls = new Map(); ensureOverlays();
+  const rngStart = (viewRangeStart ?? 0);
+  const rngEnd = (viewRangeEnd ?? frames);
+  const mid = Math.max(rngStart, Math.min(centerIdx, Math.max(rngStart, rngEnd-1)));
+  const start = Math.max(rngStart, Math.min(mid - Math.floor(chunkSize/2), Math.max(rngStart, rngEnd - chunkSize)));
+  const end = Math.min(rngEnd, start + chunkSize);
+  for(let i=start;i<end;i++){ addThumb(i,'append'); }
+  timelineStart = start; timelineEnd = end;
+  setTimeout(async ()=>{
+    syncTimelineWidth();
+    updateSelectedThumb();
+    await ensureThumbVisibleCentered(currentIdx);
+    updatePortionOverlays();
+  },0);
+}
+function addThumb(idx, place='append'){
+  if(thumbEls.has(idx)) return;
+  const wrap=document.createElement('div'); wrap.className='thumb'; wrap.dataset.idx=idx;
+  if(maskedSet.has(idx)) wrap.classList.add('hasmask');
+  const img=new Image(); img.title='frame '+(idx+1);
+  img.src=timelineUrls[idx];
+  img.onerror = () => {
+    const fallback = `/frame_idx?vid=${encodeURIComponent(vidName)}&idx=${idx}`;
+    img.onerror = null;
+    img.src = fallback;
+    img.onload = () => {
+      const nu = `/thumbs/f_${vidStem}_${idx}.jpg?b=${Date.now()}`;
+      timelineUrls[idx] = nu;
+      img.src = nu;
+      img.onload = null;
+    };
+  };
+  if(idx===currentIdx){ img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong'); }
+  img.onclick=async ()=>{
+    currentIdx=idx; player.currentTime=idxToSec(currentIdx);
+    if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
+    updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); updatePlayhead();
+  };
+  wrap.appendChild(img);
+  const label=document.createElement('span'); label.className='thumb-label'; label.textContent = `#${idx+1}`;
+  wrap.appendChild(label);
+  if(place==='append'){ tlBox.appendChild(wrap); }
+  else if(place==='prepend'){ tlBox.insertBefore(wrap, tlBox.firstChild); }
+  else{ tlBox.appendChild(wrap); }
+  thumbEls.set(idx, wrap);
+}
+// Scroll chunk (mode normal uniquement)
+tlBox.addEventListener('scroll', ()=>{
+  if (maskedOnlyMode || (portionStart!=null && portionEnd!=null)){
+    updatePlayhead(); updatePortionOverlays();
+    return;
+  }
+  const scrollLeft = tlBox.scrollLeft, scrollWidth = tlBox.scrollWidth, clientWidth = tlBox.clientWidth;
+  if (scrollWidth - scrollLeft - clientWidth < scrollThreshold && timelineEnd < viewRangeEnd){
+    const newEnd = Math.min(viewRangeEnd, timelineEnd + chunkSize);
+    for(let i=timelineEnd;i<newEnd;i++){ addThumb(i,'append'); }
+    timelineEnd = newEnd;
+  }
+  if (scrollLeft < scrollThreshold && timelineStart > viewRangeStart){
+    const newStart = Math.max(viewRangeStart, timelineStart - chunkSize);
+    for(let i=newStart;i<timelineStart;i++){ addThumb(i,'prepend'); }
+    tlBox.scrollLeft += (timelineStart - newStart) * (110 + 8);
+    timelineStart = newStart;
+  }
+  updatePlayhead(); updatePortionOverlays();
+});
+// Isoler & Boucle
+isolerBoucle.onclick = async ()=>{
+  const start = parseInt(goFrame.value || '1',10) - 1;
+  const end = parseInt(endPortion.value || '',10);
+  if(!endPortion.value || end <= start || end > frames){ alert('Portion invalide (fin > début)'); return; }
+  if (end - start > 1200 && !confirm('Portion très large, cela peut être lent. Continuer ?')) return;
+  portionStart = start; portionEnd = end;
+  viewRangeStart = start; viewRangeEnd = end;
+  player.pause(); isPaused = true;
+  currentIdx = start; player.currentTime = idxToSec(start);
+  await renderTimeline(currentIdx);
+  resetFull.style.display = 'inline-block';
+  startLoop(); updatePortionOverlays();
+};
+function startLoop(){
+  if(loopInterval) clearInterval(loopInterval);
+  if(portionEnd != null){
+    loopInterval = setInterval(()=>{ if(player.currentTime >= idxToSec(portionEnd)) player.currentTime = idxToSec(portionStart); }, 100);
+  }
+}
+resetFull.onclick = async ()=>{
+  portionStart = null; portionEnd = null;
+  viewRangeStart = 0; viewRangeEnd = frames;
+  goFrame.value = 1; endPortion.value = '';
+  player.pause(); isPaused = true;
+  await renderTimeline(currentIdx);
+  resetFull.style.display='none';
+  clearInterval(loopInterval); updatePortionOverlays();
+};
+// Drag IN/OUT
+function attachHandleDrag(handle, which){
+  let draggingH=false;
+  function onMove(e){
+    if(!draggingH) return;
+    const idx = nearestFrameIdxFromClientX(e.clientX);
+    if(which==='in'){ portionStart = Math.min(idx, portionEnd ?? idx+1); goFrame.value = (portionStart+1); }
+    else { portionEnd = Math.max(idx+1, (portionStart ?? idx)); endPortion.value = portionEnd; }
+    viewRangeStart = (portionStart ?? 0); viewRangeEnd = (portionEnd ?? frames);
+    updatePortionOverlays();
+  }
+  handle.addEventListener('mousedown', (e)=>{ draggingH=true; e.preventDefault(); });
+  window.addEventListener('mousemove', onMove);
+  window.addEventListener('mouseup', ()=>{ draggingH=false; });
+}
+ensureOverlays(); attachHandleDrag(document.getElementById('inHandle'), 'in'); attachHandleDrag(document.getElementById('outHandle'), 'out');
+// Progress popup
+async function showProgress(vidStem){
+  popup.style.display = 'block';
+  const interval = setInterval(async () => {
+    const r = await fetch('/progress/' + vidStem);
+    const d = await r.json();
+    tlProgressFill.style.width = d.percent + '%';
+    popupProgressFill.style.width = d.percent + '%';
+    popupLogs.innerHTML = d.logs.map(x=>String(x)).join('<br>');
+    if(d.done){
+      clearInterval(interval);
+      popup.style.display = 'none';
+      await renderTimeline(currentIdx);
+    }
+  }, 800);
+}
+// Meta & boot
+async function loadVideoAndMeta() {
+  if(!vidName){ statusEl.textContent='Aucune vidéo sélectionnée.'; return; }
+  vidStem = fileStem(vidName); bustToken = Date.now();
+  const bust = Date.now();
+  srcEl.src = '/data/'+encodeURIComponent(vidName)+'?t='+bust;
+  player.setAttribute('poster', '/poster/'+encodeURIComponent(vidName)+'?t='+bust);
+  player.load();
+  fitCanvas();
+  statusEl.textContent = 'Chargement vidéo…';
+  try{
+    const r=await fetch('/meta/'+encodeURIComponent(vidName));
+    if(r.ok){
+      const m=await r.json();
+      fps=m.fps||30; frames=m.frames||0;
+      statusEl.textContent = `OK (${frames} frames @ ${fps.toFixed(2)} fps)`;
+      viewRangeStart = 0; viewRangeEnd = frames;
+      await loadTimelineUrls();
+      await loadMasks();
+      currentIdx = 0; player.currentTime = 0;
+      await renderTimeline(0);
+      showProgress(vidStem);
+    }else{
+      statusEl.textContent = 'Erreur meta';
+    }
+  }catch(err){
+    statusEl.textContent = 'Erreur réseau meta';
+  }
+}
+player.addEventListener('loadedmetadata', async ()=>{
+  fitCanvas();
+  if(!frames || frames<=0){
+    try{ const r=await fetch('/meta/'+encodeURIComponent(vidName)); if(r.ok){ const m=await r.json(); fps=m.fps||30; frames=m.frames||0; } }catch{}
+  }
+  currentIdx=0; goFrame.value=1; rectMap.clear(); rect=null; draw();
+});
+window.addEventListener('resize', ()=>{ fitCanvas(); });
+player.addEventListener('pause', ()=>{ isPaused = true; updateSelectedThumb(); centerSelectedThumb(); });
+player.addEventListener('play', ()=>{ isPaused = false; updateSelectedThumb(); });
+player.addEventListener('timeupdate', ()=>{
+  posInfo.textContent='t='+player.currentTime.toFixed(2)+'s';
+  currentIdx=timeToIdx(player.currentTime);
+  if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
+  updateHUD(); updateSelectedThumb(); updatePlayhead();
+  if(followMode && !isPaused){
+    const now = Date.now();
+    if(now - lastCenterMs > CENTER_THROTTLE_MS){ lastCenterMs = now; centerSelectedThumb(); }
+  }
+});
+goFrame.addEventListener('change', async ()=>{
+  if(!vidName) return;
+  const val=Math.max(1, parseInt(goFrame.value||'1',10));
+  player.pause(); isPaused = true;
+  currentIdx=val-1; player.currentTime=idxToSec(currentIdx);
+  if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
+  await renderTimeline(currentIdx);
+  await ensureThumbVisibleCentered(currentIdx);
+});
+// Follow / Filter / Zoom / Goto
+btnFollow.onclick = ()=>{ followMode = !followMode; btnFollow.classList.toggle('toggled', followMode); if(followMode) centerSelectedThumb(); };
+btnFilterMasked.onclick = async ()=>{
+  maskedOnlyMode = !maskedOnlyMode;
+  btnFilterMasked.classList.toggle('toggled', maskedOnlyMode);
+  tlBox.classList.toggle('filter-masked', maskedOnlyMode);
+  await renderTimeline(currentIdx);
+  await ensureThumbVisibleCentered(currentIdx);
+};
+zoomSlider.addEventListener('input', ()=>{ tlBox.style.setProperty('--thumbH', zoomSlider.value + 'px'); });
+async function gotoFrameNum(){
+  const v = parseInt(gotoInput.value||'',10);
+  if(!Number.isFinite(v) || v<1 || v>frames) return;
+  player.pause(); isPaused = true;
+  currentIdx = v-1; player.currentTime = idxToSec(currentIdx);
+  goFrame.value = v;
+  await renderTimeline(currentIdx);
+  await ensureThumbVisibleCentered(currentIdx);
+}
+gotoBtn.onclick = ()=>{ gotoFrameNum(); };
+gotoInput.addEventListener('keydown',(e)=>{ if(e.key==='Enter'){ e.preventDefault(); gotoFrameNum(); } });
+// Drag & drop upload
+const uploadZone = document.getElementById('uploadForm');
+uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.style.borderColor = '#2563eb'; });
+uploadZone.addEventListener('dragleave', () => { uploadZone.style.borderColor = 'transparent'; });
+uploadZone.addEventListener('drop', (e) => {
+  e.preventDefault(); uploadZone.style.borderColor = 'transparent';
+  const file = e.dataTransfer.files[0];
+  if(file && file.type.startsWith('video/')){
+    const fd = new FormData(); fd.append('file', file);
+    fetch('/upload?redirect=1', {method: 'POST', body: fd}).then(() => location.reload());
+  }
+});
+// Export placeholder
+document.getElementById('exportBtn').onclick = () => { console.log('Export en cours... (IA à venir)'); alert('Fonctionnalité export IA en développement !'); };
+// Fichiers & masques
+async function loadFiles(){
+  const r=await fetch('/files'); const d=await r.json();
+  if(!d.items || !d.items.length){ fileList.innerHTML='<li>(aucune)</li>'; return; }
+  fileList.innerHTML='';
+  d.items.forEach(name=>{
+    const li=document.createElement('li');
+    const delBtn = document.createElement('span'); delBtn.className='delete-btn'; delBtn.textContent='❌'; delBtn.title='Supprimer cette vidéo';
+    delBtn.onclick=async()=>{
+      if(!confirm(`Supprimer "${name}" ?`)) return;
+      await fetch('/delete/'+encodeURIComponent(name),{method:'DELETE'});
+      loadFiles(); if(vidName===name){ vidName=''; loadVideoAndMeta(); }
+    };
+    const a=document.createElement('a'); a.textContent=name; a.href='/ui?v='+encodeURIComponent(name); a.title='Ouvrir cette vidéo';
+    li.appendChild(delBtn); li.appendChild(a); fileList.appendChild(li);
+  });
+}
+async function loadMasks(){
+  loadingInd.style.display='block';
+  const box=document.getElementById('maskList');
+  const r=await fetch('/mask/'+encodeURIComponent(vidName));
+  const d=await r.json();
+  masks=d.masks||[];
+  maskedSet = new Set();
+  rectMap.clear();
+  masks.forEach(m=>{
+    const idx = m.frame_idx;
+    maskedSet.add(idx);
+    if(!rectMap.has(idx)) rectMap.set(idx, []);
+    if(m.shape==='rect'){
+      const [x1,y1,x2,y2] = m.points;
+      const normW = canvas.clientWidth, normH = canvas.clientHeight;
+      rectMap.get(idx).push({x1:x1*normW, y1:y1*normH, x2:x2*normW, y2:y2*normH, color:m.color, id:m.id, note:m.note});
+    }
+  });
+  maskedCount.textContent = `(${maskedSet.size} ⭐)`;
+  if(!masks.length){ box.textContent='—'; loadingInd.style.display='none'; return; }
+  box.innerHTML='';
+  const ul=document.createElement('ul'); ul.className='clean';
+  masks.forEach(m=>{
+    const li=document.createElement('li');
+    const fr=(parseInt(m.frame_idx||0,10)+1);
+    const t=(m.time_s||0).toFixed(2);
+    const col=m.color||'#10b981';
+    const label=m.note||(`frame ${fr}`);
+    li.innerHTML = `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${col};margin-right:6px;vertical-align:middle"></span> <strong>${label.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</strong> — #${fr} · t=${t}s`;
+    const renameBtn=document.createElement('span'); renameBtn.className='rename-btn'; renameBtn.textContent='✏️'; renameBtn.title='Renommer le masque';
+    renameBtn.onclick=async()=>{
+      const nv=prompt('Nouveau nom du masque :', label);
+      if(nv===null) return;
+      const rr=await fetch('/mask/rename',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id,note:nv})});
+      if(rr.ok){ await loadMasks(); await renderTimeline(currentIdx); draw(); showToast('Masque renommé ✅'); } else {
+        const txt = await rr.text(); alert('Échec renommage: ' + rr.status + ' ' + txt);
+      }
+    };
+    const delMaskBtn=document.createElement('span'); delMaskBtn.className='delete-btn'; delMaskBtn.textContent='❌'; delMaskBtn.title='Supprimer ce masque';
+    delMaskBtn.onclick=async()=>{
+      if(!confirm(`Supprimer masque "${label}" ?`)) return;
+      const rr=await fetch('/mask/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id})});
+      if(rr.ok){ await loadMasks(); await renderTimeline(currentIdx); draw(); showToast('Masque supprimé ✅'); } else {
+        const txt = await rr.text(); alert('Échec suppression: ' + rr.status + ' ' + txt);
+      }
+    };
+    li.appendChild(renameBtn); li.appendChild(delMaskBtn); ul.appendChild(li);
+  });
+  box.appendChild(ul);
+  loadingInd.style.display='none';
+  if(mode === 'edit'){ loadMultiMasks(); loadAutoRects(); }
+}
+function loadMultiMasks(){
+  multiMaskList.innerHTML = '';
+  const curRects = rectMap.get(currentIdx) || [];
+  if(!curRects.length){ multiMaskList.textContent = 'Aucun masque pour cette frame'; return; }
+  const ul = document.createElement('ul'); ul.className='clean';
+  curRects.forEach((r, i) => {
+    const li = document.createElement('li');
+    li.innerHTML = `<span style="background:${r.color};width:10px;height:10px;border-radius:50%"></span> Masque ${i+1}`;
+    const del = document.createElement('span'); del.className='delete-btn'; del.textContent='❌';
+    del.onclick = () => { rects.splice(i,1); pushHistory(); draw(); loadMultiMasks(); saveAutoRects(); };
+    li.appendChild(del);
+    ul.appendChild(li);
+  });
+  multiMaskList.appendChild(ul);
+}
+// Save mask (+ cache)
+btnSave.onclick = async ()=>{
+  if(rects.length === 0 || !vidName){ alert('Aucune sélection.'); return; }
+  for(const rect of rects){
+    if(!rect.id){ // only save new
+      const defaultName = `frame ${currentIdx+1}`;
+      const note = (prompt('Nom du masque (optionnel) :', defaultName) || defaultName).trim();
+      const normW = canvas.clientWidth, normH = canvas.clientHeight;
+      const x=Math.min(rect.x1,rect.x2)/normW;
+      const y=Math.min(rect.y1,rect.y2)/normH;
+      const w=Math.abs(rect.x2-rect.x1)/normW;
+      const h=Math.abs(rect.y2-rect.y1)/normH;
+      const payload={vid:vidName,time_s:player.currentTime,frame_idx:currentIdx,shape:'rect',points:[x,y,x+w,y+h],color:rect.color,note:note};
+      addPending(payload);
+      try{
+        const r=await fetch('/mask',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
+        if(r.ok){
+          const d = await r.json();
+          rect.id = d.mask.id; rect.note = note;
+          const lst = loadPending().filter(x => !(x.vid===payload.vid && x.frame_idx===payload.frame_idx && x.time_s===payload.time_s));
+          savePendingList(lst);
+          rectMap.set(currentIdx, [...rects]);
+          await loadMasks(); await renderTimeline(currentIdx);
+          showToast('Masque enregistré ✅');
+          localStorage.removeItem(AUTOSAVE_KEY); // clear auto-save after save
+        } else {
+          const txt = await r.text();
+          if (r.status === 500) {
+            alert('Erreur serveur - Vérifiez les logs ou réessayez.');
+          } else {
+            alert('Échec enregistrement masque: ' + r.status + ' ' + txt);
+          }
+        }
+      }catch(e){
+        alert('Erreur réseau lors de l’enregistrement du masque.');
+      }
+    }
+  }
+};
+// Warm-up UI
+warmupBtn.onclick = async () => {
+  try {
+    await fetch('/warmup/start', {method: 'POST'});
+  } catch {}
+  const poll = async () => {
+    const r = await fetch('/warmup/status');
+    const d = await r.json();
+    warmupProgress.style.width = d.percent + '%';
+    warmupLogs.innerHTML = d.logs.join('<br>');
+    warmupResume.style.display = d.state === 'error' ? 'inline-block' : 'none';
+    warmupClear.style.display = (d.state === 'done' || d.state === 'error') ? 'inline-block' : 'none';
+    if (d.state === 'error') warmupLogs.classList.add('err'); else warmupLogs.classList.remove('err');
+    if (d.running) setTimeout(poll, 1000);
+  };
+  poll();
+};
+warmupResume.onclick = async () => {
+  try {
+    await fetch('/warmup/resume', {method: 'POST'});
+  } catch {}
+  const poll = async () => {
+    const r = await fetch('/warmup/status');
+    const d = await r.json();
+    warmupProgress.style.width = d.percent + '%';
+    warmupLogs.innerHTML = d.logs.join('<br>');
+    warmupResume.style.display = d.state === 'error' ? 'inline-block' : 'none';
+    warmupClear.style.display = (d.state === 'done' || d.state === 'error') ? 'inline-block' : 'none';
+    if (d.state === 'error') warmupLogs.classList.add('err'); else warmupLogs.classList.remove('err');
+    if (d.running) setTimeout(poll, 1000);
+  };
+  poll();
+};
+warmupClear.onclick = async () => {
+  await fetch('/warmup/clear_logs', {method: 'POST'});
+  warmupLogs.innerHTML = '';
+};
+iaPreviewBtn.onclick = () => { alert('En développement, switch GPU'); };
+estimateBtn.onclick = async () => {
+  const r = await fetch('/estimate?vid=' + encodeURIComponent(vidName) + '&masks_count=' + masks.length);
+  const d = await r.json();
+  alert(`Temps: ${d.time_min}, VRAM: ${d.vram_gb}`);
+};
+setInterval(async () => {
+  if(vidName){
+    const r = await fetch('/progress_ia?vid=' + encodeURIComponent(vidName));
+    const d = await r.json();
+    iaProgress.style.width = d.percent + '%';
+    iaLogs.textContent = d.log;
+  }
+}, 2000);
+tutorial.querySelector('button').onclick = () => tutorial.classList.add('hidden');
+function saveAutoRects(){ localStorage.setItem(AUTOSAVE_KEY, JSON.stringify({vid:vidName, idx:currentIdx, rects:rects})); }
+function loadAutoRects(){ 
+  try{ 
+    const d = JSON.parse(localStorage.getItem(AUTOSAVE_KEY) || '{}'); 
+    if(d.vid === vidName && d.idx === currentIdx){ rects = d.rects || []; draw(); loadMultiMasks(); } 
+  }catch{} 
+}
+// Boot
+async function boot(){
+  const lst = JSON.parse(localStorage.getItem('ve_pending_masks_v1') || '[]'); if(lst.length){ /* flush pending si besoin */ }
+  await loadFiles();
+  if(serverVid){ vidName=serverVid; await loadVideoAndMeta(); }
+  else{ const qs=new URLSearchParams(location.search); const v=qs.get('v')||''; if(v){ vidName=v; await loadVideoAndMeta(); } }
+}
+boot();
+// Hide controls in edit-mode
+const style = document.createElement('style');
+style.textContent = `.player-wrap.edit-mode video::-webkit-media-controls { display: none !important; } .player-wrap.edit-mode video::before { content: none !important; }`;
+document.head.appendChild(style);
+</script>
+</html>
 """
-# ... (ui func inchangée)
 @app.get("/ui", response_class=HTMLResponse, tags=["meta"])
 def ui(v: Optional[str] = "", msg: Optional[str] = ""):
   vid = v or ""
@@ -259,7 +1421,7 @@ HTML_TEMPLATE = r"""
 <html lang="fr"><meta charset="utf-8">
 <title>Video Editor</title>
 <style>
- :root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb}
+ :root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb;}
  *{box-sizing:border-box}
  body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;margin:16px;color:#111}
  h1{margin:0 0 8px 0}
@@ -308,17 +1470,33 @@ HTML_TEMPLATE = r"""
  #hud{position:absolute;right:10px;top:10px;background:rgba(17,24,39,.6);color:#fff;font-size:12px;padding:4px 8px;border-radius:6px}
  #toast{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:2000}
  .toast-item{background:#111827;color:#fff;padding:8px 12px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:.95}
+ #warmupBox{display:flex;align-items:center;gap:8px;margin-bottom:8px}
+ #warmup-progress{background:#f3f4f6;border-radius:4px;height:8px;flex:1}
+ #warmup-progress div{background:#10b981;height:100%;width:0;border-radius:4px}
+ #warmup-resume{margin-left:8px;display:none}
+ #warmup-clear{margin-left:8px;display:none}
+ #warmup-logs{max-height:120px;overflow:auto;font-size:12px;color:#6b7280}
+ .err{color:#ef4444}
 </style>
 <h1>🎬 Video Editor</h1>
 <div class="topbar card">
  <form action="/upload?redirect=1" method="post" enctype="multipart/form-data" style="display:flex;gap:8px;align-items:center" id="uploadForm">
-  <strong>Charger une vidéo :</strong>
-  <input type="file" name="file" accept="video/*" required>
-  <button class="btn" type="submit">Uploader</button>
+ <strong>Charger une vidéo :</strong>
+ <input type="file" name="file" accept="video/*" required>
+ <button class="btn" type="submit">Uploader</button>
  </form>
  <span class="muted" id="msg">__MSG__</span>
  <span class="muted">Liens : <a href="/docs" target="_blank">/docs</a> • <a href="/files" target="_blank">/files</a></span>
 </div>
+<div class="card" style="margin-bottom:10px">
+ <div id="warmupBox">
+  <button id="warmupBtn" class="btn">⚡ Warm-up modèles</button>
+  <button id="warmup-resume" class="btn">Reprendre</button>
+  <button id="warmup-clear" class="btn">Effacer logs</button>
+  <div id="warmup-progress"><div></div></div>
+ </div>
+ <div id="warmup-logs" class="muted"></div>
+</div>
 <div class="layout">
  <div>
   <div class="viewer card" id="viewerCard">
@@ -563,40 +1741,62 @@ function setMode(m){
     modeLabel.textContent='Édition';
     btnEdit.style.display='none'; btnBack.style.display='inline-block';
     btnSave.style.display='inline-block'; btnClear.style.display='inline-block';
+    undoBtn.style.display='inline-block'; redoBtn.style.display='inline-block';
     canvas.style.pointerEvents='auto';
-    rect = rectMap.get(currentIdx) || null; draw();
+    rects = rectMap.get(currentIdx) || []; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); updateUndoRedo(); loadAutoRects();
   }else{
     player.controls = true;
     playerWrap.classList.remove('edit-mode');
     modeLabel.textContent='Lecture';
     btnEdit.style.display='inline-block'; btnBack.style.display='none';
     btnSave.style.display='none'; btnClear.style.display='none';
+    undoBtn.style.display='none'; redoBtn.style.display='none';
     canvas.style.pointerEvents='none';
-    rect=null; draw();
+    rects=[]; draw();
   }
 }
 function draw(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
-  if(rect){
-    const x=Math.min(rect.x1,rect.x2), y=Math.min(rect.y1,rect.y2);
-    const w=Math.abs(rect.x2-rect.x1), h=Math.abs(rect.y2-rect.y1);
-    ctx.strokeStyle=rect.color||color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
-    ctx.fillStyle=(rect.color||color)+'28'; ctx.fillRect(x,y,w,h);
-  }
+  rects.forEach(r => {
+    const x=Math.min(r.x1,r.x2), y=Math.min(r.y1,r.y2);
+    const w=Math.abs(r.x2-r.x1), h=Math.abs(r.y2-r.y1);
+    ctx.strokeStyle=r.color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
+    ctx.fillStyle=r.color+'28'; ctx.fillRect(x,y,w,h);
+  });
 }
 canvas.addEventListener('mousedown',(e)=>{
   if(mode!=='edit' || !vidName) return;
   dragging=true; const r=canvas.getBoundingClientRect();
   sx=e.clientX-r.left; sy=e.clientY-r.top;
-  rect={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; draw();
+  currentRect={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; rects.push(currentRect); draw(); saveAutoRects();
 });
 canvas.addEventListener('mousemove',(e)=>{
   if(!dragging) return;
   const r=canvas.getBoundingClientRect();
-  rect.x2=e.clientX-r.left; rect.y2=e.clientY-r.top; draw();
+  currentRect.x2=e.clientX-r.left; currentRect.y2=e.clientY-r.top; draw();
 });
-['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{ dragging=false; }));
-btnClear.onclick=()=>{ rect=null; rectMap.delete(currentIdx); draw(); };
+['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{
+  dragging=false;
+  if(currentRect){ pushHistory(); currentRect = null; }
+}));
+function pushHistory(){ 
+  history = history.slice(0, historyIdx + 1); 
+  history.push(JSON.stringify(rects)); 
+  historyIdx++; 
+  updateUndoRedo(); 
+  saveAutoRects(); 
+}
+function updateUndoRedo(){
+  undoBtn.disabled = historyIdx <= 0;
+  redoBtn.disabled = historyIdx >= history.length - 1;
+}
+undoBtn.onclick = () => { 
+  if(historyIdx > 0){ historyIdx--; rects = JSON.parse(history[historyIdx]); draw(); updateUndoRedo(); saveAutoRects(); loadMultiMasks(); } 
+};
+redoBtn.onclick = () => { 
+  if(historyIdx < history.length - 1){ historyIdx++; rects = JSON.parse(history[historyIdx]); draw(); updateUndoRedo(); saveAutoRects(); loadMultiMasks(); } 
+};
+btnClear.onclick=()=>{ if(rects.length) rects.pop(); pushHistory(); draw(); loadMultiMasks(); saveAutoRects(); };
 btnEdit.onclick =()=> setMode('edit');
 btnBack.onclick =()=> setMode('view');
 // Palette
@@ -605,7 +1805,7 @@ palette.querySelectorAll('.swatch').forEach(el=>{
   el.onclick=()=>{
     palette.querySelectorAll('.swatch').forEach(s=>s.classList.remove('sel'));
     el.classList.add('sel'); color=el.dataset.c;
-    if(rect){ rect.color=color; draw(); }
+    if(currentRect){ currentRect.color=color; draw(); }
   };
 });
 // === Timeline ===
@@ -630,7 +1830,12 @@ async function renderTimeline(centerIdx){
   }
   if(portionStart!=null && portionEnd!=null){
     const s = Math.max(0, portionStart), e = Math.min(frames, portionEnd);
-    for(let i=s;i<e;i++){ addThumb(i,'append'); }
+    const batchSize = 200; // load large portions in batches
+    for(let bstart=s; bstart<e; bstart+=batchSize){
+      const bend = Math.min(bstart + batchSize, e);
+      for(let i=bstart;i<bend;i++){ addThumb(i,'append'); }
+      await new Promise(r=>setTimeout(r, 50)); // UI breath
+    }
     setTimeout(async ()=>{ syncTimelineWidth(); updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); loadingInd.style.display='none'; updatePlayhead(); updatePortionOverlays(); },0);
     return;
   }
@@ -641,8 +1846,8 @@ async function loadWindow(centerIdx){
   tlBox.innerHTML=''; thumbEls = new Map(); ensureOverlays();
   const rngStart = (viewRangeStart ?? 0);
   const rngEnd = (viewRangeEnd ?? frames);
-  const mid = Math.max(rngStart, Math.min(centerIdx, max(rngStart, rngEnd-1)));
-  const start = Math.max(rngStart, min(mid - Math.floor(chunkSize/2), max(rngStart, rngEnd - chunkSize)));
+  const mid = Math.max(rngStart, Math.min(centerIdx, Math.max(rngStart, rngEnd-1)));
+  const start = Math.max(rngStart, Math.min(mid - Math.floor(chunkSize/2), Math.max(rngStart, rngEnd - chunkSize)));
   const end = Math.min(rngEnd, start + chunkSize);
   for(let i=start;i<end;i++){ addThumb(i,'append'); }
   timelineStart = start; timelineEnd = end;
@@ -673,14 +1878,14 @@ function addThumb(idx, place='append'){
   if(idx===currentIdx){ img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong'); }
   img.onclick=async ()=>{
     currentIdx=idx; player.currentTime=idxToSec(currentIdx);
-    if(mode==='edit'){ rect = rectMap.get(currentIdx)||null; draw(); }
+    if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
     updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); updatePlayhead();
   };
   wrap.appendChild(img);
   const label=document.createElement('span'); label.className='thumb-label'; label.textContent = `#${idx+1}`;
   wrap.appendChild(label);
   if(place==='append'){ tlBox.appendChild(wrap); }
-  else if(place='prepend'){ tlBox.insertBefore(wrap, tlBox.firstChild); }
+  else if(place==='prepend'){ tlBox.insertBefore(wrap, tlBox.firstChild); }
   else{ tlBox.appendChild(wrap); }
   thumbEls.set(idx, wrap);
 }