Update app.py

app.py

@@ -1,32 +1,16 @@
-# We'll write the corrected full script (based on the user's v0.8.2) to a file for download.
-# Changes:
-# - Frontend: allow multiple rectangles per frame (rectMap: Map<frameIdx, Array of normalized rects>).
-# - Frontend: keep "draft" rect separate; btnClear only clears draft, doesn't remove saved.
-# - Frontend: draw() renders all saved rects for the current frame + the draft.
-# - Backend: atomic mask JSON writes with file-level locks to avoid 500 errors on concurrent saves.
-# - Backend: use os.replace for atomic write; wrap /mask, /mask/rename, /mask/delete operations with the lock.
-# - Everything else (timeline, warm-up, routes) stays as in v0.8.2.
-from pathlib import Path
-code = r'''# app.py — Video Editor API (v0.8.2+multi-rect, atomic-mask)
-# Fixes over v0.8.2:
-#  - MULTI-RECT: plusieurs rectangles par frame (UI + sauvegarde), sans écraser les précédents
-#  - Enregistrement masques ATOMIQUE + verrou par fichier (supprime les 500 sporadiques)
-#  - Ne casse rien d’existant : timeline/portion/goto restent identiques à v0.8.2
-#
-# Dépendances (comme fourni) :
-# 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
-
+# 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
 from fastapi import FastAPI, UploadFile, File, HTTPException, Request, Body, Response
 from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse
 from fastapi.staticfiles import StaticFiles
@@ -38,14 +22,17 @@ 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:
@@ -63,22 +50,17 @@ 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-mr")
-
+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 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):
@@ -97,24 +79,17 @@ 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():
@@ -127,7 +102,6 @@ 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():
@@ -173,7 +147,6 @@ 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():
@@ -188,10 +161,8 @@ 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():
@@ -200,27 +171,9 @@ 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": []}
-
-# --- Atomic save with per-file locks -----------------------------------------
-_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)
-
+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:
@@ -260,7 +213,7 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
             proc.wait()
             generated = len(list(THUMB_DIR.glob(f"f_{video.stem}_*.jpg")))
             progress_data[vid_stem]['percent'] = 100
-            progress_data[vid_stem]['logs"].append("OK FFmpeg: {}/{} thumbs".format(generated, total_frames))
+            progress_data[vid_stem]['logs'].append("OK FFmpeg: {}/{} thumbs".format(generated, total_frames))
             progress_data[vid_stem]['done'] = True
             print(f"[PRE-GEN:FFMPEG] {generated} thumbs for {video.name}", file=sys.stdout)
         else:
@@ -297,17 +250,9 @@ 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": "",
@@ -318,7 +263,6 @@ warmup_state: Dict[str, Any] = {
     "finished_at": None,
     "last_error": "",
 }
-
 WARMUP_MODELS: List[str] = [
     "facebook/sam2-hiera-large",
     "lixiaowen/diffuEraser",
@@ -327,12 +271,10 @@ 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({
@@ -356,12 +298,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"):
@@ -369,11 +311,9 @@ 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():
@@ -381,21 +321,17 @@ 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"]) 
+@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():
@@ -404,8 +340,7 @@ 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"}:
@@ -425,12 +360,10 @@ 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():
@@ -442,8 +375,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"]) 
+@app.get("/frame_idx", tags=["io"])
 def frame_idx(vid: str, idx: int):
     v = DATA_DIR / vid
     if not v.exists():
@@ -458,8 +390,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"]) 
+@app.get("/poster/{vid}", tags=["io"])
 def poster(vid: str):
     v = DATA_DIR / vid
     if not v.exists():
@@ -468,8 +399,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"]) 
+@app.get("/window/{vid}", tags=["io"])
 def window(vid: str, center: int = 0, count: int = 21):
     v = DATA_DIR / vid
     if not v.exists():
@@ -496,9 +426,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 ---------------------------------------------------------------
-@app.post("/mask", tags=["mask"]) 
+# ----- Masques -----
+@app.post("/mask", tags=["mask"])
 async def save_mask(payload: Dict[str, Any] = Body(...)):
     vid = payload.get("vid")
     if not vid:
@@ -506,58 +435,47 @@ 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")
-    # Écriture atomique et sérialisée
-    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],
-            "color": payload.get("color") or "#10b981",
-            "note": payload.get("note") or ""
-        }
-        data.setdefault("masks", []).append(m)
-        _save_masks_atomic(vid, data)
+    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"]) 
+@app.get("/mask/{vid}", tags=["mask"])
 def list_masks(vid: str):
     return _load_masks(vid)
-
-@app.post("/mask/rename", tags=["mask"]) 
+@app.post("/mask/rename", tags=["mask"])
 async def rename_mask(payload: Dict[str, Any] = Body(...)):
     vid = payload.get("vid")
     mid = payload.get("id")
     new_note = (payload.get("note") or "").strip()
     if not vid or not mid:
         raise HTTPException(400, "vid et id requis")
-    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}
+    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"]) 
+@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")
-    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)
+    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>
@@ -632,7 +550,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>
@@ -752,9 +670,8 @@ const gotoBtn = document.getElementById('gotoBtn');
 // Warmup UI
 const warmBtn = document.getElementById('warmupBtn');
 const warmStat = document.getElementById('warmup-status');
-const warmBar  = document.getElementById('warmup-fill');
-const warmLog  = document.getElementById('warmup-log');
-
+const warmBar = document.getElementById('warmup-progress').firstChild; // div inside
+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; }
@@ -763,9 +680,8 @@ let bustToken = Date.now();
 let fps = 30, frames = 0;
 let currentIdx = 0;
 let mode = 'view';
-let rectDraft = null, dragging=false, sx=0, sy=0; // rectangle en cours (px)
+let rect = null, dragging=false, sx=0, sy=0;
 let color = '#10b981';
-// rectMap: frame_idx -> [{nx1,ny1,nx2,ny2,color}]
 let rectMap = new Map();
 let masks = [];
 let maskedSet = new Set();
@@ -784,7 +700,6 @@ 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(){
@@ -806,10 +721,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){
@@ -874,6 +789,7 @@ 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();
@@ -896,7 +812,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';
-    rectDraft = null; draw();
+    rect = rectMap.get(currentIdx) || null; draw();
   }else{
     player.controls = true;
     playerWrap.classList.remove('edit-mode');
@@ -904,44 +820,31 @@ function setMode(m){
     btnEdit.style.display='inline-block'; btnBack.style.display='none';
     btnSave.style.display='none'; btnClear.style.display='none';
     canvas.style.pointerEvents='none';
-    rectDraft=null; draw();
+    rect=null; draw();
   }
 }
 function draw(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
-  // Saved rects for current frame (normalized -> 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);
-  }
-  // Draft rect (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);
+  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;
-  rectDraft={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; draw();
+  rect={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; draw();
 });
 canvas.addEventListener('mousemove',(e)=>{
   if(!dragging) return;
   const r=canvas.getBoundingClientRect();
-  rectDraft.x2=e.clientX-r.left; rectDraft.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; }));
-btnClear.onclick=()=>{ rectDraft=null; draw(); };
+btnClear.onclick=()=>{ rect=null; rectMap.delete(currentIdx); draw(); };
 btnEdit.onclick =()=> setMode('edit');
 btnBack.onclick =()=> setMode('view');
 // Palette
@@ -950,7 +853,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(rectDraft){ rectDraft.color=color; draw(); }
+    if(rect){ rect.color=color; draw(); }
   };
 });
 // === Timeline ===
@@ -973,15 +876,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();
@@ -1031,8 +934,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);
-    rectDraft = null; // on ne change pas les rects enregistrés
-    draw();
+    if(mode==='edit'){ rect = rectMap.get(currentIdx)||null; draw(); }
     updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); updatePlayhead();
   };
   wrap.appendChild(img);
@@ -1065,13 +967,12 @@ tlBox.addEventListener('scroll', ()=>{
 });
 // Isoler & Boucle
 isolerBoucle.onclick = async ()=>{
-  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;
+  const start = parseInt(goFrame.value || '1',10) - 1;
+  const end = parseInt(endPortion.value || '',10);
+  if(!endPortion.value || end <= start || end > frames){ alert('Portion invalide (fin > début)'); return; }
+  if (end - start > 1200 && !confirm('Portion très large, cela peut être lent. Continuer ?')) return;
+  portionStart = start; portionEnd = end;
+  viewRangeStart = start; viewRangeEnd = end;
   player.pause(); isPaused = true;
   currentIdx = start; player.currentTime = idxToSec(start);
   await renderTimeline(currentIdx);
@@ -1109,7 +1010,7 @@ function attachHandleDrag(handle, which){
   window.addEventListener('mouseup', ()=>{ draggingH=false; });
 }
 ensureOverlays(); attachHandleDrag(document.getElementById('inHandle'), 'in'); attachHandleDrag(document.getElementById('outHandle'), 'out');
-// Progress popup (thumbs)
+// Progress popup
 async function showProgress(vidStem){
   popup.style.display = 'block';
   const interval = setInterval(async () => {
@@ -1117,7 +1018,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';
@@ -1159,28 +1060,27 @@ 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(); rectDraft=null; draw();
+  currentIdx=0; goFrame.value=1; rectMap.clear(); rect=null; draw();
 });
-window.addEventListener('resize', ()=>{ fitCanvas(); draw(); });
+window.addEventListener('resize', ()=>{ fitCanvas(); });
 player.addEventListener('pause', ()=>{ isPaused = true; updateSelectedThumb(); centerSelectedThumb(); });
 player.addEventListener('play', ()=>{ isPaused = false; updateSelectedThumb(); });
 player.addEventListener('timeupdate', ()=>{
   posInfo.textContent='t='+player.currentTime.toFixed(2)+'s';
   currentIdx=timeToIdx(player.currentTime);
-  draw();
+  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);
-  rectDraft = null; draw();
+  if(mode==='edit'){ rect = rectMap.get(currentIdx) || null; draw(); }
   await renderTimeline(currentIdx);
   await ensureThumbVisibleCentered(currentIdx);
 });
@@ -1200,7 +1100,6 @@ 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);
 }
@@ -1245,17 +1144,15 @@ async function loadMasks(){
   masks=d.masks||[];
   maskedSet = new Set(masks.map(m=>parseInt(m.frame_idx||0,10)));
   rectMap.clear();
-  // MULTI-RECT: on stocke en coordonnées normalisées; plusieurs par frame
   masks.forEach(m=>{
     if(m.shape==='rect'){
-      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);
+      const [x1,y1,x2,y2] = m.points;
+      const normW = canvas.clientWidth, normH = canvas.clientHeight;
+      rectMap.set(m.frame_idx, {x1:x1*normW, y1:y1*normH, x2:x2*normW, y2:y2*normH, color:m.color});
     }
   });
   maskedCount.textContent = `(${maskedSet.size} ⭐)`;
-  if(!masks.length){ box.textContent='—'; loadingInd.style.display='none'; draw(); return; }
+  if(!masks.length){ box.textContent='—'; loadingInd.style.display='none'; return; }
   box.innerHTML='';
   const ul=document.createElement('ul'); ul.className='clean';
   masks.forEach(m=>{
@@ -1286,29 +1183,25 @@ async function loadMasks(){
   });
   box.appendChild(ul);
   loadingInd.style.display='none';
-  draw();
 }
-// Save mask (+ cache) — MULTI-RECT
+// Save mask (+ cache)
 btnSave.onclick = async ()=>{
-  if(!rectDraft || !vidName){ alert('Aucune sélection.'); return; }
+  if(!rect || !vidName){ alert('Aucune sélection.'); return; }
   const defaultName = `frame ${currentIdx+1}`;
   const note = (prompt('Nom du masque (optionnel) :', defaultName) || defaultName).trim();
-  const nx1 = Math.min(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};
+  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);
-      // pousse dans rectMap (ne supprime pas les anciens)
-      const arr = rectMap.get(currentIdx) || [];
-      arr.push({nx1,ny1,nx2,ny2,color:payload.color});
-      rectMap.set(currentIdx, arr);
-      rectDraft = null;
+      rectMap.set(currentIdx,{...rect});
       await loadMasks(); await renderTimeline(currentIdx);
       showToast('Masque enregistré ✅');
     } else {
@@ -1329,7 +1222,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'; }
+      if(st.state==='error'){ txt += ' · erreur'; warmLog.classList.add('err'); } else { warmLog.classList.remove('err'); }
       warmStat.textContent = txt;
       const lines = (st.log||[]).slice(-6);
       warmLog.innerHTML = lines.map(x=>String(x)).join('<br>');
@@ -1353,8 +1246,7 @@ 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:
@@ -1362,8 +1254,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)
-'''
-out_path = Path("/mnt/data/app_v0_8_2_multi_rect_atomic.py")
-out_path.write_text(code, encoding="utf-8")
-print(f"Wrote: {out_path} ({out_path.stat().st_size} bytes)")
+  return HTMLResponse(content=html)