v0.3.0: timed two-line reading, smooth waveform and custom voice input

MANIFEST.sha256

@@ -4,23 +4,30 @@ bcf4b74e7954a954781f7d6da93edd7514837498fadde60a56e94bde8d0564d7  CHANGELOG.md
 3381fc95c5558560e1bb62d4cebea34bf6efa4adfbda7f4fe03bbf40bbcc55d3  LICENSE
 70cfad55255dc3eadcbeb607da257aeda748292d01916aa922cc20ccacc9cecb  NOTICE
 902b4c71d4f5e55a8f32f3a879858edd1114ca2d329805085e9eee260005f6d4  PROVENANCE.md
-ea7aefa57dd50780b12b006ac603e80c8896c6162999929d7e0185728330eade  README.md
+68b70449f145477a6d0ce3a6376e8301f5afb9cb6fe6fa1781a0e65392ba7f50  README.md
 ebd5e8888fc2d73953541e2fe4bbb68efb8a9f83bcd2334476d0c9950a2ded12  VALIDATION.md
-57352b32b657f7eb0fd86938e52907c2b989377d4bff23fe18e6ef89ebca1e78  app.py
-ea73e2bdf116a3b0af4f4960a88d63e8b37ebc782adf0350accad16b35ba1ada  assets/generate.js
+c27fa4c518c35c000227a0a939c350999db6c4e45e71082ef32f74efb8ff3f92  alignment.py
+91b49d5699b6430368bb5f666e8988c5c98ca20b07159c367e9dfc0566c982c8  app.py
+00777c382b80d8b19ff23101d76fa27b86c0ed815d5bb0023fe21dda0e92ee99  assets/generate.js
 dd23ac0a74f0682218938cf387a037e89724e8bbfbdeb5ff35ecff289ebc24d4  assets/layout.js
 ecb1d25ae4aa218f69e269519fb68719a2c657ea1c24c0b6780df5f5dcf08259  assets/picker.js
 98d10bfcd45f9d3dfe3cf1e433a4a2829d253496a90daefd30819a0abd5a4347  assets/player.css
 95af93bc6375bcb3eca237c9fe0d7c5346b540f26b38516c18c89ba9ceb3458d  assets/player.html
-13cb52dde03e2e75843e983b3b5ff512f0bd7d1c53ed9138830a81198693a6b4  assets/player.js
-0f066a7be5e17f22d05c7e1748cde9af33907be34a2a79397b4daf17cacc2b29  assets/settings.css
-0ed73fd5ea9a667f298438663abc0490085fd354195652f3a8edd1dca3add30b  assets/settings.html
-ed63f71a9f1e8ee5cd797b01c0329308d907d7476e09a382e649dfed231eedf6  assets/settings.js
-27eabaebbee47fd27c416e6488d52039d09755c03a66f5870269d7157b453204  assets/style.css
-b6c03ffbe644dc8dc11b31a58c5182df55cf11a91a0c39aad635cabe8cc81df3  assets/wave.js
+693246876df0103f7e6a9a952b9fa4ccb08bb8c8a69c2de6b1bb1f52b1a49179  assets/player.js
+57347c4f3eb6f9aec59f1c8882c66e926e04acb87cc0154573594f063cf5df02  assets/reference.css
+03b2f8dbea4891f5ceb8990727473184118536720f439ffc69ef7d83d2f9a396  assets/reference.html
+0c810d357737c04392af97416f6723d40842b2f560a205061e01f0ecfbcae88f  assets/reference.js
+e15076d12c17909a9330347383fd28ddc81272f125f1e6e3ee3de9f56a6d5df0  assets/script.css
+9519e9e91bc74d23ef72c0e4e8b3c02f0d16fee8143910bff75c1731f163ed44  assets/script.html
+f7cfcf63e5622405ce6fe57d106231c1ce00bea379d995d74433ac854b5c099f  assets/script.js
+4c33f5471865f012e4900961414877d3d18cb8bfc783d97f1266ab5e7e579af2  assets/settings.css
+06843a1901695e66d88c604a1c80605a15711cd55c4df582541794dc947b8e69  assets/settings.html
+cecc8107b91ca09af1acf60b41906b5f8705196a61d7cf245264c383ef68af7b  assets/settings.js
+249fd190f8b58cf6e1b8f2582ed4afc40ce8ecf43292cbb409ee82f255604465  assets/style.css
+0b0fec16825b1be308abc7009c3ffd417f78eb664913aa262ba18078595f6604  assets/wave.js
 c476aa0fc7ed79b77cd6577d6e5efaf75dee8cccb6d5dc5f56fe92334b27d04d  audio_files.py
-8ad6ef9ea0d558f23e7688aeb98f27185bae3b1eed6b785c1f1c39fb06552687  config.py
-11e9bd2d5d9d8c7a2928a4ba1f26bfcb44f6f29bbee967460da1ffcdefa3a491  controller.py
+5467af2927d4ea4658c0d25c12571e82262906a61d13b5987c3c21863f62c9c8  config.py
+22cc095df3f023b95e4f7456f1b79144e341a33db6554db88ebe08a98c6b2f78  controller.py
 6aa124baba94d5961a439a9467325e14aec4306f1e1fbdb3fef9a7a0b9bd511b  engine.py
 08396169ac070e226ebfdd11dbb2bf5469d475873e74680f91820f564ba803da  lifecycle.py
 75b9cc83944e78c88496c205ee2b4734e85ed84ee4d1d02643aaf45b532e6695  logging_setup.py
@@ -29,9 +36,10 @@ e24eb5e051506e749615d841771171683160338ed7cd7dfa96f090841995a14b  patches/pin-mo
 c993dd7bd048d7f9178a8409fedb903c828cc2ce7dcadb5987a79ed2f4bf3c98  pytest.ini
 abaf2f4bf8cc50e5cc15c4b21bab4b7b6e77f92a5c265435f37e9b3ef38fb509  requests_schema.py
 ebc319f05921f7d8d196fb93e7e47ffabc2cdda3dbd7e261d76a8fbc5ea099c8  requirements-dev.txt
-21b940e39fda165e607a2c1ef5a0de9521a6bb22a8a1966cb858bcc459d4cd83  requirements.txt
-d28f577db8127b39ce01ba42df1ac351ef77cc1a107ae0926fd6fda44aac039a  scripts/package.py
+26c55e23ff47b7fe307eb8b4258b6da07545992ad5e8ed9d91580171b582df42  requirements.txt
+efe08b65cc84bffc56f7a101e2cab6687355eef1ffaf415673b0f769605c7d41  scripts/package.py
 c3d724d4147939688b1889a2055d4c80cb8878bf63e902742123a7da7acf8f5c  tested-dependencies.json
+e25f3dd0e11ec835e7db001c703825430e5c4745a538efb8d445fe650821cf1b  tests/test_alignment.py
 70802a3c9077443d6e7c8e9d354f799981f96a321cca5b40f5f307fa364b2924  tests/test_audio.py
 89a62cbb880d9495634fce62a659e531dba74a1efa8bb5db4dbfeb1b8d5bf44b  tests/test_contracts.py
 9c2d7b6aad84fa56d891bb7f79bedc8386b5cfca86f80a282c41777d9cd1a61b  tests/test_http.py
@@ -39,7 +47,7 @@ a20f4145d11561ab4caeabd51952c9f9b14088d5d330a4549e79f6a32310221c  tests/test_lif
 0889b93f4d83986372f5dbc72ad902ebb076bfd730c6ad07f3232b01b5ed1ee9  tests/test_logging.py
 31bfd349c66c1c31c06a7fc7d6cd1c94257679029bd512ddb4f133bfc4f6ccc8  tests/test_package.py
 beae97c67f31cc89d948a5293bc820348cae1117e2f626ba97e7706819318ac8  tests/test_requests.py
-1804f2e140cba31bf7c2d8e0b2e75d2cc80bc0ea779e2d9242a35261b4d417e3  tests/test_ui_js.py
+ccbe51bb8d1e0e4f6d225b593a3192efaf299866de1830f3357fd2b4478e0a93  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

