v0.3.2: compact loading, moving wave and optional auto-play

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.2 · 2026-11-10
+
+- Show a compact loading shell in the initial HTML, with reload/direct-tab recovery if initialization is delayed. Use explicit client rendering and prevent caching of the document entry; leave streaming API and media responses unchanged.
+- Increase wave travel and vary its shape locally while retaining smooth edges, real audio-energy response, pause decay and reduced-motion support.
+- Add Auto-play result, enabled by default and remembered in the browser. Prepare playback on Generate and reuse the media element across takes; handle policy refusal, cancellation, background tabs and manual playback.
+- Preserve all model revisions, generation parameters and the 13-input / 5-output API.
+
 ## 0.3.1 · 2026-11-10
 
 - Replace sample-based waveform rendering with a rounded, continuous curve whose amplitude follows actual playback energy. Use time-based attack/release and smooth edge fades; settle to a flat line on pause/end. Audio data and inference are unchanged.

MANIFEST.sha256

@@ -1,32 +1,34 @@
 378f694f97eb755989fc6139455a58bc8c1bca7ae32c7a11be939a42ab27eeda  .gitattributes
 f63fc2a4a5e19102c55cf01aa092aa8982403ef6ef808f4c2c65a9f766ccbf3e  .gitignore
-c8635c735b9f6dc0e4927ed607b6192be8536321a2e693d287af9c9822fcb048  CHANGELOG.md
+9a449a5fa3b6bd3818edc79255b00aadc6e3960542530cba0feca8ce1a9a1cb8  CHANGELOG.md
 3381fc95c5558560e1bb62d4cebea34bf6efa4adfbda7f4fe03bbf40bbcc55d3  LICENSE
 14ff7f6e037dae2f40983b6408a1570d587bbcdecd7a7b061f2d11f94044f812  NOTICE
 5ea53dcd52ecacb21ea6ae4fb94cc2ed7163fe02300f792a0ed35d09dcc0709c  PROVENANCE.md
-ed674c9c8eb005cf69e51955d0fe6cb2f83ce22f89dfc370b24b84dc92f49ad6  README.md
-ec991525358dd3d5a89efdb67526f6c51e87b25f6712686d9722d0b1420c9266  VALIDATION.md
+7626578745fba5b916ac5a585899d9f9c6a80183a05c11e4b34aa978d171443c  README.md
+6079d8fde984301f974b43c1a0604594c5525b05463fdb6d76aa133600172162  VALIDATION.md
 c27fa4c518c35c000227a0a939c350999db6c4e45e71082ef32f74efb8ff3f92  alignment.py
-d37f555428e5506798c579213b3e7db08fcaa37e5856976061f1006f9ca8c6d8  app.py
+d0234e3e0bf5ef377bb3276cc3dca73f8d2a689f55bc44d80a234d2063591989  app.py
+bb3994ae1c3e5b64bda5474cda993ba94aee12776d8495bc6de950cca2cdfd17  assets/boot.html
 ca28255ebe082f8104b27f52fcf5c05bf899e6edfe8fdaa853eb30adcfdd0e52  assets/generate.js
 dd23ac0a74f0682218938cf387a037e89724e8bbfbdeb5ff35ecff289ebc24d4  assets/layout.js
 ecb1d25ae4aa218f69e269519fb68719a2c657ea1c24c0b6780df5f5dcf08259  assets/picker.js
 98d10bfcd45f9d3dfe3cf1e433a4a2829d253496a90daefd30819a0abd5a4347  assets/player.css
-08722bf8146befa0b2acc859ff8130235a9dfe2ca2c7fc1d66fb2fe34c8efb4c  assets/player.html
-dd739d27e9317bf9534e872c67b060e0d3f5c490bbb2923b28748beebb6a9386  assets/player.js
+47e44be992f37a3d94c7eab6d0efb99579f3ba68141045a28c68cb0e4962cdbf  assets/player.html
+cd4ed9b35a9d40beb8d91c054310437026e00723828123a5ffe26f681ac4e97b  assets/player.js
 57347c4f3eb6f9aec59f1c8882c66e926e04acb87cc0154573594f063cf5df02  assets/reference.css
 03b2f8dbea4891f5ceb8990727473184118536720f439ffc69ef7d83d2f9a396  assets/reference.html
 697bc75149164c4737f1d07d1ba95cffcae9214fee3c6e7ba1210c497783c5f1  assets/reference.js
 74a71fe3c3cee7795fdd1e80f79b29f22c82c7bd27f2486c1a88578e5de1e821  assets/script.css
 9519e9e91bc74d23ef72c0e4e8b3c02f0d16fee8143910bff75c1731f163ed44  assets/script.html
-f7cfcf63e5622405ce6fe57d106231c1ce00bea379d995d74433ac854b5c099f  assets/script.js
+d82a75d9d2e92326d93230d3389815ce9216f30195b74b619098b509b5afc089  assets/script.js
 b379b615bb1f52b355b60bdde94a9fde4ef732f635a1ed56adbdfb7e279baca7  assets/settings.css
-11205e51e46d238be4958947cb0bebd35eb3cb69903b38903ab624ba25a40f32  assets/settings.html
-bd82d406c7554e4f0f7410b9dec78b85c0f3aea5b4eba028add750a4e9dd928c  assets/settings.js
+9d311f9d8222ba9efab8178e5ebe48c75afd20212769ac04af0248550dfea2eb  assets/settings.html
+f8f916678698be4980a84d68a2ced620aa0dac039cbf0330bb1d8e64e2d8d65a  assets/settings.js
 249fd190f8b58cf6e1b8f2582ed4afc40ce8ecf43292cbb409ee82f255604465  assets/style.css
-3aaf1734e4a4122d4968b2ff1cd7124a6aad8fe243f364cd5f1d4ff6b3b7065a  assets/wave.js
+4ce25de7785872fde1655e9c372dc2f6530b7f1e8d8a4d9295f1bf249cc8cfce  assets/wave.js
 c476aa0fc7ed79b77cd6577d6e5efaf75dee8cccb6d5dc5f56fe92334b27d04d  audio_files.py
