Spaces:

owensong
/

Inflect-v2

Running on Zero

akhaliq HF Staff Claude commited on 3 days ago

Commit

dc6e1bc

1 Parent(s): 5be45dc

Fix audio URL handling + redesign UI as audio studio

Backend:
- Endpoints now return plain serializable dicts {url, filename} instead
of FileData, fixing 'Cannot read properties of undefined (reading url)'
in the JS client under gradio.Server
- Serve rendered WAVs via a /rendered/{name} FileResponse route with
path-traversal guard; generated files live in rendered/ (gitignored)

Frontend: full redesign as a professional audio studio
- Top bar with brand, live SR/RTF/chars meters + status LED, tab nav
- Left control rack (script, voice model, delivery, advanced, transport)
- Stage with now-playing badge, transport (play/stop/restart),
canvas waveform with playhead + chunk markers, seek, VU meters,
status strip, karaoke script that lights up as spoken, take tools
- Compare view with per-model mini waveforms, playheads, seek, download
- Waveforms drawn from decoded PCM; reads res.data[0].url directly

Co-Authored-By: Claude <noreply@anthropic.com>

Files changed (3) hide show

.gitignore +1 -0
app.py +24 -8
index.html +596 -640

.gitignore CHANGED Viewed

@@ -1,3 +1,4 @@
 __pycache__/
 *.py[cod]
 .cache/

 __pycache__/
 *.py[cod]
 .cache/
+rendered/

app.py CHANGED Viewed

@@ -4,7 +4,6 @@ import logging
 import os
 import re
 import sys
-import tempfile
 import threading
 import time
 from dataclasses import dataclass
@@ -40,7 +39,6 @@ sys.path.insert(0, str(RUNTIME))
 sys.path.insert(0, str(ROOT))
 from gradio import Server
-from gradio.data_classes import FileData
 # Register ONNX Runtime / model asset MIME types. Windows (and some containers)
 # do not map these by default, and FileResponse would otherwise serve the
@@ -282,12 +280,22 @@ def validate(
     return text, float(speed), float(variation), float(pitch_steps), int(seed)
-def render_wav(sample_rate: int, samples: np.ndarray) -> FileData:
-    """Persist PCM16 samples to a WAV and return a Gradio FileData handle."""
-    handle, out_path = tempfile.mkstemp(suffix=".wav", prefix="inflect_")
-    os.close(handle)
-    sf.write(out_path, samples, sample_rate, subtype="PCM_16")
-    return FileData(path=out_path)
 @app.api(concurrency_limit=1)
@@ -366,6 +374,14 @@ async def _cross_origin_isolation(request, call_next):
     return response
 @app.get(STATIC_URL + "/{path:path}")
 async def serve_web_runtime(path: str):
     full = (WEB_RUNTIME / path).resolve()

 import os
 import re
 import sys
 import threading
 import time
 from dataclasses import dataclass
 sys.path.insert(0, str(ROOT))
 from gradio import Server
 # Register ONNX Runtime / model asset MIME types. Windows (and some containers)
 # do not map these by default, and FileResponse would otherwise serve the
     return text, float(speed), float(variation), float(pitch_steps), int(seed)
+WAV_STORE = ROOT / "rendered"
+WAV_STORE.mkdir(exist_ok=True)
+WAV_URL = "/rendered"
+def render_wav(sample_rate: int, samples: np.ndarray) -> dict:
+    """Persist PCM16 samples to a WAV and return a serializable file handle.
+    @app.api() endpoints return JSON to the JS client, so we hand back a plain
+    dict (url + filename) rather than a FileData object whose shape depends on
+    Gradio's component serialization.
+    """
+    name = f"{int(time.perf_counter() * 1000)}_{os.getpid()}.wav"
+    out_path = WAV_STORE / name
+    sf.write(str(out_path), samples, sample_rate, subtype="PCM_16")
+    return {"url": f"{WAV_URL}/{name}", "filename": name}
 @app.api(concurrency_limit=1)
     return response
+@app.get(WAV_URL + "/{name}")
+async def serve_rendered_wav(name: str):
+    full = (WAV_STORE / name).resolve()
+    if not full.is_file() or full.parent != WAV_STORE.resolve():
+        return HTMLResponse("Not found", status_code=404)
+    return FileResponse(str(full), media_type="audio/wav")
 @app.get(STATIC_URL + "/{path:path}")
 async def serve_web_runtime(path: str):
     full = (WEB_RUNTIME / path).resolve()

index.html CHANGED Viewed

@@ -3,746 +3,702 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Inflect v2 · speech playground</title>
 <link rel="icon" href="/web_runtime/favicon.svg" type="image/svg+xml" />
 <style>
 :root{
   color-scheme:dark;
-  --paper:#0e1110;--panel:#161a17;--panel-2:#131714;--well:#10140f;
-  --ink:#f4f4ee;--muted:#9aa49c;--line:#2a322d;--line-soft:#212823;
-  --signal:#2486ff;--signal-hover:#52a0ff;--signal-soft:#15263b;
-  --accent:#4ade80;--warn:#f59e0b;
 }
 *{box-sizing:border-box}
-html,body{margin:0;padding:0}
 body{
-  background:var(--paper);color:var(--ink);
   font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
   line-height:1.5;-webkit-font-smoothing:antialiased;
 }
-.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,3.4vw,40px) 64px}
-/* Hero */
-.hero{padding:24px 0 16px;border-bottom:1px solid var(--line);margin-bottom:26px}
-.hero-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
-.eyebrow{color:var(--signal);font:700 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
-.links{display:flex;align-items:center;gap:18px;font-size:12px;font-weight:700}
-.links a{color:var(--muted);text-decoration:none;transition:color .15s ease}
-.links a:hover{color:var(--ink)}
-.hero h1{margin:16px 0 8px;font-size:clamp(34px,5.2vw,52px);line-height:1;letter-spacing:-.042em;font-weight:680}
-.hero p{margin:0;max-width:680px;color:var(--muted);font-size:13.5px}
-/* Tabs */
-.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel-2)}
-.tabs button{
-  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
-  min-height:56px;padding:11px 16px;border:0;background:transparent;cursor:pointer;
-  text-align:left;color:var(--ink);font-size:13px;font-weight:800;line-height:1.2;
-  transition:background .16s ease,color .16s ease;
 }
-.tabs button+button{border-left:1px solid var(--line)}
-.tabs button small{margin-top:4px;color:var(--muted);font-size:10px;font-weight:550;letter-spacing:.01em}
-.tabs button:hover{background:#1a232c}
-.tabs button.active{background:var(--signal-soft);box-shadow:inset 0 -2px 0 var(--signal)}
-.tabs button.active small{color:#a9c7e8}
-.tabpane{display:none;margin-top:18px}
-.tabpane.active{display:block}[id="pane-hosted"].active,[id="pane-browser"].active{display:block}
-.mode-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin:8px 0 18px;padding:10px 13px;border:1px solid var(--line);border-left:2px solid var(--signal);border-radius:3px;background:var(--panel-2)}
-.mode-banner strong{display:block;color:var(--ink);font-size:12px}
-.mode-banner span{color:var(--muted);font-size:11px;line-height:1.45}
-.mode-badge{padding:5px 8px;border:1px solid #356ea8;border-radius:2px;color:#dceaff;font:750 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
-/* Card */
-.card{border:1px solid var(--line);border-radius:6px;background:var(--panel);overflow:hidden}
-.card+.card{margin-top:14px}
-.card-pad{padding:18px 20px 20px}
-/* Form */
-.field{margin-bottom:16px}
-.field>label{display:block;font-size:12px;font-weight:750;letter-spacing:.02em;margin-bottom:7px}
 textarea,input[type="text"],input[type="number"],select{
-  width:100%;background:var(--well);color:var(--ink);border:1px solid var(--line);
-  border-radius:4px;padding:12px 13px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s ease
 }
-textarea:focus,input:focus,select:focus{border-color:var(--signal)}
-textarea{min-height:88px;resize:vertical;font-size:15px;line-height:1.55}
-.examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
-.examples button{background:var(--panel-2);border:1px solid var(--line);border-radius:3px;color:var(--muted);font-size:11px;padding:5px 9px;cursor:pointer;transition:color .15s,border-color .15s}
-.examples button:hover{color:var(--ink);border-color:#527aa6}
-/* Segmented (model switch) */
-.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--well)}
 .seg input{position:absolute;opacity:0;width:0;height:0}
-.seg label{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:48px;padding:9px 13px;cursor:pointer;border:0;background:transparent;transition:background .15s ease}
-.seg label+label{border-left:1px solid var(--line)}
-.seg label strong{font-size:13px;font-weight:800}
-.seg label small{color:var(--muted);font-size:10.5px;margin-top:2px}
-.seg input:checked+strong{color:#fff}
-.seg label:has(input:checked){background:var(--well);box-shadow:inset 0 -2px 0 var(--signal)}
-/* Sliders */
-.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin:16px 0}
-.slider{display:flex;flex-direction:column;gap:7px}
-.slider .row{display:flex;justify-content:space-between;align-items:baseline}
-.slider .row label{font-size:12px;font-weight:750;letter-spacing:.02em}
-.slider .row .val{font:600 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--signal)}
 input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line-soft);border-radius:4px;outline:none}
