Update app.py

app.py

@@ -1,16 +1,23 @@
-# 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)
-# - Multi-rectangles per frame (draw/save all, list editable)
-# - Undo/redo for current frame actions (buttons + logic)
-# - IA preview button (stub message)
-# - Estimation temps/VRAM (endpoint + button)
-# - Tutoriel masquable
-# - Auto-save rects (browser recovery)
-# - IA progression feedback (barre + logs)
-# Base: compatible with previous v0.5.9 routes and UI
+# app.py — Video Editor API (v0.8.2 + multi-rect + atomic mask save)
+# Ajouts sur ta v0.8.2 (sans rien casser) :
+#  - MULTI-RECT : plusieurs rectangles par frame (UI + sauvegarde) sans écraser les précédents
+#  - Sauvegarde ATOMIQUE des masques + verrou fichier -> évite les erreurs 500 et JSON corrompu
+#  - Pop-up d'erreur propre (si le backend renvoie une page HTML, on affiche un message court)
+#
+# Dépendances (inchangées) :
+# fastapi==0.115.5
+# uvicorn[standard]==0.30.6
+# python-multipart==0.0.9
+# aiofiles==23.2.1
+# starlette==0.37.2
+# numpy==1.26.4
+# opencv-python-headless==4.10.0.84
+# pillow==10.4.0
+# huggingface_hub==0.23.5
+# transformers==4.44.2
+# torch==2.4.0
+# joblib==1.4.2
+
 from fastapi import FastAPI, UploadFile, File, HTTPException, Request, Body, Response
 from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse
 from fastapi.staticfiles import StaticFiles
@@ -22,17 +29,14 @@ import subprocess
 import shutil as _shutil
 import os
 import httpx
-try:
-    from huggingface_hub import snapshot_download
-    from huggingface_hub.utils import HfHubHTTPError
-except ImportError:
-    snapshot_download = None
-    HfHubHTTPError = Exception
+
 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:
@@ -50,17 +54,22 @@ def get_backend_base() -> str:
         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.2")
+
+app = FastAPI(title="Video Editor API", version="0.8.2-mr")
+
 # --- 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 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):
@@ -79,17 +88,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)
+
 # --- 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():
@@ -102,6 +118,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():
@@ -147,6 +164,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():
@@ -161,8 +179,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():
@@ -171,9 +191,27 @@ 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")
+
+# --- Sauvegarde atomique + verrou -------------------------------------------
+_mask_locks: Dict[str, threading.Lock] = {}
+
+def _get_mask_lock(vid: str) -> threading.Lock:
+    key = str(_mask_file(vid))
+    lock = _mask_locks.get(key)
+    if not lock:
+        lock = threading.Lock()
+        _mask_locks[key] = lock
+    return lock
+
+def _save_masks_atomic(vid: str, data: Dict[str, Any]):
+    f = _mask_file(vid)
+    tmp = f.with_suffix(f.suffix + ".tmp")
+    txt = json.dumps(data, ensure_ascii=False, indent=2)
+    tmp.write_text(txt, encoding="utf-8")
+    os.replace(tmp, f)  # atomic sur la plupart des FS
+
 # --- THUMBS GENERATION BG -----------------------------------------------------
+
 def _gen_thumbs_background(video: Path, vid_stem: str):
     progress_data[vid_stem] = {'percent': 0, 'logs': [], 'done': False}
     try:
@@ -250,9 +288,17 @@ 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
+
 # --- 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
+    "state": "idle",  # idle|running|done|error
     "running": False,
     "percent": 0,
     "current": "",
@@ -263,6 +309,7 @@ warmup_state: Dict[str, Any] = {
     "finished_at": None,
     "last_error": "",
 }
+
 WARMUP_MODELS: List[str] = [
     "facebook/sam2-hiera-large",
     "lixiaowen/diffuEraser",
@@ -271,10 +318,12 @@ WARMUP_MODELS: List[str] = [
     "ByteDance/Sa2VA-4B",
     "wangfuyun/PCM_Weights",
 ]
+
 def _append_warmup_log(msg: str):
     warmup_state["log"].append(msg)
     if len(warmup_state["log"]) > 200:
         warmup_state["log"] = warmup_state["log"][-200:]
+
 def _do_warmup():
     token = os.getenv("HF_TOKEN", None)
     warmup_state.update({
@@ -298,12 +347,12 @@ def _do_warmup():
                 _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"):
@@ -311,9 +360,11 @@ def warmup_start():
     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():
@@ -321,16 +372,20 @@ def root():
         "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"])
 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
@@ -340,6 +395,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()
@@ -360,9 +416,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
@@ -375,6 +433,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
@@ -390,6 +449,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
@@ -399,6 +459,7 @@ 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):
     v = DATA_DIR / vid
