Update app.py

app.py

@@ -1,17 +1,13 @@
-# app.py — Video Editor API (v0.5.9 + warmup/lazy models)
-# Ajouts:
-# - /warmup/start (séquentiel, retry, logs, progress)
-# - /warmup/status, /warmup/cancel
-# - /models/ensure (lazy prefetch d’un repo HF unique)
-# - /models/status (liste des caches)
-#
-# NB: UI et routes existantes conservées à l’identique. Aucun chargement de modèle au boot.
-
+# 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
 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, List
+from typing import Optional, Dict, Any
 import uuid, shutil, cv2, json, time, urllib.parse, sys
 import threading
 import subprocess
@@ -19,26 +15,19 @@ import shutil as _shutil
 # --- POINTEUR DE BACKEND (lit l'URL actuelle depuis une source externe) ------
 import os
 import httpx
-from huggingface_hub import snapshot_download  # <-- AJOUT
 
+print("[BOOT] Video Editor API starting…")
 POINTER_URL = os.getenv("BACKEND_POINTER_URL", "").strip()
 FALLBACK_BASE = os.getenv("BACKEND_BASE_URL", "http://127.0.0.1:8765").strip()
-
+print(f"[BOOT] POINTER_URL={POINTER_URL or '(unset)'}")
+print(f"[BOOT] FALLBACK_BASE={FALLBACK_BASE}")
 _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()
@@ -52,21 +41,11 @@ def get_backend_base() -> str:
     except Exception:
         return FALLBACK_BASE
 
-# ---------------------------------------------------------------------------
-print("[BOOT] Video Editor API starting…")
-print(f"[BOOT] POINTER_URL={POINTER_URL or '(unset)'}")
-print(f"[BOOT] FALLBACK_BASE={FALLBACK_BASE}")
-
 app = FastAPI(title="Video Editor API", version="0.5.9")
-
 DATA_DIR = Path("/app/data")
 THUMB_DIR = DATA_DIR / "_thumbs"
 MASK_DIR = DATA_DIR / "_masks"
-# ---- AJOUT: dossiers pour warm-up / état / modèles
-STATE_DIR = DATA_DIR / "_state"
-MODELS_DIR = DATA_DIR / "_models"
-
-for p in (DATA_DIR, THUMB_DIR, MASK_DIR, STATE_DIR, MODELS_DIR):
+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")
@@ -90,7 +69,6 @@ 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)
-
 # -------------------------------------------------------------------------------
 # Global progress dict (vid_stem -> {percent, logs, done})
 progress_data: Dict[str, Dict[str, Any]] = {}
@@ -106,7 +84,6 @@ 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):
@@ -123,10 +100,6 @@ def _meta(video: Path):
     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
@@ -148,7 +121,6 @@ def _frame_jpg(video: Path, idx: int) -> Path:
             return out
         except subprocess.CalledProcessError as e:
             print(f"[FRAME:FFMPEG] seek fail t={t:.4f} idx={idx}: {e}", file=sys.stdout)
-
     cap = cv2.VideoCapture(str(video))
     if not cap.isOpened():
         print(f"[FRAME] Cannot open video for frames: {video}", file=sys.stdout)
@@ -165,7 +137,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
@@ -205,11 +176,6 @@ 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)
@@ -222,10 +188,8 @@ 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():
             out_tpl = str(THUMB_DIR / f"f_{video.stem}_%d.jpg")
             cmd = [
@@ -267,7 +231,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
@@ -289,13 +252,13 @@ def _gen_thumbs_background(video: Path, vid_stem: str):
         progress_data[vid_stem]['logs'].append(f"Erreur: {e}")
         progress_data[vid_stem]['done'] = True
 
-# ---------- API (existantes) ----------
+# ---------- API ----------
 @app.get("/", tags=["meta"])
 def root():
     return {
         "ok": True,
-        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}", "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui",
-                   "/warmup/start", "/warmup/status", "/warmup/cancel", "/models/ensure", "/models/status"]
+        "routes": ["/", "/health", "/files", "/upload", "/meta/{vid}", "/frame_idx", "/poster/{vid}", "/window/{vid}",
+                   "/mask", "/mask/{vid}", "/mask/rename", "/mask/delete", "/progress/{vid_stem}", "/ui"]
     }
 
 @app.get("/health", tags=["meta"])
@@ -467,238 +430,802 @@ async def delete_mask(payload: Dict[str, Any] = Body(...)):
     _save_masks(vid, data)
     return {"ok": True}
 
