Update app.py

app.py

@@ -1,5 +1,10 @@
-# app.py — Video Editor API (v0.8.1)
-# v0.8.1: Fix bugs (timeline/frames/progress/import), prefix pour pointer, + Améliorations intégrées
+# 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
 from fastapi.staticfiles import StaticFiles
@@ -11,17 +16,19 @@ import subprocess
 import shutil as _shutil
 import os
 import httpx
-import huggingface_hub as hf
-from joblib import Parallel, delayed
-# --- POINTEUR (inchangé) ---
+
+print("[BOOT] Video Editor API starting…")
+
+# --- 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}
+
 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)
+            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()
@@ -34,18 +41,23 @@ def get_backend_base() -> str:
         return FALLBACK_BASE
     except Exception:
         return FALLBACK_BASE
-print("[BOOT] Video Editor API starting…")
+
 print(f"[BOOT] POINTER_URL={POINTER_URL or '(unset)'}")
 print(f"[BOOT] FALLBACK_BASE={FALLBACK_BASE}")
-app = FastAPI(title="Video Editor API", version="0.8.1")
+
+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)
+
 app.mount("/data", StaticFiles(directory=str(DATA_DIR)), name="data")
 app.mount("/thumbs", StaticFiles(directory=str(THUMB_DIR)), name="thumbs")
-# --- PROXY (inchangé) ---
+
+# --- 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("/")
@@ -63,15 +75,24 @@ async def proxy_all(full_path: str, request: Request):
             "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 (inchangé) ---
+
+# --- 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"}
+
 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():
@@ -84,6 +105,7 @@ def _meta(video: Path):
     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():
@@ -129,6 +151,7 @@ def _frame_jpg(video: Path, idx: int) -> Path:
         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():
@@ -143,8 +166,10 @@ def _poster(video: Path) -> Path:
     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():
@@ -153,8 +178,12 @@ def _load_masks(vid: str) -> Dict[str, Any]:
         except Exception as e:
             print(f"[MASK] Read fail {vid}: {e}", file=sys.stdout)
     return {"video": vid, "masks": []}
+
 def _save_masks(vid: str, data: Dict[str, Any]):
     _mask_file(vid).write_text(json.dumps(data, ensure_ascii=False, indent=2), encoding="utf-8")
+
+# --- THUMBS GENERATION BG -----------------------------------------------------
+
 def _gen_thumbs_background(video: Path, vid_stem: str):
     progress_data[vid_stem] = {'percent': 0, 'logs': [], 'done': False}
     try:
@@ -231,161 +260,106 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
     except Exception as e:
         progress_data[vid_stem]['logs'].append(f"Erreur: {e}")
         progress_data[vid_stem]['done'] = True
