Spaces:

multimodalart
/

ZeroLabs

Running

App Files Files Community

apolinario commited on May 26

Commit

c71e540

1 Parent(s): 0935499

Voice Changer target: add Library tab to pick from saved voices and presets

Browse files

Files changed (1) hide show

index.html +70 -3

index.html CHANGED Viewed

@@ -728,6 +728,16 @@ pre {
 @keyframes recPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
 .record-timer { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
 .record-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
 </style>
 </head>
 <body>
@@ -2804,9 +2814,65 @@ window.setInputMode = function(prefix, mode) {
   if (upload) upload.style.display = mode === "upload" ? "" : "none";
   const recordPane = document.getElementById(`${prefix}-record-pane`);
   if (recordPane) recordPane.style.display = mode === "record" ? "" : "none";
-  // Optional library pane (Voice Changer target only, added later)
   const libraryPane = document.getElementById(`${prefix}-library-pane`);
-  if (libraryPane) libraryPane.style.display = mode === "library" ? "" : "none";
 };
 window.toggleInputRecord = async function(prefix) {
@@ -2892,6 +2958,7 @@ function attachAudioInput(prefix, onFile, opts = {}) {
       </div>
       <audio id="${prefix}-preview-audio" controls style="display:none;width:100%;margin-top:10px;border-radius:8px"></audio>
     </div>
   `);
 }
@@ -3018,7 +3085,7 @@ function updateVcBtn() {
 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(); });
 attachAudioInput("vc-source", f => { vcSource = f; document.getElementById("vc-source-label").textContent = f.name; document.getElementById("vc-source-upload").classList.add("has-file"); updateVcBtn(); });
-attachAudioInput("vc-target", f => { vcTarget = f; document.getElementById("vc-target-label").textContent = f.name; document.getElementById("vc-target-upload").classList.add("has-file"); updateVcBtn(); });
 setupPlayer("vc");
 window.voiceChange = async function() {

 @keyframes recPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
 .record-timer { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
 .record-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+.lib-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; max-height: 320px; overflow-y: auto; }
+.lib-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.1s; border: 1px solid transparent; }
+.lib-item:hover { background: var(--surface2); }
+.lib-item.selected { background: var(--surface2); border-color: var(--border-hover); }
+.lib-item .voice-avatar { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
+.lib-item-meta { display: flex; flex-direction: column; min-width: 0; }
+.lib-item-name { font-size: 13px; font-weight: 500; color: var(--text); }
+.lib-item-tag { font-size: 11px; color: var(--text-muted); }
+.lib-empty { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
 </style>
 </head>
 <body>
   if (upload) upload.style.display = mode === "upload" ? "" : "none";
   const recordPane = document.getElementById(`${prefix}-record-pane`);
   if (recordPane) recordPane.style.display = mode === "record" ? "" : "none";
   const libraryPane = document.getElementById(`${prefix}-library-pane`);
+  if (libraryPane) {
+    libraryPane.style.display = mode === "library" ? "" : "none";
+    if (mode === "library" && prefix === "vc-target") renderVcTargetLibrary();
+  }
+};
+async function renderVcTargetLibrary() {
+  const list = document.getElementById("vc-target-library-list");
+  if (!list) return;
+  const voices = await getVoices();
+  const usedPresetNames = new Set(voices.filter(v => v.isPreset).map(v => v.fileName.replace(/\.wav$/, "")));
+  const availablePresets = PRESETS.filter(p => !usedPresetNames.has(p.name));
+  const userHtml = voices.length ? voices.map(v => `
+    <div class="lib-item" data-id="${v.id}" onclick="pickVcTargetVoice('${v.id}')">
+      <div class="voice-avatar" style="background:${v.color}">${v.name[0].toUpperCase()}</div>
+      <div class="lib-item-meta">
+        <div class="lib-item-name">${v.name}</div>
+        <div class="lib-item-tag">${v.isPreset ? "Preset" : "Your voice"}</div>
+      </div>
+    </div>`).join("") : "";
+  const presetHtml = availablePresets.map(p => `
+    <div class="lib-item" data-id="preset_${p.name}" onclick="pickVcTargetPreset('${p.name}')">
+      <div class="voice-avatar" style="background:#d97706">${p.name[0]}</div>
+      <div class="lib-item-meta">
+        <div class="lib-item-name">${p.name.replace("_", " ")}</div>
+        <div class="lib-item-tag">${p.tag}</div>
+      </div>
+    </div>`).join("");
+  list.innerHTML = userHtml + presetHtml || `<div class="lib-empty">No voices yet — add one in Voice Clone or Voice Design.</div>`;
+}
+function markVcTargetSelected(id) {
+  document.querySelectorAll("#vc-target-library-list .lib-item").forEach(el => el.classList.toggle("selected", el.dataset.id === id));
+}
+window.pickVcTargetVoice = async function(id) {
+  const voices = await getVoices();
+  const v = voices.find(x => x.id === id);
+  if (!v) return;
+  const blob = new Blob([v.audioData], { type: v.audioType || "audio/wav" });
+  vcTarget = new File([blob], v.fileName || `${v.name}.wav`, { type: blob.type });
+  document.getElementById("vc-target-label").textContent = v.name;
+  document.getElementById("vc-target-upload").classList.add("has-file");
+  markVcTargetSelected(id);
+  updateVcBtn();
+};
+window.pickVcTargetPreset = async function(name) {
+  const res = await fetch(`samples/${name}.wav`);
+  const blob = await res.blob();
+  vcTarget = new File([blob], `${name}.wav`, { type: blob.type || "audio/wav" });
+  document.getElementById("vc-target-label").textContent = name.replace("_", " ");
+  document.getElementById("vc-target-upload").classList.add("has-file");
+  markVcTargetSelected(`preset_${name}`);
+  updateVcBtn();
 };
 window.toggleInputRecord = async function(prefix) {
       </div>
       <audio id="${prefix}-preview-audio" controls style="display:none;width:100%;margin-top:10px;border-radius:8px"></audio>
     </div>
+    ${opts.includeLibrary ? `<div id="${prefix}-library-pane" style="display:none;margin-bottom:16px"><div class="lib-list" id="${prefix}-library-list"></div></div>` : ""}
   `);
 }
 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(); });
 attachAudioInput("vc-source", f => { vcSource = f; document.getElementById("vc-source-label").textContent = f.name; document.getElementById("vc-source-upload").classList.add("has-file"); updateVcBtn(); });
+attachAudioInput("vc-target", f => { vcTarget = f; document.getElementById("vc-target-label").textContent = f.name; document.getElementById("vc-target-upload").classList.add("has-file"); updateVcBtn(); }, { includeLibrary: true });
 setupPlayer("vc");
 window.voiceChange = async function() {