@@ -11,10 +11,11 @@ pinned: false
 license: mit
 models:
   - Zyphra/ZONOS3-Mini
+  - Qwen/Qwen3-ForcedAligner-0.6B-hf
 short_description: A voice, a line, and your words.
 ---
 
-# ZONOS3 Mini · 0.2.1
+# ZONOS3 Mini · 0.3.0
 
 A minimal Hugging Face Space for [Zyphra's ZONOS3-Mini](https://huggingface.co/Zyphra/ZONOS3-Mini).
 Centered editable text, a fine audio waveform, and one Generate button. The interface follows the supplied Zyphra presentation references. Model: Zyphra. UI/UX: [Sylvain Filoni / fffiloni](https://huggingface.co/fffiloni).
@@ -27,7 +28,7 @@ Centered editable text, a fine audio waveform, and one Generate button. The inte
 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.
 
-The waveform starts flat. Voice settings use documented Gradio HTML props, watch callbacks, custom example events and a native audio child. The generation event snapshots the custom controls into the unchanged public API inputs. After generation it displays samples from the output; during playback it uses the actual audio signal when Web Audio is available. 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. After generation it displays samples from the output; during playback it uses the actual audio signal when Web Audio is available. 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. Examples only fill inputs. The English interface retains French text without requiring an interface language switch.
 
@@ -56,7 +57,7 @@ The two upstream NeMo `.far` language-rule files are real binary assets in this
 | Product limits | 600 input characters; 1,350 generated frames; reference clip 0.5–60 seconds, upload at most 25 MiB |
 | Sampling defaults | Temperature 0.75, top-p 0.69, top-k 80, repetition penalty 2.4; other defaults remain upstream |
 
-Both presets and reference clips use **embedding conditioning**, also supported by the official Lite app. This is a deliberate choice: it avoids loading the separate dual-codec teacher needed by raw-reference conditioning. It is not a claim that the two conditioning modes produce equal quality. Raw-reference tokens, mood steering, accent adapters, voice blending, alignment and speech editing are not exposed in this first version.
+Both presets and reference clips use **embedding conditioning**, also supported by the official Lite app. This is a deliberate choice: it avoids loading the separate dual-codec teacher needed by raw-reference conditioning. It is not a claim that the two conditioning modes produce equal quality. Raw-reference tokens, mood steering, accent adapters, voice blending, speech editing are not exposed in this first version.
 
 There are **23 exposed presets**. Four published Hindi/Telugu embeddings are not offered because the pinned Python language registry does not support those language codes. `voices.json` records the paths and exclusion reasons. Supported language selections: US/UK English, French, German, Spanish, Italian, Portuguese, Japanese, Mandarin and Korean. A preset's native language does not constrain the selected text language. No fallback to English is inserted by the app.
 
@@ -66,7 +67,7 @@ Audio chunks are decoded internally through the upstream callback path to observ
 
 ## ZeroGPU lifecycle
 
-`controller.py` validates inputs → prepares text on CPU → waits for the shared inference slot → calls the regular `@spaces.GPU` function → exports PCM on CPU → publishes the result.
+`controller.py` validates inputs → prepares text on CPU → waits for the shared inference slot → calls the regular `@spaces.GPU` function → exports PCM on CPU once → prepares alignment on CPU → requests a separate GPU lease for Qwen3 ForcedAligner → validates timestamps → publishes the result.
 
 - The engine is shared, with one active inference at a time. Request state, cancellation markers and output names are separate per session/request. Duplicate submissions in the same session are rejected.
 - The decorated function is synchronous, not a GPU generator. The app launches no inference thread. The pinned SDK owns the worker and lease release on return/error; the app synchronizes CUDA before returning. `empty_cache()` is not used as a substitute for release.
@@ -139,3 +140,11 @@ On cancellation, the audio output is a Gradio skip update, not a new take. Valid
 Model authors: **Gabriel Clark, Sofian Mejjoute, George Close and Beren Millidge**, Zyphra. [Model card](https://huggingface.co/Zyphra/ZONOS3-Mini): weights under Apache 2.0. [Official runtime](https://github.com/Zyphra/ZONOS3-Mini): MIT. UI/UX: **Sylvain Filoni / fffiloni**. Independent adaptation; no partnership implied.
 
 Application code: MIT, see `LICENSE`. Original runtime notices and third-party licenses are retained under `vendor`. See [PROVENANCE.md](PROVENANCE.md) for the exact source, documented modification, dependency choice and integrity manifest.
+
+## Word synchronization · v0.3.0
+
+The generated WAV and original text are passed to `Qwen/Qwen3-ForcedAligner-0.6B-hf`, pinned at `c07281df297b9905d24a508279258cccf987a064` (Apache 2.0). It uses the documented Transformers 5.22.2 processor and token-classification model. The aligner loads on CUDA at startup, then runs in a separate synchronous `spaces.GPU` call after synthesis has returned. One shared semaphore protects both models; session ownership spans both calls. Cancellation is checked before and after the alignment forward pass. Logs identify `alignment_gpu_enter`, `alignment_gpu_exit` and `alignment_gpu_returned`; SDK release logs must also be checked.
+
+No second transcription rewrites the input. The aligner's default segmentation uses whitespace words and individual Chinese/Japanese characters. Predicted timestamps have 80 ms resolution. Invalid or incomplete alignment leaves the new WAV playable with an explicit unavailable status and manual text pagination; no evenly spaced or estimated timings are substituted. A failed/cancelled synthesis still preserves the previous result.
+
+The custom HTML text viewport shows at most two lines and follows the actual audio clock, including seeking and replay. Editing preserves the draft separately from the last take. The custom reference component uses Gradio's documented `upload(file)` API. Recording starts only on a user click; media tracks stop on stop, error, removal or page disposal. Trimming exports one mono PCM16 clip only when Apply is pressed; Reset restores the original uploaded clip. The hidden native audio wire preserves the existing public API's FileData preprocessing. Generated output format and all 13 public inputs / 5 outputs are unchanged; the player JSON adds `text`, `words` and `alignment`.

alignment.py

@@ -0,0 +1,107 @@
+"""Known-transcript alignment, separate from synthesis and its GPU lease."""
+import logging
+import math
+from pathlib import Path
+import unicodedata
+
+import spaces  # Must precede torch.
+import numpy as np
+import torch
+import torchaudio.functional as AF
+from transformers import AutoModelForTokenClassification, AutoProcessor
+
+from config import ALIGNER_ID, ALIGNER_REVISION, SAMPLE_RATE
+from lifecycle import check_cancelled
+
+log = logging.getLogger("zonos.alignment")
+ALIGNER = None
+
+
+def canonical(text):
+    # Keep a source-index map so punctuation and typography survive unchanged.
+    chars, positions = [], []
+    for i, char in enumerate(text):
+        for normalized in unicodedata.normalize("NFKC", char).casefold():
+            if normalized.isalnum():
+                chars.append(normalized)
+                positions.append(i)
+    return "".join(chars), positions
+
+
+def attach_timings(text, words, duration):
+    """Validate measured timestamps and map them back to the exact input text."""
+    stream, positions = canonical(text)
+    if not stream or not words or not math.isfinite(duration) or duration <= 0:
+        raise ValueError("Missing alignment")
+    cursor, previous, segments = 0, 0.0, []
+    for word in words:
+        token, _ = canonical(str(word["text"]))
+        start, end = float(word["start_time"]), float(word["end_time"])
+        if not token or not stream.startswith(token, cursor):
+            raise ValueError("Alignment transcript mismatch")
+        if not all(math.isfinite(v) for v in (start,end)) or start < previous-.001 or end < start or start < -.08 or end > duration+.16:
+            raise ValueError("Invalid alignment timestamps")
+        start, end = max(0,start), min(duration,end)
+        if start > end:
+            raise ValueError("Alignment outside audio")
+        offset = positions[cursor]
+        segments.append({"offset":offset,"start":round(start,3),"end":round(end,3)})
+        cursor += len(token)
+        previous = end
+    if cursor != len(stream) or not any(w["end"] > w["start"] for w in segments):
+        raise ValueError("Incomplete alignment")
+    # Text strings, not offsets, cross the Python/JS boundary (Unicode-safe).
+    result=[]
+    for i, segment in enumerate(segments):
+        left = 0 if i == 0 else segment["offset"]
+        right = segments[i+1]["offset"] if i+1<len(segments) else len(text)
+        result.append({"text":text[left:right],"start":segment["start"],"end":segment["end"]})
+    return result
+
+
+class Aligner:
+    def __init__(self):
+        log.info("alignment_loading revision=%s", ALIGNER_REVISION)
+        self.processor=AutoProcessor.from_pretrained(ALIGNER_ID,revision=ALIGNER_REVISION)
+        self.model=AutoModelForTokenClassification.from_pretrained(
+            ALIGNER_ID, revision=ALIGNER_REVISION, dtype=torch.bfloat16,
+        ).to("cuda:0").eval()
+        log.info("alignment_loaded")
+
+    def prepare(self, pcm, text):
+        audio=AF.resample(torch.from_numpy(np.asarray(pcm,dtype=np.float32).copy()), SAMPLE_RATE,16000).numpy()
+        # Documented default segmentation: whitespace words + individual CJK
+        # characters. Avoid substituting an ASR transcript for the user's text.
+        return self.processor.prepare_forced_aligner_inputs(audio=audio,transcript=text,return_tensors="pt")
+
+    def run(self, prepared, marker, progress):
+        return _align_gpu(prepared,str(marker),progress)
+
+
+@spaces.GPU(duration=20)
+def _align_gpu(prepared, marker, progress):
+    log.info("alignment_gpu_enter request=%s",Path(marker).stem)
+    inputs = outputs = None
+    try:
+        check_cancelled(marker)
+        progress(None,desc="Synchronizing words")
+        cpu_inputs,word_lists=prepared
+        inputs=cpu_inputs.to("cuda:0",torch.bfloat16)
+        with torch.inference_mode():
+            outputs=ALIGNER.model(**inputs)
+        check_cancelled(marker)
+        return ALIGNER.processor.decode_forced_alignment(
+            logits=outputs.logits,input_ids=inputs["input_ids"],word_lists=word_lists,
+            timestamp_token_id=ALIGNER.model.config.timestamp_token_id,
+        )[0]
+    finally:
+        del outputs, inputs
+        torch.cuda.synchronize()
+        log.info("alignment_gpu_exit request=%s",Path(marker).stem)
+
+
+def load_aligner():
+    global ALIGNER
+    if ALIGNER is None:
+        ALIGNER=Aligner()
+    return ALIGNER

app.py

@@ -24,12 +24,15 @@ if UI_ONLY:
             from requests_schema import InputError
             raise InputError("UI preview only: model inference is disabled.")
     engine = PreviewEngine()
+    aligner = None
 else:
     from engine import load_engine
     engine = load_engine()  # Synchronous startup download / load / CUDA placement.
+    from alignment import load_aligner
+    aligner = load_aligner()
 
 RUNTIME = Path(os.environ.get("ZONOS_RUNTIME_DIR", str(Path(tempfile.gettempdir()) / "zonos3-mini")))
-controller = Controller(engine, RUNTIME, [v["name"] for v in CATALOG])
+controller = Controller(engine, RUNTIME, [v["name"] for v in CATALOG], aligner=aligner)
 ASSETS = ROOT / "assets"
 DEFAULT_PICKER = json.dumps({"language":"en_us", "voice":"Savannah", "custom":False})
 
@@ -80,13 +83,13 @@ theme = gr.themes.Base(primary_hue="neutral", secondary_hue="neutral", neutral_h
     link_text_color="#ccc", link_text_color_dark="#ccc",
 )
 
-with gr.Blocks(title="ZONOS3 Mini", delete_cache=(3600, 86400), analytics_enabled=False) as demo:
+with gr.Blocks(title="ZONOS3 Mini", fill_width=True, delete_cache=(3600, 86400), analytics_enabled=False) as demo:
     gr.HTML('<header class="app-header"><span>ZONOS3-Mini</span><span>text-to-speech · <a href="https://huggingface.co/Zyphra/ZONOS3-Mini" target="_blank" rel="noopener">Zyphra</a></span></header>', elem_id="app-header")
     if UI_ONLY:
         gr.HTML('<p id="preview-warning">UI preview · inference disabled</p>')
-    text = gr.Textbox(value=DEFAULT_TEXT, label="Text to speak", show_label=False, lines=2,
-                      max_lines=12, max_length=MAX_CHARS, placeholder="Write something to say…",
-                      container=False, elem_id="script-input")
+    text = gr.HTML(value=DEFAULT_TEXT, html_template=(ASSETS / "script.html").read_text(),
+                   css_template=(ASSETS / "script.css").read_text(),
+                   js_on_load=(ASSETS / "script.js").read_text(), elem_id="script-input")
     player = gr.HTML(value="{}", html_template=(ASSETS / "player.html").read_text(),
                      css_template=(ASSETS / "player.css").read_text(),
                      js_on_load=(ASSETS / "wave.js").read_text() + (ASSETS / "player.js").read_text(), elem_id="speech-player")
@@ -99,8 +102,10 @@ with gr.Blocks(title="ZONOS3 Mini", delete_cache=(3600, 86400), analytics_enable
     with gr.HTML(value="{}", source="Preset", html_template=(ASSETS / "settings.html").read_text(),
                  css_template=(ASSETS / "settings.css").read_text(),
                  js_on_load=(ASSETS / "settings.js").read_text(), elem_id="voice-options") as settings:
-        clip = gr.Audio(label="Reference voice · 0.5–60 seconds", sources=["upload", "microphone"],
-                        type="filepath", format="wav", elem_id="reference-clip")
+        reference = gr.HTML(value="null", html_template=(ASSETS / "reference.html").read_text(),
+                            css_template=(ASSETS / "reference.css").read_text(),
+                            js_on_load=(ASSETS / "reference.js").read_text(), elem_id="reference-clip")
+    clip = gr.Audio(label="Reference voice", type="filepath", format="wav", visible=False)
     # Stable API wire components. The HTML UI passes its state atomically via the
     # documented event JS preprocessor; API callers continue using the same inputs.
     source = gr.Radio(["Preset", "Voice clip"], value="Preset", label="Voice source", visible=False)
@@ -113,7 +118,7 @@ with gr.Blocks(title="ZONOS3 Mini", delete_cache=(3600, 86400), analytics_enable
     top_p = gr.Slider(.1, 1, value=.69, step=.01, label="Top-p", visible=False)
     top_k = gr.Slider(1, 400, value=80, step=1, label="Top-k", visible=False)
     repetition = gr.Slider(1, 4, value=2.4, step=.1, label="Repetition penalty", visible=False)
-    gr.HTML(f'''<footer class="credits"><p>Model · <a href="https://huggingface.co/Zyphra/ZONOS3-Mini" target="_blank" rel="noopener">Zyphra</a></p><p>UI/UX · <a href="https://huggingface.co/fffiloni" target="_blank" rel="noopener">Sylvain Filoni / fffiloni</a></p><details><summary>About · v{VERSION}</summary><p>Model: Gabriel Clark, Sofian Mejjoute, George Close and Beren Millidge — Zyphra. Weights: Apache 2.0. Official runtime: MIT. <a href="https://github.com/Zyphra/ZONOS3-Mini" target="_blank" rel="noopener">Source and notices</a>. Hosted on Hugging Face with Gradio. Independent UI adaptation.</p></details></footer>''', elem_id="app-credits")
+    gr.HTML(f'''<footer class="credits"><p>Model · <a href="https://huggingface.co/Zyphra/ZONOS3-Mini" target="_blank" rel="noopener">Zyphra</a></p><p>UI/UX · <a href="https://huggingface.co/fffiloni" target="_blank" rel="noopener">Sylvain Filoni / fffiloni</a></p><details><summary>About · v{VERSION}</summary><p>Model: Gabriel Clark, Sofian Mejjoute, George Close and Beren Millidge — Zyphra. Weights: Apache 2.0. Official runtime: MIT. <a href="https://github.com/Zyphra/ZONOS3-Mini" target="_blank" rel="noopener">Source and notices</a>. Word synchronization: <a href="https://huggingface.co/Qwen/Qwen3-ForcedAligner-0.6B-hf" target="_blank" rel="noopener">Qwen3 ForcedAligner</a> (Apache 2.0). Japanese and Chinese use character-level timing. Hosted on Hugging Face with Gradio. Independent UI adaptation.</p></details></footer>''', elem_id="app-credits")
 
     def example(language):
         script, voice, _ = load_example(language)
@@ -139,7 +144,6 @@ with gr.Blocks(title="ZONOS3 Mini", delete_cache=(3600, 86400), analytics_enable
     event.failure(fn=None, js=finish_ui, api_visibility="private")
     cancel.click(controller.cancel, outputs=[status, cancel], queue=False, api_name="cancel", show_progress="hidden")
     demo.unload(controller.on_disconnect)
-    demo.load(fn=None, js=(ASSETS / "layout.js").read_text(), api_visibility="private")
 
 demo.queue(max_size=16, default_concurrency_limit=1, api_open=False)
 

assets/generate.js

@@ -1,4 +1,9 @@
 (...args) => {
+  const draft = document.getElementById('script-input');
+  if (draft?.dataset.draft !== undefined) args[0] = draft.dataset.draft;
+  const reference = document.getElementById('reference-clip');
+  if (document.getElementById('voice-options')?.dataset.clip === 'true' && reference?.dataset.busy === 'true') throw new Error('Wait for the voice clip to finish uploading or recording.');
+  if (reference?.dataset.file) args[3] = JSON.parse(reference.dataset.file);
   const settings = document.getElementById('voice-options');
   const s = JSON.parse(settings.dataset.settings);
   // The snapshot happens on the click, without waiting for network change events.

assets/player.js

@@ -68,6 +68,7 @@ function mount() {
     restoreWave = () => path.setAttribute('d', 'M0 70 L1000 70');
     restoreWave(); return;
   }
+  document.getElementById('script-input')?.dispatchEvent(new CustomEvent('zonos:take', {detail:data}));
   document.getElementById('voice-options')?.dispatchEvent(new CustomEvent('zonos:seed', {detail:data.seed}));
   const url = new URL(data.url, document.baseURI);
   // Files are generated by this Space only. Never accept arbitrary remote sources.
@@ -90,12 +91,18 @@ function mount() {
     path.setAttribute('d', wavePath(values, gain));
   }
   restoreWave = () => draw(preview);
+  function sendClock() {
+    document.getElementById('script-input')?.dispatchEvent(new CustomEvent('zonos:clock', {detail:{time:player.currentTime || 0,playing:!player.paused}}));
+  }
+  on(host, 'zonos:pause', () => player.pause());
   function tick() {
     if (player.paused || player.ended) return;
     if (analyser && !reduced.matches) { analyser.getFloatTimeDomainData(samples); draw(samples, true); }
+    sendClock();
     frame = requestAnimationFrame(tick);
   }
   function updateTime() {
+    sendClock();
     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));
   }
@@ -124,6 +131,7 @@ function mount() {
   on(player, "pause", () => { button.textContent = "Play"; button.setAttribute("aria-label", "Play generated speech"); cancelAnimationFrame(frame); draw(preview); });
   on(player, "ended", () => { button.textContent = "Replay"; button.setAttribute("aria-label", "Replay generated speech"); cancelAnimationFrame(frame); draw(preview); updateTime(); });
   on(player, "timeupdate", updateTime);
+  on(player, "seeked", updateTime);
   on(player, "loadedmetadata", () => { element.querySelector("[data-duration]").textContent = minutes(player.duration); });
   on(player, "error", () => { notice.hidden = false; notice.textContent = "This audio is no longer available. Generate a new take."; });
   on(seek, "input", () => { if (Number.isFinite(player.duration)) player.currentTime = Number(seek.value) / 1000 * player.duration; });

assets/reference.css

@@ -0,0 +1,21 @@
+color:#ccc; font:12px/1.5 Arial,sans-serif;
+[hidden] { display:none!important; }
+.reference { padding:14px 0; }
+.drop-area { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:100px; padding:14px; border:1px dashed #393939; border-radius:8px; text-align:center; cursor:pointer; }
+.drop-area[data-over=true] { border-color:#ddd; background:#0d0d0d; }
+[data-file-name] { overflow-wrap:anywhere; }
+.help,.reference-status { color:#999; font:11px/1.6 ui-monospace,monospace; margin:5px 0; }
+.reference-status:empty { display:none; }
+button,summary { min-height:44px; padding:8px 10px; color:#ccc; background:none; border:0; font:12px ui-monospace,monospace; cursor:pointer; }
+button:disabled { opacity:.45; cursor:not-allowed; }
+.reference-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }
+[data-remove] { margin-left:auto; }
+.reference-player { display:flex; align-items:center; gap:12px; font:11px ui-monospace,monospace; }
+.reference-player button { min-width:65px; text-align:left; padding-left:0; }
+input[type=range] { flex:1; width:100%; min-width:30px; height:44px; accent-color:#eee; }
+summary { padding-left:0; color:#aaa; }
+.trim-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
+.trim-controls label { display:flex; align-items:center; gap:8px; }
+input[type=number] { width:72px; min-height:44px; background:#0d0d0d; color:#eee; border:0; border-bottom:1px solid #555; padding:8px; font:16px ui-monospace,monospace; }
+:focus-visible { outline:2px solid #ddd; outline-offset:3px; }
+@media(max-width:400px) { .reference-player { gap:8px; } }

assets/reference.html

@@ -0,0 +1,11 @@
+<div class="reference">
+ <div class="drop-area" tabindex="0" role="button" aria-label="Upload a reference voice clip">
+  <span data-file-name>Drop a voice clip here</span><span class="help">0.5–60 seconds · up to 25 MB</span>
+ </div>
+ <input type="file" accept="audio/*,.wav,.mp3,.flac,.m4a,.ogg,.webm" data-file hidden>
+ <div class="reference-actions"><button type="button" data-upload>Choose audio</button><button type="button" data-record>Record voice</button><button type="button" data-remove hidden>Remove</button></div>
+ <div class="reference-player" hidden><button type="button" data-play aria-label="Play reference voice">Play</button><span data-time>0:00</span><input type="range" data-seek min="0" max="1000" value="0" aria-label="Reference playback position"><span data-duration>0:00</span></div>
+ <details data-trim hidden><summary>Trim clip</summary><div class="trim-controls"><label>Start <input type="number" min="0" step="0.1" data-start value="0" aria-label="Trim start in seconds"></label><label>End <input type="number" min="0" step="0.1" data-end aria-label="Trim end in seconds"></label><button type="button" data-apply>Use selection</button><button type="button" data-reset>Reset trim</button></div><p class="help">Seconds · choose between 0.5 and 60 seconds.</p></details>
+ <p class="reference-status" role="status" aria-live="polite"></p>
+ <audio preload="metadata" hidden></audio>
+</div>

assets/reference.js

@@ -0,0 +1,108 @@
+const host=document.getElementById('reference-clip');
+const q=s=>element.querySelector(s), player=q('audio'), status=q('.reference-status');
+const listeners=new AbortController(), on=(n,e,f)=>n.addEventListener(e,f,{signal:listeners.signal});
+let original=null, current=null, objectURL=null, generation=0, recorder=null, stream=null, timer=0, recordStarted=0, disposed=false;
+const minutes=s=>`${Math.floor(s/60)}:${String(Math.floor(s%60)).padStart(2,'0')}`;
+function busy(value) {
+ host.dataset.busy=String(value); q('[data-upload]').disabled=value; q('[data-apply]').disabled=value;
+ if(document.getElementById('voice-options')?.dataset.clip==='true') {
+  const generate=document.getElementById('generate-speech');
+  if(generate)generate.disabled=value || document.getElementById('status-state')?.dataset.busy==='true';
+ }
+}
+function tell(text) { status.textContent=text; }
+function setFileData(data) { host.dataset.file=JSON.stringify(data); props.value=JSON.stringify(data); }
+function stopTracks() { stream?.getTracks().forEach(t=>t.stop());stream=null;clearInterval(timer); }
+function wav(buffer,start,end) {
+ const rate=buffer.sampleRate, first=Math.floor(start*rate), frames=Math.floor(end*rate)-first;
+ const bytes=new ArrayBuffer(44+frames*2), v=new DataView(bytes);
+ const str=(o,s)=>[...s].forEach((c,i)=>v.setUint8(o+i,c.charCodeAt(0)));
+ str(0,'RIFF');v.setUint32(4,36+frames*2,true);str(8,'WAVE');str(12,'fmt ');v.setUint32(16,16,true);v.setUint16(20,1,true);v.setUint16(22,1,true);v.setUint32(24,rate,true);v.setUint32(28,rate*2,true);v.setUint16(32,2,true);v.setUint16(34,16,true);str(36,'data');v.setUint32(40,frames*2,true);
+ const channels=Array.from({length:buffer.numberOfChannels},(_,i)=>buffer.getChannelData(i));
+ for(let i=0;i<frames;i++) { let sample=0;for(const c of channels) sample+=c[first+i]/channels.length;sample=Math.max(-1,Math.min(1,sample));v.setInt16(44+i*2,sample<0?sample*32768:sample*32767,true); }
+ return new File([bytes],'reference.wav',{type:'audio/wav'});
+}
+async function decode(file) {
+ const AudioContextClass=window.AudioContext||window.webkitAudioContext;
+ const context=new AudioContextClass();
+ try {return await context.decodeAudioData(await file.arrayBuffer());}
+ finally {await context.close();}
+}
+function preview(item) {
+ player.pause();if(objectURL) URL.revokeObjectURL(objectURL);
+ objectURL=URL.createObjectURL(item.file);player.src=objectURL;current=item;
+ q('.reference-player').hidden=false;q('[data-trim]').hidden=false;q('[data-remove]').hidden=false;
+ q('[data-file-name]').textContent=item.name;q('[data-duration]').textContent=minutes(item.buffer.duration);
+ q('[data-start]').value='0';q('[data-end]').value=original.buffer.duration.toFixed(2);
+ q('[data-start]').max=q('[data-end]').max=original.buffer.duration;
+ q('[data-play]').textContent='Play';q('[data-time]').textContent='0:00';q('[data-seek]').value='0';
+}
+async function accept(file,fromTrim=false) {
+ if(!file) return;
+ const version=++generation;busy(true);tell('Preparing voice clip…');
+ try {
+  if(file.size>25*1024*1024) throw Error('Choose an audio file smaller than 25 MB.');
+  const buffer=await decode(file);
+  if(disposed || version!==generation) return;
+  if(buffer.duration<.5) throw Error('The clip must be at least 0.5 seconds long.');
+  if(buffer.duration>60) throw Error('Choose a clip no longer than 60 seconds.');
+  tell('Uploading voice clip…');
+  const uploaded=await upload(file);
+  if(disposed || version!==generation) return;
+  const item={file,buffer,name:file.name};if(!fromTrim) original=item;
+  setFileData({...uploaded,orig_name:file.name,mime_type:file.type||'audio/wav',meta:{_type:'gradio.FileData'}});
+  preview(item);tell('Voice clip ready.');
+ } catch(error) { if(version===generation) tell((error.message||'Could not load this audio.')+(current?' Your previous clip is still selected.':'')); }
+ finally {if(version===generation) busy(false);}
+}
+function remove() {
+ generation++;busy(false);stopTracks();if(recorder?.state==='recording') recorder.stop();recorder=null;
+ player.pause();player.removeAttribute('src');player.load();if(objectURL)URL.revokeObjectURL(objectURL);objectURL=null;original=current=null;setFileData(null);
+ q('[data-file]').value='';q('[data-file-name]').textContent='Drop a voice clip here';
+ for(const selector of ['.reference-player','[data-trim]','[data-remove]'])q(selector).hidden=true;
+ q('[data-record]').textContent='Record voice';tell('');
+}
+on(q('[data-upload]'),'click',()=>q('[data-file]').click());
+on(q('.drop-area'),'click',()=>q('[data-file]').click());
+on(q('.drop-area'),'keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();q('[data-file]').click();}});
+on(q('[data-file]'),'change',e=>accept(e.target.files[0]));
+on(q('.drop-area'),'dragover',e=>{e.preventDefault();q('.drop-area').dataset.over='true';});
+on(q('.drop-area'),'dragleave',()=>q('.drop-area').dataset.over='false');
+on(q('.drop-area'),'drop',e=>{e.preventDefault();q('.drop-area').dataset.over='false';accept(e.dataTransfer.files[0]);});
+on(q('[data-remove]'),'click',remove);
+on(q('[data-play]'),'click',async()=>{try{if(player.paused)await player.play();else player.pause();}catch{tell('Playback unavailable. Choose a different audio file.');}});
+on(player,'play',()=>q('[data-play]').textContent='Pause');on(player,'pause',()=>q('[data-play]').textContent=player.ended?'Replay':'Play');
+on(player,'timeupdate',()=>{q('[data-time]').textContent=minutes(player.currentTime);if(player.duration)q('[data-seek]').value=player.currentTime/player.duration*1000;});
+on(q('[data-seek]'),'input',()=>{if(Number.isFinite(player.duration))player.currentTime=+q('[data-seek]').value/1000*player.duration;});
+on(q('[data-apply]'),'click',()=>{
+ if(!original)return;const start=+q('[data-start]').value,end=+q('[data-end]').value;
+ if(!Number.isFinite(start+end)||start<0||end>original.buffer.duration||end-start<.5||end-start>60){tell('Select 0.5–60 seconds within the clip.');return;}
+ accept(wav(original.buffer,start,end),true);
+});
+on(q('[data-reset]'),'click',()=>{if(original)accept(original.file);});
+on(q('[data-record]'),'click',async()=>{
+ if(recorder?.state==='recording'){recorder.stop();stopTracks();return;}
+ if(host.dataset.busy==='true')return;
+ const version=++generation;busy(true);tell('Waiting for microphone permission…');
+ try {
+  if(!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder)throw Error('Recording is unavailable in this browser. Choose an audio file.');
+  const acquired=await navigator.mediaDevices.getUserMedia({audio:true});
+  if(disposed||version!==generation){acquired.getTracks().forEach(t=>t.stop());return;}
+  stream=acquired;const type=['audio/webm;codecs=opus','audio/mp4','audio/webm'].find(t=>MediaRecorder.isTypeSupported(t));
+  recorder=new MediaRecorder(stream,type?{mimeType:type}:undefined);const chunks=[];
+  recorder.ondataavailable=e=>{if(e.data.size)chunks.push(e.data);};
+  recorder.onerror=()=>{generation++;stopTracks();if(recorder?.state==='recording')recorder.stop();q('[data-record]').textContent='Record voice';busy(false);tell('Recording failed. Try uploading a clip.');};
+  recorder.onstop=()=>{
+   stopTracks();q('[data-record]').textContent='Record voice';busy(false);
+   if(disposed||version!==generation)return;
+   const mime=recorder.mimeType,extension=mime.includes('mp4')?'m4a':'webm';
+   accept(new File(chunks,`recording.${extension}`,{type:mime}));
+  };
+  recorder.start();recordStarted=performance.now();q('[data-record]').textContent='Stop recording';
+  timer=setInterval(()=>{const seconds=(performance.now()-recordStarted)/1000;tell('Recording · '+minutes(seconds));if(seconds>=59){recorder.stop();stopTracks();}},200);
+ } catch(error){stopTracks();busy(false);tell(error.message||'Microphone unavailable. Choose an audio file.');}
+});
+on(host,'zonos:source',e=>{if(e.detail==='Preset' && recorder?.state==='recording'){generation++;recorder.stop();stopTracks();q('[data-record]').textContent='Record voice';busy(false);tell('Recording cancelled.');}else busy(host.dataset.busy==='true');});
+function dispose(){disposed=true;generation++;stopTracks();if(recorder?.state==='recording')recorder.stop();player.pause();if(objectURL)URL.revokeObjectURL(objectURL);listeners.abort();observer.disconnect();}
+const observer=new MutationObserver(()=>{if(!element.isConnected)dispose();});observer.observe(document.documentElement,{childList:true,subtree:true});
+on(window,'pagehide',dispose);setFileData(null);busy(false);

assets/script.css

@@ -0,0 +1,16 @@
+color:#eee; width:100%;
+[hidden] { display:none!important; }
+.script-stage { width:100%; }
+textarea, .reading-window { box-sizing:border-box; width:100%; height:2.8em; padding:0; margin:0; color:#f2f2ef; background:transparent; border:0; text-align:center; font:400 clamp(24px,3vw,35px)/1.4 Arial,Helvetica,sans-serif; letter-spacing:-.6px; }
+textarea { display:block; resize:none; overflow-y:auto; border-radius:0; scrollbar-width:thin; scrollbar-color:#444 transparent; }
+.reading-window { overflow:hidden; position:relative; }
+.reading-track { white-space:pre-wrap; overflow-wrap:anywhere; transition:transform .22s ease; }
+.word { color:#747474; transition:color .12s linear; }
+.word.spoken { color:#f2f2ef; }
+.script-tools { display:flex; min-height:44px; align-items:center; justify-content:center; gap:16px; margin-top:8px; color:#888; font:10px ui-monospace,monospace; }
+.script-tools button { color:#aaa; font:11px ui-monospace,monospace; border:0; background:none; min-height:44px; padding:6px 10px; cursor:pointer; }
+[data-pages] { display:inline-flex; }
+:focus-visible { outline:1px solid #aaa; outline-offset:4px; }
+.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
+@media(max-width:600px) { textarea,.reading-window { font-size:24px; } }
+@media(prefers-reduced-motion:reduce) { .reading-track,.word { transition:none; } }

assets/script.html

@@ -0,0 +1,6 @@
+<div class="script-stage">
+ <label class="sr" for="speech-draft">Text to speak · 600 characters maximum</label>
+ <textarea id="speech-draft" rows="2" maxlength="600" spellcheck="true" placeholder="Write something to say…" aria-describedby="script-hint"></textarea>
+ <div class="reading-window" hidden aria-label="Generated speech text"><div class="reading-track"></div></div>
+ <div class="script-tools"><span id="script-hint">Write your text</span><span data-pages hidden><button type="button" data-previous aria-label="Previous two lines">←</button><button type="button" data-next aria-label="Next two lines">→</button></span><button type="button" data-edit hidden>Edit text</button></div>
+</div>

assets/script.js

@@ -0,0 +1,70 @@
+const host=document.getElementById('script-input');
+const draft=element.querySelector('textarea'), viewport=element.querySelector('.reading-window');
+const track=element.querySelector('.reading-track'), edit=element.querySelector('[data-edit]');
+const hint=element.querySelector('#script-hint'), pages=element.querySelector('[data-pages]');
+let take=null, reading=false, clock=0, page=0, pageCount=1, spans=[], lineHeight=35;
+const listeners=new AbortController();
+const on=(node,event,fn)=>node.addEventListener(event,fn,{signal:listeners.signal});
+draft.value=props.value || '';
+function publish() { props.value=draft.value; host.dataset.draft=draft.value; }
+function showMode() {
+ draft.hidden=reading; viewport.hidden=!reading;
+ edit.hidden=!take; edit.textContent=reading?'Edit text':'View take';
+ pages.hidden=!reading || take?.alignment==='ready' || pageCount<2;
+ hint.textContent=reading?(take.alignment==='ready'?'': 'Word timing unavailable'):'Write your text · '+draft.value.length+'/600';
+ if(reading && take.text!==draft.value) hint.textContent='Previous take';
+}
+function layout() {
+ if(!reading || !spans.length) return;
+ track.style.transform='none';
+ lineHeight=parseFloat(getComputedStyle(viewport).lineHeight);
+ spans.forEach(s=>s.line=Math.max(0,Math.round(s.node.offsetTop/lineHeight)));
+ pageCount=Math.max(1,Math.ceil((Math.max(...spans.map(s=>s.line))+1)/2));
+ renderClock(); showMode();
+}
+function renderClock() {
+ if(!reading || !take) return;
+ if(take.alignment==='ready') {
+  let index=-1;
+  for(let i=0;i<spans.length;i++) {
+   const spoken=clock>=spans[i].start;
+   spans[i].node.classList.toggle('spoken',spoken);
+   if(spoken) index=i;
+  }
+  page=index<0?0:Math.floor(spans[index].line/2);
+ } else spans.forEach(s=>s.node.classList.add('spoken'));
+ page=Math.max(0,Math.min(pageCount-1,page));
+ track.style.transform=`translateY(${-page*2*lineHeight}px)`;
+ element.querySelector('[data-previous]').disabled=page===0;
+ element.querySelector('[data-next]').disabled=page===pageCount-1;
+}
+function receive(data) {
+ if(!data?.text) return;
+ take=data; clock=0; page=0; track.replaceChildren();
+ const words=data.alignment==='ready' && data.words?.length?data.words:
+  (data.text.match(/\S+\s*|\s+/gu)||[data.text]).map(text=>({text,start:0,end:0}));
+ spans=words.map(word=>{
+  const node=document.createElement('span'); node.className='word'; node.textContent=word.text;
+  track.append(node); return {...word,node,line:0};
+ });
+ reading=true; showMode(); requestAnimationFrame(layout);
+}
+on(draft,'input',()=>{publish();showMode();});
+on(edit,'click',()=>{
+ reading=!reading;
+ if(!reading) document.getElementById('speech-player')?.dispatchEvent(new CustomEvent('zonos:pause'));
+ showMode(); if(reading) layout(); else draft.focus();
+});
+on(element.querySelector('[data-previous]'),'click',()=>{page--;renderClock();});
+on(element.querySelector('[data-next]'),'click',()=>{page++;renderClock();});
+on(host,'zonos:take',e=>receive(e.detail));
+on(host,'zonos:clock',e=>{
+ clock=e.detail.time;
+ if(e.detail.playing && !reading){reading=true;showMode();layout();}
+ renderClock();
+});
+watch('value',()=>{if(props.value!==draft.value){draft.value=props.value||'';reading=false;showMode();}host.dataset.draft=draft.value;});
+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();

assets/settings.css

@@ -39,3 +39,20 @@ input[type=range] { width:100%; min-width:50px; height:44px; accent-color:#e7e7e
 :focus-visible { outline:2px solid #eee; outline-offset:4px; }
 @media(max-width:600px) { .setting-row { gap:12px; } .seed-controls { gap:10px; } .rate-row { align-items:flex-start; flex-direction:column; gap:4px; } .range-control { width:100%; } .sampling-grid { grid-template-columns:1fr; gap:8px; } .examples { flex-wrap:wrap; gap:6px; } .retention { font-size:10px; } }
 @media(prefers-reduced-motion:reduce) { svg, input::after { transition:none; } }
+/* Controls follow the label row, independently of wrapping help text. */
+.setting-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:18px; }
+.setting-row > :first-child { padding-top:10px; }
+.setting-row > input[role=switch] { margin-top:12px; }
+.seed-controls { justify-content:flex-end; min-height:44px; }
+.source-switch button { min-height:40px; }
+.examples { align-items:flex-start; }
+@media(max-width:600px) {
+ .setting-row { column-gap:12px; }
+ .seed-row, .rate-row { grid-template-columns:1fr; gap:8px; }
+ .seed-controls { justify-content:space-between; }
+ #take-seed { flex:1; width:auto; max-width:180px; text-align:left; }
+ input[type=number] { font-size:16px; min-height:44px; }
+ .source-switch button { font-size:14px; padding:6px 12px; }
+ .examples { display:grid; grid-template-columns:1fr; gap:4px; }
+ .examples > div:last-child { gap:24px; }
+}

assets/settings.html

@@ -7,7 +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="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 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>
   <details class="sampling"><summary>Sampling <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg></summary><div class="sampling-grid">

assets/settings.js

@@ -23,6 +23,7 @@ function sync() {
   publish();
 }
 function sourceChanged() {
+  document.getElementById('reference-clip')?.dispatchEvent(new CustomEvent('zonos:source', {detail:state.source}));
   document.getElementById('voice-picker')?.dispatchEvent(new CustomEvent('zonos:source', {detail:state.source}));
 }
 element.addEventListener('input', event => {

assets/style.css

@@ -1,15 +1,13 @@
 :root { color-scheme:dark; }
 body { background:#000; }
-.gradio-container { background:#000!important; color:#f1f1f1; max-width:1200px!important; margin:auto; padding:30px 34px 20px!important; font-family:Arial,Helvetica,sans-serif!important; }
+.gradio-container { background:#000!important; color:#f1f1f1; max-width:1200px!important; margin:auto; padding:0!important; --app-gutter:clamp(18px,3vw,34px); --size-8:var(--app-gutter); font-family:Arial,Helvetica,sans-serif!important; }
 #app-header, #speech-player, #voice-picker, #request-status, #app-credits, #voice-options { --block-padding:0px; }
 #app-header { margin:0 0 65px; padding:0; border:0; background:transparent; }
 .app-header { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#a6a6a6; font:12px/1.5 ui-monospace,monospace; }
 .app-header a, .credits a { color:inherit; text-decoration:none; }
 .app-header a:hover, .credits a:hover { text-decoration:underline; text-underline-offset:4px; }
 #script-input { max-width:760px; margin:0 auto; border:0!important; box-shadow:none!important; background:transparent!important; }
-#script-input textarea { color:#f2f2ef!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; text-align:center; font:400 clamp(25px,3vw,35px)/1.4 Arial,Helvetica,sans-serif!important; letter-spacing:-.6px; resize:vertical; padding:18px 8px!important; min-height:130px; }
-#script-input textarea:focus-visible { outline:1px solid #777!important; outline-offset:5px; }
-#speech-player { margin:13px -34px 0; width:calc(100% + 68px); max-width:none; padding:0; background:transparent; border:0; }
+#speech-player { margin:13px calc(-1 * var(--app-gutter)) 0; width:calc(100% + 2 * var(--app-gutter)); max-width:none; padding:0; background:transparent; border:0; }
 #voice-picker { margin:8px 0 18px; background:transparent; border:0; padding:0; }
 #action-row { justify-content:center; align-items:center; gap:12px; margin:0 auto; max-width:370px; }
 #generate-speech { flex:0 1 196px; min-width:196px; max-width:220px; min-height:46px; border:1px solid #f3f3f0; border-radius:8px; background:#f3f3f0; color:#111; box-shadow:none; font:500 15px Arial,sans-serif; }
@@ -30,11 +28,9 @@ body { background:#000; }
 #preview-warning { text-align:center; color:#e5c078; font:12px/1.5 ui-monospace,monospace; }
 button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid #eee!important; outline-offset:4px; }
 @media(max-width:600px) {
- .gradio-container { padding:24px 18px 18px!important; }
  #app-header { margin-bottom:45px; }
  .app-header { font-size:11px; gap:12px; }
- #script-input textarea { font-size:25px!important; padding:12px 0!important; min-height:150px; }
- #speech-player { margin:6px -18px 0; width:calc(100% + 36px); }
+ #speech-player { margin-top:6px; }
  #voice-picker { margin-bottom:20px; }
  #action-row { width:100%; gap:10px; }
  #voice-options { margin-top:8px; }
@@ -43,3 +39,5 @@ button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visib
  .credits p, .credits details { width:100%; }
 }
 @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }
+#script-input { --block-padding:0px; width:100%; margin-bottom:12px; }
+#reference-clip { background:transparent; border:0; --block-padding:0px; }

assets/wave.js

@@ -1,22 +1,38 @@
-// Display gain only: the playback signal and downloaded PCM are never changed.
-function wavePath(values, gain = 1) {
-  const count = Math.min(240, values.length);
-  if (count < 2) return 'M0 70 L1000 70';
-  let d = 'M0 70 L140 70';
-  for (let i = 0; i < count; i++) {
-    const t = i / (count - 1);
-    // Quintic fades join the baseline with zero first and second derivatives.
-    const edge = Math.min(1, t / .22, (1 - t) / .22);
-    const envelope = edge * edge * edge * (edge * (edge * 6 - 15) + 10);
-    const sample = Number(values[Math.min(values.length - 1, Math.floor(t * (values.length - 1)))]) || 0;
-    const amplitude = Math.tanh(sample * gain * 1.2) * 58 * envelope;
-    d += ` L${(140 + 720 * t).toFixed(2)} ${(70 - amplitude).toFixed(2)}`;
-  }
-  return d + ' L860 70 L1000 70';
-}
+// Smooth display geometry only. Playback and exported PCM remain untouched.
 function visualGain(values) {
   let sum = 0;
   for (const value of values) sum += value * value;
   const rms = Math.sqrt(sum / Math.max(1, values.length));
   return rms < .0005 ? 1 : Math.min(10, Math.max(1, .32 / rms));
 }
+function wavePath(values, gain = 1) {
+  if (values.length < 2) return 'M0 70 L1000 70';
+  // Low-pass the display signal before interpolation: no sharp PCM corners.
+  const count = 72, filtered = [];
+  const radius = Math.max(2, values.length / count * .7);
+  for (let i=0; i<count; i++) {
+    const center = i / (count-1) * (values.length-1);
+    let sum=0, weight=0;
+    for (let j=Math.max(0,Math.floor(center-radius*2)); j<=Math.min(values.length-1,Math.ceil(center+radius*2)); j++) {
+      const w=Math.exp(-.5*((j-center)/radius)**2);
+      sum+=(Number(values[j])||0)*w; weight+=w;
+    }
+    filtered.push(sum/weight);
+  }
+  const compensation = Math.max(1, Math.min(4, visualGain(filtered) / Math.max(1, gain)));
+  const points = filtered.map((sample,i) => {
+    const t=i/(count-1), e=Math.min(1,t/.13,(1-t)/.13);
+    const fade=e*e*e*(e*(e*6-15)+10);
+    return [24+952*t,70-58*Math.tanh(sample*gain*compensation*1.7)*fade];
+  });
+  // Monotone Hermite tangents prevent cubic overshoot at peaks.
+  const slopes=points.slice(1).map((p,i)=>(p[1]-points[i][1])/(p[0]-points[i][0]));
+  const tangent=points.map((_,i)=>i===0||i===count-1?0:
+    slopes[i-1]*slopes[i]<=0?0:2*slopes[i-1]*slopes[i]/(slopes[i-1]+slopes[i]));
+  let d='M0 70 L24 70';
+  for(let i=1;i<count;i++) {
+    const a=points[i-1],b=points[i],h=(b[0]-a[0])/3;
+    d+=` C${(a[0]+h).toFixed(2)} ${(a[1]+tangent[i-1]*h).toFixed(2)} ${(b[0]-h).toFixed(2)} ${(b[1]-tangent[i]*h).toFixed(2)} ${b[0].toFixed(2)} ${b[1].toFixed(2)}`;
+  }
+  return d+' L1000 70';
+}

config.py

@@ -1,7 +1,7 @@
 """Release contract. Changing a revision requires rerunning the contract tests."""
 from pathlib import Path
 
-VERSION = "0.2.1"
+VERSION = "0.3.0"
 ROOT = Path(__file__).resolve().parent
 MODEL_ID = "Zyphra/ZONOS3-Mini"
 MODEL_REVISION = "eaac314642440e8f1f497f1505ca376f8e618f2a"
@@ -22,3 +22,6 @@ LANGUAGES = {
     "ja": "Japanese", "cmn": "Mandarin", "ko": "Korean",
 }
 DEFAULT_TEXT = "Some stories begin with a voice.\nThis one begins with yours."
+
+ALIGNER_ID = "Qwen/Qwen3-ForcedAligner-0.6B-hf"
+ALIGNER_REVISION = "c07281df297b9905d24a508279258cccf987a064"

controller.py

@@ -21,8 +21,9 @@ def message(text, error=False, busy=False):
 
 
 class Controller:
-    def __init__(self, engine, runtime_dir, voice_names):
+    def __init__(self, engine, runtime_dir, voice_names, aligner=None):
         self.engine = engine
+        self.aligner = aligner
         self.root = Path(runtime_dir)
         self.outputs = self.root / "outputs"
         self.outputs.mkdir(parents=True, exist_ok=True)
@@ -96,11 +97,34 @@ class Controller:
             exported, result = export_take(outcome.pcm, self.outputs, seed=request.seed,
                                  request_seconds=time.monotonic()-job.started,
                                  inference_seconds=outcome.seconds)
+            result.update(text=request.text, words=[], alignment="unavailable")
+            if self.aligner is not None:
+                yield (gr.skip(), message("Synchronizing words…", busy=True), gr.update(interactive=False, value="Synchronizing…"),
+                       gr.update(visible=True, interactive=True), gr.skip())
+                try:
+                    from alignment import attach_timings
+                    progress(None, desc="Preparing word synchronization")
+                    alignment_inputs = self.aligner.prepare(outcome.pcm, request.text)
+                    check_cancelled(job.marker)
+                    with self.inference_slot(job):
+                        progress(None, desc="Requesting GPU for word synchronization")
+                        words = self.aligner.run(alignment_inputs, job.marker, progress)
+                        log.info("alignment_gpu_returned request=%s", job.id)
+                    check_cancelled(job.marker)
+                    result["words"] = attach_timings(request.text, words, result["duration"])
+                    result["alignment"] = "ready"
+                except Cancelled:
+                    raise
+                except Exception as exc:
+                    check_cancelled(job.marker)
+                    log.warning("alignment_unavailable request=%s error_type=%s", job.id, type(exc).__name__)
+                finally:
+                    alignment_inputs = None
             del outcome
             check_cancelled(job.marker)
             prune_outputs(self.outputs)
             result["request_seconds"] = round(time.monotonic()-job.started, 2)
-            final = (json.dumps(result), message("Ready to play."),
+            final = (json.dumps(result), message("Ready to play." if result["alignment"] == "ready" or self.aligner is None else "Audio ready. Word synchronization unavailable for this take."),
                      gr.update(interactive=True, value="Generate speech"),
                      gr.update(visible=False, interactive=True), request.seed)
             keep_export = True

requirements.txt

@@ -20,3 +20,7 @@ sacremoses==0.1.1
 pyyaml==6.0.3
 safetensors==0.8.0
 omegaconf==2.3.0
+
+# Audio feature extraction used by the pinned Qwen forced aligner.
+librosa==1.0.0
+scipy==1.17.0

scripts/package.py

@@ -18,7 +18,7 @@ FORBIDDEN = {".pyc", ".wav", ".mp3", ".pt", ".pth", ".safetensors", ".gguf", ".b
 def eligible(path):
     rel = path.relative_to(ROOT)
     return (path.is_file() and not path.is_symlink() and not EXCLUDED.intersection(rel.parts)
-            and rel.parts[0] not in ROOT_EXCLUDED
+            and rel.parts[0] not in ROOT_EXCLUDED and not rel.parts[0].startswith("pytest-of-")
             and path.suffix not in FORBIDDEN and not path.name.startswith(".env")
             and path.name != "MANIFEST.sha256")
 

tests/test_alignment.py

@@ -0,0 +1,61 @@
+import json
+import math
+import pytest
+import gradio as gr
+
+from alignment import attach_timings
+from controller import Controller
+from lifecycle import check_cancelled
+from test_lifecycle import FakeEngine, invoke
+
+
+def test_preserves_exact_unicode_and_punctuation():
+    text="  L’été, c’est déjà 2026 ! 你好。"
+    tokens=["L'été", "c'est", "déjà", "2026", "你", "好"]
+    words=[dict(text=t,start_time=i*.2,end_time=(i+1)*.2) for i,t in enumerate(tokens)]
+    result=attach_timings(text,words,1.2)
+    assert ''.join(w['text'] for w in result)==text
+    assert result[-1]['end']==1.2
+
+
+@pytest.mark.parametrize('words',[
+    [dict(text='Other',start_time=0,end_time=.1)],
+    [dict(text='Hello',start_time=math.nan,end_time=.1)],
+    [dict(text='Hello',start_time=0,end_time=2)],
+    [dict(text='Hello',start_time=.1,end_time=0)],
+    [dict(text='Hello',start_time=0,end_time=0)],
+])
+def test_rejects_unreliable_timing(words):
+    with pytest.raises(ValueError):attach_timings('Hello',words,.5)
+
+
+class FakeAligner:
+    def __init__(self,fail=False):self.fail=fail;self.calls=0
+    def prepare(self,pcm,text):return text
+    def run(self,text,marker,progress):
+        self.calls+=1
+        check_cancelled(marker)
+        if self.fail:raise RuntimeError('alignment failure')
+        return [dict(text='Hello',start_time=0,end_time=.08)]
+
+
+def test_second_stage_failure_retains_new_audio(tmp_path):
+    c=Controller(FakeEngine(),tmp_path,['Savannah'],FakeAligner(fail=True))
+    result=list(invoke(c,text='Hello'))[-1]
+    payload=json.loads(result[0])
+    assert payload['alignment']=='unavailable' and payload['words']==[]
+    assert 'unavailable' in result[1] and len(list(c.outputs.glob('*.wav')))==1
+    assert c.jobs.active()==0
+
+
+def test_cancel_between_calls_cleans_export_and_retries(tmp_path):
+    a=FakeAligner();c=Controller(FakeEngine(),tmp_path,['Savannah'],a)
+    iterator=invoke(c,text='Hello')
+    next(iterator);next(iterator);state=next(iterator)
+    assert 'Synchronizing' in state[1]
+    c.cancel(gr.Request(session_hash='session-a'))
+    result=list(iterator)[-1]
+    assert 'Cancelled' in result[1] and result[0]==gr.skip() and a.calls==0
+    assert not list(c.outputs.glob('*.wav')) and c.jobs.active()==0
+    result=list(invoke(c,text='Hello'))[-1]
+    assert json.loads(result[0])['alignment']=='ready' and a.calls==1

tests/test_ui_js.py

@@ -13,14 +13,16 @@ const quiet = Array.from({length:240}, (_,i)=>.035*Math.sin(i*.2));
 assert.ok(visualGain(quiet) > 8);
 const input = Array(240).fill(1);
 const d = wavePath(input, 3);
-const points = [...d.matchAll(/[ML]([\d.]+) ([\d.]+)/g)].map(x=>[+x[1],+x[2]]);
-assert.deepEqual(points[0],[0,70]);
-assert.deepEqual(points.at(-1),[1000,70]);
-assert.equal(points[2][1],70);
-assert.equal(points.at(-3)[1],70);
-assert.ok(Math.abs(points[3][1]-70)<.01);
-assert.ok(Math.min(...points.map(x=>x[1]))<15);
-assert.ok(Math.min(...points.map(x=>x[1]))>=12);
+assert.ok(d.startsWith('M0 70 L24 70 C'));
+assert.ok(d.endsWith('976.00 70.00 L1000 70'));
+const curves=[...d.matchAll(/C([\d.]+) ([\d.]+) ([\d.]+) ([\d.]+) ([\d.]+) ([\d.]+)/g)].map(x=>x.slice(1).map(Number));
+assert.equal(curves.length,71);
+assert.equal(curves[0][1],70); // horizontal starting tangent
+assert.equal(curves.at(-1)[3],70); // horizontal ending tangent
+assert.ok(Math.min(...curves.map(p=>p[5]))<15);
+assert.ok(Math.min(...curves.flatMap(p=>[p[1],p[3],p[5]]))>=12);
+const flat=wavePath(zeros);
+assert.ok([...flat.matchAll(/C([\d.]+) ([\d.]+) ([\d.]+) ([\d.]+) ([\d.]+) ([\d.]+)/g)].every(p=>+p[2]===70 && +p[4]===70 && +p[6]===70));
 assert.ok(!d.includes('NaN'));
 '''
     subprocess.run(['node','-e',script], check=True)