Update app.py

app.py

@@ -43,7 +43,7 @@ THREAD_POOL = ThreadPoolExecutor(max_workers=16)
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     task = asyncio.create_task(periodic_cleanup())
-    log.info("DubFlow v2.5.2 started")
+    log.info("DubFlow v2.5.3 started")
     yield
     task.cancel()
     THREAD_POOL.shutdown(wait=False)
@@ -51,7 +51,7 @@ async def lifespan(app: FastAPI):
 
 app = FastAPI(
     title="DubFlow API",
-    version="2.5.2",
+    version="2.5.3",
     description="Video dubbing pipeline — MP4 → SRT → Translate → TTS → Dubbed MP4",
     lifespan=lifespan,
 )
@@ -1697,7 +1697,7 @@ async def voices():
 
 @app.get("/health", tags=["Meta"])
 async def health():
-    return {"status":"ok", "version": "2.5.2",
+    return {"status":"ok", "version": "2.5.3",
             "jobs_active": sum(1 for j in JOBS.values() if not j["done"]),
             "jobs_total": len(JOBS),
             "max_upload_mb": MAX_UPLOAD_MB}
@@ -1750,9 +1750,10 @@ body{background:radial-gradient(900px 600px at 10% -10%,rgba(139,92,246,.18),tra
 .label{letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:#94a3b8;}
 input,select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);}
 input:focus,select:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.15);outline:none;}
-.step-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);transition:.3s;}
+.step-row{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);transition:background .3s, border-color .3s;}
+.step-row.done-row{background:rgba(16,185,129,.04);border-color:rgba(16,185,129,.15);}
 .step-row.active{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.3);}