@@ -426,7 +487,8 @@ 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}
-# ----- Masques -----
+
+# ----- Masques ---------------------------------------------------------------
 @app.post("/mask", tags=["mask"])
 async def save_mask(payload: Dict[str, Any] = Body(...)):
     vid = payload.get("vid")
@@ -435,23 +497,27 @@ async def save_mask(payload: Dict[str, Any] = Body(...)):
     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)
+    lock = _get_mask_lock(vid)
+    with lock:
+        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 ""
+        }
+        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}
+
 @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")
@@ -459,23 +525,29 @@ async def rename_mask(payload: Dict[str, Any] = Body(...)):
     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}
+    lock = _get_mask_lock(vid)
+    with lock:
+        data = _load_masks(vid)
+        for m in data.get("masks", []):
+            if m.get("id") == mid:
+                m["note"] = new_note
+                _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")
     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)
+    lock = _get_mask_lock(vid)
+    with lock:
+        data = _load_masks(vid)
+        data["masks"] = [m for m in data.get("masks", []) if m.get("id") != mid]
+        _save_masks_atomic(vid, data)
     return {"ok": True}
+
 # --- UI ----------------------------------------------------------------------
 HTML_TEMPLATE = r"""
 <!doctype html>
@@ -488,7 +560,7 @@ HTML_TEMPLATE = r"""
  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}