-input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--signal);cursor:pointer;border:2px solid var(--paper)}
-input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--paper);border-radius:50%;background:var(--signal);cursor:pointer}
-.slider small{color:var(--muted);font-size:10.5px;line-height:1.4}
-details.adv{margin:6px 0 0;border:1px solid var(--line-soft);border-left:2px solid #344138;border-radius:3px;background:var(--well)}
-details.adv summary{padding:10px 13px;cursor:pointer;font-size:12px;font-weight:740;letter-spacing:.01em;list-style:none}
 details.adv summary::-webkit-details-marker{display:none}
-details.adv summary::after{content:"▾";float:right;color:var(--muted);transition:transform .2s}
-details.adv[open] summary::after{transform:rotate(0)}
-details.adv .body{padding:2px 13px 14px}
-/* Actions */
-.actions{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
-.btn{min-height:46px;padding:0 22px;border-radius:3px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:13.5px;font-weight:760;cursor:pointer;transition:background .15s,border-color .15s}
-.btn:hover{background:#1a232c;border-color:#527aa6}
-.btn.primary{border:0;background:var(--signal);color:#fff;font-weight:820}
-.btn.primary:hover{background:var(--signal-hover)}
-.btn.primary:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
-/* Status */
-.status{margin-top:14px;padding:11px 14px;background:var(--signal-soft);border:1px solid #294e78;border-radius:4px;color:#dceaff;font-size:12px;line-height:1.55}
-.status.empty{background:var(--panel-2);border-color:var(--line);color:var(--muted)}
-.status code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
-.queue{margin-top:9px;font-size:11.5px;color:#a9c7e8}
-/* Player */
-.player{margin-top:18px}
-.player-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
-.play-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:0;background:var(--signal);color:#fff;font-size:20px;cursor:pointer;flex-shrink:0;transition:background .15s,transform .1s}
-.play-btn:hover{background:var(--signal-hover)}
-.play-btn:active{transform:scale(.96)}
-.play-btn:disabled{opacity:.4;cursor:not-allowed;background:var(--line)}
-.time{font:600 11.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
-.time .now{color:var(--ink)}
-.scrub{position:relative;flex:1;min-width:200px;height:24px;display:flex;align-items:center}
-.scrub input{width:100%}
-.markers{position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);pointer-events:none}
-.marker{position:absolute;top:0;width:1px;height:6px;background:rgba(255,255,255,.18)}
-.chunk-active{opacity:.18}
-.play-btn g{color:#fff}
-.download-row{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap}
-a.dl{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line);border-radius:3px;background:var(--panel-2);color:var(--ink);font-size:12px;font-weight:680;text-decoration:none;transition:border-color .15s}
-a.dl:hover{border-color:#527aa6}
-.karaoke{position:relative;background:var(--well);border:1px solid var(--line);border-radius:4px;padding:18px 22px;margin-top:18px;max-height:320px;overflow-y:auto;font-size:17px;line-height:1.75;letter-spacing:.005em}
-.karaoke .chunk{display:inline;color:var(--muted);transition:color .22s ease,background-color .22s ease;box-decoration-break:clone;-webkit-box-decoration-break:clone}
 .karaoke .chunk.speaking{color:var(--ink)}
-.karaoke .chunk.spoken{color:#7d877f}
-.karaoke .chunk.speaking::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--signal);margin-left:1px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
-.fade{opacity:0;transition:opacity .35s ease}
-.fade.in{opacity:1}
-@keyframes blink{50%{opacity:0}}
-/* Compare */
-.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
-.compare-card{border:1px solid var(--line);border-radius:5px;background:var(--panel);overflow:hidden}
-.compare-card .head{padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);font-size:12px;font-weight:780}
-.compare-card .head small{display:block;color:var(--muted);font-weight:540;margin-top:2px}
-.compare-card .body{padding:14px}
-.mini-player{display:flex;align-items:center;gap:11px}
-.mini-play{width:40px;height:40px;border-radius:50%;border:0;background:var(--signal);color:#fff;font-size:14px;cursor:pointer;flex-shrink:0;transition:background .15s}
-.mini-play:hover{background:var(--signal-hover)}
 .mini-play:disabled{opacity:.4;cursor:not-allowed}
-.mini-time{font:600 10.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
-.mini-time .now{color:var(--ink)}
-/* Browser pane */
-.browser-frame-shell{border:1px solid var(--line);border-radius:3px;background:var(--paper);overflow:hidden}
 .browser-frame{display:block;width:100%;height:580px;border:0;background:var(--paper)}
-.browser-help{margin-top:10px;color:var(--muted);font-size:11.5px;line-height:1.55}
-.fineprint{color:var(--muted);font-size:12px;line-height:1.6;border-top:1px solid var(--line);padding-top:18px;margin-top:34px}
-.busy{display:inline-block;width:13px;height:13px;margin-right:8px;border:2px solid #a9c7e8;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
-@keyframes spin{to{transform:rotate(360deg)}}
 .hidden{display:none!important}
-@media(max-width:760px){
-  .tiles-sm-scroll{display:grid;grid-template-columns:1fr}
-  .wrap{padding:0 14px 48px}
-  .hero h1{font-size:38px}
-  .sliders{grid-template-columns:1fr}
   .compare-grid{grid-template-columns:1fr}
   .browser-frame{height:980px}
-  .scrub{min-width:120px}
 }
 </style>
 </head>
 <body>
-<div class="wrap">
-  <header class="hero">
-    <div class="hero-top">
-      <span class="eyebrow">Inflect v2 · choose where inference runs</span>
-      <nav class="links">
-        <a href="https://huggingface.co/owensong/Inflect-Micro-v2" target="_blank" rel="noopener">Micro model</a>
-        <a href="https://huggingface.co/owensong/Inflect-Nano-v2" target="_blank" rel="noopener">Nano model</a>
-        <a href="https://github.com/owenawsong/Inflect" target="_blank" rel="noopener">GitHub</a>
-      </nav>
-    </div>
-    <h1>Small models.<br>Complete speech.</h1>
-    <p>Generate 24&nbsp;kHz English speech with the published Inflect-Micro-v2 and Inflect-Nano-v2 checkpoints. Choose hosted ZeroGPU inference or run the ONNX models privately in this browser.</p>
-  </header>
-  <nav class="tabs" role="tablist">
-    <button id="tab-hosted" class="active" role="tab" aria-selected="true">Hosted GPU<small>Hugging Face ZeroGPU</small></button>
-    <button id="tab-browser" role="tab" aria-selected="false">This browser<small>WebGPU / WASM · private</small></button>
   </nav>
   <!-- HOSTED -->
-  <section id="pane-hosted" class="tabpane active">
-    <div class="mode-banner">
-      <span><strong>ZeroGPU inference</strong>Nothing downloads to your device. Hugging Face runs each request; free-tier quota and queue limits apply.</span>
-      <span class="mode-badge">Server mode</span>
-    </div>
-    <div class="card">
-      <div class="card-pad">
-        <div class="field">
-          <label for="text">Text</label>
-          <textarea id="text" placeholder="Write a sentence, paragraph, or script...">Wait, are you actually being for real? I thought the train left twenty minutes ago!</textarea>
-          <div class="examples" id="examples"></div>
         </div>
-        <div class="field">
-          <label>Model</label>
-          <div class="seg" id="model-seg">
-            <label>
-              <input type="radio" name="model" value="Inflect Micro v2" checked>
-              <strong>Inflect Micro v2</strong><small>9.36M · quality first</small>
-            </label>
-            <label>
-              <input type="radio" name="model" value="Inflect Nano v2">
-              <strong>Inflect Nano v2</strong><small>3.96M · footprint first</small>
-            </label>
           </div>
         </div>
-        <div class="sliders">
-          <div class="slider">
-            <div class="row"><label for="speed">Speaking speed</label><span class="val" id="speed-val">1.00</span></div>
-            <input type="range" id="speed" min="0.7" max="1.35" step="0.01" value="1.0">
-            <small>1.00 is the trained default.</small>
-          </div>
-          <div class="slider">
-            <div class="row"><label for="variation">Delivery variation</label><span class="val" id="variation-val">0.667</span></div>
-            <input type="range" id="variation" min="0" max="1" step="0.001" value="0.667">
-            <small>Lower is steadier. Higher gives each take more variation.</small>
           </div>
         </div>
-        <details class="adv">
-          <summary>Advanced controls</summary>
           <div class="body">
-            <div class="sliders">
-              <div class="slider">
-                <div class="row"><label for="pitch">Pitch shift (semitones)</label><span class="val" id="pitch-val">0.00</span></div>
-                <input type="range" id="pitch" min="-2" max="2" step="0.25" value="0">
-                <small>Changes voice pitch without changing speaking speed.</small>
-              </div>
-              <div class="slider">
-                <div class="row"><label for="seed">Repeatable seed</label><span class="val" id="seed-val">0</span></div>
-                <input type="number" id="seed" value="0" step="1" inputmode="numeric">
-                <small>Use the same seed and settings to reproduce a take.</small>
-              </div>
             </div>
           </div>
-        </details>
-        <div class="actions">
-          <button class="btn primary" id="generate">Generate speech</button>
-          <button class="btn" id="compare-btn">Compare Micro and Nano</button>
         </div>
-        <div class="status empty" id="status">Ready.</div>
-        <div class="queue hidden" id="queue"></div>
-      </div>
-    </div>
-    <!-- Player -->
-    <div class="player hidden" id="player">
-      <div class="player-bar">
-        <button class="play-btn" id="play" aria-label="Play">▶</button>
-        <span class="time"><span class="now" id="now">0:00</span> / <span id="dur">0:00</span></span>
-        <div class="scrub">
-          <div class="markers" id="markers"></div>
-          <input type="range" id="seek" min="0" max="1000" value="0" aria-label="Seek">
         </div>
-      </div>
-      <div class="download-row">
-        <a class="dl" id="download" download="inflect_v2.wav">⬇ Download WAV</a>
-      </div>
-      <div class="karaoke fade" id="karaoke"></div>
-    </div>
-    <!-- Compare -->
-    <div class="compare-grid">
-      <div class="compare-card">
-        <div class="head">Micro v2<small>9.36M · quality first</small></div>
-        <div class="body">
-          <div class="mini-player">
-            <button class="mini-play" data-mini="micro" aria-label="Play Micro">▶</button>
-            <span class="mini-time"><span class="now" id="micro-now">0:00</span> / <span id="micro-dur">0:00</span></span>
-            <input type="range" id="micro-seek" min="0" max="1000" value="0" aria-label="Micro seek" style="flex:1">
-            <a class="dl" id="micro-dl" download="inflect_micro.wav">⬇</a>
-          </div>
         </div>
-      </div>
-      <div class="compare-card">
-        <div class="head">Nano v2<small>3.96M · footprint first</small></div>
-        <div class="body">
-          <div class="mini-player">
-            <button class="mini-play" data-mini="nano" aria-label="Play Nano">▶</button>
-            <span class="mini-time"><span class="now" id="nano-now">0:00</span> / <span id="nano-dur">0:00</span></span>
-            <input type="range" id="nano-seek" min="0" max="1000" value="0" aria-label="Nano seek" style="flex:1">
-            <a class="dl" id="nano-dl" download="inflect_nano.wav">⬇</a>
           </div>
         </div>
-      </div>
-    </div>
-    <div class="status empty" id="compare-status" style="margin-top:14px">Same text, seed, speed, variation, and pitch are sent to both models.</div>
-    <p class="fineprint">Fixed English voice · English-only frontend · no voice cloning · no reference audio upload. Uncommon names, abbreviations, and long passages can still fail.</p>
   </section>
   <!-- BROWSER -->
-  <section id="pane-browser" class="tabpane">
-    <div class="mode-banner">
-      <span><strong>Browser-local inference</strong>Your text and generated audio stay in this tab. WebGPU is preferred; compatible browsers fall back to WASM.</span>
-      <span class="mode-badge">No queue · no quota</span>
-    </div>
-    <div class="browser-frame-shell">
-      <iframe
-        class="browser-frame"
-        id="webgpu-frame"
-        src="/web_runtime/index.html?embed=1"
-        title="Inflect browser-local WebGPU runtime"
-        allow="autoplay; webgpu"
-        loading="eager"></iframe>
     </div>
-    <p class="browser-help">The first browser-local run downloads the selected ONNX model and compiles it on your device. Streaming and complete-audio modes are both available inside this panel.</p>
   </section>
 </div>
 <script type="module">
 import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
-const fmtTime = (s) => {
-  if (!Number.isFinite(s) || s < 0) s = 0;
-  const m = Math.floor(s / 60);
-  const sec = Math.floor(s % 60);
-  return `${m}:${sec.toString().padStart(2, "0")}`;
-};
-// ---------- prompts ----------
 const PROMPTS = [
   "Wait, are you actually being for real? I thought the train left twenty minutes ago!",
   "Does punctuation work? Yes: commas, semicolons, and periods should create sensible boundaries.",
   "Professor Nguyen mailed the fluorescent poster to Reykjavik on Thursday.",
   "Although the weather changed without warning, the musicians finished packing before anyone opened the enormous glass door.",
 ];
-const examplesEl = document.getElementById("examples");
-PROMPTS.forEach((p) => {
-  const b = document.createElement("button");
-  b.type = "button";
-  b.textContent = p.length > 46 ? p.slice(0, 44) + "…" : p;
-  b.title = p;
-  b.addEventListener("click", () => { document.getElementById("text").value = p; });
-  examplesEl.appendChild(b);
-});
-// ---------- tabs ----------
-const tabHosted = document.getElementById("tab-hosted");
-const tabBrowser = document.getElementById("tab-browser");
-const paneHosted = document.getElementById("pane-hosted");
-const paneBrowser = document.getElementById("pane-browser");
-function setTab(which) {
-  const isB = which === "browser";
-  tabHosted.classList.toggle("active", !isB);
-  tabBrowser.classList.toggle("active", isB);
-  paneHosted.classList.toggle("active", !isB);
-  paneBrowser.classList.toggle("active", isB);
-  tabHosted.setAttribute("aria-selected", !isB);
-  tabBrowser.setAttribute("aria-selected", isB);
-}
-tabHosted.addEventListener("click", () => setTab("hosted"));
-tabBrowser.addEventListener("click", () => setTab("browser"));
-// ---------- slider readouts ----------
-const bind = (id, valId, dec = 2) => {
-  const el = document.getElementById(id);
-  const v = document.getElementById(valId);
-  const upd = () => { v.textContent = parseFloat(el.value).toFixed(dec); };
-  el.addEventListener("input", upd); upd();
 };
-bind("speed", "speed-val", 2);
-bind("variation", "variation-val", 3);
-bind("pitch", "pitch-val", 2);
-document.getElementById("seed").addEventListener("input", (e) => {
-  document.getElementById("seed-val").textContent = e.target.value || "0";
-});
-// ---------- responsive browser frame height ----------
-(function () {
-  const frame = document.getElementById("webgpu-frame");
-  const apply = (h) => {
-    const n = Number(h);
-    if (Number.isFinite(n) && n > 0) {
-      const floor = frame.clientWidth < 1024 ? 980 : 560;
-      frame.style.height = `${Math.max(floor, Math.min(2200, n + 2))}px`;
-    }
-  };
-  const measure = () => {
-    try {
-      const doc = frame.contentDocument;
-      apply(Math.max(doc?.body?.scrollHeight || 0, doc?.documentElement?.scrollHeight || 0));
-    } catch (_) { /* cross-origin: rely on postMessage */ }
-  };
-  window.addEventListener("message", (ev) => {
-    if (ev.source !== frame.contentWindow) return;
-    if (ev.data?.type === "inflect-web-resize") apply(ev.data.height);
-  });
-  frame.addEventListener("load", measure);
-  [100, 500, 1500].forEach((d) => window.setTimeout(measure, d));
-})();
-// ---------- gradio client ----------
-let client = null;
-const getClient = async () => {
-  if (client) return client;
-  client = await Client.connect(window.location.origin);
-  return client;
-};
 const inputs = () => ({
-  text: document.getElementById("text").value,
-  speed: parseFloat(document.getElementById("speed").value),
-  variation: parseFloat(document.getElementById("variation").value),
-  pitch_steps: parseFloat(document.getElementById("pitch").value),
-  seed: parseInt(document.getElementById("seed").value || "0", 10),
 });
 const activeModel = () => document.querySelector('input[name="model"]:checked').value;
-// ---------- speech text + chunk-split (mirrors app.py) ----------
-function splitText(text, limit = 280) {
-  const normalized = text.split(/\s+/).filter(Boolean).join(" ");
-  if (!normalized) return [];
-  const sentenceRe = /[^.!?;:]+[.!?;:]*/g;
-  const sentences = normalized.match(sentenceRe) || [normalized];
-  const chunks = [];
-  for (let s of sentences) {
-    s = s.trim();
-    if (!s) continue;
-    while (s.length > limit) {
-      let cut = -1;
-      for (const m of [",", ";", ":"]) {
-        const idx = s.slice(0, limit + 1).lastIndexOf(m);
-        if (idx >= limit / 2) { cut = idx + 1; break; }
-      }
-      if (cut < limit / 2) {
-        const sp = s.slice(0, limit + 1).lastIndexOf(" ");
-        cut = sp > 0 ? sp : limit;
-      }
-      chunks.push(s.slice(0, cut).trim());
-      s = s.slice(cut).trim();
-    }
-    if (s) chunks.push(s);
-  }
-  return chunks;
 }
-function boundaryPause(chunk) {
-  const end = chunk.trim().slice(-1);
-  const m = { "?": 0.28, "!": 0.24, ".": 0.22, ";": 0.16, ":": 0.13, ",": 0.09 };
-  return m[end] ?? 0.08;
-}
-function chunkTimings(chunks, totalSec) {
-  // Estimate proportional-to-length durations, insert boundary pauses,
-  // then scale so the total matches the measured audio length.
-  let lens = chunks.map((c) => c.length);
-  const pauses = chunks.slice(0, -1).map((c, i) => boundaryPause(c));
-  const lensAdj = lens.map((l, i) => l + (i < lens.length - 1 ? pauses[i] * 40 : 0));
-  const sum = lensAdj.reduce((a, b) => a + b, 0) || 1;
-  let t = 0;
-  const out = chunks.map((c, i) => {
-    const dur = (lensAdj[i] / sum) * totalSec;
-    const start = t;
-    t += dur;
-    if (i < chunks.length - 1) t += pauses[i];
-    return { text: c, start, dur };
-  });
-  return out;
 }
-// ---------- audio player ----------
-let currentAudio = null;      // { url, audio, timings, chunks, text, sr, samples }
-let rafId = null;
-const playerEl = document.getElementById("player");
-const playBtn = document.getElementById("play");
-const nowEl = document.getElementById("now");
-const durEl = document.getElementById("dur");
-const seek = document.getElementById("seek");
-const markersEl = document.getElementById("markers");
-const karaoke = document.getElementById("karaoke");
-const dl = document.getElementById("download");
-const statusEl = document.getElementById("status");
-const queueEl = document.getElementById("queue");
-const genBtn = document.getElementById("generate");
-const cmpBtn = document.getElementById("compare-btn");
-let wavBufReference = null;
-function setBusy(busy, msg) {
-  for (const b of [genBtn, cmpBtn]) b.disabled = busy;
-  if (busy) {
-    statusEl.classList.remove("empty");
-    statusEl.innerHTML = `<span class="busy"></span>${msg || "Generating…"}`;
-    queueEl.classList.remove("hidden");
-    queueEl.textContent = "";
   }
 }
-function renderKaraoke(current) {
-  karaoke.innerHTML = "";
-  if (!current || !current.chunks.length) return;
-  current.chunks.forEach((c, i) => {
-    const span = document.createElement("span");
-    span.className = "chunk";
-    span.dataset.index = i;
-    span.textContent = c + " ";
-    karaoke.appendChild(span);
-  });
-  karaoke.classList.add("in");
-}
-function tickPlayhead(current) {
-  const a = current.audio;
-  const t = a.currentTime;
-  // chunk highlight
-  const spans = karaoke.querySelectorAll(".chunk");
-  let activeIdx = -1;
-  for (let i = 0; i < current.timings.length; i++) {
-    const seg = current.timings[i];
-    if (t >= seg.start && t < seg.start + seg.dur) { activeIdx = i; break; }
-    if (t >= seg.start) activeIdx = i;
   }
-  spans.forEach((sp, i) => {
-    sp.classList.remove("speaking", "spoken");
-    if (current.timings[i] && t >= current.timings[i].start + current.timings[i].dur) sp.classList.add("spoken");
-    if (i === activeIdx) sp.classList.add("speaking");
-  });
-  const seg = activeIdx >= 0 ? current.timings[activeIdx] : null;
-  if (seg && t <= seg.start + seg.dur + 0.18) {
-    const el = spans[activeIdx];
-    if (el) {
-      const rel = Math.max(0, t - seg.start) / Math.max(0.001, seg.dur);
-      el.style.background = `linear-gradient(90deg, rgba(36,134,255,.22) ${Math.min(100, rel * 100)}%, transparent ${Math.min(100, rel * 100)}%)`;
-      const before = Array.from(spans).slice(0, activeIdx);
-      before.forEach((s) => { if (!s.classList.contains("spoken")) s.classList.add("spoken"); });
-    }
   }
-  nowEl.textContent = fmtTime(t);
-  seek.value = String(Math.round((t / (current.totalSec || 1)) * 1000));
-  rafId = requestAnimationFrame(() => tickPlayhead(current));
 }
-function startPlayback(current) {
-  if (!current || !current.audio) return;
-  current.audio.play().then(() => {
-    playBtn.textContent = "❚❚";
-    cancelAnimationFrame(rafId);
-    rafId = requestAnimationFrame(() => tickPlayhead(current));
-  }).catch(() => {});
-}
-function pausePlayback(current) {
-  if (!current || !current.audio) return;
-  current.audio.pause();
-  playBtn.textContent = "▶";
-  cancelAnimationFrame(rafId);
 }
-function setupPlayer(current) {
-  renderKaraoke(current);
-  current.audio = new Audio(current.url);
-  const a = current.audio;
-  durEl.textContent = fmtTime(current.totalSec);
-  nowEl.textContent = "0:00";
-  seek.value = "0";
-  a.addEventListener("loadedmetadata", () => { durEl.textContent = fmtTime(a.duration); });
-  a.addEventListener("ended", () => {
-    playBtn.textContent = "▶";
-    cancelAnimationFrame(rafId);
-    nowEl.textContent = fmtTime(current.totalSec);
-    karaoke.querySelectorAll(".chunk").forEach((s) => s.classList.remove("speaking"));
-  });
-  a.addEventListener("timeupdate", () => { nowEl.textContent = fmtTime(a.currentTime); });
-  // markers
-  markersEl.innerHTML = "";
-  let acc = 0;
-  for (let i = 0; i < current.timings.length - 1; i++) {
-    acc += current.timings[i].dur + (i < current.timings.length - 1 ? boundaryPause(current.chunks[i]) : 0);
-    const m = document.createElement("div");
-    m.className = "marker";
-    m.style.left = `${Math.min(100, (acc / current.totalSec) * 100)}%`;
-    markersEl.appendChild(m);
-  }
 }
-playBtn.addEventListener("click", () => {
-  if (!currentAudio) return;
-  if (currentAudio.audio.paused) startPlayback(currentAudio);
-  else pausePlayback(currentAudio);
-});
-seek.addEventListener("input", () => {
-  if (!currentAudio) return;
-  const t = (parseFloat(seek.value) / 1000) * currentAudio.totalSec;
-  currentAudio.audio.currentTime = t;
-  nowEl.textContent = fmtTime(t);
-});
-// ---------- generate ----------
-async function fetchArray(url) {
-  const r = await fetch(url);
-  return r.arrayBuffer();
 }
-function wavBlobUrl(buf) {
-  return URL.createObjectURL(new Blob([buf], { type: "audio/wav" }));
 }
-async function decodeWav(buf) {
-  const ctx = new (window.AudioContext || window.webkitAudioContext)();
-  const decoded = await ctx.decodeAudioData(buf.slice(0));
-  ctx.close();
-  return decoded;
 }
-async function doGenerate() {
-  setBusy(true, "Queued for ZeroGPU…");
-  queueEl.textContent = "";
-  playerEl.classList.add("hidden");
-  try {
-    const c = await getClient();
-    const res = await c.predict("/synthesize", {
-      ...inputs(),
-      model_name: activeModel(),
-    });
-    const fileData = res.data[0];
-    const statusText = res.data[1] || "Done.";
-    const url = fileData.url || fileData.path;
-    const buf = await fetchArray(url);
-    const blobUrl = wavBlobUrl(buf);
-    // decode for timing + karaoke alignment
-    const decoded = await decodeWav(buf);
-    const text = document.getElementById("text").value;
-    const chunks = splitText(text);
-    const timings = chunkTimings(chunks, decoded.duration);
-    currentAudio = { url: blobUrl, totalSec: decoded.duration, chunks, timings };
-    dl.href = blobUrl;
-    setupPlayer(currentAudio);
-    statusEl.classList.remove("empty");
-    statusEl.innerHTML = statusText;
-    queueEl.classList.add("hidden");
-    playerEl.classList.remove("hidden");
     setBusy(false);
-    // autoplay
-    startPlayback(currentAudio);
-  } catch (e) {
-    statusEl.classList.remove("empty");
-    statusEl.innerHTML = `<span style="color:#fca5a5">Error: ${String(e?.message || e)}</span>`;
-    setBusy(false);
-  }
 }
-// ---------- compare ----------
-let compareAudio = { micro: null, nano: null };
-async function doCompare() {
-  setBusy(true, "Comparing models on ZeroGPU…");
-  queueEl.textContent = "";
-  for (const k of ["micro", "nano"]) {
-    if (compareAudio[k]?.audio) { compareAudio[k].audio.pause(); }
-    compareAudio[k] = null;
-  }
-  document.getElementById("micro-now").textContent = "0:00";
-  document.getElementById("nano-now").textContent = "0:00";
-  try {
-    const c = await getClient();
-    const res = await c.predict("/compare", { ...inputs() });
-    const [microFd, nanoFd, statusText] = res.data;
-    const cmpStatus = document.getElementById("compare-status");
-    cmpStatus.classList.remove("empty");
-    cmpStatus.innerHTML = statusText || "Done.";
-    for (const [key, fd, durId, nowId, seekId, dlId] of [
-      ["micro", microFd, "micro-dur", "micro-now", "micro-seek", "micro-dl"],
-      ["nano", nanoFd, "nano-dur", "nano-now", "nano-seek", "nano-dl"],
-    ]) {
-      const url = fd.url || fd.path;
-      const buf = await fetchArray(url);
-      const blobUrl = wavBlobUrl(buf);
-      const decoded = await decodeWav(buf);
-      const audio = new Audio(blobUrl);
-      document.getElementById(durId).textContent = fmtTime(decoded.duration);
-      document.getElementById(seekId).value = "0";
-      document.getElementById(dlId).href = blobUrl;
-      audio.addEventListener("timeupdate", () => {
-        document.getElementById(nowId).textContent = fmtTime(audio.currentTime);
-        document.getElementById(seekId).value = String(Math.round((audio.currentTime / decoded.duration) * 1000));
-      });
-      audio.addEventListener("ended", () => {
-        document.querySelector(`.mini-play[data-mini="${key}"]`).textContent = "▶";
-      });
-      const sk = document.getElementById(seekId);
-      if (sk._inflectSeek) sk.removeEventListener("input", sk._inflectSeek);
-      const onSeek = () => { audio.currentTime = (parseFloat(sk.value) / 1000) * decoded.duration; };
-      sk._inflectSeek = onSeek;
-      sk.addEventListener("input", onSeek);
-      compareAudio[key] = { audio, totalSec: decoded.duration, url: blobUrl };
     }
     setBusy(false);
-  } catch (e) {
-    const cmpStatus = document.getElementById("compare-status");
-    cmpStatus.classList.remove("empty");
-    cmpStatus.innerHTML = `<span style="color:#fca5a5">Error: ${String(e?.message || e)}</span>`;
-    setBusy(false);
-  }
 }
-document.querySelectorAll(".mini-play").forEach((btn) => {
-  btn.addEventListener("click", () => {
-    const key = btn.dataset.mini;
-    const item = compareAudio[key];
-    if (!item || !item.audio) return;
-    if (item.audio.paused) {
-      // pause the other
-      const other = key === "micro" ? "nano" : "micro";
-      if (compareAudio[other]?.audio && !compareAudio[other].audio.paused) {
-        compareAudio[other].audio.pause();
-        document.querySelector(`.mini-play[data-mini="${other}"]`).textContent = "▶";
-      }
-      item.audio.play();
-      btn.textContent = "❚❚";
-    } else {
-      item.audio.pause();
-      btn.textContent = "▶";
-    }
-  });
-});
-genBtn.addEventListener("click", doGenerate);
-cmpBtn.addEventListener("click", doCompare);
-document.getElementById("text").addEventListener("keydown", (e) => {
-  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); doGenerate(); }
-});
 </script>
 </body>
 </html>

 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Inflect v2 · speech studio</title>
 <link rel="icon" href="/web_runtime/favicon.svg" type="image/svg+xml" />
 <style>
 :root{
   color-scheme:dark;
+  --bg:#0a0c0b;--surface:#111513;--surface-2:#0d100e;--rail:#080a09;
+  --ink:#f3f4ee;--muted:#8a938b;--dim:#5f6963;
+  --line:#232a26;--line-soft:#1a201c;
+  --signal:#2dd4bf;--signal-2:#22d3ee;--signal-deep:#0f766e;
+  --accent:#f59e0b;--warn:#f87171;--hot:#ef4444;
+  --glow:0 0 0 1px rgba(45,212,191,.35),0 0 22px rgba(45,212,191,.18);
 }
 *{box-sizing:border-box}
+html,body{margin:0;padding:0;height:100%}
 body{
+  background:
+    radial-gradient(120% 80% at 50% -10%, rgba(45,212,191,.06), transparent 60%),
+    var(--bg);
+  color:var(--ink);
   font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
   line-height:1.5;-webkit-font-smoothing:antialiased;
+  min-height:100vh;display:flex;flex-direction:column;
 }
+.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
+/* ---- Top bar ---- */
+.topbar{
+  display:flex;align-items:center;gap:20px;padding:13px clamp(16px,3vw,40px);
+  border-bottom:1px solid var(--line);background:rgba(8,10,9,.85);backdrop-filter:blur(10px);
+  position:sticky;top:0;z-index:20;
+}
+.brand{display:flex;align-items:center;gap:11px;min-width:0}
+.logo{
+  width:34px;height:34px;border-radius:9px;flex-shrink:0;
+  background:radial-gradient(120% 120% at 30% 20%,#34d3c4,#0f766e 70%);
+  display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px rgba(45,212,191,.25);
+}
+.logo svg{width:18px;height:18px}
+.brand .name{font-weight:780;font-size:15px;letter-spacing:-.01em;line-height:1.05}
+.brand .name small{display:block;font-weight:560;font-size:10.5px;color:var(--muted);letter-spacing:.02em;margin-top:1px}
+.meter-cluster{display:flex;align-items:center;gap:14px;margin-left:auto}
+.meter{display:flex;flex-direction:column;gap:3px;min-width:0}
+.meter .lab{font:700 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
+.meter .val{font:650 12px/1 var(--mono);color:var(--ink)}
+.meter .val.accent{color:var(--signal)}
+.led{width:8px;height:8px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 0 rgba(45,212,191,0);transition:background .2s}
+.led.on{background:var(--signal);box-shadow:0 0 10px rgba(45,212,191,.7);animation:pulse 1.4s ease-in-out infinite}
+.led.busy{background:var(--accent);box-shadow:0 0 10px rgba(245,158,11,.7);animation:pulse .8s ease-in-out infinite}
+@keyframes pulse{50%{opacity:.45}}
+.topnav{display:flex;align-items:center;gap:6px}
+.tab{
+  appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;
+  font:inherit;font-size:12.5px;font-weight:680;letter-spacing:.01em;
+  padding:8px 14px;border-radius:8px;transition:color .15s,background .15s;
+}
+.tab:hover{color:var(--ink);background:var(--surface)}
+.tab.active{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
+.tab small{display:block;font-size:9.5px;font-weight:560;color:var(--dim);margin-top:1px;letter-spacing:.02em}
+.tab.active small{color:var(--signal)}
+.extlinks{display:flex;gap:6px}
+.extlinks a{color:var(--muted);font-size:12px;font-weight:620;text-decoration:none;padding:7px 10px;border-radius:7px;transition:color .15s,background .15s}
+.extlinks a:hover{color:var(--ink);background:var(--surface)}
+/* ---- Shell ---- */
+.shell{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
+.pane{display:none;min-height:0}
+.pane.active{display:contents}
+/* ---- Hosted layout ---- */
+.studio{flex:1;display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;min-height:0}
+.rack{
+  border-right:1px solid var(--line);background:var(--rail);
+  padding:18px 16px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
 }
+.stage{display:flex;flex-direction:column;min-height:0;overflow:hidden}
+.module{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
+.module>.head{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
+.module>.head .t{font:700 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
+.module>.head .v{font:600 11px/1 var(--mono);color:var(--signal)}
+.module>.body{padding:13px}
+/* inputs */
+.field>label{display:block;font-size:11px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
 textarea,input[type="text"],input[type="number"],select{
+  width:100%;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
+  border-radius:9px;padding:11px 12px;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s
+}
+textarea:focus,input:focus,select:focus{border-color:var(--signal);box-shadow:0 0 0 3px rgba(45,212,191,.13)}
+textarea{min-height:96px;resize:vertical;font-size:14px;line-height:1.6}
+.examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
+.examples button{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:7px;color:var(--muted);font-size:10.5px;padding:5px 8px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
+.examples button:hover{color:var(--ink);border-color:var(--signal);background:rgba(45,212,191,.06)}
+/* model switch */
+.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
+.seg label{
+  display:flex;flex-direction:column;gap:3px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
+  background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s;position:relative
 }
 .seg input{position:absolute;opacity:0;width:0;height:0}
+.seg label strong{font-size:12px;font-weight:760}
+.seg label small{font-size:10px;color:var(--muted)}
+.seg label:has(input:checked){border-color:var(--signal);background:rgba(45,212,191,.08)}
+.seg label:has(input:checked) strong{color:var(--signal)}
+.seg label:has(input:checked)::after{content:"";position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px rgba(45,212,191,.8)}
+/* sliders */
+.slider{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
+.slider:last-child{margin-bottom:0}
+.slider .top{display:flex;justify-content:space-between;align-items:baseline}
+.slider .top label{font-size:11px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
+.slider .top .val{font:650 12px/1 var(--mono);color:var(--signal)}
 input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line-soft);border-radius:4px;outline:none}
+input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--signal);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 8px rgba(45,212,191,.6);transition:transform .1s}
+input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
+input[type="range"]::-moz-range-thumb{width:13px;height:13px;border:2px solid var(--bg);border-radius:50%;background:var(--signal);cursor:pointer}
+.slider small{color:var(--dim);font-size:10.5px;line-height:1.4}
+details.adv{border:1px solid var(--line-soft);border-radius:9px;background:var(--surface-2)}
+details.adv summary{padding:10px 12px;cursor:pointer;font-size:11px;font-weight:640;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);list-style:none;display:flex;justify-content:space-between;align-items:center}
 details.adv summary::-webkit-details-marker{display:none}
+details.adv summary .chev{transition:transform .2s;color:var(--dim)}
+details.adv[open] summary .chev{transform:rotate(180deg)}
+details.adv .body{padding:2px 12px 13px}
+/* transport */
+.transport{display:flex;flex-direction:column;gap:9px}
+.btn{
+  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:44px;padding:0 16px;
+  border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
+  font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:background .15s,border-color .15s,transform .05s
+}
+.btn:hover{background:var(--surface);border-color:#3a4540}
+.btn:active{transform:translateY(1px)}
+.btn:disabled{opacity:.4;cursor:not-allowed}
+.btn.primary{border:0;background:linear-gradient(180deg,#34d3c4,#14b8a6);color:#06231f;font-weight:820;box-shadow:var(--glow)}
+.btn.primary:hover{background:linear-gradient(180deg,#3ee0d0,#16c4b0)}
+.btn.ghost{background:transparent}
+.kbd{font:600 9.5px/1 var(--mono);padding:2px 5px;border:1px solid var(--line);border-radius:4px;color:var(--dim);margin-left:auto}
+/* ---- Stage (transport + waveform) ---- */
+.stage-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--rail)}
+.now-playing{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
+.np-badge{width:38px;height:38px;border-radius:9px;flex-shrink:0;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--signal)}
+.np-badge.playing{border-color:var(--signal);background:rgba(45,212,191,.1)}
+.np-text{min-width:0}
+.np-text .title{font-size:13px;font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.np-text .sub{font:600 10.5px/1.3 var(--mono);color:var(--muted);letter-spacing:.02em}
+.transport-controls{display:flex;align-items:center;gap:9px}
+.tbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .05s}
+.tbtn:hover{border-color:#3a4540;background:var(--surface-2)}
+.tbtn:active{transform:scale(.95)}
+.tbtn:disabled{opacity:.4;cursor:not-allowed}
+.tbtn.play{width:48px;height:48px;border:0;background:linear-gradient(180deg,#34d3c4,#14b8a6);color:#06231f;box-shadow:var(--glow)}
+.tbtn.play:hover{background:linear-gradient(180deg,#3ee0d0,#16c4b0)}
+.tbtn.play:disabled{background:var(--line);color:var(--dim);box-shadow:none}
+/* waveform / timeline */
+.scrub-wrap{padding:16px 18px 6px;background:var(--rail)}
+.scrub-row{display:flex;align-items:center;gap:14px}
+.timecode{font:600 12px/1 var(--mono);color:var(--muted);min-width:44px;text-align:center}
+.timecode .now{color:var(--signal)}
+.wave{position:relative;flex:1;min-width:0;height:74px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;cursor:pointer}
+.wave canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
+.wave .playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--signal);box-shadow:0 0 10px rgba(45,212,191,.8);pointer-events:none;transform:translateX(-1px)}
+.wave .markers{position:absolute;inset:0;pointer-events:none}
+.wave .markers .m{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.10)}
+.wave .region{position:absolute;top:0;bottom:0;background:rgba(45,212,191,.08);pointer-events:none}
+.scrub-range{margin-top:10px}
+.scrub-range input{width:100%}
+.meters{display:flex;gap:4px;align-items:flex-end;height:34px;padding:0 2px}
+.meters .bar{flex:1;background:var(--line-soft);border-radius:2px;min-height:3px;transition:height .06s linear,background .1s}
+.meters .bar.lev{background:linear-gradient(180deg,var(--signal),var(--signal-deep))}
+.meters .bar.peak{background:var(--accent)}
+/* status strip */
+.status-strip{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--line);background:var(--surface);font-size:12px}
+.status-strip .dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex-shrink:0}
+.status-strip.ok .dot{background:var(--signal);box-shadow:0 0 8px rgba(45,212,191,.7)}
+.status-strip.err .dot{background:var(--warn);box-shadow:0 0 8px rgba(248,113,113,.7)}
+.status-strip.busy .dot{background:var(--accent);animation:pulse 1s infinite}
+.status-strip code{font-family:var(--mono)}
+.status-strip .sp{flex:1;min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.status-strip .sp *{color:inherit}
+.queue{font:600 10.5px/1 var(--mono);color:var(--signal);white-space:nowrap}
+/* karaoke / script */
+.script-wrap{flex:1;min-height:0;overflow-y:auto;padding:18px 22px 24px;background:linear-gradient(180deg,var(--surface),var(--surface-2))}
+.script-empty{color:var(--dim);font-size:13px;font-style:italic;padding:8px 0}
+.karaoke{font-size:18px;line-height:1.85;letter-spacing:.003em;max-width:760px}
+.karaoke .chunk{display:inline;color:var(--dim);transition:color .25s ease,background-color .18s ease;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:4px;padding:1px 1px}
+.karaoke .chunk.spoken{color:#6c766d}
 .karaoke .chunk.speaking{color:var(--ink)}
+.karaoke .chunk.speaking::after{content:"▍";color:var(--signal);margin-left:1px;animation:blink 1.05s steps(2) infinite;font-weight:400}
+@keyframes blink{50%{opacity:.25}}
+/* download row */
+.tools-row{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:var(--rail);flex-wrap:wrap}
+.tools-row .lbl{font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
+a.dl{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:660;text-decoration:none;transition:border-color .15s,background .15s}
+a.dl:hover{border-color:var(--signal);background:var(--surface-2)}
+a.dl:disabled{opacity:.4;pointer-events:none}
+.spec-chip{font:600 10.5px/1 var(--mono);color:var(--muted);padding:6px 9px;border:1px solid var(--line-soft);border-radius:7px;background:var(--surface-2)}
+/* compare */
+.compare-pane{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:18px clamp(16px,3vw,40px) 40px}
+.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
+.track{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
+.track .thead{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
+.track .thead .dot{width:9px;height:9px;border-radius:50%}
+.track .thead .nm{font-size:12.5px;font-weight:720;flex:1;min-width:0}
+.track .thead .nm small{display:block;font:600 10px/1.3 var(--mono);color:var(--muted)}
+.track .tbody{padding:13px 14px 14px;display:flex;flex-direction:column;gap:11px}
+.mini-wave{position:relative;height:54px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;cursor:pointer}
+.mini-wave canvas{position:absolute;inset:0;width:100%;height:100%}
+.mini-wave .ph{position:absolute;top:0;bottom:0;width:2px;background:var(--signal);box-shadow:0 0 8px rgba(45,212,191,.7)}
+.mini-ctrl{display:flex;align-items:center;gap:10px}
+.mini-play{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s}
+.mini-play:hover{border-color:var(--signal);color:var(--signal)}
 .mini-play:disabled{opacity:.4;cursor:not-allowed}
+.mini-tc{font:600 10.5px/1 var(--mono);color:var(--muted);white-space:nowrap}
+.mini-tc .now{color:var(--signal)}
+.mini-seek{flex:1;min-width:0}
+.mini-dl{font-size:11px;padding:6px 9px;border-radius:7px}
+/* browser pane */
+.browser-pane{flex:1;display:flex;flex-direction:column;min-height:0}
+.browser-head{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--rail)}
+.browser-head h2{margin:0 0 4px;font-size:14px;font-weight:720}
+.browser-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
+.browser-frame-shell{flex:1;min-height:0;margin:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.4)}
 .browser-frame{display:block;width:100%;height:580px;border:0;background:var(--paper)}
+.browser-help{margin:0 18px 24px;color:var(--muted);font-size:11.5px;line-height:1.55}
+.fineprint{color:var(--dim);font-size:11px;line-height:1.6;padding:14px 18px;border-top:1px solid var(--line);background:var(--rail)}
+.busy-spin{display:inline-block;width:12px;height:12px;border:2px solid var(--signal);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px}
+@keyframes spin{to{transform:rotate(360deg)}}
 .hidden{display:none!important}
+.fade{opacity:0;transition:opacity .35s ease}
+.fade.in{opacity:1}
+@media(max-width:880px){
+  .studio{grid-template-columns:1fr}
+  .rack{border-right:0;border-bottom:1px solid var(--line);max-height:none}
+  .meter-cluster{display:none}
   .compare-grid{grid-template-columns:1fr}
   .browser-frame{height:980px}
+}
+@media(max-width:560px){
+  .topnav{display:none}
+  .stage-head{flex-wrap:wrap}
+  .scrub-row{flex-wrap:wrap}
+  .wave{height:58px}
 }
 </style>
 </head>
 <body>
+<header class="topbar">
+  <div class="brand">
+    <div class="logo" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none"><path d="M9 18V6l10-2v12" stroke="#06231f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="7" cy="18" r="2.4" fill="#06231f"/><circle cx="17" cy="16" r="2.4" fill="#06231f"/></svg>
+    </div>
+    <div class="name">Inflect v2<small>speech studio</small></div>
+  </div>
+  <div class="meter-cluster">
+    <div class="meter"><span class="lab">SR</span><span class="val accent" id="m-sr">24 kHz</span></div>
+    <div class="meter"><span class="lab">RTF</span><span class="val" id="m-rtf">—</span></div>
+    <div class="meter"><span class="lab">Chars</span><span class="val" id="m-chars">0</span></div>
+    <div class="led" id="status-led" title="Idle"></div>
+  </div>
+  <nav class="topnav" role="tablist">
+    <button class="tab active" id="tab-hosted" role="tab">Hosted GPU<small>ZeroGPU</small></button>
+    <button class="tab" id="tab-browser" role="tab">This browser<small>WebGPU / WASM</small></button>
   </nav>
+  <div class="extlinks">
+    <a href="https://huggingface.co/owensong/Inflect-Micro-v2" target="_blank" rel="noopener" title="Micro model">Micro</a>
+    <a href="https://huggingface.co/owensong/Inflect-Nano-v2" target="_blank" rel="noopener" title="Nano model">Nano</a>
+    <a href="https://github.com/owenawsong/Inflect" target="_blank" rel="noopener" title="GitHub">GitHub</a>
+  </div>
+</header>
+<div class="shell">
   <!-- HOSTED -->
+  <section id="pane-hosted" class="pane active">
+    <div class="studio">
+      <!-- control rack -->
+      <aside class="rack">
+        <div class="module">
+          <div class="head"><span class="t">Script</span></div>
+          <div class="body">
+            <div class="field">
+              <label for="text">Input text</label>
+              <textarea id="text" placeholder="Write a sentence, paragraph, or script…">Wait, are you actually being for real? I thought the train left twenty minutes ago!</textarea>
+              <div class="examples" id="examples"></div>
+            </div>
+          </div>
         </div>
+        <div class="module">
+          <div class="head"><span class="t">Voice Model</span></div>
+          <div class="body">
+            <div class="seg" id="model-seg">
+              <label><input type="radio" name="model" value="Inflect Micro v2" checked><strong>Micro v2</strong><small>9.36M · quality</small></label>
+              <label><input type="radio" name="model" value="Inflect Nano v2"><strong>Nano v2</strong><small>3.96M · footprint</small></label>
+            </div>
           </div>
         </div>
+        <div class="module">
+          <div class="head"><span class="t">Delivery</span><span class="v" id="speed-val">1.00×</span></div>
+          <div class="body">
+            <div class="slider">
+              <div class="top"><label for="speed">Speaking speed</label><span class="val mono" id="speed-num">1.00</span></div>
+              <input type="range" id="speed" min="0.7" max="1.35" step="0.01" value="1.0">
+              <small>1.00 is the trained default.</small>
+            </div>
+            <div class="slider">
+              <div class="top"><label for="variation">Delivery variation</label><span class="val mono" id="variation-num">0.667</span></div>
+              <input type="range" id="variation" min="0" max="1" step="0.001" value="0.667">
+              <small>Lower is steadier; higher gives each take more variation.</small>
+            </div>
+            <details class="adv">
+              <summary><span>Advanced</span><span class="chev">▾</span></summary>
+              <div class="body">
+                <div class="slider">
+                  <div class="top"><label for="pitch">Pitch shift</label><span class="val mono" id="pitch-num">0.00 st</span></div>
+                  <input type="range" id="pitch" min="-2" max="2" step="0.25" value="0">
+                  <small>Changes voice pitch without changing speaking speed.</small>
+                </div>
+                <div class="slider">
+                  <div class="top"><label for="seed">Repeatable seed</label><span class="val mono" id="seed-num">0</span></div>
+                  <input type="number" id="seed" value="0" step="1" inputmode="numeric">
+                  <small>Same seed and settings reproduce a take.</small>
+                </div>
+              </div>
+            </details>
           </div>
         </div>
+        <div class="module">
+          <div class="head"><span class="t">Transport</span></div>
           <div class="body">
+            <div class="transport">
+              <button class="btn primary" id="generate">▶ Generate speech<span class="kbd">⌘↵</span></button>
+              <button class="btn" id="compare-btn">⇄ Compare Micro &amp; Nano</button>
+            </div>
+          </div>
+        </div>
+      </aside>
+      <!-- stage -->
+      <main class="stage">
+        <div class="stage-head">
+          <div class="now-playing">
+            <div class="np-badge" id="np-badge">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 18V6l10-2v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="7" cy="18" r="2.2" fill="currentColor"/><circle cx="17" cy="16" r="2.2" fill="currentColor"/></svg>
+            </div>
+            <div class="np-text">
+              <div class="title" id="np-title">No take loaded</div>
+              <div class="sub" id="np-sub">Generate speech to load the player</div>
             </div>
           </div>
+          <div class="transport-controls">
+            <button class="tbtn" id="restart" title="Restart" disabled>⏮</button>
+            <button class="tbtn play" id="play" title="Play" disabled>▶</button>
+            <button class="tbtn" id="stop" title="Stop" disabled>⏹</button>
+          </div>
+        </div>
+        <div class="scrub-wrap">
+          <div class="scrub-row">
+            <span class="timecode"><span class="now" id="now">0:00</span></span>
+            <div class="wave" id="wave">
+              <canvas id="wave-canvas"></canvas>
+              <div class="markers" id="markers"></div>
+              <div class="region" id="region" style="display:none"></div>
+              <div class="playhead" id="playhead" style="left:0%"></div>
+            </div>
+            <span class="timecode" id="dur">0:00</span>
+          </div>
+          <div class="scrub-range">
+            <input type="range" id="seek" min="0" max="1000" value="0" aria-label="Seek" disabled>
+          </div>
+          <div class="meters" id="meters" aria-hidden="true"></div>
         </div>
+        <div class="status-strip" id="status-strip">
+          <span class="dot"></span>
+          <span class="sp" id="status">Ready.</span>
+          <span class="queue hidden" id="queue"></span>
+        </div>
+        <div class="script-wrap">
+          <div class="karaoke fade" id="karaoke"><div class="script-empty">Your input text will appear here, lighting up as it is spoken.</div></div>
         </div>
+        <div class="tools-row">
+          <span class="lbl">Take</span>
+          <a class="dl" id="download" download="inflect_v2.wav" role="button">⬇ Download WAV</a>
+          <span class="spec-chip" id="take-spec">—</span>
+          <span class="lbl" style="margin-left:auto">Mode</span>
+          <span class="spec-chip">ZeroGPU · server</span>
         </div>
+        <!-- Compare -->
+        <div class="compare-pane" id="compare-pane">
+          <div class="compare-grid">
+            <div class="track">
+              <div class="thead"><span class="dot" style="background:var(--signal)"></span><span class="nm">Micro v2<small>9.36M · quality first</small></span><a class="dl mini-dl" id="micro-dl" download="inflect_micro.wav">⬇</a></div>
+              <div class="tbody">
+                <div class="mini-wave" id="micro-wave"><canvas id="micro-canvas"></canvas><div class="ph" id="micro-ph" style="left:0%"></div></div>
+                <div class="mini-ctrl">
+                  <button class="mini-play" data-mini="micro" disabled>▶</button>
+                  <span class="mini-tc"><span class="now" id="micro-now">0:00</span> / <span id="micro-dur">0:00</span></span>
+                  <input type="range" id="micro-seek" class="mini-seek" min="0" max="1000" value="0" disabled aria-label="Micro seek">
+                </div>
+              </div>
+            </div>
+            <div class="track">
+              <div class="thead"><span class="dot" style="background:var(--accent)"></span><span class="nm">Nano v2<small>3.96M · footprint first</small></span><a class="dl mini-dl" id="nano-dl" download="inflect_nano.wav">⬇</a></div>
+              <div class="tbody">
+                <div class="mini-wave" id="nano-wave"><canvas id="nano-canvas"></canvas><div class="ph" id="nano-ph" style="left:0%"></div></div>
+                <div class="mini-ctrl">
+                  <button class="mini-play" data-mini="nano" disabled>▶</button>
+                  <span class="mini-tc"><span class="now" id="nano-now">0:00</span> / <span id="nano-dur">0:00</span></span>
+                  <input type="range" id="nano-seek" class="mini-seek" min="0" max="1000" value="0" disabled aria-label="Nano seek">
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+        <p class="fineprint">Fixed English voice · English-only frontend · no voice cloning · no reference audio upload. Uncommon names, abbreviations, and long passages can still fail.</p>
+      </main>
+    </div>
   </section>
   <!-- BROWSER -->
+  <section id="pane-browser" class="pane">
+    <div class="browser-pane">
+      <div class="browser-head">
+        <h2>Browser-local inference</h2>
+        <p>Your text and generated audio stay in this tab. WebGPU is preferred; compatible browsers fall back to WASM. No queue, no server quota.</p>
+      </div>
+      <div class="browser-frame-shell">
+        <iframe class="browser-frame" id="webgpu-frame" src="/web_runtime/index.html?embed=1" title="Inflect browser-local WebGPU runtime" allow="autoplay; webgpu" loading="eager"></iframe>
+      </div>
+      <p class="browser-help">The first browser-local run downloads the selected ONNX model and compiles it on your device. Streaming and complete-audio modes are both available inside this panel.</p>
     </div>
   </section>
 </div>
 <script type="module">
 import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+const $ = (id) => document.getElementById(id);
+const fmtTime = (s) => { if (!Number.isFinite(s) || s < 0) s = 0; const m = Math.floor(s/60); return `${m}:${Math.floor(s%60).toString().padStart(2,"0")}`; };
+/* ---- prompts ---- */
 const PROMPTS = [
   "Wait, are you actually being for real? I thought the train left twenty minutes ago!",
   "Does punctuation work? Yes: commas, semicolons, and periods should create sensible boundaries.",
   "Professor Nguyen mailed the fluorescent poster to Reykjavik on Thursday.",
   "Although the weather changed without warning, the musicians finished packing before anyone opened the enormous glass door.",
 ];
+const exEl = $("examples");
+PROMPTS.forEach((p) => { const b=document.createElement("button"); b.type="button"; b.textContent=p.length>44?p.slice(0,42)+"…":p; b.title=p; b.addEventListener("click",()=>{ $("text").value=p; updateChars(); }); exEl.appendChild(b); });
+/* ---- tabs ---- */
+const setTab = (which) => {
+  const b = which === "browser";
+  $("tab-hosted").classList.toggle("active",!b); $("tab-browser").classList.toggle("active",b);
+  $("pane-hosted").classList.toggle("active",!b); $("pane-browser").classList.toggle("active",b);
 };
+$("tab-hosted").addEventListener("click",()=>setTab("hosted"));
+$("tab-browser").addEventListener("click",()=>setTab("browser"));
+/* ---- slider readouts ---- */
+const bindNum = (id, valId, dec, suffix="") => { const el=$(id), v=$(valId); const upd=()=>{ v.textContent=parseFloat(el.value).toFixed(dec)+suffix; }; el.addEventListener("input",upd); upd(); };
+bindNum("speed","speed-num",2);
+bindNum("variation","variation-num",3);
+bindNum("pitch","pitch-num",2," st");
+$("speed").addEventListener("input",()=>{ $("speed-val").textContent=parseFloat($("speed").value).toFixed(2)+"×"; });
+$("speed-val").textContent="1.00×";
+$("seed").addEventListener("input",(e)=>{ $("seed-num").textContent=e.target.value||"0"; });
+/* ---- chars meter ---- */
+function updateChars(){ $("m-chars").textContent=String($("text").value.length); }
+$("text").addEventListener("input",updateChars); updateChars();
+/* ---- responsive browser frame height ---- */
+(function(){ const frame=$("webgpu-frame"); const apply=(h)=>{ const n=Number(h); if(Number.isFinite(n)&&n>0){ const floor=frame.clientWidth<1024?980:560; frame.style.height=`${Math.max(floor,Math.min(2200,n+2))}px`; } }; const measure=()=>{ try{ const d=frame.contentDocument; apply(Math.max(d?.body?.scrollHeight||0,d?.documentElement?.scrollHeight||0)); }catch(_){} }; window.addEventListener("message",(ev)=>{ if(ev.source!==frame.contentWindow) return; if(ev.data?.type==="inflect-web-resize") apply(ev.data.height); }); frame.addEventListener("load",measure); [100,500,1500].forEach((d)=>setTimeout(measure,d)); })();
+/* ---- gradio client ---- */
+let client=null;
+const getClient = async () => { if(client) return client; client=await Client.connect(window.location.origin); return client; };
 const inputs = () => ({
+  text: $("text").value,
+  speed: parseFloat($("speed").value),
+  variation: parseFloat($("variation").value),
+  pitch_steps: parseFloat($("pitch").value),
+  seed: parseInt($("seed").value||"0",10),
 });
 const activeModel = () => document.querySelector('input[name="model"]:checked').value;
+/* ---- text chunking (mirrors app.py) ---- */
+function splitText(text, limit=280){
+  const normalized=text.split(/\s+/).filter(Boolean).join(" "); if(!normalized) return [];
+  const sentences=normalized.match(/[^.!?;:]+[.!?;:]*/g)||[normalized]; const chunks=[];
+  for(let s of sentences){ s=s.trim(); if(!s) continue;
+    while(s.length>limit){ let cut=-1; for(const m of [",",";",":"]){ const idx=s.slice(0,limit+1).lastIndexOf(m); if(idx>=limit/2){ cut=idx+1; break; } }
+      if(cut<limit/2){ const sp=s.slice(0,limit+1).lastIndexOf(" "); cut=sp>0?sp:limit; }
+      chunks.push(s.slice(0,cut).trim()); s=s.slice(cut).trim(); }
+    if(s) chunks.push(s);
+  } return chunks;
 }
+function boundaryPause(chunk){ const end=chunk.trim().slice(-1); return ({ "?":0.28,"!":0.24,".":0.22,";":0.16,":":0.13,",":0.09 })[end] ?? 0.08; }
+function chunkTimings(chunks,totalSec){
+  const lens=chunks.map(c=>c.length); const pauses=chunks.slice(0,-1).map(c=>boundaryPause(c));
+  const lensAdj=lens.map((l,i)=>l+(i<lens.length-1?pauses[i]*40:0));
+  const sum=lensAdj.reduce((a,b)=>a+b,0)||1; let t=0;
+  return chunks.map((c,i)=>{ const dur=(lensAdj[i]/sum)*totalSec; const start=t; t+=dur; if(i<chunks.length-1) t+=pauses[i]; return {text:c,start,dur}; });
 }
+/* ---- audio decode / waveform ---- */
+async function fetchArray(url){ const r=await fetch(url); if(!r.ok) throw new Error(`audio fetch ${r.status}`); return r.arrayBuffer(); }
+function wavBlobUrl(buf){ return URL.createObjectURL(new Blob([buf],{type:"audio/wav"})); }
+async function decodeWav(buf){ const ctx=new (window.AudioContext||window.webkitAudioContext)(); const d=await ctx.decodeAudioData(buf.slice(0)); ctx.close(); return d; }
+function peaksFrom(samples, buckets){
+  const out=new Float32Array(buckets*2); const step=Math.floor(samples.length/buckets)||1;
+  for(let i=0;i<buckets;i++){ const s=i*step; const e=Math.min(s+step,samples.length); let mn=1,mx=-1;
+    for(let j=s;j<e;j++){ const v=samples[j]; if(v<mn)mn=v; if(v>mx)mx=v; }
+    out[i*2]=mn; out[i*2+1]=mx;
   }
+  return out;
 }
+function drawWave(canvas, samples, progress){
+  const dpr=window.devicePixelRatio||1; const w=canvas.clientWidth, h=canvas.clientHeight;
+  canvas.width=Math.max(1,w*dpr); canvas.height=Math.max(1,h*dpr);
+  const ctx=canvas.getContext("2d"); ctx.scale(dpr,dpr); ctx.clearRect(0,0,w,h);
+  const buckets=Math.max(40,Math.floor(w*1.2)); const peaks=peaksFrom(samples,buckets);
+  const bw=w/peaks.length*0.5; const mid=h/2; const prog=Math.max(0,Math.min(1,progress||0));
+  for(let i=0;i<peaks.length;i++){ const x=(i/peaks.length)*w; const played=(i/peaks.length)<=prog;
+    ctx.fillStyle=played?"#2dd4bf":"#2a322d"; const top=mid-peaks[i*2+1]*mid*0.94; const bot=mid-peaks[i*2]*mid*0.94;
+    ctx.fillRect(x, top, Math.max(1,bw), Math.max(1,bot-top));
   }
+}
+function drawMini(canvas, samples, progress){
+  const dpr=window.devicePixelRatio||1; const w=canvas.clientWidth,h=canvas.clientHeight;
+  canvas.width=Math.max(1,w*dpr); canvas.height=Math.max(1,h*dpr);
+  const ctx=canvas.getContext("2d"); ctx.scale(dpr,dpr); ctx.clearRect(0,0,w,h);
+  const buckets=Math.max(40,Math.floor(w*1.2)); const peaks=peaksFrom(samples,buckets);
+  const bw=w/peaks.length*0.5; const mid=h/2; const prog=Math.max(0,Math.min(1,progress||0));
+  for(let i=0;i<peaks.length;i++){ const x=(i/peaks.length)*w; const played=(i/peaks.length)<=prog;
+    ctx.fillStyle=played?"#2dd4bf":"#232a26"; const top=mid-peaks[i*2+1]*mid*0.9; const bot=mid-peaks[i*2]*mid*0.9;
+    ctx.fillRect(x,top,Math.max(1,bw),Math.max(1,bot-top));
   }
 }
+/* ---- level meters ---- */
+const metersEl=$("meters"); const METER_BARS=28; for(let i=0;i<METER_BARS;i++){ const b=document.createElement("div"); b.className="bar"; b.style.height="3px"; metersEl.appendChild(b); }
+let meterRAF=null;
+function runMeters(audio){ cancelAnimationFrame(meterRAF); const bars=[...metersEl.children];
+  const tick=()=>{ const p=audio.paused?0:Math.min(1,Math.abs((audio.currentTime%0.4)/0.4));
+    // approximate RMS-ish from analyser-less: derive pseudo level from time
+    const lvl=audio.paused?0:0.35+0.5*Math.abs(Math.sin(audio.currentTime*9))+0.15*Math.random();
+    bars.forEach((b,i)=>{ const t=i/bars.length; const on=t<=lvl; b.classList.toggle("lev",on&&t<0.85); b.classList.toggle("peak",on&&t>=0.85); b.style.height=on?`${3+t*30}px`:"3px"; });
+    meterRAF=requestAnimationFrame(tick);
+  }; tick();
+  audio.addEventListener("pause",()=>{ cancelAnimationFrame(meterRAF); bars.forEach(b=>{ b.classList.remove("lev","peak"); b.style.height="3px"; }); }, {once:true});
 }
+/* ---- player state ---- */
+let current=null; let raf=null;
+const waveCanvas=$("wave-canvas");
+const playhead=$("playhead"); const region=$("region");
+const markersEl=$("markers"); const karaoke=$("karaoke");
+const dl=$("download");
+const strip=$("status-strip"); const statusEl=$("status"); const queueEl=$("queue");
+const led=$("status-led");
+const genBtn=$("generate"); const cmpBtn=$("compare-btn");
+const playBtn=$("play"); const stopBtn=$("stop"); const restartBtn=$("restart");
+const seek=$("seek");
+function setBusy(b,msg){ genBtn.disabled=b; cmpBtn.disabled=b; led.classList.toggle("busy",b); led.classList.toggle("on",!b&&current!=null);
+  strip.classList.toggle("busy",b); if(b){ statusEl.innerHTML=`<span class="busy-spin"></span> ${msg||"Generating…"}`; queueEl.classList.remove("hidden"); queueEl.textContent=""; }
 }
+function setError(msg){ strip.classList.remove("busy","ok"); strip.classList.add("err"); statusEl.innerHTML=`<span style="color:var(--warn)">${msg}</span>`; led.classList.remove("busy","on"); }
+function renderKaraoke(c){ karaoke.innerHTML=""; if(!c||!c.chunks.length){ karaoke.innerHTML='<div class="script-empty">Your input text will appear here, lighting up as it is spoken.</div>'; return; }
+  c.chunks.forEach((t,i)=>{ const sp=document.createElement("span"); sp.className="chunk"; sp.dataset.index=i; sp.textContent=t+" "; karaoke.appendChild(sp); });
+  karaoke.classList.add("in");
 }
+function drawMarkers(c){ markersEl.innerHTML=""; if(!c) return; let acc=0; for(let i=0;i<c.timings.length-1;i++){ acc+=c.timings[i].dur+(i<c.timings.length-1?boundaryPause(c.chunks[i]):0); const m=document.createElement("div"); m.className="m"; m.style.left=`${Math.min(100,(acc/c.totalSec)*100)}%`; markersEl.appendChild(m); } }
+function tick(current){
+  const a=current.audio; const t=a.currentTime; const p=current.totalSec?Math.min(1,t/current.totalSec):0;
+  playhead.style.left=`${p*100}%`; drawWave(waveCanvas,current.samples,p);
+  $("now").textContent=fmtTime(t); seek.value=String(Math.round(p*1000));
+  // karaoke
+  const spans=karaoke.querySelectorAll(".chunk"); let active=-1;
+  for(let i=0;i<current.timings.length;i++){ const seg=current.timings[i]; if(t>=seg.start && t<seg.start+seg.dur){ active=i; break; } if(t>=seg.start) active=i; }
+  spans.forEach((sp,i)=>{ sp.classList.remove("speaking"); sp.style.background="";
+    const seg=current.timings[i]; if(seg && t>=seg.start+seg.dur){ if(!sp.classList.contains("spoken")) sp.classList.add("spoken"); }
+    else sp.classList.remove("spoken");
+    if(i===active){ sp.classList.add("speaking"); const rel=Math.max(0,t-seg.start)/Math.max(0.001,seg.dur);
+      sp.style.background=`linear-gradient(90deg,rgba(45,212,191,.28) ${Math.min(100,rel*100)}%,transparent ${Math.min(100,rel*100)}%)`; }
+  });
+  raf=requestAnimationFrame(()=>tick(current));
 }
+function startPlayback(current){ if(!current||!current.audio) return; current.audio.play().then(()=>{ playBtn.textContent="❚❚"; $("np-badge").classList.add("playing"); led.classList.add("on"); cancelAnimationFrame(raf); raf=requestAnimationFrame(()=>tick(current)); runMeters(current.audio); }).catch(()=>{}); }
+function pausePlayback(current){ if(!current||!current.audio) return; current.audio.pause(); playBtn.textContent="▶"; $("np-badge").classList.remove("playing"); cancelAnimationFrame(raf); }
+function stopPlayback(current){ if(!current||!current.audio) return; current.audio.pause(); current.audio.currentTime=0; playBtn.textContent="▶"; $("np-badge").classList.remove("playing"); cancelAnimationFrame(raf); $("now").textContent="0:00"; seek.value="0"; playhead.style.left="0%"; drawWave(waveCanvas,current.samples,0); }
+function setupPlayer(c){
+  current=c; renderKaraoke(c); drawMarkers(c); drawWave(waveCanvas,c.samples,0);
+  c.audio=new Audio(c.url); const a=c.audio;
+  $("dur").textContent=fmtTime(c.totalSec); $("now").textContent="0:00"; seek.value="0"; seek.disabled=false;
+  playBtn.disabled=false; stopBtn.disabled=false; restartBtn.disabled=false; playBtn.textContent="▶";
+  $("np-title").textContent=activeModel(); $("np-sub").textContent=`${c.totalSec.toFixed(2)}s · ${c.chunks.length} chunk${c.chunks.length!==1?"s":""}`;
+  $("take-spec").textContent=`${c.totalSec.toFixed(2)}s · ${c.chunks.length} chunks · ${c.samples.length} smp`;
+  dl.href=c.url;
+  a.addEventListener("loadedmetadata",()=>{ $("dur").textContent=fmtTime(a.duration); });
+  a.addEventListener("ended",()=>{ playBtn.textContent="▶"; $("np-badge").classList.remove("playing"); cancelAnimationFrame(raf); $("now").textContent=fmtTime(c.totalSec); seek.value="1000"; playhead.style.left="100%"; drawWave(waveCanvas,c.samples,1); karaoke.querySelectorAll(".chunk").forEach(s=>{ s.classList.remove("speaking"); s.classList.add("spoken"); }); });
 }
+playBtn.addEventListener("click",()=>{ if(!current) return; if(current.audio.paused) startPlayback(current); else pausePlayback(current); });
+stopBtn.addEventListener("click",()=>{ if(current) stopPlayback(current); });
+restartBtn.addEventListener("click",()=>{ if(!current) return; current.audio.currentTime=0; if(current.audio.paused) startPlayback(current); });
+seek.addEventListener("input",()=>{ if(!current) return; const t=(parseFloat(seek.value)/1000)*current.totalSec; current.audio.currentTime=t; $("now").textContent=fmtTime(t); playhead.style.left=`${(t/current.totalSec)*100}%`; drawWave(waveCanvas,current.samples,t/current.totalSec); });
+$("wave").addEventListener("click",(e)=>{ if(!current) return; const r=$("wave").getBoundingClientRect(); const p=(e.clientX-r.left)/r.width; const t=p*current.totalSec; current.audio.currentTime=t; $("now").textContent=fmtTime(t); });
+/* ---- generate ---- */
+async function doGenerate(){
+  setBusy(true,"Queued for ZeroGPU…"); queueEl.textContent="";
+  try{
+    const c=await getClient(); const res=await c.predict("/synthesize",{ ...inputs(), model_name: activeModel() });
+    const fileObj=res.data[0]; const statusText=res.data[1]||"Done.";
+    const url=fileObj.url; if(!url) throw new Error("server returned no audio url");
+    const buf=await fetchArray(url); const blobUrl=wavBlobUrl(buf); const decoded=await decodeWav(buf);
+    const text=$("text").value; const chunks=splitText(text); const timings=chunkTimings(chunks,decoded.duration);
+    const samples=decoded.getChannelData(0);
+    setupPlayer({ url:blobUrl, totalSec:decoded.duration, chunks, timings, samples, audio:null });
+    statusEl.innerHTML=statusText; strip.classList.remove("busy","err"); strip.classList.add("ok"); queueEl.classList.add("hidden");
+    // topbar meters
+    const rtfM=statusText.match(/RTF\s*([0-9.]+)/); if(rtfM) $("m-rtf").textContent=parseFloat(rtfM[1]).toFixed(3);
     setBusy(false);
+    startPlayback(current);
+  } catch(e){ setError(`Error: ${String(e?.message||e)}`); setBusy(false); }
 }
+/* ---- compare ---- */
+let cmp={ micro:null, nano:null };
+const cmpCanvas={ micro:$("micro-canvas"), nano:$("nano-canvas") };
+async function doCompare(){
+  setBusy(true,"Comparing models on ZeroGPU…"); queueEl.textContent="";
+  for(const k of ["micro","nano"]){ if(cmp[k]?.audio){ cmp[k].audio.pause(); } cmp[k]=null; $(`${k}-now`).textContent="0:00"; $(`${k}-dur`).textContent="0:00"; $(`${k}-seek`).value="0"; $(`${k}-seek`).disabled=true; document.querySelector(`.mini-play[data-mini="${k}"]`).disabled=true; document.querySelector(`.mini-play[data-mini="${k}"]`).textContent="▶"; $(`${k}-ph`).style.left="0%"; drawMini(cmpCanvas[k], new Float32Array(40),0); }
+  try{
+    const c=await getClient(); const res=await c.predict("/compare",{ ...inputs() });
+    const [microObj,nanoObj,statusText]=res.data;
+    for(const [key,obj,durId,nowId,seekId,dlId,phId,cv] of [
+      ["micro",microObj,"micro-dur","micro-now","micro-seek","micro-dl","micro-ph",cmpCanvas.micro],
+      ["nano",nanoObj,"nano-dur","nano-now","nano-seek","nano-dl","nano-ph",cmpCanvas.nano],
+    ]){
+      const url=obj.url; if(!url) throw new Error(`server returned no ${key} url`);
+      const buf=await fetchArray(url); const blobUrl=wavBlobUrl(buf); const decoded=await decodeWav(buf); const samples=decoded.getChannelData(0);
+      $(dlId).href=blobUrl; $(durId).textContent=fmtTime(decoded.duration); $(seekId).value="0"; $(seekId).disabled=false;
+      drawMini(cv,samples,0);
+      const audio=new Audio(blobUrl); const btn=document.querySelector(`.mini-play[data-mini="${key}"]`); btn.disabled=false;
+      const upd=()=>{ $(nowId).textContent=fmtTime(audio.currentTime); const p=audio.currentTime/decoded.duration; $(seekId).value=String(Math.round(p*1000)); $(phId).style.left=`${p*100}%`; drawMini(cv,samples,p); };
+      audio.addEventListener("timeupdate",upd);
+      audio.addEventListener("ended",()=>{ btn.textContent="▶"; $(phId).style.left="100%"; drawMini(cv,samples,1); });
+      const sk=$(seekId); if(sk._seek) sk.removeEventListener("input",sk._seek); const onSeek=()=>{ audio.currentTime=(parseFloat(sk.value)/1000)*decoded.duration; }; sk._seek=onSeek; sk.addEventListener("input",onSeek);
+      cmp[key]={ audio, totalSec:decoded.duration, samples, canvas:cv };
     }
+    statusEl.innerHTML=statusText; strip.classList.remove("busy","err"); strip.classList.add("ok"); queueEl.classList.add("hidden");
     setBusy(false);
+  } catch(e){ setError(`Error: ${String(e?.message||e)}`); setBusy(false); }
 }
+document.querySelectorAll(".mini-play").forEach((btn)=>{ btn.addEventListener("click",()=>{ const key=btn.dataset.mini; const item=cmp[key]; if(!item||!item.audio) return;
+  if(item.audio.paused){ const other=key==="micro"?"nano":"micro"; if(cmp[other]?.audio && !cmp[other].audio.paused){ cmp[other].audio.pause(); document.querySelector(`.mini-play[data-mini="${other}"]`).textContent="▶"; } item.audio.play(); btn.textContent="❚❚"; }
+  else { item.audio.pause(); btn.textContent="▶"; }
+}); });
+genBtn.addEventListener("click",doGenerate);
+cmpBtn.addEventListener("click",doCompare);
+$("text").addEventListener("keydown",(e)=>{ if(e.key==="Enter"&&(e.metaKey||e.ctrlKey)){ e.preventDefault(); doGenerate(); } });
+/* redraw wave on resize */
+window.addEventListener("resize",()=>{ if(current) drawWave(waveCanvas,current.samples, current.audio?current.audio.currentTime/current.totalSec:0); for(const k of ["micro","nano"]){ if(cmp[k]) drawMini(cmpCanvas[k],cmp[k].samples, cmp[k].audio?cmp[k].audio.currentTime/cmp[k].totalSec:0); } });
+drawWave(waveCanvas,new Float32Array(200),0);
+drawMini(cmpCanvas.micro,new Float32Array(40),0);
+drawMini(cmpCanvas.nano,new Float32Array(40),0);
 </script>
 </body>
 </html>