-.step-num{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#94a3b8;flex-shrink:0;transition:.3s;}
+.step-num{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#94a3b8;flex-shrink:0;transition:.3s;margin-top:1px;}
 .step-num.active{background:linear-gradient(90deg,#8b5cf6,#3b82f6);border-color:transparent;color:white;animation:pulse 2s infinite;}
 .step-num.done{background:#10b981;border-color:transparent;color:white;}
 @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.5)}50%{box-shadow:0 0 0 8px rgba(139,92,246,0)}}
@@ -1760,6 +1761,9 @@ input:focus,select:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,
 .toast.err{background:rgba(239,68,68,.95);} .toast.ok{background:rgba(16,185,129,.95);} .toast.info{background:rgba(59,130,246,.95);}
 @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
 .hint{font-size:11px;color:#64748b;margin-top:4px;}
+.step-msg{font-size:10.5px;color:#94a3b8;margin-top:6px;font-family:'JetBrains Mono',monospace;line-height:1.3;min-height:13px;letter-spacing:.01em;}
+.step-row.active .step-msg{color:#c4b5fd;}
+.step-row.done-row .step-msg{color:#6ee7b7;}
 .speed{font-size:10px;color:#10b981;font-family:'JetBrains Mono',monospace;}
 .heartbeat{display:inline-block;width:6px;height:6px;border-radius:50%;background:#10b981;margin-left:6px;animation:beat 1s infinite;}
 @keyframes beat{0%,100%{opacity:.3}50%{opacity:1;box-shadow:0 0 8px #10b981}}
@@ -1767,7 +1771,7 @@ input:focus,select:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,
 
 <div class="max-w-5xl mx-auto pt-10 px-6 pb-20">
 <header class="mb-8">
-<p class="label mb-2">Engine v2.5.2 — Real-time + REST API</p>
+<p class="label mb-2">Engine v2.5.3 — Real-time + REST API</p>
 <h1 class="text-4xl md:text-5xl font-semibold tracking-tight">DubFlow <span class="text-slate-400 font-light">Web</span></h1>
 <p class="text-slate-400 mt-2 text-sm">Pipeline: upload · estrazione · traduzione · TTS · dub</p>
 </header>
@@ -1845,38 +1849,46 @@ input:focus,select:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,
 <div class="step-row" id="row0">
 <div class="step-num" id="num0">↑</div>
 <div class="flex-1 min-w-0">
-<div class="flex justify-between"><p class="text-sm font-medium">Upload</p><span id="upSpeed" class="speed"></span></div>
+<div class="flex justify-between items-center"><p class="text-sm font-medium">Upload</p><span id="s0pct" class="code text-violet-300">—</span></div>
 <div class="bar-track mt-1.5"><div id="s0bar" class="bar-fill upload"></div></div>
+<p id="s0msg" class="step-msg">—</p>
 </div>
-<span id="s0pct" class="code text-slate-500">—</span>
 </div>
 
 <div class="step-row" id="row1">
 <div class="step-num" id="num1">1</div>
-<div class="flex-1 min-w-0"><p class="text-sm font-medium">Extract SRT</p>
-<div class="bar-track mt-1.5"><div id="s1bar" class="bar-fill step"></div></div></div>
-<span id="s1pct" class="code text-slate-500">—</span>
+<div class="flex-1 min-w-0">
+<div class="flex justify-between items-center"><p class="text-sm font-medium">Extract SRT</p><span id="s1pct" class="code text-violet-300">—</span></div>
+<div class="bar-track mt-1.5"><div id="s1bar" class="bar-fill step"></div></div>
+<p id="s1msg" class="step-msg">—</p>
+</div>
 </div>
 
 <div class="step-row" id="row2">
 <div class="step-num" id="num2">2</div>
-<div class="flex-1 min-w-0"><p class="text-sm font-medium">Translate</p>
-<div class="bar-track mt-1.5"><div id="s2bar" class="bar-fill step"></div></div></div>
-<span id="s2pct" class="code text-slate-500">—</span>
+<div class="flex-1 min-w-0">
+<div class="flex justify-between items-center"><p class="text-sm font-medium">Translate</p><span id="s2pct" class="code text-violet-300">—</span></div>
+<div class="bar-track mt-1.5"><div id="s2bar" class="bar-fill step"></div></div>
+<p id="s2msg" class="step-msg">—</p>
+</div>
 </div>
 
 <div class="step-row" id="row3">
 <div class="step-num" id="num3">3</div>
-<div class="flex-1 min-w-0"><p class="text-sm font-medium">Synced TTS</p>
-<div class="bar-track mt-1.5"><div id="s3bar" class="bar-fill step"></div></div></div>
-<span id="s3pct" class="code text-slate-500">—</span>
+<div class="flex-1 min-w-0">
+<div class="flex justify-between items-center"><p class="text-sm font-medium">Synced TTS</p><span id="s3pct" class="code text-violet-300">—</span></div>
+<div class="bar-track mt-1.5"><div id="s3bar" class="bar-fill step"></div></div>
+<p id="s3msg" class="step-msg">—</p>
+</div>
 </div>
 
 <div class="step-row" id="row4">
 <div class="step-num" id="num4">4</div>
-<div class="flex-1 min-w-0"><p class="text-sm font-medium">Dub Video</p>
-<div class="bar-track mt-1.5"><div id="s4bar" class="bar-fill step"></div></div></div>
-<span id="s4pct" class="code text-slate-500">—</span>
+<div class="flex-1 min-w-0">
+<div class="flex justify-between items-center"><p class="text-sm font-medium">Dub Video</p><span id="s4pct" class="code text-violet-300">—</span></div>
+<div class="bar-track mt-1.5"><div id="s4bar" class="bar-fill step"></div></div>
+<p id="s4msg" class="step-msg">—</p>
+</div>
 </div>
 </div>
 
@@ -1996,8 +2008,14 @@ function resetUI(){
   setStep(i,'idle');
   targetBars['s'+i]=0;
   currentBars['s'+i]=0;
-  $('s'+i+'bar').style.width='0%';
-  $('s'+i+'pct').textContent='—';
+  const bar=document.getElementById('s'+i+'bar');
+  const pct=document.getElementById('s'+i+'pct');
+  const msg=document.getElementById('s'+i+'msg');
+  const row=document.getElementById('row'+i);
+  if(bar) bar.style.width='0%';
+  if(pct) pct.textContent='—';
+  if(msg){msg.textContent='—'; delete msg.dataset.locked;}
+  if(row) row.classList.remove('active', 'done-row');
  }
  targetBars['global']=0;
  currentBars['global']=0;
@@ -2006,7 +2024,6 @@ function resetUI(){
  $('globalStage').textContent='Avvio';
  $('result').classList.add('hidden');
  $('msg').textContent='';
- $('upSpeed').textContent='';
  $('hb').style.display='none';
 }
 
@@ -2032,24 +2049,43 @@ function track(jid){
    $('msg').textContent=d.message||'';
    const curStep = d.step !== undefined ? d.step : 0;
    const curStepProg = d.step_progress || 0;
+   const curMsg = d.message || '';
+   
    for(let i=0;i<=4;i++){
+    const msgEl = document.getElementById('s'+i+'msg');
+    const rowEl = document.getElementById('row'+i);
+    
     if(curStep > i){
      // Step già superato → DONE al 100%
      setStep(i, 'done');
      targetBars['s'+i] = 100;
-     // Snap immediato per evitare lag visivo
      currentBars['s'+i] = 100;
+     if(rowEl){rowEl.classList.add('done-row'); rowEl.classList.remove('active');}
+     if(msgEl && !msgEl.dataset.locked){
+      msgEl.textContent = '✓ completato';
+      msgEl.dataset.locked = '1';
+     }
     }
     else if(curStep === i){
-     // Step corrente → ACTIVE con la sua %
+     // Step corrente → ACTIVE con messaggio LIVE
      setStep(i, 'active');
      targetBars['s'+i] = curStepProg;
+     if(rowEl){rowEl.classList.add('active'); rowEl.classList.remove('done-row');}
+     if(msgEl){
+      msgEl.textContent = curMsg || '...';
+      delete msgEl.dataset.locked;
+     }
     }
     else {
      // Step futuro → IDLE
      setStep(i, 'idle');
      targetBars['s'+i] = 0;
      currentBars['s'+i] = 0;
+     if(rowEl){rowEl.classList.remove('active', 'done-row');}
+     if(msgEl){
+      msgEl.textContent = '—';
+      delete msgEl.dataset.locked;
+     }
     }
    }
    if(d.done && d.result){
@@ -2057,8 +2093,14 @@ function track(jid){
      setStep(i,'done');
      targetBars['s'+i]=100;
      currentBars['s'+i]=100;
-     $('s'+i+'bar').style.width='100%';
-     $('s'+i+'pct').textContent='100.00%';
+     const bar=document.getElementById('s'+i+'bar');
+     const pct=document.getElementById('s'+i+'pct');
+     const msg=document.getElementById('s'+i+'msg');
+     const row=document.getElementById('row'+i);
+     if(bar) bar.style.width='100%';
+     if(pct) pct.textContent='100.00%';
+     if(msg) msg.textContent='✓ completato';
+     if(row){row.classList.add('done-row'); row.classList.remove('active');}
     }
     targetBars['global']=100;
     currentBars['global']=100;
@@ -2116,12 +2158,15 @@ function uploadFile(jid, file){
    const eta=e.loaded>0 ? (e.total-e.loaded)/(e.loaded/elapsed) : 0;
    const mb=(e.loaded/1048576).toFixed(2);
    const tot=(e.total/1048576).toFixed(2);
-   $('upSpeed').textContent=`${mb}/${tot} MB · ${speed.toFixed(2)} MB/s · ETA ${eta.toFixed(1)}s`;
+   const msg = `${mb}/${tot} MB · ${speed.toFixed(2)} MB/s · ETA ${eta.toFixed(1)}s`;
+   const s0msg = document.getElementById('s0msg');
+   if(s0msg){s0msg.textContent = msg; delete s0msg.dataset.locked;}
+   const rowEl = document.getElementById('row0');
+   if(rowEl) rowEl.classList.add('active');
   };
   xhr.upload.onload=()=>{
-   $('upSpeed').textContent='upload completato, attesa server…';
-   // Non forzare step 0 a done qui — aspetta che il server confermi via SSE
-   // perché il server deve ancora ricevere/validare il file
+   const s0msg = document.getElementById('s0msg');
+   if(s0msg) s0msg.textContent = 'upload completato, attesa server…';
   };
   xhr.onload=()=>{
    currentXHR=null;