First in space

README copy.md

@@ -0,0 +1,31 @@
+---
+title: Scriptorium
+emoji: 📚
+colorFrom: yellow
+colorTo: red
+sdk: gradio
+app_file: app.py
+python_version: 3.10
+pinned: false
+license: mit
+---
+
+# Scriptorium
+
+Public Hugging Face Space for turning EPUBs into audiobooks with OmniVoice TTS.
+
+## Runtime notes
+
+- Designed for a GPU-backed Gradio Space.
+- Public demo safeguards cap EPUB size, estimated runtime, preview length, and clone sample duration.
+- Outputs are session-scoped temporary files only.
+
+## Local development
+
+```bash
+python3 -m venv .venv
+source .venv/bin/activate
+pip install -r requirements.txt
+pytest -q
+python app.py
+```

app.py

@@ -0,0 +1,240 @@
+import os
+import shutil
+import socket
+from pathlib import Path
+from typing import Any, Dict, List, Optional
+
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import Server
+
+from backend.config import (
+    APP_TITLE,
+    MAX_PREVIEW_CHARACTERS,
+    MAX_REFERENCE_AUDIO_SECONDS,
+    SESSION_TTL_SECONDS,
+    TEMP_ROOT,
+)
+from backend.epub import EpubConfig, parse_epub
+from backend.export import export_audiobook
+from backend.input_files import resolve_uploaded_name, resolve_uploaded_path
+from backend.omnivoice_adapter import OmniVoiceAdapter
+from backend.render_pipeline import RenderPipeline
+from backend.session_store import SessionStore
+from backend.types import VoiceConfig
+
+
+ROOT = Path(__file__).parent
+FRONTEND_DIR = ROOT / "frontend"
+TEMP_ROOT.mkdir(parents=True, exist_ok=True)
+
+app = Server()
+app.title = APP_TITLE
+
+store = SessionStore(root=TEMP_ROOT, ttl_seconds=SESSION_TTL_SECONDS)
+synthesizer = OmniVoiceAdapter()
+pipeline = RenderPipeline(session_root=TEMP_ROOT, synthesizer=synthesizer)
+
+
+def _session_root(session_id: str) -> Path:
+    return store.ensure_session(session_id).root
+
+
+def _book_payload(session_id: str) -> Dict[str, Any]:
+    return store.load_json(session_id, "book.json")
+
+
+def _selected_book(session_id: str, selected_ids: List[str]) -> Dict[str, Any]:
+    book = _book_payload(session_id)
+    selected = set(selected_ids)
+    chapters = []
+    for chapter in book["chapters"]:
+        chapter = dict(chapter)
+        chapter["included"] = chapter["id"] in selected
+        chapters.append(chapter)
+    book["chapters"] = chapters
+    return book
+
+
+def _voice_config_for_backend(voice_config: Dict[str, Any], session_id: str) -> Dict[str, Any]:
+    config = dict(voice_config)
+    sample_path = config.get("samplePath") or config.get("sample_path")
+    if sample_path:
+        sample_file = resolve_uploaded_path(sample_path)
+        target = _session_root(session_id) / "uploads" / sample_file.name
+        shutil.copyfile(sample_file, target)
+        config["samplePath"] = str(target)
+    return config
+
+
+@app.api(name="parse_epub")
+def parse_epub_api(session_id: str, epub_file: str) -> Dict[str, Any]:
+    store.cleanup_expired()
+    session = store.ensure_session(session_id)
+    source = resolve_uploaded_path(epub_file)
+    upload_name = resolve_uploaded_name(epub_file)
+    if not source.exists():
+        raise ValueError("Uploaded EPUB file was not found")
+    target = session.root / "uploads" / upload_name
+    shutil.copyfile(source, target)
+    payload = parse_epub(target, config=EpubConfig())
+    store.save_json(session_id, "book.json", payload)
+    return payload
+
+
+@app.api(name="generate_preview")
+def generate_preview_api(
+    session_id: str,
+    chapter_id: str,
+    voice_config: Dict[str, Any],
+    diffusion_steps: int = 32,
+    speed: float = 1.0,
+) -> Dict[str, Any]:
+    book = _book_payload(session_id)
+    chapter = next((item for item in book["chapters"] if item["id"] == chapter_id), None)
+    if chapter is None:
+        raise ValueError("Chapter not found for preview")
+    text = str(chapter["text"])[:MAX_PREVIEW_CHARACTERS]
+    preview_path = _session_root(session_id) / "previews" / f"{chapter_id}.wav"
+    voice = _voice_config_for_backend(voice_config, session_id)
+    result = synthesizer.synthesize(
+        text=text,
+        output_path=preview_path,
+        voice_config=VoiceConfig.from_dict(voice),
+        diffusion_steps=diffusion_steps,
+        speed=speed,
+    )
+    return {
+        "url": f"/files/{session_id}/previews/{preview_path.name}",
+        "duration_seconds": result["duration_seconds"],
+        "backend": result["backend"],
+    }
+
+
+@app.api(name="start_render", concurrency_limit=1)
+def start_render_api(
+    session_id: str,
+    selected_chapter_ids: List[str],
+    voice_config: Dict[str, Any],
+    diffusion_steps: int = 32,
+    speed: float = 1.0,
+):
+    job = pipeline.get_job(session_id)
+    if job.status == "running":
+        raise ValueError("A render is already active for this session")
+
+    book = _selected_book(session_id, selected_chapter_ids)
+    voice = _voice_config_for_backend(voice_config, session_id)
+    captured: List[Dict[str, Any]] = []
+    for event in pipeline.render(
+        session_id=session_id,
+        book=book,
+        chapters=book["chapters"],
+        voice_config=voice,
+        diffusion_steps=diffusion_steps,
+        speed=speed,
+    ):
+        captured.append(event)
+        yield event
+
+    if captured and captured[-1]["type"] == "completed":
+        durations = {
+            event["chapter_id"]: event["duration_seconds"]
+            for event in captured
+            if event["type"] == "chapter_done"
+        }
+        manifest = {
+            "book": book,
+            "chapters": [
+                {
+                    **chapter,
+                    "duration_seconds": durations.get(chapter["id"], chapter.get("duration_seconds", 0)),
+                }
+                for chapter in book["chapters"]
+                if chapter.get("included")
+            ],
+            "render_result": captured[-1],
+        }
+        store.save_json(session_id, "render_manifest.json", manifest)
+
+
+@app.api(name="pause_render")
+def pause_render_api(session_id: str) -> Dict[str, Any]:
+    return pipeline.pause(session_id)
+
+
+@app.api(name="resume_render")
+def resume_render_api(session_id: str) -> Dict[str, Any]:
+    return pipeline.resume(session_id)
+
+
+@app.api(name="cancel_render")
+def cancel_render_api(session_id: str) -> Dict[str, Any]:
+    pipeline.cancel(session_id)
+    return {"type": "cancelled", "session_id": session_id}
+
+
+@app.api(name="export_audiobook")
+def export_audiobook_api(
+    session_id: str,
+    format: str = "m4a",
+    metadata: Dict[str, str] | None = None,
+    embed_markers: bool = True,
+) -> Dict[str, Any]:
+    manifest = store.load_json(session_id, "render_manifest.json")
+    export = export_audiobook(
+        session_root=_session_root(session_id),
+        chapters=manifest["chapters"],
+        output_format=format,
+        metadata=metadata or {},
+        embed_markers=embed_markers,
+        cover_path=None,
+    )
+    export["url"] = f"/files/{session_id}/exports/{Path(export['file']).name}"
+    return export
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage() -> HTMLResponse:
+    return HTMLResponse((FRONTEND_DIR / "index.html").read_text(encoding="utf-8"))
+
+
+@app.get("/health")
+async def health() -> Dict[str, str]:
+    return {"status": "ok"}
+
+
+@app.get("/files/{session_id}/{kind}/{filename}")
+async def serve_generated_file(session_id: str, kind: str, filename: str):
+    path = _session_root(session_id) / kind / filename
+    if not path.exists():
+        return JSONResponse({"error": "file not found"}, status_code=404)
+    return FileResponse(path)
+
+
+app.mount("/static", StaticFiles(directory=str(FRONTEND_DIR)), name="frontend-static")
+
+
+def _port_is_available(port: int, host: str = "127.0.0.1") -> bool:
+    with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as sock:
+        sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
+        return sock.connect_ex((host, port)) != 0
+
+
+def _choose_server_port(preferred: int = 7860, attempts: int = 10) -> int:
+    env_port = os.getenv("GRADIO_SERVER_PORT")
+    if env_port:
+        return int(env_port)
+    for port in range(preferred, preferred + attempts):
+        if _port_is_available(port):
+            return port
+    raise OSError(
+        f"Cannot find empty port in range: {preferred}-{preferred + attempts - 1}. "
+        "Set GRADIO_SERVER_PORT to override."
+    )
+
+
+if __name__ == "__main__":
+    server_port = _choose_server_port()
+    print(f"Starting {APP_TITLE} on port {server_port}")
+    app.launch(server_name="0.0.0.0", server_port=server_port)

backend/__init__.py

@@ -0,0 +1 @@
+"""Scriptorium backend package."""

backend/config.py

@@ -0,0 +1,11 @@
+from pathlib import Path
+
+
+APP_TITLE = "Scriptorium"
+TEMP_ROOT = Path("/tmp/scriptorium")
+MAX_EPUB_BYTES = 25 * 1024 * 1024
+MAX_REFERENCE_AUDIO_SECONDS = 30
+MAX_PREVIEW_CHARACTERS = 1800
+MAX_ESTIMATED_MINUTES = 12 * 60
+SESSION_TTL_SECONDS = 60 * 60
+CHARS_PER_MINUTE = 900

backend/epub.py

@@ -0,0 +1,159 @@
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Dict, Iterable, List, Optional, Union
+import re
+import zipfile
+
+from bs4 import BeautifulSoup
+from ebooklib import ITEM_DOCUMENT, epub
+
+from backend.config import CHARS_PER_MINUTE, MAX_EPUB_BYTES, MAX_ESTIMATED_MINUTES
+from backend.types import Chapter
+
+
+@dataclass
+class EpubConfig:
+    max_file_bytes: int = MAX_EPUB_BYTES
+    chars_per_minute: int = CHARS_PER_MINUTE
+    max_estimated_minutes: int = MAX_ESTIMATED_MINUTES
+
+
+def _clean_text(raw_html: str) -> str:
+    soup = BeautifulSoup(raw_html, "html.parser")
+    text = soup.get_text("\n", strip=True)
+    text = re.sub(r"\n{3,}", "\n\n", text)
+    return text.strip()
+
+
+def _chapter_title(item: epub.EpubItem, text: str, index: int) -> str:
+    soup = BeautifulSoup(item.get_content(), "html.parser")
+    heading = soup.find(["h1", "h2", "title"])
+    if heading and heading.get_text(strip=True):
+        return heading.get_text(strip=True)
+    if item.title:
+        return str(item.title)
+    first_line = text.splitlines()[0].strip() if text.splitlines() else ""
+    return first_line[:80] or f"Chapter {index + 1}"
+
+
+def _iter_spine_documents(book: epub.EpubBook) -> Iterable[epub.EpubItem]:
+    seen = set()
+    for spine_item in book.spine:
+        item_id = spine_item[0] if isinstance(spine_item, tuple) else spine_item
+        if item_id == "nav":
+            continue
+        item = book.get_item_with_id(item_id)
+        if item is None:
+            continue
+        seen.add(item.get_id())
+        yield item
+    for item in book.get_items_of_type(ITEM_DOCUMENT):
+        if item.get_id() in seen:
+            continue
+        if item.get_id() == "nav" or getattr(item, "file_name", "") == "nav.xhtml":
+            continue
+        yield item
+
+
+def _metadata_first(book: epub.EpubBook, name: str) -> Optional[str]:
+    values = book.get_metadata("DC", name)
+    if not values:
+        return None
+    value = values[0][0]
+    return str(value).strip() if value else None
+
+
+def _validate_epub_container(path: Path) -> None:
+    if not zipfile.is_zipfile(path):
+        raise ValueError("Invalid EPUB: uploaded file is not a valid zip container")
+    try:
+        with zipfile.ZipFile(path) as archive:
+            names = set(archive.namelist())
+            mimetype = None
+            if "mimetype" in names:
+                mimetype = archive.read("mimetype").decode("utf-8", errors="ignore").strip()
+            has_container = "META-INF/container.xml" in names
+    except zipfile.BadZipFile as exc:
+        raise ValueError("Invalid EPUB: could not read zip container") from exc
+
+    if mimetype == "application/epub+zip" or has_container:
+        return
+    raise ValueError("Invalid EPUB: missing EPUB container metadata")
+
+
+def parse_epub(epub_path: Union[Path, str], config: Optional[EpubConfig] = None) -> Dict[str, object]:
+    config = config or EpubConfig()
+    path = Path(epub_path)
+    if not path.exists():
+        raise ValueError("Invalid EPUB: file does not exist")
+    if path.stat().st_size > config.max_file_bytes:
+        raise ValueError("EPUB upload too large")
+    _validate_epub_container(path)
+
+    try:
+        book = epub.read_epub(str(path))
+    except Exception as exc:  # pragma: no cover - exercised by malformed input
+        raise ValueError("Invalid EPUB: could not parse file") from exc
+
+    chapters: List[Chapter] = []
+    for index, item in enumerate(_iter_spine_documents(book)):
+        text = _clean_text(item.get_content())
+        if not text:
+            continue
+        chars = len(text)
+        est_minutes = max(1, round(chars / config.chars_per_minute))
+        chapters.append(
+            Chapter(
+                id=item.get_id() or f"chapter-{index + 1}",
+                label=_roman(index + 1),
+                title=_chapter_title(item, text, index),
+                text=text,
+                chars=chars,
+                est_minutes=est_minutes,
+            )
+        )
+
+    if not chapters:
+        raise ValueError("Invalid EPUB: no readable chapters found")
+
+    total_minutes = sum(ch.est_minutes for ch in chapters)
+    if total_minutes > config.max_estimated_minutes:
+        raise ValueError("EPUB exceeds maximum supported runtime")
+
+    title = _metadata_first(book, "title") or path.stem.replace("-", " ").title()
+    author = _metadata_first(book, "creator") or "Unknown author"
+    language = _metadata_first(book, "language") or "Unknown language"
+    rights = _metadata_first(book, "rights") or "Rights unknown"
+
+    return {
+        "title": title,
+        "author": author,
+        "meta": f"{language.upper()} \u00b7 {rights}",
+        "cover_url": None,
+        "chapters": [chapter.to_dict() for chapter in chapters],
+        "estimated_minutes": total_minutes,
+    }
+
+
+def _roman(number: int) -> str:
+    numerals = (
+        (1000, "m"),
+        (900, "cm"),
+        (500, "d"),
+        (400, "cd"),
+        (100, "c"),
+        (90, "xc"),
+        (50, "l"),
+        (40, "xl"),
+        (10, "x"),
+        (9, "ix"),
+        (5, "v"),
+        (4, "iv"),
+        (1, "i"),
+    )
+    result = []
+    remainder = number
+    for value, numeral in numerals:
+        count, remainder = divmod(remainder, value)
+        result.append(numeral * count)
+    return "".join(result)

