Add Transcribe tab powered by Cohere Transcribe

index.html

@@ -803,6 +803,10 @@ pre {
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
         Voice Library
       </button>
+      <button class="nav-item" data-page="transcribe" onclick="showPage('transcribe', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>
+        Transcribe
+      </button>
       <button class="nav-item" data-page="history" onclick="showPage('history', this)">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         History
@@ -1010,6 +1014,54 @@ pre {
         <div class="voices-grid" id="presets-grid"></div>
       </div>
 
+      <!-- Transcribe Page -->
+      <div class="page" id="page-transcribe">
+        <div class="page-header">
+          <div class="page-title">Transcribe</div>
+          <div class="page-desc">Upload an audio file to transcribe it to text. Powered by Cohere Transcribe.</div>
+        </div>
+
+        <div class="upload-area" id="transcribe-upload" style="margin-bottom:16px">
+          <div id="transcribe-upload-label">Drop an audio file here or click to upload<div class="upload-area-sub">MP3, WAV, FLAC, M4A supported</div></div>
+          <input type="file" id="transcribe-file-input" accept="audio/*">
+        </div>
+
+        <div style="display:flex;gap:12px;align-items:center;margin-bottom:16px">
+          <select class="lang-select" id="transcribe-lang" style="padding:8px 12px;font-size:13px">
+            <option value="en">English</option>
+            <option value="fr">French</option>
+            <option value="de">German</option>
+            <option value="es">Spanish</option>
+            <option value="pt">Portuguese</option>
+            <option value="it">Italian</option>
+            <option value="nl">Dutch</option>
+            <option value="pl">Polish</option>
+            <option value="el">Greek</option>
+            <option value="ar">Arabic</option>
+            <option value="ja">Japanese</option>
+            <option value="ko">Korean</option>
+            <option value="zh">Chinese</option>
+            <option value="vi">Vietnamese</option>
+          </select>
+          <button class="btn-generate" id="transcribe-btn" onclick="transcribe()" disabled style="flex:1">
+            <span class="btn-text">Transcribe</span>
+            <div class="spinner"></div>
+          </button>
+        </div>
+
+        <div class="status-bar" id="transcribe-status"></div>
+
+        <div id="transcribe-result" style="display:none">
+          <div class="setting-label" style="margin-bottom:8px;margin-top:16px">Transcript</div>
+          <div style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;font-size:14px;line-height:1.6;position:relative">
+            <div id="transcribe-text"></div>
+            <button class="copy-btn" onclick="copyTranscript()" style="position:absolute;top:8px;right:8px">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy
+            </button>
+          </div>
+        </div>
+      </div>
+
       <!-- History Page -->
       <div class="page" id="page-history">
         <div class="page-header">
@@ -1123,7 +1175,7 @@ result = client.<span class="f">predict</span>(
         </div>
       </div>
 
-      <div class="footer">Powered by <a href="https://huggingface.co/spaces/k2-fsa/OmniVoice" target="_blank">k2-fsa/OmniVoice</a> & <a href="https://huggingface.co/spaces/Qwen/Qwen3-TTS" target="_blank">Qwen3-TTS</a></div>
+      <div class="footer">Powered by <a href="https://huggingface.co/spaces/k2-fsa/OmniVoice" target="_blank">OmniVoice</a>, <a href="https://huggingface.co/spaces/Qwen/Qwen3-TTS" target="_blank">Qwen3-TTS</a> & <a href="https://huggingface.co/spaces/CohereLabs/cohere-transcribe-03-2026" target="_blank">Cohere Transcribe</a></div>
     </div>
   </div>
 </div>
@@ -1698,6 +1750,154 @@ window.saveDesignVoice = async function() {
   }
 };
 
+// ── Transcribe (Cohere) ──
+
+const COHERE_BASE = "https://coherelabs-cohere-transcribe-03-2026.hf.space/gradio_api";
+let transcribeFile = null;
+
+const transcribeUpload = document.getElementById("transcribe-upload");
+const transcribeFileInput = document.getElementById("transcribe-file-input");
+const transcribeBtn = document.getElementById("transcribe-btn");
+
+transcribeUpload.addEventListener("click", () => transcribeFileInput.click());
+transcribeUpload.addEventListener("dragover", e => e.preventDefault());
+transcribeUpload.addEventListener("drop", e => {
+  e.preventDefault();
+  if (e.dataTransfer.files.length) handleTranscribeFile(e.dataTransfer.files[0]);
+});
+transcribeFileInput.addEventListener("change", () => {
+  if (transcribeFileInput.files.length) handleTranscribeFile(transcribeFileInput.files[0]);
+});
+
+function handleTranscribeFile(file) {
+  transcribeFile = file;
+  document.getElementById("transcribe-upload-label").textContent = file.name;
+  transcribeUpload.classList.add("has-file");
+  transcribeBtn.disabled = false;
+}
+
+window.transcribe = async function() {
+  if (!transcribeFile) return;
+  const lang = document.getElementById("transcribe-lang").value;
+  const btn = transcribeBtn;
+  const result = document.getElementById("transcribe-result");
+
+  btn.disabled = true;
+  btn.classList.add("loading");
+  result.style.display = "none";
+  showTranscribeStatus("info", "Uploading audio...");
+
+  try {
+    const form = new FormData();
+    form.append("files", transcribeFile);
+    const uploadRes = await fetch(`${COHERE_BASE}/upload`, {
+      method: "POST",
+      headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
+      body: form
+    });
+    const [uploadPath] = await uploadRes.json();
+
+    showTranscribeStatus("info", "Transcribing...");
+    const sessionHash = crypto.randomUUID();
+
+    const joinRes = await fetch(`${COHERE_BASE}/queue/join`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {})
+      },
+      body: JSON.stringify({
+        data: [
+          { path: uploadPath, meta: { _type: "gradio.FileData" }, orig_name: transcribeFile.name },
+          lang
+        ],
+        fn_index: 2,
+        session_hash: sessionHash
+      })
+    });
+    if (!joinRes.ok) throw new Error(`Queue join failed: ${joinRes.status}`);
+
+    const streamRes = await fetch(
+      `${COHERE_BASE}/queue/data?session_hash=${sessionHash}`,
+      { headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {} }
+    );
+
+    const reader = streamRes.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n\n");
+      buffer = lines.pop();
+
+      for (const line of lines) {
+        if (!line.startsWith("data: ")) continue;
+        const data = JSON.parse(line.slice(6));
+
+        if (data.msg === "estimation") showTranscribeStatus("info", `In queue (position ${data.rank})...`);
+        else if (data.msg === "process_starts") showTranscribeStatus("info", "Transcribing...");
+        else if (data.msg === "log") showTranscribeStatus("info", data.log);
+        else if (data.msg === "process_completed") {
+          if (data.success) {
+            const transcript = data.output.data[0];
+            document.getElementById("transcribe-text").textContent = transcript;
+            result.style.display = "block";
+            showTranscribeStatus("success", `Transcribed in ${data.output.duration?.toFixed(1)}s`);
+            updateUsageTracker(data.output.duration * 0.5);
+          } else {
+            showTranscribeStatusWithCTA(data.output?.error || "Transcription failed");
+          }
+        }
+      }
+    }
+  } catch (err) {
+    showTranscribeStatusWithCTA(err.message);
+  } finally {
+    btn.disabled = false;
+    btn.classList.remove("loading");
+  }
+};
+
+function showTranscribeStatus(type, msg) {
+  const el = document.getElementById("transcribe-status");
+  el.className = `status-bar visible ${type}`;
+  el.innerHTML = `<div class="status-text">${msg}</div>`;
+}
+
+function showTranscribeStatusWithCTA(errMsg) {
+  const el = document.getElementById("transcribe-status");
+  const isQuotaError = errMsg.includes("GPU quota");
+  const isFreeQuota = errMsg.includes("free GPU quota");
+  let html = `<div class="status-text">${errMsg}</div>`;
+  if (isQuotaError) {
+    if (isFreeQuota) {
+      html += `<a class="status-cta upgrade" href="https://huggingface.co/subscribe/pro" target="_blank">🤗 Upgrade to HF Pro — 25 min/day GPU quota</a>`;
+    } else {
+      html += `<a class="status-cta credits" href="https://huggingface.co/settings/billing" target="_blank">Buy additional GPU credits — $1 per 10 min</a>`;
+    }
+    const m = errMsg.match(/Try again in ([\d:]+)/);
+    if (m && m[1] !== "0:00:00") html += `<div style="font-size:11px;color:var(--text-muted);margin-top:2px">Or wait ${m[1]} for your quota to reset</div>`;
+  }
+  el.className = "status-bar visible error";
+  el.innerHTML = html;
+}
+
+window.copyTranscript = function() {
+  const text = document.getElementById("transcribe-text").textContent;
+  navigator.clipboard.writeText(text).then(() => {
+    const btn = document.querySelector("#transcribe-result .copy-btn");
+    btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
+    btn.classList.add("copied");
+    setTimeout(() => {
+      btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy';
+      btn.classList.remove("copied");
+    }, 2000);
+  });
+};
+
 // ── OAuth ──
 
 async function initOAuth() {