-219e8fa0a84356f1c9c1ff589d23a38e7c4b0f1164404da8e880cc04adca1400  config.py
+e02447cc43708cdebc0025104cdade91c19ba88bfbe3b37830fe3b9748d55f64  boot.py
+daaaf0fc864b96719eff2f5684739bca9dc41806ec23d0d0da19ea6be879c826  config.py
 22cc095df3f023b95e4f7456f1b79144e341a33db6554db88ebe08a98c6b2f78  controller.py
 6aa124baba94d5961a439a9467325e14aec4306f1e1fbdb3fef9a7a0b9bd511b  engine.py
 e419cf08810b1fb969523c597a03c728d2f697b03a3e5e9a2ef81e63620d4046  examples.json
@@ -42,6 +44,7 @@ efe08b65cc84bffc56f7a101e2cab6687355eef1ffaf415673b0f769605c7d41  scripts/packag
 f364eca49b31d8637a504c9644b5c522c6702d33c89df06e229438fb124a11dc  tested-dependencies.json
 e25f3dd0e11ec835e7db001c703825430e5c4745a538efb8d445fe650821cf1b  tests/test_alignment.py
 70802a3c9077443d6e7c8e9d354f799981f96a321cca5b40f5f307fa364b2924  tests/test_audio.py
+545383708509cae09cb17f69f5f7ffdba43a93e72ff70bbe743ef9e0c3ce6bc4  tests/test_boot.py
 89a62cbb880d9495634fce62a659e531dba74a1efa8bb5db4dbfeb1b8d5bf44b  tests/test_contracts.py
 8133a4f9345f726307b0cac6530b948faa710e9d0405b1021b6d72b006d71ea1  tests/test_examples.py
 9c2d7b6aad84fa56d891bb7f79bedc8386b5cfca86f80a282c41777d9cd1a61b  tests/test_http.py
@@ -49,7 +52,7 @@ a20f4145d11561ab4caeabd51952c9f9b14088d5d330a4549e79f6a32310221c  tests/test_lif
 0889b93f4d83986372f5dbc72ad902ebb076bfd730c6ad07f3232b01b5ed1ee9  tests/test_logging.py
 31bfd349c66c1c31c06a7fc7d6cd1c94257679029bd512ddb4f133bfc4f6ccc8  tests/test_package.py
 beae97c67f31cc89d948a5293bc820348cae1117e2f626ba97e7706819318ac8  tests/test_requests.py
-af5fbdeb7451697c35a2ba85ed2e585e5e9322bd2fd5873e724b9a5cc4f766ed  tests/test_ui_js.py
+9dbb093d9356a2dd2dab243c635629ff5c65e2c0550c87a9a838a9845abbaa3a  tests/test_ui_js.py
 98216c34413fa17aeaaba8aeec41d157609b6b8f6c07cf6250239128cf616bb5  vendor/ZYPHRA_LICENSE
 5dd0692aae95e02965462827ccdd0fb1fc4f9762552e1cf979c4dc789cc34fc5  vendor/ZYPHRA_NOTICE
 cfc7749b96f63bd31c3c42b5c471bf756814053e847c10f3eb003417bc523d30  vendor/third_party/licenses/fusealign-multilingual-Apache-2.0.txt

README.md

@@ -15,7 +15,7 @@ models:
 short_description: A voice, a line, and your words.
 ---
 
