Update app.py

app.py

@@ -1,18 +1,9 @@
-# app.py — Video Editor API (v0.8.3)
-#
-# Changements clés v0.8.3 par rapport à v0.8.2/v0.5.9 :
-# - **Multi-rectangles par frame** côté UI: les rectangles enregistrés ne disparaissent plus.
-#   • rectMap: Map[int, List[RectNorm]] (coordonnées normalisées 0..1).
-#   • Le dessin superpose tous les masques enregistrés sur la frame courante + le brouillon en cours.
-#   • Après un save, le brouillon est vidé mais les masques existants restent affichés.
-# - **Sauvegarde de masques robuste**: verrou global + écriture atomique (tmp + os.replace) pour éviter JSON corrompu
-#   en cas de double-clic/requests concurrentes. Retour d'erreur JSON propre au lieu d'une 500 HTML générique.
-# - **Warm-up modèle**: déjà OK chez toi; ici on garde la version robuste (heartbeat, logs, poursuite en cas d'échec).
-#   • Pas d'échec si HfHubHTTPError indisponible: fallback sur Exception.
-#   • /warmup/clear pour purger les logs depuis l'UI.
-# - **Aller à #** centré pixel-perfect (conservé) + portion 100% fiable (début inclus, fin exclusive).
-#
-# NB: Ce fichier est autonome (FastAPI + UI HTML/JS).
+# 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
 
 from fastapi import FastAPI, UploadFile, File, HTTPException, Request, Body, Response
 from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse
@@ -28,7 +19,7 @@ import httpx
 
 print("[BOOT] Video Editor API starting…")
 
-# ----------------------- POINTEUR BACKEND (inchangé) ------------------------
+# --- POINTEUR DE BACKEND -----------------------------------------------------
 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}
@@ -54,154 +45,19 @@ def get_backend_base() -> str:
 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")
+app = FastAPI(title="Video Editor API", version="0.8.2")
 
+# --- DATA DIRS ----------------------------------------------------------------
 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)
 
-# Verrou pour écriture JSON des masques (anti course)
-_mask_io_lock = threading.Lock()
-
 app.mount("/data", StaticFiles(directory=str(DATA_DIR)), name="data")
 app.mount("/thumbs", StaticFiles(directory=str(THUMB_DIR)), name="thumbs")
 
-# ----------------------------- WARM-UP STATE --------------------------------
-_warmup_state = {
-    "status": "idle",          # idle|running|done|error
-    "current": None,            # repo_id en cours
-    "done": [],                 # repos OK
-    "errors": [],               # tuples (repo, str(err))
-    "logs": [],                 # dernières lignes
-    "started_at": None,
-    "ended_at": None,
-}
-
-_warmup_lock = threading.Lock()
-
-
-def _warm_log(msg: str):
-    with _warmup_lock:
-        ts = time.strftime("%H:%M:%S")
-        _warmup_state["logs"].append(f"[{ts}] {msg}")
-        # Conserver les 500 dernières lignes max
-        if len(_warmup_state["logs"]) > 500:
-            _warmup_state["logs"] = _warmup_state["logs"][-500:]
-
-
-def _do_warmup():
-    """Télécharge les modèles depuis le Hub de façon séquentielle.
-    S'il y a erreur sur un repo, on log et on continue les suivants.
-    """
-    with _warmup_lock:
-        _warmup_state.update({
-            "status": "running",
-            "current": None,
-            "done": [],
-            "errors": [],
-            "started_at": time.time(),
-            "ended_at": None,
-        })
-
-    # Import tardif pour éviter d'alourdir le boot du Space
-    try:
-        from huggingface_hub import snapshot_download
-        try:
-            # Certaines versions exposent l'exception ailleurs
-            from huggingface_hub.utils import HfHubHTTPError  # type: ignore
-        except Exception:  # pragma: no cover
-            class HfHubHTTPError(Exception):
-                pass
-    except Exception as e:  # Import fatal -> on sort
-        _warm_log(f"ERREUR import huggingface_hub: {e}")
-        with _warmup_lock:
-            _warmup_state["status"] = "error"
-            _warmup_state["ended_at"] = time.time()
-        return
-
-    repos: List[str] = [
-        "facebook/sam2-hiera-large",
-        "lixiaowen/diffuEraser",
-        "runwayml/stable-diffusion-v1-5",
-        "stabilityai/sd-vae-ft-mse",
-        # Ajoute/retire selon besoin
-    ]
-
-    # Emplacement cache HF (persiste tant que l'espace n'est pas rebuild/GC)
-    HF_HOME = Path(os.getenv("HF_HOME", "/root/.cache/huggingface")).expanduser()
-    HF_HOME.mkdir(parents=True, exist_ok=True)
-
-    for repo in repos:
-        with _warmup_lock:
-            _warmup_state["current"] = repo
-        _warm_log(f"Téléchargement: {repo}")
-        try:
-            dest = HF_HOME / repo.replace("/", "__")
-            # skip s'il y a déjà des fichiers (warm-up one-shot)
-            if dest.exists() and any(dest.iterdir()):
-                _warm_log(f"→ Déjà présent, skip: {repo}")
-                with _warmup_lock:
-                    _warmup_state["done"].append(repo)
-                continue
-
-            _ = snapshot_download(repo_id=repo, local_dir=str(dest), local_dir_use_symlinks=False)
-            _warm_log(f"OK: {repo}")
-            with _warmup_lock:
-                _warmup_state["done"].append(repo)
-        except Exception as e:  # HfHubHTTPError ou autre
-            _warm_log(f"ERREUR {repo}: {e}")
-            with _warmup_lock:
-                _warmup_state["errors"].append((repo, str(e)))
-        finally:
-            # Heartbeat pour l'UI
-            time.sleep(0.25)
-
-    with _warmup_lock:
-        _warmup_state["status"] = "done" if not _warmup_state["errors"] else "error"
-        _warmup_state["ended_at"] = time.time()
-    _warm_log("Warm-up terminé.")
-
-
-@app.post("/warmup/start", tags=["hub"])
-def warmup_start():
-    with _warmup_lock:
-        if _warmup_state["status"] == "running":
-            return {"ok": True, "status": "running"}
-        _warmup_state["logs"].clear()
-    t = threading.Thread(target=_do_warmup, daemon=True)
-    t.start()
-    return {"ok": True, "status": "running"}
-
-
-@app.get("/warmup/status", tags=["hub"])
-def warmup_status():
-    with _warmup_lock:
-        return {
-            "status": _warmup_state["status"],
-            "current": _warmup_state["current"],
-            "done": list(_warmup_state["done"]),
-            "errors": list(_warmup_state["errors"]),
-            "logs": list(_warmup_state["logs"]),
-            "started_at": _warmup_state["started_at"],
-            "ended_at": _warmup_state["ended_at"],
-        }
-
-
-@app.post("/warmup/clear", tags=["hub"])
-def warmup_clear():
-    with _warmup_lock:
-        _warmup_state["logs"].clear()
-        _warmup_state["current"] = None
-        _warmup_state["done"].clear()
-        _warmup_state["errors"].clear()
-        _warmup_state["status"] = "idle"
-        _warmup_state["started_at"] = None
-        _warmup_state["ended_at"] = None
-    return {"ok": True}
-
-# ------------------------------ PROXY (idem) --------------------------------
+# --- PROXY VERS LE BACKEND ----------------------------------------------------
 @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("/")
