Update index.html

index.html

@@ -211,29 +211,6 @@ body{
 @keyframes rot{to{transform:rotate(360deg);}}
 .src-badge.locked{color:#0a8a4a;background:#eefcf3;border-color:#c7f0d7;}
 
-/* Toggle switch */
-.toggle-line{
-  display:flex;align-items:center;justify-content:space-between;gap:14px;
-  padding:14px;border-radius:var(--radius-sm);
-  background:#f7fbff;border:1px solid #e3f0fb;margin:4px 0 18px;
-}
-.toggle-line .tl-txt{display:flex;flex-direction:column;}
-.toggle-line .tl-txt strong{font-size:14px;font-weight:700;}
-.toggle-line .tl-txt span{font-size:12px;color:var(--ink-soft);}
-.switch{position:relative;width:52px;height:30px;flex-shrink:0;}
-.switch input{opacity:0;width:0;height:0;}
-.slider{
-  position:absolute;inset:0;cursor:pointer;border-radius:999px;
-  background:#cdd9e8;transition:background .25s ease;
-}
-.slider::before{
-  content:"";position:absolute;width:22px;height:22px;left:4px;top:4px;
-  border-radius:50%;background:#fff;transition:transform .25s ease;
-  box-shadow:0 2px 6px rgba(0,0,0,0.22);
-}
-.switch input:checked + .slider{background:linear-gradient(120deg,var(--sky),var(--sky-soft));box-shadow:0 0 0 4px rgba(0,162,255,0.15);}
-.switch input:checked + .slider::before{transform:translateX(22px);}
-
 /* Primary button */
 .btn{
   display:inline-flex;align-items:center;justify-content:center;gap:10px;
@@ -339,76 +316,6 @@ body{
 }
 .meta-tag svg{color:var(--sky);}
 
-/* ============================================================
-   Modal (speaker confirmation)
-   ============================================================ */
-.modal-scrim{
-  position:fixed;inset:0;z-index:60;display:none;
-  align-items:center;justify-content:center;padding:22px;
-  background:rgba(10,25,45,0.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
-  opacity:0;transition:opacity .3s ease;
-}
-.modal-scrim.show{display:flex;opacity:1;}
-.modal{
-  width:100%;max-width:560px;max-height:88vh;overflow:hidden;
-  border-radius:24px;
-  background:var(--panel-glass);
-  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
-  border:1px solid rgba(255,255,255,0.7);
-  box-shadow:0 40px 90px -30px rgba(0,80,150,0.55);
-  transform:translateY(26px) scale(.97);opacity:0;
-  transition:transform .4s cubic-bezier(.22,.9,.35,1),opacity .35s ease;
-  display:flex;flex-direction:column;
-}
-.modal-scrim.show .modal{transform:translateY(0) scale(1);opacity:1;}
-
-.modal-head{padding:24px 26px 18px;border-bottom:1px solid rgba(0,120,200,0.12);}
-.modal-head .mh-top{display:flex;align-items:center;gap:13px;}
-.modal-badge{
-  width:44px;height:44px;border-radius:13px;flex-shrink:0;
-  display:grid;place-items:center;color:#fff;
-  background:linear-gradient(135deg,var(--sky),var(--sky-soft));
-  box-shadow:0 10px 22px -8px rgba(0,162,255,0.7);
-}
-.modal-head h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;}
-.modal-head .mh-sub{margin:2px 0 0;font-size:13px;color:var(--ink-soft);}
-.summary-metric{
-  display:flex;align-items:center;gap:12px;margin-top:16px;
-  padding:13px 15px;border-radius:14px;
-  background:rgba(0,162,255,0.08);border:1px solid rgba(0,162,255,0.18);
-}
-.summary-metric .sm-ico{color:var(--sky-deep);flex-shrink:0;}
-.summary-metric .sm-main{font-weight:750;font-size:15px;}
-.summary-metric .sm-sub{font-size:12.5px;color:var(--ink-soft);}
-
-.modal-body{padding:8px 26px 4px;overflow-y:auto;flex:1;}
-.modal-body::-webkit-scrollbar{width:8px;}
-.modal-body::-webkit-scrollbar-thumb{background:#cfe0f2;border-radius:8px;}
-
-.spk-row{
-  display:flex;align-items:center;gap:14px;padding:14px 2px;
-  border-bottom:1px solid rgba(0,120,200,0.10);
-}
-.spk-row:last-child{border-bottom:none;}
-.spk-ava{
-  width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;color:#fff;
-}
-.spk-ava.male{background:linear-gradient(135deg,#2f7fff,#5aa8ff);}
-.spk-ava.female{background:linear-gradient(135deg,#ff5fa2,#ff9bc4);}
-.spk-ava.unknown{background:linear-gradient(135deg,#8a97ab,#b8c4d6);}
-.spk-info{min-width:0;flex:1;}
-.spk-info .spk-name{font-weight:700;font-size:14px;}
-.spk-info .spk-gender{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
-.spk-voice{width:150px;flex-shrink:0;}
-.spk-voice .control select{padding:10px 34px 10px 12px;font-size:13.5px;}
-@media (max-width:480px){
-  .spk-row{flex-wrap:wrap;}
-  .spk-voice{width:100%;}
-}
-
-.modal-foot{padding:18px 26px 24px;display:flex;gap:12px;border-top:1px solid rgba(0,120,200,0.12);}
-.modal-foot .btn{width:auto;flex:1;padding:14px 18px;}
-
 .footer{margin-top:44px;text-align:center;color:#9fb0c4;font-size:12.5px;}
 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
 </style>
@@ -438,7 +345,7 @@ body{
   <!-- ===================== HERO ===================== -->
   <section class="hero">
     <h1>Dub any video into <span class="grad">any language</span>, flawlessly.</h1>
-    <p>Upload a clip, pick a target language and voice, and let our neural pipeline transcribe, translate, and re-voice it — with full multi-speaker diarization and real-time progress streaming.</p>
+    <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>
   </section>
 
   <!-- ===================== MAIN GRID ===================== -->
@@ -542,18 +449,6 @@ body{
         </span>
       </div>
 
-      <!-- Multiple character toggle -->
-      <div class="toggle-line">
-        <div class="tl-txt">
-          <strong>Multiple Characters</strong>
-          <span>Diarize speakers &amp; assign a voice to each</span>
-        </div>
-        <label class="switch" title="Toggle multi-speaker mode">
-          <input type="checkbox" id="multiToggle" />
-          <span class="slider"></span>
-        </label>
-      </div>
-
       <button class="btn" id="generateBtn" disabled>
         <span class="btn-ico" aria-hidden="true">
           <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
@@ -628,44 +523,6 @@ body{
   </div>
 </div>
 
-<!-- ===================== MODAL ===================== -->
-<div class="modal-scrim" id="modalScrim" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
-  <div class="modal">
-    <div class="modal-head">
-      <div class="mh-top">
-        <div class="modal-badge" aria-hidden="true">
-          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
-          </svg>
-        </div>
-        <div>
-          <h2 id="modalTitle">Assign Speaker Voices</h2>
-          <p class="mh-sub">We detected multiple speakers. Confirm a voice for each before dubbing.</p>
-        </div>
-      </div>
-      <div class="summary-metric">
-        <span class="sm-ico" aria-hidden="true">
-          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
-          </svg>
-        </span>
-        <div>
-          <div class="sm-main" id="summaryMain">0 Speakers Detected</div>
-          <div class="sm-sub" id="summarySub">Source language: —</div>
-        </div>
-      </div>
-    </div>
-    <div class="modal-body" id="speakerRows"></div>
-    <div class="modal-foot">
-      <button class="btn ghost" id="modalCancel">Cancel</button>
-      <button class="btn" id="applyDubBtn">
-        <span class="btn-ico" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>
-        <span>Apply &amp; Dub</span>
-      </button>
-    </div>
-  </div>
-</div>
-
 <script>
 "use strict";
 
@@ -674,26 +531,41 @@ body{
    ============================================================ */
 const API_BASE = "https://video-dubbing-api-85ur.onrender.com";
 
-/* Gemini native TTS prebuilt voices, with a coarse gender profile so the
-   modal can auto-default per the backend's gender tags. */
+/* All 30 official Gemini native-TTS prebuilt voices, with Google's own
+   one-word style tag for each (ai.google.dev/gemini-api/docs/speech-generation). */
 const VOICES = [
-  { name: "Kore",       profile: "male"   },
-  { name: "Puck",       profile: "male"   },
-  { name: "Fenrir",     profile: "male"   },
-  { name: "Charon",     profile: "male"   },
-  { name: "Orus",       profile: "male"   },
-  { name: "Enceladus",  profile: "male"   },
-  { name: "Iapetus",    profile: "male"   },
-  { name: "Aoede",      profile: "female" },
-  { name: "Leda",       profile: "female" },
-  { name: "Zephyr",     profile: "female" },
-  { name: "Callirrhoe", profile: "female" },
-  { name: "Autonoe",    profile: "female" },
-  { name: "Despina",    profile: "female" },
-  { name: "Erinome",    profile: "female" }
+  { name: "Zephyr",        style: "Bright"        },
+  { name: "Puck",          style: "Upbeat"        },
+  { name: "Charon",        style: "Informative"   },
+  { name: "Kore",          style: "Firm"          },
+  { name: "Fenrir",        style: "Excitable"     },
+  { name: "Leda",          style: "Youthful"      },
+  { name: "Orus",          style: "Firm"          },
+  { name: "Aoede",         style: "Breezy"        },
+  { name: "Callirrhoe",    style: "Easy-going"    },
+  { name: "Autonoe",       style: "Bright"        },
+  { name: "Enceladus",     style: "Breathy"       },
+  { name: "Iapetus",       style: "Clear"         },
+  { name: "Umbriel",       style: "Easy-going"    },
+  { name: "Algieba",       style: "Smooth"        },
+  { name: "Despina",       style: "Smooth"        },
+  { name: "Erinome",       style: "Clear"         },
+  { name: "Algenib",       style: "Gravelly"      },
+  { name: "Rasalgethi",    style: "Informative"   },
+  { name: "Laomedeia",     style: "Upbeat"        },
+  { name: "Achernar",      style: "Soft"          },
+  { name: "Alnilam",       style: "Firm"          },
+  { name: "Schedar",       style: "Even"          },
+  { name: "Gacrux",        style: "Mature"        },
+  { name: "Pulcherrima",   style: "Forward"       },
+  { name: "Achird",        style: "Friendly"      },
+  { name: "Zubenelgenubi", style: "Casual"        },
+  { name: "Vindemiatrix",  style: "Gentle"        },
+  { name: "Sadachbia",     style: "Lively"        },
+  { name: "Sadaltager",    style: "Knowledgeable" },
+  { name: "Sulafat",       style: "Warm"          }
 ];
-const DEFAULT_MALE = "Kore";
-const DEFAULT_FEMALE = "Aoede";
+const DEFAULT_VOICE = "Kore";
 
 /* ============================================================
    Element refs
@@ -710,7 +582,6 @@ const fileClear = $("fileClear");
 
 const targetLang = $("targetLang");
 const voiceSelect = $("voiceSelect");
-const multiToggle = $("multiToggle");
 const generateBtn = $("generateBtn");
 
 const srcBadge = $("srcBadge");
@@ -732,13 +603,6 @@ const downloadBtn = $("downloadBtn");
 const serverDot = $("serverDot");
 const serverStatusText = $("serverStatusText");
 
-const modalScrim = $("modalScrim");
-const speakerRows = $("speakerRows");
-const summaryMain = $("summaryMain");
-const summarySub = $("summarySub");
-const modalCancel = $("modalCancel");
-const applyDubBtn = $("applyDubBtn");
-
 /* ============================================================
    App state
    ============================================================ */
@@ -748,7 +612,6 @@ const state = {
   sessionId: null,
   abort: null,
   targetLanguage: "English",
-  awaitingConfirm: false,
   resultObjectUrl: null,
   consoleCleared: false
 };
@@ -837,19 +700,10 @@ function buildMainVoiceSelect(){
   VOICES.forEach(v=>{
     const o = document.createElement("option");
     o.value = v.name;
-    o.textContent = `${v.name} · ${v.profile === "male" ? "Masculine" : "Feminine"}`;
+    o.textContent = `${v.name} · ${v.style}`;
     voiceSelect.appendChild(o);
   });
-  voiceSelect.value = DEFAULT_MALE;
-}
-function voiceOptionsHTML(selected){
-  return VOICES.map(v=>`<option value="${v.name}" ${v.name===selected?"selected":""}>${v.name} · ${v.profile==="male"?"Masculine":"Feminine"}</option>`).join("");
-}
-function defaultVoiceForGender(gender){
-  const g = String(gender||"").toLowerCase();
-  if(g === "male") return DEFAULT_MALE;
-  if(g === "female") return DEFAULT_FEMALE;
-  return voiceSelect.value || DEFAULT_MALE;
+  voiceSelect.value = DEFAULT_VOICE;
 }
 
 /* ============================================================
@@ -866,6 +720,9 @@ function acceptFile(file){
   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();
 }
 function clearFile(){
   state.file = null;
@@ -955,7 +812,7 @@ function safeJSON(str){
 }
 
 /* ============================================================
-   Central SSE event handler (shared by /dub and /confirm-dubbing)
+   Central SSE event handler for the /dub stream
    ============================================================ */
 function handleSSEEvent(event, data){
   switch(event){
@@ -979,11 +836,6 @@ function handleSSEEvent(event, data){
       if(!d) break;
       if(d.source_language) lockSourceLanguage(d.source_language);
       if(d.session_id) state.sessionId = d.session_id;
-      if(d.status === "awaiting_confirmation"){
-        pushLog("[SYS] Diarization complete — awaiting voice confirmation.", "l-sys");
-        pauseAtSixty();
-        openSpeakerModal(d);
-      }
       break;
     }
     case "error": {
@@ -1007,7 +859,6 @@ function handleSSEEvent(event, data){
    ============================================================ */
 function startRunUI(){
   state.running = true;
-  state.awaitingConfirm = false;
   state.consoleCleared = false;
   generateBtn.classList.add("loading");
   generateBtn.disabled = true;
@@ -1027,13 +878,6 @@ function endRunUI(){
   refreshGenerateState();
 }
 
-function pauseAtSixty(){
-  state.awaitingConfirm = true;
-  progressFill.classList.add("paused");
-  progressFill.classList.remove("active");
-  setProgress(60, "Paused — confirm speaker voices");
-}
-
 function failRun(reason){
   pushLog("[WARN] " + (reason || "Run stopped.") + " State reset.", "l-warn");
   if(state.abort){ try{ state.abort.abort(); }catch(_){}} 
@@ -1093,78 +937,7 @@ async function presentResult(sessionId, meta){
 }
 
 /* ============================================================
-   Speaker confirmation modal
-   ============================================================ */
-function openSpeakerModal(payload){
-  const speakers = Array.isArray(payload.speakers) ? payload.speakers : [];
-  const male = speakers.filter(s=>String(s.gender).toLowerCase()==="male").length;
-  const female = speakers.filter(s=>String(s.gender).toLowerCase()==="female").length;
-  const unknown = speakers.length - male - female;
-
-  const parts = [];
-  if(male) parts.push(`${male} Male`);
-  if(female) parts.push(`${female} Female`);
-  if(unknown) parts.push(`${unknown} Unknown`);
-  summaryMain.textContent = `${speakers.length} Speaker${speakers.length===1?"":"s"} Detected`;
-  summarySub.textContent = (parts.length ? "(" + parts.join(", ") + ")" : "") +
-    (payload.source_language ? `  ·  Source: ${payload.source_language}` : "");
-
-  // Build rows
-  speakerRows.innerHTML = "";
-  speakers.forEach((sp, i)=>{
-    const id = sp.id || `Speaker_${i}`;
-    const gender = (sp.gender || "Unknown");
-    const g = gender.toLowerCase();
-    const avaClass = g==="male" ? "male" : g==="female" ? "female" : "unknown";
-    const def = defaultVoiceForGender(gender);
-
-    const row = document.createElement("div");
-    row.className = "spk-row";
-    row.innerHTML = `
-      <div class="spk-ava ${avaClass}" aria-hidden="true">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
-      </div>
-      <div class="spk-info">
-        <div class="spk-name">${esc(id)}</div>
-        <div class="spk-gender">${esc(gender)} voice profile</div>
-      </div>
-      <div class="spk-voice">
-        <div class="control">
-          <select data-speaker="${esc(id)}">${voiceOptionsHTML(def)}</select>
-          <span class="chev" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></span>
-        </div>
-      </div>`;
-    speakerRows.appendChild(row);
-  });
-
-  modalScrim.classList.add("show");
-}
-
-function closeModal(){ modalScrim.classList.remove("show"); }
-
-modalCancel.addEventListener("click", ()=>{
-  closeModal();
-  pushLog("[WARN] Voice confirmation cancelled. Aborting session.", "l-warn");
-  if(state.sessionId){
-    fetch(`${API_BASE}/session/${encodeURIComponent(state.sessionId)}`, { method:"DELETE" }).catch(()=>{});
-  }
-  if(state.abort){ try{ state.abort.abort(); }catch(_){}}
-  endRunUI();
-  setProgress(0, "Cancelled");
-});
-
-modalScrim.addEventListener("mousedown",(e)=>{ if(e.target === modalScrim) modalCancel.click(); });
-
-applyDubBtn.addEventListener("click", async ()=>{
-  const selects = speakerRows.querySelectorAll("select[data-speaker]");
-  const voiceMap = {};
-  selects.forEach(s=>{ voiceMap[s.getAttribute("data-speaker")] = s.value; });
-  closeModal();
-  await confirmDubbing(voiceMap);
-});
-
-/* ============================================================
-   Network: /dub and /confirm-dubbing
+   Network: /dub
    ============================================================ */
 async function startDub(){
   if(!state.file || state.running) return;
@@ -1172,20 +945,19 @@ async function startDub(){
   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} · Multi-speaker: ${multiToggle.checked ? "ON" : "OFF"}`);
+  pushLog(`[INFO] Target language: ${targetLang.value} · Voice: ${voiceSelect.value}`);
 
   const fd = new FormData();
   fd.append("file", state.file);
   fd.append("target_language", targetLang.value);
   fd.append("voice_name", voiceSelect.value);
-  fd.append("multiple_characters", multiToggle.checked ? "true" : "false");
 
   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/confirm, note it.
-    if(state.running && !state.awaitingConfirm){
+    // Stream ended. If we were mid-run without a done/error, note it.
+    if(state.running){
       pushLog("[WARN] Stream closed unexpectedly before completion.", "l-warn");
       endRunUI();
     }
@@ -1198,42 +970,6 @@ async function startDub(){
   }
 }
 
-async function confirmDubbing(voiceMap){
-  if(!state.sessionId){
-    pushLog("[ERROR] Missing session id — cannot confirm voices.", "l-err");
-    failRun("No active session.");
-    return;
-  }
-  state.awaitingConfirm = false;
-  state.running = true;
-  generateBtn.classList.add("loading");
-  progressFill.classList.remove("paused");
-  progressFill.classList.add("active");
-  setLive(true);
-  setProgress(61, "Resuming with confirmed voices…");
-  pushLog("[SYS] Voice mappings: " + JSON.stringify(voiceMap), "l-sys");
-
-  const fd = new FormData();
-  fd.append("session_id", state.sessionId);
-  fd.append("voice_mappings", JSON.stringify(voiceMap));
-
-  state.abort = new AbortController();
-  try{
-    const res = await fetch(`${API_BASE}/confirm-dubbing`, { method:"POST", body:fd, signal:state.abort.signal });
-    await readSSE(res, handleSSEEvent);
-    if(state.running){
-      pushLog("[WARN] Confirmation stream closed before completion.", "l-warn");
-      endRunUI();
-    }
-  }catch(err){
-    if(err.name === "AbortError"){ /* cancelled */ }
-    else{
-      pushLog("[ERROR] Confirmation failed: " + err.message, "l-err");
-      failRun("Confirm-dubbing stream error.");
-    }
-  }
-}
-
 generateBtn.addEventListener("click", startDub);
 
 /* ============================================================
@@ -1244,8 +980,9 @@ async function checkHealth(){
     const res = await fetch(`${API_BASE}/health`, { method:"GET" });
     const j = await res.json();
     if(j.status === "ok"){
-      serverDot.style.background = "var(--ok)";
-      serverStatusText.textContent = j.gemini_key_configured ? "Backend online" : "Online · key missing";
+      const hasKeys = (j.gemini_keys_configured|0) > 0 && (j.groq_keys_configured|0) > 0;
+      serverDot.style.background = hasKeys ? "var(--ok)" : "var(--warn)";
+      serverStatusText.textContent = hasKeys ? "Backend online" : "Online · API key missing";
     }else{
       serverDot.style.background = "var(--warn)";
       serverStatusText.textContent = "Backend degraded";