-# ZONOS3 Mini · 0.3.1
+# ZONOS3 Mini · 0.3.2
 
 A minimal Hugging Face Space for [Zyphra's ZONOS3-Mini](https://huggingface.co/Zyphra/ZONOS3-Mini).
 Centered editable text, a fine audio-reactive line, and one Generate button. The interface follows the supplied Zyphra presentation references. Model: Zyphra. UI/UX: [Sylvain Filoni / fffiloni](https://huggingface.co/fffiloni).
@@ -26,12 +26,18 @@ Centered editable text, a fine audio-reactive line, and one Generate button. The
 
 1. Write up to 600 characters. Choose a language and a preset voice.
 2. Select **Generate speech**. The native Gradio/ZeroGPU progress and quota notices remain available.
-3. Play, seek or download the completed WAV. Generation does not autoplay.
+3. The completed WAV plays automatically when **Auto-play result** is enabled (the default). Disable it in Voice settings if preferred. Play, seek and download remain available. A browser that blocks playback shows a prompt to tap Play.
 
-The waveform starts flat. Voice settings use documented Gradio HTML props, watch callbacks, custom example events and a custom audio upload/record/trim child. The generation event snapshots the custom controls into the unchanged public API inputs. During playback the line follows the actual audio energy when Web Audio is available. Its rounded shape is an illustration rather than a sample-by-sample oscilloscope: a continuous phase and time-based attack/release avoid jagged peaks and abrupt jumps. It returns smoothly to flat when paused or finished; no frozen full-take waveform remains. Reduced-motion mode keeps the playback line still, without disabling word synchronization. A separate animated activity indicator appears while a request is pending; it is not an audio preview or a completion estimate. Native Gradio progress retains the real preparation/allocation/inference stages. Visual gain and edge fades affect only the drawing, never the audio.
+The waveform starts flat. Voice settings use documented Gradio HTML props, watch callbacks, custom example events and a custom audio upload/record/trim child. The generation event snapshots the custom controls into the unchanged public API inputs. During playback the line follows the actual audio energy when Web Audio is available. Its rounded shape is an illustration rather than a sample-by-sample oscilloscope: moving crests, smooth local phase deformation and time-based attack/release avoid jagged peaks and abrupt jumps. It returns smoothly to flat when paused or finished; no frozen full-take waveform remains. Reduced-motion mode keeps the playback line still, without disabling word synchronization. A separate animated activity indicator appears while a request is pending; it is not an audio preview or a completion estimate. Native Gradio progress retains the real preparation/allocation/inference stages. Visual gain and edge fades affect only the drawing, never the audio.
 
 **Voice options** contains an optional reference clip, consent checkbox, seed, normalization, speaking rate and sampling. Selecting a preset selects its default text language; the language can then be changed independently. Nine examples fill text, language and voice without starting inference: English, French, German, Spanish, Italian, Portuguese, Japanese, Mandarin and Korean. The Japanese example uses Savannah across languages because the exposed catalog has no native Japanese preset. The buttons use a fixed three-column grid with equal touch targets and underline positions. The English interface retains French text without requiring an interface language switch.
 
+## Loading and playback
+
+The HTML entry response includes a compact loading shell before framework JavaScript executes. If initialization takes longer, it offers Reload and Open in a new tab. It disappears after the text, player and settings are initialized. The entry is served with `Cache-Control: no-store`; static hashed assets remain cacheable. `ssr_mode=False` is explicit so local and hosted startup use the same rendering path. This removes the empty SSR shell observed before client initialization; it does not claim to diagnose every network or browser-cache failure.
+
+Auto-play is a browser-only preference, remembered locally when storage is available. The Generate gesture prepares one persistent audio element and AudioContext (including a short silent first-use primer). Only a new completed result may start automatically. Failed or cancelled requests never replay the preceding take, and a background tab waits for a manual Play click. Browser and iframe playback policies still apply; a rejected `play()` promise leaves Play and Download usable. No autoplay setting is added to the public synthesis API.
+
 ## Deploy to Hugging Face
 
 1. Create a **Gradio** Space under an account with ZeroGPU access. Select **ZeroGPU** hardware in its settings. Consult the [current HF ZeroGPU instructions](https://huggingface.co/docs/hub/spaces-zerogpu).

VALIDATION.md

@@ -1,7 +1,18 @@
-# Validation · 0.3.1 · 2026-11-10
+# Validation · 0.3.2 · 2026-11-10
 
 ## Current release
 
+- 61 local tests passed, including the unchanged synthesis API, lifecycle and packaging checks. New ASGI tests verify insertion before framework markup, no-store entry headers and untouched API/SSE/media/asset responses. The five boot/UI contracts also passed after the final readiness change. The existing protobuf deprecation warning remains visible.
+- Actual WebKit and Chromium rendering with an iPhone-sized viewport: automatic playback succeeded on two successive results using the same media element. Disabling auto-play prevented playback, and the preference survived reload. A simulated browser-policy rejection left an explicit message and usable manual Play control; manual playback then succeeded after restoring the browser method.
+- Cancelled and invalid requests preserved the previous audio without replaying it. The curve changed during actual WAV playback and settled to the exact flat baseline on pause. No JavaScript page errors were observed. Viewports at 320, 390, 768 and 1440 CSS px had no horizontal overflow.
+- Startup checks in both engines: initial HTML includes the compact 280 px loading shell and no-store header; the shell disappears after the text, player and settings signal readiness. Blocking framework JavaScript kept the shell visible, then exposed Reload and Open in a new tab after the timeout. Mobile loading and playback screenshots were inspected.
+- Browser inference was a CPU fixture with simulated request progress and a real 3.933-second English/Savannah WAV obtained from the deployed v0.3.1 engine. The fixture is not a new GPU inference or a GPU-release test.
+- Models, pinned dependencies, inference parameters, GPU lifecycle and 13-input / 5-output API are unchanged. Auto-play is a local browser preference. Entry loading changes use the public ASGI middleware interface and explicit Gradio client rendering.
+
+Remaining limits: physical Safari/iPhone, background-tab media policy across devices, and acoustic review of all language examples. Linux WebKit is not a physical iOS test. The policy-refusal case was simulated; playback success above was actual browser media playback. Earlier GPU-release evidence applies to the unchanged engine.
+
+## v0.3.1 evidence
+
 - 59 local tests passed: examples and preset/language mappings, unchanged public API, wave energy/geometry, time-based attack and release, generation lifecycle, session isolation and complete source-package imports. The existing protobuf deprecation warning remains visible.
 - The live v0.3.0 baseline at `ba8c1f3fd8218768930ce6ab5bf372657908cc05` reproduced the example-button mismatch: English inherited a 4 px bottom margin and measured 44 px high; Français measured 48 px. The replacement grid has nine 44 px buttons, zero margins and equal underline positions within each row.
 - Actual Chromium rendering at 320, 390, 768 and 1440 CSS px: no horizontal overflow; all nine example buttons update text, language and preset without publishing an audio result or requesting synthesis. English, French, German, Spanish, Italian, Portuguese, Japanese, Mandarin and Korean are included.

app.py

@@ -12,6 +12,8 @@ import gradio as gr
 from config import DEFAULT_TEXT, GRADIO_VERSION, LANGUAGES, MAX_CHARS, MAX_SEED, ROOT, VERSION
 from controller import Controller, message
 from logging_setup import configure_logging
+from starlette.middleware import Middleware
+from boot import EntryShell
 
 configure_logging()
 if gr.__version__ != GRADIO_VERSION:
@@ -159,4 +161,5 @@ demo.queue(max_size=16, default_concurrency_limit=1, api_open=False)
 if __name__ == "__main__":
     demo.launch(theme=theme, css=(ASSETS / "style.css").read_text(), allowed_paths=[str(controller.outputs.resolve())],
                 blocked_paths=[str((ROOT / "vendor").resolve()), str(controller.jobs.directory.resolve())],
-                max_file_size="25mb", show_error=False, max_threads=40, footer_links=[])
+                max_file_size="25mb", show_error=False, max_threads=40, footer_links=[],
+                ssr_mode=False, app_kwargs={"middleware":[Middleware(EntryShell, shell_path=ASSETS / "boot.html")]})

assets/boot.html

@@ -0,0 +1,40 @@
+<style>
+#zonos-boot{box-sizing:border-box;display:grid;align-content:center;justify-items:center;gap:20px;min-height:280px;padding:36px 20px;background:#000;color:#ddd;font:12px/1.6 ui-monospace,monospace;text-align:center}
+#zonos-boot p{margin:0}#zonos-boot strong{font-weight:400;letter-spacing:.04em}
+#zonos-boot svg{display:block;width:180px;height:32px;fill:none;stroke:#999;stroke-width:1.25}
+#zonos-boot a{color:#ddd;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px;margin:0 8px}
+#zonos-boot a:focus-visible{outline:2px solid #eee;outline-offset:4px}
+#zonos-boot [hidden]{display:none!important}
+html[data-zonos-loading] gradio-app{visibility:hidden;height:0!important;overflow:hidden;flex:none!important}
+</style>
+<div id="zonos-boot" role="status" aria-live="polite">
+<strong>ZONOS3-Mini</strong>
+<svg viewBox="0 0 180 32" aria-hidden="true"><path d="M0 16H40C51 16 51 8 60 8S69 24 78 24S87 5 96 5S105 23 114 23S124 16 140 16H180"/></svg>
+<p data-boot-message>Loading the interface…</p>
+<div data-boot-help hidden><a href="" data-boot-reload>Reload</a><a href="" target="_blank" rel="noopener" data-boot-direct>Open in a new tab</a></div>
+<noscript>This application needs JavaScript to display its controls.</noscript>
+</div>
+<script>
+(function(){
+ var root=document.documentElement,boot=document.getElementById('zonos-boot');
+ root.setAttribute('data-zonos-loading','');
+ var reload=boot.querySelector('[data-boot-reload]'),direct=boot.querySelector('[data-boot-direct]');
+ var fresh=new URL(location.href);fresh.searchParams.set('reload',Date.now().toString());
+ reload.href=fresh.href;direct.href=fresh.href;
+ function ready(){
+  var player=document.getElementById('speech-player'),settings=document.getElementById('voice-options'),text=document.getElementById('script-input');
+  if(!document.getElementById('generate-speech')||!text||text.dataset.ready!=='true'||!player||player.dataset.ready!=='true'||!settings||settings.dataset.ready!=='true')return false;
+  root.removeAttribute('data-zonos-loading');boot.remove();observer.disconnect();clearTimeout(timer);return true;
+ }
+ var observer=new MutationObserver(ready);
+ observer.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:['data-ready']});
+ var timer=setTimeout(function(){
+  if(ready())return;
+  // This is a loading fallback, not a fabricated inference error or ETA.
+  root.removeAttribute('data-zonos-loading');
+  boot.querySelector('[data-boot-message]').textContent='The interface is taking longer to load.';
+  boot.querySelector('[data-boot-help]').hidden=false;
+ },12000);
+ ready();
+})();
+</script>

