gradio server

.gitignore

@@ -20,3 +20,4 @@ venv*/
 .hf_home/
 flagged/
 gradio_cached_examples/
+_out/

README.md

@@ -4,11 +4,7 @@ emoji: 🐆
 colorFrom: yellow
 colorTo: red
 sdk: gradio
-# 5.49.x is the "bridge" release: it accepts huggingface-hub >=0.33.5,<2.0,
-# so it co-resolves with the NeMo stack (hub 0.x) at build time AND keeps
-# working after create_env.py re-pins transformers==5.3.0 (hub 1.x) at runtime.
-# gradio 6.x requires hub>=1.2 and cannot be co-installed with nemo-toolkit.
-sdk_version: 5.49.1
+sdk_version: 6.20.0
 python_version: '3.12'
 app_file: app.py
 pinned: false
@@ -33,6 +29,15 @@ heads, a Q-Former voice-cloning compressor, and DPO post-training).
   and voice adherence (defaults: `temperature=0.3`, `cfg_scale=3`).
 - All generation knobs are exposed under **Generation settings**.
 
+## Architecture
+
+The Space runs on `gradio.Server` — a FastAPI app with Gradio's queueing
+engine on top. The custom dark-themed UI in `index.html` is served at `/`
+via `@app.get("/")`; the synthesis pipeline is exposed at
+`@app.api("/synthesize")`, so requests flow through Gradio's queue
+(concurrency control, ZeroGPU allocation, `gradio_client` compatibility)
+while the frontend stays a self-contained HTML/CSS/JS bundle.
+
 ## Configuration
 
 `config.yaml` selects the checkpoint, codec, preset speakers and default
@@ -43,5 +48,15 @@ generation parameters — re-point the Space without touching code.
 - The model repo is private: set the `HF_TOKEN` Space secret.
 - ZeroGPU: the model is loaded once at startup; each request only runs
   generation inside the GPU context.
-- `create_env.py` re-pins `transformers==5.3.0` at startup (NeMo downgrades
-  it at build time) — it must run before any ML import in `app.py`.
+- `create_env.py` orchestrates a 4-step install at app startup — it must
+  run before any ML import in `app.py`:
+  1. Pin `huggingface-hub>=1.2,<2.0` (compatible with both gradio 6.20
+     and `nemo-toolkit`).
+  2. `pip install --no-deps nemo-toolkit[tts]==2.4.0` (avoiding a downgrade
+     of hub by the resolver).
+  3. Force-reinstall `transformers==5.3.0` (Qwen3.5 backbone that the
+     Gepard checkpoint was trained on).
+  4. Cap `numpy<2.0` so the codec/NeMo stack stays on numpy 1.x.
+- `nemo-toolkit` is installed at runtime (not in `requirements.txt`) to
+  keep gradio 6.20's `huggingface-hub>=1.2` constraint resolvable at
+  build time — NeMo's `transformers<=4.52` would otherwise pull hub<1.0.

app.py

@@ -1,13 +1,19 @@
-"""GEPARD — text-to-speech inference Space (ZeroGPU).
+"""GEPARD — text-to-speech inference Space (ZeroGPU), gradio.Server backend.
 
 Startup order is load-bearing:
-  1. ``create_env.setup_dependencies()`` re-pins transformers BEFORE any
-     ML import — the Space image ships whatever NeMo pinned at build time,
-     but the Gepard checkpoint requires transformers 5.3.0.
+  1. ``create_env.setup_dependencies()`` installs nemo-toolkit and re-pins
+     transformers BEFORE any ML import — the Space image ships gradio 6.20
+     which pins huggingface-hub>=1.2, and NeMo's transformers<=4.52 would
+     pull hub<1.0 at build time. create_env.py upgrades hub first, then
+     installs nemo with --no-deps, then re-pins transformers==5.3.0.
   2. ``spaces`` is imported before torch so ZeroGPU can patch CUDA calls.
   3. The engine (model + codec + speakers) is built ONCE at module level;
      ZeroGPU replays the recorded ``.to("cuda")`` moves when a GPU is
      attached, so no per-request reloading happens.
+
+The UI is a custom HTML/CSS/JS frontend served at ``/``; ``@app.api()``
+exposes the synthesis pipeline through Gradio's queue so the JS client
+(and ``gradio_client``) can call it without colliding on the GPU.
 """
 
 from create_env import setup_dependencies
@@ -28,19 +34,50 @@ except ImportError:  # local run — no-op stand-in
 
         return _wrap
 
+import os  # noqa: E402
 from pathlib import Path  # noqa: E402
 
-import gradio as gr  # noqa: E402
+import numpy as np  # noqa: E402
+import scipy.io.wavfile as wavfile  # noqa: E402
+
+from fastapi.responses import HTMLResponse  # noqa: E402
+
+from gradio import Server  # noqa: E402
+from gradio.data_classes import FileData  # noqa: E402
 
 from gepard_inference.engine import AppConfig, GenerationParams, GepardEngine  # noqa: E402
-from interface import MODE_PRESET, GepardInterface  # noqa: E402
+from interface import MODE_PRESET  # noqa: E402
 
 CONFIG_PATH = Path(__file__).parent / "config.yaml"
 
 config = AppConfig.from_yaml(CONFIG_PATH)
 engine = GepardEngine(config).load()
 
+# Where synthesized WAVs land — same dir as the script so Spaces' persistent
+# volume picks them up across restarts.
+OUT_DIR = Path(__file__).parent / "_out"
+OUT_DIR.mkdir(exist_ok=True)
+
+
+def _save_wav(sample_rate: int, wave: np.ndarray) -> str:
+    """Write a float waveform to a 16-bit PCM WAV; return the absolute path."""
+    import uuid
+
+    # Clip & convert to int16 PCM (browser audio tag handles 16-bit PCM natively).
+    wave = np.asarray(wave, dtype=np.float32)
+    peak = float(np.max(np.abs(wave))) if wave.size else 0.0
+    if peak > 1.0:
+        wave = wave / peak
+    pcm = (wave * 32767.0).clip(-32768, 32767).astype(np.int16)
+    path = OUT_DIR / f"{uuid.uuid4().hex}.wav"
+    wavfile.write(path, sample_rate, pcm)
+    return str(path)
+
 
+app = Server()
+
+
+@app.api()
 @_gpu_decorator(duration=config.gpu_duration)
 def synthesize(
     mode: str,
@@ -52,29 +89,31 @@ def synthesize(
     max_frames: float,
     repetition_penalty: float,
     repetition_window: float,
-):
-    """Gradio handler: resolve the reference voice, then generate speech.
+) -> FileData:
+    """Generate speech from text + a preset speaker or a recorded reference.
 
     Runs inside the ZeroGPU context — both the reference encoding (clone
     mode) and the autoregressive generation share one GPU session.
+
+    Args match the current Gradio Blocks signature exactly so the rest of
+    the codebase (config defaults, examples) stays a drop-in.
     """
-    if not (text or "").strip():
-        raise gr.Error("Please enter some text to synthesize.")
+    text = (text or "").strip()
+    if not text:
+        raise ValueError("Please enter some text to synthesize.")
 
     if mode == MODE_PRESET:
         if not speaker:
-            raise gr.Error("Please choose a preset speaker.")
+            raise ValueError("Please choose a preset speaker.")
         ref_codes = engine.speakers.codes(speaker)
     else:
         if not ref_audio:
