Add browser WebGPU runtime option

README.md

@@ -26,10 +26,18 @@ Live text-to-waveform inference for both Inflect v2 release models:
 - [Inflect-Micro-v2](https://huggingface.co/owensong/Inflect-Micro-v2): 9.36M parameters
 - [Inflect-Nano-v2](https://huggingface.co/owensong/Inflect-Nano-v2): 3.96M parameters
 
+Choose the runtime that fits your device:
+
+- **ZeroGPU:** server-side generation in this Space, with no local model download.
+- **[Browser WebGPU](https://huggingface.co/spaces/owensong/Inflect-Web):**
+  private, queue-free on-device inference with optional streaming and a WASM
+  compatibility fallback.
+
 Every result is synthesized live from text. There is no reference audio,
 prerecorded fallback, or inference-time teacher model. Use the Compare tab to
 run the same text, speed, variation, and seed through both checkpoints.
 
 Long input is split automatically at sentence and punctuation boundaries, then
 assembled into one downloadable WAV. ZeroGPU still applies a per-generation
-time limit, so submit book-length or document-length text in smaller sections.
+time limit, so submit book-length or document-length text in smaller sections,
+or use Browser WebGPU for inference without a server quota.

app.py

@@ -296,6 +296,18 @@ body,.gradio-container,.gradio-container button,.gradio-container input,.gradio-
 .links a{color:var(--muted)!important;text-decoration:none}.links a:hover{color:var(--ink)!important}
 .hero h1{max-width:1040px;margin:15px 0 8px;color:var(--ink);font:650 clamp(40px,4.5vw,56px)/.96 Inter,ui-sans-serif,sans-serif;letter-spacing:-.055em}
 .hero>p{max-width:1000px;margin:0;color:var(--muted)!important;font-size:13px;line-height:1.48}
+.runtime-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:15px 0 2px;max-width:1080px}
+.runtime-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:78px;padding:13px 15px;border:1px solid var(--line);border-radius:3px;background:var(--panel-2);color:var(--ink)!important;text-decoration:none!important;transition:border-color .16s ease,background .16s ease,transform .16s ease}
+.runtime-card:hover{border-color:#527aa6;background:#1b242d;transform:translateY(-1px)}
+.runtime-card.active{border-color:#356ea8;background:var(--signal-soft)}
+.runtime-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #3a4540;border-radius:50%;color:var(--muted)!important;font-size:17px}
+.runtime-card.active .runtime-icon{border-color:#356ea8;background:#17385e;color:#fff!important}
+.runtime-copy{min-width:0}
+.runtime-kicker{display:block;margin-bottom:3px;color:var(--signal)!important;font:750 9px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;text-transform:uppercase}
+.runtime-title{display:block;color:var(--ink)!important;font-size:15px;line-height:1.2;font-weight:800}
+.runtime-description{display:block;margin-top:3px;color:var(--muted)!important;font-size:11px;line-height:1.35}
+.runtime-state{align-self:center;padding:5px 7px;border:1px solid #3f4a44;border-radius:2px;color:var(--muted)!important;font:750 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
+.runtime-card.active .runtime-state{border-color:#356ea8;color:#dceaff!important}
 .model-facts{display:flex;align-items:stretch;margin-top:13px;border-top:1px solid var(--line)}
 .model-fact{flex:1;padding:8px 24px 0 0;color:var(--muted)!important;font-size:11px;line-height:1.3}
 .model-fact+.model-fact{padding-left:20px;border-left:1px solid var(--line)}
@@ -334,6 +346,7 @@ footer{display:none!important}
 html,body{overflow-x:hidden!important}.gradio-container{width:100%!important;min-width:0!important;padding:0 14px 38px!important}
 .hero{padding-top:22px}.hero-top{align-items:flex-start;flex-direction:column;gap:12px}.links{gap:14px;font-size:11px}
 .hero h1{margin-top:18px;font-size:42px}.model-facts{display:grid;grid-template-columns:1fr 1fr}.model-fact{padding:11px 10px 9px 0}.model-fact+.model-fact{padding-left:10px}.model-fact:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line)}.model-fact:nth-child(4){border-top:1px solid var(--line)}
+.runtime-picker{grid-template-columns:1fr}.runtime-card{grid-template-columns:auto minmax(0,1fr);padding:13px}.runtime-state{grid-column:2;justify-self:start;margin-top:-5px}
 .workbench{min-width:0!important;padding-top:18px!important}.control-row,.action-row,.comparison .row{flex-direction:column!important;min-width:0!important}
 .control-row>*,.action-row>*,.comparison .row>*{width:100%!important;min-width:0!important}.gradio-container .wrap,.gradio-container .form,.gradio-container .block{min-width:0!important}
 }
@@ -351,8 +364,9 @@ with gr.Blocks(title="Inflect v2 · local speech playground") as demo:
     gr.HTML("""
     <header class="hero">
       <div class="hero-top">
-        <span class="eyebrow">Inflect v2 · live ZeroGPU synthesis</span>
+        <span class="eyebrow">Inflect v2 · choose where inference runs</span>
         <nav class="links">
+          <a href="https://huggingface.co/spaces/owensong/Inflect-Web" target="_blank" rel="noopener">Browser WebGPU ↗</a>
           <a href="https://huggingface.co/owensong/Inflect-Micro-v2">Micro model</a>
           <a href="https://huggingface.co/owensong/Inflect-Nano-v2">Nano model</a>
           <a href="https://github.com/owenawsong/Inflect">GitHub</a>
@@ -360,13 +374,33 @@ with gr.Blocks(title="Inflect v2 · local speech playground") as demo:
       </div>
       <h1>Small models.<br>Complete speech.</h1>
       <p>Generate 24 kHz English speech with the published Inflect-Micro-v2 and Inflect-Nano-v2 checkpoints. The full text-to-waveform path runs here: no reference clip, external vocoder, hosted teacher, or prerecorded result.</p>
+      <div class="runtime-picker" role="navigation" aria-label="Inference runtime">
+        <div class="runtime-card active" aria-current="page">
+          <span class="runtime-icon" aria-hidden="true">◆</span>
+          <span class="runtime-copy">
+            <span class="runtime-kicker">Server inference</span>
+            <span class="runtime-title">ZeroGPU</span>
+            <span class="runtime-description">Runs here on Hugging Face. No model download or compatible GPU required.</span>
+          </span>
+          <span class="runtime-state">Current mode</span>
+        </div>
+        <a class="runtime-card" href="https://huggingface.co/spaces/owensong/Inflect-Web" target="_blank" rel="noopener">
+          <span class="runtime-icon" aria-hidden="true">◉</span>
+          <span class="runtime-copy">
+            <span class="runtime-kicker">On-device inference</span>
+            <span class="runtime-title">Browser WebGPU</span>
+            <span class="runtime-description">No queue or quota. Optional streaming, WebGPU acceleration, and WASM fallback.</span>
+          </span>
+          <span class="runtime-state">Open ↗</span>
+        </a>
+      </div>
       <div class="model-facts">
         <div class="model-fact"><strong>9.36M · Micro</strong>quality-first model</div>
         <div class="model-fact"><strong>3.96M · Nano</strong>footprint-first model</div>
         <div class="model-fact"><strong>24 kHz WAV</strong>complete waveform output</div>
         <div class="model-fact"><strong>Local stack</strong>text normalization through audio</div>
       </div>
-      <p class="zerogpu-note"><strong>ZeroGPU note:</strong> each generation has a time limit. Inflect automatically splits text at sentence and punctuation boundaries, but very long documents should be submitted in smaller sections.</p>
+      <p class="zerogpu-note"><strong>Using ZeroGPU:</strong> each generation has a time limit. For private, queue-free synthesis that runs on your own hardware, choose <a href="https://huggingface.co/spaces/owensong/Inflect-Web" target="_blank" rel="noopener">Browser WebGPU</a> above.</p>
     </header>
     """, elem_classes="hero-wrap")
     with gr.Column(elem_classes="workbench"):