assets/player.html

@@ -2,7 +2,7 @@
   <svg class="wave" viewBox="0 0 1000 140" preserveAspectRatio="none" role="img" aria-label="Voice-reactive visualization">
     <path d="M0 70 L1000 70" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"></path>
   </svg>
-  <audio controls preload="metadata" hidden></audio>
+  <audio controls preload="metadata" playsinline hidden></audio>
   <div class="playback" hidden>
     <button type="button" data-play aria-label="Play generated speech">Play</button>
     <span data-time aria-live="off">0:00</span>

assets/player.js

@@ -1,120 +1,163 @@
 const host=document.getElementById('speech-player');
-// Documented Gradio HTML API; all external events use our own component ID.
 const reducedMotion=window.matchMedia('(prefers-reduced-motion: reduce)');
 const motion=new WaveMotion();
-let dispose=()=>{}, activityFrame=0, lastFrame=0, active=false;
-let energy=()=>0, playing=()=>false, clock=()=>{};
+let activityFrame=0,lastFrame=0,active=false;
+let energy=()=>0,playing=()=>false,clock=()=>{};
 function animate(now) {
   activityFrame=0;
   if(!element.isConnected)return;
-  const dt=lastFrame?Math.min(.05,(now-lastFrame)/1000):1/60;
-  lastFrame=now;
-  const isPlaying=playing();
-  if(isPlaying)clock();
-  const target=active ? .32+.055*Math.sin(now/1300): isPlaying ? energy() : 0;
+  const dt=lastFrame?Math.min(.05,(now-lastFrame)/1000):1/60;lastFrame=now;
+  const isPlaying=playing();if(isPlaying)clock();
+  const target=active ? .32+.055*Math.sin(now/1300) : isPlaying ? energy() : 0;
   const path=element.querySelector('.wave path');
-  if(reducedMotion.matches) {
-    // A still activity curve; playback never animates when motion is reduced.
-    motion.level=0;path.setAttribute('d',wavePath(active ? .27 : 0,.6));
-  } else {
-    motion.step(target,dt);path.setAttribute('d',wavePath(motion.level,motion.phase));
-  }
-  if(isPlaying || (active && !reducedMotion.matches) || motion.level>0)activityFrame=requestAnimationFrame(animate);
+  if(reducedMotion.matches){motion.level=0;path.setAttribute('d',wavePath(active ? .27 : 0,.6));}
+  else {motion.step(target,dt);path.setAttribute('d',wavePath(motion.level,motion.phase));}
+  if(isPlaying || (active&&!reducedMotion.matches) || motion.level>0)activityFrame=requestAnimationFrame(animate);
   else lastFrame=0;
 }