-def is_gpu():
-    return False
-# --- Chargement Modèles (inchangé) ---
-models = [
-    "facebook/sam2-hiera-large", "ByteDance/Sa2VA-4B", "lixiaowen/diffuEraser",
-    "runwayml/stable-diffusion-v1-5", "wangfuyun/PCM_Weights", "stabilityai/sd-vae-ft-mse"
-]
-PROP_URLS = [
-    "https://github.com/sczhou/ProPainter/releases/download/v0.1.0/ProPainter.pth",
-    "https://github.com/sczhou/ProPainter/releases/download/v0.1.0/raft-things.pth",
-    "https://github.com/sczhou/ProPainter/releases/download/v0.1.0/recurrent_flow_completion.pth"
+
+# --- 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 load_model(repo_id, retry=3):
-    path = Path(os.environ["HF_HOME"]) / repo_id.split("/")[-1]
-    for attempt in range(retry):
-        try:
-            if not path.exists() or not any(path.iterdir()):
-                warmup_progress['logs'].append(f"Downloading {repo_id} (attempt {attempt+1})...")
-                hf.snapshot_download(repo_id=repo_id, local_dir=str(path))
-            (path / "loaded.ok").touch()
-            if "sam2" in repo_id:
-                shutil.copytree(str(path), "/app/sam2", dirs_exist_ok=True)
-            warmup_progress['logs'].append(f"{repo_id} ready.")
-            return True
-        except Exception as e:
-            warmup_progress['logs'].append(f"Error {repo_id}: {e} (retrying...)")
-    return False
-def wget_prop(url, dest, retry=3):
-    fname = url.split("/")[-1]
-    out = dest / fname
-    for attempt in range(retry):
-        try:
-            if not out.exists():
-                warmup_progress['logs'].append(f"Downloading {fname} (attempt {attempt+1})...")
-                subprocess.run(["wget", "-q", url, "-P", str(dest)], check=True)
-            warmup_progress['logs'].append(f"{fname} ready.")
-            return True
-        except Exception as e:
-            warmup_progress['logs'].append(f"Error {fname}: {e} (retrying...)")
-    return False
-@app.post("/warmup")
-def warmup():
-    if warmup_progress['in_progress']:
-        raise HTTPException(400, "Warm-up already in progress.")
-    warmup_progress['in_progress'] = True
-    warmup_progress['percent'] = 0
-    warmup_progress['logs'] = ["Warm-up started."]
-    threading.Thread(target=_run_warmup, daemon=True).start()
-    return {"ok": True}
-def _run_warmup():
-    total = len(models) + len(PROP_URLS)
-    done = 0
-    for m in models:
-        if load_model(m):
-            done += 1
-            warmup_progress['percent'] = int((done / total) * 100)
-        else:
-            warmup_progress['logs'].append(f"Failed {m} after retries.")
-    PROP = Path("/app/propainter")
-    PROP.mkdir(exist_ok=True)
-    for url in PROP_URLS:
-        if wget_prop(url, PROP):
-            done += 1
-            warmup_progress['percent'] = int((done / total) * 100)
-        else:
-            warmup_progress['logs'].append(f"Failed {url.split('/')[-1]} after retries.")
-    warmup_progress['done'] = True
-    warmup_progress['in_progress'] = False
-    warmup_progress['logs'].append("Warm-up complete.")
-@app.get("/warmup_progress")
-def get_warmup_progress():
-    return warmup_progress
-# --- IA stubs (inchangé) ---
-@app.post("/mask/ai")
-async def mask_ai(payload: Dict[str, Any] = Body(...)):
-    if not is_gpu(): raise HTTPException(503, "Switch GPU.")
-    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.")
-    return {"ok": True, "preview": "/data/preview.mp4"}
-@app.get("/estimate")
-def estimate(vid: str, masks_count: int):
-    return {"time_min": 5, "vram_gb": 4} if is_gpu() else {"time_min": "N/A (CPU)", "vram_gb": "N/A (CPU)"}
-@app.get("/progress_ia")
-def progress_ia(vid: str):
-    return {"percent": 0, "log": "En attente..."}
-# --- Masques (inchangé) ---
-@app.post("/mask", tags=["mask"])
-async def save_mask(payload: Dict[str, Any] = Body(...)):
-    vid = payload.get("vid")
-    if not vid:
-        raise HTTPException(400, "vid manquant")
-    pts = payload.get("points") or []
-    if len(pts) != 4:
-        raise HTTPException(400, "points rect (x1,y1,x2,y2) requis")
-    data = _load_masks(vid)
-    m = {
-        "id": uuid.uuid4().hex[:10],
-        "time_s": float(payload.get("time_s") or 0.0),
-        "frame_idx": int(payload.get("frame_idx") or 0),
-        "shape": "rect",
-        "points": [float(x) for x in pts],
-        "color": payload.get("color") or "#10b981",
-        "note": payload.get("note") or ""
-    }
-    data.setdefault("masks", []).append(m)
-    _save_masks(vid, data)
-    print(f"[MASK] save {vid} frame={m['frame_idx']} note={m['note']}", file=sys.stdout)
-    return {"saved": True, "mask": m}
-@app.get("/mask/{vid}", tags=["mask"])
-def list_masks(vid: str, frame_idx: Optional[int] = None):
-    data = _load_masks(vid)
-    if frame_idx is not None:
-        return [m for m in data["masks"] if m["frame_idx"] == frame_idx]
-    return data
-@app.post("/mask/rename", tags=["mask"])
-async def rename_mask(payload: Dict[str, Any] = Body(...)):
-    vid = payload.get("vid")
-    mid = payload.get("id")
-    new_note = (payload.get("note") or "").strip()
-    if not vid or not mid:
-        raise HTTPException(400, "vid et id requis")
-    data = _load_masks(vid)
-    for m in data.get("masks", []):
-        if m.get("id") == mid:
-            m["note"] = new_note
-            _save_masks(vid, data)
-            return {"ok": True}
-    raise HTTPException(404, "Masque introuvable")
-@app.post("/mask/delete", tags=["mask"])
-async def delete_mask(payload: Dict[str, Any] = Body(...)):
-    vid = payload.get("vid")
-    mid = payload.get("id")
-    if not vid or not mid:
-        raise HTTPException(400, "vid et id requis")
-    data = _load_masks(vid)
-    data["masks"] = [m for m in data.get("masks", []) if m.get("id") != mid]
-    _save_masks(vid, data)
-    return {"ok": True}
-# --- API autres (inchangé) ---
+
+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", "/warmup_progress", "/mask/ai", "/inpaint", "/estimate", "/progress_ia"]}
-@app.get("/health", tags=["meta"])
+    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/start", "/warmup/status"]
+    }
+
+@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():
@@ -394,7 +368,8 @@ def video_meta(vid: str):
     if not m:
         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"}:
@@ -414,10 +389,12 @@ 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"])
+
+@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():
@@ -429,7 +406,8 @@ 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"])
+
+@app.get("/frame_idx", tags=["io"]) 
 def frame_idx(vid: str, idx: int):
     v = DATA_DIR / vid
     if not v.exists():
@@ -444,7 +422,8 @@ 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"])
+
+@app.get("/poster/{vid}", tags=["io"]) 
 def poster(vid: str):
     v = DATA_DIR / vid
     if not v.exists():