-# ---------- UI (inchangée) ----------
+# ---------- UI (multi-rects par frame) ----------
 HTML_TEMPLATE = r"""
 <!doctype html>
 <html lang="fr"><meta charset="utf-8">
 <title>Video Editor</title>
 <style>
- ... (CONTENU CSS/HTML/Javascript INCHANGÉ – même que ta v0.5.9) ...
+ :root{--b:#e5e7eb;--muted:#64748b; --controlsH:44px; --active-bg:#dbeafe; --active-border:#2563eb;}
+ *{box-sizing:border-box}
+ body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;margin:16px;color:#111}
+ h1{margin:0 0 8px 0}
+ .topbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
+ .card{border:1px solid var(--b);border-radius:12px;padding:10px;background:#fff}
+ .muted{color:var(--muted);font-size:13px}
+ .layout{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
+ .viewer{max-width:1024px;margin:0 auto; position:relative}
+ .player-wrap{position:relative; padding-bottom: var(--controlsH);}
+ video{display:block;width:100%;height:auto;max-height:58vh;border-radius:10px;box-shadow:0 0 0 1px #ddd}
+ #editCanvas{position:absolute;left:0;right:0;top:0;bottom:var(--controlsH);border-radius:10px;pointer-events:none}
+ .timeline-container{margin-top:10px}
+ .timeline{position:relative;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px;border:1px solid var(--b);border-radius:10px;-webkit-overflow-scrolling:touch;width:100%}
+ .thumb{flex:0 0 auto;display:inline-block;position:relative;transition:transform 0.2s;text-align:center}
+ .thumb:hover{transform:scale(1.05)}
+ .thumb img{height:var(--thumbH,110px);display:block;border-radius:6px;cursor:pointer;border:2px solid transparent;object-fit:cover}
+ .thumb img.sel{border-color:var(--active-border)}
+ .thumb img.sel-strong{outline:3px solid var(--active-border);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--active-border)}
+ .thumb.hasmask::after{content:"★";position:absolute;right:6px;top:4px;color:#f5b700;text-shadow:0 0 3px rgba(0,0,0,0.35);font-size:16px}
+ .thumb-label{font-size:11px;color:var(--muted);margin-top:2px;display:block}
+ .timeline.filter-masked .thumb:not(.hasmask){display:none}
+ .tools .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+ .btn{padding:8px 12px;border-radius:8px;border:1px solid var(--b);background:#f8fafc;cursor:pointer;transition:background 0.2s, border 0.2s}
+ .btn:hover{background:var(--active-bg);border-color:var(--active-border)}
+ .btn.active,.btn.toggled{background:var(--active-bg);border-color:var(--active-border)}
+ .swatch{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;cursor:pointer;transition:box-shadow 0.2s}
+ .swatch.sel{box-shadow:0 0 0 2px var(--active-border)}
+ ul.clean{list-style:none;padding-left:0;margin:6px 0}
+ ul.clean li{margin:2px 0;display:flex;align-items:center;gap:6px}
+ .rename-btn{font-size:12px;padding:2px 4px;border:none;background:transparent;cursor:pointer;color:var(--muted);transition:color 0.2s}
+ .rename-btn:hover{color:#2563eb}
+ .delete-btn{color:#ef4444;font-size:14px;cursor:pointer;transition:color 0.2s}
+ .delete-btn:hover{color:#b91c1c}
+ #loading-indicator{display:none;margin-top:6px;color:#f59e0b}
+ .portion-row{display:flex;gap:6px;align-items:center;margin-top:8px}
+ .portion-input{width:70px}
+ #tl-progress-bar{background:#f3f4f6;border-radius:4px;height:8px;margin-top:10px}
+ #tl-progress-fill{background:#2563eb;height:100%;width:0;border-radius:4px}
+ #popup {position:fixed;top:20%;left:50%;transform:translate(-50%, -50%);background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.2);z-index:1000;display:none;min-width:320px}
+ #popup-progress-bar{background:#f3f4f6;border-radius:4px;height:8px;margin:10px 0}
+ #popup-progress-fill{background:#2563eb;height:100%;width:0;border-radius:4px}
+ #popup-logs {max-height:200px;overflow:auto;font-size:12px;color:#6b7280}
+ #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}
+ #portionBand{position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);background:rgba(37,99,235,.12);pointer-events:none;display:none}
+ #inHandle,#outHandle{position:absolute;top:0;height:calc(var(--thumbH,110px) + 24px);width:6px;background:rgba(37,99,235,.9);border-radius:2px;cursor:ew-resize;display:none;pointer-events:auto}
+ .playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--active-border);opacity:.9;pointer-events:none;display:block}
 </style>
-<!-- (Pour éviter une réponse trop longue, ce commentaire indique simplement
-     que le bloc HTML est celui que tu as posté mot pour mot.
-     Si tu préfères, je te redonne l’intégralité du HTML sans cette coupe.) -->
+<h1>🎬 Video Editor</h1>
+<div class="topbar card">
+ <form action="/upload?redirect=1" method="post" enctype="multipart/form-data" style="display:flex;gap:8px;align-items:center" id="uploadForm">
+ <strong>Charger une vidéo :</strong>
+ <input type="file" name="file" accept="video/*" required>
+ <button class="btn" type="submit">Uploader</button>
+ </form>
+ <span class="muted" id="msg">__MSG__</span>
+ <span class="muted">Liens : <a href="/docs" target="_blank">/docs</a> • <a href="/files" target="_blank">/files</a></span>
+</div>
+<div class="layout">
+ <div>
+  <div class="viewer card" id="viewerCard">
+   <div class="player-wrap" id="playerWrap">
+    <video id="player" controls playsinline poster="/poster/__VID__">
+     <source id="vidsrc" src="/data/__VID__" type="video/mp4">
+    </video>
+    <canvas id="editCanvas"></canvas>
+    <div id="hud"></div>
+   </div>
+   <div class="muted" style="margin-top:6px">
+    <label>Frame # <input id="goFrame" type="number" min="1" value="1" style="width:90px"> </label>
+    <label>à <input id="endPortion" class="portion-input" type="number" min="1" placeholder="Optionnel pour portion"></label>
+    <button id="isolerBoucle" class="btn">Isoler & Boucle</button>
+    <button id="resetFull" class="btn" style="display:none">Retour full</button>
+    <span id="posInfo" style="margin-left:10px"></span>
+    <span id="status" style="margin-left:10px;color:#2563eb"></span>
+   </div>
+  </div>
+  <div class="card timeline-container">
+   <h4 style="margin:2px 0 8px 0">Timeline</h4>
+   <div class="row" id="tlControls" style="margin:4px 0 8px 0;gap:8px;align-items:center">
+     <button id="btnFollow" class="btn" title="Centrer pendant la lecture (OFF par défaut)">🔭 Suivre</button>
+     <button id="btnFilterMasked" class="btn" title="Afficher uniquement les frames avec masque">⭐ Masquées</button>
+     <label class="muted">Zoom <input id="zoomSlider" type="range" min="80" max="180" value="110" step="10"></label>
+     <label class="muted">Aller à # <input id="gotoInput" type="number" min="1" style="width:90px"></label>
+     <button id="gotoBtn" class="btn">Aller</button>
+     <span class="muted" id="maskedCount"></span>
+   </div>
+   <div id="timeline" class="timeline"></div>
+   <div class="muted" id="tlNote" style="margin-top:6px;display:none">Mode secours: vignettes générées dans le navigateur.</div>
+   <div id="loading-indicator">Chargement des frames...</div>
+   <div id="tl-progress-bar"><div id="tl-progress-fill"></div></div>
+  </div>
+ </div>
+ <div class="card tools">
+  <div class="row"><span class="muted">Mode : <strong id="modeLabel">Lecture</strong></span></div>
+  <div class="row" style="margin-top:6px">
+   <button id="btnEdit" class="btn" title="Passer en mode édition pour dessiner un masque">✏️ Éditer cette image</button>
+   <button id="btnBack" class="btn" style="display:none" title="Retour au mode lecture">🎬 Retour lecteur</button>
+   <button id="btnSave" class="btn" style="display:none" title="Enregistrer tous les masques dessinés sur cette frame">💾 Enregistrer masque</button>
+   <button id="btnClear" class="btn" style="display:none" title="Effacer le dernier rectangle de cette frame">🧽 Effacer sélection</button>
+  </div>
+  <div style="margin-top:10px">
+   <div class="muted">Couleur</div>
+   <div class="row" id="palette" style="margin-top:6px">
+    <div class="swatch" data-c="#10b981" style="background:#10b981" title="Vert"></div>
+    <div class="swatch" data-c="#2563eb" style="background:#2563eb" title="Bleu"></div>
+    <div class="swatch" data-c="#ef4444" style="background:#ef4444" title="Rouge"></div>
+    <div class="swatch" data-c="#f59e0b" style="background:#f59e0b" title="Orange"></div>
+    <div class="swatch" data-c="#a21caf" style="background:#a21caf" title="Violet"></div>
+   </div>
+  </div>
+  <div style="margin-top:12px">
+   <details open>
+    <summary><strong>Masques</strong></summary>
+    <div id="maskList" 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>
+   </details>
+   <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>
+ </div>
+</div>
+<div id="popup">
+ <h3>Génération thumbs en cours</h3>
+ <div id="popup-progress-bar"><div id="popup-progress-fill"></div></div>
+ <div id="popup-logs"></div>
+</div>
+<div id="toast"></div>
+<script>
+const serverVid = "__VID__";
+const serverMsg = "__MSG__";
+document.getElementById('msg').textContent = serverMsg;
+
+// Elements
+const statusEl = document.getElementById('status');
+const player = document.getElementById('player');
+const srcEl = document.getElementById('vidsrc');
+const canvas = document.getElementById('editCanvas');
+const ctx = canvas.getContext('2d');
+const modeLabel = document.getElementById('modeLabel');
+const btnEdit = document.getElementById('btnEdit');
+const btnBack = document.getElementById('btnBack');
+const btnSave = document.getElementById('btnSave');
+const btnClear= document.getElementById('btnClear');
+const posInfo = document.getElementById('posInfo');
+const goFrame = document.getElementById('goFrame');
+const palette = document.getElementById('palette');
+const fileList= document.getElementById('fileList');
+const tlBox = document.getElementById('timeline');
+const tlNote = document.getElementById('tlNote');
+const playerWrap = document.getElementById('playerWrap');
+const loadingInd = document.getElementById('loading-indicator');
+const isolerBoucle = document.getElementById('isolerBoucle');
+const resetFull = document.getElementById('resetFull');
+const endPortion = document.getElementById('endPortion');
+const popup = document.getElementById('popup');
+const popupLogs = document.getElementById('popup-logs');
+const tlProgressFill = document.getElementById('tl-progress-fill');
+const popupProgressFill = document.getElementById('popup-progress-fill');
+const btnFollow = document.getElementById('btnFollow');
+const btnFilterMasked = document.getElementById('btnFilterMasked');
+const zoomSlider = document.getElementById('zoomSlider');
+const maskedCount = document.getElementById('maskedCount');
+const hud = document.getElementById('hud');
+const toastWrap = document.getElementById('toast');
+const gotoInput = document.getElementById('gotoInput');
+const gotoBtn = document.getElementById('gotoBtn');
+
+// State
+let vidName = serverVid || '';
+function fileStem(name){ const i = name.lastIndexOf('.'); return i>0 ? name.slice(0,i) : name; }
+let vidStem = '';
+let bustToken = Date.now();
+let fps = 30, frames = 0;
+let currentIdx = 0;
+let mode = 'view';
+
+// ==== Multi-rects ====
+let currentDraw = null;          // rect en cours de tracé
+let rectsMap = new Map();        // frame_idx -> Array<rect>
+let color = '#10b981';
+
+// autres états inchangés
+let masks = [];
+let maskedSet = new Set();
+let timelineUrls = [];
+let portionStart = null;
+let portionEnd = null;
+let loopInterval = null;
+let chunkSize = 50;
+let timelineStart = 0, timelineEnd = 0;
+let viewRangeStart = 0, viewRangeEnd = 0;
+const scrollThreshold = 100;
+let followMode = false;
+let isPaused = true;
+let thumbEls = new Map();
+let lastCenterMs = 0;
+const CENTER_THROTTLE_MS = 150;
+const PENDING_KEY = 've_pending_masks_v1';
+let maskedOnlyMode = false;
+
+// Utils
+function showToast(msg){ const el = document.createElement('div'); el.className='toast-item'; el.textContent=String(msg||''); toastWrap.appendChild(el); setTimeout(()=>{ el.remove(); }, 2000); }
+function ensureOverlays(){
+  if(!document.getElementById('playhead')){ const ph=document.createElement('div'); ph.id='playhead'; ph.className='playhead'; tlBox.appendChild(ph); }
+  if(!document.getElementById('portionBand')){ const pb=document.createElement('div'); pb.id='portionBand'; tlBox.appendChild(pb); }
+  if(!document.getElementById('inHandle')){ const ih=document.createElement('div'); ih.id='inHandle'; tlBox.appendChild(ih); }
+  if(!document.getElementById('outHandle')){ const oh=document.createElement('div'); oh.id='outHandle'; tlBox.appendChild(oh); }
+}
+function playheadEl(){ return document.getElementById('playhead'); }
+function portionBand(){ return document.getElementById('portionBand'); }
+function inHandle(){ return document.getElementById('inHandle'); }
+function outHandle(){ return document.getElementById('outHandle'); }
+function findThumbEl(idx){ return thumbEls.get(idx) || null; }
+function updateHUD(){ const total = frames || 0, cur = currentIdx+1; hud.textContent = `t=${player.currentTime.toFixed(2)}s • #${cur}/${total} • ${fps.toFixed(2)}fps`; }
+function updateSelectedThumb(){
+  tlBox.querySelectorAll('.thumb img.sel, .thumb img.sel-strong').forEach(img=>{ img.classList.remove('sel','sel-strong'); });
+  const el = findThumbEl(currentIdx); if(!el) return; const img = el.querySelector('img');
+  img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong');
+}
+function rawCenterThumb(el){
+  tlBox.scrollLeft = Math.max(0, el.offsetLeft + el.clientWidth/2 - tlBox.clientWidth/2);
+}
+async function ensureThumbVisibleCentered(idx){
+  for(let k=0; k<40; k++){
+    const el = findThumbEl(idx);
+    if(el){
+      const img = el.querySelector('img');
+      if(!img.complete || img.naturalWidth === 0){
+        await new Promise(r=>setTimeout(r, 25));
+      }else{
+        rawCenterThumb(el);
+        updatePlayhead();
+        return true;
+      }
+    }else{
+      await new Promise(r=>setTimeout(r, 25));
+    }
+  }
+  return false;
+}
+function centerSelectedThumb(){ ensureThumbVisibleCentered(currentIdx); }
+function updatePlayhead(){
+  ensureOverlays();
+  const el = findThumbEl(currentIdx);
+  const ph = playheadEl();
+  if(!el){ ph.style.display='none'; return; }
+  ph.style.display='block'; ph.style.left = (el.offsetLeft + el.clientWidth/2) + 'px';
+}
+function updatePortionOverlays(){
+  ensureOverlays();
+  const pb = portionBand(), ih = inHandle(), oh = outHandle();
+  if(portionStart==null || portionEnd==null){ pb.style.display='none'; ih.style.display='none'; oh.style.display='none'; return; }
+  const a = findThumbEl(portionStart), b = findThumbEl(portionEnd-1);
+  if(!a || !b){ pb.style.display='none'; ih.style.display='none'; oh.style.display='none'; return; }
+  const left = a.offsetLeft, right = b.offsetLeft + b.clientWidth;
+  pb.style.display='block'; pb.style.left = left+'px'; pb.style.width = Math.max(0, right-left)+'px';
+  ih.style.display='block'; ih.style.left = (left - ih.clientWidth/2) + 'px';
+  oh.style.display='block'; oh.style.left = (right - oh.clientWidth/2) + 'px';
+}
+function nearestFrameIdxFromClientX(clientX){
+  const rect = tlBox.getBoundingClientRect();
+  const xIn = clientX - rect.left + tlBox.scrollLeft;
+  let bestIdx = currentIdx, bestDist = Infinity;
+  for(const [idx, el] of thumbEls.entries()){
+    const mid = el.offsetLeft + el.clientWidth/2;
+    const d = Math.abs(mid - xIn);
+    if(d < bestDist){ bestDist = d; bestIdx = idx; }
+  }
+  return bestIdx;
+}
+function loadPending(){ try{ return JSON.parse(localStorage.getItem(PENDING_KEY) || '[]'); }catch{ return []; } }
+function savePendingList(lst){ localStorage.setItem(PENDING_KEY, JSON.stringify(lst)); }
+function addPending(payload){ const lst = loadPending(); lst.push(payload); savePendingList(lst); }
+async function flushPending(){
+  const lst = loadPending(); if(!lst.length) return;
+  const kept = [];
+  for(const p of lst){
+    try{ const r = await fetch('/mask',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(p)}); if(!r.ok) kept.push(p); }
+    catch{ kept.push(p); }
+  }
+  savePendingList(kept);
+  if(kept.length===0) showToast('Masques hors-ligne synchronisés ✅');
+}
+
+// Layout
+function syncTimelineWidth(){ const w = playerWrap.clientWidth; tlBox.style.width = w + 'px'; }
+function fitCanvas(){
+  const r=player.getBoundingClientRect();
+  const ctrlH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--controlsH'));
+  canvas.width=Math.round(r.width);
+  canvas.height=Math.round(r.height - ctrlH);
+  canvas.style.width=r.width+'px';
+  canvas.style.height=(r.height - ctrlH)+'px';
+  syncTimelineWidth();
+}
+function timeToIdx(t){ return Math.max(0, Math.min(frames-1, Math.round((fps||30) * t))); }
+function idxToSec(i){ return (fps||30)>0 ? (i / fps) : 0; }
+
+// ==== Multi-rects helpers ====
+function getRectsForFrame(fi){
+  let arr = rectsMap.get(fi);
+  if(!arr){ arr = []; rectsMap.set(fi, arr); }
+  return arr;
+}
+function draw(){
+  ctx.clearRect(0,0,canvas.width,canvas.height);
+  const arr = getRectsForFrame(currentIdx);
+  for(const r of arr){
+    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||color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
+    ctx.fillStyle=(r.color||color)+'28'; ctx.fillRect(x,y,w,h);
+  }
+  if(currentDraw){
+    const x=Math.min(currentDraw.x1,currentDraw.x2), y=Math.min(currentDraw.y1,currentDraw.y2);
+    const w=Math.abs(currentDraw.x2-currentDraw.x1), h=Math.abs(currentDraw.y2-currentDraw.y1);
+    ctx.setLineDash([6,4]);
+    ctx.strokeStyle=currentDraw.color||color; ctx.lineWidth=2; ctx.strokeRect(x,y,w,h);
+    ctx.setLineDash([]);
+  }
+}
+function setMode(m){
+  mode=m;
+  if(m==='edit'){
+    player.pause();
+    player.controls = false;
+    playerWrap.classList.add('edit-mode');
+    modeLabel.textContent='Édition';
+    btnEdit.style.display='none'; btnBack.style.display='inline-block';
+    btnSave.style.display='inline-block'; btnClear.style.display='inline-block';
+    canvas.style.pointerEvents='auto';
+    draw();
+  }else{
+    player.controls = true;
+    playerWrap.classList.remove('edit-mode');
+    modeLabel.textContent='Lecture';
+    btnEdit.style.display='inline-block'; btnBack.style.display='none';
+    btnSave.style.display='none'; btnClear.style.display='none';
+    canvas.style.pointerEvents='none';
+    currentDraw=null; draw();
+  }
+}
+
+// Dessin multi-rectangles
+let dragging=false, sx=0, sy=0;
+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;
+  currentDraw={x1:sx,y1:sy,x2:sx,y2:sy,color:color}; draw();
+});
+canvas.addEventListener('mousemove',(e)=>{
+  if(!dragging) return;
+  const r=canvas.getBoundingClientRect();
+  currentDraw.x2=e.clientX-r.left; currentDraw.y2=e.clientY-r.top; draw();
+});
+['mouseup','mouseleave'].forEach(ev=>canvas.addEventListener(ev,()=>{
+  if(!dragging) return;
+  dragging=false;
+  if(currentDraw){
+    const arr = getRectsForFrame(currentIdx);
+    // ignorer les clics trop petits
+    if(Math.abs(currentDraw.x2-currentDraw.x1) > 3 && Math.abs(currentDraw.y2-currentDraw.y1) > 3){
+      arr.push({...currentDraw});
+    }
+    currentDraw=null; draw();
+  }
+}));
+
+btnClear.onclick=()=>{ 
+  const arr = getRectsForFrame(currentIdx);
+  if(arr.length){ arr.pop(); draw(); } 
+};
+btnEdit.onclick =()=> setMode('edit');
+btnBack.onclick =()=> setMode('view');
+
+// Palette
+palette.querySelectorAll('.swatch').forEach(el=>{
+  if(el.dataset.c===color) el.classList.add('sel');
+  el.onclick=()=>{
+    palette.querySelectorAll('.swatch').forEach(s=>s.classList.remove('sel'));
+    el.classList.add('sel'); color=el.dataset.c;
+    if(currentDraw){ currentDraw.color=color; draw(); }
+  };
+});
+
+// === Timeline (identique sauf interactions internes) ===
+async function loadTimelineUrls(){
+  timelineUrls = [];
+  const stem = vidStem, b = bustToken;
+  for(let idx=0; idx<frames; idx++){
+    timelineUrls[idx] = `/thumbs/f_${stem}_${idx}.jpg?b=${b}`;
+  }
+  tlProgressFill.style.width='0%';
+}
+async function renderTimeline(centerIdx){
+  if(!vidName) return;
+  loadingInd.style.display='block';
+  if(timelineUrls.length===0) await loadTimelineUrls();
+  tlBox.innerHTML = ''; thumbEls = new Map(); ensureOverlays();
+
+  if(maskedOnlyMode){
+    const idxs = Array.from(maskedSet).sort((a,b)=>a-b);
+    for(const i of idxs){ addThumb(i,'append'); }
+    setTimeout(async ()=>{ syncTimelineWidth(); updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); loadingInd.style.display='none'; updatePlayhead(); updatePortionOverlays(); },0);
+    return;
+  }
+
+  if(portionStart!=null && portionEnd!=null){
+    const s = Math.max(0, portionStart), e = Math.min(frames, portionEnd);
+    for(let i=s;i<e;i++){ addThumb(i,'append'); }
+    setTimeout(async ()=>{ syncTimelineWidth(); updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); loadingInd.style.display='none'; updatePlayhead(); updatePortionOverlays(); },0);
+    return;
+  }
+
+  await loadWindow(centerIdx ?? currentIdx);
+  loadingInd.style.display='none';
+}
+async function loadWindow(centerIdx){
+  tlBox.innerHTML=''; thumbEls = new Map(); ensureOverlays();
+  const rngStart = (viewRangeStart ?? 0);
+  const rngEnd = (viewRangeEnd ?? frames);
+  const mid = Math.max(rngStart, Math.min(centerIdx, Math.max(rngStart, rngEnd-1)));
+  const start = Math.max(rngStart, Math.min(mid - Math.floor(chunkSize/2), Math.max(rngStart, rngEnd - chunkSize)));
+  const end = Math.min(rngEnd, start + chunkSize);
+  for(let i=start;i<end;i++){ addThumb(i,'append'); }
+  timelineStart = start; timelineEnd = end;
+  setTimeout(async ()=>{
+    syncTimelineWidth();
+    updateSelectedThumb();
+    await ensureThumbVisibleCentered(currentIdx);
+    updatePortionOverlays();
+  },0);
+}
+function addThumb(idx, place='append'){
+  if(thumbEls.has(idx)) return;
+  const wrap=document.createElement('div'); wrap.className='thumb'; wrap.dataset.idx=idx;
+  if(maskedSet.has(idx)) wrap.classList.add('hasmask');
+  const img=new Image(); img.title='frame '+(idx+1);
+  img.src=timelineUrls[idx];
+  img.onerror = () => {
+    const fallback = `/frame_idx?vid=${encodeURIComponent(vidName)}&idx=${idx}`;
+    img.onerror = null;
+    img.src = fallback;
+    img.onload = () => {
+      const nu = `/thumbs/f_${vidStem}_${idx}.jpg?b=${Date.now()}`;
+      timelineUrls[idx] = nu;
+      img.src = nu;
+      img.onload = null;
+    };
+  };
+  if(idx===currentIdx){ img.classList.add('sel'); if(isPaused) img.classList.add('sel-strong'); }
+  img.onclick=async ()=>{
+    currentIdx=idx; player.currentTime=idxToSec(currentIdx);
+    draw();
+    updateSelectedThumb(); await ensureThumbVisibleCentered(currentIdx); updatePlayhead();
+  };
+  wrap.appendChild(img);
+  const label=document.createElement('span'); label.className='thumb-label'; label.textContent = `#${idx+1}`;
+  wrap.appendChild(label);
+  if(place==='append'){ tlBox.appendChild(wrap); }
+  else if(place==='prepend'){ tlBox.insertBefore(wrap, tlBox.firstChild); }
+  else{ tlBox.appendChild(wrap); }
+  thumbEls.set(idx, wrap);
+}
+
+tlBox.addEventListener('scroll', ()=>{
+  if (maskedOnlyMode || (portionStart!=null && portionEnd!=null)){
+    updatePlayhead(); updatePortionOverlays();
+    return;
+  }
+  const scrollLeft = tlBox.scrollLeft, scrollWidth = tlBox.scrollWidth, clientWidth = tlBox.clientWidth;
+  if (scrollWidth - scrollLeft - clientWidth < scrollThreshold && timelineEnd < viewRangeEnd){
+    const newEnd = Math.min(viewRangeEnd, timelineEnd + chunkSize);
+    for(let i=timelineEnd;i<newEnd;i++){ addThumb(i,'append'); }
+    timelineEnd = newEnd;
+  }
+  if (scrollLeft < scrollThreshold && timelineStart > viewRangeStart){
+    const newStart = Math.max(viewRangeStart, timelineStart - chunkSize);
+    for(let i=newStart;i<timelineStart;i++){ addThumb(i,'prepend'); }
+    tlBox.scrollLeft += (timelineStart - newStart) * (110 + 8);
+    timelineStart = newStart;
+  }
+  updatePlayhead(); updatePortionOverlays();
+});
+
+// Isoler & Boucle (inchangé)
+isolerBoucle.onclick = async ()=>{
+  const start = parseInt(goFrame.value || '1',10) - 1;
+  const end = parseInt(endPortion.value || '',10);
+  if(!endPortion.value || end <= start || end > frames){ alert('Portion invalide (fin > début)'); return; }
+  if (end - start > 1200 && !confirm('Portion très large, cela peut être lent. Continuer ?')) return;
+  portionStart = start; portionEnd = end;
+  viewRangeStart = start; viewRangeEnd = end;
+  player.pause(); isPaused = true;
+  currentIdx = start; player.currentTime = idxToSec(start);
+  await renderTimeline(currentIdx);
+  resetFull.style.display = 'inline-block';
+  startLoop(); updatePortionOverlays();
+};
+function startLoop(){
+  if(loopInterval) clearInterval(loopInterval);
+  if(portionEnd != null){
+    loopInterval = setInterval(()=>{ if(player.currentTime >= idxToSec(portionEnd)) player.currentTime = idxToSec(portionStart); }, 100);
+  }
+}
+resetFull.onclick = async ()=>{
+  portionStart = null; portionEnd = null;
+  viewRangeStart = 0; viewRangeEnd = frames;
+  goFrame.value = 1; endPortion.value = '';
+  player.pause(); isPaused = true;
+  await renderTimeline(currentIdx);
+  resetFull.style.display='none';
+  clearInterval(loopInterval); updatePortionOverlays();
+};
+
+// Drag IN/OUT (inchangé)
+function attachHandleDrag(handle, which){
+  let draggingH=false;
+  function onMove(e){
+    if(!draggingH) return;
+    const idx = nearestFrameIdxFromClientX(e.clientX);
+    if(which==='in'){ portionStart = Math.min(idx, portionEnd ?? idx+1); goFrame.value = (portionStart+1); }
+    else { portionEnd = Math.max(idx+1, (portionStart ?? idx)); endPortion.value = portionEnd; }
+    viewRangeStart = (portionStart ?? 0); viewRangeEnd = (portionEnd ?? frames);
+    updatePortionOverlays();
+  }
+  handle.addEventListener('mousedown', (e)=>{ draggingH=true; e.preventDefault(); });
+  window.addEventListener('mousemove', onMove);
+  window.addEventListener('mouseup', ()=>{ draggingH=false; });
+}
+ensureOverlays(); attachHandleDrag(document.getElementById('inHandle'), 'in'); attachHandleDrag(document.getElementById('outHandle'), 'out');
+
+// Progress popup (inchangé)
+async function showProgress(vidStem){
+  popup.style.display = 'block';
+  const interval = setInterval(async () => {
+    const r = await fetch('/progress/' + vidStem);
+    const d = await r.json();
+    tlProgressFill.style.width = d.percent + '%';
+    popupProgressFill.style.width = d.percent + '%';
+    popupLogs.innerHTML = d.logs.map(x=>String(x)).join('<br>');
+    if(d.done){
+      clearInterval(interval);
+      popup.style.display = 'none';
+      await renderTimeline(currentIdx);
+    }
+  }, 800);
+}
+
+// Meta & boot
+async function loadVideoAndMeta() {
+  if(!vidName){ statusEl.textContent='Aucune vidéo sélectionnée.'; return; }
+  vidStem = fileStem(vidName); bustToken = Date.now();
+  const bust = Date.now();
+  srcEl.src = '/data/'+encodeURIComponent(vidName)+'?t='+bust;
+  player.setAttribute('poster', '/poster/'+encodeURIComponent(vidName)+'?t='+bust);
+  player.load();
+  fitCanvas();
+  statusEl.textContent = 'Chargement vidéo…';
+  try{
+    const r=await fetch('/meta/'+encodeURIComponent(vidName));
+    if(r.ok){
+      const m=await r.json();
+      fps=m.fps||30; frames=m.frames||0;
+      statusEl.textContent = `OK (${frames} frames @ ${fps.toFixed(2)} fps)`;
+      viewRangeStart = 0; viewRangeEnd = frames;
+      await loadTimelineUrls();
+      await loadMasks();
+      currentIdx = 0; player.currentTime = 0;
+      await renderTimeline(0);
+      showProgress(vidStem);
+    }else{
+      statusEl.textContent = 'Erreur meta';
+    }
+  }catch(err){
+    statusEl.textContent = 'Erreur réseau meta';
+  }
+}
+player.addEventListener('loadedmetadata', async ()=>{
+  fitCanvas();
+  if(!frames || frames<=0){
+    try{ const r=await fetch('/meta/'+encodeURIComponent(vidName)); if(r.ok){ const m=await r.json(); fps=m.fps||30; frames=m.frames||0; } }catch{}
+  }
+  currentIdx=0; goFrame.value=1; draw();
+});
+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'){ 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);
+  await renderTimeline(currentIdx);
+  draw();
+  await ensureThumbVisibleCentered(currentIdx);
+});
+
+// Follow / Filter / Zoom / Goto
+btnFollow.onclick = ()=>{ followMode = !followMode; btnFollow.classList.toggle('toggled', followMode); if(followMode) centerSelectedThumb(); };
+btnFilterMasked.onclick = async ()=>{
+  maskedOnlyMode = !maskedOnlyMode;
+  btnFilterMasked.classList.toggle('toggled', maskedOnlyMode);
+  tlBox.classList.toggle('filter-masked', maskedOnlyMode);
+  await renderTimeline(currentIdx);
+  await ensureThumbVisibleCentered(currentIdx);
+};
+zoomSlider.addEventListener('input', ()=>{ tlBox.style.setProperty('--thumbH', zoomSlider.value + 'px'); });
+async function gotoFrameNum(){
+  const v = parseInt(gotoInput.value||'',10);
+  if(!Number.isFinite(v) || v<1 || v>frames) return;
+  player.pause(); isPaused = true;
+  currentIdx = v-1; player.currentTime = idxToSec(currentIdx);
+  goFrame.value = v;
+  await renderTimeline(currentIdx);
+  draw();
+  await ensureThumbVisibleCentered(currentIdx);
+}
+gotoBtn.onclick = ()=>{ gotoFrameNum(); };
+gotoInput.addEventListener('keydown',(e)=>{ if(e.key==='Enter'){ e.preventDefault(); gotoFrameNum(); } });
+
+// Drag & drop upload
+const uploadZone = document.getElementById('uploadForm');
+uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.style.borderColor = '#2563eb'; });
+uploadZone.addEventListener('dragleave', () => { uploadZone.style.borderColor = 'transparent'; });
+uploadZone.addEventListener('drop', (e) => {
+  e.preventDefault(); uploadZone.style.borderColor = 'transparent';
+  const file = e.dataTransfer.files[0];
+  if(file && file.type.startsWith('video/')){
+    const fd = new FormData(); fd.append('file', file);
+    fetch('/upload?redirect=1', {method: 'POST', body: fd}).then(() => location.reload());
+  }
+});
+
+// Export placeholder
+document.getElementById('exportBtn').onclick = () => { console.log('Export en cours... (IA à venir)'); alert('Fonctionnalité export IA en développement !'); };
+
+// Fichiers & masques (chargement existants => rectsMap)
+async function loadFiles(){
+  const r=await fetch('/files'); const d=await r.json();
+  if(!d.items || !d.items.length){ fileList.innerHTML='<li>(aucune)</li>'; return; }
+  fileList.innerHTML='';
+  d.items.forEach(name=>{
+    const li=document.createElement('li');
+    const delBtn = document.createElement('span'); delBtn.className='delete-btn'; delBtn.textContent='❌'; delBtn.title='Supprimer cette vidéo';
+    delBtn.onclick=async()=>{
+      if(!confirm(`Supprimer "${name}" ?`)) return;
+      await fetch('/delete/'+encodeURIComponent(name),{method:'DELETE'});
+      loadFiles(); if(vidName===name){ vidName=''; loadVideoAndMeta(); }
+    };
+    const a=document.createElement('a'); a.textContent=name; a.href='/ui?v='+encodeURIComponent(name); a.title='Ouvrir cette vidéo';
+    li.appendChild(delBtn); li.appendChild(a); fileList.appendChild(li);
+  });
+}
+async function loadMasks(){
+  loadingInd.style.display='block';
+  const box=document.getElementById('maskList');
+  const r=await fetch('/mask/'+encodeURIComponent(vidName));
+  const d=await r.json();
+  masks=d.masks||[];
+  maskedSet = new Set(masks.map(m=>parseInt(m.frame_idx||0,10)));
+
+  // Reconstituer rectsMap depuis les masques existants
+  rectsMap.clear();
+  const normW = canvas.clientWidth, normH = canvas.clientHeight;
+  masks.forEach(m=>{
+    if(m.shape==='rect'){
+      const [x1,y1,x2,y2] = m.points; // normalisés
+      const rx = {x1:x1*normW, y1:y1*normH, x2:x2*normW, y2:y2*normH, color:m.color||'#10b981'};
+      const arr = getRectsForFrame(parseInt(m.frame_idx||0,10));
+      arr.push(rx);
+    }
+  });
+
+  maskedCount.textContent = `(${maskedSet.size} ⭐)`;
+  if(!masks.length){ box.textContent='—'; loadingInd.style.display='none'; draw(); return; }
+  box.innerHTML='';
+  const ul=document.createElement('ul'); ul.className='clean';
+  masks.forEach(m=>{
+    const li=document.createElement('li');
+    const fr=(parseInt(m.frame_idx||0,10)+1);
+    const t=(m.time_s||0).toFixed(2);
+    const col=m.color||'#10b981';
+    const label=m.note||(`frame ${fr}`);
+    li.innerHTML = `<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${col};margin-right:6px;vertical-align:middle"></span> <strong>${label.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</strong> — #${fr} · t=${t}s`;
+    const renameBtn=document.createElement('span'); renameBtn.className='rename-btn'; renameBtn.textContent='✏️'; renameBtn.title='Renommer le masque';
+    renameBtn.onclick=async()=>{
+      const nv=prompt('Nouveau nom du masque :', label);
+      if(nv===null) return;
+      const rr=await fetch('/mask/rename',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id,note:nv})});
+      if(rr.ok){ await loadMasks(); await renderTimeline(currentIdx); draw(); showToast('Masque renommé ✅'); } else {
+        const txt = await rr.text(); alert('Échec renommage: ' + rr.status + ' ' + txt);
+      }
+    };
+    const delMaskBtn=document.createElement('span'); delMaskBtn.className='delete-btn'; delMaskBtn.textContent='❌'; delMaskBtn.title='Supprimer ce masque';
+    delMaskBtn.onclick=async()=>{
+      if(!confirm(`Supprimer masque "${label}" ?`)) return;
+      const rr=await fetch('/mask/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({vid:vidName,id:m.id})});
+      if(rr.ok){ await loadMasks(); await renderTimeline(currentIdx); draw(); showToast('Masque supprimé ✅'); } else {
+        const txt = await rr.text(); alert('Échec suppression: ' + rr.status + ' ' + txt);
+      }
+    };
+    li.appendChild(renameBtn); li.appendChild(delMaskBtn); ul.appendChild(li);
+  });
+  box.appendChild(ul);
+  loadingInd.style.display='none';
+  draw();
+}
+
+// Save masks (tous les rectangles de la frame courante)
+btnSave.onclick = async ()=>{
+  const arr = getRectsForFrame(currentIdx);
+  if(currentDraw){
+    // finaliser le tracé en cours
+    if(Math.abs(currentDraw.x2-currentDraw.x1) > 3 && Math.abs(currentDraw.y2-currentDraw.y1) > 3){
+      arr.push({...currentDraw});
+    }
+    currentDraw=null;
+  }
+  if(!arr.length){ alert('Aucun rectangle sur cette frame.'); return; }
+  const defaultName = `frame ${currentIdx+1}`;
+  const baseNote = (prompt('Nom de base (optionnel) :', defaultName) || defaultName).trim();
+  const normW = canvas.clientWidth, normH = canvas.clientHeight;
+
+  // Sauvegarder séquentiellement pour éviter les erreurs réseau cumulées
+  for(let i=0;i<arr.length;i++){
+    const r = arr[i];
+    const x=Math.min(r.x1,r.x2)/normW;
+    const y=Math.min(r.y1,r.y2)/normH;
+    const w=Math.abs(r.x2-r.x1)/normW;
+    const h=Math.abs(r.y2-r.y1)/normH;
+    const payload={vid:vidName,time_s:player.currentTime,frame_idx:currentIdx,shape:'rect',points:[x,y,x+w,y+h],color:r.color||color,note:`${baseNote} #${i+1}`};
+    addPending(payload);
+    try{
+      const res = await fetch('/mask',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
+      if(!res.ok){
+        const txt = await res.text();
+        alert('Échec enregistrement masque: ' + res.status + ' ' + txt);
+        break;
+      }
+    }catch(e){
+      alert('Erreur réseau lors de l’enregistrement.');
+      break;
+    }
+  }
+  // Nettoyage des pendings naïf (optionnel)
+  savePendingList([]); 
+  await loadMasks(); await renderTimeline(currentIdx);
+  showToast('Masques enregistrés ✅');
+};
+
+// Boot
+async function boot(){
+  const lst = JSON.parse(localStorage.getItem('ve_pending_masks_v1') || '[]'); if(lst.length){ /* flush pending si besoin */ }
+  await loadFiles();
+  if(serverVid){ vidName=serverVid; await loadVideoAndMeta(); }
+  else{ const qs=new URLSearchParams(location.search); const v=qs.get('v')||''; if(v){ vidName=v; await loadVideoAndMeta(); } }
+}
+boot();
+
+// Masquer les contrôles natifs en mode édition
+const style = document.createElement('style');
+style.textContent = `.player-wrap.edit-mode video::-webkit-media-controls { display: none !important; } .player-wrap.edit-mode video::before { content: none !important; }`;
+document.head.appendChild(style);
+</script>
 </html>
 """
 