-function scheduleWave() { if(!activityFrame)activityFrame=requestAnimationFrame(animate); }
-function setActivity(busy) {
+function scheduleWave(){if(!activityFrame)activityFrame=requestAnimationFrame(animate);}
+function setActivity(busy){
   active=busy;
   element.querySelector('.wave').setAttribute('aria-label',busy?'Request activity indicator; not an audio preview':'Voice-reactive visualization');
   host.dataset.busy=String(busy);
-  if(!busy) {
+  if(!busy){
     const generate=document.getElementById('generate-speech');
-    if(generate)generate.disabled=document.getElementById('voice-options')?.dataset.clip==='true' && document.getElementById('reference-clip')?.dataset.busy==='true';
+    if(generate)generate.disabled=document.getElementById('voice-options')?.dataset.clip==='true'&&document.getElementById('reference-clip')?.dataset.busy==='true';
+    queueMicrotask(tryAutoplay);
   }
   scheduleWave();
 }
 const globalListeners=new AbortController();
-host.addEventListener('zonos:activity',event=>setActivity(event.detail===true),{signal:globalListeners.signal});
+const on=(target,name,handler,options={})=>target?.addEventListener(name,handler,{...options,signal:globalListeners.signal});
+// Keep one media element and AudioContext across takes. WebKit grants playback
+// permission per element; replacing it after an asynchronous request loses that.
+const player=element.querySelector('audio'),controls=element.querySelector('.playback');
+const button=element.querySelector('[data-play]'),seek=element.querySelector('[data-seek]');
+const notice=element.querySelector('.audio-notice');
+let context=null,analyser=null,source=null,data={},revision=0,disposed=false;
+let requested=false,autoplayCandidate=false,playPending=false;
+const samples=new Float32Array(2048);
+const minutes=seconds=>`${Math.floor(seconds/60)}:${String(Math.floor(seconds%60)).padStart(2,'0')}`;
+const autoplayEnabled=()=>document.getElementById('autoplay-result')?.checked===true;
+playing=()=>Boolean(data.url)&&!player.paused&&!player.ended;
+energy=()=>{if(!analyser)return 0;analyser.getFloatTimeDomainData(samples);return voiceEnergy(samples);};
+clock=()=>{if(data.url)document.getElementById('script-input')?.dispatchEvent(new CustomEvent('zonos:clock',{detail:{time:player.currentTime||0,playing:playing()}}));};
+function prepareAudio(){
+  const AudioContextClass=window.AudioContext||window.webkitAudioContext;
+  if(!context&&AudioContextClass){
+    try{context=new AudioContextClass();analyser=context.createAnalyser();analyser.fftSize=2048;
+      source=context.createMediaElementSource(player);source.connect(analyser);analyser.connect(context.destination);
+    }catch{source?.disconnect();analyser?.disconnect();context?.close().catch(()=>{});context=null;analyser=null;source=null;}
+  }
+  return context?.state==='suspended'?context.resume():Promise.resolve();
+}
+function silentWav(){
+  const buffer=new ArrayBuffer(44+1600),view=new DataView(buffer);
+  const str=(offset,text)=>{for(let i=0;i<text.length;i++)view.setUint8(offset+i,text.charCodeAt(i));};
+  str(0,'RIFF');view.setUint32(4,buffer.byteLength-8,true);str(8,'WAVE');str(12,'fmt ');
+  view.setUint32(16,16,true);view.setUint16(20,1,true);view.setUint16(22,1,true);
+  view.setUint32(24,8000,true);view.setUint32(28,16000,true);view.setUint16(32,2,true);view.setUint16(34,16,true);
+  str(36,'data');view.setUint32(40,1600,true);
+  return URL.createObjectURL(new Blob([buffer],{type:'audio/wav'}));
+}
+let primerURL=null;
+function armPlayback(){
+  // Called directly in the Generate click, before Gradio's asynchronous request.
+  requested=autoplayEnabled();autoplayCandidate=false;
+  player.pause();
+  if(!requested)return;
+  prepareAudio().catch(()=>{});
+  if(!data.url){
+    primerURL ||= silentWav();player.src=primerURL;
+    player.play().catch(()=>{}); // Silent 100 ms permission primer; never a result.
+  }
+}
+function transport(){
+  const ended=player.ended||(Number.isFinite(player.duration)&&player.duration>0&&player.currentTime>=player.duration-.01);
+  const label=playing()?'Pause':ended?'Replay':'Play';
+  button.textContent=label;button.setAttribute('aria-label',label+' generated speech');
+}
+function updateTime(){
+  if(!data.url)return;
+  clock();transport();element.querySelector('[data-time]').textContent=minutes(player.currentTime||0);
+  if(Number.isFinite(player.duration)&&player.duration>0)seek.value=String(Math.round(player.currentTime/player.duration*1000));
+}
+async function startPlayback(automatic=false){
+  if(!data.url||playPending||disposed)return;
+  const take=revision;playPending=true;
+  try{
+    // Start both during the gesture for manual playback, without yielding first.
+    const ready=prepareAudio();const started=player.play();
+    await Promise.all([ready,started]);
+    if(disposed||take!==revision)return;
+    if(context&&context.state!=='running')throw new Error('Audio context is suspended');
+    notice.hidden=true;player.controls=false;player.hidden=true;transport();scheduleWave();
+  }catch(error){
+    if(disposed||take!==revision||error?.name==='AbortError')return;
+    player.pause();transport();
+    notice.textContent=automatic?'Auto-play was blocked. Tap Play to listen.':'Tap Play to listen, or download the WAV.';
+    notice.hidden=false;
+    // Our Play control remains available; expose native controls for media errors.
+    if(error?.name!=='NotAllowedError'){player.hidden=false;player.controls=true;}
+  }finally{if(take===revision)playPending=false;}
+}
+function tryAutoplay(){
+  if(active||!autoplayCandidate)return;
+  autoplayCandidate=false;
+  if(!requested||!autoplayEnabled())return;
+  requested=false;
+  if(document.visibilityState==='hidden'){
+    notice.textContent='Audio is ready. Tap Play to listen.';notice.hidden=false;return;
+  }
+  startPlayback(true);
+}
+on(button,'click',()=>{
+  requested=false;autoplayCandidate=false;
+  if(playing()){player.pause();return;}
+  if(player.ended||(player.duration>0&&player.currentTime>=player.duration-.01))player.currentTime=0;
+  startPlayback();
+});
+on(document,'click',event=>{
+  if(event.target.closest('#generate-speech'))armPlayback();
+  if(event.target.closest('#cancel-speech')){requested=false;autoplayCandidate=false;}
+},{capture:true});
+on(host,'zonos:pause',()=>{if(data.url)player.pause();});
+on(host,'zonos:activity',event=>setActivity(event.detail===true));
+for(const event of ['play','playing','pause','ended','seeked'])on(player,event,()=>{updateTime();scheduleWave();});
+on(player,'timeupdate',updateTime);
+on(player,'loadedmetadata',()=>{if(data.url){element.querySelector('[data-duration]').textContent=minutes(player.duration);updateTime();}});
+on(player,'error',()=>{if(data.url){notice.hidden=false;notice.textContent='This audio is no longer available. Generate a new take.';scheduleWave();}});
+on(seek,'input',()=>{if(data.url&&Number.isFinite(player.duration)){player.currentTime=Number(seek.value)/1000*player.duration;updateTime();}});
 const statusObserver=new MutationObserver(()=>{
-  if(!element.isConnected){cleanup();return;}
   const status=document.getElementById('status-state');
-  if(status && (status.dataset.busy==='true')!==active)setActivity(status.dataset.busy==='true');
+  if(status?.getAttribute('role')==='alert'){requested=false;autoplayCandidate=false;}
+  if(status&&(status.dataset.busy==='true')!==active)setActivity(status.dataset.busy==='true');
 });
-statusObserver.observe(document.getElementById('request-status')||document.documentElement,
- {childList:true,subtree:true,attributes:true,attributeFilter:['data-busy']});
+statusObserver.observe(document.getElementById('request-status')||document.documentElement,{childList:true,subtree:true,attributes:true,attributeFilter:['data-busy']});
 const removalObserver=new MutationObserver(()=>{if(!element.isConnected)cleanup();});
 removalObserver.observe(document.documentElement,{childList:true,subtree:true});
-function cleanup(){dispose();cancelAnimationFrame(activityFrame);statusObserver.disconnect();removalObserver.disconnect();globalListeners.abort();}
-window.addEventListener('pagehide',cleanup,{once:true,signal:globalListeners.signal});
-reducedMotion.addEventListener('change',scheduleWave,{signal:globalListeners.signal});
-
-const minutes=seconds=>`${Math.floor(seconds/60)}:${String(Math.floor(seconds%60)).padStart(2,'0')}`;
-function mount() {
-  dispose();dispose=()=>{};
-  let data;try{data=JSON.parse(props.value||'{}');}catch{return;}
-  const previousPlayer=element.querySelector('audio');
-  const player=previousPlayer.cloneNode(false);player.removeAttribute('src');previousPlayer.replaceWith(player);
-  const controls=element.querySelector('.playback'), button=element.querySelector('[data-play]');
-  const seek=element.querySelector('[data-seek]'),notice=element.querySelector('.audio-notice');
-  const listeners=new AbortController();
-  const on=(target,name,handler)=>target.addEventListener(name,handler,{signal:listeners.signal});
-  controls.hidden=true;notice.hidden=true;player.hidden=true;
-  button.textContent='Play';button.setAttribute('aria-label','Play generated speech');
-  seek.value='0';element.querySelector('[data-time]').textContent='0:00';
-  if(!data.url){scheduleWave();return;}
-  const url=new URL(data.url,document.baseURI);
-  if(url.origin!==location.origin || !url.pathname.includes('/gradio_api/file='))return;
+function cleanup(){
+  if(disposed)return;disposed=true;player.pause();player.removeAttribute('src');player.load();
+  source?.disconnect();analyser?.disconnect();context?.close().catch(()=>{});
+  if(primerURL)URL.revokeObjectURL(primerURL);
+  cancelAnimationFrame(activityFrame);statusObserver.disconnect();removalObserver.disconnect();globalListeners.abort();
+}
+on(window,'pagehide',event=>{requested=false;autoplayCandidate=false;player.pause();if(!event.persisted)cleanup();});
+on(reducedMotion,'change',scheduleWave);
+function mount(){
+  let next;try{next=JSON.parse(props.value||'{}');}catch{return;}
+  if(!next.url)return;
+  let url;try{url=new URL(next.url,document.baseURI);}catch{return;}
+  if(url.origin!==location.origin||!url.pathname.includes('/gradio_api/file='))return;
+  if(next.url===data.url)return;
+  player.pause();revision++;playPending=false;data=next;
+  player.controls=false;player.hidden=true;notice.hidden=true;controls.hidden=false;
+  player.src=url.href;seek.value='0';element.querySelector('[data-time]').textContent='0:00';
+  element.querySelector('[data-duration]').textContent=minutes(data.duration||0);
+  const link=element.querySelector('[data-download]');link.href=url.href;link.download=data.download_name||'zonos3.wav';
   document.getElementById('script-input')?.dispatchEvent(new CustomEvent('zonos:take',{detail:data}));
   document.getElementById('voice-options')?.dispatchEvent(new CustomEvent('zonos:seed',{detail:data.seed}));
-  player.src=url.href;player.hidden=false;
-  const link=element.querySelector('[data-download]');link.href=url.href;link.download=data.download_name||'zonos3.wav';
-  element.querySelector('[data-duration]').textContent=minutes(data.duration||0);
-  let context=null,analyser=null,source=null;
-  const samples=new Float32Array(2048);
-  playing=()=>!player.paused && !player.ended;
-  energy=()=>{if(!analyser)return 0;analyser.getFloatTimeDomainData(samples);return voiceEnergy(samples);};
-  clock=()=>document.getElementById('script-input')?.dispatchEvent(new CustomEvent('zonos:clock',{
-    detail:{time:player.currentTime||0,playing:playing()}
-  }));
-  function transport() {
-    const ended=player.ended || (Number.isFinite(player.duration) && player.duration>0 && player.currentTime>=player.duration-.01);
-    const label=playing()?'Pause':ended?'Replay':'Play';
-    button.textContent=label;button.setAttribute('aria-label',label+' generated speech');
-  }
-  function updateTime() {
-    clock();transport();
-    element.querySelector('[data-time]').textContent=minutes(player.currentTime||0);
-    if(Number.isFinite(player.duration)&&player.duration>0)seek.value=String(Math.round(player.currentTime/player.duration*1000));
-  }
-  async function play() {
-    try {
-      if(playing()){player.pause();return;}
-      if(player.ended || (player.duration>0 && player.currentTime>=player.duration-.01))player.currentTime=0;
-      const AudioContextClass=window.AudioContext||window.webkitAudioContext;
-      if(!context && AudioContextClass) {
-        context=new AudioContextClass();analyser=context.createAnalyser();analyser.fftSize=2048;
-        source=context.createMediaElementSource(player);source.connect(analyser);analyser.connect(context.destination);
-      }
-      if(context?.state==='suspended')await context.resume();
-      await player.play();transport();scheduleWave();notice.hidden=true;
-    } catch {
-      player.hidden=false;player.controls=true;
-      notice.textContent='Playback needs another click. You can also download the WAV.';notice.hidden=false;
-    }
-  }
-  on(button,'click',play);
-  on(host,'zonos:pause',()=>player.pause());
-  for(const event of ['play','playing','pause','ended','seeked'])on(player,event,()=>{updateTime();scheduleWave();});
-  on(player,'timeupdate',updateTime);
-  on(player,'loadedmetadata',()=>{element.querySelector('[data-duration]').textContent=minutes(player.duration);updateTime();});
-  on(player,'error',()=>{notice.hidden=false;notice.textContent='This audio is no longer available. Generate a new take.';scheduleWave();});
-  on(seek,'input',()=>{if(Number.isFinite(player.duration)){player.currentTime=Number(seek.value)/1000*player.duration;updateTime();}});
-  player.controls=false;player.hidden=true;controls.hidden=false;scheduleWave();
-  dispose=()=>{
-    listeners.abort();player.pause();player.removeAttribute('src');player.load();source?.disconnect();analyser?.disconnect();
-    if(context && context.state!=='closed')context.close().catch(()=>{});
-    playing=()=>false;energy=()=>0;clock=()=>{};
-  };
+  autoplayCandidate=requested;transport();scheduleWave();queueMicrotask(tryAutoplay);
 }
-watch('value',mount);
-mount();
+watch('value',mount);mount();
+host.dataset.ready='true';

assets/script.js

@@ -68,3 +68,5 @@ const resize=new ResizeObserver(layout);resize.observe(viewport);
 const observer=new MutationObserver(()=>{if(!element.isConnected){listeners.abort();resize.disconnect();observer.disconnect();}});
 observer.observe(document.documentElement,{childList:true,subtree:true});
 publish();showMode();
+
+host.dataset.ready='true';

assets/settings.html

@@ -7,6 +7,7 @@
 @children
 <div class="settings-body" data-settings-rest hidden>
   <label class="consent-row" data-consent-row hidden><input type="checkbox" data-setting="consent"><span>I have permission to use this voice.</span></label>
+  <div class="setting-row"><div><label class="setting-label" for="autoplay-result">Auto-play result</label><p class="setting-help">Play when your next take is ready.</p></div><input id="autoplay-result" type="checkbox" role="switch" data-setting="autoplay" checked></div>
   <div class="setting-row seed-row"><div><label class="setting-label" for="take-seed">Seed</label><p class="setting-help">Repeat a take with the same settings.</p></div><div class="seed-controls"><input id="take-seed" type="number" min="0" max="2147483647" step="1" data-setting="seed" aria-label="Seed"><label class="switch-label"><input type="checkbox" role="switch" data-setting="randomize"><span>Random</span></label></div></div>
   <div class="setting-row"><div><label class="setting-label" for="normalize-text">Text normalization</label><p class="setting-help">Expand numbers and abbreviations.</p></div><input id="normalize-text" type="checkbox" role="switch" data-setting="normalize"></div>
   <div class="setting-row rate-row"><div><label class="setting-label" for="speaking-rate">Speaking rate</label><p class="setting-help">UTF-8 bytes / second · 0 uses the natural pace.</p></div><div class="range-control"><input id="speaking-rate" type="range" min="0" max="30" step="0.5" data-setting="rate" aria-label="Speaking rate"><input type="number" min="0" max="30" step="0.5" data-setting="rate" aria-label="Speaking rate value"></div></div>

assets/settings.js

@@ -1,7 +1,8 @@
 const host = document.getElementById('voice-options');
 // Gradio HTML props are the component state. The public /generate API retains
 // its original 13 inputs; generate.js takes an atomic snapshot of this state.
-const defaults = {source:'Preset',consent:false,seed:0,randomize:true,normalize:true,rate:0,temperature:.75,top_p:.69,top_k:80,repetition:2.4};
+let savedAutoplay=true;try{savedAutoplay=localStorage.getItem('zonos.autoplay')!=='false';}catch{}
+const defaults = {autoplay:savedAutoplay,source:'Preset',consent:false,seed:0,randomize:true,normalize:true,rate:0,temperature:.75,top_p:.69,top_k:80,repetition:2.4};
 let state = {...defaults, ...JSON.parse(props.value || '{}')};
 let open = false;
 const exampleEvents={en:'example_en',fr:'example_fr',de:'example_de',es:'example_es',it:'example_it',pt:'example_pt',ja:'example_ja',zh:'example_zh',ko:'example_ko'};
@@ -31,6 +32,7 @@ element.addEventListener('input', event => {
   const node = event.target;
   if (!node.matches('[data-setting]')) return;
   state[node.dataset.setting] = node.type === 'checkbox' ? node.checked : (node.value === '' ? null : Number(node.value));
+  if(node.dataset.setting==='autoplay'){try{localStorage.setItem('zonos.autoplay',String(state.autoplay));}catch{}}
   sync();
 }, {signal:listeners.signal});
 element.addEventListener('click', event => {
@@ -45,5 +47,6 @@ host.addEventListener('zonos:seed', event => { state.seed = event.detail; sync()
 watch('source', () => { state.source = props.source; sync(); sourceChanged(); });
 watch('value', () => { state = {...defaults, ...JSON.parse(props.value || '{}')}; sync(); });
 sync();
+host.dataset.ready='true';
 const observer = new MutationObserver(() => { if (!element.isConnected) { listeners.abort(); observer.disconnect(); } });
 observer.observe(document.documentElement, {childList:true, subtree:true});

assets/wave.js

@@ -15,7 +15,7 @@ class WaveMotion {
     // Time-based attack/release behaves alike at 30, 60 and 120 Hz.
     const tau=target > this.level ? .09 : .24;
     this.level+=(target-this.level)*(1-Math.exp(-dt/tau));
-    this.phase=(this.phase+dt*(1.15+.3*this.level))%(Math.PI*20);
+    this.phase=(this.phase+dt*(3.2+2.6*this.level))%(Math.PI*20);
     if(target===0 && this.level<.001)this.level=0;
     return this;
   }
@@ -26,8 +26,9 @@ function wavePath(level,phase=0) {
   function y(t) {
     const edge=Math.min(1,t/.16,(1-t)/.16);
     const fade=edge*edge*edge*(edge*(edge*6-15)+10);
-    const broad=.72+.28*Math.sin(Math.PI*t)**2;
-    const carrier=(Math.sin(Math.PI*2*6.2*t+phase)+.23*Math.sin(Math.PI*2*3.1*t-phase*.7+.7))/1.23;
+    const broad=.66+.34*(.5+.5*Math.sin(Math.PI*2*.9*t-phase*.4));
+    const bend=.8*Math.sin(Math.PI*2*1.2*t-phase*.3);
+    const carrier=(Math.sin(Math.PI*2*6.2*t+phase+bend)+.23*Math.sin(Math.PI*2*3.1*t-phase*.7+.7))/1.23;
     return 70-56*level*fade*broad*carrier;
   }
   const derivative=t=>t<=0||t>=1?0:(y(t+.0001)-y(t-.0001))/.0002;

boot.py

@@ -0,0 +1,45 @@
+"""A small HTML entry shell using the public ASGI middleware interface."""
+from pathlib import Path
+import re
+
+
+class EntryShell:
+    """Only decorate the document; never buffer API, SSE, media or asset responses."""
+    def __init__(self, app, shell_path):
+        self.app = app
+        self.shell = Path(shell_path).read_bytes()
+
+    async def __call__(self, scope, receive, send):
+        if scope['type'] != 'http' or scope.get('method') != 'GET' or scope.get('path') != '/':
+            await self.app(scope, receive, send)
+            return
+        start = None
+        chunks = []
+        decorate = False
+
+        async def intercept(message):
+            nonlocal start, decorate
+            if message['type'] == 'http.response.start':
+                headers = dict(message.get('headers', []))
+                decorate = (message['status'] == 200 and
+                            headers.get(b'content-type', b'').startswith(b'text/html') and
+                            b'content-encoding' not in headers)
+                if decorate:
+                    start = message
+                else:
+                    await send(message)
+            elif message['type'] == 'http.response.body' and decorate:
+                chunks.append(message.get('body', b''))
+                if not message.get('more_body', False):
+                    body = re.sub(rb'(<body\b[^>]*>)', lambda match: match[0] + self.shell,
+                                  b''.join(chunks), count=1, flags=re.I)
+                    headers = [(k, v) for k, v in start['headers']
+                               if k.lower() not in {b'content-length', b'etag', b'cache-control'}]
+                    headers += [(b'content-length', str(len(body)).encode()),
+                                (b'cache-control', b'no-store')]
+                    await send({**start, 'headers': headers})
+                    await send({'type': 'http.response.body', 'body': body})
+            else:
+                await send(message)
+
+        await self.app(scope, receive, intercept)

config.py

@@ -1,7 +1,7 @@
 """Release contract. Changing a revision requires rerunning the contract tests."""
 from pathlib import Path
 
-VERSION = "0.3.1"
+VERSION = "0.3.2"
 ROOT = Path(__file__).resolve().parent
 MODEL_ID = "Zyphra/ZONOS3-Mini"
 MODEL_REVISION = "eaac314642440e8f1f497f1505ca376f8e618f2a"

tests/test_boot.py

@@ -0,0 +1,32 @@
+import asyncio
+from boot import EntryShell
+from config import ROOT
+
+
+def test_entry_shell_is_sent_before_javascript_and_is_not_cached():
+    async def app(scope, receive, send):
+        await send({'type':'http.response.start','status':200,'headers':[(b'content-type',b'text/html'),(b'content-length',b'31'),(b'etag',b'old')]})
+        await send({'type':'http.response.body','body':b'<html><body\n style="margin:0">','more_body':True})
+        await send({'type':'http.response.body','body':b'<gradio-app></gradio-app></body></html>'})
+    result=[]
+    async def send(message):result.append(message)
+    asyncio.run(EntryShell(app,ROOT/'assets/boot.html')({'type':'http','method':'GET','path':'/'},None,send))
+    headers=dict(result[0]['headers']);body=result[1]['body']
+    assert headers[b'cache-control']==b'no-store' and b'etag' not in headers
+    assert int(headers[b'content-length'])==len(body)
+    assert body.index(b'id="zonos-boot"')<body.index(b'<gradio-app>')
+    assert b'Loading the interface' in body and b'Open in a new tab' in body
+
+
+def test_api_and_audio_streams_pass_through_without_buffering():
+    for path in ['/gradio_api/queue/data','/gradio_api/file=voice.wav','/assets/script.js','/config']:
+        sent=[]
+        async def app(scope,receive,send):
+            for message in [{'type':'http.response.start','status':200,'headers':[]},
+                            {'type':'http.response.body','body':b'first','more_body':True},
+                            {'type':'http.response.body','body':b'last'}]:
+                await send(message)
+                assert sent[-1] is message
+        async def send(message):sent.append(message)
+        asyncio.run(EntryShell(app,ROOT/'assets/boot.html')({'type':'http','method':'GET','path':path},None,send))
+        assert len(sent)==3

tests/test_ui_js.py

@@ -31,6 +31,10 @@ const m30=new WaveMotion(),m120=new WaveMotion();
 for(let i=0;i<30;i++)m30.step(.6,1/30);
 for(let i=0;i<120;i++)m120.step(.6,1/120);
 assert.ok(Math.abs(m30.level-m120.level)<.0001);
+// A quarter second changes the crest positions even at steady amplitude.
+const live=new WaveMotion();live.level=.7;const old=wavePath(live.level,live.phase);
+for(let i=0;i<15;i++)live.step(.7,1/60);
+assert.ok(live.phase>1);assert.notEqual(wavePath(live.level,live.phase),old);
 '''
     subprocess.run(['node','-e',script], check=True)
 
@@ -66,7 +70,7 @@ const svg = {setAttribute:()=>{},querySelector:()=>path};
 global.element = {querySelector:()=>svg,isConnected:true};
 global.document = {getElementById:id=>id==='generate-speech'?generate:hostNode};
 global.window = {matchMedia:()=>({matches:true})};
-global.cancelAnimationFrame=()=>{};global.requestAnimationFrame=()=>1;
+global.cancelAnimationFrame=()=>{};global.requestAnimationFrame=()=>1;global.queueMicrotask=()=>{};global.tryAutoplay=()=>{};
 ''' + source + r'''
 setActivity(true);assert.equal(hostNode.dataset.busy,'true');
 setActivity(false);assert.equal(generate.disabled,false);assert.equal(hostNode.dataset.busy,'false');