Add Generate Audiobook: per-segment voices, combine to single MP3

index.html

@@ -343,6 +343,39 @@ body {
 }
 .lang-select:focus { outline: none; border-color: var(--accent); }
 
+/* Audiobook */
+.ab-default-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+.ab-default-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
+.ab-split-btn {
+  padding: 6px 14px; background: var(--surface3); border: 1px solid var(--border);
+  border-radius: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 600;
+  cursor: pointer; font-family: 'Inter', sans-serif;
+}
+.ab-split-btn:hover { color: var(--text); border-color: var(--border-hover); }
+.ab-segments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
+.ab-segment {
+  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
+  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
+}
+.ab-segment-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.ab-segment-idx { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.ab-segment-status { font-size: 11px; font-weight: 600; color: var(--text-muted); }
+.ab-segment-status.done { color: #16a34a; }
+.ab-segment-status.error { color: #dc2626; }
+.ab-segment-status.active { color: var(--accent); }
+.ab-segment textarea {
+  width: 100%; min-height: 56px; resize: vertical; border: 1px solid var(--border);
+  border-radius: 7px; background: var(--surface2); color: var(--text); font-size: 13px;
+  font-family: 'Inter', sans-serif; padding: 8px 10px; line-height: 1.5;
+}
+.ab-segment textarea:focus { outline: none; border-color: var(--accent); }
+.ab-segment-foot { display: flex; align-items: center; gap: 8px; }
+.ab-segment-del {
+  margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted);
+  font-size: 12px; padding: 2px 6px;
+}
+.ab-segment-del:hover { color: #dc2626; }
+
 /* Settings accordion */
 .settings-accordion {
   margin-bottom: 16px;
@@ -871,6 +904,10 @@ pre {
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
         Voice Generation
       </button>
+      <button class="nav-item" data-page="audiobook" onclick="showPage('audiobook', this)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z"/></svg>
+        Audiobook
+      </button>
       <button class="nav-item" data-page="design" onclick="showPage('design', this)">
         <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
@@ -1031,6 +1068,74 @@ pre {
         </div>
       </div>
 
+      <!-- Audiobook Page -->
+      <div class="page" id="page-audiobook">
+        <div class="page-header">
+          <div class="page-title">Generate Audiobook</div>
+          <div class="page-desc">Paste a long text, split it into paragraphs, pick a voice per segment, then export a single MP3.</div>
+        </div>
+
+        <div class="ab-default-row">
+          <span class="ab-default-label">Default voice</span>
+          <select class="lang-select" id="ab-default-voice" onchange="abDefaultChanged()"></select>
+        </div>
+
+        <div class="editor">
+          <textarea id="ab-text" placeholder="Paste your text here. Separate paragraphs with a blank line — each paragraph becomes its own segment with its own voice."></textarea>
+          <div class="editor-footer">
+            <div class="editor-left">
+              <span class="editor-stat"><span id="ab-char-count">0</span> chars</span>
+              <select class="lang-select" id="ab-lang-select">
+                <option value="Auto">Language (Auto)</option>
+                <option value="English">English</option>
+                <option value="Chinese">Chinese</option>
+                <option value="French">French</option>
+                <option value="German">German</option>
+                <option value="Spanish">Spanish</option>
+                <option value="Japanese">Japanese</option>
+                <option value="Korean">Korean</option>
+                <option value="Portuguese">Portuguese</option>
+                <option value="Italian">Italian</option>
+                <option value="Russian">Russian</option>
+                <option value="Arabic">Arabic</option>
+                <option value="Hindi">Hindi</option>
+              </select>
+            </div>
+            <button class="ab-split-btn" type="button" onclick="splitAudiobook()">Split into segments</button>
+          </div>
+        </div>
+
+        <div class="ab-segments" id="ab-segments"></div>
+
+        <div class="generate-bar">
+          <button class="btn-generate" id="ab-generate-btn" onclick="generateAudiobook()" disabled>
+            <span class="btn-text">Generate Audiobook</span>
+            <div class="spinner"></div>
+          </button>
+        </div>
+
+        <div class="status-bar" id="ab-status"></div>
+        <div class="progress-track" id="ab-progress-bar"><div class="progress-fill" id="ab-progress-fill"></div></div>
+
+        <div class="player-card" id="ab-result">
+          <div class="player-top">
+            <button class="play-btn" onclick="document.getElementById('ab-audio-player').paused ? document.getElementById('ab-audio-player').play() : document.getElementById('ab-audio-player').pause()">
+              <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+            </button>
+            <div class="player-info">
+              <div class="player-title" id="ab-player-title">Audiobook</div>
+              <div class="player-meta" id="ab-player-meta"></div>
+            </div>
+            <div style="display:flex;gap:6px">
+              <button class="icon-btn" onclick="downloadAudiobook()" title="Download MP3">
+                <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="ab-audio-player" class="player-audio" controls></audio>
+        </div>
+      </div>
+
       <!-- Voice Design Page -->
       <div class="page" id="page-design">
         <div class="page-header">
@@ -2493,6 +2598,7 @@ window.showPage = function(page, el) {
   el.classList.add("active");
   if (page === "voices") { renderPresets(); renderVoicesPage(); }
   if (page === "history") renderHistory();
+  if (page === "audiobook") initAudiobook();
 };
 
 window.copyCode = function(btn) {
@@ -3557,6 +3663,270 @@ window.generate = async function() {
   }
 };
 
+// ── Audiobook ──
+
+let abSegments = [];        // [{ text, voiceId, status, url }]
+let abVoiceOptions = [];    // [{ id, label }]
+let abResultBlob = null;
+let abResultUrl = null;
+
+async function audiobookVoiceOptions() {
+  const voices = await getVoices();
+  const usedPresetNames = new Set(voices.filter(v => v.isPreset).map(v => v.fileName.replace(/\.wav$/, "")));
+  const opts = voices.map(v => ({ id: v.id, label: v.name }));
+  PRESETS.filter(p => !usedPresetNames.has(p.name)).forEach(p =>
+    opts.push({ id: `preset:${p.name}`, label: `${p.name.replace("_", " ")} (preset)` }));
+  return opts;
+}
+
+async function initAudiobook() {
+  abVoiceOptions = await audiobookVoiceOptions();
+  const sel = document.getElementById("ab-default-voice");
+  const prev = sel.value;
+  sel.innerHTML = abVoiceOptions.length
+    ? abVoiceOptions.map(o => `<option value="${o.id}">${o.label}</option>`).join("")
+    : `<option value="">No voices — add one in the Voice Library</option>`;
+  if (abVoiceOptions.some(o => o.id === prev)) sel.value = prev;
+  else if (selectedVoice && abVoiceOptions.some(o => o.id === selectedVoice.id)) sel.value = selectedVoice.id;
+  // re-sync any rendered segment selects with the (possibly updated) option list
+  if (abSegments.length) renderAbSegments();
+  abUpdateGenerateBtn();
+}
+
+window.abDefaultChanged = function() {
+  // segments inherit the default unless individually overridden — just re-render to refresh labels
+  renderAbSegments();
+  abUpdateGenerateBtn();
+};
+
+function abUpdateGenerateBtn() {
+  const def = document.getElementById("ab-default-voice").value;
+  document.getElementById("ab-generate-btn").disabled = abSegments.length === 0 || !def;
+}
+
+// "" = inherit global default; any other value = per-segment override
+function abVoiceSelectHtml(selectedId) {
+  const defLabel = (abVoiceOptions.find(o => o.id === document.getElementById("ab-default-voice").value)?.label) || "—";
+  return `<option value="" ${!selectedId ? "selected" : ""}>Default (${defLabel})</option>` +
+    abVoiceOptions.map(o =>
+      `<option value="${o.id}" ${o.id === selectedId ? "selected" : ""}>${o.label}</option>`).join("");
+}
+
+window.splitAudiobook = function() {
+  const raw = document.getElementById("ab-text").value;
+  const paras = raw.split(/\n\s*\n/).map(p => p.trim()).filter(Boolean);
+  abSegments = paras.map(text => ({ text, voiceId: "", status: "idle", url: null }));
+  renderAbSegments();
+  abUpdateGenerateBtn();
+};
+
+function renderAbSegments() {
+  const wrap = document.getElementById("ab-segments");
+  wrap.innerHTML = abSegments.map((s, i) => {
+    const statusCls = s.status === "done" ? "done" : s.status === "error" ? "error" : s.status === "active" ? "active" : "";
+    const statusTxt = s.status === "done" ? "Done" : s.status === "error" ? "Failed" : s.status === "active" ? "Generating…" : "";
+    return `<div class="ab-segment">
+      <div class="ab-segment-head">
+        <span class="ab-segment-idx">Segment ${i + 1}</span>
+        <span class="ab-segment-status ${statusCls}">${statusTxt}</span>
+      </div>
+      <textarea oninput="abEditText(${i}, this.value)">${s.text.replace(/</g, "&lt;")}</textarea>
+      <div class="ab-segment-foot">
+        <select class="lang-select" onchange="abSetVoice(${i}, this.value)">${abVoiceSelectHtml(s.voiceId)}</select>
+        <button class="ab-segment-del" onclick="abDeleteSegment(${i})">Remove</button>
+      </div>
+    </div>`;
+  }).join("");
+}
+
+window.abEditText = function(i, v) { if (abSegments[i]) abSegments[i].text = v; };
+window.abSetVoice = function(i, v) { if (abSegments[i]) abSegments[i].voiceId = v; };
+window.abDeleteSegment = function(i) {
+  abSegments.splice(i, 1);
+  renderAbSegments();
+  abUpdateGenerateBtn();
+};
+
+async function resolveAbVoice(voiceId) {
+  if (voiceId && voiceId.startsWith("preset:")) {
+    const name = voiceId.slice(7);
+    const data = await fetch(`samples/${name}.wav`).then(r => r.arrayBuffer());
+    return { audioData: data, audioType: "audio/wav", fileName: `${name}.wav`, name: name.replace("_", " ") };
+  }
+  const voices = await getVoices();
+  const v = voices.find(x => x.id === voiceId);
+  if (!v) throw new Error("Voice not found");
+  return v;
+}
+
+// Run one OmniVoice clone request, resolve to the generated audio URL.
+async function omniClone(text, voice, lang, steps, speed) {
+  const blob = new Blob([voice.audioData], { type: voice.audioType || "audio/mpeg" });
+  const form = new FormData();
+  form.append("files", blob, voice.fileName);
+  const uploadRes = await fetch(`${OMNIVOICE_BASE}/upload`, {
+    method: "POST",
+    headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
+    body: form
+  });
+  const [uploadPath] = await uploadRes.json();
+
+  const sessionHash = crypto.randomUUID();
+  const joinRes = await fetch(`${OMNIVOICE_BASE}/queue/join`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}) },
+    body: JSON.stringify({
+      data: [text, lang,
+        { path: uploadPath, meta: { _type: "gradio.FileData" }, orig_name: voice.fileName },
+        "", "", steps, 2.0, true, speed, 0, true, true],
+      fn_index: 0, session_hash: sessionHash
+    })
+  });
+  if (!joinRes.ok) throw new Error(`Queue join failed: ${joinRes.status}`);
+
+  const streamRes = await fetch(`${OMNIVOICE_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 === "process_completed") {
+        if (data.success) return data.output.data[0].url;
+        throw new Error(data.output?.error || "Generation failed");
+      }
+    }
+  }
+  throw new Error("Stream ended without result");
+}
+
+// Combine remote audio URLs into a single mono MP3 blob.
+async function combineToMp3(urls, gapSec = 0.4) {
+  const ctx = new (window.AudioContext || window.webkitAudioContext)();
+  try {
+    const buffers = [];
+    for (const url of urls) {
+      const ab = await fetch(url).then(r => r.arrayBuffer());
+      buffers.push(await ctx.decodeAudioData(ab));
+    }
+    const sr = ctx.sampleRate;
+    const gap = Math.round(gapSec * sr);
+    let total = 0;
+    buffers.forEach((b, i) => { total += b.length + (i < buffers.length - 1 ? gap : 0); });
+    const mono = new Float32Array(total);
+    let off = 0;
+    buffers.forEach((b, i) => {
+      const ch0 = b.getChannelData(0);
+      if (b.numberOfChannels > 1) {
+        const ch1 = b.getChannelData(1);
+        for (let j = 0; j < b.length; j++) mono[off + j] = (ch0[j] + ch1[j]) / 2;
+      } else {
+        mono.set(ch0, off);
+      }
+      off += b.length + (i < buffers.length - 1 ? gap : 0);
+    });
+    const int16 = new Int16Array(mono.length);
+    for (let i = 0; i < mono.length; i++) {
+      const s = Math.max(-1, Math.min(1, mono[i]));
+      int16[i] = s < 0 ? s * 32768 : s * 32767;
+    }
+    const lamejs = await import("https://esm.sh/@breezystack/lamejs@1.2.7");
+    const enc = new lamejs.Mp3Encoder(1, sr, 128);
+    const block = 1152;
+    const parts = [];
+    for (let i = 0; i < int16.length; i += block) {
+      const mp3 = enc.encodeBuffer(int16.subarray(i, i + block));
+      if (mp3.length > 0) parts.push(new Uint8Array(mp3));
+    }
+    const end = enc.flush();
+    if (end.length > 0) parts.push(new Uint8Array(end));
+    const durSec = total / sr;
+    return { blob: new Blob(parts, { type: "audio/mpeg" }), durSec };
+  } finally {
+    ctx.close();
+  }
+}
+
+window.generateAudiobook = async function() {
+  if (!abSegments.length) return;
+  const lang = document.getElementById("ab-lang-select").value;
+  const defaultVoiceId = document.getElementById("ab-default-voice").value;
+  const btn = document.getElementById("ab-generate-btn");
+  const progressBar = document.getElementById("ab-progress-bar");
+  const progressFill = document.getElementById("ab-progress-fill");
+  const result = document.getElementById("ab-result");
+  const statusEl = document.getElementById("ab-status");
+
+  btn.disabled = true;
+  btn.classList.add("loading");
+  result.classList.remove("visible");
+  progressBar.classList.add("visible");
+  progressFill.style.width = "0%";
+
+  const abShowStatus = (type, msg) => { statusEl.className = `status-bar visible ${type}`; statusEl.innerHTML = `<div class="status-text">${msg}</div>`; };
+  const t0 = Date.now();
+  try {
+    const urls = [];
+    for (let i = 0; i < abSegments.length; i++) {
+      const seg = abSegments[i];
+      seg.status = "active"; renderAbSegments();
+      abShowStatus("info", `Generating segment ${i + 1} of ${abSegments.length}…`);
+      try {
+        const voice = await resolveAbVoice(seg.voiceId || defaultVoiceId);
+        const url = await omniClone(seg.text, voice, lang, 32, 1.0);
+        seg.url = url; seg.status = "done"; urls.push(url);
+      } catch (err) {
+        seg.status = "error"; renderAbSegments();
+        abShowStatus("error", `Segment ${i + 1} failed: ${err.message}`);
+        if (statusEl.innerHTML && err.message.includes("GPU quota")) { await refreshQuota(); statusEl.innerHTML = quotaErrorBodyHtml(err.message); statusEl.className = "status-bar visible error"; }
+        return;
+      }
+      renderAbSegments();
+      progressFill.style.width = `${Math.round(((i + 1) / abSegments.length) * 85)}%`;
+      refreshQuota();
+    }
+
+    abShowStatus("info", "Combining segments into one MP3…");
+    progressFill.style.width = "92%";
+    const { blob, durSec } = await combineToMp3(urls);
+    abResultBlob = blob;
+    if (abResultUrl) URL.revokeObjectURL(abResultUrl);
+    abResultUrl = URL.createObjectURL(blob);
+    progressFill.style.width = "100%";
+
+    document.getElementById("ab-audio-player").src = abResultUrl;
+    document.getElementById("ab-player-title").textContent = `Audiobook · ${abSegments.length} segment${abSegments.length > 1 ? "s" : ""}`;
+    document.getElementById("ab-player-meta").textContent = `${Math.round(durSec)}s · ${(blob.size / 1048576).toFixed(1)} MB MP3`;
+    result.classList.add("visible");
+    abShowStatus("success", `Audiobook ready in ${((Date.now() - t0) / 1000).toFixed(1)}s`);
+  } catch (err) {
+    abShowStatus("error", err.message);
+  } finally {
+    btn.disabled = false;
+    btn.classList.remove("loading");
+    setTimeout(() => { progressBar.classList.remove("visible"); }, 2000);
+  }
+};
+
+window.downloadAudiobook = function() {
+  if (!abResultBlob) return;
+  const a = document.createElement("a");
+  a.href = abResultUrl;
+  a.download = "audiobook.mp3";
+  a.click();
+};
+
+document.getElementById("ab-text").addEventListener("input", e => {
+  document.getElementById("ab-char-count").textContent = e.target.value.length;
+});
+
 // ── Player ──
 
 const audioEl = document.getElementById("audio-player");