@@ -220,9 +76,11 @@ async def proxy_all(full_path: str, request: Request):
     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)
 
-# ---------------------------- Helpers & Progress -----------------------------
+# --- THUMBS PROGRESS (vid_stem -> state) -------------------------------------
 progress_data: Dict[str, Dict[str, Any]] = {}
 
+# --- HELPERS ------------------------------------------------------------------
+
 def _is_video(p: Path) -> bool:
     return p.suffix.lower() in {".mp4", ".mov", ".mkv", ".webm"}
 
@@ -321,14 +179,10 @@ def _load_masks(vid: str) -> Dict[str, Any]:
             print(f"[MASK] Read fail {vid}: {e}", file=sys.stdout)
     return {"video": vid, "masks": []}
 
-def _save_masks_atomic(vid: str, data: Dict[str, Any]):
-    f = _mask_file(vid)
-    tmp = f.with_suffix(".json.tmp")
-    with _mask_io_lock:
-        tmp.write_text(json.dumps(data, ensure_ascii=False, indent=2), encoding="utf-8")
-        os.replace(tmp, f)
+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")
 
-# ------------------------------ Thumbs async --------------------------------
+# --- THUMBS GENERATION BG -----------------------------------------------------
 
 def _gen_thumbs_background(video: Path, vid_stem: str):
     progress_data[vid_stem] = {'percent': 0, 'logs': [], 'done': False}
@@ -407,28 +261,105 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
         progress_data[vid_stem]['logs'].append(f"Erreur: {e}")
         progress_data[vid_stem]['done'] = True
 