backend/export.py

@@ -0,0 +1,179 @@
+import json
+import shutil
+import subprocess
+import wave
+import zipfile
+from pathlib import Path
+from typing import Dict, Iterable, List, Tuple
+
+from mutagen.easyid3 import EasyID3
+from mutagen.id3 import ID3, APIC, TIT2, TPE1
+
+
+def export_audiobook(
+    *,
+    session_root: Path,
+    chapters: List[Dict[str, object]],
+    output_format: str,
+    metadata: Dict[str, str],
+    embed_markers: bool,
+    cover_path: Path | None = None,
+) -> Dict[str, object]:
+    exports_dir = session_root / "exports"
+    exports_dir.mkdir(parents=True, exist_ok=True)
+    rendered = _rendered_files(session_root)
+    if not rendered:
+        raise ValueError("No rendered chapters available for export")
+
+    if output_format == "zip":
+        archive = exports_dir / "reading-room-chapters.zip"
+        with zipfile.ZipFile(archive, "w", compression=zipfile.ZIP_DEFLATED) as zf:
+            for source in rendered:
+                zf.write(source, arcname=source.name)
+        return {"file": str(archive), "format": "zip", "size_bytes": archive.stat().st_size}
+
+    base_wav = exports_dir / "reading-room.wav"
+    total_seconds = _concat_wav(rendered, base_wav)
+    chapter_offsets = _chapter_offsets(chapters)
+
+    if output_format == "m4a":
+        output = exports_dir / "reading-room.m4a"
+        _ffmpeg_transcode(
+            source=base_wav,
+            target=output,
+            codec_args=["-c:a", "aac", "-b:a", "96k"],
+            metadata=metadata,
+            chapter_offsets=chapter_offsets if embed_markers else None,
+        )
+    elif output_format == "mp3":
+        output = exports_dir / "reading-room.mp3"
+        _ffmpeg_transcode(
+            source=base_wav,
+            target=output,
+            codec_args=["-c:a", "libmp3lame", "-b:a", "128k"],
+            metadata=metadata,
+            chapter_offsets=None,
+        )
+        _tag_mp3(output, metadata, cover_path)
+    else:
+        raise ValueError("Unsupported export format")
+
+    return {
+        "file": str(output),
+        "format": output_format,
+        "runtime_seconds": total_seconds,
+        "size_bytes": output.stat().st_size,
+        "chapter_count": len(chapters),
+    }
+
+
+def _rendered_files(session_root: Path) -> List[Path]:
+    render_dir = session_root / "renders"
+    return sorted(render_dir.glob("*.wav"))
+
+
+def _concat_wav(inputs: Iterable[Path], output: Path) -> int:
+    inputs = list(inputs)
+    params = None
+    total_frames = 0
+    frames: List[bytes] = []
+    for wav_path in inputs:
+        with wave.open(str(wav_path), "rb") as handle:
+            if params is None:
+                params = handle.getparams()
+            elif handle.getframerate() != params.framerate:
+                raise ValueError("Mismatched sample rates across rendered chapters")
+            chunk = handle.readframes(handle.getnframes())
+            frames.append(chunk)
+            total_frames += handle.getnframes()
+
+    if params is None:
+        raise ValueError("No WAV inputs to concatenate")
+
+    with wave.open(str(output), "wb") as handle:
+        handle.setparams(params)
+        for chunk in frames:
+            handle.writeframes(chunk)
+
+    return int(total_frames / params.framerate)
+
+
+def _ffmpeg_transcode(
+    *,
+    source: Path,
+    target: Path,
+    codec_args: List[str],
+    metadata: Dict[str, str],
+    chapter_offsets: List[Tuple[str, int, int]] | None,
+) -> None:
+    target.parent.mkdir(parents=True, exist_ok=True)
+    ffmetadata_path = None
+    cmd = ["ffmpeg", "-y", "-i", str(source)]
+    if chapter_offsets:
+        ffmetadata_path = target.with_suffix(".ffmeta")
+        ffmetadata_path.write_text(_ffmetadata(metadata, chapter_offsets), encoding="utf-8")
+        cmd.extend(["-i", str(ffmetadata_path), "-map_metadata", "1"])
+    else:
+        for key, value in metadata.items():
+            cmd.extend(["-metadata", f"{key}={value}"])
+    cmd.extend(codec_args)
+    cmd.append(str(target))
+    subprocess.run(cmd, check=True, capture_output=True)
+
+
+def _ffmetadata(metadata: Dict[str, str], chapter_offsets: List[Tuple[str, int, int]]) -> str:
+    lines = [";FFMETADATA1"]
+    for key, value in metadata.items():
+        lines.append(f"{key}={value}")
+    for title, start, end in chapter_offsets:
+        lines.extend(
+            [
+                "[CHAPTER]",
+                "TIMEBASE=1/1000",
+                f"START={start}",
+                f"END={end}",
+                f"title={title}",
+            ]
+        )
+    return "\n".join(lines)
+
+
+def _chapter_offsets(chapters: List[Dict[str, object]]) -> List[Tuple[str, int, int]]:
+    offsets = []
+    start_ms = 0
+    for chapter in chapters:
+        duration_ms = int(chapter.get("duration_seconds", 0) * 1000)
+        offsets.append((str(chapter["title"]), start_ms, start_ms + duration_ms))
+        start_ms += duration_ms
+    return offsets
+
+
+def _tag_mp3(path: Path, metadata: Dict[str, str], cover_path: Path | None) -> None:
+    try:
+        tags = EasyID3(str(path))
+    except Exception:
+        tags = EasyID3()
+        tags.save(str(path))
+        tags = EasyID3(str(path))
+    if metadata.get("title"):
+        tags["title"] = [metadata["title"]]
+    if metadata.get("artist"):
+        tags["artist"] = [metadata["artist"]]
+    tags.save()
+
+    if cover_path and cover_path.exists():
+        audio = ID3(str(path))
+        audio.add(
+            APIC(
+                encoding=3,
+                mime="image/jpeg",
+                type=3,
+                desc="Cover",
+                data=cover_path.read_bytes(),
+            )
+        )
+        if metadata.get("title"):
+            audio.add(TIT2(encoding=3, text=metadata["title"]))
+        if metadata.get("artist"):
+            audio.add(TPE1(encoding=3, text=metadata["artist"]))
+        audio.save(str(path))

backend/input_files.py

@@ -0,0 +1,35 @@
+from pathlib import Path
+from typing import Any
+
+
+def resolve_uploaded_path(uploaded: Any) -> Path:
+    if isinstance(uploaded, Path):
+        return uploaded
+    if isinstance(uploaded, str):
+        return Path(uploaded)
+    if isinstance(uploaded, dict):
+        for key in ("path", "orig_name", "name"):
+            value = uploaded.get(key)
+            if isinstance(value, str) and value:
+                return Path(value)
+    raise TypeError(
+        f"Unsupported uploaded file payload: expected path-like value or Gradio file dict, got {type(uploaded).__name__}"
+    )
+
+
+def resolve_uploaded_name(uploaded: Any) -> str:
+    if isinstance(uploaded, Path):
+        return uploaded.name
+    if isinstance(uploaded, str):
+        return Path(uploaded).name
+    if isinstance(uploaded, dict):
+        for key in ("orig_name", "name"):
+            value = uploaded.get(key)
+            if isinstance(value, str) and value:
+                return Path(value).name
+        path_value = uploaded.get("path")
+        if isinstance(path_value, str) and path_value:
+            return Path(path_value).name
+    raise TypeError(
+        f"Unsupported uploaded file payload: expected path-like value or Gradio file dict, got {type(uploaded).__name__}"
+    )

backend/omnivoice_adapter.py

@@ -0,0 +1,128 @@
+import math
+from pathlib import Path
+from typing import Dict, Optional
+
+import numpy as np
+import soundfile as sf
+
+from backend.types import VoiceConfig
+
+
+NARRATOR_PRESETS = {
+    "brother-anselm": "male, warm baritone, measured, british accent",
+    "dame-eglantine": "female, bright contralto, lyrical, british accent",
+    "the-reeve": "male, gravelly bass, wry, british accent",
+    "sister-cecilia": "female, clear soprano, gentle, british accent",
+}
+
+
+class OmniVoiceAdapter:
+    def __init__(
+        self,
+        model_id: str = "k2-fsa/OmniVoice",
+        device_map: str = "cuda:0",
+        dtype_name: str = "float16",
+    ) -> None:
+        self.model_id = model_id
+        self.device_map = device_map
+        self.dtype_name = dtype_name
+        self._model = None
+        self._backend = "fallback"
+
+    def _load_model(self):
+        if self._model is not None:
+            return self._model
+        try:
+            import torch
+            from omnivoice import OmniVoice
+        except Exception:
+            self._backend = "fallback"
+            return None
+
+        dtype = getattr(torch, self.dtype_name)
+        self._model = OmniVoice.from_pretrained(
+            self.model_id,
+            device_map=self.device_map,
+            dtype=dtype,
+        )
+        self._backend = "omnivoice"
+        return self._model
+
+    def synthesize(
+        self,
+        *,
+        text: str,
+        output_path: Path,
+        voice_config: VoiceConfig,
+        diffusion_steps: int,
+        speed: float,
+        language: Optional[str] = None,
+    ) -> Dict[str, object]:
+        output_path.parent.mkdir(parents=True, exist_ok=True)
+        model = self._load_model()
+        if model is None:
+            return self._synthesize_fallback(
+                text=text,
+                output_path=output_path,
+                voice_config=voice_config,
+                speed=speed,
+            )
+
+        kwargs = {
+            "text": text,
+            "num_step": diffusion_steps,
+            "speed": speed,
+        }
+        if language:
+            kwargs["language"] = language
+
+        if voice_config.mode == "clone":
+            kwargs["ref_audio"] = voice_config.sample_path
+            if voice_config.reference_text:
+                kwargs["ref_text"] = voice_config.reference_text
+        elif voice_config.mode == "design":
+            kwargs["instruct"] = voice_config.design_prompt
+        elif voice_config.narrator_id:
+            kwargs["instruct"] = NARRATOR_PRESETS.get(voice_config.narrator_id)
+
+        audio = model.generate(**kwargs)
+        waveform = np.asarray(audio[0], dtype=np.float32)
+        sample_rate = 24000
+        sf.write(str(output_path), waveform, sample_rate)
+        duration_seconds = int(round(len(waveform) / sample_rate))
+        return {
+            "duration_seconds": max(1, duration_seconds),
+            "sample_rate": sample_rate,
+            "backend": self._backend,
+        }
+
+    def _synthesize_fallback(
+        self,
+        *,
+        text: str,
+        output_path: Path,
+        voice_config: VoiceConfig,
+        speed: float,
+    ) -> Dict[str, object]:
+        sample_rate = 24000
+        duration_seconds = max(1.0, min(20.0, len(text.split()) / max(speed, 0.5) * 0.45))
+        total_samples = int(sample_rate * duration_seconds)
+        base_freq = 180.0
+        if voice_config.mode == "design":
+            base_freq = 220.0
+        elif voice_config.mode == "clone":
+            base_freq = 140.0
+        elif voice_config.narrator_id:
+            base_freq = 160.0 + (list(NARRATOR_PRESETS.keys()).index(voice_config.narrator_id) * 20)
+
+        timeline = np.linspace(0, duration_seconds, total_samples, endpoint=False)
+        waveform = (
+            0.15 * np.sin(2 * math.pi * base_freq * timeline)
+            + 0.05 * np.sin(2 * math.pi * (base_freq / 2.0) * timeline)
+        ).astype(np.float32)
+        sf.write(str(output_path), waveform, sample_rate)
+        return {
+            "duration_seconds": int(round(duration_seconds)),
+            "sample_rate": sample_rate,
+            "backend": self._backend,
+        }

