Add Voice Changer, Voice Isolator, and Sound Effects tabs

index.html

@@ -799,6 +799,18 @@ pre {
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
         Voice Design
       </button>
+      <button class="nav-item" data-page="changer" onclick="showPage('changer', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="9" r="2.5"/><path d="M3 17a3 3 0 0 1 3-3"/><circle cx="18" cy="9" r="2.5"/><path d="M21 17a3 3 0 0 0-3-3"/><path d="M8 19h8"/><polyline points="14 17 16 19 14 21"/><polyline points="10 17 8 19 10 21"/></svg>
+        Voice Changer
+      </button>
+      <button class="nav-item" data-page="isolate" onclick="showPage('isolate', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="8" x2="12" y2="16"/><line x1="9" y1="10" x2="9" y2="14"/><line x1="15" y1="10" x2="15" y2="14"/><path d="M6 6c-3 3-3 9 0 12"/><path d="M18 6c3 3 3 9 0 12"/></svg>
+        Voice Isolator
+      </button>
+      <button class="nav-item" data-page="sfx" onclick="showPage('sfx', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 C 12 8 13 11 21 12 C 13 13 12 16 12 21 C 12 16 11 13 3 12 C 11 11 12 8 12 3 Z"/></svg>
+        Sound Effects
+      </button>
       <button class="nav-item" data-page="voices" onclick="showPage('voices', this)">
         <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
@@ -1000,6 +1012,222 @@ pre {
         </div>
       </div>
 
+      <!-- Voice Changer Page -->
+      <div class="page" id="page-changer">
+        <div class="page-header">
+          <div class="page-title">Voice Changer</div>
+          <div class="page-desc">Transform speech into any target voice. Powered by Seed-VC.</div>
+        </div>
+
+        <div class="setting-label" style="margin-bottom:8px">Source audio</div>
+        <div class="upload-area" id="vc-source-upload" style="margin-bottom:16px">
+          <div id="vc-source-label">Drop source audio or click to upload<div class="upload-area-sub">The speech you want to convert</div></div>
+          <input type="file" id="vc-source-input" accept="audio/*">
+        </div>
+
+        <div class="setting-label" style="margin-bottom:8px">Target voice</div>
+        <div class="upload-area" id="vc-target-upload" style="margin-bottom:16px">
+          <div id="vc-target-label">Drop target voice or click to upload<div class="upload-area-sub">Short clip of the voice to convert to</div></div>
+          <input type="file" id="vc-target-input" accept="audio/*">
+        </div>
+
+        <div class="settings-accordion">
+          <button class="settings-toggle" onclick="this.classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+            Advanced Settings
+          </button>
+          <div class="settings-body">
+            <div class="settings-row">
+              <div class="setting-group">
+                <div class="setting-label">Diffusion Steps</div>
+                <div class="setting-value">
+                  <input type="range" id="vc-steps" min="4" max="50" value="10">
+                  <span class="setting-num" id="vc-steps-val">10</span>
+                </div>
+              </div>
+              <div class="setting-group">
+                <div class="setting-label">Similarity</div>
+                <div class="setting-value">
+                  <input type="range" id="vc-sim" min="0" max="100" value="70">
+                  <span class="setting-num" id="vc-sim-val">0.7</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="generate-bar">
+          <button class="btn-generate" id="vc-btn" onclick="voiceChange()" disabled>
+            <span class="btn-text">Convert Voice</span>
+            <div class="spinner"></div>
+          </button>
+        </div>
+
+        <div class="status-bar" id="vc-status"></div>
+        <div class="progress-track" id="vc-progress-bar"><div class="progress-fill" id="vc-progress-fill"></div></div>
+
+        <div class="player-card" id="vc-result">
+          <div class="player-top">
+            <button class="play-btn" onclick="togglePlayer('vc')">
+              <svg id="vc-play-icon" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+              <svg id="vc-pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+            </button>
+            <div class="player-info">
+              <div class="player-title" id="vc-player-title">Converted audio</div>
+              <div class="player-meta" id="vc-player-meta"></div>
+            </div>
+            <div style="display:flex;gap:6px">
+              <button class="icon-btn" onclick="downloadResult('vc')" title="Download">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              </button>
+            </div>
+          </div>
+          <audio id="vc-audio-player" class="player-audio"></audio>
+        </div>
+      </div>
+
+      <!-- Voice Isolator Page -->
+      <div class="page" id="page-isolate">
+        <div class="page-header">
+          <div class="page-title">Voice Isolator</div>
+          <div class="page-desc">Clean and enhance noisy audio. Powered by Resemble Enhance.</div>
+        </div>
+
+        <div class="upload-area" id="iso-upload" style="margin-bottom:16px">
+          <div id="iso-upload-label">Drop noisy audio or click to upload<div class="upload-area-sub">MP3, WAV, FLAC, M4A &middot; speech with background noise</div></div>
+          <input type="file" id="iso-file-input" accept="audio/*">
+        </div>
+
+        <div class="settings-accordion">
+          <button class="settings-toggle" onclick="this.classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+            Advanced Settings
+          </button>
+          <div class="settings-body">
+            <div class="settings-row">
+              <div class="setting-group">
+                <div class="setting-label">NFE Steps</div>
+                <div class="setting-value">
+                  <input type="range" id="iso-nfe" min="1" max="128" value="64">
+                  <span class="setting-num" id="iso-nfe-val">64</span>
+                </div>
+              </div>
+              <div class="setting-group">
+                <div class="setting-label">Prior Tau</div>
+                <div class="setting-value">
+                  <input type="range" id="iso-tau" min="1" max="100" value="50">
+                  <span class="setting-num" id="iso-tau-val">0.5</span>
+                </div>
+              </div>
+            </div>
+            <label style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;margin-top:12px">
+              <input type="checkbox" id="iso-denoise-only" style="accent-color:var(--accent)">
+              Denoise only (skip enhancement)
+            </label>
+          </div>
+        </div>
+
+        <div class="generate-bar">
+          <button class="btn-generate" id="iso-btn" onclick="voiceIsolate()" disabled>
+            <span class="btn-text">Enhance Audio</span>
+            <div class="spinner"></div>
+          </button>
+        </div>
+
+        <div class="status-bar" id="iso-status"></div>
+        <div class="progress-track" id="iso-progress-bar"><div class="progress-fill" id="iso-progress-fill"></div></div>
+
+        <div class="player-card" id="iso-result">
+          <div class="player-top">
+            <button class="play-btn" onclick="togglePlayer('iso')">
+              <svg id="iso-play-icon" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+              <svg id="iso-pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+            </button>
+            <div class="player-info">
+              <div class="player-title" id="iso-player-title">Enhanced audio</div>
+              <div class="player-meta" id="iso-player-meta"></div>
+            </div>
+            <div style="display:flex;gap:6px">
+              <button class="icon-btn" onclick="downloadResult('iso')" title="Download">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              </button>
+            </div>
+          </div>
+          <audio id="iso-audio-player" class="player-audio"></audio>
+        </div>
+      </div>
+
+      <!-- Sound Effects Page -->
+      <div class="page" id="page-sfx">
+        <div class="page-header">
+          <div class="page-title">Sound Effects</div>
+          <div class="page-desc">Generate sound effects from a text prompt. Powered by Stable Audio 3.</div>
+        </div>
+
+        <div class="editor">
+          <textarea id="sfx-prompt" placeholder="e.g. dog barking, thunder cracking, footsteps on gravel, lo-fi vinyl crackle..."></textarea>
+          <div class="editor-footer">
+            <div class="editor-left">
+              <span class="editor-stat"><span id="sfx-char-count">0</span> chars</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-accordion">
+          <button class="settings-toggle" onclick="this.classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+            Advanced Settings
+          </button>
+          <div class="settings-body">
+            <div class="settings-row">
+              <div class="setting-group">
+                <div class="setting-label">Duration</div>
+                <div class="setting-value">
+                  <input type="range" id="sfx-duration" min="1" max="30" value="5">
+                  <span class="setting-num" id="sfx-duration-val">5s</span>
+                </div>
+              </div>
+              <div class="setting-group">
+                <div class="setting-label">Inference Steps</div>
+                <div class="setting-value">
+                  <input type="range" id="sfx-steps" min="4" max="32" value="8">
+                  <span class="setting-num" id="sfx-steps-val">8</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="generate-bar">
+          <button class="btn-generate" id="sfx-btn" onclick="soundEffect()" disabled>
+            <span class="btn-text">Generate Sound</span>
+            <div class="spinner"></div>
+          </button>
+        </div>
+
+        <div class="status-bar" id="sfx-status"></div>
+        <div class="progress-track" id="sfx-progress-bar"><div class="progress-fill" id="sfx-progress-fill"></div></div>
+
+        <div class="player-card" id="sfx-result">
+          <div class="player-top">
+            <button class="play-btn" onclick="togglePlayer('sfx')">
+              <svg id="sfx-play-icon" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+              <svg id="sfx-pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+            </button>
+            <div class="player-info">
+              <div class="player-title" id="sfx-player-title">Generated sound</div>
+              <div class="player-meta" id="sfx-player-meta"></div>
+            </div>
+            <div style="display:flex;gap:6px">
+              <button class="icon-btn" onclick="downloadResult('sfx')" title="Download">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+              </button>
+            </div>
+          </div>
+          <audio id="sfx-audio-player" class="player-audio"></audio>
+        </div>
+      </div>
+
       <!-- Voice Library Page -->
       <div class="page" id="page-voices">
         <div class="page-header">
@@ -1175,7 +1403,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">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 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/Plachta/Seed-VC" target="_blank">Seed-VC</a>, <a href="https://huggingface.co/spaces/multimodalart/resemble-enhance-zerogpu" target="_blank">Resemble Enhance</a>, <a href="https://huggingface.co/spaces/stabilityai/stable-audio-3" target="_blank">Stable Audio 3</a> & <a href="https://huggingface.co/spaces/CohereLabs/cohere-transcribe-03-2026" target="_blank">Cohere Transcribe</a></div>
     </div>
   </div>
 </div>
@@ -2016,6 +2244,331 @@ window.showApiTab = function(tab, el) {
   el.classList.add("active");
 };
 
+// ── Shared gradio helpers (for Voice Changer / Isolator / SFX) ──
+
+const SEED_VC_BASE = "https://plachta-seed-vc.hf.space/gradio_api";
+const RESEMBLE_BASE = "https://multimodalart-resemble-enhance-zerogpu.hf.space/gradio_api";
+const STABLE_AUDIO_BASE = "https://stabilityai-stable-audio-3.hf.space/gradio_api";
+
+const resultUrls = {};
+
+function showStatusOn(elId, type, msg) {
+  const el = document.getElementById(elId);
+  el.className = `status-bar visible ${type}`;
+  el.innerHTML = `<div class="status-text">${msg}</div>`;
+}
+
+function showStatusCtaOn(elId, errMsg) {
+  const el = document.getElementById(elId);
+  const isQuota = errMsg.includes("GPU quota");
+  const isFree = errMsg.includes("free GPU quota");
+  let html = `<div class="status-text">${errMsg}</div>`;
+  if (isQuota) {
+    html += isFree
+      ? `<a class="status-cta upgrade" href="https://huggingface.co/subscribe/pro" target="_blank">🤗 Upgrade to HF Pro &mdash; 25 min/day GPU quota</a>`
+      : `<a class="status-cta credits" href="https://huggingface.co/settings/billing" target="_blank">Buy additional GPU credits &mdash; $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;
+}
+
+function wireUploadArea(areaId, inputId, labelId, onFile) {
+  const area = document.getElementById(areaId);
+  const inp = document.getElementById(inputId);
+  area.addEventListener("click", e => { if (e.target.tagName !== "INPUT") inp.click(); });
+  area.addEventListener("dragover", e => { e.preventDefault(); area.classList.add("dragover"); });
+  area.addEventListener("dragleave", () => area.classList.remove("dragover"));
+  area.addEventListener("drop", e => {
+    e.preventDefault();
+    area.classList.remove("dragover");
+    if (e.dataTransfer.files[0]) { onFile(e.dataTransfer.files[0]); document.getElementById(labelId).textContent = e.dataTransfer.files[0].name; area.classList.add("has-file"); }
+  });
+  inp.addEventListener("change", () => {
+    if (inp.files[0]) { onFile(inp.files[0]); document.getElementById(labelId).textContent = inp.files[0].name; area.classList.add("has-file"); }
+  });
+}
+
+function setupPlayer(prefix) {
+  const el = document.getElementById(`${prefix}-audio-player`);
+  el.addEventListener("play", () => {
+    document.getElementById(`${prefix}-play-icon`).style.display = "none";
+    document.getElementById(`${prefix}-pause-icon`).style.display = "block";
+  });
+  el.addEventListener("pause", () => {
+    document.getElementById(`${prefix}-play-icon`).style.display = "block";
+    document.getElementById(`${prefix}-pause-icon`).style.display = "none";
+  });
+}
+
+window.togglePlayer = function(prefix) {
+  const el = document.getElementById(`${prefix}-audio-player`);
+  el.paused ? el.play() : el.pause();
+};
+
+window.downloadResult = async function(prefix) {
+  const url = resultUrls[prefix];
+  if (!url) return;
+  const blob = await fetch(url).then(r => r.blob());
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = `zerolabs_${prefix}.wav`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+};
+
+// Upload a file to a Space's /upload, return a FileData ref ready for /queue/join data array
+async function uploadFile(base, file) {
+  const form = new FormData();
+  form.append("files", file);
+  const r = await fetch(`${base}/upload`, {
+    method: "POST",
+    headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
+    body: form
+  });
+  if (!r.ok) throw new Error(`Upload failed: ${r.status}`);
+  const [path] = await r.json();
+  return { path, meta: { _type: "gradio.FileData" }, orig_name: file.name };
+}
+
+// Run a queue/join + queue/data SSE call. Returns { output, duration }.
+// statusElId/progressFillId are optional and used for UI updates.
+async function gradioCall({ base, fnIndex, data, statusElId, progressFillId, processingMsg }) {
+  const session = crypto.randomUUID();
+  if (statusElId) showStatusOn(statusElId, "info", "Joining queue...");
+
+  const joinRes = await fetch(`${base}/queue/join`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {})
+    },
+    body: JSON.stringify({ data, fn_index: fnIndex, session_hash: session })
+  });
+  if (!joinRes.ok) throw new Error(`Queue join failed: ${joinRes.status}`);
+
+  const streamRes = await fetch(`${base}/queue/data?session_hash=${session}`, {
+    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 evt = JSON.parse(line.slice(6));
+      if (statusElId) {
+        if (evt.msg === "estimation") showStatusOn(statusElId, "info", `In queue (position ${evt.rank})...`);
+        else if (evt.msg === "process_starts") {
+          showStatusOn(statusElId, "info", processingMsg || "Processing...");
+          if (progressFillId) document.getElementById(progressFillId).style.width = "10%";
+        }
+        else if (evt.msg === "log") showStatusOn(statusElId, "info", evt.log);
+        else if (evt.msg === "progress" && evt.progress_data?.length) {
+          const p = evt.progress_data[0];
+          if (p.length && progressFillId) {
+            document.getElementById(progressFillId).style.width = `${Math.round((p.index / p.length) * 90) + 10}%`;
+            showStatusOn(statusElId, "info", p.desc || `Step ${p.index}/${p.length}`);
+          }
+        }
+      }
+      if (evt.msg === "process_completed") {
+        if (progressFillId) document.getElementById(progressFillId).style.width = "100%";
+        if (evt.success) return { output: evt.output, duration: evt.output.duration || 0 };
+        throw new Error(evt.output?.error || "Generation failed");
+      }
+    }
+  }
+  throw new Error("Stream ended without completion");
+}
+
+// Pull a URL out of a gradio Audio output (object {url} or {path} ref).
+function audioUrlFromOutput(out, base) {
+  if (!out) return null;
+  if (typeof out === "string") return out;
+  if (out.url) return out.url;
+  if (out.path) return `${base}/file=${out.path}`;
+  return null;
+}
+
+// ── Voice Changer (Seed-VC) ──
+
+let vcSource = null, vcTarget = null;
+const vcSteps = document.getElementById("vc-steps");
+const vcSim = document.getElementById("vc-sim");
+vcSteps.addEventListener("input", () => document.getElementById("vc-steps-val").textContent = vcSteps.value);
+vcSim.addEventListener("input", () => document.getElementById("vc-sim-val").textContent = (vcSim.value / 100).toFixed(2));
+
+function updateVcBtn() {
+  document.getElementById("vc-btn").disabled = !(vcSource && vcTarget);
+}
+wireUploadArea("vc-source-upload", "vc-source-input", "vc-source-label", f => { vcSource = f; updateVcBtn(); });
+wireUploadArea("vc-target-upload", "vc-target-input", "vc-target-label", f => { vcTarget = f; updateVcBtn(); });
+setupPlayer("vc");
+
+window.voiceChange = async function() {
+  if (!vcSource || !vcTarget) return;
+  const btn = document.getElementById("vc-btn");
+  const progressBar = document.getElementById("vc-progress-bar");
+  const progressFill = document.getElementById("vc-progress-fill");
+  const result = document.getElementById("vc-result");
+
+  btn.disabled = true; btn.classList.add("loading");
+  result.classList.remove("visible");
+  progressBar.classList.add("visible");
+  progressFill.style.width = "0%";
+
+  try {
+    showStatusOn("vc-status", "info", "Uploading audio...");
+    const [src, tgt] = await Promise.all([uploadFile(SEED_VC_BASE, vcSource), uploadFile(SEED_VC_BASE, vcTarget)]);
+
+    const { output, duration } = await gradioCall({
+      base: SEED_VC_BASE,
+      fnIndex: 3,
+      data: [src, tgt, parseInt(vcSteps.value), 1.0, 0.0, vcSim.value / 100, 0.9, 1.0, 1.0, false, false],
+      statusElId: "vc-status",
+      progressFillId: "vc-progress-fill",
+      processingMsg: "Converting voice..."
+    });
+
+    // Seed-VC outputs: [Stream Output (HLS), Full Output (wav)]. Use the full one.
+    const url = audioUrlFromOutput(output.data[1], SEED_VC_BASE);
+    if (!url) throw new Error("No audio returned");
+    resultUrls.vc = url;
+    document.getElementById("vc-audio-player").src = url;
+    document.getElementById("vc-player-meta").textContent = `${vcSource.name} → ${vcTarget.name} · ${duration.toFixed(1)}s`;
+    result.classList.add("visible");
+    showStatusOn("vc-status", "success", `Converted in ${duration.toFixed(1)}s`);
+    updateUsageTracker(duration * 0.5);
+  } catch (err) {
+    showStatusCtaOn("vc-status", err.message);
+  } finally {
+    btn.disabled = false; btn.classList.remove("loading");
+    setTimeout(() => { progressBar.classList.remove("visible"); updateVcBtn(); }, 2000);
+  }
+};
+
+// ── Voice Isolator (Resemble Enhance) ──
+
+let isoFile = null;
+const isoNfe = document.getElementById("iso-nfe");
+const isoTau = document.getElementById("iso-tau");
+isoNfe.addEventListener("input", () => document.getElementById("iso-nfe-val").textContent = isoNfe.value);
+isoTau.addEventListener("input", () => document.getElementById("iso-tau-val").textContent = (isoTau.value / 100).toFixed(2));
+
+wireUploadArea("iso-upload", "iso-file-input", "iso-upload-label", f => {
+  isoFile = f;
+  document.getElementById("iso-btn").disabled = false;
+});
+setupPlayer("iso");
+
+window.voiceIsolate = async function() {
+  if (!isoFile) return;
+  const btn = document.getElementById("iso-btn");
+  const progressBar = document.getElementById("iso-progress-bar");
+  const progressFill = document.getElementById("iso-progress-fill");
+  const result = document.getElementById("iso-result");
+  const denoiseOnly = document.getElementById("iso-denoise-only").checked;
+
+  btn.disabled = true; btn.classList.add("loading");
+  result.classList.remove("visible");
+  progressBar.classList.add("visible");
+  progressFill.style.width = "0%";
+
+  try {
+    showStatusOn("iso-status", "info", "Uploading audio...");
+    const fileRef = await uploadFile(RESEMBLE_BASE, isoFile);
+
+    const { output, duration } = await gradioCall({
+      base: RESEMBLE_BASE,
+      fnIndex: 2,
+      data: [fileRef, "Midpoint", parseInt(isoNfe.value), isoTau.value / 100, denoiseOnly],
+      statusElId: "iso-status",
+      progressFillId: "iso-progress-fill",
+      processingMsg: "Enhancing audio..."
+    });
+
+    // Outputs: [Denoised, Enhanced]. Pick enhanced normally; denoised if denoise-only.
+    const idx = denoiseOnly ? 0 : 1;
+    const url = audioUrlFromOutput(output.data[idx], RESEMBLE_BASE);
+    if (!url) throw new Error("No audio returned");
+    resultUrls.iso = url;
+    document.getElementById("iso-audio-player").src = url;
+    document.getElementById("iso-player-title").textContent = denoiseOnly ? "Denoised audio" : "Enhanced audio";
+    document.getElementById("iso-player-meta").textContent = `${isoFile.name} · ${duration.toFixed(1)}s`;
+    result.classList.add("visible");
+    showStatusOn("iso-status", "success", `Done in ${duration.toFixed(1)}s`);
+    updateUsageTracker(duration * 0.5);
+  } catch (err) {
+    showStatusCtaOn("iso-status", err.message);
+  } finally {
+    btn.disabled = false; btn.classList.remove("loading");
+    setTimeout(() => { progressBar.classList.remove("visible"); }, 2000);
+  }
+};
+
+// ── Sound Effects (Stable Audio 3) ──
+
+const sfxPrompt = document.getElementById("sfx-prompt");
+const sfxDuration = document.getElementById("sfx-duration");
+const sfxSteps = document.getElementById("sfx-steps");
+sfxPrompt.addEventListener("input", () => {
+  document.getElementById("sfx-char-count").textContent = sfxPrompt.value.length;
+  document.getElementById("sfx-btn").disabled = !sfxPrompt.value.trim();
+});
+sfxDuration.addEventListener("input", () => document.getElementById("sfx-duration-val").textContent = `${sfxDuration.value}s`);
+sfxSteps.addEventListener("input", () => document.getElementById("sfx-steps-val").textContent = sfxSteps.value);
+setupPlayer("sfx");
+
+window.soundEffect = async function() {
+  const prompt = sfxPrompt.value.trim();
+  if (!prompt) return;
+  const btn = document.getElementById("sfx-btn");
+  const progressBar = document.getElementById("sfx-progress-bar");
+  const progressFill = document.getElementById("sfx-progress-fill");
+  const result = document.getElementById("sfx-result");
+
+  btn.disabled = true; btn.classList.add("loading");
+  result.classList.remove("visible");
+  progressBar.classList.add("visible");
+  progressFill.style.width = "0%";
+
+  try {
+    const { output, duration } = await gradioCall({
+      base: STABLE_AUDIO_BASE,
+      fnIndex: 3,
+      // /infer params: variant_key, prompt, duration, steps, cfg_scale, sampler_type, seed
+      data: ["medium", prompt, parseInt(sfxDuration.value), parseInt(sfxSteps.value), 1.0, "pingpong", 0],
+      statusElId: "sfx-status",
+      progressFillId: "sfx-progress-fill",
+      processingMsg: "Generating sound..."
+    });
+
+    const url = audioUrlFromOutput(output.data[0], STABLE_AUDIO_BASE);
+    if (!url) throw new Error("No audio returned");
+    resultUrls.sfx = url;
+    document.getElementById("sfx-audio-player").src = url;
+    document.getElementById("sfx-player-title").textContent = prompt.slice(0, 60) + (prompt.length > 60 ? "..." : "");
+    document.getElementById("sfx-player-meta").textContent = `${sfxDuration.value}s · ${duration.toFixed(1)}s gen`;
+    result.classList.add("visible");
+    showStatusOn("sfx-status", "success", `Generated in ${duration.toFixed(1)}s`);
+    updateUsageTracker(duration * 0.5);
+  } catch (err) {
+    showStatusCtaOn("sfx-status", err.message);
+  } finally {
+    btn.disabled = false; btn.classList.remove("loading");
+    setTimeout(() => { progressBar.classList.remove("visible"); }, 2000);
+  }
+};
+
 // ── Text ──
 
 const textInput = document.getElementById("text-input");