Update index.html

index.html

@@ -345,7 +345,7 @@ body{
   <!-- ===================== HERO ===================== -->
   <section class="hero">
     <h1>Dub any video into <span class="grad">any language</span>, flawlessly.</h1>
-    <p>Pick a video from your gallery — upload starts instantly. Our pipeline transcribes, translates, and re-voices it in one Gemini request, then matches the audio to your video's exact length with real-time progress streaming.</p>
+    <p>Pick a video — upload &amp; transcription start instantly. Choose a language and voice, then press Generate Dub to translate, re-voice, and match the audio to your video's exact length.</p>
   </section>
 
   <!-- ===================== MAIN GRID ===================== -->
@@ -608,11 +608,13 @@ const serverStatusText = $("serverStatusText");
    ============================================================ */
 const state = {
   file: null,
-  running: false,
+  running: false,           // true only while /prepare or /dub is streaming
+  phase: "idle",             // idle | uploading | preparing | ready | dubbing | done
   sessionId: null,
-  abort: null,
+  prepared: false,
+  uploadXhr: null,
+  abort: null,               // AbortController for the current SSE fetch
   targetLanguage: "English",
-  resultObjectUrl: null,
   consoleCleared: false
 };
 
@@ -714,25 +716,64 @@ function acceptFile(file){
   if(!file.type.startsWith("video/") && !/\.(mp4|mov|mkv|webm|avi|m4v)$/i.test(file.name)){
     pushLog("[WARN] Selected file does not look like a video. Proceeding anyway.", "l-warn");
   }
+  // Picking a new file while a previous one is mid-flight (or already
+  // uploaded-but-not-yet-dubbed) cleanly cancels/discards that old one.
+  abortCurrentOperation();
+  if(state.sessionId && !state.running){
+    fetch(`${API_BASE}/session/${encodeURIComponent(state.sessionId)}`, { method:"DELETE" }).catch(()=>{});
+  }
+  resetPipelineState();
+
   state.file = file;
   fileNameEl.textContent = file.name;
   fileSizeEl.textContent = fmtBytes(file.size);
   fileChip.classList.add("show");
   dropWrap.classList.add("has-file");
-  refreshGenerateState();
-  // Upload starts the instant a video is picked (from the gallery, a file
-  // browser, or drag-and-drop) — no extra tap needed.
-  if(!state.running) startDub();
+  resultPanel.classList.remove("show");
+  resetConsole();
+
+  // Upload starts the instant a video is picked (gallery, file browser, or
+  // drag-and-drop) — no extra tap needed. The actual DUBBING only starts
+  // when the person presses the Generate Dub button (see startDub()).
+  uploadAndPrepare(file);
 }
 function clearFile(){
+  abortCurrentOperation();
+  if(state.sessionId && !state.running){
+    fetch(`${API_BASE}/session/${encodeURIComponent(state.sessionId)}`, { method:"DELETE" }).catch(()=>{});
+  }
+  resetPipelineState();
   state.file = null;
   fileInput.value = "";
   fileChip.classList.remove("show");
   dropWrap.classList.remove("has-file");
+  resultPanel.classList.remove("show");
+  resetConsole();
   refreshGenerateState();
 }
+function resetPipelineState(){
+  state.sessionId = null;
+  state.prepared = false;
+  state.phase = "idle";
+  setProgress(0, "");
+  resetSourceLanguage();
+}
+function abortCurrentOperation(){
+  if(state.uploadXhr){ try{ state.uploadXhr.abort(); }catch(_){} state.uploadXhr = null; }
+  if(state.abort){ try{ state.abort.abort(); }catch(_){} state.abort = null; }
+  state.running = false;
+  setLive(false);
+}
 function refreshGenerateState(){
-  generateBtn.disabled = !state.file || state.running;
+  const canGenerate = !!(state.sessionId && state.prepared) && !state.running;
+  generateBtn.disabled = !canGenerate;
+  const label = generateBtn.querySelector(".btn-label");
+  if(!label) return;
+  if(state.phase === "uploading") label.textContent = "Uploading…";
+  else if(state.phase === "preparing") label.textContent = "Analyzing…";
+  else if(state.phase === "dubbing") label.textContent = "Dubbing…";
+  else if(state.phase === "ready" || state.phase === "done") label.textContent = "Generate Dub";
+  else label.textContent = "Generate Dub";
 }
 
 dropbox.addEventListener("click", ()=> fileInput.click());
@@ -812,9 +853,53 @@ function safeJSON(str){
 }
 
 /* ============================================================
-   Central SSE event handler for the /dub stream
+   Run lifecycle
    ============================================================ */
-function handleSSEEvent(event, data){
+function beginRun(phase){
+  state.running = true;
+  state.phase = phase; // "preparing" | "dubbing"
+  generateBtn.classList.add("loading");
+  refreshGenerateState();
+  progressFill.classList.remove("paused");
+  progressFill.classList.add("active");
+  setLive(true);
+}
+function endRun(nextPhase){
+  state.running = false;
+  state.phase = nextPhase;
+  generateBtn.classList.remove("loading");
+  progressFill.classList.remove("active");
+  setLive(false);
+  refreshGenerateState();
+}
+/* keepSession=true -> the video/transcript are still valid (only
+   translate/TTS/mux failed), so leave the session in place and let the
+   person just press Generate Dub again without re-uploading. */
+function failRun(reason, keepSession){
+  pushLog("[WARN] " + (reason || "Run stopped.") + " State reset.", "l-warn");
+  if(state.abort){ try{ state.abort.abort(); }catch(_){} }
+  if(state.uploadXhr){ try{ state.uploadXhr.abort(); }catch(_){} }
+  if(keepSession && state.sessionId && state.prepared){
+    endRun("ready");
+  }else{
+    resetPipelineState();
+    endRun("idle");
+  }
+}
+function finishRun(d){
+  setProgress(100, "Complete");
+  pushLog("[SUCCESS] Dubbing finished. Preparing preview…", "l-ok");
+  endRun("done");
+  const sid = d.session_id || state.sessionId;
+  if(sid){ state.sessionId = sid; presentResult(sid, d); }
+}
+
+/* ============================================================
+   SSE event handlers — one for the auto "analyze" phase (/prepare),
+   one for the manual "dub" phase (/dub). Kept separate because their
+   "done"/"error" semantics differ (ready-to-dub vs. finished-with-video).
+   ============================================================ */
+function handlePrepareEvent(event, data){
   switch(event){
     case "log": {
       pushLog(data);
@@ -825,22 +910,52 @@ function handleSSEEvent(event, data){
     case "progress": {
       const p = safeJSON(data);
       if(p && typeof p.percent === "number"){
-        progressFill.classList.add("active");
-        progressFill.classList.remove("paused");
-        setProgress(p.percent, p.message || undefined);
+        // Map the /prepare stream's own 0-100 onto the bar's 48-100 band
+        // (0-48 was the raw upload, tracked separately via XHR progress).
+        setProgress(48 + p.percent * 0.52, p.message || undefined);
       }
       break;
     }
-    case "data": {
-      const d = safeJSON(data);
-      if(!d) break;
+    case "error": {
+      pushLog(String(data), "l-err");
+      failRun("Analysis failed — please try re-uploading the video.");
+      break;
+    }
+    case "done": {
+      const d = safeJSON(data) || {};
+      state.prepared = true;
       if(d.source_language) lockSourceLanguage(d.source_language);
-      if(d.session_id) state.sessionId = d.session_id;
+      setProgress(100, d.line_count ? `Ready — ${d.line_count} line(s) detected` : "Ready");
+      pushLog("[SUCCESS] Ready to dub. Pick a language/voice and press Generate Dub.", "l-ok");
+      endRun("ready");
+      break;
+    }
+    default: {
+      if(data) pushLog(`[${event}] ${data}`);
+    }
+  }
+}
+
+function handleDubEvent(event, data){
+  switch(event){
+    case "log": {
+      pushLog(data);
+      const m = /source language detected:\s*(.+)/i.exec(data);
+      if(m) lockSourceLanguage(m[1].trim());
+      break;
+    }
+    case "progress": {
+      const p = safeJSON(data);
+      if(p && typeof p.percent === "number"){
+        setProgress(p.percent, p.message || undefined);
+      }
       break;
     }
     case "error": {
       pushLog(String(data), "l-err");
-      failRun("Backend reported an error.");
+      // Video + transcript are still on the server — no need to re-upload,
+      // just let the person press Generate Dub again.
+      failRun("Dubbing failed.", true);
       break;
     }
     case "done": {
@@ -855,50 +970,15 @@ function handleSSEEvent(event, data){
 }
 
 /* ============================================================
-   Run lifecycle
-   ============================================================ */
-function startRunUI(){
-  state.running = true;
-  state.consoleCleared = false;
-  generateBtn.classList.add("loading");
-  generateBtn.disabled = true;
-  resultPanel.classList.remove("show");
-  progressFill.classList.remove("paused");
-  progressFill.classList.add("active");
-  setProgress(0, "Initializing…");
-  resetSourceLanguage();
-  setLive(true);
-}
-
-function endRunUI(){
-  state.running = false;
-  generateBtn.classList.remove("loading");
-  progressFill.classList.remove("active");
-  setLive(false);
-  refreshGenerateState();
-}
-
-function failRun(reason){
-  pushLog("[WARN] " + (reason || "Run stopped.") + " State reset.", "l-warn");
-  if(state.abort){ try{ state.abort.abort(); }catch(_){}} 
-  endRunUI();
-}
-
-function finishRun(d){
-  setProgress(100, "Complete");
-  pushLog("[SUCCESS] Dubbing finished. Preparing preview…", "l-ok");
-  endRunUI();
-  const sid = d.session_id || state.sessionId;
-  if(sid){ state.sessionId = sid; presentResult(sid, d); }
-}
-
-/* ============================================================
-   Result presentation + single-shot download
-   The backend deletes the session after /download streams, so we fetch
-   the file ONCE into an object URL and reuse it for both preview + save.
+   Result presentation
+   The result is no longer fetched into a JS blob first (that meant
+   waiting for the ENTIRE file to arrive before anything could play —
+   very slow on a weak connection). The <video> tag and the download
+   link both point straight at /download, so the browser streams it
+   natively (progressive playback, native Range/seek support, and the
+   OS's own download manager for the Save button).
    ============================================================ */
-async function presentResult(sessionId, meta){
-  // Build meta tags
+function presentResult(sessionId, meta){
   resultMeta.innerHTML = "";
   const tags = [];
   if(meta.source_language) tags.push(["Source", meta.source_language]);
@@ -913,59 +993,117 @@ async function presentResult(sessionId, meta){
 
   resultPanel.classList.add("show");
   const url = `${API_BASE}/download/${encodeURIComponent(sessionId)}`;
+  resultVideo.src = url;
+  resultVideo.load();
+  downloadBtn.href = url;
+  downloadBtn.setAttribute("download", `dubbed_${sessionId}.mp4`);
+  pushLog("[SUCCESS] Preview ready. Download available.", "l-ok");
+}
+
+/* ============================================================
+   Network — Phase 1 (automatic): /upload (real XHR progress) -> /prepare
+   ============================================================ */
+function uploadAndPrepare(file){
+  beginRun("uploading");
+  setProgress(0, "Uploading…");
+  pushLog(`[SYS] Uploading "${file.name}" (${fmtBytes(file.size)})…`, "l-sys");
+
+  const xhr = new XMLHttpRequest();
+  state.uploadXhr = xhr;
+  const fd = new FormData();
+  fd.append("file", file);
+
+  xhr.upload.addEventListener("progress", (e)=>{
+    if(!e.lengthComputable) return;
+    const frac = e.loaded / e.total;
+    setProgress(frac * 45, `Uploading… ${Math.round(frac * 100)}%`); // upload = first 45% of the bar
+  });
 
+  xhr.addEventListener("load", ()=>{
+    state.uploadXhr = null;
+    if(xhr.status < 200 || xhr.status >= 300){
+      let detail = xhr.responseText || `HTTP ${xhr.status}`;
+      try{ const j = JSON.parse(xhr.responseText); detail = j.detail || detail; }catch(_){}
+      pushLog("[ERROR] Upload failed: " + detail, "l-err");
+      failRun("Upload failed.");
+      return;
+    }
+    let j = null;
+    try{ j = JSON.parse(xhr.responseText); }catch(_){}
+    if(!j || !j.session_id){
+      pushLog("[ERROR] Upload succeeded but no session id was returned.", "l-err");
+      failRun("Bad upload response.");
+      return;
+    }
+    state.sessionId = j.session_id;
+    pushLog("[SUCCESS] Upload complete. Analyzing (extracting audio + transcribing)…", "l-ok");
+    setProgress(48, "Analyzing…");
+    prepareSession(j.session_id);
+  });
+
+  xhr.addEventListener("error", ()=>{
+    state.uploadXhr = null;
+    pushLog("[ERROR] Upload connection failed.", "l-err");
+    failRun("Upload connection error.");
+  });
+  xhr.addEventListener("abort", ()=>{ state.uploadXhr = null; });
+
+  xhr.open("POST", `${API_BASE}/upload`);
+  xhr.send(fd);
+}
+
+async function prepareSession(sessionId){
+  state.phase = "preparing";
+  refreshGenerateState();
+  state.abort = new AbortController();
   try{
-    pushLog("[INFO] Fetching dubbed video stream from server…");
-    const res = await fetch(url, { method:"GET" });
-    if(!res.ok) throw new Error("HTTP " + res.status);
-    const blob = await res.blob();
-
-    if(state.resultObjectUrl){ URL.revokeObjectURL(state.resultObjectUrl); }
-    state.resultObjectUrl = URL.createObjectURL(blob);
-
-    resultVideo.src = state.resultObjectUrl;
-    downloadBtn.href = state.resultObjectUrl;
-    downloadBtn.setAttribute("download", `dubbed_${sessionId}.mp4`);
-    pushLog("[SUCCESS] Preview ready. Download available.", "l-ok");
+    const res = await fetch(`${API_BASE}/prepare/${encodeURIComponent(sessionId)}`, {
+      method: "GET", signal: state.abort.signal,
+    });
+    await readSSE(res, handlePrepareEvent);
+    if(state.phase === "preparing"){
+      pushLog("[WARN] Analysis stream closed unexpectedly before completion.", "l-warn");
+      failRun("Analysis stream ended early.");
+    }
   }catch(err){
-    pushLog("[ERROR] Could not retrieve the dubbed file: " + err.message, "l-err");
-    // Fallback: let the browser hit the endpoint directly on click.
-    resultVideo.src = url;
-    downloadBtn.href = url;
-    downloadBtn.setAttribute("download", `dubbed_${sessionId}.mp4`);
+    if(err.name === "AbortError"){ /* cancelled — a new file was picked */ }
+    else{
+      pushLog("[ERROR] Analysis connection failed: " + err.message, "l-err");
+      failRun("Analysis stream error.");
+    }
   }
 }
 
 /* ============================================================
-   Network: /dub
+   Network — Phase 2 (manual, button press): /dub
    ============================================================ */
 async function startDub(){
-  if(!state.file || state.running) return;
+  if(!state.sessionId || !state.prepared || state.running) return;
 
   state.targetLanguage = targetLang.value;
-  startRunUI();
-  pushLog(`[SYS] Uploading "${state.file.name}" (${fmtBytes(state.file.size)})…`, "l-sys");
-  pushLog(`[INFO] Target language: ${targetLang.value} · Voice: ${voiceSelect.value}`);
+  beginRun("dubbing");
+  resultPanel.classList.remove("show");
+  setProgress(0, "Starting dub…");
+  pushLog(`[SYS] Dubbing into ${targetLang.value} · Voice: ${voiceSelect.value}`, "l-sys");
 
   const fd = new FormData();
-  fd.append("file", state.file);
+  fd.append("session_id", state.sessionId);
   fd.append("target_language", targetLang.value);
   fd.append("voice_name", voiceSelect.value);
 
   state.abort = new AbortController();
   try{
     const res = await fetch(`${API_BASE}/dub`, { method:"POST", body:fd, signal:state.abort.signal });
-    await readSSE(res, handleSSEEvent);
-    // Stream ended. If we were mid-run without a done/error, note it.
-    if(state.running){
+    await readSSE(res, handleDubEvent);
+    if(state.phase === "dubbing"){
       pushLog("[WARN] Stream closed unexpectedly before completion.", "l-warn");
-      endRunUI();
+      failRun("Dub stream ended early.", true);
     }
   }catch(err){
     if(err.name === "AbortError"){ /* user cancelled */ }
     else{
       pushLog("[ERROR] Connection failed: " + err.message, "l-err");
-      failRun("Upload/stream error.");
+      failRun("Dub stream error.", true);
     }
   }
 }