Update app.py

app.py

@@ -1,109 +1,433 @@
-# app.py — Video Editor API (v0.8.0)
-# v0.8.0: Chargement modèles Hub, stubs IA, + Améliorations : multi-masques, estimation /estimate, progression /progress_ia
+# 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).
+
 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
 import shutil as _shutil
 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.0")
-# ... (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"
-]
-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)
-@app.post("/mask/ai")
-async def mask_ai(payload: Dict[str, Any] = Body(...)):
-    if not is_gpu(): raise HTTPException(503, "Switch GPU.")
-    # TODO: Impl SAM2
-    return {"ok": True, "mask": {"points": [0.1, 0.1, 0.9, 0.9]}}
-@app.post("/inpaint")
-async def inpaint(payload: Dict[str, Any] = Body(...)):
-    if not is_gpu(): raise HTTPException(503, "Switch GPU.")
-    # TODO: Impl DiffuEraser, update progress_ia
-    return {"ok": True, "preview": "/data/preview.mp4"}
-@app.get("/estimate")
-def estimate(vid: str, masks_count: int):
-    # TODO: Calcul simple (frames * masks * facteur GPU)
-    return {"time_min": 5, "vram_gb": 4}
-@app.get("/progress_ia")
-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)
-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.
-"""
-# ... (ui func inchangée)
-@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)
+
+print("[BOOT] Video Editor API starting…")
+
+# ----------------------- POINTEUR BACKEND (inchangé) ------------------------
+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(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)
+
+# 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) --------------------------------
+@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)
+
+# ---------------------------- Helpers & Progress -----------------------------
+progress_data: Dict[str, Dict[str, Any]] = {}
+
+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_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)
+
+# ------------------------------ Thumbs async --------------------------------
+
+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
+
+# ---------------------------------- API -------------------------------------
 @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"]
+        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}", "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui", "/warmup/*"],
     }
+
 @app.get("/health", tags=["meta"])
 def health():
     return {"status": "ok"}
+
 @app.get("/_env", tags=["meta"])
 def env_info():
     return {"pointer_set": bool(POINTER_URL), "resolved_base": get_backend_base()}
+
 @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"])
 def video_meta(vid: str):
     v = DATA_DIR / vid
@@ -113,6 +437,7 @@ def video_meta(vid: str):
     if not m:
         raise HTTPException(500, "Métadonnées indisponibles")
     return m
+
 @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()
@@ -133,9 +458,11 @@ async def upload(request: Request, file: UploadFile = File(...), redirect: Optio
         msg = urllib.parse.quote(f"Vidéo importée : {dst.name}. Génération thumbs en cours…")
         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"])
 def progress(vid_stem: str):
     return progress_data.get(vid_stem, {'percent': 0, 'logs': [], 'done': False})
+
 @app.delete("/delete/{vid}", tags=["io"])
 def delete_video(vid: str):
     v = DATA_DIR / vid
@@ -148,6 +475,7 @@ def delete_video(vid: str):
     v.unlink(missing_ok=True)
     print(f"[DELETE] {vid}", file=sys.stdout)
     return {"deleted": vid}
+
 @app.get("/frame_idx", tags=["io"])
 def frame_idx(vid: str, idx: int):
     v = DATA_DIR / vid
@@ -163,6 +491,7 @@ def frame_idx(vid: str, idx: int):
     except Exception as e:
         print(f"[FRAME] FAIL {vid} idx={idx}: {e}", file=sys.stdout)
         raise HTTPException(500, "Frame error")
+
 @app.get("/poster/{vid}", tags=["io"])
 def poster(vid: str):
     v = DATA_DIR / vid
@@ -172,8 +501,13 @@ def poster(vid: str):
     if p.exists():
         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 = 21):
+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".
+    """
     v = DATA_DIR / vid
     if not v.exists():
         raise HTTPException(404, "Vidéo introuvable")
@@ -182,9 +516,24 @@ def window(vid: str, center: int = 0, count: int = 21):
         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
@@ -197,65 +546,79 @@ def window(vid: str, center: int = 0, count: int = 21):
         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 -----
+
+# --------------------------------- Masques -----------------------------------
 @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}
+    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"])
 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()
+    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)
+            _save_masks_atomic(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")
+    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]
-    _save_masks(vid, data)
-    return {"ok": True}
-# ---------- UI ----------
+    after = len(data.get("masks", []))
+    _save_masks_atomic(vid, data)
+    return {"ok": True, "removed": before - after}
+
+# ----------------------------------- 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;}
+ :root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb; --thumbH:110px}
  *{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}
@@ -264,19 +627,18 @@ 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,110px);display:block;border-radius:6px;cursor:pointer;border:2px solid transparent;object-fit:cover}
+ .thumb img{height:var(--thumbH);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)}
@@ -290,20 +652,17 @@ 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}
 </style>
 <h1>🎬 Video Editor</h1>
 <div class="topbar card">
@@ -314,6 +673,9 @@ HTML_TEMPLATE = r"""
  </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="layout">
  <div>
@@ -330,13 +692,11 @@ 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 id="posInfo" style="margin-left:10px"></span>
-    <span id="status" style="margin-left:10px;color:#2563eb"></span>
+    <span class="mini" style="margin-left:8px">Astuce: fin = exclusive (ex: 1→55 joue 1..54)</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">
+   <div class="row-slim" 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>
@@ -346,21 +706,20 @@ 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"><span class="muted">Mode : <strong id="modeLabel">Lecture</strong></span></div>
-  <div class="row" style="margin-top:6px">
+  <div class="row-slim"><span class="muted">Mode : <strong id="modeLabel">Lecture</strong></span></div>
+  <div class="row-slim" 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="btnClear" class="btn" style="display:none" title="Effacer la sélection en cours (non enregistrée)">🧽 Effacer sélection</button>
   </div>
   <div style="margin-top:10px">
    <div class="muted">Couleur</div>
-   <div class="row" id="palette" style="margin-top:6px">
+   <div class="row-slim" 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>
@@ -378,587 +737,163 @@ 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>
-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');
+// ==== É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 toastWrap = document.getElementById('toast');
-const gotoInput = document.getElementById('gotoInput');
-const gotoBtn = document.getElementById('gotoBtn');
-// 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;
+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;
 let mode = 'view';
-let rect = null, dragging=false, sx=0, sy=0;
 let color = '#10b981';
-let rectMap = new Map();
-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;
-// 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);
-  }
+// \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); }
 }
-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();
-});
+
+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(); });
 ['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{ dragging=false; }));
-btnClear.onclick=()=>{ rect=null; rectMap.delete(currentIdx); draw(); };
+
+btnClear.onclick=()=>{ draft=null; 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
-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);
-    for(let i=s;i<e;i++){ addThumb(i,'append'); }
-    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, max(rngStart, rngEnd-1)));
-  const start = Math.max(rngStart, min(mid - Math.floor(chunkSize/2), 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 = 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'){ 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);
+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);
 }
-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());
+
+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);
   }
-});
-// 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);
-  });
+  draw();
 }
-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();
-  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)
+
+// Enregistrer le brouillon courant -> masque
 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’enregistrement du masque.');
-  }
+  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); }
 };
-// 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(); } }
+
+// ==== 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; }
+
+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%'; }
+}
+
+// ==== 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'; }
 }
+
+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"])
+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)