backend/render_pipeline.py

@@ -0,0 +1,113 @@
+from pathlib import Path
+from typing import Dict, Iterable, List, Optional
+
+from backend.types import RenderArtifact, RenderJob, VoiceConfig
+
+
+class RenderPipeline:
+    def __init__(self, session_root: Path, synthesizer) -> None:
+        self.session_root = Path(session_root)
+        self.session_root.mkdir(parents=True, exist_ok=True)
+        self.synthesizer = synthesizer
+        self._jobs: Dict[str, RenderJob] = {}
+        self._cancelled: set[str] = set()
+        self._paused: set[str] = set()
+
+    def get_job(self, session_id: str) -> RenderJob:
+        return self._jobs.setdefault(session_id, RenderJob(session_id=session_id))
+
+    def cancel(self, session_id: str) -> None:
+        self._cancelled.add(session_id)
+        self.get_job(session_id).status = "cancelled"
+
+    def pause(self, session_id: str) -> Dict[str, object]:
+        self._paused.add(session_id)
+        self.get_job(session_id).status = "paused"
+        return {"type": "paused", "session_id": session_id}
+
+    def resume(self, session_id: str) -> Dict[str, object]:
+        self._paused.discard(session_id)
+        self.get_job(session_id).status = "running"
+        return {"type": "resumed", "session_id": session_id}
+
+    def render(
+        self,
+        *,
+        session_id: str,
+        book: Dict[str, object],
+        chapters: List[Dict[str, object]],
+        voice_config: Dict[str, object],
+        diffusion_steps: int,
+        speed: float,
+    ) -> Iterable[Dict[str, object]]:
+        selected = [chapter for chapter in chapters if chapter.get("included", True)]
+        job = self.get_job(session_id)
+        job.status = "running"
+        job.outputs.clear()
+
+        yield {
+            "type": "started",
+            "session_id": session_id,
+            "total_chapters": len(selected),
+            "book_title": book.get("title"),
+        }
+
+        voice = VoiceConfig.from_dict(voice_config)
+        render_dir = self.session_root / session_id / "renders"
+        render_dir.mkdir(parents=True, exist_ok=True)
+
+        for index, chapter in enumerate(selected):
+            if session_id in self._cancelled:
+                yield {"type": "cancelled", "session_id": session_id}
+                self._cancelled.discard(session_id)
+                job.status = "cancelled"
+                return
+
+            chapter_id = str(chapter["id"])
+            job.current_chapter_id = chapter_id
+            yield {
+                "type": "chapter_started",
+                "session_id": session_id,
+                "chapter_id": chapter_id,
+                "chapter_title": chapter["title"],
+                "chapter_index": index,
+                "overall_progress": index / max(1, len(selected)),
+            }
+
+            output_path = render_dir / f"{index + 1:03d}-{chapter_id}.wav"
+            result = self.synthesizer.synthesize(
+                text=str(chapter["text"]),
+                output_path=output_path,
+                voice_config=voice,
+                diffusion_steps=diffusion_steps,
+                speed=speed,
+            )
+
+            yield {
+                "type": "chapter_progress",
+                "session_id": session_id,
+                "chapter_id": chapter_id,
+                "percent": 100,
+            }
+
+            artifact = RenderArtifact(
+                path=output_path,
+                duration_seconds=int(result.get("duration_seconds", 0)),
+                chapter_id=chapter_id,
+            )
+            job.outputs.append(artifact)
+            yield {
+                "type": "chapter_done",
+                "session_id": session_id,
+                "chapter_id": chapter_id,
+                "duration_seconds": artifact.duration_seconds,
+                "overall_progress": (index + 1) / max(1, len(selected)),
+                "output_path": str(output_path),
+            }
+
+        job.status = "completed"
+        yield {
+            "type": "completed",
+            "session_id": session_id,
+            "outputs": [str(artifact.path) for artifact in job.outputs],
+        }

backend/session_store.py

@@ -0,0 +1,67 @@
+import shutil
+import time
+import json
+from pathlib import Path
+from typing import Any, Dict, List, Optional
+
+from backend.types import SessionRecord
+
+
+class SessionStore:
+    def __init__(self, root: Path, ttl_seconds: int) -> None:
+        self.root = Path(root)
+        self.ttl_seconds = ttl_seconds
+        self.root.mkdir(parents=True, exist_ok=True)
+        self._sessions: Dict[str, SessionRecord] = {}
+
+    def _now(self) -> float:
+        return time.time()
+
+    def ensure_session(self, session_id: str) -> SessionRecord:
+        now = self._now()
+        session_root = self.root / session_id
+        session_root.mkdir(parents=True, exist_ok=True)
+        for child in ("uploads", "previews", "renders", "exports"):
+            (session_root / child).mkdir(exist_ok=True)
+        existing = self._sessions.get(session_id)
+        if existing is None:
+            existing = SessionRecord(
+                session_id=session_id,
+                root=session_root,
+                created_at=now,
+                touched_at=now,
+            )
+            self._sessions[session_id] = existing
+        else:
+            existing.touched_at = now
+        return existing
+
+    def touch(self, session_id: str) -> SessionRecord:
+        session = self.ensure_session(session_id)
+        session.touched_at = self._now()
+        return session
+
+    def save_json(self, session_id: str, name: str, payload: Dict[str, Any]) -> Path:
+        session = self.touch(session_id)
+        path = session.root / name
+        path.write_text(json.dumps(payload, ensure_ascii=True, indent=2), encoding="utf-8")
+        return path
+
+    def load_json(self, session_id: str, name: str) -> Dict[str, Any]:
+        session = self.touch(session_id)
+        path = session.root / name
+        if not path.exists():
+            raise FileNotFoundError(f"Session asset not found: {name}")
+        return json.loads(path.read_text(encoding="utf-8"))
+
+    def cleanup_expired(self, now: Optional[float] = None) -> List[str]:
+        current = self._now() if now is None else now
+        removed: List[str] = []
+        for session_id, record in list(self._sessions.items()):
+            if current - record.touched_at <= self.ttl_seconds:
+                continue
+            if record.root.exists():
+                shutil.rmtree(record.root)
+            removed.append(session_id)
+            del self._sessions[session_id]
+        return removed

backend/types.py

@@ -0,0 +1,66 @@
+from dataclasses import asdict, dataclass, field
+from pathlib import Path
+from typing import Any, Dict, List, Optional
+
+
+JsonDict = Dict[str, Any]
+
+
+@dataclass
+class Chapter:
+    id: str
+    label: str
+    title: str
+    text: str
+    chars: int
+    est_minutes: int
+    included: bool = True
+    start_seconds: int = 0
+
+    def to_dict(self) -> JsonDict:
+        data = asdict(self)
+        data["n"] = data["label"]
+        return data
+
+
+@dataclass
+class SessionRecord:
+    session_id: str
+    root: Path
+    created_at: float
+    touched_at: float
+
+
+@dataclass
+class VoiceConfig:
+    mode: str
+    narrator_id: Optional[str] = None
+    sample_path: Optional[str] = None
+    reference_text: Optional[str] = None
+    design_prompt: Optional[str] = None
+
+    @classmethod
+    def from_dict(cls, data: JsonDict) -> "VoiceConfig":
+        return cls(
+            mode=data.get("mode", "auto"),
+            narrator_id=data.get("narratorId") or data.get("narrator_id"),
+            sample_path=data.get("samplePath") or data.get("sample_path"),
+            reference_text=data.get("referenceText") or data.get("reference_text"),
+            design_prompt=data.get("designPrompt") or data.get("design_prompt"),
+        )
+
+
+@dataclass
+class RenderArtifact:
+    path: Path
+    duration_seconds: int
+    chapter_id: str
+
+
+@dataclass
+class RenderJob:
+    session_id: str
+    status: str = "idle"
+    current_chapter_id: Optional[str] = None
+    outputs: List[RenderArtifact] = field(default_factory=list)
+

frontend/app.js