+ .muted{color:#64748b;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);}
@@ -502,7 +574,7 @@ HTML_TEMPLATE = r"""
  .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}
+ .thumb-label{font-size:11px;color:#64748b;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}
@@ -512,7 +584,7 @@ HTML_TEMPLATE = r"""
  .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{font-size:12px;padding:2px 4px;border:none;background:transparent;cursor:pointer;color:#64748b;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}
@@ -550,7 +622,7 @@ HTML_TEMPLATE = r"""
 </div>
 <div class="card" style="margin-bottom:10px">
  <div id="warmupBox">
-  <button id="warmupBtn" class="btn">⚡ Warm‑up modèles (Hub)</button>
+  <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>
@@ -670,8 +742,9 @@ const gotoBtn = document.getElementById('gotoBtn');
 // Warmup UI
 const warmBtn = document.getElementById('warmupBtn');
 const warmStat = document.getElementById('warmup-status');
-const warmBar = document.getElementById('warmup-progress').firstChild; // div inside
-const warmLog = document.getElementById('warmup-log');
+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; }
@@ -680,8 +753,9 @@ let bustToken = Date.now();
 let fps = 30, frames = 0;
 let currentIdx = 0;
 let mode = 'view';
-let rect = null, dragging=false, sx=0, sy=0;
+let rectDraft = null, dragging=false, sx=0, sy=0; // rectangle en cours (px)
 let color = '#10b981';
+// rectMap: frame_idx -> [{nx1,ny1,nx2,ny2,color}]
 let rectMap = new Map();
 let masks = [];
 let maskedSet = new Set();
@@ -700,6 +774,7 @@ 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(){
@@ -721,10 +796,10 @@ function updateSelectedThumb(){
 }
 function rawCenterThumb(el){
   const boxRect = tlBox.getBoundingClientRect();
-  const elRect = el.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));
+  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){
@@ -789,7 +864,6 @@ async function flushPending(){
   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();
@@ -812,7 +886,7 @@ function setMode(m){
     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();
+    rectDraft = null; draw();
   }else{
     player.controls = true;
     playerWrap.classList.remove('edit-mode');
@@ -820,31 +894,44 @@ function setMode(m){
     btnEdit.style.display='inline-block'; btnBack.style.display='none';
     btnSave.style.display='none'; btnClear.style.display='none';
     canvas.style.pointerEvents='none';
-    rect=null; draw();
+    rectDraft=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);
+  // Rectangles sauvegardés pour la frame courante (normalisés -> px)
+  const arr = rectMap.get(currentIdx) || [];
+  for(const r of arr){
+    const x1 = r.nx1 * canvas.width;
+    const y1 = r.ny1 * canvas.height;
+    const x2 = r.nx2 * canvas.width;
+    const y2 = r.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=r.color||'#10b981'; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
+    ctx.fillStyle=(r.color||'#10b981')+'28'; ctx.fillRect(x,y,w,h);
+  }
+  // Rectangle en cours ("draft") en px
+  if(rectDraft){
+    const x=Math.min(rectDraft.x1,rectDraft.x2), y=Math.min(rectDraft.y1,rectDraft.y2);
+    const w=Math.abs(rectDraft.x2-rectDraft.x1), h=Math.abs(rectDraft.y2-rectDraft.y1);
+    ctx.strokeStyle=rectDraft.color||color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
+    ctx.fillStyle=(rectDraft.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();
+  rectDraft={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();
+  rectDraft.x2=e.clientX-r.left; rectDraft.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=()=>{ rectDraft=null; draw(); };
 btnEdit.onclick =()=> setMode('edit');
 btnBack.onclick =()=> setMode('view');
 // Palette
@@ -853,7 +940,7 @@ palette.querySelectorAll('.swatch').forEach(el=>{
   el.onclick=()=>{
     palette.querySelectorAll('.swatch').forEach(s=>s.classList.remove('sel'));
     el.classList.add('sel'); color=el.dataset.c;
-    if(rect){ rect.color=color; draw(); }
+    if(rectDraft){ rectDraft.color=color; draw(); }
   };
 });
 // === Timeline ===
@@ -876,15 +963,15 @@ async function renderTimeline(centerIdx){
     setTimeout(async ()=>{ syncTimelineWidth(); updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); loadingInd.style.display='none'; updatePlayhead(); updatePortionOverlays(); },0);
     return;
   }
-  if (portionStart!=null && portionEnd==null){
+  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;
+    for (let i = s; i < e; i++) addThumb(i, 'append');  // rendre TOUTE la portion
+    timelineStart = s; 
+    timelineEnd   = e;
     viewRangeStart = s;
-    viewRangeEnd = e;
+    viewRangeEnd   = e;
     setTimeout(async ()=>{
       syncTimelineWidth();
       updateSelectedThumb();
@@ -934,7 +1021,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'){ rect = rectMap.get(currentIdx)||null; draw(); }
+    rectDraft = null; draw();
     updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); updatePlayhead();
   };
   wrap.appendChild(img);
@@ -952,13 +1039,13 @@ tlBox.addEventListener('scroll', ()=>{
     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);
+  if (scrollWidth - scrollLeft - clientWidth < 100 && timelineEnd < viewRangeEnd){
+    const newEnd = Math.min(viewRangeEnd, timelineEnd + 50);
     for(let i=timelineEnd;i<newEnd;i++){ addThumb(i,'append'); }
     timelineEnd = newEnd;
   }
-  if (scrollLeft < scrollThreshold && timelineStart > viewRangeStart){
-    const newStart = Math.max(viewRangeStart, timelineStart - chunkSize);
+  if (scrollLeft < 100 && timelineStart > viewRangeStart){
+    const newStart = Math.max(viewRangeStart, timelineStart - 50);
     for(let i=newStart;i<timelineStart;i++){ addThumb(i,'prepend'); }
     tlBox.scrollLeft += (timelineStart - newStart) * (110 + 8);
     timelineStart = newStart;
@@ -967,24 +1054,21 @@ tlBox.addEventListener('scroll', ()=>{
 });
 // 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);
   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);
-  }
-}
+  loopInterval = setInterval(()=>{ if(player.currentTime >= idxToSec(portionEnd)) player.currentTime = idxToSec(portionStart); }, 100);
+  updatePortionOverlays();
+};
 resetFull.onclick = async ()=>{
   portionStart = null; portionEnd = null;
   viewRangeStart = 0; viewRangeEnd = frames;
@@ -992,7 +1076,8 @@ resetFull.onclick = async ()=>{
   player.pause(); isPaused = true;
   await renderTimeline(currentIdx);
   resetFull.style.display='none';
-  clearInterval(loopInterval); updatePortionOverlays();
+  if(loopInterval) clearInterval(loopInterval);
+  updatePortionOverlays();
 };
 // Drag IN/OUT
 function attachHandleDrag(handle, which){
@@ -1010,7 +1095,7 @@ function attachHandleDrag(handle, which){
   window.addEventListener('mouseup', ()=>{ draggingH=false; });
 }
 ensureOverlays(); attachHandleDrag(document.getElementById('inHandle'), 'in'); attachHandleDrag(document.getElementById('outHandle'), 'out');
-// Progress popup
+// Progress popup (thumbs)
 async function showProgress(vidStem){
   popup.style.display = 'block';
   const interval = setInterval(async () => {
@@ -1018,7 +1103,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';
@@ -1060,27 +1145,28 @@ player.addEventListener('loadedmetadata', async ()=>{
   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();
+  currentIdx=0; goFrame.value=1; rectMap.clear(); rectDraft=null; draw();
 });
-window.addEventListener('resize', ()=>{ fitCanvas(); });
+window.addEventListener('resize', ()=>{ fitCanvas(); draw(); });
 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(); }
+  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(); }
+  rectDraft = null; draw();
   await renderTimeline(currentIdx);
   await ensureThumbVisibleCentered(currentIdx);
 });
@@ -1100,6 +1186,7 @@ async function gotoFrameNum(){
   player.pause(); isPaused = true;
   currentIdx = v-1; player.currentTime = idxToSec(currentIdx);
   goFrame.value = v;
+  rectDraft = null; draw();
   await renderTimeline(currentIdx);
   await ensureThumbVisibleCentered(currentIdx);
 }
@@ -1144,15 +1231,17 @@ async function loadMasks(){
   masks=d.masks||[];
   maskedSet = new Set(masks.map(m=>parseInt(m.frame_idx||0,10)));
   rectMap.clear();
+  // MULTI-RECT : on cumule tous les rectangles de chaque frame (coords normalisées)
   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});
+      const [nx1,ny1,nx2,ny2] = m.points;
+      const arr = rectMap.get(m.frame_idx) || [];
+      arr.push({nx1,ny1,nx2,ny2,color:m.color});
+      rectMap.set(m.frame_idx, arr);
     }
   });
   maskedCount.textContent = `(${maskedSet.size} ⭐)`;
-  if(!masks.length){ box.textContent='—'; loadingInd.style.display='none'; return; }
+  if(!masks.length){ box.textContent='—'; loadingInd.style.display='none'; draw(); return; }
   box.innerHTML='';
   const ul=document.createElement('ul'); ul.className='clean';
   masks.forEach(m=>{
@@ -1168,7 +1257,9 @@ async function loadMasks(){
       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);
+        let txt = await rr.text(); const ct = rr.headers.get('content-type')||'';
+        if(ct.includes('text/html') || txt.startsWith('<!DOCTYPE')) txt = 'Erreur côté serveur.';
+        alert('Échec renommage: ' + rr.status + ' ' + txt);
       }
     };
     const delMaskBtn=document.createElement('span'); delMaskBtn.className='delete-btn'; delMaskBtn.textContent='❌'; delMaskBtn.title='Supprimer ce masque';
@@ -1176,36 +1267,42 @@ async function loadMasks(){
       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);
+        let txt = await rr.text(); const ct = rr.headers.get('content-type')||'';
+        if(ct.includes('text/html') || txt.startsWith('<!DOCTYPE')) txt = 'Erreur côté serveur.';
+        alert('Échec suppression: ' + rr.status + ' ' + txt);
       }
     };
     li.appendChild(renameBtn); li.appendChild(delMaskBtn); ul.appendChild(li);
   });
   box.appendChild(ul);
   loadingInd.style.display='none';
+  draw();
 }
-// Save mask (+ cache)
+// Save mask (+ cache) — MULTI-RECT
 btnSave.onclick = async ()=>{
-  if(!rect || !vidName){ alert('Aucune sélection.'); return; }
+  if(!rectDraft || !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};
+  const nx1 = Math.min(rectDraft.x1,rectDraft.x2) / canvas.clientWidth;
+  const ny1 = Math.min(rectDraft.y1,rectDraft.y2) / canvas.clientHeight;
+  const nx2 = Math.max(rectDraft.x1,rectDraft.x2) / canvas.clientWidth;
+  const ny2 = Math.max(rectDraft.y1,rectDraft.y2) / canvas.clientHeight;
+  const payload={vid:vidName,time_s:player.currentTime,frame_idx:currentIdx,shape:'rect',points:[nx1,ny1,nx2,ny2],color:rectDraft.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});
+      const arr = rectMap.get(currentIdx) || [];
+      arr.push({nx1,ny1,nx2,ny2,color:payload.color});
+      rectMap.set(currentIdx, arr);
+      rectDraft = null;
       await loadMasks(); await renderTimeline(currentIdx);
       showToast('Masque enregistré ✅');
     } else {
-      const txt = await r.text();
+      let txt = await r.text(); const ct = r.headers.get('content-type')||'';
+      if(ct.includes('text/html') || txt.startsWith('<!DOCTYPE')) txt = 'Erreur côté serveur.';
       alert('Échec enregistrement masque: ' + r.status + ' ' + txt);
     }
   }catch(e){
@@ -1222,7 +1319,7 @@ warmBtn.onclick = async ()=>{
       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'; warmLog.classList.add('err'); } else { warmLog.classList.remove('err'); }
+      if(st.state==='error'){ txt += ' · erreur'; }
       warmStat.textContent = txt;
       const lines = (st.log||[]).slice(-6);
       warmLog.innerHTML = lines.map(x=>String(x)).join('<br>');
@@ -1246,6 +1343,7 @@ 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 ""
@@ -1254,4 +1352,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)