Add live previews

app.py

@@ -138,6 +138,12 @@ def start_render_api(
         diffusion_steps=diffusion_steps,
         speed=speed,
     ):
+        if event.get("type") == "chapter_done" and event.get("output_path"):
+            filename = Path(str(event["output_path"])).name
+            event = {
+                **event,
+                "url": f"/files/{session_id}/renders/{filename}",
+            }
         captured.append(event)
         yield event
 

frontend/app.js

@@ -306,7 +306,7 @@ async function submitRender() {
       if (event.type !== "data") continue;
       const payload = event.data?.[0] ?? event.data;
       if (!payload) continue;
-      state.renderEvents.push(payload);
+      appendRenderEvent(payload);
       updateRenderState(payload);
       render();
     }
@@ -326,6 +326,9 @@ function updateRenderState(payload) {
       break;
     case "chapter_done":
       updateChapterDuration(payload.chapter_id, payload.duration_seconds);
+      updateChapterRenderUrl(payload.chapter_id, payload.url);
+      state.previewUrl = payload.url || state.previewUrl;
+      state.statusMessage = `Bound ${chapterTitle(payload.chapter_id)}. Listen while the next chapter renders.`;
       break;
     case "completed":
       state.renderResult = payload;
@@ -434,6 +437,38 @@ function updateChapterDuration(chapterId, seconds) {
   }
 }
 