-            raise gr.Error("Please record or upload a reference clip.")
+            raise ValueError("Please record or upload a reference clip.")
         ref_codes = engine.encode_reference(ref_audio)
 
     params = GenerationParams(
         temperature=temperature,
         top_k=int(top_k),
-        # CFG is not exposed in the UI: strength comes from config defaults and
-        # the runner's length gate decides whether it applies at all.
         cfg_scale=config.defaults.cfg_scale,
         cfg_frames=config.defaults.cfg_frames,
         stop_threshold=config.defaults.stop_threshold,
@@ -82,14 +121,58 @@ def synthesize(
         repetition_penalty=repetition_penalty,
         repetition_window=int(repetition_window),
     )
-    return engine.synthesize(text, ref_codes, params)
+    sample_rate, wave = engine.synthesize(text, ref_codes, params)
+    return FileData(path=_save_wav(sample_rate, wave))
 
 
-demo = GepardInterface(
-    config=config,
-    speaker_names=engine.speakers.names,
-    synthesize_fn=synthesize,
-).build()
+@app.get("/")
+async def homepage():
+    """Serve the custom HTML/CSS/JS frontend.
+
+    Server is a FastAPI app, so plain ``@app.get`` routes coexist naturally
+    with ``@app.api()`` routes. The frontend lives in ``index.html`` next
+    to this file. Returning an ``HTMLResponse`` (instead of a plain string)
+    sets ``Content-Type: text/html`` so the browser actually renders it.
+    """
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return HTMLResponse(content=f.read())
+
+
+@app.get("/config.json")
+async def public_config():
+    """Static config exposed to the frontend (speaker list, defaults, examples)."""
+    return {
+        "speakers": [
+            {"key": k, "label": config.speaker_labels.get(k, k)}
+            for k in engine.speakers.names
+        ],
+        "defaults": {
+            "temperature": config.defaults.temperature,
+            "top_k": config.defaults.top_k,
+            "max_frames": config.defaults.max_frames,
+            "repetition_penalty": config.defaults.repetition_penalty,
+            "repetition_window": config.defaults.repetition_window,
+        },
+        "limits": {
+            "min_max_frames": 43,
+            "max_max_frames": 1075,
+            "min_repetition_window": 0,
+            "max_repetition_window": 128,
+            "min_repetition_penalty": 1.0,
+            "max_repetition_penalty": 1.5,
+            "min_temperature": 0.05,
+            "max_temperature": 1.0,
+            "min_top_k": 0,
+            "max_top_k": 200,
+        },
+        "examples": [
+            {"speaker": ex.speaker, "label": ex.label, "text": ex.text}
+            for ex in config.examples
+        ],
+        "modes": {"preset": MODE_PRESET, "clone": "Clone a voice"},
+    }
+
 
 if __name__ == "__main__":
-    demo.launch()
+    app.launch(show_error=True)

create_env.py

@@ -3,24 +3,66 @@ import subprocess
 import sys
 
 def setup_dependencies():
+    """Install NeMo and pin transformers in the right order to satisfy
+    gradio 6.20's huggingface-hub>=1.2 requirement while still ending up
+    on transformers 5.3.0 (which the Gepard checkpoint needs).
+
+    Why not put nemo-toolkit in requirements.txt? NeMo's
+    ``nemo-toolkit[tts]==2.4.0`` pulls in ``transformers<=4.52`` (which
+    resolves to 4.51.x), and that requires ``huggingface-hub<1.0`` —
+    conflicting with gradio 6.20's ``huggingface-hub>=1.2`` at build time
+    so pip refuses to resolve. We install nemo-toolkit itself at runtime
+    with ``--no-deps`` instead.
+
+    All of NeMo's OTHER [tts] dependencies (librosa, soundfile, omegaconf,
+    matplotlib, seaborn, einops, kornia, lhotse, lightning, peft,
+    torchmetrics, datasets, …) are pre-installed at build time from
+    requirements.txt — the complete list minus the conflicting
+    transformers pin (source: pypi.org/pypi/nemo-toolkit/2.4.0/json).
+    So installing nemo with --no-deps doesn't miss anything import-time.
+
+    Order is load-bearing:
+      1. transformers==5.3.0 with --no-deps — forces the runtime onto the
+         Qwen3.5 backbone version the Gepard checkpoint was trained on.
+         Combined with the pre-installed hub>=1.2, satisfies gradio 6.20.
+      2. nemo-toolkit[tts]==2.4.0 with --no-deps — installed on top of
+         transformers 5.3.0 without re-resolving its declared (conflicting)
+         transformers<=4.52 constraint.
+      3. numpy<2.0 — keep the NeMo/codec stack on numpy 1.x.
+
+    Idempotent: writes a sentinel file so the install only runs once per
+    container.
+    """
     os.environ["OMP_NUM_THREADS"] = "4"
+
+    sentinel = "/tmp/deps_installed"
+    if os.path.exists(sentinel):
+        return
+
+    pip = [sys.executable, "-m", "pip", "install", "--no-cache-dir"]
     try:
-        if os.path.exists('/tmp/deps_installed'):
-            return
-            
-        # Re-pin transformers on top of whatever NeMo downgraded at build time
-        # (the Gepard checkpoint needs the Qwen3.5 backbone from 5.x). This
-        # upgrades huggingface-hub to 1.x — gradio 5.49 accepts <2.0, so the
-        # UI keeps working. numpy is capped so the force-reinstall does not
-        # bump it to 2.x under the NeMo stack built against 1.26.
-        print("Re-pinning transformers==5.3.0 ...")
-        subprocess.check_call([
-            sys.executable, "-m", "pip", "install", "--force-reinstall", "--no-cache-dir",
-            "transformers==5.3.0", "numpy<2.0"
+        # 1. Pin the transformers + hub versions gradio 6.20 needs, before
+        #    NeMo gets a chance to downgrade them. --no-deps because we
+        #    already have these libraries installed at compatible versions.
+        print("Pinning transformers==5.3.0 + hub>=1.2 (no-deps) ...")
+        subprocess.check_call(pip + [
+            "--no-deps", "transformers==5.3.0", "huggingface-hub>=1.2,<2.0",
         ])
-        
-        with open('/tmp/deps_installed', 'w') as f:
-            f.write('done')
-            
+
+        # 2. Install NeMo on top without re-resolving dependencies. Its
+        #    declared transformers<=4.52 / hub<1.0 would conflict; with
+        #    --no-deps the resolver doesn't see those constraints.
+        print("Installing nemo-toolkit[tts]==2.4.0 (no-deps) ...")
+        subprocess.check_call(pip + ["--no-deps", "nemo-toolkit[tts]==2.4.0"])
+
+        # 3. Cap numpy so a transitive bump doesn't break the NeMo/codec
+        #    stack, which is built against numpy 1.x.
+        print("Capping numpy<2.0 ...")
+        subprocess.check_call(pip + ["numpy<2.0"])
+
+        with open(sentinel, "w") as f:
+            f.write("done")
+
     except Exception as e:
-        print(f"Dependencies setup error: {e}")
+        print(f"Dependencies setup error: {e}")
+        raise

index.html

@@ -0,0 +1,1198 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>GEPARD STUDIO</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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<style>
+  :root {
+    --bg: #fafafa;
+    --bg-elev: #ffffff;
+    --bg-elev-2: #f5f5f7;
+    --bg-input: #ffffff;
+    --bg-viewport: #ffffff;
+    --line: #e5e5ea;
+    --line-strong: #d1d1d6;
+    --line-hairline: #ececef;
+    --text: #1d1d1f;
+    --text-dim: #6e6e73;
+    --text-faint: #a1a1a6;
+    --text-label: #3a3a3c;
+    --accent: #f97316;
+    --accent-hover: #ea580c;
+    --accent-soft: rgba(249, 115, 22, 0.08);
+    --accent-text: #c2410c;
+    --red: #dc2626;
+    --green: #16a34e;
+    --hl-bg: rgba(249, 115, 22, 0.16);
+    --hl-text: #c2410c;
+    --radius-sm: 6px;
+    --radius: 10px;
+    --radius-lg: 16px;
+    --radius-pill: 999px;
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
+    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
+    --shadow-lg: 0 4px 12px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.06);
+  }
+  * { box-sizing: border-box; }
+  html, body {
+    margin: 0; padding: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    letter-spacing: -0.005em;
+  }
+  body { display: flex; flex-direction: column; min-height: 100vh; }
+  .mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
+
+  /* ===== Top bar ===== */
+  .topbar {
+    display: flex; align-items: center; justify-content: space-between;
+    height: 52px; padding: 0 20px;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    border-bottom: 1px solid var(--line-hairline);
+    position: sticky; top: 0; z-index: 10;
+  }
+  .brand { display: flex; align-items: center; gap: 10px; }
+  .brand .logo {
+    width: 26px; height: 26px;
+    background: linear-gradient(135deg, #fbbf24, #f97316, #dc2626);
+    border-radius: 7px;
+    display: inline-flex; align-items: center; justify-content: center;
+    font-size: 13px; color: #fff; font-weight: 700;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  }
+  .brand .name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
+  .brand .name .accent {
+    background: linear-gradient(90deg, #f97316, #dc2626);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  .project-info {
+    display: flex; align-items: center; gap: 12px; margin-left: 18px;
+    padding-left: 18px; border-left: 1px solid var(--line-hairline);
+  }
+  .project-info .name { font-size: 13px; font-weight: 500; color: var(--text-dim); }
+  .stage-pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 4px 10px;
+    background: var(--bg-elev-2);
+    border-radius: var(--radius-pill);
+    font-size: 11px; font-weight: 500;
+    color: var(--text-dim);
+  }
+  .stage-pill .dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--text-faint);
+  }
+  .stage-pill .dot.live { background: var(--accent); box-shadow: 0 0 6px rgba(249,115,22,0.5); }
+  .stage-pill .dot.playing { background: var(--green); box-shadow: 0 0 6px rgba(22,163,74,0.5); animation: pulse 1.4s ease-in-out infinite; }
+  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+
+  /* ===== Viewport ===== */
+  .viewport {
+    margin: 16px 16px 0;
+    background: var(--bg-viewport);
+    border: 1px solid var(--line-hairline);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    display: flex; flex-direction: column;
+  }
+  .viewport-head {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 12px 18px;
+    border-bottom: 1px solid var(--line-hairline);
+  }
+  .viewport-head .left, .viewport-head .right { display: flex; align-items: center; gap: 12px; }
+  .viewport-head .label {
+    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
+  }
+
+  /* Lyrics + input combined */
+  .stage {
+    min-height: 280px;
+    background: var(--bg-viewport);
+    position: relative;
+  }
+  .stage .progress {
+    position: absolute; top: 0; left: 0; right: 0; height: 2px;
+    background: var(--line-hairline);
+    z-index: 2;
+  }
+  .stage .progress .fill {
+    height: 100%; width: 0;
+    background: linear-gradient(90deg, #fbbf24, #f97316, #dc2626);
+    transition: width 0.05s linear;
+  }
+  .stage .text {
+    padding: 56px 40px 48px;
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 1.55;
+    color: var(--text);
+    letter-spacing: -0.015em;
+    max-width: 880px;
+    margin: 0 auto;
+    text-align: center;
+    outline: none;
+    min-height: 280px;
+    display: flex; align-items: center; justify-content: center;
+    flex-wrap: wrap;
+  }
+  .stage .text:focus { outline: none; }
+  .stage .text[data-empty="true"]::before {
+    content: attr(data-placeholder);
+    color: var(--text-faint);
+    font-weight: 300;
+    pointer-events: none;
+    width: 100%;
+  }
+  .stage .text .word {
+    display: inline-block;
+    padding: 2px 4px;
+    margin: 0 1px;
+    border-radius: 6px;
+    color: rgba(29, 29, 31, 0.32);
+    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+  }
+  .stage .text .word.past { color: rgba(29, 29, 31, 0.55); }
+  .stage .text .word.current {
+    color: var(--hl-text);
+    background: var(--hl-bg);
+    transform: scale(1.04);
+  }
+
+  /* Transport (compact) */
+  .transport {
+    display: flex; align-items: center; gap: 14px;
+    padding: 10px 18px;
+    border-top: 1px solid var(--line-hairline);
+  }
+  .transport-btns { display: flex; align-items: center; gap: 6px; }
+  .transport-btns button {
+    appearance: none; border: 0;
+    background: transparent; color: var(--text-dim);
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.15s;
+    border-radius: var(--radius-sm);
+  }
+  .transport-btns button:hover:not(:disabled) { color: var(--text); background: var(--bg-elev-2); }
+  .transport-btns button:disabled { color: var(--text-faint); cursor: not-allowed; }
+  .transport-btns .skip { width: 30px; height: 30px; font-size: 11px; }
+  .transport-btns .play {
+    width: 36px; height: 36px; font-size: 13px;
+    background: var(--text); color: var(--bg-viewport);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  }
+  .transport-btns .play:hover:not(:disabled) { background: #000; }
+  .transport-btns .play:disabled { background: var(--line); color: var(--text-faint); box-shadow: none; }
+  .timecode {
+    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+    font-variant-numeric: tabular-nums;
+    font-size: 13px; font-weight: 500;
+    color: var(--text);
+    letter-spacing: 0.02em;
+  }
+  .timecode .sep { color: var(--text-faint); margin: 0 2px; }
+  .timecode .dur { color: var(--text-dim); }
+  .transport .spacer { flex: 1; }
+  .transport .info {
+    font-size: 12px;
+    color: var(--text-dim);
+  }
+  .transport .info .k { color: var(--text-faint); margin-right: 4px; }
+  .transport .info .v { color: var(--text); font-weight: 500; }
+
+  /* ===== Console (single panel) ===== */
+  .console {
+    margin: 14px 16px 16px;
+    background: var(--bg-elev);
+    border: 1px solid var(--line-hairline);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+  }
+  .console-body {
+    padding: 16px 18px 18px;
+    display: flex; flex-direction: column; gap: 14px;
+  }
+
+  /* Row 1: Source + voice + advanced */
+  .row-source {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 10px;
+    align-items: center;
+  }
+  .seg {
+    display: inline-flex;
+    background: var(--bg-elev-2);
+    border-radius: var(--radius-sm);
+    padding: 2px;
+  }
+  .seg button {
+    appearance: none; border: 0; background: transparent;
+    color: var(--text-dim);
+    padding: 6px 12px;
+    border-radius: 5px;
+    font: inherit; font-weight: 500; font-size: 13px;
+    cursor: pointer; transition: all 0.15s;
+  }
+  .seg button.active {
+    background: var(--bg-elev);
+    color: var(--text);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--line);
+  }
+  .seg button:not(.active):hover { color: var(--text); }
+  select {
+    width: 100%;
+    background: var(--bg-elev-2);
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font: inherit; font-size: 13px;
+    padding: 7px 12px;
+    outline: none;
+    transition: all 0.15s;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    padding-right: 28px;
+  }
+  select:focus { border-color: var(--line-strong); background-color: var(--bg-elev); }
+  .advanced-toggle {
+    appearance: none; border: 0; background: transparent;
+    color: var(--text-dim); font: inherit; font-size: 12px;
+    font-weight: 500;
+    padding: 6px 10px;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: all 0.15s;
+    display: inline-flex; align-items: center; gap: 6px;
+  }
+  .advanced-toggle:hover { color: var(--text); background: var(--bg-elev-2); }
+  .advanced-toggle .chevron {
+    width: 10px; height: 10px;
+    transition: transform 0.2s;
+  }
+  .advanced-toggle.open .chevron { transform: rotate(180deg); }
+
+  /* Ref uploader (compact inline) */
+  .ref-inline {
+    margin-top: 10px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 8px;
+    align-items: center;
+  }
+  .file-drop {
+    border: 1px dashed var(--line-strong);
+    border-radius: var(--radius-sm);
+    padding: 8px 12px;
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .file-drop:hover, .file-drop.drag { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
+  .file-name { font-size: 11px; color: var(--accent-text); margin-top: 4px; }
+
+  /* Reference uploader tabs */
+  .ref-tabs {
+    display: inline-flex;
+    background: var(--bg-elev-2);
+    border-radius: var(--radius-sm);
+    padding: 2px;
+    margin-bottom: 8px;
+  }
+  .ref-tab {
+    appearance: none; border: 0; background: transparent;
+    color: var(--text-dim);
+    padding: 5px 12px;
+    border-radius: 5px;
+    font: inherit; font-weight: 500; font-size: 12px;
+    cursor: pointer; transition: all 0.15s;
+  }
+  .ref-tab.active {
+    background: var(--bg-elev);
+    color: var(--text);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--line);
+  }
+  .ref-tab:not(.active):hover { color: var(--text); }
+  .ref-panel.hidden { display: none; }
+
+  /* Mic UI */
+  .mic-ui {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px;
+    background: var(--bg-elev-2);
+    border-radius: var(--radius-sm);
+  }
+  .mic-btn {
+    appearance: none; border: 0;
+    width: 44px; height: 44px;
+    border-radius: 50%;
+    background: var(--bg-elev);
+    color: var(--text-dim);
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    border: 1px solid var(--line);
+    transition: all 0.15s;
+    flex-shrink: 0;
+  }
+  .mic-btn:hover { color: var(--text); border-color: var(--line-strong); }
+  .mic-btn.recording {
+    background: var(--red); color: white; border-color: transparent;
+    animation: micPulse 1.4s ease-in-out infinite;
+  }
+  .mic-btn.recording .mic-icon { color: white; }
+  .mic-icon { font-size: 14px; color: var(--text-dim); }
+  @keyframes micPulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
+    50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
+  }
+  .mic-info { flex: 1; min-width: 0; }
+  .mic-state { font-size: 12px; color: var(--text-dim); }
+  .mic-btn.recording + .mic-info .mic-state { color: var(--red); font-weight: 500; }
+  .mic-time { font-size: 14px; color: var(--text); font-weight: 500; margin-top: 2px; }
+
+  /* Advanced panel (collapsed by default) */
+  .advanced {
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.25s ease;
+  }
+  .advanced.open { max-height: 400px; }
+  .advanced-inner {
+    padding-top: 12px;
+    border-top: 1px solid var(--line-hairline);
+    margin-top: 4px;
+  }
+  .advanced-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 8px 16px;
+    margin-bottom: 12px;
+    padding: 10px 14px;
+    background: var(--bg-elev-2);
+    border-radius: var(--radius-sm);
+  }
+  .advanced-summary .item {
+    display: flex; align-items: baseline; gap: 8px;
+    font-size: 12px;
+  }
+  .advanced-summary .item .k {
+    color: var(--text-faint);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-size: 10px;
+    font-weight: 600;
+  }
+  .advanced-summary .item .v {
+    color: var(--text);
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .advanced-sliders {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 4px 20px;
+  }
+  .slider {
+    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 4px 0;
+  }
+  .slider .name { font-size: 12px; color: var(--text-dim); }
+  .slider .val {
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 12px; color: var(--text);
+    min-width: 48px; text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+  input[type="range"] {
+    -webkit-appearance: none; appearance: none;
+    width: 100%; height: 16px; background: transparent; cursor: pointer;
+  }
+  input[type="range"]::-webkit-slider-runnable-track {
+    height: 4px; background: var(--line); border-radius: 2px;
+  }
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none;
+    width: 14px; height: 14px; border-radius: 50%;
+    background: var(--accent);
+    margin-top: -5px;
+    box-shadow: 0 0 0 3px var(--bg-elev), 0 1px 3px rgba(0,0,0,0.15);
+    cursor: pointer;
+  }
+  input[type="range"]::-moz-range-track { height: 4px; background: var(--line); border-radius: 2px; }
+  input[type="range"]::-moz-range-thumb {
+    width: 14px; height: 14px; border: 3px solid var(--bg-elev);
+    border-radius: 50%; background: var(--accent);
+    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+    cursor: pointer;
+  }
+
+  /* Row 2: Examples + Render (compact) */
+  .row-actions {
+    display: flex; align-items: center; gap: 14px;
+    flex-wrap: wrap;
+  }
+  .examples {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    flex: 1; min-width: 0;
+  }
+  .example-chip {
+    appearance: none;
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 5px 10px;
+    background: var(--bg-elev-2);
+    border: 1px solid transparent;
+    border-radius: var(--radius-pill);
+    color: var(--text-dim);
+    font: inherit; font-size: 12px;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .example-chip:hover { border-color: var(--line); color: var(--text); background: var(--bg-elev); }
+  .example-chip .tag {
+    font-weight: 600;
+    color: var(--accent-text);
+  }
+  .example-chip .txt { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .example-chip .status { font-size: 10px; color: var(--text-faint); margin-left: 2px; }
+
+  /* Compact render button */
+  .render-btn {
+    appearance: none; border: 0;
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    background: var(--text);
+    color: var(--bg-elev);
+    font: inherit; font-size: 13px; font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    transition: all 0.15s;
+    flex-shrink: 0;
+  }
+  .render-btn:hover:not(:disabled) { background: #000; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+  .render-btn:active:not(:disabled) { transform: translateY(0); }
+  .render-btn:disabled { background: var(--line); color: var(--text-faint); cursor: not-allowed; box-shadow: none; }
+  .render-btn .icon {
+    width: 14px; height: 14px;
+    display: inline-flex; align-items: center; justify-content: center;
+  }
+  .render-btn .spinner {
+    width: 12px; height: 12px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* Toast */
+  .toast {
+    padding: 8px 12px;
+    border-radius: var(--radius-sm);
+    font-size: 12px;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #b91c1c;
+  }
+  .toast.hidden { display: none; }
+
+  /* ===== Mobile / Tablet ===== */
+  @media (max-width: 900px) {
+    .viewport { margin: 12px 12px 0; border-radius: 14px; }
+    .viewport-head { padding: 10px 14px; }
+    .console { margin: 12px 12px 12px; border-radius: 14px; }
+    .advanced-summary { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 600px) {
+    html, body { font-size: 15px; }
+    body { padding-bottom: env(safe-area-inset-bottom); }
+
+    /* Top bar — drop the project info, keep brand + stage pill */
+    .topbar { height: 48px; padding: 0 14px; }
+    .project-info { display: none; }
+
+    /* Viewport */
+    .viewport { margin: 8px 8px 0; border-radius: 12px; }
+    .viewport-head { padding: 10px 14px; }
+    .viewport-head .label { font-size: 10px; }
+    #voice-info { display: none; }
+
+    /* Stage — tighter padding, smaller type, more vertical room */
+    .stage { min-height: 240px; }
+    .stage .text {
+      padding: 40px 22px 36px;
+      font-size: 22px;
+      line-height: 1.5;
+      min-height: 240px;
+    }
+
+    /* Transport — full-width layout, info row hidden */
+    .transport { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
+    .transport-btns .skip { width: 36px; height: 36px; font-size: 12px; }
+    .transport-btns .play { width: 42px; height: 42px; font-size: 14px; }
+    .transport .spacer { flex: 1; }
+    .transport .info { display: none; }
+    .timecode { font-size: 14px; }
+    .timecode #dur-text { font-size: 12px; }
+
+    /* Console */
+    .console { margin: 10px 8px 12px; border-radius: 12px; }
+    .console-body { padding: 14px; gap: 12px; }
+
+    /* Source row — stack vertically */
+    .row-source {
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+    .row-source .seg { width: 100%; }
+    .row-source .seg button { flex: 1; padding: 8px 12px; }
+    .row-source select { width: 100%; padding: 10px 14px; }
+    .row-source .advanced-toggle {
+      width: 100%;
+      justify-content: center;
+      padding: 10px 12px;
+      background: var(--bg-elev-2);
+      border-radius: var(--radius-sm);
+    }
+
+    /* Reference uploader */
+    .ref-inline {
+      grid-template-columns: 1fr;
+      gap: 6px;
+    }
+    .file-drop { padding: 12px; font-size: 13px; }
+
+    /* Advanced panel — single column */
+    .advanced-summary { grid-template-columns: repeat(2, 1fr); gap: 6px 10px; padding: 10px 12px; }
+    .advanced-summary .item { font-size: 11px; }
+    .advanced-sliders { grid-template-columns: 1fr; }
+
+    /* Actions row — examples wrap above, render full-width */
+    .row-actions {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 10px;
+    }
+    .examples { order: 1; }
+    .example-chip { padding: 6px 11px; font-size: 12px; }
+    .render-btn {
+      order: 2;
+      width: 100%;
+      padding: 12px 16px;
+      font-size: 14px;
+      justify-content: center;
+    }
+    .toast { order: 3; }
+
+    /* Toast — slide up from bottom on mobile for visibility */
+    .toast {
+      position: fixed;
+      left: 12px; right: 12px; bottom: 12px;
+      margin: 0;
+      padding: 12px 16px;
+      border-radius: var(--radius);
+      box-shadow: var(--shadow-lg);
+      z-index: 20;
+    }
+  }
+  @media (max-width: 380px) {
+    .stage .text { font-size: 19px; padding: 32px 16px 28px; }
+    .advanced-summary { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+
+<div class="topbar">
+  <div style="display: flex; align-items: center;">
+    <div class="brand">
+      <span class="logo">G</span>
+      <span class="name">GEPARD<span class="accent">.</span></span>
+    </div>
+    <div class="project-info">
+      <span class="name" id="project-name">Session</span>
+    </div>
+  </div>
+  <div class="stage-pill">
+    <span class="dot" id="stage-dot"></span>
+    <span id="stage-text">Ready</span>
+  </div>
+</div>
+
+<section class="viewport">
+  <div class="viewport-head">
+    <div class="left">
+      <span class="label">Script · Audio</span>
+    </div>
+    <div class="right">
+      <span class="mono" id="voice-info" style="font-size: 12px; color: var(--text-dim)">—</span>
+    </div>
+  </div>
+
+  <div class="stage">
+    <div class="progress"><div class="fill" id="progress-fill"></div></div>
+    <div class="text" id="text"
+         contenteditable="true"
+         spellcheck="false"
+         data-placeholder="Type or paste your script here, then press Render."
+         data-empty="true"></div>
+  </div>
+
+  <div class="transport">
+    <div class="transport-btns">
+      <button class="skip" id="stop-btn" type="button" title="Return to start" disabled>⏮</button>
+      <button class="play" id="play-btn" type="button" title="Play / Pause" disabled>▶</button>
+      <button class="skip" id="download-btn" type="button" title="Download WAV" disabled>↓</button>
+    </div>
+    <div class="timecode mono">
+      <span id="tc-s">00</span><span class="sep">:</span><span id="tc-f">00</span>
+      <span style="margin-left: 8px; font-size: 11px; color: var(--text-faint)" id="dur-text">0:00</span>
+    </div>
+    <div class="spacer"></div>
+    <div class="info">
+      <span class="k">Engine</span><span class="v">Gepard · 32 FSQ heads</span>
+    </div>
+  </div>
+</section>
+
+<section class="console">
+  <div class="console-body">
+
+    <div class="row-source">
+      <div class="seg" id="mode-seg">
+        <button id="mode-preset" class="active" type="button">Preset</button>
+        <button id="mode-clone" type="button">Clone</button>
+      </div>
+      <select id="speaker"></select>
+      <button class="advanced-toggle" id="advanced-toggle" type="button">
+        <span>Advanced</span>
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+      </button>
+    </div>
+
+    <div class="ref-inline hidden" id="ref-section">
+      <div class="ref-tabs">
+        <button class="ref-tab active" data-tab="upload" type="button">Upload</button>
+        <button class="ref-tab" data-tab="mic" type="button">Record</button>
+      </div>
+      <div class="ref-panel" data-panel="upload">
+        <div class="file-drop" id="drop">Drop clip · or click to upload</div>
+        <input type="file" id="file-input" accept="audio/*" hidden />
+      </div>
+      <div class="ref-panel hidden" data-panel="mic">
+        <div class="mic-ui" id="mic-ui">
+          <button class="mic-btn" id="mic-btn" type="button">
+            <span class="mic-icon" id="mic-icon">●</span>
+          </button>
+          <div class="mic-info">
+            <div class="mic-state" id="mic-state">Tap to record · ≤ 60s</div>
+            <div class="mic-time mono" id="mic-time">0:00</div>
+          </div>
+        </div>
+      </div>
+      <div class="file-name" id="file-name"></div>
+    </div>
+
+    <div class="advanced" id="advanced">
+      <div class="advanced-inner">
+        <div class="advanced-summary" id="advanced-summary"></div>
+        <div class="advanced-sliders" id="sliders"></div>
+      </div>
+    </div>
+
+    <div class="row-actions">
+      <div class="examples" id="examples"></div>
+      <button class="render-btn" id="render-btn" type="button">
+        <span class="icon" id="render-icon">▶</span>
+        <span id="render-label">Render</span>
+      </button>
+    </div>
+
+    <div class="toast hidden" id="toast"></div>
+
+  </div>
+</section>
+
+<script type="module">
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+const $ = (id) => document.getElementById(id);
+const els = {
+  stageDot: $("stage-dot"), stageText: $("stage-text"),
+  text: $("text"), progressFill: $("progress-fill"),
+  voiceInfo: $("voice-info"),
+  playBtn: $("play-btn"), stopBtn: $("stop-btn"),
+  tcS: $("tc-s"), tcF: $("tc-f"), durText: $("dur-text"),
+  modePreset: $("mode-preset"), modeClone: $("mode-clone"),
+  speaker: $("speaker"),
+  advancedToggle: $("advanced-toggle"), advanced: $("advanced"),
+  advancedSummary: $("advanced-summary"),
+  refSection: $("ref-section"),
+  drop: $("drop"), fileInput: $("file-input"), fileName: $("file-name"),
+  micBtn: $("mic-btn"), micIcon: $("mic-icon"), micState: $("mic-state"), micTime: $("mic-time"),
+  sliders: $("sliders"),
+  examples: $("examples"),
+  renderBtn: $("render-btn"), renderIcon: $("render-icon"), renderLabel: $("render-label"),
+  toast: $("toast"),
+  downloadBtn: $("download-btn"),
+};
+
+let cfg = null;
+let client = null;
+let mode = "preset";
+let refFile = null;
+let audioEl = new Audio();
+let currentSubmission = null;
+
+let wordSpans = [];
+let hlRAF = null;
+let isPlaying = false;
+
+const sliderSpec = [
+  { key: "temperature",        label: "Temperature",  fmt: v => Number(v).toFixed(2) },
+  { key: "top_k",              label: "Top-K",        fmt: v => String(Math.round(v)) },
+  { key: "max_frames",         label: "Max Frames",   fmt: v => String(Math.round(v)) },
+  { key: "repetition_penalty", label: "Rep. Penalty", fmt: v => Number(v).toFixed(2) },
+  { key: "repetition_window",  label: "Rep. Window",  fmt: v => String(Math.round(v)) },
+];
+
+const pad = (n, w = 2) => String(Math.floor(n)).padStart(w, "0");
+const fmtTime = (s) => { if (!isFinite(s)) return "0:00"; const m = Math.floor(s / 60); const r = Math.floor(s % 60); return `${m}:${pad(s%60)}`; };
+
+const setStage = (state, text) => {
+  els.stageDot.classList.remove("live", "playing");
+  if (state) els.stageDot.classList.add(state);
+  els.stageText.textContent = text;
+};
+const setBusy = (busy) => {
+  els.renderBtn.disabled = busy;
+  if (busy) {
+    els.renderIcon.innerHTML = '<span class="spinner"></span>';
+    els.renderLabel.textContent = "Rendering";
+  } else {
+    els.renderIcon.textContent = "▶";
+    els.renderLabel.textContent = "Render";
+  }
+};
+const showError = (msg) => { els.toast.textContent = msg; els.toast.classList.remove("hidden"); };
+const clearError = () => { els.toast.classList.add("hidden"); els.toast.textContent = ""; };
+
+// ---------- Mode ----------
+const setMode = (m) => {
+  mode = m;
+  els.modePreset.classList.toggle("active", m === "preset");
+  els.modeClone.classList.toggle("active", m !== "preset");
+  els.refSection.classList.toggle("hidden", m !== "clone");
+};
+els.modePreset.addEventListener("click", () => setMode("preset"));
+els.modeClone.addEventListener("click", () => setMode("clone"));
+
+// ---------- Reference: upload tabs ----------
+// Tab switching
+document.querySelectorAll(".ref-tab").forEach(tab => {
+  tab.addEventListener("click", () => {
+    document.querySelectorAll(".ref-tab").forEach(t => t.classList.remove("active"));
+    tab.classList.add("active");
+    const target = tab.dataset.tab;
+    document.querySelectorAll(".ref-panel").forEach(p => {
+      p.classList.toggle("hidden", p.dataset.panel !== target);
+    });
+  });
+});
+
+// File drop / upload
+els.drop.addEventListener("click", () => els.fileInput.click());
+els.fileInput.addEventListener("change", (e) => { const f = e.target.files[0]; if (f) setRefFile(f); });
+["dragenter", "dragover"].forEach(ev => els.drop.addEventListener(ev, (e) => { e.preventDefault(); els.drop.classList.add("drag"); }));
+["dragleave", "drop"].forEach(ev => els.drop.addEventListener(ev, (e) => { e.preventDefault(); els.drop.classList.remove("drag"); }));
+els.drop.addEventListener("drop", (e) => { const f = e.dataTransfer.files[0]; if (f) setRefFile(f); });
+const setRefFile = (f) => { refFile = f; els.fileName.textContent = `✓ ${f.name}`; };
+
+// ---------- Microphone recording (MediaRecorder API) ----------
+let mediaRecorder = null;
+let micStream = null;
+let micChunks = [];
+let micStartedAt = 0;
+let micTimer = null;
+
+const stopMic = () => {
+  if (mediaRecorder && mediaRecorder.state === "recording") {
+    mediaRecorder.stop();
+  }
+  if (micStream) {
+    micStream.getTracks().forEach(t => t.stop());
+    micStream = null;
+  }
+  if (micTimer) { clearInterval(micTimer); micTimer = null; }
+  els.micBtn.classList.remove("recording");
+};
+
+const startMic = async () => {
+  try {
+    micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+  } catch (err) {
+    showError(`Microphone access denied: ${err.message}`);
+    return;
+  }
+  micChunks = [];
+  mediaRecorder = new MediaRecorder(micStream);
+  mediaRecorder.ondataavailable = (e) => { if (e.data.size) micChunks.push(e.data); };
+  mediaRecorder.onstop = () => {
+    const blob = new Blob(micChunks, { type: "audio/webm" });
+    const file = new File([blob], `recording-${Date.now()}.webm`, { type: "audio/webm" });
+    setRefFile(file);
+    els.micState.textContent = "Recorded · ready to render";
+  };
+  mediaRecorder.start();
+  micStartedAt = Date.now();
+  els.micBtn.classList.add("recording");
+  els.micState.textContent = "Recording · tap to stop";
+  els.micTime.textContent = "0:00";
+  micTimer = setInterval(() => {
+    const elapsed = (Date.now() - micStartedAt) / 1000;
+    const max = cfg?.max_ref_seconds || 60;
+    if (elapsed >= max) { stopMic(); return; }
+    const m = Math.floor(elapsed / 60);
+    const s = Math.floor(elapsed % 60);
+    els.micTime.textContent = `${m}:${String(s).padStart(2, "0")}`;
+  }, 200);
+};
+
+els.micBtn.addEventListener("click", () => {
+  if (els.micBtn.classList.contains("recording")) stopMic();
+  else startMic();
+});
+
+// ---------- Advanced toggle ----------
+els.advancedToggle.addEventListener("click", () => {
+  els.advancedToggle.classList.toggle("open");
+  els.advanced.classList.toggle("open");
+});
+
+// ---------- Script editor (combined input + lyrics) ----------
+// Two modes:
+//   - idle (no audio loaded): editable contenteditable, shows placeholder
+//   - playing: highlights current word; clicking back into edit clears highlights
+const updatePlaceholder = () => {
+  const txt = els.text.innerText.trim();
+  els.text.setAttribute("data-empty", txt.length === 0 ? "true" : "false");
+};
+els.text.addEventListener("input", () => {
+  updatePlaceholder();
+  clearHighlight();
+});
+els.text.addEventListener("focus", () => {
+  clearHighlight();
+  isPlaying = false;
+});
+els.text.addEventListener("blur", () => {
+  updatePlaceholder();
+});
+const scriptText = () => {
+  const t = els.text.innerText.trim();
+  return t.length === 0 ? "" : t;
+};
+
+// Tokenize the current text into word spans for highlighting
+const tokenize = (text) => {
+  els.text.innerHTML = "";
+  wordSpans = [];
+  const tokens = text.split(/(\s+)/);
+  for (const tok of tokens) {
+    if (/^\s+$/.test(tok)) {
+      els.text.appendChild(document.createTextNode(tok));
+    } else if (tok.length) {
+      const span = document.createElement("span");
+      span.className = "word";
+      span.textContent = tok;
+      els.text.appendChild(span);
+      wordSpans.push(span);
+    }
+  }
+  updatePlaceholder();
+};
+const clearHighlight = () => {
+  wordSpans.forEach(s => s.classList.remove("current", "past"));
+};
+const setCurrentWord = (idx) => {
+  for (let i = 0; i < wordSpans.length; i++) {
+    const s = wordSpans[i];
+    s.classList.remove("current");
+    if (i < idx) s.classList.add("past");
+    else s.classList.remove("past");
+  }
+  if (idx >= 0 && idx < wordSpans.length) {
+    const cur = wordSpans[idx];
+    cur.classList.add("current");
+    cur.classList.remove("past");
+  }
+};
+
+// ---------- Sliders + summary ----------
+const buildSliders = () => {
+  els.sliders.innerHTML = "";
+  els.advancedSummary.innerHTML = "";
+  sliderSpec.forEach(spec => {
+    const min = cfg.limits[`min_${spec.key}`];
+    const max = cfg.limits[`max_${spec.key}`];
+    const def = cfg.defaults[spec.key];
+    const step = spec.key === "temperature" || spec.key === "repetition_penalty" ? 0.01 : 1;
+
+    // Slider row
+    const row = document.createElement("div"); row.className = "slider";
+    row.innerHTML = `<span class="name">${spec.label}</span><span class="val mono" id="sv-${spec.key}">${spec.fmt(def)}</span><input type="range" id="sl-${spec.key}" min="${min}" max="${max}" step="${step}" value="${def}" style="grid-column: 1 / -1" />`;
+    els.sliders.appendChild(row);
+    const input = row.querySelector("input"), out = row.querySelector(".val");
+    input.addEventListener("input", () => {
+      out.textContent = spec.fmt(input.value);
+      updateSummary();
+    });
+
+    // Summary chip
+    const item = document.createElement("div"); item.className = "item";
+    item.innerHTML = `<span class="k">${spec.label}</span><span class="v" id="sum-${spec.key}">${spec.fmt(def)}</span>`;
+    els.advancedSummary.appendChild(item);
+  });
+};
+const updateSummary = () => {
+  sliderSpec.forEach(spec => {
+    const out = $(`sum-${spec.key}`);
+    if (out) out.textContent = spec.fmt(sliderValue(spec.key));
+  });
+};
+const sliderValue = (key) => Number($(`sl-${key}`).value);
+
+// ---------- Player ----------
+const loadAudio = (url, script, filename = "gepard.wav") => {
+  audioEl = new Audio(url);
+  audioEl.preload = "auto";
+  audioEl._downloadName = filename;
+  els.downloadBtn.disabled = false;
+  els.downloadBtn.onclick = () => {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+  };
+  audioEl.addEventListener("loadedmetadata", () => {
+    els.durText.textContent = fmtTime(audioEl.duration);
+    els.playBtn.disabled = false;
+    els.stopBtn.disabled = false;
+    setStage("", "Ready");
+    tokenize(script);
+    clearHighlight();
+    const voiceLabel = els.speaker.options[els.speaker.selectedIndex]?.textContent || "Cloned";
+    els.voiceInfo.textContent = voiceLabel;
+  });
+  audioEl.addEventListener("timeupdate", () => {
+    const t = audioEl.currentTime;
+    const d = audioEl.duration;
+    const fps = 24;
+    els.tcS.textContent = pad(t);
+    els.tcF.textContent = pad((t - Math.floor(t)) * fps);
+    const pct = d ? (t / d) * 100 : 0;
+    els.progressFill.style.width = `${pct}%`;
+  });
+  audioEl.addEventListener("play", () => {
+    els.playBtn.textContent = "❚❚";
+    isPlaying = true;
+    setStage("playing", "Playing");
+  });
+  audioEl.addEventListener("pause", () => {
+    els.playBtn.textContent = "▶";
+    isPlaying = false;
+    setStage("", "Paused");
+  });
+  audioEl.addEventListener("ended", () => {
+    els.playBtn.textContent = "▶";
+    isPlaying = false;
+    clearHighlight();
+    setStage("", "Ready");
+  });
+};
+els.playBtn.addEventListener("click", () => {
+  if (!audioEl.src) return;
+  if (audioEl.paused) audioEl.play();
+  else audioEl.pause();
+});
+els.stopBtn.addEventListener("click", () => {
+  if (!audioEl.src) return;
+  audioEl.pause();
+  audioEl.currentTime = 0;
+  clearHighlight();
+});
+els.text.addEventListener("click", () => {
+  // Allow normal editing on click
+});
+
+// Highlight loop (runs always, no-ops without audio)
+const highlightLoop = () => {
+  if (isPlaying && audioEl.duration && wordSpans.length) {
+    const ratio = Math.min(1, audioEl.currentTime / audioEl.duration);
+    const idx = Math.min(wordSpans.length - 1, Math.floor(ratio * wordSpans.length));
+    setCurrentWord(idx);
+  }
+  hlRAF = requestAnimationFrame(highlightLoop);
+};
+
+// ---------- Examples ----------
+// Cache: example_label -> { url, blob, script, speaker, filename }
+const exampleCache = new Map();
+
+const renderExamples = (items) => {
+  els.examples.innerHTML = "";
+  items.forEach(ex => {
+    const chip = document.createElement("button");
+    chip.type = "button"; chip.className = "example-chip";
+    chip.innerHTML = `<span class="tag">${ex.label}</span><span class="txt">${ex.text.slice(0,50)}${ex.text.length > 50 ? "…" : ""}</span><span class="status" data-status="${ex.label}"></span>`;
+    chip.addEventListener("click", async () => {
+      // Always pre-fill the script so the user can edit it
+      tokenize(ex.text);
+      els.text.focus();
+      const range = document.createRange();
+      range.selectNodeContents(els.text);
+      range.collapse(false);
+      const sel = window.getSelection();
+      sel.removeAllRanges(); sel.addRange(range);
+      setMode("preset");
+      els.speaker.value = ex.speaker;
+
+      const cached = exampleCache.get(ex.label);
+      if (cached) {
+        // Play the cached audio
+        loadAudio(cached.url, cached.script, cached.filename);
+        audioEl.addEventListener("loadedmetadata", () => audioEl.play(), { once: true });
+      } else {
+        // Fallback: synthesize now (slow first time, then becomes cached)
+        await synthesizeForExample(ex);
+      }
+    });
+    els.examples.appendChild(chip);
+  });
+};
+
+const synthesizeForExample = async (ex) => {
+  const args = {
+    mode: cfg.modes.preset,
+    speaker: ex.speaker,
+    ref_audio: null,
+    text: ex.text,
+    temperature: sliderValue("temperature"),
+    top_k: sliderValue("top_k"),
+    max_frames: sliderValue("max_frames"),
+    repetition_penalty: sliderValue("repetition_penalty"),
+    repetition_window: sliderValue("repetition_window"),
+  };
+  const statusEl = document.querySelector(`[data-status="${ex.label}"]`);
+  if (statusEl) statusEl.textContent = " · …";
+  try {
+    const sub = await client.submit("/synthesize", args);
+    for await (const event of sub) {
+      if (event.type === "data") {
+        const data = event.data?.[0];
+        if (data?.url) {
+          const resp = await fetch(data.url); const blob = await resp.blob();
+          const url = URL.createObjectURL(blob);
+          const filename = `gepard-${ex.speaker}-${ex.label.toLowerCase().replace(/\s+/g, "-")}.wav`;
+          exampleCache.set(ex.label, { url, blob, script: ex.text, speaker: ex.speaker, filename });
+          if (statusEl) statusEl.textContent = " · ✓";
+          loadAudio(url, ex.text, filename);
+          audioEl.addEventListener("loadedmetadata", () => audioEl.play(), { once: true });
+        }
+      }
+    }
+  } catch (err) {
+    if (statusEl) statusEl.textContent = " · !";
+    console.error(err);
+  }
+};
+
+// ---------- Submit ----------
+els.renderBtn.addEventListener("click", async () => {
+  clearError();
+  const text = scriptText();
+  if (!text) { showError("Add some text to your script first."); els.text.focus(); return; }
+  if (mode === "preset" && !els.speaker.value) { showError("Choose a voice first."); return; }
+  if (mode === "clone" && !refFile) { showError("Upload a reference clip first."); return; }
+  const args = {
+    mode: mode === "preset" ? cfg.modes.preset : cfg.modes.clone,
+    speaker: mode === "preset" ? els.speaker.value : "",
+    ref_audio: mode === "clone" ? handle_file(refFile) : null,
+    text,
+    temperature: sliderValue("temperature"),
+    top_k: sliderValue("top_k"),
+    max_frames: sliderValue("max_frames"),
+    repetition_penalty: sliderValue("repetition_penalty"),
+    repetition_window: sliderValue("repetition_window"),
+  };
+  setBusy(true);
+  setStage("live", "Rendering");
+  try {
+    currentSubmission = await client.submit("/synthesize", args);
+    for await (const event of currentSubmission) {
+      if (event.type === "data") {
+        const data = event.data?.[0];
+        if (data?.url) {
+          const resp = await fetch(data.url); const blob = await resp.blob();
+          loadAudio(URL.createObjectURL(blob), text);
+          // Auto-play once loaded
+          audioEl.addEventListener("loadedmetadata", () => audioEl.play(), { once: true });
+        }
+      }
+    }
+  } catch (err) {
+    console.error(err); showError(err?.message || String(err));
+    setStage("", "Error");
+  } finally {
+    setBusy(false); currentSubmission = null;
+  }
+});
+
+// Enter to render when not editing text
+els.text.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault();
+    els.renderBtn.click();
+  }
+});
+
+// ---------- Boot ----------
+(async () => {
+  cfg = await fetch("/config.json").then(r => r.json());
+  cfg.speakers.forEach(s => { const o = document.createElement("option"); o.value = s.key; o.textContent = s.label; els.speaker.appendChild(o); });
+  buildSliders();
+  renderExamples(cfg.examples);
+  client = await Client.connect(window.location.origin);
+  highlightLoop();
+
+  // Lazy cache: warm the first 3 examples in the background so first
+  // click is instant. Sequential to avoid GPU contention; failures are
+  // silent (next click will retry).
+  (async () => {
+    for (const ex of cfg.examples.slice(0, 3)) {
+      try { await synthesizeForExample(ex); } catch (e) { /* skip */ }
+    }
+  })();
+})();
+</script>
+</body>
+</html>

requirements.txt

@@ -1,14 +1,90 @@
 # GEPARD Space dependencies.
 #
 # torch is provided by the Space image — do NOT pin it here.
-# huggingface-hub is deliberately NOT listed: at build time the resolver picks
-# a 0.x hub (required by NeMo's transformers<=4.52 pin); at app startup
-# create_env.py force-reinstalls transformers==5.3.0, which upgrades hub to
-# 1.x — still within gradio 5.49's accepted range (>=0.33.5,<2.0).
-nemo-toolkit[tts]==2.4.0
+# gradio is pinned via sdk_version in README.md (the Dockerfile installs it
+# with the [oauth,mcp] extras). Don't re-pin it here.
+#
+# Why does nemo-toolkit[tts]==2.4.0 itself NOT appear here? Its
+# `transformers<=4.52,>=4.51` constraint pulls in transformers 4.51.x which
+# requires huggingface-hub<1.0 — conflicting with gradio 6.20's
+# hub>=1.2 at build-time resolution. Install nemo itself in create_env.py
+# with `--no-deps` at runtime, AFTER pinning transformers==5.3.0.
+#
+# Everything ELSE NeMo's [tts] extra needs IS listed below, pre-installed
+# at build time — this is the full nemo-toolkit[tts]==2.4.0 dependency
+# graph minus nemo-toolkit itself and the conflicting `transformers` pin.
+# That avoids the ImportError whack-a-mole that `--no-deps` nemo caused.
+# (Source: pypi.org/pypi/nemo-toolkit/2.4.0/json, `tts` extra.)
 safetensors
-librosa>=0.10.0
+librosa>=0.10.1
 soundfile
-omegaconf
 pyyaml
-numpy
+numpy<2.0
+scipy>=0.14
+ruamel.yaml
+omegaconf<=2.3
+webdataset>=0.2.86
+pandas
+tqdm>=4.41.0
+wget
+wrapt
+numba
+fsspec==2024.12.0
+python-dateutil
+text-unidecode
+scikit-learn
+tensorboard
+onnx>=1.7.0
+protobuf~=5.29.5
+setuptools>=70.0.0
+einops
+kornia
+matplotlib
+seaborn
+janome
+jieba
+pypinyin
+pypinyin-dict
+attrdict
+cdifflib==1.2.6
+nltk
+braceexpand
+editdistance
+jiwer<4.0.0,>=3.1.0
+kaldi-python-io
+lhotse!=1.31.0
+marshmallow
+optuna
+packaging
+pyannote.core
+pyannote.metrics
+pydub
+pyloudnorm
+resampy
+texterrors<1.0.0
+whisper_normalizer
+num2words
+inflect
+mediapy==1.1.6
+sacremoses>=0.0.43
+sentencepiece<1.0.0
+cloudpickle
+fiddle
+hydra-core<=1.3.2,>1.3
+lightning<=2.4.0,>2.2.1
+peft
+torchmetrics>=0.11.0
+wandb
+datasets
+# Remaining [tts]-extra deps that are platform-conditional (linux x86_64 —
+# which is what HF Spaces runs on).
+bitsandbytes==0.45.5
+sox<=1.5.0
+# NOTE: nemo_text_processing is also part of the [tts] extra on linux x86_64,
+# but it pulls pynini==2.1.6.post1 (a heavy C++ build). Not pre-installed —
+# add it only if the runtime hits an ImportError naming it.
+# transformers 5.x runtime imports (transformers itself is installed at
+# runtime in create_env.py due to the NeMo conflict above; these are its
+# runtime deps that --no-deps skips).
+regex
+tokenizers>=0.22.0,<=0.23.0   # pinned to transformers 5.3.0's accepted range