-# ---------------------------------- API -------------------------------------
+# --- WARM-UP (Hub) ------------------------------------------------------------
+from huggingface_hub import snapshot_download
+try:
+    from huggingface_hub.utils import HfHubHTTPError  # 0.13+
+except Exception:
+    class HfHubHTTPError(Exception):
+        pass
+
+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": "",
+}
+
+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",
+]
+
+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():
+    token = os.getenv("HF_TOKEN", None)
+    warmup_state.update({
+        "state": "running", "running": True, "percent": 0,
+        "idx": 0, "total": len(WARMUP_MODELS), "current": "",
+        "started_at": time.time(), "finished_at": None, "last_error": "",
+        "log": []
+    })
+    try:
+        total = len(WARMUP_MODELS)
+        for i, repo in enumerate(WARMUP_MODELS):
+            warmup_state["current"] = repo
+            warmup_state["idx"] = i
+            base_pct = int((i / max(1, total)) * 100)
+            warmup_state["percent"] = min(99, base_pct)
+            _append_warmup_log(f"➡️ Téléchargement: {repo}")
+            try:
+                snapshot_download(repo_id=repo, token=token)
+                _append_warmup_log(f"✅ OK: {repo}")
+            except HfHubHTTPError as he:
+                _append_warmup_log(f"⚠️ HubHTTPError {repo}: {he}")
+            except Exception as e:
+                _append_warmup_log(f"⚠️ Erreur {repo}: {e}")
+            # après chaque repo
+            warmup_state["percent"] = int(((i+1) / max(1, total)) * 100)
+        warmup_state.update({"state":"done","running":False,"finished_at":time.time(),"current":"","idx":total})
+    except Exception as e:
+        warmup_state.update({"state":"error","running":False,"last_error":str(e),"finished_at":time.time()})
+        _append_warmup_log(f"❌ Warm-up erreur: {e}")
+
+@app.post("/warmup/start", tags=["warmup"])
+def warmup_start():
+    if warmup_state.get("running"):
+        return {"ok": False, "detail": "already running", "state": warmup_state}
+    t = threading.Thread(target=_do_warmup, daemon=True)
+    t.start()
+    return {"ok": True, "state": warmup_state}
+
+@app.get("/warmup/status", tags=["warmup"])
+def warmup_status():
+    return warmup_state
+
+# --- API ROUTES ---------------------------------------------------------------
 @app.get("/", tags=["meta"])
 def root():
     return {
         "ok": True,
-        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}", "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui", "/warmup/*"],
+        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}", "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui", "/warmup/start", "/warmup/status"]
     }
 
-@app.get("/health", tags=["meta"])
+@app.get("/health", tags=["meta"]) 
 def health():
     return {"status": "ok"}
 
-@app.get("/_env", tags=["meta"])
+@app.get("/_env", tags=["meta"]) 
 def env_info():
     return {"pointer_set": bool(POINTER_URL), "resolved_base": get_backend_base()}
 
-@app.get("/files", tags=["io"])
+@app.get("/files", tags=["io"]) 
 def files():
     items = [p.name for p in sorted(DATA_DIR.glob("*")) if _is_video(p)]
     return {"count": len(items), "items": items}
 
-@app.get("/meta/{vid}", tags=["io"])
+@app.get("/meta/{vid}", tags=["io"]) 
 def video_meta(vid: str):
     v = DATA_DIR / vid
     if not v.exists():
@@ -438,7 +369,7 @@ def video_meta(vid: str):
         raise HTTPException(500, "Métadonnées indisponibles")
     return m
 
-@app.post("/upload", tags=["io"])
+@app.post("/upload", tags=["io"]) 
 async def upload(request: Request, file: UploadFile = File(...), redirect: Optional[bool] = True):
     ext = (Path(file.filename).suffix or ".mp4").lower()
     if ext not in {".mp4", ".mov", ".mkv", ".webm"}:
@@ -459,11 +390,11 @@ async def upload(request: Request, file: UploadFile = File(...), redirect: Optio
         return RedirectResponse(url=f"/ui?v={urllib.parse.quote(dst.name)}&msg={msg}", status_code=303)
     return {"name": dst.name, "size_bytes": dst.stat().st_size, "gen_started": True}
 
-@app.get("/progress/{vid_stem}", tags=["io"])
+@app.get("/progress/{vid_stem}", tags=["io"]) 
 def progress(vid_stem: str):
     return progress_data.get(vid_stem, {'percent': 0, 'logs': [], 'done': False})
 
-@app.delete("/delete/{vid}", tags=["io"])
+@app.delete("/delete/{vid}", tags=["io"]) 
 def delete_video(vid: str):
     v = DATA_DIR / vid
     if not v.exists():
@@ -476,7 +407,7 @@ def delete_video(vid: str):
     print(f"[DELETE] {vid}", file=sys.stdout)
     return {"deleted": vid}
 
-@app.get("/frame_idx", tags=["io"])
+@app.get("/frame_idx", tags=["io"]) 
 def frame_idx(vid: str, idx: int):
     v = DATA_DIR / vid
     if not v.exists():
@@ -492,7 +423,7 @@ def frame_idx(vid: str, idx: int):
         print(f"[FRAME] FAIL {vid} idx={idx}: {e}", file=sys.stdout)
         raise HTTPException(500, "Frame error")
 
-@app.get("/poster/{vid}", tags=["io"])
+@app.get("/poster/{vid}", tags=["io"]) 
 def poster(vid: str):
     v = DATA_DIR / vid
     if not v.exists():
@@ -502,12 +433,8 @@ def poster(vid: str):
         return FileResponse(str(p), media_type="image/jpeg")
     raise HTTPException(404, "Poster introuvable")
 
-@app.get("/window/{vid}", tags=["io"])
-def window(vid: str, center: int = 0, count: int = 50, start: Optional[int] = None, end: Optional[int] = None):
-    """Fenêtre de timeline.
-    - Si start/end fournis: on respecte strictement [start, end) (portion isolée).
-    - Sinon: chunk classique autour de center, taille "count".
-    """
+@app.get("/window/{vid}", tags=["io"]) 
+def window(vid: str, center: int = 0, count: int = 21):
     v = DATA_DIR / vid
     if not v.exists():
         raise HTTPException(404, "Vidéo introuvable")
@@ -516,24 +443,9 @@ def window(vid: str, center: int = 0, count: int = 50, start: Optional[int] = No
         raise HTTPException(500, "Métadonnées indisponibles")
     frames = m["frames"]
     count = max(3, int(count))
-
-    # Portion stricte si fournie
-    if start is not None and end is not None:
-        start = max(0, min(int(start), max(0, frames)))
-        end = max(start, min(int(end), frames))  # fin exclusive
-        n = max(0, end - start)
-        items = []
-        bust = int(time.time()*1000)
-        for i in range(n):
-            idx = start + i
-            url = f"/thumbs/f_{v.stem}_{idx}.jpg?b={bust}"
-            items.append({"i": i, "idx": idx, "url": url})
-        sel = max(0, min(center - start, max(0, n-1)))
-        return {"vid": vid, "start": start, "count": n, "selected": sel, "items": items, "frames": frames}
-
-    # Sinon, fenêtre déroulante autour de center
     center = max(0, min(int(center), max(0, frames-1)))
     if frames <= 0:
+        print(f"[WINDOW] frames=0 for {vid}", file=sys.stdout)
         return {"vid": vid, "start": 0, "count": 0, "selected": 0, "items": [], "frames": 0}
     if frames <= count:
         start = 0; sel = center; n = frames
@@ -546,79 +458,70 @@ def window(vid: str, center: int = 0, count: int = 50, start: Optional[int] = No
         idx = start + i
         url = f"/thumbs/f_{v.stem}_{idx}.jpg?b={bust}"
         items.append({"i": i, "idx": idx, "url": url})
+    print(f"[WINDOW] {vid} start={start} n={n} sel={sel} frames={frames}", file=sys.stdout)
     return {"vid": vid, "start": start, "count": n, "selected": sel, "items": items, "frames": frames}
 
-# --------------------------------- Masques -----------------------------------
-@app.post("/mask", tags=["mask"])
+# ----- Masques ---------------------------------------------------------------
+@app.post("/mask", tags=["mask"]) 
 async def save_mask(payload: Dict[str, Any] = Body(...)):
-    try:
-        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],  # normalisées [0..1]
-            "color": payload.get("color") or "#10b981",
-            "note": (payload.get("note") or "").strip()
-        }
-        data.setdefault("masks", []).append(m)
-        _save_masks_atomic(vid, data)
-        print(f"[MASK] save {vid} frame={m['frame_idx']} note={m['note']}", file=sys.stdout)
-        return {"saved": True, "mask": m}
-    except HTTPException:
-        raise
-    except Exception as e:
-        print(f"[MASK] save ERROR: {e}", file=sys.stdout)
-        # Retourner une erreur JSON propre pour éviter une 500 HTML upstream
-        return Response(
-            content=json.dumps({"saved": False, "error": str(e)}),
-            media_type="application/json",
-            status_code=500,
-        )
-
-@app.get("/mask/{vid}", tags=["mask"])
+    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"])
+@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()
+    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_atomic(vid, data)
+            _save_masks(vid, data)
             return {"ok": True}
     raise HTTPException(404, "Masque introuvable")
 
-@app.post("/mask/delete", tags=["mask"])
+@app.post("/mask/delete", tags=["mask"]) 
 async def delete_mask(payload: Dict[str, Any] = Body(...)):
-    vid = payload.get("vid"); mid = payload.get("id")
+    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)
-    before = len(data.get("masks", []))
     data["masks"] = [m for m in data.get("masks", []) if m.get("id") != mid]
-    after = len(data.get("masks", []))
-    _save_masks_atomic(vid, data)
-    return {"ok": True, "removed": before - after}
+    _save_masks(vid, data)
+    return {"ok": True}
 
-# ----------------------------------- UI -------------------------------------
+# --- UI ----------------------------------------------------------------------
 HTML_TEMPLATE = r"""
 <!doctype html>
 <html lang="fr"><meta charset="utf-8">
-<title>🎬 Video Editor</title>
+<title>Video Editor</title>
 <style>
- :root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb; --thumbH:110px}
+ :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}
@@ -627,18 +530,19 @@ HTML_TEMPLATE = r"""
  .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);} 
+ .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);display:block;border-radius:6px;cursor:pointer;border:2px solid transparent;object-fit:cover}
+ .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)}
@@ -652,30 +556,44 @@ HTML_TEMPLATE = r"""
  .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}
- .mini{font-size:12px;color:#6b7280}
- .row-slim{display:flex;gap:8px;align-items:center}
+ /* Warmup UI */
+ #warmupBox{display:flex;align-items:center;gap:8px}
+ #warmup-progress{flex:1;height:8px;background:#eef2f7;border-radius:4px;overflow:hidden}
+ #warmup-progress > div{height:100%;width:0;background:#10b981;border-radius:4px}
+ #warmup-status{font-size:12px;color:#334155;min-width:140px}
+ .err{color:#b91c1c}
 </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>
- <span style="flex:1"></span>
- <button class="btn" id="warmStart">⚡ Warm‑up Model Hub</button>
- <button class="btn" id="warmClear" title="Effacer logs warm‑up">🧹</button>
+</div>
+<div class="card" style="margin-bottom:10px">
+ <div id="warmupBox">
+  <button id="warmupBtn" class="btn">⚡ Warm‑up modèles (Hub)</button>
+  <div id="warmup-status">—</div>
+  <div id="warmup-progress"><div id="warmup-fill"></div></div>
+ </div>
+ <div class="muted" id="warmup-log" style="margin-top:6px;max-height:90px;overflow:auto"></div>
 </div>
 <div class="layout">
  <div>
@@ -692,11 +610,14 @@ HTML_TEMPLATE = r"""
     <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 class="mini" style="margin-left:8px">Astuce: fin = exclusive (ex: 1→55 joue 1..54)</span>
+    <span class="muted" style="margin-left:10px">Astuce: fin = exclusive ("55" inclut #55)</span>
+    <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">
-   <div class="row-slim" style="margin:4px 0 8px 0;gap:8px;align-items:center">
+   <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>
@@ -706,20 +627,21 @@ HTML_TEMPLATE = r"""
    </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-slim"><span class="muted">Mode : <strong id="modeLabel">Lecture</strong></span></div>
-  <div class="row-slim" style="margin-top:6px">
+  <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 en cours (non enregistrée)">🧽 Effacer sélection</button>
+   <button id="btnClear" class="btn" style="display:none" title="Effacer la sélection actuelle">🧽 Effacer sélection</button>
   </div>
   <div style="margin-top:10px">
    <div class="muted">Couleur</div>
-   <div class="row-slim" id="palette" style="margin-top:6px">
+   <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>
@@ -737,163 +659,643 @@ HTML_TEMPLATE = r"""
     <strong>Vidéos disponibles</strong>
     <ul id="fileList" class="clean muted" style="max-height:180px;overflow:auto">Chargement…</ul>
    </div>
+  </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>
-// ==== ÉTAT GLOBAL ====
-const serverVid = "__VID__"; const serverMsg = "__MSG__";
-const statusEl = document.getElementById('msg'); statusEl.textContent = serverMsg;
-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 tlBox = document.getElementById('timeline');
-const btnFollow = document.getElementById('btnFollow'); const btnFilterMasked = document.getElementById('btnFilterMasked');
-const zoomSlider = document.getElementById('zoomSlider'); const maskedCount = document.getElementById('maskedCount');
-const gotoInput = document.getElementById('gotoInput'); const gotoBtn = document.getElementById('gotoBtn');
-const goFrame = document.getElementById('goFrame'); const endPortion = document.getElementById('endPortion');
-const isolerBoucle = document.getElementById('isolerBoucle'); const resetFull = document.getElementById('resetFull');
+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 warmStart = document.getElementById('warmStart'); const warmClear = document.getElementById('warmClear');
-
-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 isPaused = true;
+const gotoInput = document.getElementById('gotoInput');
+const gotoBtn = document.getElementById('gotoBtn');
+// Warmup UI
+const warmBtn = document.getElementById('warmupBtn');
+const warmStat = document.getElementById('warmup-status');
+const warmBar  = document.getElementById('warmup-fill');
+const warmLog  = document.getElementById('warmup-log');
+
+// 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 rect = null, dragging=false, sx=0, sy=0;
 let color = '#10b981';
-// \n Rectangles enregistrés par frame: Map<int, Array<[x1,y1,x2,y2,color]>> (coords normalisées)
-const rectMap = new Map();
-// Brouillon courant (non enregistré): {x1,y1,x2,y2,color} en pixels Canvas
-let draft = null; let dragging=false, sx=0, sy=0;
-// Divers
-let maskedSet = new Set(); let timelineUrls = []; let maskedOnlyMode=false;
-let viewStart = 0, viewEnd = 0; let followMode = false; let lastCenterMs=0; const CENTER_MS=150;
-
-function showToast(msg){ const el=document.createElement('div'); el.className='toast-item'; el.textContent=String(msg||''); toastWrap.appendChild(el); setTimeout(()=>el.remove(),2000); }
-
-// ==== Canvas & Draw ====
-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'; draw(); }
-
-function draw(){ ctx.clearRect(0,0,canvas.width,canvas.height);
-  // Masques enregistrés sur frame courante
-  const arr = rectMap.get(currentIdx) || [];
-  for(const m of arr){ const [nx1,ny1,nx2,ny2,mc] = m; const x1=nx1*canvas.width, y1=ny1*canvas.height, x2=nx2*canvas.width, y2=ny2*canvas.height; const x=Math.min(x1,x2), y=Math.min(y1,y2); const w=Math.abs(x2-x1), h=Math.abs(y2-y1); ctx.strokeStyle=mc||'#10b981'; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h); ctx.fillStyle=(mc||'#10b981')+'28'; ctx.fillRect(x,y,w,h); }
-  // Brouillon
-  if(draft){ const x=Math.min(draft.x1,draft.x2), y=Math.min(draft.y1,draft.y2); const w=Math.abs(draft.x2-draft.x1), h=Math.abs(draft.y2-draft.y1); ctx.strokeStyle=draft.color||color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h); ctx.fillStyle=(draft.color||color)+'28'; ctx.fillRect(x,y,w,h); }
+let rectMap = new Map();
+let masks = [];
+let maskedSet = new Set();
+let timelineUrls = [];
+let portionStart = null;
+let portionEnd = null; // exclusive
+let loopInterval = null;
+let chunkSize = 50;
+let timelineStart = 0, timelineEnd = 0;
+let viewRangeStart = 0, viewRangeEnd = 0;
+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;
+
+// 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); }
 }
-
-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; draft={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; draw(); });
-canvas.addEventListener('mousemove',(e)=>{ if(!dragging||!draft) return; const r=canvas.getBoundingClientRect(); draft.x2=e.clientX-r.left; draft.y2=e.clientY-r.top; draw(); });
+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){
+  const boxRect = tlBox.getBoundingClientRect();
+  const elRect  = el.getBoundingClientRect();
+  const current = tlBox.scrollLeft;
+  const elMid   = (elRect.left - boxRect.left) + current + (elRect.width / 2);
+  const target  = Math.max(0, elMid - (tlBox.clientWidth / 2));
+  tlBox.scrollTo({ left: target, behavior: 'auto' });
+}
+async function ensureThumbVisibleCentered(idx){
+  for(let k=0; k<50; k++){
+    const el = findThumbEl(idx);
+    if(el){
+      const img = el.querySelector('img');
+      if(!img.complete || img.naturalWidth === 0){
+        await new Promise(r=>setTimeout(r, 30));
+      }else{
+        rawCenterThumb(el);
+        await new Promise(r=>requestAnimationFrame(()=>r()));
+        updatePlayhead();
+        return true;
+      }
+    }else{
+      await new Promise(r=>setTimeout(r, 30));
+    }
+  }
+  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 ✅');
+}
+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=()=>{ draft=null; draw(); };
+btnClear.onclick=()=>{ rect=null; rectMap.delete(currentIdx); draw(); };
 btnEdit.onclick =()=> setMode('edit');
 btnBack.onclick =()=> setMode('view');
-
-function setMode(m){ mode=m; if(m==='edit'){ player.pause(); isPaused=true; player.controls=false; 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'; } else { player.controls=true; modeLabel.textContent='Lecture'; btnEdit.style.display='inline-block'; btnBack.style.display='none'; btnSave.style.display='none'; btnClear.style.display='none'; canvas.style.pointerEvents='none'; draft=null; } draw(); }
-
 // Palette
-const palette = document.getElementById('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(draft){ draft.color=color; draw(); } }; });
-
-// ==== Timeline (simplifié ici, logique portion/centrage côté serveur déjà OK) ====
-const tlProgressFill = document.getElementById('tl-progress-fill');
-let thumbEls = new Map();
-function addThumb(idx){ 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]; if(idx===currentIdx){ img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong'); } img.onclick=async()=>{ goToIdx(idx,true); }; wrap.appendChild(img); const label=document.createElement('span'); label.className='thumb-label'; label.textContent=`#${idx+1}`; wrap.appendChild(label); tlBox.appendChild(wrap); thumbEls.set(idx, wrap); }
-
-function centerThumb(idx){ const el=thumbEls.get(idx); if(!el) return; const img=el.querySelector('img'); if(!img||!img.complete||img.naturalWidth===0){ setTimeout(()=>centerThumb(idx),25); return; } tlBox.scrollLeft = Math.max(0, el.offsetLeft + el.clientWidth/2 - tlBox.clientWidth/2); }
-
-async function renderPortion(start,end){ tlBox.innerHTML=''; thumbEls.clear(); for(let i=start;i<end;i++){ addThumb(i); } setTimeout(()=>centerThumb(currentIdx),0); }
-
-async function renderWindow(center){ // fenêtre 50
-  const r=await fetch(`/window/${encodeURIComponent(vidName)}?center=${center}&count=50`); const d=await r.json(); tlBox.innerHTML=''; thumbEls.clear(); timelineUrls=[]; const bust=Date.now(); d.items.forEach(it=>{ timelineUrls[it.idx]=it.url; addThumb(it.idx); }); setTimeout(()=>centerThumb(currentIdx),0);
+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%';
 }
-
-function goToIdx(idx,centerNow){ currentIdx=idx; player.currentTime = (fps>0? idx/fps : 0); tlBox.querySelectorAll('img.sel,img.sel-strong').forEach(x=>x.classList.remove('sel','sel-strong')); const el=thumbEls.get(idx); if(el){ const im=el.querySelector('img'); if(im){ im.classList.add('sel'); if(isPaused) im.classList.add('sel-strong'); } } if(centerNow) centerThumb(idx); draw(); }
-
-// ==== Masques: load/list UI ====
-const maskList = document.getElementById('maskList');
-async function loadMasks(){ const r=await fetch('/mask/'+encodeURIComponent(vidName)); const d=await r.json(); const arr=d.masks||[]; rectMap.clear(); maskedSet = new Set(arr.map(m=>parseInt(m.frame_idx||0,10))); maskedCount.textContent = `(${maskedSet.size} ⭐)`; for(const m of arr){ if(m.shape==='rect'){ const fr = parseInt(m.frame_idx||0,10); if(!rectMap.has(fr)) rectMap.set(fr, []); const [x1,y1,x2,y2]=m.points; rectMap.get(fr).push([x1,y1,x2,y2,m.color||'#10b981']); } }
-  // Liste
-  if(!arr.length){ maskList.textContent='—'; } else { maskList.innerHTML=''; const ul=document.createElement('ul'); ul.className='clean'; for(const m of arr){ 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}`)).replace(/</g,'&lt;').replace(/>/g,'&gt;'); 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}</strong> — #${fr} · t=${t}s`;
-    const rn=document.createElement('span'); rn.className='rename-btn'; rn.textContent='✏️'; rn.title='Renommer'; rn.onclick=async()=>{ const nv=prompt('Nouveau nom du masque :', label); if(nv===null) return; await fetch('/mask/rename',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id,note:nv})}); await loadMasks(); draw(); };
-    const del=document.createElement('span'); del.className='delete-btn'; del.textContent='❌'; del.title='Supprimer'; del.onclick=async()=>{ if(!confirm(`Supprimer masque "${label}" ?`)) return; await fetch('/mask/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id})}); await loadMasks(); draw(); };
-    li.appendChild(rn); li.appendChild(del); ul.appendChild(li); }
-    maskList.appendChild(ul);
+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;
   }
-  draw();
+  if (portionStart!=null && portionEnd!=null){
+    const s = Math.max(0, Math.min(portionStart, frames-1));
+    const e = Math.max(s+1, Math.min(frames, portionEnd)); // fin exclusive
+    tlBox.innerHTML = ''; thumbEls = new Map(); ensureOverlays();
+    for (let i = s; i < e; i++) addThumb(i, 'append');  // rendre TOUTE la portion
+    timelineStart = s; 
+    timelineEnd   = e;
+    viewRangeStart = s;
+    viewRangeEnd   = e;
+    setTimeout(async ()=>{
+      syncTimelineWidth();
+      updateSelectedThumb();
+      await ensureThumbVisibleCentered(currentIdx);
+      loadingInd.style.display='none';
+      updatePlayhead();
+      updatePortionOverlays();
+    }, 0);
+    return;
+  }
+  await loadWindow(centerIdx ?? currentIdx);
+  loadingInd.style.display='none';
 }
-
-// Enregistrer le brouillon courant -> masque
-btnSave.onclick = async ()=>{
-  if(!draft || !vidName){ alert('Aucune sélection.'); return; }
-  const defaultName = `frame ${currentIdx+1}`; const note=(prompt('Nom du masque (optionnel) :', defaultName) || defaultName).trim();
-  const nx1=Math.min(draft.x1,draft.x2)/canvas.width, ny1=Math.min(draft.y1,draft.y2)/canvas.height; const nx2=Math.max(draft.x1,draft.x2)/canvas.width, ny2=Math.max(draft.y1,draft.y2)/canvas.height;
-  const payload={vid:vidName,time_s:player.currentTime,frame_idx:currentIdx,shape:'rect',points:[nx1,ny1,nx2,ny2],color:draft.color||color,note};
-  try{ const r=await fetch('/mask',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)}); const txt=await r.text(); if(!r.ok){ throw new Error('HTTP '+r.status+' '+txt); } const j=JSON.parse(txt); if(!j.saved){ throw new Error(j.error||'save failed'); }
-    // Mettre à jour rectMap (multi-rects OK)
-    if(!rectMap.has(currentIdx)) rectMap.set(currentIdx, []); rectMap.get(currentIdx).push([nx1,ny1,nx2,ny2,payload.color]); draft=null; await loadMasks(); showToast('Masque enregistré ✅'); draw(); }
-  catch(e){ alert('Échec enregistrement masque: '+e); }
-};
-
-// ==== Follow/Filter/Zoom/Goto ====
-btnFollow.onclick=()=>{ followMode=!followMode; btnFollow.classList.toggle('toggled', followMode); if(followMode) centerThumb(currentIdx); };
-btnFilterMasked.onclick=async()=>{ maskedOnlyMode=!maskedOnlyMode; btnFilterMasked.classList.toggle('toggled', maskedOnlyMode); await renderForState(); };
-zoomSlider.addEventListener('input', ()=>{ tlBox.style.setProperty('--thumbH', zoomSlider.value+'px'); });
-function validFrameNumber(v){ return Number.isFinite(v) && v>=1 && v<=frames; }
-async function gotoFrameNum(){ const v=parseInt(gotoInput.value||'',10); if(!validFrameNumber(v)) return; isPaused=true; player.pause(); goToIdx(v-1,true); await renderForState(); centerThumb(currentIdx); }
-['click'].forEach(ev=>gotoBtn.addEventListener(ev,gotoFrameNum));
-
-// ==== Portion ====
-async function renderForState(){ if(portionStart!=null && portionEnd!=null){ await renderPortion(portionStart, portionEnd); } else { await renderWindow(currentIdx); } }
-let portionStart=null, portionEnd=null; function idxToSec(i){ return (fps||30)>0? (i/fps) : 0; }
-
+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'){ rect = rectMap.get(currentIdx)||null; draw(); }
+    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 = Math.max(0, (parseInt(goFrame.value||'1',10)-1)); const end=parseInt(endPortion.value||'',10);
-  if(!end || end<=start || end>frames){ alert('Portion invalide (fin > début).'); return; }
-  portionStart=start; portionEnd=end; isPaused=true; player.pause(); goToIdx(start,true); await renderForState(); resetFull.style.display='inline-block'; };
-
-resetFull.onclick=async()=>{ portionStart=null; portionEnd=null; endPortion.value=''; goFrame.value=1; await renderForState(); resetFull.style.display='none'; };
-
-// ==== Player events ====
-player.addEventListener('loadedmetadata', ()=>{ fitCanvas(); draft=null; draw(); });
-window.addEventListener('resize', fitCanvas);
-player.addEventListener('pause', ()=>{ isPaused=true; const el=thumbEls.get(currentIdx); if(el){ const im=el.querySelector('img'); if(im){ im.classList.add('sel-strong'); } } });
-player.addEventListener('play', ()=>{ isPaused=false; tlBox.querySelectorAll('img.sel-strong').forEach(x=>x.classList.remove('sel-strong')); });
-player.addEventListener('timeupdate', ()=>{ const idx=Math.max(0, Math.min(frames-1, Math.round(player.currentTime*(fps||30)))); if(idx!==currentIdx){ currentIdx=idx; if(followMode && !isPaused){ const now=Date.now(); if(now-lastCenterMs>CENTER_MS){ lastCenterMs=now; centerThumb(currentIdx); } } draw(); } });
-
-goFrame.addEventListener('change', async ()=>{ const v=Math.max(1, parseInt(goFrame.value||'1',10)); player.pause(); isPaused=true; goToIdx(v-1,true); await renderForState(); });
-
-// ==== Warm‑up boutons ====
-warmStart.onclick=async()=>{ await fetch('/warmup/start',{method:'POST'}); showToast('Warm‑up démarré'); pollWarm(); };
-warmClear.onclick=async()=>{ await fetch('/warmup/clear',{method:'POST'}); showToast('Warm‑up: logs nettoyés'); };
-
-async function pollWarm(){ const r=await fetch('/warmup/status'); const s=await r.json(); const bar = document.getElementById('tl-progress-fill'); let txt=''; if(s.status==='running'){ const cur=s.current?(' → '+s.current):''; txt = `Warm‑up: running${cur} · ok=${(s.done||[]).length} · err=${(s.errors||[]).length}`; } else if(s.status==='done'){ txt='Warm‑up: ✅ terminé'; } else if(s.status==='error'){ txt='Warm‑up: ⚠️ terminé avec erreurs'; } else { txt=''; }
-  statusEl.textContent = txt || serverMsg;
-  if(s.status==='running'){ bar.style.width = '60%'; setTimeout(pollWarm,900); } else { bar.style.width = '0%'; }
+  const start = Math.max(0, parseInt(goFrame.value || '1',10) - 1);
+  const endIn = parseInt(endPortion.value || '',10);
+  if(!endPortion.value || endIn <= (start+1) || endIn > frames){ alert('Portion invalide (fin > début)'); return; }
+  const endExclusive = Math.min(frames, endIn); // fin exclusive; "55" => inclut #55 (idx 54)
+  portionStart = start; 
+  portionEnd   = endExclusive;
+  viewRangeStart = start; viewRangeEnd = endExclusive;
+  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);
+  }
 }
-
-// ==== Boot ====
-async function loadFiles(){ const r=await fetch('/files'); const d=await r.json(); const fileList=document.getElementById('fileList'); if(!d.items||!d.items.length){ fileList.innerHTML='<li>(aucune)</li>'; return; } fileList.innerHTML=''; d.items.forEach(name=>{ const li=document.createElement('li'); const del=document.createElement('span'); del.className='delete-btn'; del.textContent='❌'; del.title='Supprimer'; del.onclick=async()=>{ if(!confirm(`Supprimer "${name}" ?`)) return; await fetch('/delete/'+encodeURIComponent(name),{method:'DELETE'}); loadFiles(); if(vidName===name){ vidName=''; initVideo(); } }; const a=document.createElement('a'); a.textContent=name; a.href='/ui?v='+encodeURIComponent(name); li.appendChild(del); li.appendChild(a); fileList.appendChild(li); }); }
-
-async function initVideo(){ 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)`; viewStart=0; viewEnd=frames; // urls timeline (référence)
-      timelineUrls=[]; for(let i=0;i<frames;i++){ timelineUrls[i] = `/thumbs/f_${vidStem}_${i}.jpg?b=${bust}`; }
-      await loadMasks(); await renderWindow(0); } else { statusEl.textContent='Erreur meta'; } }catch{ statusEl.textContent='Erreur réseau meta'; }
+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 (thumbs)
+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'){ rect = rectMap.get(currentIdx) || null; draw(); }
+  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'){ rect = rectMap.get(currentIdx) || null; draw(); }
+  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(masks.map(m=>parseInt(m.frame_idx||0,10)));
+  rectMap.clear();
+  // simple: un seul rect "actif" par frame (on affiche le dernier enregistré)
+  masks.forEach(m=>{
+    if(m.shape==='rect'){
+      const [x1,y1,x2,y2] = m.points;
+      const normW = canvas.clientWidth, normH = canvas.clientHeight;
+      rectMap.set(m.frame_idx, {x1:x1*normW, y1:y1*normH, x2:x2*normW, y2:y2*normH, color:m.color});
+    }
+  });
+  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';
+}
+// Save mask (+ cache)
+btnSave.onclick = async ()=>{
+  if(!rect || !vidName){ alert('Aucune sélection.'); return; }
+  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||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 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,{...rect});
+      await loadMasks(); await renderTimeline(currentIdx);
+      showToast('Masque enregistré ✅');
+    } else {
+      const txt = await r.text();
+      alert('Échec enregistrement masque: ' + r.status + ' ' + txt);
+    }
+  }catch(e){
+    alert('Erreur réseau lors de l’\u00e9nregistrement du masque.');
+  }
+};
+// Warm-up button
+warmBtn.onclick = async ()=>{
+  try{ await fetch('/warmup/start',{method:'POST'}); }catch{}
+  const poll = async ()=>{
+    try{
+      const r = await fetch('/warmup/status');
+      const st = await r.json();
+      warmBar.style.width = (st.percent||0) + '%';
+      let txt = (st.state||'idle');
+      if(st.state==='running' && st.current){ txt += ' · ' + st.current; }
+      if(st.state==='error'){ txt += ' · erreur'; }
+      warmStat.textContent = txt;
+      const lines = (st.log||[]).slice(-6);
+      warmLog.innerHTML = lines.map(x=>String(x)).join('<br>');
+      if(st.state==='done' || st.state==='error') return; else setTimeout(poll, 1000);
+    }catch{ setTimeout(poll, 1500); }
+  };
+  poll();
+};
+// 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(); } }
 }
-
-async function boot(){ await loadFiles(); if(serverVid){ vidName=serverVid; await initVideo(); } else { const qs=new URLSearchParams(location.search); const v=qs.get('v')||''; if(v){ vidName=v; await initVideo(); } } pollWarm(); }
 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>
 """
 
-@app.get("/ui", response_class=HTMLResponse, tags=["meta"])
+@app.get("/ui", response_class=HTMLResponse, tags=["meta"]) 
 def ui(v: Optional[str] = "", msg: Optional[str] = ""):
-    vid = v or ""
-    try:
-        msg = urllib.parse.unquote(msg or "")
-    except Exception:
-        pass
-    html = HTML_TEMPLATE.replace("__VID__", urllib.parse.quote(vid)).replace("__MSG__", msg)
-    return HTMLResponse(content=html)
+  vid = v or ""
+  try:
+    msg = urllib.parse.unquote(msg or "")
+  except Exception:
+    pass
+  html = HTML_TEMPLATE.replace("__VID__", urllib.parse.quote(vid)).replace("__MSG__", msg)
+  return HTMLResponse(content=html)