-# NOTE: Pour garder la réponse dans une taille raisonnable ici,
-# je n’ai pas recopié les ~700 lignes de HTML/JS.
-# Dans ton dépôt, conserve EXACTEMENT ton HTML_TEMPLATE d’origine.
-# Rien n’a été modifié côté UI.
-
 @app.get("/ui", response_class=HTMLResponse, tags=["meta"])
 def ui(v: Optional[str] = "", msg: Optional[str] = ""):
-  vid = v or ""
-  try:
-    msg = urllib.parse.unquote(msg or "")
-  except Exception:
-    pass
-  html = HTML_TEMPLATE.replace("__VID__", urllib.parse.quote(vid)).replace("__MSG__", msg)
-  return HTMLResponse(content=html)
-
-# =============================================================================
-#                     WARM-UP / LAZY MODELS  (AJOUT)
-# =============================================================================
-
-def _repo_dirname(repo_id: str) -> str:
-    # Répertoire local (un par dépôt), stable et sans slash
-    return repo_id.replace("/", "__")
-
-def _repo_local_dir(repo_id: str) -> Path:
-    return MODELS_DIR / _repo_dirname(repo_id)
-
-def _is_repo_cached(repo_id: str) -> bool:
-    d = _repo_local_dir(repo_id)
+    vid = v or ""
     try:
-        return d.exists() and any(d.rglob("*"))
+        msg = urllib.parse.unquote(msg or "")
     except Exception:
-        return False
-
-def _default_repos() -> List[str]:
-    # Liste par défaut — sûre et publique
-    env_csv = os.getenv("WARMUP_REPOS", "").strip()
-    if env_csv:
-        # CSV -> liste
-        lst = [x.strip() for x in env_csv.split(",") if x.strip()]
-        if lst:
-            return lst
-    return [
-        "facebook/sam2-hiera-large",
-        "runwayml/stable-diffusion-inpainting",
-        "Kijai/Diffuse-Inpaint-Erase",
-        # Tu peux ajouter d’autres dépôts ici si besoin.
-    ]
-
-# État global du warm-up (thread + cancel)
-_warmup_lock = threading.Lock()
-_warmup_thread: Optional[threading.Thread] = None
-_warmup_cancel = threading.Event()
-_warmup_state: Dict[str, Any] = {
-    "running": False,
-    "done": False,
-    "percent": 0,
-    "i": 0,
-    "n": 0,
-    "current": None,
-    "logs": [],
-    "repos": [],
-    "started_at": 0.0,
-    "finished_at": 0.0,
-    "error": None,
-}
-
-def _log_wu(msg: str):
-    _warmup_state["logs"].append(msg)
-    # limiter la taille des logs en mémoire
-    if len(_warmup_state["logs"]) > 500:
-        _warmup_state["logs"] = _warmup_state["logs"][-500:]
-
-def _set_percent(i: int, n: int):
-    pct = int((i / n) * 100) if n > 0 else 0
-    _warmup_state["percent"] = min(100, max(0, pct))
-
-def _snapshot_prefetch(repo_id: str, local_dir: Path):
-    # Idempotent : si déjà en cache, HF renvoie quasi-instantanément.
-    snapshot_download(
-        repo_id=repo_id,
-        local_dir=str(local_dir),
-        local_dir_use_symlinks=True,
-        resume_download=True,
-    )
-
-def _run_warmup(repos: List[str], max_retries: int = 3, continue_on_error: bool = True, base_backoff: float = 2.0):
-    try:
-        _warmup_state.update({
-            "running": True, "done": False, "percent": 0, "error": None,
-            "i": 0, "n": len(repos), "current": None, "logs": [], "repos": repos,
-            "started_at": time.time(), "finished_at": 0.0
-        })
-        _log_wu(f"Warm-up démarré — {len(repos)} dépôts.")
-
-        for idx, repo in enumerate(repos, start=1):
-            if _warmup_cancel.is_set():
-                _log_wu("Annulé par l’utilisateur.")
-                break
-            _warmup_state["current"] = repo
-            _set_percent(idx-1, len(repos))
-            local_dir = _repo_local_dir(repo)
-            local_dir.mkdir(parents=True, exist_ok=True)
-
-            if _is_repo_cached(repo):
-                _log_wu(f"[{idx}/{len(repos)}] {repo} — déjà en cache.")
-                _warmup_state["i"] = idx
-                _set_percent(idx, len(repos))
-                continue
-
-            ok = False
-            for attempt in range(1, max_retries+1):
-                if _warmup_cancel.is_set():
-                    break
-                try:
-                    _log_wu(f"[{idx}/{len(repos)}] {repo} — téléchargement (essai {attempt}/{max_retries})…")
-                    _snapshot_prefetch(repo, local_dir)
-                    _log_wu(f"[{idx}/{len(repos)}] {repo} — OK.")
-                    ok = True
-                    break
-                except Exception as e:
-                    _log_wu(f"[{idx}/{len(repos)}] {repo} — ÉCHEC : {e}")
-                    if attempt < max_retries:
-                        backoff = base_backoff * attempt
-                        _log_wu(f"   ↳ retry dans {backoff:.1f}s…")
-                        time.sleep(backoff)
-            _warmup_state["i"] = idx
-            _set_percent(idx, len(repos))
-            if not ok and not continue_on_error:
-                _warmup_state["error"] = f"Echec warm-up sur {repo}"
-                break
-
-        _warmup_state["finished_at"] = time.time()
-        _warmup_state["done"] = True
-        _warmup_state["running"] = False
-        if _warmup_cancel.is_set():
-            _warmup_state["error"] = _warmup_state.get("error") or "Annulé"
-            _log_wu("Warm-up terminé (annulé).")
-        else:
-            _log_wu("Warm-up terminé.")
-    except Exception as e:
-        _warmup_state["error"] = str(e)
-        _warmup_state["done"] = True
-        _warmup_state["running"] = False
-        _log_wu(f"Warm-up: exception non gérée: {e}")
-    finally:
-        _warmup_cancel.clear()
-
-@app.post("/warmup/start", tags=["warmup"])
-def warmup_start(payload: Dict[str, Any] = Body(default=None)):
-    """
-    Démarre un warm-up séquentiel (thread en arrière-plan).
-    Body JSON optionnel:
-      {
-        "repos": ["facebook/sam2-hiera-large", "..."],
-        "max_retries": 3,
-        "continue_on_error": true
-      }
-    """
-    with _warmup_lock:
-        if _warmup_state.get("running"):
-            return {"ok": False, "running": True, "msg": "Déjà en cours", "status": _warmup_state}
-        repos = None
-        if payload and isinstance(payload, dict):
-            repos = payload.get("repos")
-            max_retries = int(payload.get("max_retries") or 3)
-            continue_on_error = bool(payload.get("continue_on_error") if "continue_on_error" in payload else True)
-        else:
-            max_retries = 3
-            continue_on_error = True
-        if not repos:
-            repos = _default_repos()
-        _warmup_cancel.clear()
-        t = threading.Thread(target=_run_warmup, args=(repos, max_retries, continue_on_error), daemon=True)
-        t.start()
-        global _warmup_thread
-        _warmup_thread = t
-        return {"ok": True, "running": True, "status": _warmup_state}
-
-@app.get("/warmup/status", tags=["warmup"])
-def warmup_status():
-    return _warmup_state
-
-@app.post("/warmup/cancel", tags=["warmup"])
-def warmup_cancel():
-    if not _warmup_state.get("running"):
-        return {"ok": False, "msg": "Aucun warm-up en cours"}
-    _warmup_cancel.set()
-    return {"ok": True, "msg": "Annulation demandée"}
-
-@app.post("/models/ensure", tags=["warmup"])
-def models_ensure(payload: Dict[str, Any] = Body(...)):
-    """
-    Lazy load: assure la présence locale d’un dépôt (idempotent).
-    Body: {"repo_id":"owner/name"}
-    """
-    repo_id = (payload or {}).get("repo_id")
-    if not repo_id or not isinstance(repo_id, str):
-        raise HTTPException(400, "repo_id manquant")
-    d = _repo_local_dir(repo_id)
-    d.mkdir(parents=True, exist_ok=True)
-    try:
-        if _is_repo_cached(repo_id):
-            return {"ok": True, "repo": repo_id, "status": "already_cached"}
-        snapshot_download(repo_id=repo_id, local_dir=str(d), local_dir_use_symlinks=True, resume_download=True)
-        return {"ok": True, "repo": repo_id, "status": "ready"}
-    except Exception as e:
-        raise HTTPException(502, f"Prefetch échoué: {e}")
-
-@app.get("/models/status", tags=["warmup"])
-def models_status():
-    """
-    Liste les dossiers de modèles présents (côté local).
-    """
-    items = []
-    for p in sorted(MODELS_DIR.glob("*")):
-        try:
-            if p.is_dir() and any(p.rglob("*")):
-                items.append(p.name)
-        except Exception:
-            pass
-    return {"count": len(items), "items": items}
+        pass
+    html = HTML_TEMPLATE.replace("__VID__", urllib.parse.quote(vid)).replace("__MSG__", msg)
+    return HTMLResponse(content=html)