Update app.py

app.py

@@ -1,37 +1,29 @@
-# app.py — Video Editor API (v0.5.9)
-# v0.5.9:
-# - Centrages "Aller à #" / "Frame #" 100% fiables (attend rendu + image chargée)
-# - /mask, /mask/rename, /mask/delete : Body(...) explicite => plus de 422 silencieux
-# - Bouton "Enregistrer masque" : erreurs visibles (alert) si l’API ne répond pas OK
+# app.py — Video Editor API (v0.8.0)
+# v0.8.0: Chargement modèles Hub via /warmup, stubs IA, + Améliorations : multi-masques, estimation /estimate, progression /progress_ia, undo/redo via history, auto-save pending étendu
 from fastapi import FastAPI, UploadFile, File, HTTPException, Request, Body, Response
 from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse
 from fastapi.staticfiles import StaticFiles
 from pathlib import Path
-from typing import Optional, Dict, Any
+from typing import Optional, Dict, Any, List
 import uuid, shutil, cv2, json, time, urllib.parse, sys
 import threading
 import subprocess
 import shutil as _shutil
-# --- POINTEUR DE BACKEND (lit l'URL actuelle depuis une source externe) ------
+import os
+import httpx
+import huggingface_hub as hf
+from joblib import Parallel, delayed
+# --- POINTEUR (inchangé) ---
 import os
 import httpx
 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:
-    """
-    Renvoie l'URL du backend.
-    - Si BACKEND_POINTER_URL est défini (lien vers un petit fichier texte contenant
-      l’URL publique actuelle du backend), on lit le contenu et on le met en cache 30 s.
-    - Sinon on utilise FALLBACK_BASE (par défaut 127.0.0.1:8765).
-    """
     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()
@@ -48,7 +40,7 @@ def get_backend_base() -> str:
 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.5.9")
+app = FastAPI(title="Video Editor API", version="0.8.0")
 DATA_DIR = Path("/app/data")
 THUMB_DIR = DATA_DIR / "_thumbs"
 MASK_DIR = DATA_DIR / "_masks"
@@ -75,8 +67,9 @@ async def proxy_all(full_path: str, request: Request):
     out_headers = {k:v for k,v in r.headers.items() if k.lower() not in drop}
     return Response(content=r.content, status_code=r.status_code, headers=out_headers)
 # -------------------------------------------------------------------------------
-# Global progress dict (vid_stem -> {percent, logs, done})
+# Global progress dict (vid_stem -> {percent, logs, done}) + warmup_progress
 progress_data: Dict[str, Dict[str, Any]] = {}
+warmup_progress: Dict[str, Any] = {'percent': 0, 'logs': [], 'done': False, 'in_progress': False}
 # ---------- Helpers ----------
 def _is_video(p: Path) -> bool:
     return p.suffix.lower() in {".mp4", ".mov", ".mkv", ".webm"}
@@ -85,7 +78,6 @@ def _safe_name(name: str) -> str:
 def _has_ffmpeg() -> bool:
     return _shutil.which("ffmpeg") is not None
 def _ffmpeg_scale_filter(max_w: int = 320) -> str:
-    # Utilisation en subprocess (pas shell), on échappe la virgule.
     return f"scale=min(iw\\,{max_w}):-2"
 def _meta(video: Path):
     cap = cv2.VideoCapture(str(video))
@@ -100,10 +92,6 @@ def _meta(video: Path):
     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:
-    """
-    Crée (si besoin) et renvoie le chemin de la miniature d'index idx.
-    Utilise FFmpeg pour seek rapide si disponible, sinon OpenCV.
-    """
     out = THUMB_DIR / f"f_{video.stem}_{idx}.jpg"
     if out.exists():
         return out
@@ -141,7 +129,6 @@ def _frame_jpg(video: Path, idx: int) -> Path:
     if not ok or img is None:
         print(f"[FRAME] Cannot read idx={idx} for: {video}", file=sys.stdout)
         raise HTTPException(500, "Impossible de lire la frame demandée.")
-    # Redimension (≈320 px)
     h, w = img.shape[:2]
     if w > 320:
         new_w = 320