@@ -453,7 +432,8 @@ 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"])
+
+@app.get("/window/{vid}", tags=["io"]) 
 def window(vid: str, center: int = 0, count: int = 21):
     v = DATA_DIR / vid
     if not v.exists():
@@ -480,81 +460,141 @@ def window(vid: str, center: int = 0, count: int = 21):
         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}
-# --- UI (ajouts prefix pour pointer, bouton estimer) ---
+
+# ----- 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}
+
+@app.get("/mask/{vid}", tags=["mask"]) 
+def list_masks(vid: str):
+    return _load_masks(vid)
+
+@app.post("/mask/rename", tags=["mask"]) 
+async def rename_mask(payload: Dict[str, Any] = Body(...)):
+    vid = payload.get("vid")
+    mid = payload.get("id")
+    new_note = (payload.get("note") or "").strip()
+    if not vid or not mid:
+        raise HTTPException(400, "vid et id requis")
+    data = _load_masks(vid)
+    for m in data.get("masks", []):
+        if m.get("id") == mid:
+            m["note"] = new_note
+            _save_masks(vid, data)
+            return {"ok": True}
+    raise HTTPException(404, "Masque introuvable")
+
+@app.post("/mask/delete", tags=["mask"]) 
+async def delete_mask(payload: Dict[str, Any] = Body(...)):
+    vid = payload.get("vid")
+    mid = payload.get("id")
+    if not vid or not mid:
+        raise HTTPException(400, "vid et id requis")
+    data = _load_masks(vid)
+    data["masks"] = [m for m in data.get("masks", []) if m.get("id") != mid]
+    _save_masks(vid, data)
+    return {"ok": True}
+
+# --- UI ----------------------------------------------------------------------
 HTML_TEMPLATE = r"""
 <!doctype html>
 <html lang="fr"><meta charset="utf-8">
 <title>Video Editor</title>
-<style> 
-:root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb;}
-* {box-sizing:border-box}
-body {font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;margin:16px;color:#111}
-h1 {margin:0 0 8px 0}
-.topbar {display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
-.card {border:1px solid var(--b);border-radius:12px;padding:10px;background:#fff}
-.muted {color:var(--muted);font-size:13px}
-.layout {display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
-.viewer {max-width:1024px;margin:0 auto; position:relative}
-.player-wrap {position:relative; padding-bottom: var(--controlsH);}
-video {display:block;width:100%;height:auto;max-height:58vh;border-radius:10px;box-shadow:0 0 0 1px #ddd}
-#editCanvas {position:absolute;left:0;right:0;top:0;bottom:var(--controlsH);border-radius:10px;pointer-events:none}
-.timeline-container {margin-top:10px}
-.timeline {position:relative;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px;border:1px solid var(--b);border-radius:10px;-webkit-overflow-scrolling:touch;width:100%}
-.thumb {flex:0 0 auto;display:inline-block;position:relative;transition:transform 0.2s;text-align:center}
-.thumb:hover {transform:scale(1.05)}
-.thumb img {height:var(--thumbH,110px);display:block;border-radius:6px;cursor:pointer;border:2px solid transparent;object-fit:cover}
-.thumb img.sel {border-color:var(--active-border)}
-.thumb img.sel-strong {outline:3px solid var(--active-border);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--active-border)}
-.thumb.hasmask::after {content:"★";position:absolute;right:6px;top:4px;color:#f5b700;text-shadow:0 0 3px rgba(0,0,0,0.35);font-size:16px}
-.thumb-label {font-size:11px;color:var(--muted);margin-top:2px;display:block}
-.timeline.filter-masked .thumb:not(.hasmask) {display:none}
-.tools .row {display:flex;gap:8px;flex-wrap:wrap;align-items:center}
-.btn {padding:8px 12px;border-radius:8px;border:1px solid var(--b);background:#f8fafc;cursor:pointer;transition:background 0.2s, border 0.2s}
-.btn:hover {background:var(--active-bg);border-color:var(--active-border)}
-.btn.active,.btn.toggled {background:var(--active-bg);border-color:var(--active-border)}
-.swatch {width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;cursor:pointer;transition:box-shadow 0.2s}
-.swatch.sel {box-shadow:0 0 0 2px var(--active-border)}
-ul.clean {list-style:none;padding-left:0;margin:6px 0}
-ul.clean li {margin:2px 0;display:flex;align-items:center;gap:6px}
-.rename-btn {font-size:12px;padding:2px 4px;border:none;background:transparent;cursor:pointer;color:var(--muted);transition:color 0.2s}
-.rename-btn:hover {color:#2563eb}
-.delete-btn {color:#ef4444;font-size:14px;cursor:pointer;transition:color 0.2s}
-.delete-btn:hover {color:#b91c1c}
-#loading-indicator {display:none;margin-top:6px;color:#f59e0b}
-.portion-row {display:flex;gap:6px;align-items:center;margin-top:8px}
-.portion-input {width:70px}
-#tl-progress-bar {background:#f3f4f6;border-radius:4px;height:8px;margin-top:10px}
-#tl-progress-fill {background:#2563eb;height:100%;width:0;border-radius:4px}
-#popup {position:fixed;top:20%;left:50%;transform:translate(-50%, -50%);background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:1000;display:none;min-width:320px}
-#popup-progress-bar {background:#f3f4f6;border-radius:4px;height:8px;margin:10px 0}
-#popup-progress-fill {background:#2563eb;height:100%;width:0;border-radius:4px}
-#popup-logs {max-height:200px;overflow:auto;font-size:12px;color:#6b7280}
-.playhead {position:absolute;top:0;bottom:0;width:2px;background:var(--active-border);opacity:.9;pointer-events:none;display:block}
-#portionBand {position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);background:rgba(37,99,235,.12);pointer-events:none;display:none}
-#inHandle,#outHandle {position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);width:6px;background:rgba(37,99,235,.9);border-radius:2px;cursor:ew-resize;display:none;pointer-events:auto}
-#hud {position:absolute;right:10px;top:10px;background:rgba(17,24,39,.6);color:#fff;font-size:12px;padding:4px 8px;border-radius:6px}
-#toast {position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:2000}
-.toast-item {background:#111827;color:#fff;padding:8px 12px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:.95}
-#tutorial {background:#fef9c3;padding:10px;border-radius:8px;margin-top:12px;display:block}
-#tutorial.hidden {display:none}
-#warmupBtn {margin-top:8px}
-#iaPreviewBtn {margin-top:8px}
-#iaProgress {margin-top:8px; background:#f3f4f6;border-radius:4px;height:8px}
-#iaProgressFill {background:#2563eb;height:100%;width:0;border-radius:4px}
-#iaLogs {font-size:12px;color:#6b7280;margin-top:4px}
-#multiMaskList {max-height:150px;overflow:auto}
-#estimateBtn {margin-top:8px}
+<style>
+ :root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb}
+ *{box-sizing:border-box}
+ body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;margin:16px;color:#111}
+ h1{margin:0 0 8px 0}
+ .topbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
+ .card{border:1px solid var(--b);border-radius:12px;padding:10px;background:#fff}
+ .muted{color:var(--muted);font-size:13px}
+ .layout{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
+ .viewer{max-width:1024px;margin:0 auto; position:relative}
+ .player-wrap{position:relative; padding-bottom: var(--controlsH);}
+ video{display:block;width:100%;height:auto;max-height:58vh;border-radius:10px;box-shadow:0 0 0 1px #ddd}
+ #editCanvas{position:absolute;left:0;right:0;top:0;bottom:var(--controlsH);border-radius:10px;pointer-events:none}
+ .timeline-container{margin-top:10px}
+ .timeline{position:relative;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px;border:1px solid var(--b);border-radius:10px;-webkit-overflow-scrolling:touch;width:100%}
+ .thumb{flex:0 0 auto;display:inline-block;position:relative;transition:transform 0.2s;text-align:center}
+ .thumb:hover{transform:scale(1.05)}
+ .thumb img{height:var(--thumbH,110px);display:block;border-radius:6px;cursor:pointer;border:2px solid transparent;object-fit:cover}
+ .thumb img.sel{border-color:var(--active-border)}
+ .thumb img.sel-strong{outline:3px solid var(--active-border);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--active-border)}
+ .thumb.hasmask::after{content:"★";position:absolute;right:6px;top:4px;color:#f5b700;text-shadow:0 0 3px rgba(0,0,0,0.35);font-size:16px}
+ .thumb-label{font-size:11px;color:var(--muted);margin-top:2px;display:block}
+ .timeline.filter-masked .thumb:not(.hasmask){display:none}
+ .tools .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+ .btn{padding:8px 12px;border-radius:8px;border:1px solid var(--b);background:#f8fafc;cursor:pointer;transition:background 0.2s, border 0.2s}
+ .btn:hover{background:var(--active-bg);border-color:var(--active-border)}
+ .btn.active,.btn.toggled{background:var(--active-bg);border-color:var(--active-border)}
+ .swatch{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;cursor:pointer;transition:box-shadow 0.2s}
+ .swatch.sel{box-shadow:0 0 0 2px var(--active-border)}
+ ul.clean{list-style:none;padding-left:0;margin:6px 0}
+ ul.clean li{margin:2px 0;display:flex;align-items:center;gap:6px}
+ .rename-btn{font-size:12px;padding:2px 4px;border:none;background:transparent;cursor:pointer;color:var(--muted);transition:color 0.2s}
+ .rename-btn:hover{color:#2563eb}
+ .delete-btn{color:#ef4444;font-size:14px;cursor:pointer;transition:color 0.2s}
+ .delete-btn:hover{color:#b91c1c}
+ #loading-indicator{display:none;margin-top:6px;color:#f59e0b}
+ .portion-row{display:flex;gap:6px;align-items:center;margin-top:8px}
+ .portion-input{width:70px}
+ #tl-progress-bar{background:#f3f4f6;border-radius:4px;height:8px;margin-top:10px}
+ #tl-progress-fill{background:#2563eb;height:100%;width:0;border-radius:4px}
+ #popup {position:fixed;top:20%;left:50%;transform:translate(-50%, -50%);background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:1000;display:none;min-width:320px}
+ #popup-progress-bar{background:#f3f4f6;border-radius:4px;height:8px;margin:10px 0}
+ #popup-progress-fill{background:#2563eb;height:100%;width:0;border-radius:4px}
+ #popup-logs {max-height:200px;overflow:auto;font-size:12px;color:#6b7280}
+ .playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--active-border);opacity:.9;pointer-events:none;display:block}
+ #portionBand{position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);background:rgba(37,99,235,.12);pointer-events:none;display:none}
+ #inHandle,#outHandle{position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);width:6px;background:rgba(37,99,235,.9);border-radius:2px;cursor:ew-resize;display:none;pointer-events:auto}
+ #hud{position:absolute;right:10px;top:10px;background:rgba(17,24,39,.6);color:#fff;font-size:12px;padding:4px 8px;border-radius:6px}
+ #toast{position:fixed;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:2000}
+ .toast-item{background:#111827;color:#fff;padding:8px 12px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:.95}
+ /* 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>
 </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>
   <div class="viewer card" id="viewerCard">
@@ -570,6 +610,7 @@ ul.clean li {margin:2px 0;display:flex;align-items:center;gap:6px}
     <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="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>
@@ -597,8 +638,6 @@ ul.clean li {margin:2px 0;display:flex;align-items:center;gap:6px}
    <button id="btnBack" class="btn" style="display:none" title="Retour au mode lecture">🎬 Retour lecteur</button>
    <button id="btnSave" class="btn" style="display:none" title="Enregistrer le masque sélectionné">💾 Enregistrer masque</button>
    <button id="btnClear" class="btn" style="display:none" title="Effacer la sélection actuelle">🧽 Effacer sélection</button>
-   <button id="undoBtn" class="btn" style="display:none">↩️ Undo</button>
-   <button id="redoBtn" class="btn" style="display:none">↪️ Redo</button>
   </div>
   <div style="margin-top:10px">
    <div class="muted">Couleur</div>
@@ -614,19 +653,13 @@ ul.clean li {margin:2px 0;display:flex;align-items:center;gap:6px}
    <details open>
     <summary><strong>Masques</strong></summary>
     <div id="maskList" class="muted">—</div>
-    <div id="multiMaskList" class="muted">—</div>
     <button class="btn" style="margin-top:8px" id="exportBtn" title="Exporter la vidéo avec les masques appliqués (bientôt IA)">Exporter vidéo modifiée</button>
-    <button class="btn" id="iaPreviewBtn" title="Preview IA (en développement)">🔍 Preview IA</button>
-    <button class="btn" id="estimateBtn" title="Estimer temps/VRAM">⏱️ Estimer</button>
    </details>
-   <div id="iaProgress"><div id="iaProgressFill"></div></div>
-   <div id="iaLogs"></div>
    <div style="margin-top:6px">
     <strong>Vidéos disponibles</strong>
     <ul id="fileList" class="clean muted" style="max-height:180px;overflow:auto">Chargement…</ul>
    </div>
   </div>
-  <button class="btn" id="warmupBtn">Warm-up Modèles</button>
  </div>
 </div>
 <div id="popup">
@@ -635,18 +668,11 @@ ul.clean li {margin:2px 0;display:flex;align-items:center;gap:6px}
  <div id="popup-logs"></div>
 </div>
 <div id="toast"></div>
-<div id="tutorial">
- <h4>Tutoriel</h4>
- <p>1. Upload vidéo local. 2. Dessine masques. 3. Retouche IA. 4. Export téléchargement.</p>
- <button onclick="this.parentElement.classList.add('hidden')">Masquer</button>
-</div>
 <script>
 const serverVid = "__VID__";
 const serverMsg = "__MSG__";
 document.getElementById('msg').textContent = serverMsg;
-// Ajout prefix pour pointer/backend
-let prefix = '';
-// Elements (inchangé)
+// Elements
 const statusEl = document.getElementById('status');
 const player = document.getElementById('player');
 const srcEl = document.getElementById('vidsrc');
@@ -680,16 +706,13 @@ const hud = document.getElementById('hud');
 const toastWrap = document.getElementById('toast');
 const gotoInput = document.getElementById('gotoInput');
 const gotoBtn = document.getElementById('gotoBtn');
-const tutorial = document.getElementById('tutorial');
-const warmupBtn = document.getElementById('warmupBtn');
-const iaPreviewBtn = document.getElementById('iaPreviewBtn');
-const iaProgressFill = document.getElementById('iaProgressFill');
-const iaLogs = document.getElementById('iaLogs');
-const undoBtn = document.getElementById('undoBtn');
-const redoBtn = document.getElementById('redoBtn');
-const multiMaskList = document.getElementById('multiMaskList');
-const estimateBtn = document.getElementById('estimateBtn');
-// State (inchangé)
+// 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 = '';
@@ -697,17 +720,14 @@ let bustToken = Date.now();
 let fps = 30, frames = 0;
 let currentIdx = 0;
 let mode = 'view';
-let rects = []; 
-let dragging=false, sx=0, sy=0, currentRect = null;
+let rect = null, dragging=false, sx=0, sy=0;
 let color = '#10b981';
-let rectMap = new Map(); 
-let history = []; 
-let historyIdx = -1;
+let rectMap = new Map();
 let masks = [];
 let maskedSet = new Set();
 let timelineUrls = [];
 let portionStart = null;
-let portionEnd = null;
+let portionEnd = null; // exclusive
 let loopInterval = null;
 let chunkSize = 50;
 let timelineStart = 0, timelineEnd = 0;
@@ -720,7 +740,8 @@ let lastCenterMs = 0;
 const CENTER_THROTTLE_MS = 150;
 const PENDING_KEY = 've_pending_masks_v1';
 let maskedOnlyMode = false;
-// Utils (inchangé)
+
+// 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); }
@@ -740,22 +761,28 @@ function updateSelectedThumb(){
   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);
+  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<40; k++){
+  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, 25));
+        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, 25));
+      await new Promise(r=>setTimeout(r, 30));
     }
   }
   return false;
@@ -803,15 +830,6 @@ async function flushPending(){
   savePendingList(kept);
   if(kept.length===0) showToast('Masques hors-ligne synchronisés ✅');
 }
-const AUTOSAVE_KEY = 've_autosave_rects_v1';
-function saveAutoRects(){ localStorage.setItem(AUTOSAVE_KEY, JSON.stringify({vid:vidName, idx:currentIdx, rects:rects})); }
-function loadAutoRects(){ 
-  try{ 
-    const d = JSON.parse(localStorage.getItem(AUTOSAVE_KEY) || '{}'); 
-    if(d.vid === vidName && d.idx === currentIdx){ rects = d.rects || []; draw(); } 
-  }catch{} 
-}
-// Layout (inchangé)
 function syncTimelineWidth(){ const w = playerWrap.clientWidth; tlBox.style.width = w + 'px'; }
 function fitCanvas(){
   const r=player.getBoundingClientRect();
@@ -833,79 +851,57 @@ function setMode(m){
     modeLabel.textContent='Édition';
     btnEdit.style.display='none'; btnBack.style.display='inline-block';
     btnSave.style.display='inline-block'; btnClear.style.display='inline-block';
-    undoBtn.style.display='inline-block'; redoBtn.style.display='inline-block';
     canvas.style.pointerEvents='auto';
-    rects = rectMap.get(currentIdx) || []; 
-    history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); loadAutoRects(); updateUndoRedo();
+    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';
-    undoBtn.style.display='none'; redoBtn.style.display='none';
     canvas.style.pointerEvents='none';
-    rects=[]; draw();
+    rect=null; draw();
   }
 }
 function draw(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
-  rects.forEach(r => {
-    const x=Math.min(r.x1,r.x2), y=Math.min(r.y1,r.y2);
-    const w=Math.abs(r.x2-r.x1), h=Math.abs(r.y2-r.y1);
-    ctx.strokeStyle=r.color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
-    ctx.fillStyle=r.color+'28'; ctx.fillRect(x,y,w,h);
-  });
+  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;
-  currentRect={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; rects.push(currentRect); draw(); saveAutoRects();
+  rect={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; draw();
 });
 canvas.addEventListener('mousemove',(e)=>{
   if(!dragging) return;
   const r=canvas.getBoundingClientRect();
-  currentRect.x2=e.clientX-r.left; currentRect.y2=e.clientY-r.top; draw();
+  rect.x2=e.clientX-r.left; rect.y2=e.clientY-r.top; draw();
 });
-['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{
-  dragging=false;
-  if(currentRect){ pushHistory(); currentRect = null; }
-}));
-function pushHistory(){ 
-  history = history.slice(0, historyIdx + 1); 
-  history.push(JSON.stringify(rects)); 
-  historyIdx++; 
-  updateUndoRedo(); 
-  saveAutoRects(); 
-}
-function updateUndoRedo(){
-  undoBtn.disabled = historyIdx <= 0;
-  redoBtn.disabled = historyIdx >= history.length - 1;
-}
-undoBtn.onclick = () => { 
-  if(historyIdx > 0){ historyIdx--; rects = JSON.parse(history[historyIdx]); draw(); updateUndoRedo(); saveAutoRects(); } 
-};
-redoBtn.onclick = () => { 
-  if(historyIdx < history.length - 1){ historyIdx++; rects = JSON.parse(history[historyIdx]); draw(); updateUndoRedo(); saveAutoRects(); } 
-};
-btnClear.onclick=()=>{ if(rects.length) rects.pop(); pushHistory(); draw(); loadMultiMasks(); saveAutoRects(); };
+['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{ dragging=false; }));
+btnClear.onclick=()=>{ rect=null; rectMap.delete(currentIdx); draw(); };
 btnEdit.onclick =()=> setMode('edit');
 btnBack.onclick =()=> setMode('view');
+// Palette
 palette.querySelectorAll('.swatch').forEach(el=>{
   if(el.dataset.c===color) el.classList.add('sel');
   el.onclick=()=>{
     palette.querySelectorAll('.swatch').forEach(s=>s.classList.remove('sel'));
     el.classList.add('sel'); color=el.dataset.c;
-    if(currentRect){ currentRect.color=color; draw(); }
+    if(rect){ rect.color=color; draw(); }
   };
 });
-// Timeline (préfixes ajoutés)
+// === Timeline ===
 async function loadTimelineUrls(){
   timelineUrls = [];
   const stem = vidStem, b = bustToken;
   for(let idx=0; idx<frames; idx++){
-    timelineUrls[idx] = prefix + `thumbs/f_${stem}_${idx}.jpg?b=${b}`;
+    timelineUrls[idx] = `/thumbs/f_${stem}_${idx}.jpg?b=${b}`;
   }
   tlProgressFill.style.width='0%';
 }
@@ -920,10 +916,23 @@ async function renderTimeline(centerIdx){
     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);
+  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);
@@ -952,11 +961,11 @@ function addThumb(idx, place='append'){
   const img=new Image(); img.title='frame '+(idx+1);
   img.src=timelineUrls[idx];
   img.onerror = () => {
-    const fallback = prefix + `frame_idx?vid=${encodeURIComponent(vidName)}&idx=${idx}`;
+    const fallback = `/frame_idx?vid=${encodeURIComponent(vidName)}&idx=${idx}`;
     img.onerror = null;
     img.src = fallback;
     img.onload = () => {
-      const nu = prefix + `thumbs/f_${vidStem}_${idx}.jpg?b=${Date.now()}`;
+      const nu = `/thumbs/f_${vidStem}_${idx}.jpg?b=${Date.now()}`;
       timelineUrls[idx] = nu;
       img.src = nu;
       img.onload = null;
@@ -965,7 +974,7 @@ function addThumb(idx, place='append'){
   if(idx===currentIdx){ img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong'); }
   img.onclick=async ()=>{
     currentIdx=idx; player.currentTime=idxToSec(currentIdx);
-    if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
+    if(mode==='edit'){ rect = rectMap.get(currentIdx)||null; draw(); }
     updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); updatePlayhead();
   };
   wrap.appendChild(img);
@@ -976,6 +985,7 @@ function addThumb(idx, place='append'){
   else{ tlBox.appendChild(wrap); }
   thumbEls.set(idx, wrap);
 }
+// Scroll chunk (mode normal uniquement)
 tlBox.addEventListener('scroll', ()=>{
   if (maskedOnlyMode || (portionStart!=null && portionEnd!=null)){
     updatePlayhead(); updatePortionOverlays();
@@ -995,13 +1005,15 @@ tlBox.addEventListener('scroll', ()=>{
   }
   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;
+  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);
@@ -1023,6 +1035,7 @@ resetFull.onclick = async ()=>{
   resetFull.style.display='none';
   clearInterval(loopInterval); updatePortionOverlays();
 };
+// Drag IN/OUT
 function attachHandleDrag(handle, which){
   let draggingH=false;
   function onMove(e){
@@ -1037,7 +1050,8 @@ function attachHandleDrag(handle, which){
   window.addEventListener('mousemove', onMove);
   window.addEventListener('mouseup', ()=>{ draggingH=false; });
 }
-ensureOverlays(); attachHandleDrag(inHandle(), 'in'); attachHandleDrag(outHandle(), 'out');
+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 () => {
@@ -1045,7 +1059,7 @@ async function showProgress(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>');
+    popupLogs.innerHTML = (d.logs||[]).map(x=>String(x)).join('<br>');
     if(d.done){
       clearInterval(interval);
       popup.style.display = 'none';
@@ -1053,17 +1067,18 @@ async function showProgress(vidStem){
     }
   }, 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 = prefix + 'data/' + encodeURIComponent(vidName) + '?t=' + bust;
-  player.setAttribute('poster', prefix + 'poster/' + encodeURIComponent(vidName) + '?t=' + bust);
+  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(prefix + 'meta/' + encodeURIComponent(vidName));
+    const r=await fetch('/meta/'+encodeURIComponent(vidName));
     if(r.ok){
       const m=await r.json();
       fps=m.fps||30; frames=m.frames||0;
@@ -1084,9 +1099,9 @@ async function loadVideoAndMeta() {
 player.addEventListener('loadedmetadata', async ()=>{
   fitCanvas();
   if(!frames || frames<=0){
-    try{ const r=await fetch(prefix + 'meta/'+encodeURIComponent(vidName)); if(r.ok){ const m=await r.json(); fps=m.fps||30; frames=m.frames||0; } }catch{}
+    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(); rects=[]; draw();
+  currentIdx=0; goFrame.value=1; rectMap.clear(); rect=null; draw();
 });
 window.addEventListener('resize', ()=>{ fitCanvas(); });
 player.addEventListener('pause', ()=>{ isPaused = true; updateSelectedThumb(); centerSelectedThumb(); });
@@ -1094,22 +1109,24 @@ player.addEventListener('play', ()=>{ isPaused = false; updateSelectedThumb(); }
 player.addEventListener('timeupdate', ()=>{
   posInfo.textContent='t='+player.currentTime.toFixed(2)+'s';
   currentIdx=timeToIdx(player.currentTime);
-  if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
+  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'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
+  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;
@@ -1130,6 +1147,7 @@ async function gotoFrameNum(){
 }
 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'; });
@@ -1141,7 +1159,9 @@ uploadZone.addEventListener('drop', (e) => {
     fetch('/upload?redirect=1', {method: 'POST', body: fd}).then(() => location.reload());
   }
 });
-document.getElementById('exportBtn').onclick = () => { alert('Fonctionnalité export IA en développement !'); };
+// 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; }
@@ -1161,19 +1181,17 @@ async function loadFiles(){
 async function loadMasks(){
   loadingInd.style.display='block';
   const box=document.getElementById('maskList');
-  const r=await fetch(prefix + 'mask/'+encodeURIComponent(vidName));
+  const r=await fetch('/mask/'+encodeURIComponent(vidName));
   const d=await r.json();
   masks=d.masks||[];
-  maskedSet = new Set();
+  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=>{
-    const idx = m.frame_idx;
-    maskedSet.add(idx);
-    if(!rectMap.has(idx)) rectMap.set(idx, []);
     if(m.shape==='rect'){
       const [x1,y1,x2,y2] = m.points;
       const normW = canvas.clientWidth, normH = canvas.clientHeight;
-      rectMap.get(idx).push({x1:x1*normW, y1:y1*normH, x2:x2*normW, y2:y2*normH, color:m.color, id:m.id, note:m.note});
+      rectMap.set(m.frame_idx, {x1:x1*normW, y1:y1*normH, x2:x2*normW, y2:y2*normH, color:m.color});
     }
   });
   maskedCount.textContent = `(${maskedSet.size} ⭐)`;
@@ -1208,70 +1226,71 @@ async function loadMasks(){
   });
   box.appendChild(ul);
   loadingInd.style.display='none';
-  if(mode === 'edit'){ loadMultiMasks(); loadAutoRects(); }
 }
-function loadMultiMasks(){
-  multiMaskList.innerHTML = '';
-  const curRects = rectMap.get(currentIdx) || rects; // use saved or current
-  if(!curRects.length){ multiMaskList.textContent = 'Aucun masque pour cette frame'; return; }
-  const ul = document.createElement('ul'); ul.className='clean';
-  curRects.forEach((r, i) => {
-    const li = document.createElement('li');
-    li.innerHTML = `<span style="background:${r.color};width:10px;height:10px;border-radius:50%"></span> Masque ${i+1}`;
-    const del = document.createElement('span'); del.className='delete-btn'; del.textContent='❌';
-    del.onclick = () => { rects.splice(i,1); pushHistory(); draw(); loadMultiMasks(); saveAutoRects(); };
-    li.appendChild(del);
-    ul.appendChild(li);
-  });
-  multiMaskList.appendChild(ul);
-}
-warmupBtn.onclick = async () => {
-  const r = await fetch('/warmup', {method:'POST'});
-  if(r.ok){
-    showToast('Warm-up lancé');
-    const interval = setInterval(async () => {
-      const pr = await fetch('/warmup_progress');
-      const d = await pr.json();
-      iaProgressFill.style.width = d.percent + '%';
-      iaLogs.innerHTML = d.logs.join('<br>');
-      if(d.done){ clearInterval(interval); }
-    }, 1000);
-  } else {
-    showToast('Warm-up déjà en cours ou erreur');
+// 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.');
   }
 };
-iaPreviewBtn.onclick = () => { alert('En développement, switch GPU'); };
-const iaPollInterval = setInterval(async () => {
-  if(vidName){
-    const r = await fetch('/progress_ia?vid=' + encodeURIComponent(vidName));
-    const d = await r.json();
-    iaProgressFill.style.width = d.percent + '%';
-    iaLogs.textContent = d.log;
-  }
-}, 2000);
-estimateBtn.onclick = async () => {
-  const r = await fetch('/estimate?vid=' + encodeURIComponent(vidName) + '&masks_count=' + masks.length);
-  const d = await r.json();
-  alert(`Temps: ${d.time_min}, VRAM: ${d.vram_gb}`);
+// 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 envR = await fetch('/_env');
-  const envD = await envR.json();
-  prefix = envD.pointer_set ? '/p/' : '';
-  await flushPending();
+  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(); } }
-  if(!localStorage.getItem('tutorial_seen')){ tutorial.classList.remove('hidden'); localStorage.setItem('tutorial_seen', '1'); }
 }
 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:
@@ -1279,4 +1298,4 @@ def ui(v: Optional[str] = "", msg: Optional[str] = ""):
   except Exception:
     pass
   html = HTML_TEMPLATE.replace("__VID__", urllib.parse.quote(vid)).replace("__MSG__", msg)
-  return HTMLResponse(content=html)
+  return HTMLResponse(content=html)