+function updateChapterRenderUrl(chapterId, url) {
+  const chapter = state.chapters.find((item) => item.id === chapterId);
+  if (chapter && url) {
+    chapter.render_url = url;
+  }
+}
+
+function appendRenderEvent(payload) {
+  const stamped = {
+    ...payload,
+    received_at: payload.received_at || new Date().toISOString(),
+  };
+  const previous = state.renderEvents[state.renderEvents.length - 1];
+  if (previous && renderEventKey(previous) === renderEventKey(stamped)) {
+    return;
+  }
+  state.renderEvents.push(stamped);
+}
+
+function renderEventKey(event) {
+  return JSON.stringify({
+    type: event.type,
+    chapter_id: event.chapter_id,
+    chapter_title: event.chapter_title,
+    percent: event.percent,
+    duration_seconds: event.duration_seconds,
+    output_path: event.output_path,
+    url: event.url,
+    overall_progress: event.overall_progress,
+  });
+}
+
 function render() {
   const previousChapterListScrollTop = document.querySelector(".chapter-list")?.scrollTop ?? 0;
   const previousReadingContainer = document.querySelector("[data-reading-scroll]");
@@ -587,6 +622,7 @@ function renderConfigure() {
 function renderGenerate() {
   const included = includedChapters();
   const currentEvent = [...state.renderEvents].reverse().find((event) => event.type === "chapter_started");
+  const completedChapters = included.filter((chapter) => chapter.render_url);
   const currentId = currentEvent?.chapter_id;
   const doneCount = state.renderEvents.filter((event) => event.type === "chapter_done").length;
   const percent = currentEvent ? Math.round((currentEvent.overall_progress || 0) * 100) : state.renderResult ? 100 : 0;
@@ -650,6 +686,13 @@ function renderGenerate() {
         <div class="log">
           ${state.renderEvents.slice(-8).reverse().map(renderLogRow).join("") || `<div class="log-row"><span class="time">—</span><span>Waiting for render events…</span></div>`}
         </div>
+        <div class="panel-head" style="margin-top:18px;">
+          <h2 class="panel-title" style="font-size:19px;">Completed chapters</h2>
+        </div>
+        <div class="queue">
+          <div class="queue-head">Listen while rendering continues <span class="count">${completedChapters.length} ready</span></div>
+          ${completedChapters.length ? completedChapters.map(renderCompletedChapterRow).join("") : `<div class="log-row"><span class="time">—</span><span>No chapter audio ready yet.</span></div>`}
+        </div>
       </div>
     </div>
 
@@ -941,7 +984,7 @@ function renderQueueRow(chapter, currentId) {
 }
 
 function renderLogRow(event) {
-  const stamp = new Date().toLocaleTimeString();
+  const stamp = new Date(event.received_at || Date.now()).toLocaleTimeString();
   return `<div class="log-row ${event.type === "chapter_started" ? "current" : ""}"><span class="time">${stamp}</span><span>${escapeHtml(logMessage(event))}</span></div>`;
 }
 
@@ -951,8 +994,10 @@ function logMessage(event) {
       return `Began binding ${event.total_chapters} chapters`;
     case "chapter_started":
       return `Synthesising ${event.chapter_title}`;
+    case "chapter_progress":
+      return `${chapterTitle(event.chapter_id)} is still rendering`;
     case "chapter_done":
-      return `Bound ${event.chapter_id} · ${event.duration_seconds}s`;
+      return `Bound ${chapterTitle(event.chapter_id)} · ${event.duration_seconds}s`;
     case "completed":
       return "Completed audiobook render";
     case "cancelled":
@@ -962,6 +1007,18 @@ function logMessage(event) {
   }
 }
 
+function renderCompletedChapterRow(chapter) {
+  return `
+    <div class="completed-row">
+      <div>
+        <div class="queue-name">${escapeHtml(chapter.title)}</div>
+        <div class="queue-meta">${escapeHtml(`chapter ${chapter.n} · ${formatStamp(Number(chapter.duration_seconds || 0))}`)}</div>
+      </div>
+      <audio controls preload="metadata" src="${chapter.render_url}"></audio>
+    </div>
+  `;
+}
+
 function canStartRender() {
   if (!state.book) return false;
   if (!selectedChapterIds().length) return false;
@@ -987,6 +1044,11 @@ function activeNarratorName() {
   return narrator?.name || "Custom narrator";
 }
 
+function chapterTitle(chapterId) {
+  const chapter = state.chapters.find((item) => item.id === chapterId);
+  return chapter?.title || chapterId || "chapter";
+}
+
 function syncNarratorMetadata() {
   state.exportMetadata.narrator = `${activeNarratorName()} (OmniVoice)`;
 }

frontend/styles.css

@@ -916,6 +916,23 @@ select {
   color: var(--leather);
 }
 
+.completed-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
+  gap: 16px;
+  align-items: center;
+  padding: 12px 16px;
+  border-top: 1px solid rgba(135, 99, 39, 0.12);
+}
+
+.completed-row:first-of-type {
+  border-top: 0;
+}
+
+.completed-row audio {
+  width: 100%;
+}
+
 .time {
   color: var(--brassDeep);
   font-variant-numeric: tabular-nums;

tests/test_render_api.py

@@ -1,5 +1,8 @@
 import importlib
 import sys
+from types import SimpleNamespace
+
+import pytest
 
 import gradio as gr
 
@@ -13,3 +16,46 @@ def test_start_render_api_registers_one_streamed_output() -> None:
 
     assert dependency.get("outputs")
     assert len(dependency["outputs"]) == 1
+
+
+def test_start_render_api_adds_public_audio_url_to_completed_chapters(monkeypatch) -> None:
+    sys.modules.pop("app", None)
+    module = importlib.import_module("app")
+
+    class FakePipeline:
+        def get_job(self, session_id):
+            return SimpleNamespace(status="idle")
+
+        def render(self, **kwargs):
+            yield {
+                "type": "chapter_done",
+                "session_id": kwargs["session_id"],
+                "chapter_id": "c1",
+                "duration_seconds": 12,
+                "overall_progress": 0.5,
+                "output_path": "/tmp/scriptorium/session-a/renders/001-c1.wav",
+            }
+            yield {
+                "type": "completed",
+                "session_id": kwargs["session_id"],
+                "outputs": ["/tmp/scriptorium/session-a/renders/001-c1.wav"],
+            }
+
+    monkeypatch.setattr(module, "pipeline", FakePipeline())
+    monkeypatch.setattr(module, "_selected_book", lambda session_id, selected_ids: {"chapters": [{"id": "c1", "included": True}]})
+    monkeypatch.setattr(module, "_voice_config_for_backend", lambda voice_config, session_id: voice_config)
+    monkeypatch.setattr(module.store, "save_json", lambda *args, **kwargs: None)
+
+    events = list(
+        module.start_render_api(
+            session_id="session-a",
+            selected_chapter_ids=["c1"],
+            voice_config={"mode": "auto"},
+            diffusion_steps=32,
+            speed=1.0,
+        )
+    )
+
+    chapter_done = events[0]
+    assert chapter_done["type"] == "chapter_done"
+    assert chapter_done["url"] == "/files/session-a/renders/001-c1.wav"