@@ -176,11 +163,6 @@ def _load_masks(vid: str) -> Dict[str, Any]:
 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")
 def _gen_thumbs_background(video: Path, vid_stem: str):
-    """
-    Génère toutes les vignettes en arrière-plan :
-    - Si FFmpeg dispo : ultra rapide (décode en continu, écrit f_<stem>_%d.jpg)
-    - Sinon : OpenCV optimisé (lecture séquentielle, redimensionnement CPU)
-    """
     progress_data[vid_stem] = {'percent': 0, 'logs': [], 'done': False}
     try:
         m = _meta(video)
@@ -193,7 +175,6 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
             progress_data[vid_stem]['logs'].append("Aucune frame détectée")
             progress_data[vid_stem]['done'] = True
             return
-        # Nettoyer d’anciennes thumbs du même stem
         for f in THUMB_DIR.glob(f"f_{video.stem}_*.jpg"):
             f.unlink(missing_ok=True)
         if _has_ffmpeg():
@@ -237,7 +218,6 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
                 if not ok or img is None:
                     break
                 out = THUMB_DIR / f"f_{video.stem}_{idx}.jpg"
-                # Redimension léger (≈320 px de large)
                 h, w = img.shape[:2]
                 if w > 320:
                     new_w = 320
@@ -258,12 +238,157 @@ 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
-# ---------- API ----------
+def is_gpu():
+    # TODO: Détecter si GPU actif (via torch ou env)
+    return False
+# --- Chargement Modèles (Warm-up séquentiel avec reprises) ---
+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"
+]
+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
+# --- API (Ajouts IA stubs + Nouveaux pour Améliorations) ---
+@app.post("/mask/ai")
+async def mask_ai(payload: Dict[str, Any] = Body(...)):
+    if not is_gpu(): raise HTTPException(503, "Switch GPU.")
+    # TODO: Impl SAM2
+    return {"ok": True, "mask": {"points": [0.1, 0.1, 0.9, 0.9]}}
+@app.post("/inpaint")
+async def inpaint(payload: Dict[str, Any] = Body(...)):
+    if not is_gpu(): raise HTTPException(503, "Switch GPU.")
+    # TODO: Impl DiffuEraser, update progress_ia
+    return {"ok": True, "preview": "/data/preview.mp4"}
+@app.get("/estimate")
+def estimate(vid: str, masks_count: int):
+    # TODO: Calcul simple (frames * masks * facteur GPU)
+    return {"time_min": 5, "vram_gb": 4}
+@app.get("/progress_ia")
+def progress_ia(vid: str):
+    # TODO: Retourne % et logs (e.g., {"percent": 50, "log": "Frame 25/50"})
+    return {"percent": 0, "log": "En cours..."}
+# Masques étendus pour multi par frame (masks est list, filtrable par frame_idx)
+@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}
+# Autres routes inchangées
 @app.get("/", tags=["meta"])
 def root():
     return {
         "ok": True,
-        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}", "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui"]
+        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}", "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui", "/warmup", "/warmup_progress", "/mask/ai", "/inpaint", "/estimate", "/progress_ia"]
     }
 @app.get("/health", tags=["meta"])
 def health():
@@ -370,56 +495,6 @@ 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"])
-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>
@@ -454,7 +529,7 @@ HTML_TEMPLATE = r"""
  .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{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}
@@ -475,11 +550,14 @@ HTML_TEMPLATE = r"""
  #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}
- /* Nouveaux styles pour améliorations (non-intrusifs) */
- #progressBar { width: 100%; height: 20px; background: #e5e7eb; border-radius: 4px; margin: 10px 0; }
- #progressFill { height: 100%; background: #2563eb; width: 0%; transition: width 0.5s; }
- #tutorial { background: #fef3c7; padding: 10px; border: 1px solid #fbbf24; border-radius: 4px; margin: 10px 0; cursor: pointer; }
- #tutorial.hidden { display: none; }
+ #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}
 </style>
 <h1>🎬 Video Editor</h1>
 <div class="topbar card">
@@ -533,6 +611,8 @@ HTML_TEMPLATE = r"""
    <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>
@@ -548,13 +628,18 @@ HTML_TEMPLATE = r"""
    <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>
    </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">