@@ -0,0 +1,985 @@
+import { Client, handle_file } from "https://esm.sh/@gradio/client";
+
+const NARRATORS = [
+  { id: "brother-anselm", name: "The Archivist", desc: "OmniVoice preset · warm baritone · measured", initial: "A" },
+  { id: "dame-eglantine", name: "Lady Meridian", desc: "OmniVoice preset · bright contralto · lyrical", initial: "M" },
+  { id: "the-reeve", name: "North Bell", desc: "OmniVoice preset · gravelled bass · wry", initial: "N" },
+  { id: "sister-cecilia", name: "Cecilia of the Lamp", desc: "OmniVoice preset · clear soprano · gentle", initial: "C" },
+];
+
+const VOICE_WARNING =
+  "Use clone mode only with audio you have the right to use. Unauthorized voice cloning, impersonation, fraud, or scams are prohibited.";
+
+const state = {
+  client: null,
+  sessionId: crypto.randomUUID ? crypto.randomUUID() : `session-${Date.now()}`,
+  step: "configure",
+  book: null,
+  chapters: [],
+  currentChapterId: null,
+  voiceMode: "auto",
+  narratorId: "brother-anselm",
+  cloneConsent: false,
+  cloneSampleFile: null,
+  cloneReferenceText: "",
+  designPrompt: "",
+  diffusionSteps: 32,
+  speed: 1,
+  statusMessage: "",
+  errorMessage: "",
+  renderStatus: null,
+  renderEvents: [],
+  renderResult: null,
+  renderSubmission: null,
+  previewUrl: "",
+  exportFormat: "m4a",
+  embedMarkers: true,
+  exportFile: null,
+  exportMetadata: {
+    title: "",
+    author: "",
+    narrator: "Brother Anselm (OmniVoice)",
+    genre: "Audiobook",
+  },
+};
+
+const appRoot = document.getElementById("app");
+
+function main() {
+  bindGlobalEvents();
+  connectClient()
+    .catch((error) => {
+      state.errorMessage = error.message;
+    })
+    .finally(() => {
+      render();
+    });
+}
+
+async function connectClient() {
+  state.statusMessage = "Connecting to the Gradio backend…";
+  render();
+  state.client = await Client.connect(window.location.origin, {
+    events: ["data", "status"],
+  });
+  state.statusMessage = "Connected. Upload an EPUB to begin.";
+}
+
+function bindGlobalEvents() {
+  window.addEventListener("click", handleClick);
+  window.addEventListener("change", handleChange);
+  window.addEventListener("input", handleInput);
+}
+
+function handleClick(event) {
+  const target = event.target.closest("[data-action]");
+  if (!target) return;
+  const action = target.dataset.action;
+  void actionHandlers[action]?.(target, event);
+}
+
+function handleChange(event) {
+  const target = event.target;
+  if (target.matches("[data-chapter-toggle]")) {
+    const id = target.dataset.chapterToggle;
+    const chapter = state.chapters.find((item) => item.id === id);
+    if (chapter) {
+      chapter.included = target.checked;
+      render();
+    }
+    return;
+  }
+  if (target.matches("#epub-input")) {
+    void uploadEpub(target.files?.[0]);
+    return;
+  }
+  if (target.matches("#clone-audio")) {
+    state.cloneSampleFile = target.files?.[0] || null;
+    render();
+    return;
+  }
+  if (target.matches("[data-format]")) {
+    state.exportFormat = target.dataset.format;
+    render();
+    return;
+  }
+  if (target.matches("#embed-markers")) {
+    state.embedMarkers = target.checked;
+    render();
+  }
+}
+
+function handleInput(event) {
+  const target = event.target;
+  if (target.matches("#diffusion-steps")) {
+    state.diffusionSteps = Number(target.value);
+    render();
+    return;
+  }
+  if (target.matches("#reading-speed")) {
+    state.speed = Number(target.value);
+    render();
+    return;
+  }
+  if (target.matches("#clone-ref-text")) {
+    state.cloneReferenceText = target.value;
+    return;
+  }
+  if (target.matches("#design-prompt")) {
+    state.designPrompt = target.value;
+    return;
+  }
+  if (target.matches("#clone-consent")) {
+    state.cloneConsent = target.checked;
+    render();
+    return;
+  }
+  if (target.matches("[data-meta]")) {
+    state.exportMetadata[target.dataset.meta] = target.value;
+  }
+}
+
+const actionHandlers = {
+  async pickNarrator(target) {
+    state.narratorId = target.dataset.id;
+    syncNarratorMetadata();
+    render();
+  },
+  setVoiceMode(target) {
+    state.voiceMode = target.dataset.mode;
+    if (state.voiceMode === "auto") {
+      syncNarratorMetadata();
+    } else if (state.voiceMode === "clone") {
+      state.exportMetadata.narrator = "Cloned Narrator (OmniVoice)";
+    } else {
+      state.exportMetadata.narrator = "Designed Narrator (OmniVoice)";
+    }
+    render();
+  },
+  focusChapter(target) {
+    state.currentChapterId = target.dataset.id;
+    render();
+  },
+  async previewChapter(target) {
+    const chapterId = target.dataset.id;
+    await requestPreview(chapterId);
+  },
+  async startRender() {
+    await submitRender();
+  },
+  async pauseRender() {
+    await callPredict("/pause_render", { session_id: state.sessionId });
+    state.statusMessage = "Render paused. Resume when ready.";
+    render();
+  },
+  async resumeRender() {
+    await callPredict("/resume_render", { session_id: state.sessionId });
+    state.statusMessage = "Render resumed.";
+    render();
+  },
+  async cancelRender() {
+    await callPredict("/cancel_render", { session_id: state.sessionId });
+    state.renderSubmission?.cancel?.();
+    state.renderSubmission = null;
+    state.renderStatus = { status: "cancelled" };
+    state.step = "configure";
+    state.statusMessage = "Render cancelled.";
+    render();
+  },
+  async exportBook() {
+    await requestExport();
+  },
+  goConfigure() {
+    state.step = "configure";
+    render();
+  },
+  goGenerate() {
+    if (!state.book) return;
+    state.step = "generate";
+    render();
+  },
+  goExport() {
+    if (!state.renderResult) return;
+    state.step = "export";
+    render();
+  },
+  chooseUpload() {
+    document.getElementById("epub-input")?.click();
+  },
+  chooseCloneAudio() {
+    document.getElementById("clone-audio")?.click();
+  },
+  playExportPreview(target) {
+    const audio = document.getElementById("preview-audio");
+    if (!audio) return;
+    if (audio.paused) {
+      audio.play();
+      target.textContent = "❚❚";
+    } else {
+      audio.pause();
+      target.textContent = "▶";
+    }
+  },
+};
+
+async function uploadEpub(file) {
+  if (!file || !state.client) return;
+  state.errorMessage = "";
+  state.statusMessage = `Uploading ${file.name}…`;
+  render();
+  try {
+    const payload = await callPredict("/parse_epub", {
+      session_id: state.sessionId,
+      epub_file: handle_file(file),
+    });
+    state.book = payload;
+    state.chapters = payload.chapters;
+    state.currentChapterId = payload.chapters[0]?.id || null;
+    state.exportMetadata.title = payload.title;
+    state.exportMetadata.author = payload.author;
+    syncNarratorMetadata();
+    state.statusMessage = `Parsed ${payload.chapters.length} chapters from ${payload.title}.`;
+  } catch (error) {
+    state.errorMessage = error.message;
+  }
+  render();
+}
+
+async function requestPreview(chapterId) {
+  if (!state.client || !state.book) return;
+  state.errorMessage = "";
+  state.statusMessage = "Rendering preview…";
+  render();
+  try {
+    const payload = await callPredict("/generate_preview", {
+      session_id: state.sessionId,
+      chapter_id: chapterId,
+      voice_config: buildVoiceConfig(),
+      diffusion_steps: state.diffusionSteps,
+      speed: state.speed,
+    });
+    state.previewUrl = payload.url;
+    state.statusMessage = "Preview ready.";
+  } catch (error) {
+    state.errorMessage = error.message;
+  }
+  render();
+}
+
+async function submitRender() {
+  if (!state.client || !state.book) return;
+  state.errorMessage = "";
+  state.statusMessage = "Submitting audiobook render…";
+  state.step = "generate";
+  state.renderEvents = [];
+  state.renderResult = null;
+  render();
+
+  const submission = state.client.submit("/start_render", {
+    session_id: state.sessionId,
+    selected_chapter_ids: selectedChapterIds(),
+    voice_config: buildVoiceConfig(),
+    diffusion_steps: state.diffusionSteps,
+    speed: state.speed,
+  });
+  state.renderSubmission = submission;
+
+  try {
+    for await (const event of submission) {
+      if (event.type === "status") {
+        state.renderStatus = event;
+        if (event.position && event.status === "pending") {
+          state.statusMessage = `Queued in position ${event.position} of ${event.queue_size}.`;
+        }
+        render();
+        continue;
+      }
+      if (event.type !== "data") continue;
+      const payload = event.data?.[0] ?? event.data;
+      if (!payload) continue;
+      state.renderEvents.push(payload);
+      updateRenderState(payload);
+      render();
+    }
+  } catch (error) {
+    state.errorMessage = error.message;
+    render();
+  }
+}
+
+function updateRenderState(payload) {
+  switch (payload.type) {
+    case "started":
+      state.statusMessage = `Binding ${payload.total_chapters} chapters…`;
+      break;
+    case "chapter_started":
+      state.statusMessage = `Narrating ${payload.chapter_title}…`;
+      break;
+    case "chapter_done":
+      updateChapterDuration(payload.chapter_id, payload.duration_seconds);
+      break;
+    case "completed":
+      state.renderResult = payload;
+      state.step = "export";
+      state.statusMessage = "Audiobook render completed. Export is unlocked.";
+      break;
+    case "cancelled":
+      state.statusMessage = "Render cancelled.";
+      break;
+    case "failed":
+      state.errorMessage = payload.message || "Render failed.";
+      break;
+    default:
+      break;
+  }
+}
+
+async function requestExport() {
+  if (!state.client) return;
+  state.errorMessage = "";
+  state.statusMessage = `Preparing ${state.exportFormat.toUpperCase()} export…`;
+  render();
+  try {
+    const payload = await callPredict("/export_audiobook", {
+      session_id: state.sessionId,
+      format: state.exportFormat,
+      metadata: {
+        title: state.exportMetadata.title,
+        artist: state.exportMetadata.author,
+        narrator: state.exportMetadata.narrator,
+        genre: state.exportMetadata.genre,
+      },
+      embed_markers: state.embedMarkers,
+    });
+    state.exportFile = payload;
+    state.previewUrl = payload.url || state.previewUrl;
+    state.statusMessage = `${state.exportFormat.toUpperCase()} export ready.`;
+  } catch (error) {
+    state.errorMessage = error.message;
+  }
+  render();
+}
+
+async function callPredict(apiName, payload) {
+  if (!state.client) throw new Error("Client not connected");
+  const result = await state.client.predict(apiName, payload);
+  return result.data?.[0] ?? result;
+}
+
+function buildVoiceConfig() {
+  if (state.voiceMode === "clone") {
+    return {
+      mode: "clone",
+      referenceText: state.cloneReferenceText,
+      cloneConsent: state.cloneConsent,
+      samplePath: state.cloneSampleFile ? handle_file(state.cloneSampleFile) : null,
+    };
+  }
+  if (state.voiceMode === "design") {
+    return {
+      mode: "design",
+      designPrompt: state.designPrompt,
+    };
+  }
+  return {
+    mode: "auto",
+    narratorId: state.narratorId,
+  };
+}
+
+function selectedChapterIds() {
+  return state.chapters.filter((chapter) => chapter.included).map((chapter) => chapter.id);
+}
+
+function currentChapter() {
+  return state.chapters.find((chapter) => chapter.id === state.currentChapterId) || state.chapters[0];
+}
+
+function includedChapters() {
+  return state.chapters.filter((chapter) => chapter.included);
+}
+
+function totalMinutes() {
+  return includedChapters().reduce((sum, chapter) => sum + Number(chapter.est_minutes || chapter.estMinutes || 0), 0);
+}
+
+function formatRuntime(minutes) {
+  const total = Math.max(0, Math.round(minutes));
+  const hours = Math.floor(total / 60);
+  const mins = total % 60;
+  return hours ? `${hours}h ${String(mins).padStart(2, "0")}m` : `${mins}m`;
+}
+
+function formatStamp(totalSeconds) {
+  const seconds = Math.max(0, Math.round(totalSeconds));
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+  return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
+
+function updateChapterDuration(chapterId, seconds) {
+  const chapter = state.chapters.find((item) => item.id === chapterId);
+  if (chapter) {
+    chapter.duration_seconds = seconds;
+  }
+}
+
+function render() {
+  const previousChapterListScrollTop = document.querySelector(".chapter-list")?.scrollTop ?? 0;
+  const previousReadingContainer = document.querySelector("[data-reading-scroll]");
+  const previousReadingScrollTop = previousReadingContainer?.scrollTop ?? 0;
+  const previousReadingChapterId = previousReadingContainer?.dataset.chapterId ?? "";
+  const nextReadingChapterId = String(currentChapter()?.id || "");
+  appRoot.innerHTML = `
+    <div class="app-shell">
+      <div class="sheet">
+        <div class="page">
+          ${renderMasthead()}
+          ${state.errorMessage ? `<div class="error-banner">${escapeHtml(state.errorMessage)}</div>` : ""}
+          ${state.statusMessage ? `<div class="status-banner">${escapeHtml(state.statusMessage)}</div>` : ""}
+          ${state.step === "configure" ? renderConfigure() : ""}
+          ${state.step === "generate" ? renderGenerate() : ""}
+          ${state.step === "export" ? renderExport() : ""}
+        </div>
+      </div>
+    </div>
+  `;
+  const chapterList = document.querySelector(".chapter-list");
+  if (chapterList) {
+    chapterList.scrollTop = previousChapterListScrollTop;
+  }
+  const nextReadingContainer = document.querySelector("[data-reading-scroll]");
+  if (nextReadingContainer && previousReadingChapterId === nextReadingChapterId) {
+    nextReadingContainer.scrollTop = previousReadingScrollTop;
+  }
+}
+
+function renderMasthead() {
+  const activeIndex = { configure: 0, generate: 1, export: 2 }[state.step] ?? 0;
+  return `
+    <div class="mast">
+      <div class="brand">
+        <div class="plaque">📖</div>
+        <div>
+          <div class="wordmark">Scriptorium</div>
+          <div class="tagline">Bind your library into spoken word · OmniVoice TTS</div>
+        </div>
+      </div>
+      <div class="steps">
+        ${["Upload & Configure", "Generate", "Export"].map((label, index) => {
+          const cls = index < activeIndex ? "done" : index === activeIndex ? "now" : "";
+          const prefix = index < activeIndex ? "✓ " : "";
+          return `${index ? `<span class="sep">—</span>` : ""}<span class="step ${cls}">${prefix}${label}</span>`;
+        }).join("")}
+      </div>
+    </div>
+  `;
+}
+
+function renderConfigure() {
+  const chapter = currentChapter();
+  const included = includedChapters();
+  const chapterCount = included.length;
+  const runtime = formatRuntime(totalMinutes());
+  return `
+    <div class="hero">
+      ${renderCover()}
+      <div class="hero-meta">
+        <div class="hero-title">${escapeHtml(state.book?.title || "Upload an EPUB to begin")}</div>
+        <div class="hero-subtitle">${escapeHtml(state.book ? `by ${state.book.author}` : "A custom Gradio Space for audiobook binding")}</div>
+        <div class="hero-kicker">${escapeHtml(state.book?.meta || "Public Space · GPU-backed · session-only exports")}</div>
+        <div style="margin-top:15px; display:flex; gap:10px; flex-wrap:wrap;">
+          <button class="ghost-btn" data-action="chooseUpload">Change book</button>
+          <input id="epub-input" type="file" accept=".epub" class="hide" />
+        </div>
+      </div>
+      <div class="hero-tally">
+        <div class="hero-big">${chapterCount}<span>/${state.chapters.length || 0}</span></div>
+        <div class="smallcaps">chapters on the shelf</div>
+        <div class="hero-run">≈ <strong>${runtime}</strong> runtime</div>
+      </div>
+    </div>
+
+    <div class="cols">
+      <div>
+        <div class="panel-head">
+          <h2 class="panel-title">Select chapters to bind</h2>
+          <span class="right">${chapterCount ? `${chapterCount} selected` : "Upload an EPUB"}</span>
+        </div>
+        <div class="queue">
+          <div class="list-head">
+            Include in audiobook
+            <span class="count">${chapterCount} of ${state.chapters.length}</span>
+          </div>
+          <div class="chapter-list">
+            ${state.chapters.length ? state.chapters.map(renderChapterRow).join("") : renderUploadPlaceholder()}
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div class="panel-head">
+          <h2 class="panel-title">Now reading</h2>
+        </div>
+        <div class="reading-panel">
+          <div class="reading-head">
+            <div>
+              <h3>${escapeHtml(chapter?.title || "Waiting for an EPUB")}</h3>
+              <div class="chapter-meta">${chapter ? `${chapter.chars.toLocaleString()} chars · ≈ ${chapter.est_minutes} min · chapter ${chapter.n}` : "Upload a book to inspect chapters"}</div>
+            </div>
+            <div class="chips">
+              <button class="chip" data-action="previewChapter" data-id="${chapter?.id || ""}" ${chapter ? "" : "disabled"}>Preview</button>
+              <button class="chip warn" data-action="focusChapter" data-id="${chapter?.id || ""}" ${chapter ? "" : "disabled"}>${chapter?.included === false ? "Skipped" : "Selected"}</button>
+            </div>
+          </div>
+          <div class="verse reading-scroll" data-reading-scroll data-chapter-id="${escapeAttr(chapter?.id || "")}">${renderChapterBody(chapter?.text || "")}</div>
+          ${state.previewUrl ? `<div style="margin-top: 16px;"><audio controls src="${state.previewUrl}"></audio></div>` : ""}
+        </div>
+
+        <div class="voice-panel">
+          <div class="seg">
+            ${["auto", "clone", "design"].map((mode) => `
+              <button type="button" data-action="setVoiceMode" data-mode="${mode}" class="${state.voiceMode === mode ? "active" : ""}">
+                ${mode}
+              </button>
+            `).join("")}
+          </div>
+          ${renderVoiceMode()}
+          <div class="dial-grid">
+            <div>
+              <div class="dial-head">
+                <span class="smallcaps">Diffusion steps</span>
+                <span class="dial-value">${state.diffusionSteps}</span>
+              </div>
+              <input id="diffusion-steps" class="range" type="range" min="8" max="64" value="${state.diffusionSteps}" />
+            </div>
+            <div>
+              <div class="dial-head">
+                <span class="smallcaps">Reading speed</span>
+                <span class="dial-value">${state.speed.toFixed(1)}×</span>
+              </div>
+              <input id="reading-speed" class="range" type="range" min="0.5" max="2" step="0.1" value="${state.speed}" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer">
+      <div class="footer-note">Binding <b>${chapterCount} chapters</b> · approx <b>${runtime}</b> · exports as <b>.m4a</b></div>
+      <div class="spacer"></div>
+      <button class="btn-ghost" data-action="previewChapter" data-id="${chapter?.id || ""}" ${chapter ? "" : "disabled"}>Hear a preview</button>
+      <button class="btn-primary" data-action="startRender" ${canStartRender() ? "" : "disabled"}>Generate full audiobook</button>
+    </div>
+  `;
+}
+
+function renderGenerate() {
+  const included = includedChapters();
+  const currentEvent = [...state.renderEvents].reverse().find((event) => event.type === "chapter_started");
+  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;
+  const activeChapter = state.chapters.find((chapter) => chapter.id === currentId) || included[0];
+  return `
+    <div class="hero">
+      ${renderCover({ w: 92, h: 134 })}
+      <div class="hero-meta">
+        <div class="smallcaps" style="display:flex; align-items:center; gap:9px; color:var(--leather);"><span class="status-dot"></span> Now binding · OmniVoice TTS</div>
+        <div class="screen-title" style="font-size:31px; font-weight:800; margin:6px 0 14px;">
+          Narrating <em style="color:var(--leather); font-style:italic;">${escapeHtml(activeChapter?.title || "your book")}</em>…
+        </div>
+        <div class="progress-bar"><div class="progress-fill" style="width:${percent}%"></div></div>
+        <div class="stats-hero">
+          <span><b>${doneCount} of ${included.length}</b> chapters bound</span>
+          <span>${formatRuntime(totalMinutes())} target runtime</span>
+        </div>
+      </div>
+      <div class="hero-stats">
+        <div class="pct">${percent}<span style="font-size:24px;">%</span></div>
+        <div class="smallcaps">complete</div>
+        <div style="margin-top:10px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;">
+          <button class="small-btn" data-action="pauseRender">Pause</button>
+          <button class="small-btn danger" data-action="cancelRender">Cancel</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="cols">
+      <div>
+        <div class="panel-head">
+          <h2 class="panel-title">Render queue</h2>
+          <span class="right">${doneCount}/${included.length} done</span>
+        </div>
+        <div class="queue">
+          <div class="queue-head">Chapter · status <span class="count">${state.renderStatus?.position ? `queue ${state.renderStatus.position}` : ""}</span></div>
+          ${state.chapters.map((chapter) => renderQueueRow(chapter, currentId)).join("")}
+        </div>
+      </div>
+      <div>
+        <div class="panel-head">
+          <h2 class="panel-title">Now narrating</h2>
+        </div>
+        <div class="player">
+          <div class="reading-head" style="border-bottom:none; margin-bottom:8px;">
+            <div>
+              <div class="now-title" style="font-size:23px; font-weight:700;">${escapeHtml(activeChapter?.title || "Waiting in queue")}</div>
+              <div class="chapter-meta">${activeChapter ? `chapter ${activeChapter.n} · ${activeChapter.chars.toLocaleString()} chars` : ""}</div>
+            </div>
+            <div class="pill">${escapeHtml(activeNarratorName())}</div>
+          </div>
+          <div class="wave">${new Array(25).fill(0).map((_, index) => `<i style="height:${40 + ((index * 13) % 55)}%; animation-delay:${index * 0.045}s"></i>`).join("")}</div>
+          <div class="spoken">
+            <span class="lit">${escapeHtml(excerpt(activeChapter?.text || "", 120))}</span>
+            <span class="dim">${escapeHtml(excerpt(activeChapter?.text || "", 220, 120))}</span>
+          </div>
+        </div>
+        <div class="panel-head" style="margin-top:18px;">
+          <h2 class="panel-title" style="font-size:19px;">Activity</h2>
+        </div>
+        <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>
+    </div>
+
+    <div class="footer">
+      <div class="footer-note">Binding <b>${included.length} chapters</b> · <b>${doneCount} done</b> · Export unlocks when complete</div>
+      <div class="spacer"></div>
+      <button class="btn-ghost" data-action="pauseRender">Pause binding</button>
+      <button class="btn-primary" data-action="goExport" ${state.renderResult ? "" : "disabled"}>Continue to export</button>
+    </div>
+  `;
+}
+
+function renderExport() {
+  const tracks = includedChapters();
+  let elapsed = 0;
+  const trackRows = tracks.map((track, index) => {
+    const start = elapsed;
+    elapsed += Number(track.duration_seconds || track.est_minutes * 60 || 0);
+    return { track, start, playing: index === 2 };
+  });
+  const totalSeconds = elapsed || Math.round(totalMinutes() * 60);
+  const playbackSeconds = Math.min(totalSeconds, (trackRows[2]?.start || 0) + 300);
+  const percent = totalSeconds ? (playbackSeconds / totalSeconds) * 100 : 0;
+
+  return `
+    <div class="hero">
+      ${renderCover({ w: 96, h: 140 })}
+      <div class="hero-meta">
+        <div class="smallcaps" style="color:var(--green); display:flex; align-items:center; gap:9px;">✓ Audiobook bound · ready to export</div>
+        <div class="hero-title" style="font-size:33px;">${escapeHtml(state.book?.title || "Audiobook ready")}</div>
+        <div class="hero-subtitle">narrated by ${escapeHtml(activeNarratorName())}</div>
+        <div class="spec-strip">
+          <div class="spec"><div class="spec-value">${formatRuntime(totalSeconds / 60)}</div><div class="smallcaps">runtime</div></div>
+          <div class="spec"><div class="spec-value">${tracks.length}</div><div class="smallcaps">chapters</div></div>
+          <div class="spec"><div class="spec-value">.${state.exportFormat}</div><div class="smallcaps">format</div></div>
+          <div class="spec"><div class="spec-value">${state.exportFile ? humanBytes(state.exportFile.size_bytes) : "Pending"}</div><div class="smallcaps">size</div></div>
+        </div>
+      </div>
+      <div>
+        <button class="btn-primary" data-action="exportBook">${state.exportFile ? "Download again" : "Download audiobook"}</button>
+        ${state.exportFile ? `<div style="margin-top:10px;"><a href="${state.exportFile.url}" target="_blank" rel="noopener">Open exported file</a></div>` : `<div style="margin-top:10px; color:var(--faint); font-size:12.5px;">with embedded chapter markers</div>`}
+      </div>
+    </div>
+
+    <div class="cols">
+      <div>
+        <div class="panel-head">
+          <h2 class="panel-title">Chapters &amp; markers</h2>
+          <span class="right">${tracks.length} tracks</span>
+        </div>
+        <div class="queue">
+          <div class="list-head">Chapter <span class="count">${formatRuntime(totalSeconds / 60)} total</span></div>
+          <div class="track-list">
+            ${trackRows.map(({ track, start, playing }) => `
+              <div class="track-row ${playing ? "playing" : ""}">
+                <span class="roman">${escapeHtml(track.n)}</span>
+                <button class="circle-btn">${playing ? "❚❚" : "▶"}</button>
+                <div class="track-main">
+                  <div class="track-name">${escapeHtml(track.title)}</div>
+                  <div class="track-meta">starts at ${formatStamp(start)}</div>
+                </div>
+                <div>${formatStamp(Number(track.duration_seconds || track.est_minutes * 60 || 0))}</div>
+              </div>
+            `).join("")}
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="panel-head">
+          <h2 class="panel-title">Preview &amp; export</h2>
+        </div>
+        <div class="player">
+          <div style="display:flex; gap:18px; align-items:center; margin-bottom:18px;">
+            ${renderCover({ w: 70, h: 102 })}
+            <div>
+              <div class="smallcaps">Now playing · chapter ${trackRows[2]?.track.n || "i"}</div>
+              <div class="player-title" style="font-size:24px; font-weight:700;">${escapeHtml(trackRows[2]?.track.title || state.book?.title || "Preview")}</div>
+              <div class="chapter-meta">narrated by ${escapeHtml(activeNarratorName())} · 1.0×</div>
+            </div>
+          </div>
+          <div class="scrubber">
+            <div class="scrub-fill" style="width:${percent}%"></div>
+            ${trackRows.map(({ start }, index) => index ? `<span class="scrub-tick" style="left:${(start / totalSeconds) * 100}%"></span>` : "").join("")}
+            <span class="scrub-head" style="left:${percent}%"></span>
+          </div>
+          <div class="track-meta" style="display:flex; justify-content:space-between;"> <span>${formatStamp(playbackSeconds)} elapsed</span> <span>−${formatRuntime((totalSeconds - playbackSeconds) / 60)}</span></div>
+          <div class="transport">
+            <button class="transport-btn">⏮</button>
+            <button class="transport-btn">↺15</button>
+            <button class="transport-btn main" data-action="playExportPreview">▶</button>
+            <button class="transport-btn">30↻</button>
+            <button class="transport-btn">⏭</button>
+          </div>
+          ${state.previewUrl ? `<audio id="preview-audio" src="${state.previewUrl}" preload="metadata"></audio>` : ""}
+        </div>
+        <div class="options">
+          <div class="smallcaps" style="margin-bottom:9px;">Export format</div>
+          <div class="format-grid" style="grid-template-columns:repeat(3, minmax(0, 1fr));">
+            ${["m4a", "mp3", "zip"].map((format) => `
+              <label class="format-card ${state.exportFormat === format ? "active" : ""}">
+                <input type="radio" class="hide" name="format" data-format="${format}" ${state.exportFormat === format ? "checked" : ""} />
+                <div class="spec-value" style="font-size:20px;">.${format}</div>
+                <div class="chapter-meta">${format === "zip" ? "one file per chapter" : "single file export"}</div>
+              </label>
+            `).join("")}
+          </div>
+          <div class="smallcaps" style="margin:18px 0 9px;">Audiobook metadata</div>
+          <div class="meta-grid">
+            ${Object.entries(state.exportMetadata).map(([key, value]) => `
+              <label>
+                <div class="chapter-meta" style="margin-bottom:5px; text-transform:uppercase;">${escapeHtml(key)}</div>
+                <input class="field" data-meta="${key}" value="${escapeAttr(value)}" />
+              </label>
+            `).join("")}
+          </div>
+          <label style="display:flex; align-items:center; gap:11px; margin-top:16px;">
+            <input id="embed-markers" type="checkbox" ${state.embedMarkers ? "checked" : ""} />
+            Embed chapter markers &amp; cover art into the file
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer">
+      <div class="footer-note">${escapeHtml(state.book?.title || "Audiobook")} · ${formatRuntime(totalSeconds / 60)} · ${tracks.length} chapters</div>
+      <div class="spacer"></div>
+      <button class="btn-ghost" data-action="goConfigure">Back to configure</button>
+      <button class="btn-primary" data-action="exportBook">${state.exportFile ? "Download audiobook" : "Prepare export"}</button>
+    </div>
+  `;
+}
+
+function renderCover(options = {}) {
+  const w = options.w || 124;
+  const h = options.h || 182;
+  const scale = w / 124;
+  const style = `width:${w}px;height:${h}px;padding:${16 * scale}px ${12 * scale}px;`;
+  return `
+    <div class="cover" style="${style}">
+      <span class="cover-corner top"></span>
+      <span class="cover-corner bottom"></span>
+      <div class="cover-title" style="font-size:${18 * scale}px;">${escapeHtml(state.book?.title || "Scriptorium")}</div>
+      <div class="cover-rule" style="width:${38 * scale}px;"></div>
+      <div class="cover-author" style="font-size:${13 * scale}px;">${escapeHtml(state.book?.author || "OmniVoice")}</div>
+    </div>
+  `;
+}
+
+function renderUploadPlaceholder() {
+  return `
+    <div style="padding: 22px 18px;">
+      <p style="margin-top:0;">Upload an EPUB to unlock chapter selection, narrator controls, preview, and render/export steps.</p>
+      <button class="btn-primary" data-action="chooseUpload">Choose EPUB</button>
+      <input id="epub-input" type="file" accept=".epub" class="hide" />
+    </div>
+  `;
+}
+
+function renderChapterRow(chapter) {
+  const active = chapter.id === state.currentChapterId ? "focus" : "";
+  const off = chapter.included ? "" : "off";
+  return `
+    <label class="chapter-row ${active} ${off}">
+      <input type="checkbox" data-chapter-toggle="${chapter.id}" ${chapter.included ? "checked" : ""} />
+      <span class="roman">${escapeHtml(chapter.n)}</span>
+      <div class="chapter-main" data-action="focusChapter" data-id="${chapter.id}">
+        <div class="chapter-name">${escapeHtml(chapter.title)}</div>
+        <div class="chapter-meta">${chapter.chars.toLocaleString()} chars · ≈${chapter.est_minutes} min ${chapter.included ? "" : "· skipped"}</div>
+      </div>
+      <button class="circle-btn" type="button" data-action="previewChapter" data-id="${chapter.id}">▶</button>
+    </label>
+  `;
+}
+
+function renderVersePreview(text) {
+  if (!text) {
+    return `<p>Choose a chapter to inspect the reading pane.</p>`;
+  }
+  const lines = excerpt(text, 420).split(/\n+/).slice(0, 10);
+  return `<span class="dropcap">${escapeHtml(lines[0]?.[0] || "W")}</span>${lines
+    .map((line, index) => {
+      const body = index === 0 ? line.slice(1) : line;
+      return `<p>${escapeHtml(body)}</p>`;
+    })
+    .join("")}`;
+}
+
+function renderChapterBody(text) {
+  if (!text) {
+    return `<p>Choose a chapter to inspect the reading pane.</p>`;
+  }
+  const paragraphs = text
+    .split(/\n{2,}/)
+    .map((chunk) => chunk.trim())
+    .filter(Boolean);
+  if (!paragraphs.length) {
+    return `<p>${escapeHtml(text)}</p>`;
+  }
+  const [first, ...rest] = paragraphs;
+  const firstLead = first[0] || "W";
+  const firstBody = first.slice(1);
+  return `
+    <p><span class="dropcap">${escapeHtml(firstLead)}</span>${escapeHtml(firstBody)}</p>
+    ${rest.map((paragraph) => `<p>${escapeHtml(paragraph)}</p>`).join("")}
+  `;
+}
+
+function renderVoiceMode() {
+  if (state.voiceMode === "clone") {
+    return `
+      <div class="drop-zone">
+        <div class="panel-title" style="font-size:21px; margin-bottom:6px;">Record your own narrator</div>
+        <div class="chapter-meta" style="margin-bottom:14px;">Recommended: 3–10 seconds of clean speech.</div>
+        <input id="clone-audio" class="field" type="file" accept="audio/*" />
+        <div class="chapter-meta" style="margin-top:10px;">${state.cloneSampleFile ? escapeHtml(state.cloneSampleFile.name) : "No sample selected yet."}</div>
+      </div>
+      <label style="display:block; margin-top:15px;">
+        <div class="smallcaps" style="margin-bottom:7px;">Reference text spoken (optional)</div>
+        <input id="clone-ref-text" class="field" value="${escapeAttr(state.cloneReferenceText)}" placeholder="Type exactly what is said in the sample…" />
+      </label>
+      <label style="display:flex; gap:10px; align-items:flex-start; margin-top:14px;">
+        <input id="clone-consent" type="checkbox" ${state.cloneConsent ? "checked" : ""} />
+        <span>${escapeHtml(VOICE_WARNING)}</span>
+      </label>
+    `;
+  }
+  if (state.voiceMode === "design") {
+    return `
+      <label style="display:block;">
+        <div class="smallcaps" style="margin-bottom:7px;">Describe the voice you want</div>
+        <textarea id="design-prompt" class="textarea" placeholder="A warm, unhurried narrator — low pitch, faintly British, the kind of voice that belongs by a fireplace…">${escapeHtml(state.designPrompt)}</textarea>
+      </label>
+    `;
+  }
+  return `
+    <div class="narrator-grid">
+      ${NARRATORS.map((narrator) => `
+        <button class="narrator-card ${state.narratorId === narrator.id ? "active" : ""}" data-action="pickNarrator" data-id="${narrator.id}">
+          <div class="spec-value" style="font-size:17px;">${escapeHtml(narrator.name)}</div>
+          <div class="chapter-meta">${escapeHtml(narrator.desc)}</div>
+        </button>
+      `).join("")}
+    </div>
+  `;
+}
+
+function renderQueueRow(chapter, currentId) {
+  const skipped = !chapter.included;
+  const done = state.renderEvents.some((event) => event.type === "chapter_done" && event.chapter_id === chapter.id);
+  const rendering = chapter.id === currentId && !done;
+  const status = skipped ? "skipped" : done ? "done" : rendering ? "rendering" : "queued";
+  const label = skipped
+    ? "Skipped · not in audiobook"
+    : done
+      ? `Bound · ${chapter.duration_seconds || chapter.est_minutes * 60}s`
+      : rendering
+        ? "Rendering now…"
+        : `Queued · ≈${chapter.est_minutes} min`;
+  return `
+    <div class="queue-row ${status}">
+      <div class="queue-status ${status}">${status === "done" ? "✓" : status === "rendering" ? "●" : status === "queued" ? "○" : "–"}</div>
+      <span class="roman">${escapeHtml(chapter.n)}</span>
+      <div class="queue-main">
+        <div class="queue-name">${escapeHtml(chapter.title)}</div>
+        <div class="queue-meta">${escapeHtml(label)}</div>
+        ${rendering ? `<div class="mini-bar"><div class="mini-fill" style="width:68%"></div></div>` : ""}
+      </div>
+      <div>${skipped ? "—" : `≈${chapter.est_minutes}m`}</div>
+    </div>
+  `;
+}
+
+function renderLogRow(event) {
+  const stamp = new Date().toLocaleTimeString();
+  return `<div class="log-row ${event.type === "chapter_started" ? "current" : ""}"><span class="time">${stamp}</span><span>${escapeHtml(logMessage(event))}</span></div>`;
+}
+
+function logMessage(event) {
+  switch (event.type) {
+    case "started":
+      return `Began binding ${event.total_chapters} chapters`;
+    case "chapter_started":
+      return `Synthesising ${event.chapter_title}`;
+    case "chapter_done":
+      return `Bound ${event.chapter_id} · ${event.duration_seconds}s`;
+    case "completed":
+      return "Completed audiobook render";
+    case "cancelled":
+      return "Cancelled render";
+    default:
+      return JSON.stringify(event);
+  }
+}
+
+function canStartRender() {
+  if (!state.book) return false;
+  if (!selectedChapterIds().length) return false;
+  if (state.voiceMode === "clone" && (!state.cloneSampleFile || !state.cloneConsent)) return false;
+  if (state.voiceMode === "design" && !state.designPrompt.trim()) return false;
+  return true;
+}
+
+function activeNarratorName() {
+  const narrator = NARRATORS.find((item) => item.id === state.narratorId);
+  return narrator?.name || "Custom narrator";
+}
+
+function syncNarratorMetadata() {
+  state.exportMetadata.narrator = `${activeNarratorName()} (OmniVoice)`;
+}
+
+function excerpt(text, length, start = 0) {
+  if (!text) return "";
+  return text.slice(start, start + length).trim();
+}
+
+function humanBytes(size) {
+  if (!size) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  let value = size;
+  let index = 0;
+  while (value >= 1024 && index < units.length - 1) {
+    value /= 1024;
+    index += 1;
+  }
+  return `${value.toFixed(index ? 1 : 0)} ${units[index]}`;
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function escapeAttr(value) {
+  return escapeHtml(value);
+}
+
+main();

frontend/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Scriptorium</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Spectral:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/static/app.js"></script>
+  </body>
+  </html>

frontend/styles.css

@@ -0,0 +1,1056 @@
+:root {
+  --paper: #f6efde;
+  --paper2: #efe5cd;
+  --paperEdge: #e4d6b4;
+  --ink: #33271a;
+  --ink2: #5e4d36;
+  --faint: #8a795c;
+  --leather: #73302a;
+  --leather2: #8c3c33;
+  --leatherInk: #f3e2c8;
+  --brass: #b08a44;
+  --brass2: #caa75e;
+  --brassDeep: #876327;
+  --green: #3c5240;
+  --line: rgba(135, 99, 39, 0.25);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Spectral", Georgia, serif;
+  color: var(--ink);
+  background:
+    radial-gradient(70% 50% at 22% -6%, rgba(255, 234, 176, 0.5), transparent 55%),
+    repeating-linear-gradient(91deg, #5a3f28, #5a3f28 3px, #553a24 3px, #553a24 7px),
+    linear-gradient(160deg, #5e4229, #4a331f);
+}
+
+a {
+  color: inherit;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+.app-shell {
+  max-width: 1480px;
+  margin: 22px auto;
+  padding: 34px;
+}
+
+.sheet {
+  min-height: calc(100vh - 44px);
+  border-radius: 8px;
+  background:
+    radial-gradient(90% 60% at 18% 0%, #fbf5e6, transparent 55%),
+    linear-gradient(170deg, #f6efde, #ece0c4);
+  box-shadow:
+    0 30px 70px rgba(0, 0, 0, 0.5),
+    0 2px 0 rgba(255, 255, 255, 0.4) inset,
+    0 0 0 1px rgba(135, 99, 39, 0.25);
+  overflow: hidden;
+  position: relative;
+}
+
+.sheet::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  mix-blend-mode: multiply;
+  opacity: 0.45;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E");
+}
+
+.page {
+  position: relative;
+  padding: 36px 48px 30px;
+}
+
+.mast {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.plaque {
+  width: 58px;
+  height: 58px;
+  border-radius: 7px;
+  display: grid;
+  place-items: center;
+  color: #fff6e2;
+  background: linear-gradient(150deg, var(--brass2), var(--brassDeep));
+  border: 1px solid #e9cf92;
+  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.wordmark {
+  font-family: "Playfair Display", serif;
+  font-size: 38px;
+  font-weight: 800;
+  color: var(--leather);
+  line-height: 0.95;
+  letter-spacing: -0.5px;
+}
+
+.tagline {
+  color: var(--ink2);
+  font-style: italic;
+  font-size: 16px;
+  margin-top: 4px;
+}
+
+.steps {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.step {
+  color: var(--faint);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.step.done {
+  color: var(--brassDeep);
+}
+
+.step.now {
+  color: var(--leather);
+  border-bottom: 2px solid var(--leather);
+  padding-bottom: 4px;
+}
+
+.sep {
+  color: rgba(135, 99, 39, 0.45);
+}
+
+.card,
+.panel,
+.hero,
+.queue,
+.player,
+.voice-panel,
+.reading-panel,
+.options,
+.log {
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: linear-gradient(180deg, #fffdf6, #f7efdc);
+  box-shadow: 0 8px 20px rgba(74, 51, 31, 0.1);
+}
+
+.hero {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  padding: 20px 26px;
+  margin-bottom: 18px;
+  background: linear-gradient(180deg, #fff, rgba(246, 239, 222, 0.4));
+  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 24px rgba(74, 51, 31, 0.12);
+}
+
+.cover {
+  width: 124px;
+  height: 182px;
+  flex: 0 0 auto;
+  padding: 16px 12px;
+  position: relative;
+  border-radius: 3px 5px 5px 3px;
+  background: linear-gradient(120deg, #7d342c, #5e241f);
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), inset -8px 0 14px rgba(0, 0, 0, 0.35);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.cover::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 11px;
+  border-radius: 3px 0 0 3px;
+  background: linear-gradient(90deg, #4a1b17, #742c25);
+  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.5);
+}
+
+.cover-title {
+  font-family: "Playfair Display", serif;
+  font-size: 18px;
+  font-weight: 700;
+  color: #f3dcb0;
+  line-height: 1.05;
+}
+
+.cover-rule {
+  width: 38px;
+  height: 2px;
+  margin: 11px auto;
+  background: var(--brass2);
+}
+
+.cover-author {
+  font-size: 13px;
+  font-style: italic;
+  color: #e6c894;
+}
+
+.cover-corner {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--brass2);
+  opacity: 0.85;
+}
+
+.cover-corner.top {
+  top: 7px;
+  right: 7px;
+  border-left: none;
+  border-bottom: none;
+}
+
+.cover-corner.bottom {
+  right: 7px;
+  bottom: 7px;
+  border-left: none;
+  border-top: none;
+}
+
+.hero-meta {
+  flex: 1 1 auto;
+}
+
+.hero-title,
+.panel-title,
+.screen-title {
+  font-family: "Playfair Display", serif;
+  color: var(--ink);
+}
+
+.hero-title {
+  font-weight: 800;
+  font-size: 38px;
+  line-height: 1.02;
+  letter-spacing: -0.5px;
+}
+
+.hero-subtitle {
+  margin-top: 5px;
+  color: var(--leather);
+  font-size: 20px;
+  font-style: italic;
+}
+
+.hero-kicker {
+  margin-top: 8px;
+  color: var(--faint);
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 1.6px;
+}
+
+.hero-tally {
+  text-align: right;
+  padding: 14px 22px;
+  border-radius: 6px;
+  color: #fff6e2;
+  background: linear-gradient(160deg, var(--brass2), var(--brassDeep));
+  border: 1px solid #e9cf92;
+  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), inset 0 -3px 8px rgba(0, 0, 0, 0.28);
+}
+
+.hero-big {
+  font-family: "Playfair Display", serif;
+  font-size: 46px;
+  font-weight: 800;
+  line-height: 0.9;
+}
+
+.hero-big span {
+  font-size: 24px;
+  opacity: 0.75;
+}
+
+.hero-run,
+.smallcaps {
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  font-size: 12px;
+}
+
+.hero-run {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  font-size: 16px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.cols {
+  display: grid;
+  grid-template-columns: 1fr 1.08fr;
+  gap: 24px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  margin-bottom: 14px;
+}
+
+.panel-head .right {
+  margin-left: auto;
+  color: var(--brassDeep);
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  font-weight: 600;
+}
+
+.panel-title {
+  margin: 0;
+  font-size: 23px;
+  font-weight: 700;
+}
+
+.queue-head,
+.list-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 18px;
+  border-bottom: 1px solid rgba(135, 99, 39, 0.22);
+  background: linear-gradient(180deg, #f1e4c6, #e9d9b6);
+  color: var(--ink2);
+  text-transform: uppercase;
+  letter-spacing: 1.3px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.queue-head .count,
+.list-head .count {
+  margin-left: auto;
+  color: var(--leather);
+}
+
+.chapter-list,
+.track-list {
+  max-height: 520px;
+  overflow: auto;
+}
+
+.chapter-row,
+.track-row,
+.queue-row {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  gap: 14px;
+  align-items: center;
+  padding: 12px 18px;
+  border-bottom: 1px solid rgba(135, 99, 39, 0.13);
+}
+
+.chapter-row:nth-child(even),
+.track-row:nth-child(even) {
+  background: rgba(135, 99, 39, 0.035);
+}
+
+.chapter-row.focus,
+.queue-row.rendering,
+.track-row.playing {
+  background: rgba(115, 48, 42, 0.08);
+  box-shadow: inset 3px 0 0 var(--leather);
+}
+
+.checkbox {
+  width: 22px;
+  height: 22px;
+  border: 1.5px solid var(--brass);
+  border-radius: 4px;
+  display: grid;
+  place-items: center;
+  background: #fff;
+}
+
+.checkbox.checked {
+  background: linear-gradient(180deg, var(--leather2), var(--leather));
+  border-color: var(--leather);
+  color: white;
+}
+
+.roman {
+  width: 30px;
+  text-align: center;
+  font-family: "Playfair Display", serif;
+  font-style: italic;
+  color: var(--brassDeep);
+}
+
+.chapter-main,
+.track-main,
+.queue-main {
+  min-width: 0;
+}
+
+.chapter-name,
+.track-name,
+.queue-name {
+  font-size: 17px;
+  font-weight: 500;
+}
+
+.chapter-meta,
+.track-meta,
+.queue-meta {
+  color: var(--faint);
+  font-size: 12.5px;
+}
+
+.chapter-row.off .chapter-name,
+.queue-row.skipped .queue-name {
+  color: var(--faint);
+  text-decoration: line-through;
+  text-decoration-color: rgba(138, 121, 92, 0.5);
+}
+
+.circle-btn,
+.transport-btn,
+.pill,
+.seg button,
+.ghost-btn,
+.small-btn {
+  border: 1px solid rgba(135, 99, 39, 0.4);
+  background: #fff;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.circle-btn,
+.transport-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+}
+
+.circle-btn:hover,
+.transport-btn:hover,
+.ghost-btn:hover,
+.small-btn:hover {
+  background: rgba(176, 138, 68, 0.12);
+}
+
+.reading-panel,
+.player {
+  padding: 20px 24px;
+  box-shadow: 0 12px 28px rgba(74, 51, 31, 0.16);
+}
+
+.reading-panel {
+  position: relative;
+}
+
+.reading-panel::before {
+  content: "";
+  position: absolute;
+  left: 54px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: rgba(176, 80, 70, 0.25);
+}
+
+.reading-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid rgba(135, 99, 39, 0.25);
+  padding-bottom: 14px;
+  margin-bottom: 16px;
+}
+
+.reading-head h3,
+.now-title,
+.player-title {
+  margin: 0;
+  font-family: "Playfair Display", serif;
+}
+
+.reading-head h3 {
+  font-size: 25px;
+  font-weight: 700;
+}
+
+.chips {
+  display: flex;
+  gap: 8px;
+}
+
+.chip,
+.small-btn,
+.ghost-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 9px 14px;
+  border-radius: 5px;
+}
+
+.chip.warn,
+.small-btn.danger {
+  color: var(--leather);
+}
+
+.verse {
+  padding-left: 14px;
+  font-size: 20px;
+  line-height: 1.6;
+}
+
+.reading-scroll {
+  max-height: 460px;
+  overflow: auto;
+  padding-right: 14px;
+  scroll-behavior: smooth;
+}
+
+.reading-scroll p {
+  margin: 0 0 1rem;
+}
+
+.dropcap {
+  float: left;
+  margin: 4px 14px 0 0;
+  font-family: "Playfair Display", serif;
+  font-size: 88px;
+  font-weight: 800;
+  line-height: 0.74;
+  color: var(--leather);
+}
+
+.voice-panel,
+.options {
+  padding: 20px 24px;
+  margin-top: 16px;
+}
+
+.seg {
+  display: flex;
+  overflow: hidden;
+  border: 1px solid rgba(135, 99, 39, 0.4);
+  border-radius: 5px;
+  background: #f1e4c6;
+  margin-bottom: 18px;
+}
+
+.seg button {
+  flex: 1;
+  border: 0;
+  border-right: 1px solid rgba(135, 99, 39, 0.25);
+  padding: 12px 8px;
+  color: var(--ink2);
+  text-transform: uppercase;
+  letter-spacing: 1.4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.seg button:last-child {
+  border-right: 0;
+}
+
+.seg button.active {
+  color: var(--leatherInk);
+  background: linear-gradient(180deg, var(--leather2), var(--leather));
+}
+
+.narrator-grid,
+.format-grid,
+.meta-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.narrator-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.narrator-card,
+.format-card {
+  border: 1px solid rgba(135, 99, 39, 0.28);
+  border-radius: 6px;
+  background: #fff;
+  padding: 12px 14px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.narrator-card.active,
+.format-card.active {
+  border-color: var(--leather);
+  background: rgba(115, 48, 42, 0.07);
+  box-shadow: 0 0 0 1px var(--leather) inset;
+}
+
+.drop-zone {
+  border: 1.5px dashed rgba(135, 99, 39, 0.5);
+  border-radius: 5px;
+  padding: 24px;
+  background: rgba(176, 138, 68, 0.05);
+}
+
+.drop-zone input[type="file"] {
+  margin-top: 8px;
+}
+
+.field,
+.textarea {
+  width: 100%;
+  border: 1px solid rgba(135, 99, 39, 0.35);
+  border-radius: 4px;
+  background: #fff;
+  color: var(--ink);
+  padding: 12px 14px;
+}
+
+.textarea {
+  min-height: 110px;
+  resize: vertical;
+}
+
+.dial-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(135, 99, 39, 0.22);
+}
+
+.dial-head {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 11px;
+}
+
+.dial-value {
+  color: var(--leather);
+  font-family: "Playfair Display", serif;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.range {
+  width: 100%;
+  accent-color: var(--leather);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-top: 18px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(135, 99, 39, 0.3);
+}
+
+.footer-note {
+  color: var(--ink2);
+  font-size: 16px;
+  font-style: italic;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.btn-ghost,
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  border-radius: 5px;
+  padding: 15px 26px;
+  font-family: "Playfair Display", serif;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-ghost {
+  background: #fff;
+  color: var(--ink);
+  border: 1px solid rgba(135, 99, 39, 0.5);
+}
+
+.btn-primary {
+  background: linear-gradient(180deg, var(--leather2), var(--leather) 60%, #5e241f);
+  color: #f6e6cc;
+  border: 1px solid #9c4a40;
+  box-shadow: 0 8px 20px rgba(115, 48, 42, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.btn-primary:disabled,
+.btn-ghost:disabled,
+.small-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  filter: grayscale(0.3);
+}
+
+.status-banner,
+.error-banner {
+  margin-bottom: 16px;
+  padding: 12px 14px;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.status-banner {
+  background: rgba(176, 138, 68, 0.1);
+  border: 1px solid rgba(176, 138, 68, 0.3);
+  color: var(--ink2);
+}
+
+.error-banner {
+  background: rgba(115, 48, 42, 0.08);
+  border: 1px solid rgba(115, 48, 42, 0.35);
+  color: var(--leather);
+}
+
+.progress-bar,
+.mini-bar,
+.scrubber {
+  position: relative;
+  overflow: hidden;
+  background: rgba(135, 99, 39, 0.18);
+}
+
+.progress-bar {
+  height: 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(135, 99, 39, 0.25);
+}
+
+.mini-bar {
+  height: 5px;
+  border-radius: 3px;
+  margin-top: 7px;
+}
+
+.progress-fill,
+.mini-fill,
+.scrub-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: linear-gradient(90deg, var(--brassDeep), var(--brass2));
+}
+
+.progress-fill::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0 10px, transparent 10px 22px);
+  animation: stripe 1s linear infinite;
+}
+
+.status-dot {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: var(--leather);
+  display: inline-block;
+  box-shadow: 0 0 0 0 rgba(115, 48, 42, 0.5);
+  animation: pulse 1.8s ease-out infinite;
+}
+
+.queue-status {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 13px;
+}
+
+.queue-status.done {
+  background: linear-gradient(150deg, #4e6b52, #3c5240);
+  color: #eaf3ea;
+}
+
+.queue-status.rendering {
+  background: var(--leather);
+  color: white;
+}
+
+.queue-status.queued {
+  border: 1.5px solid rgba(135, 99, 39, 0.4);
+  color: var(--faint);
+}
+
+.queue-status.skipped {
+  border: 1.5px dashed rgba(138, 121, 92, 0.5);
+  color: var(--faint);
+}
+
+.stats-hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 9px;
+  color: var(--ink2);
+  font-size: 14px;
+}
+
+.hero-stats {
+  padding-left: 24px;
+  border-left: 1px solid rgba(135, 99, 39, 0.24);
+  text-align: right;
+}
+
+.pct {
+  font-family: "Playfair Display", serif;
+  font-size: 52px;
+  line-height: 0.85;
+  color: var(--leather);
+  font-weight: 800;
+}
+
+.wave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  height: 72px;
+  margin: 4px 0 16px;
+}
+
+.wave i {
+  width: 5px;
+  border-radius: 3px;
+  background: linear-gradient(180deg, var(--brass2), var(--leather));
+  animation: wave 1.1s ease-in-out infinite;
+}
+
+.spoken {
+  border: 1px solid rgba(135, 99, 39, 0.22);
+  border-radius: 5px;
+  background: #fff;
+  padding: 16px 18px;
+  font-size: 19px;
+  line-height: 1.55;
+  font-style: italic;
+}
+
+.spoken .lit {
+  color: var(--ink);
+  font-style: normal;
+  background: linear-gradient(180deg, transparent 58%, rgba(202, 167, 94, 0.55) 58%);
+}
+
+.spoken .dim {
+  color: var(--faint);
+}
+
+.log {
+  overflow: hidden;
+}
+
+.log-row {
+  display: flex;
+  gap: 14px;
+  align-items: baseline;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(135, 99, 39, 0.12);
+}
+
+.log-row:last-child {
+  border-bottom: 0;
+}
+
+.log-row.current {
+  color: var(--leather);
+}
+
+.time {
+  color: var(--brassDeep);
+  font-variant-numeric: tabular-nums;
+}
+
+.spec-strip {
+  display: flex;
+  flex-wrap: wrap;
+  width: fit-content;
+  margin-top: 14px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid rgba(135, 99, 39, 0.22);
+  background: #fffaf0;
+}
+
+.spec {
+  padding: 10px 18px;
+  border-right: 1px solid rgba(135, 99, 39, 0.18);
+}
+
+.spec:last-child {
+  border-right: 0;
+}
+
+.spec-value {
+  font-family: "Playfair Display", serif;
+  font-size: 19px;
+  font-weight: 700;
+}
+
+.scrubber {
+  height: 8px;
+  border-radius: 5px;
+  margin: 6px 0;
+}
+
+.scrub-fill {
+  background: linear-gradient(90deg, var(--leather2), var(--leather));
+}
+
+.scrub-head,
+.scrub-tick {
+  position: absolute;
+}
+
+.scrub-tick {
+  top: -2px;
+  width: 2px;
+  height: 12px;
+  background: rgba(135, 99, 39, 0.5);
+}
+
+.scrub-head {
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle at 35% 30%, #fff, var(--leather));
+  border: 1px solid #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+
+.transport {
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+  margin-top: 10px;
+}
+
+.transport-btn {
+  width: 46px;
+  height: 46px;
+}
+
+.transport-btn.main {
+  width: 64px;
+  height: 64px;
+  color: #f6e6cc;
+  border: 1px solid #9c4a40;
+  background: linear-gradient(180deg, var(--leather2), var(--leather) 60%, #5e241f);
+  box-shadow: 0 8px 18px rgba(115, 48, 42, 0.4);
+}
+
+.meta-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.toggle {
+  width: 42px;
+  height: 24px;
+  border-radius: 13px;
+  position: relative;
+  background: linear-gradient(180deg, var(--leather2), var(--leather));
+}
+
+.toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 20px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.hide {
+  display: none !important;
+}
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(115, 48, 42, 0.5); }
+  70% { box-shadow: 0 0 0 9px rgba(115, 48, 42, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(115, 48, 42, 0); }
+}
+
+@keyframes stripe {
+  to { background-position: 22px 0; }
+}
+
+@keyframes wave {
+  0%, 100% { transform: scaleY(0.32); }
+  50% { transform: scaleY(1); }
+}
+
+@media (max-width: 1080px) {
+  .page {
+    padding: 26px 24px 22px;
+  }
+
+  .mast,
+  .hero,
+  .footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .cols,
+  .dial-grid,
+  .meta-grid,
+  .narrator-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-tally,
+  .hero-stats {
+    text-align: left;
+    padding-left: 0;
+    border-left: 0;
+  }
+}

pytest.ini

@@ -0,0 +1,2 @@
+[pytest]
+pythonpath = .

requirements-dev.txt

@@ -0,0 +1,6 @@
+ebooklib>=0.18
+beautifulsoup4>=4.12.0
+mutagen>=1.47.0
+soundfile>=0.13.0
+numpy>=1.26.0
+pytest>=8.3.0

requirements.txt

@@ -0,0 +1,10 @@
+gradio>=5.31.0
+fastapi>=0.115.0
+ebooklib>=0.18
+beautifulsoup4>=4.12.0
+mutagen>=1.47.0
+soundfile>=0.13.0
+numpy>=1.26.0
+torch>=2.8.0
+torchaudio>=2.8.0
+omnivoice>=0.1.5

tests/test_epub.py

@@ -0,0 +1,74 @@
+from pathlib import Path
+
+import pytest
+from ebooklib import epub
+
+from backend.epub import EpubConfig, parse_epub
+
+
+def _write_sample_epub(target: Path, chapter_count: int = 2) -> Path:
+    book = epub.EpubBook()
+    book.set_identifier("sample-id")
+    book.set_title("Sample Book")
+    book.set_language("en")
+    book.add_author("Example Author")
+
+    chapters = []
+    for idx in range(chapter_count):
+        chapter = epub.EpubHtml(
+            title=f"Chapter {idx + 1}",
+            file_name=f"chap_{idx + 1}.xhtml",
+            lang="en",
+        )
+        chapter.content = (
+            f"<h1>Chapter {idx + 1}</h1>"
+            f"<p>This is chapter {idx + 1}. It has enough words to estimate audio.</p>"
+        )
+        book.add_item(chapter)
+        chapters.append(chapter)
+
+    book.toc = tuple(chapters)
+    book.spine = ["nav", *chapters]
+    book.add_item(epub.EpubNcx())
+    book.add_item(epub.EpubNav())
+    epub.write_epub(str(target), book)
+    return target
+
+
+def test_parse_epub_extracts_metadata_and_chapters(tmp_path: Path) -> None:
+    epub_path = _write_sample_epub(tmp_path / "sample.epub", chapter_count=3)
+
+    payload = parse_epub(epub_path, config=EpubConfig(max_file_bytes=2_000_000))
+
+    assert payload["title"] == "Sample Book"
+    assert payload["author"] == "Example Author"
+    assert len(payload["chapters"]) == 3
+    assert payload["chapters"][0]["title"] == "Chapter 1"
+    assert payload["chapters"][0]["included"] is True
+    assert payload["chapters"][0]["text"]
+
+
+def test_parse_epub_rejects_oversized_upload(tmp_path: Path) -> None:
+    epub_path = _write_sample_epub(tmp_path / "sample.epub", chapter_count=1)
+
+    with pytest.raises(ValueError, match="too large"):
+        parse_epub(epub_path, config=EpubConfig(max_file_bytes=32))
+
+
+def test_parse_epub_rejects_malformed_file(tmp_path: Path) -> None:
+    bad_path = tmp_path / "bad.epub"
+    bad_path.write_text("not really an epub", encoding="utf-8")
+
+    with pytest.raises(ValueError, match="Invalid EPUB"):
+        parse_epub(bad_path, config=EpubConfig(max_file_bytes=2_000_000))
+
+
+def test_parse_epub_accepts_valid_epub_without_epub_suffix(tmp_path: Path) -> None:
+    epub_path = _write_sample_epub(tmp_path / "sample.epub", chapter_count=1)
+    no_suffix_path = tmp_path / "upload-cache-file"
+    no_suffix_path.write_bytes(epub_path.read_bytes())
+
+    payload = parse_epub(no_suffix_path, config=EpubConfig(max_file_bytes=2_000_000))
+
+    assert payload["title"] == "Sample Book"
+    assert len(payload["chapters"]) == 1

tests/test_input_files.py

@@ -0,0 +1,45 @@
+from pathlib import Path
+
+import pytest
+
+from backend.input_files import resolve_uploaded_name, resolve_uploaded_path
+
+
+def test_resolve_uploaded_path_accepts_string_path(tmp_path: Path) -> None:
+    path = tmp_path / "book.epub"
+    path.write_text("x", encoding="utf-8")
+
+    resolved = resolve_uploaded_path(str(path))
+
+    assert resolved == path
+
+
+def test_resolve_uploaded_path_accepts_gradio_dict_payload(tmp_path: Path) -> None:
+    path = tmp_path / "book.epub"
+    path.write_text("x", encoding="utf-8")
+
+    resolved = resolve_uploaded_path({"path": str(path), "meta": {"_type": "gradio.FileData"}})
+
+    assert resolved == path
+
+
+def test_resolve_uploaded_path_rejects_missing_path_key() -> None:
+    with pytest.raises(TypeError, match="Unsupported uploaded file payload"):
+        resolve_uploaded_path({"url": "/tmp/book.epub"})
+
+
+def test_resolve_uploaded_name_prefers_original_filename() -> None:
+    name = resolve_uploaded_name(
+        {"path": "/tmp/gradio/abcd", "orig_name": "real-book.epub", "meta": {"_type": "gradio.FileData"}}
+    )
+
+    assert name == "real-book.epub"
+
+
+def test_resolve_uploaded_name_falls_back_to_path_name(tmp_path: Path) -> None:
+    path = tmp_path / "fallback.epub"
+    path.write_text("x", encoding="utf-8")
+
+    name = resolve_uploaded_name(str(path))
+
+    assert name == "fallback.epub"

tests/test_render_pipeline.py

@@ -0,0 +1,63 @@
+from pathlib import Path
+
+from backend.render_pipeline import RenderPipeline
+
+
+class FakeSynthesizer:
+    def __init__(self) -> None:
+        self.calls = []
+
+    def synthesize(self, *, text: str, output_path: Path, **kwargs) -> dict:
+        self.calls.append({"text": text, "output_path": output_path, **kwargs})
+        output_path.write_bytes(b"RIFFfakewave")
+        return {"duration_seconds": max(1, len(text.split()) // 2), "sample_rate": 24000}
+
+
+def _chapters() -> list:
+    return [
+        {"id": "c1", "title": "One", "text": "hello world " * 20, "included": True, "est_minutes": 1},
+        {"id": "c2", "title": "Two", "text": "next chapter " * 20, "included": True, "est_minutes": 1},
+    ]
+
+
+def test_render_pipeline_streams_ordered_progress_events(tmp_path: Path) -> None:
+    synthesizer = FakeSynthesizer()
+    pipeline = RenderPipeline(session_root=tmp_path, synthesizer=synthesizer)
+
+    events = list(
+        pipeline.render(
+            session_id="session-a",
+            book={"title": "Book"},
+            chapters=_chapters(),
+            voice_config={"mode": "auto"},
+            diffusion_steps=32,
+            speed=1.0,
+        )
+    )
+
+    event_types = [event["type"] for event in events]
+    assert event_types[0] == "started"
+    assert "chapter_started" in event_types
+    assert "chapter_done" in event_types
+    assert event_types[-1] == "completed"
+    assert len(synthesizer.calls) == 2
+
+
+def test_render_pipeline_can_be_cancelled(tmp_path: Path) -> None:
+    synthesizer = FakeSynthesizer()
+    pipeline = RenderPipeline(session_root=tmp_path, synthesizer=synthesizer)
+    iterator = pipeline.render(
+        session_id="session-a",
+        book={"title": "Book"},
+        chapters=_chapters(),
+        voice_config={"mode": "auto"},
+        diffusion_steps=32,
+        speed=1.0,
+    )
+
+    first = next(iterator)
+    pipeline.cancel("session-a")
+    remaining = list(iterator)
+
+    assert first["type"] == "started"
+    assert remaining[-1]["type"] == "cancelled"

tests/test_session_store.py

@@ -0,0 +1,28 @@
+from pathlib import Path
+
+from backend.session_store import SessionStore
+
+
+def test_session_store_creates_isolated_session_dirs(tmp_path: Path) -> None:
+    store = SessionStore(root=tmp_path, ttl_seconds=60)
+
+    first = store.ensure_session("session-a")
+    second = store.ensure_session("session-b")
+
+    assert first.session_id == "session-a"
+    assert second.session_id == "session-b"
+    assert first.root.exists()
+    assert second.root.exists()
+    assert first.root != second.root
+
+
+def test_session_store_prunes_expired_sessions(tmp_path: Path) -> None:
+    store = SessionStore(root=tmp_path, ttl_seconds=0)
+    session = store.ensure_session("session-a")
+    marker = session.root / "marker.txt"
+    marker.write_text("old", encoding="utf-8")
+
+    removed = store.cleanup_expired(now=store._now() + 1)
+
+    assert removed == ["session-a"]
+    assert not session.root.exists()