@@ -563,11 +648,16 @@ HTML_TEMPLATE = r"""
  <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;
-// Elements
+// Elements (ajouts pour nouvelles features)
 const statusEl = document.getElementById('status');
 const player = document.getElementById('player');
 const srcEl = document.getElementById('vidsrc');
@@ -601,7 +691,15 @@ const hud = document.getElementById('hud');
 const toastWrap = document.getElementById('toast');
 const gotoInput = document.getElementById('gotoInput');
 const gotoBtn = document.getElementById('gotoBtn');
-// State
+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');
+// State (ajouts multi-rects, history pour undo/redo, auto-save)
 let vidName = serverVid || '';
 function fileStem(name){ const i = name.lastIndexOf('.'); return i>0 ? name.slice(0,i) : name; }
 let vidStem = '';
@@ -609,9 +707,12 @@ 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 rects = []; // list of {x1,y1,x2,y2,color} for current frame
+let dragging=false, sx=0, sy=0, currentRect = null;
 let color = '#10b981';
-let rectMap = new Map();
+let rectMap = new Map(); // idx -> array of rects
+let history = []; // for undo/redo per frame
+let historyIdx = -1;
 let masks = [];
 let maskedSet = new Set();
 let timelineUrls = [];
@@ -620,7 +721,7 @@ let portionEnd = null;
 let loopInterval = null;
 let chunkSize = 50;
 let timelineStart = 0, timelineEnd = 0;
-let viewRangeStart = 0, viewRangeEnd = 0; // portée visible (portion ou full)
+let viewRangeStart = 0, viewRangeEnd = 0;
 const scrollThreshold = 100;
 let followMode = false;
 let isPaused = true;
@@ -629,7 +730,7 @@ let lastCenterMs = 0;
 const CENTER_THROTTLE_MS = 150;
 const PENDING_KEY = 've_pending_masks_v1';
 let maskedOnlyMode = false;
-// Utils
+// Utils (ajouts)
 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); }
@@ -652,7 +753,6 @@ function rawCenterThumb(el){
   tlBox.scrollLeft = Math.max(0, el.offsetLeft + el.clientWidth/2 - tlBox.clientWidth/2);
 }
 async function ensureThumbVisibleCentered(idx){
-  // Attendre que l’élément + image soient prêts avant de centrer
   for(let k=0; k<40; k++){
     const el = findThumbEl(idx);
     if(el){
@@ -713,6 +813,15 @@ async function flushPending(){
   savePendingList(kept);
   if(kept.length===0) showToast('Masques hors-ligne synchronisés ✅');
 }
+// Auto-save extension: save current rects to local if not saved
+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
 function syncTimelineWidth(){ const w = playerWrap.clientWidth; tlBox.style.width = w + 'px'; }
 function fitCanvas(){
@@ -735,52 +844,74 @@ 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';
-    rect = rectMap.get(currentIdx) || null; draw();
+    rects = rectMap.get(currentIdx) || []; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks();
   }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';
-    rect=null; draw();
+    rects=[]; 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);
-  }
+  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);
+  });
 }
 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();
+  currentRect={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; rects.push(currentRect); draw(); saveAutoRects();
 });
 canvas.addEventListener('mousemove',(e)=>{
   if(!dragging) return;
   const r=canvas.getBoundingClientRect();
-  rect.x2=e.clientX-r.left; rect.y2=e.clientY-r.top; draw();
+  currentRect.x2=e.clientX-r.left; currentRect.y2=e.clientY-r.top; draw();
 });
-['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{ dragging=false; }));
-btnClear.onclick=()=>{ rect=null; rectMap.delete(currentIdx); draw(); };
+['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{
+  dragging=false;
+  if(currentRect){ pushHistory(); }
+}));
+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=()=>{ rects.pop(); pushHistory(); draw(); saveAutoRects(); };
 btnEdit.onclick =()=> setMode('edit');
 btnBack.onclick =()=> setMode('view');
-// Palette
+// Palette (inchangé)
 palette.querySelectorAll('.swatch').forEach(el=>{
   if(el.dataset.c===color) el.classList.add('sel');
   el.onclick=()=>{
     palette.querySelectorAll('.swatch').forEach(s=>s.classList.remove('sel'));
     el.classList.add('sel'); color=el.dataset.c;
-    if(rect){ rect.color=color; draw(); }
+    if(currentRect){ currentRect.color=color; draw(); }
   };
 });
-// === Timeline ===
+// Timeline (inchangé, sauf appel loadMultiMasks dans loadMasks)
 async function loadTimelineUrls(){
   timelineUrls = [];
   const stem = vidStem, b = bustToken;
@@ -845,7 +976,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(); }
+    if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
     updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); updatePlayhead();
   };
   wrap.appendChild(img);
@@ -856,7 +987,6 @@ 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();
@@ -876,7 +1006,6 @@ tlBox.addEventListener('scroll', ()=>{
   }
   updatePlayhead(); updatePortionOverlays();
 });
-// Isoler & Boucle
 isolerBoucle.onclick = async ()=>{
   const start = parseInt(goFrame.value || '1',10) - 1;
   const end = parseInt(endPortion.value || '',10);
@@ -905,7 +1034,6 @@ resetFull.onclick = async ()=>{
   resetFull.style.display='none';
   clearInterval(loopInterval); updatePortionOverlays();
 };
-// Drag IN/OUT
 function attachHandleDrag(handle, which){
   let draggingH=false;
   function onMove(e){
@@ -921,7 +1049,6 @@ function attachHandleDrag(handle, which){
   window.addEventListener('mouseup', ()=>{ draggingH=false; });
 }
 ensureOverlays(); attachHandleDrag(document.getElementById('inHandle'), 'in'); attachHandleDrag(document.getElementById('outHandle'), 'out');
-// Progress popup
 async function showProgress(vidStem){
   popup.style.display = 'block';
   const interval = setInterval(async () => {
@@ -937,13 +1064,12 @@ 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 = '/data/'+encodeURIComponent(vidName)+'?t='+bust;
-  player.setAttribute('poster', '/poster/'+encodeURIComponent(vidName)+'?t='+bust);
+  player.setAttribute('poster', '/poster/'+encodeURIComponent(vidName)+'?t='+bust;
   player.load();
   fitCanvas();
   statusEl.textContent = 'Chargement vidéo…';
@@ -971,7 +1097,7 @@ 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(); rects=[]; draw();
 });
 window.addEventListener('resize', ()=>{ fitCanvas(); });
 player.addEventListener('pause', ()=>{ isPaused = true; updateSelectedThumb(); centerSelectedThumb(); });
@@ -979,7 +1105,7 @@ 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(); }
+  if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
   updateHUD(); updateSelectedThumb(); updatePlayhead();
   if(followMode && !isPaused){
     const now = Date.now();
@@ -991,11 +1117,10 @@ goFrame.addEventListener('change', async ()=>{
   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(); }
+  if(mode==='edit'){ rects = rectMap.get(currentIdx)||[]; history = [JSON.stringify(rects)]; historyIdx = 0; draw(); loadMultiMasks(); }
   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;
@@ -1016,7 +1141,7 @@ async function gotoFrameNum(){
 }
 gotoBtn.onclick = ()=>{ gotoFrameNum(); };
 gotoInput.addEventListener('keydown',(e)=>{ if(e.key==='Enter'){ e.preventDefault(); gotoFrameNum(); } });
-// Drag & drop upload
+// Drag & drop upload (inchangé)
 const uploadZone = document.getElementById('uploadForm');
 uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.style.borderColor = '#2563eb'; });
 uploadZone.addEventListener('dragleave', () => { uploadZone.style.borderColor = 'transparent'; });
@@ -1028,9 +1153,9 @@ uploadZone.addEventListener('drop', (e) => {
     fetch('/upload?redirect=1', {method: 'POST', body: fd}).then(() => location.reload());
   }
 });
-// Export placeholder
+// Export placeholder (inchangé)
 document.getElementById('exportBtn').onclick = () => { console.log('Export en cours... (IA à venir)'); alert('Fonctionnalité export IA en développement !'); };
-// Fichiers & masques
+// Fichiers & masques (ajouts multi + loadAutoRects)
 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; }
@@ -1038,7 +1163,7 @@ async function loadFiles(){
   d.items.forEach(name=>{
     const li=document.createElement('li');
     const delBtn = document.createElement('span'); delBtn.className='delete-btn'; delBtn.textContent='❌'; delBtn.title='Supprimer cette vidéo';
-    delBtn.onclick=async=>{
+    delBtn.onclick=async()=>{
       if(!confirm(`Supprimer "${name}" ?`)) return;
       await fetch('/delete/'+encodeURIComponent(name),{method:'DELETE'});
       loadFiles(); if(vidName===name){ vidName=''; loadVideoAndMeta(); }
@@ -1053,13 +1178,16 @@ async function loadMasks(){
   const r=await fetch('/mask/'+encodeURIComponent(vidName));
   const d=await r.json();
   masks=d.masks||[];
-  maskedSet = new Set(masks.map(m=>parseInt(m.frame_idx||0,10)));
+  maskedSet = new Set();
   rectMap.clear();
   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.set(m.frame_idx, {x1:x1*normW, y1:y1*normH, x2:x2*normW, y2:y2*normH, color:m.color});
+      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});
     }
   });
   maskedCount.textContent = `(${maskedSet.size} ⭐)`;
@@ -1074,7 +1202,7 @@ async function loadMasks(){
     const label=m.note||(`frame ${fr}`);
     li.innerHTML = `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${col};margin-right:6px;vertical-align:middle"></span> <strong>${label.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</strong> — #${fr} · t=${t}s`;
     const renameBtn=document.createElement('span'); renameBtn.className='rename-btn'; renameBtn.textContent='✏️'; renameBtn.title='Renommer le masque';
-    renameBtn.onclick=async=>{
+    renameBtn.onclick=async()=>{
       const nv=prompt('Nouveau nom du masque :', label);
       if(nv===null) return;
       const rr=await fetch('/mask/rename',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id,note:nv})});
@@ -1083,7 +1211,7 @@ async function loadMasks(){
       }
     };
     const delMaskBtn=document.createElement('span'); delMaskBtn.className='delete-btn'; delMaskBtn.textContent='❌'; delMaskBtn.title='Supprimer ce masque';
-    delMaskBtn.onclick=async=>{
+    delMaskBtn.onclick=async()=>{
       if(!confirm(`Supprimer masque "${label}" ?`)) return;
       const rr=await fetch('/mask/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id})});
       if(rr.ok){ await loadMasks(); await renderTimeline(currentIdx); draw(); showToast('Masque supprimé ✅'); } else {
@@ -1094,44 +1222,94 @@ async function loadMasks(){
   });
   box.appendChild(ul);
   loadingInd.style.display='none';
+  if(mode === 'edit'){ loadMultiMasks(); loadAutoRects(); }
+}
+function loadMultiMasks(){
+  multiMaskList.innerHTML = '';
+  const curRects = rectMap.get(currentIdx) || [];
+  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);
 }
-// Save mask (+ cache)
+// Save mask (multi: enregistre un par un)
 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);
+  if(rects.length === 0 || !vidName){ alert('Aucune sélection.'); return; }
+  for(const rect of rects){
+    if(!rect.id){ // only save new
+      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,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 d = await r.json();
+          rect.id = d.mask.id; rect.note = note;
+          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, [...rects]);
+          await loadMasks(); await renderTimeline(currentIdx);
+          showToast('Masque enregistré ✅');
+          localStorage.removeItem(AUTOSAVE_KEY); // clear auto-save after save
+        } else {
+          const txt = await r.text();
+          alert('Échec enregistrement masque: ' + r.status + ' ' + txt);
+        }
+      }catch(e){
+        alert('Erreur réseau lors de l’enregistrement du masque.');
+      }
     }
-  }catch(e){
-    alert('Erreur réseau lors de l’enregistrement du masque.');
   }
 };
-// Boot
+// Warm-up UI
+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');
+  }
+};
+// IA Preview (stub)
+iaPreviewBtn.onclick = () => { alert('En développement, switch GPU'); };
+// IA Progress poll (exemple, à activer sur /inpaint)
+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);
+// Boot (ajouts flushPending, tutorial show if first)
 async function boot(){
-  const lst = JSON.parse(localStorage.getItem('ve_pending_masks_v1') || '[]'); if(lst.length){ /* flush pending si besoin */ }
+  await flushPending();
   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);