dial fix + final card with phonetics grounding

README.md

@@ -9,7 +9,8 @@ python_version: "3.11"
 app_file: app.py
 pinned: false
 license: apache-2.0
-short_description: One dial, clean speech to wordless tongues, same voice
+short_description: Convert clear speech to glossolalia or mondegreen
+
 tags:
   - gradio
   - build-small-hackathon
@@ -27,79 +28,47 @@ tags:
 
 # Glossolalia Dial
 
-Type a sentence. Pick a voice. Turn the dial.
-
-At **0** you hear it spoken cleanly. At **4** you hear it as wordless glossolalia: invented words that obey English sound-rules but mean nothing, in the same voice. **The middle of the dial is the point.** At 2 the sentence is half-dissolved, recognizable but slipping, not a clean cut between speech and noise.
-
-The dial is a learned scalar conditioner. A small network maps the dial position to a vector added into F5-TTS's time embedding (the same AdaLN pathway the model uses for the diffusion timestep), co-trained with a LoRA. The naive version (appending a `tongues N` token to the prompt) failed: F5-TTS has no language-model front end, so it read the level word aloud and intelligibility moved the wrong way (Spearman -0.70). Making the conditioning a non-text scalar means the model cannot speak it, and the LoRA only has to learn one thing: the per-level audio transformation.
-
-**Live:** turn the dial, hit *play this dial*. Or hit *dissolve* to hear the whole 0 to 4 sweep crossfaded into one take.
+Glossolalia Dial is a text-to-speech toy with one knob. Type a sentence and it speaks it. Turn the knob up and the words come apart into wordless babble that still sounds like a language, in the same voice the whole way. The trick is the middle, where the sentence is half-dissolved instead of cutting straight from speech to noise.
 
-## Why it is worth a look
-
-No shipped product, open or closed, gives you a *typed-input, graded, voice-locked* slide into glossolalia. Emotion and prosody sliders (Hume, ElevenLabs) move other axes and optimise *for* intelligibility. The closest research (dysarthric-speech clones, discrete lyric-swap edits) solves a different problem. The originality here is the interaction, not the model: a continuous, learned intelligibility axis on one token.
-
-It is also not a DSP trick. Reverb, formant-shift, and vocoders act uniformly on audio that already exists. They cannot read a sentence you just invented and erode specific words into different but plausible ones while holding syllable count, stress, and voice. Only a model trained for it can, which is why this needed a fine-tune.
+**Demo video:** https://youtu.be/dDOaBNfihyo
 
 ## Two modes
 
-- **Tongues**: true glossolalia. The dial conditions the LoRA to slur the sentence into invented, pronounceable pseudo-words. `she sells seashells by the seashore` becomes something like `she'll sell sicials by the sohar` at the middle, wordless tongues at the top.
-- **Ghost**: mondegreen. Real English words are swapped for similar-sounding real words (`seashells` to `seagulls`), the misheard-lyric effect. More words change as the dial rises. **This is pareidolia, not glossolalia**, and is labeled as such.
-
-## How it was built
-
-There is no dataset of "sentences gradually dissolving into nonsense", so we made one. This is the whole reason a single person can build this: instead of hunting for labeled data that does not exist, we manufacture the training target from plain text.
+- **Tongues** is the words slurring into made-up pseudo-words. A LoRA and a learned dial trained into F5-TTS. This is the glossolalia.
+- **Ghost** swaps every word for a real one that sounds close (seashells becomes seagulls), the misheard-lyric thing. Pareidolia, not glossolalia, and labeled so. No model, runs live.
 
-1. Take 3000 public-domain sentences (Project Gutenberg + LibriSpeech). Public-domain on purpose: the corpus is rights-clean and the build is reproducible end to end, which also keeps the project Off-the-Grid (no scraped or licensed text, no cloud calls).
-2. For each, generate five corrupted phoneme variants at substitution rates 0, 0.25, 0.5, 0.75, 1.0. The corruption keeps the English phoneme inventory, preserves syllable count and stress, and leans toward open CV syllables. This is grounded in the phonetics of real glossolalia (Samarin 1972, Goodman 1972; Link & Tomaschek 2024 measured 95.7% CV structure across 7,486 glossolalic syllables).
-3. Have base F5-TTS read each corrupted variant in two reference voices. That gives 30,000 (audio, original-sentence, level, voice) tuples.
-4. Fine-tune a LoRA so that, given the *original* sentence plus a `tongues N` token, it reproduces the level-N audio. The model never sees the corrupted text. It learns the mapping from the dial alone.
+## Use it
 
-Training ran on Modal (A100). Ghost mode runs the mondegreen search live (CMUdict + PanPhon phonetic distance, re-ranked by DistilGPT-2 for common-word coherence), no second model trained.
+Type a sentence, pick a voice (nine presets or clone your own from a short clip), turn the dial 0 to 4, and hit play. Hit dissolve to hear the whole sweep in one take. You can also mix in a backing track, hand-tune any word, or wrap it in reverb.
 
-## Validation gates
+## How it works
 
-The gates were written into the evaluation script before any GPU spend, so the dial had to earn its result:
-- **Whisper-WER rises across levels.** The output is meant to get less intelligible, so word-error-rate should climb monotonically with the dial. Hallucination-guarded, so invented words at the top do not score a spuriously low WER when Whisper invents coherent text from noise.
-- **Voice preserved.** Resemblyzer speaker-embedding cosine between dial-0 and the higher levels should stay close, so the words dissolve but the speaker does not.
-- **The middle has to exist.** Hand-listen at dial 2 for partial dissolution, not a bimodal jump from clean to gibberish.
+There's no dataset of sentences falling apart into nonsense, so it builds one: corrupt each sentence's phonemes at five rising rates, have base F5-TTS read each, then train the dial to reproduce that slide from the clean sentence alone. The model never sees the corrupted text, it learns the slide from the dial. Ghost mode trains nothing, it searches CMUdict for close-sounding words live and reranks them with DistilGPT-2.
 
-The honest evidence: turn the dial and the output slides from the sentence as typed at 0, to a half-dissolved version at 2 that is recognizably the same sentence but slipping, to wordless at 4, in the same voice. The exact words change run to run because it is sampling a generative model, but the graded slide is stable. The middle is real.
+The corruption is built to sit inside real glossolalia's structure, not just noise: it only swaps within the English phoneme inventory (speakers reuse their native phonotactics, Samarin 1972, Goodman 1972) and keeps syllable count and stress while leaning toward open CV syllables (measured at 95.7% in glossolalic speech, Link & Tomaschek 2024). The exact sound palette is a taste choice, not a claim to match the distribution.
 
-## Models (all under 32B, all local)
+## Models (all local, all under 32B)
 
 | Model | Size | Role |
 |---|---|---|
-| F5-TTS v1 Base | ~336M | flow-matching TTS, zero-shot voice clone |
-| Glossolalia LoRA | rank-16 adapter | the dial (published, see below) |
-| DistilGPT-2 | ~82M | Ghost-mode word re-ranking |
-| Whisper base.en | ~74M | clone-reference transcription, validation |
+| F5-TTS v1 Base | ~336M | the voice (flow-matching TTS, zero-shot clone) |
+| Glossolalia LoRA | rank-16 | the dial |
+| DistilGPT-2 | ~82M | Ghost-mode word reranking |
+| Whisper base.en | ~74M | clone-reference transcription |
 
-Nothing calls a cloud API. Every model runs on the Space.
+No cloud APIs. Everything runs on the Space.
 
 ## Badges
 
-- 🎯 **Well-Tuned**: fine-tuned LoRA published at [`akshan-main/glossolalia-dial-lora`](https://huggingface.co/akshan-main/glossolalia-dial-lora).
-- 🔌 **Off the Grid**: no cloud APIs anywhere; `requirements.txt` has zero cloud SDKs.
-- 🎨 **Off-Brand**: the dial is a hand-built circular knob (CSS conic-gradient rim, pointer-drag JS, arc indicator, injected HTML) driving the model, not a default Gradio slider.
-- 📓 **Field Notes**: full write-up in [`BLOG.md`](https://github.com/akshan-main/glossolalia/blob/main/BLOG.md).
-
-## Use it
-
-- **Voice:** pick one of nine presets (warm and calm, high and arch, deep and slow, plus theatrical, haunted, and storyteller character voices from public-domain LibriVox), or open *clone your own voice* to upload or record a 6-12s clip.
-- **Background music:** drop in an instrumental and it tempo-locks, tunes the vocal toward the track's key, then mixes it over.
-- **Hand-tune words:** click any word to change its pronunciation or stretch it.
-- **Space (reverb):** dry to cathedral, applied live without re-running the model.
+- 🎯 **Well-Tuned**: the fine-tuned LoRA, published at [`akshan-main/glossolalia-dial-lora`](https://huggingface.co/akshan-main/glossolalia-dial-lora).
+- 🔌 **Off the Grid**: no cloud APIs, zero cloud SDKs in `requirements.txt`.
+- 🎨 **Off-Brand**: the dial is a hand-built circular knob, not a default slider.
+- 📓 **Field Notes**: the writeup is linked below.
 
 ## Links
 
+- **Demo video:** https://youtu.be/dDOaBNfihyo
+- **Writeup:** https://x.com/frutigeraerosol/status/2066667649338417367
 - **Model (LoRA):** https://huggingface.co/akshan-main/glossolalia-dial-lora
-- **Dataset (inputs):** https://huggingface.co/datasets/akshan-main/glossolalia-inputs
+- **Dataset:** https://huggingface.co/datasets/akshan-main/glossolalia-inputs
 - **Code:** https://github.com/akshan-main/glossolalia
-- **Field Notes:** https://github.com/akshan-main/glossolalia/blob/main/BLOG.md
-- **Demo video:** https://youtu.be/dDOaBNfihyo
-- **Social post:** https://x.com/frutigeraerosol/status/2066667649338417367
-
-## Team
-
-- [`akshan-main`](https://huggingface.co/akshan-main)

app.py

@@ -1,4 +1,4 @@
-"""Glossolalia Dial — a single dial that grades a typed lyric into dreamy territory in two
+"""Glossolalia Dial, a single dial that grades a typed lyric into dreamy territory in two
 distinct phonotactic paths:
 
   Ghost mode: lyric is rewritten as a sequence of real English words (mondegreen substitution).
@@ -6,11 +6,12 @@ distinct phonotactic paths:
               distance; reranked by DistilGPT-2 for semantic coherence. F5-TTS base reads it.
   Tongues mode: clean lyric goes into F5-TTS + a fine-tuned LoRA + a learned scalar conditioner
                 (LevelEmbed at AdaLN side). The LoRA produces graded glossolalic audio in the
-                user's chosen voice — invented pseudowords, sonorant-leaning palette.
+                user's chosen voice, invented pseudowords, sonorant-leaning palette.
 
 Both modes ride F5-TTS for voice cloning + audio synthesis. Off-the-Grid: no cloud APIs.
 
-v1 Gradio app (gr.Blocks). v2 (Off-Brand badge) is in app_server.py.
+Gradio app (gr.Blocks) with a hand-built circular knob injected as custom HTML/CSS/JS
+(the Off-Brand dial), driving F5-TTS + the trained LoRA.
 """
 
 from __future__ import annotations
@@ -228,7 +229,7 @@ class TTSEngine:
     inference call. For Ghost mode we set_dial(0) (LevelEmbed contributes ~zero) and feed
     mondegreen-substituted text. For Tongues mode we set_dial(level) and feed the clean
     lyric. The base LoRA attention adaptation is always on, but at dial=0 it produces audio
-    indistinguishable from F5-TTS base (verified empirically by v5 sweep — lv0 sounded
+    indistinguishable from F5-TTS base (verified empirically by v5 sweep, lv0 sounded
     identical to base output)."""
 
     def __init__(self):
@@ -267,13 +268,11 @@ class TTSEngine:
         if self._tts is not None:
             return
         try:
-            import patches  # noqa: F401 — installs F5TTS.load_lora before instantiation
+            import patches  # noqa: F401, installs F5TTS.load_lora before instantiation
             from f5_tts.api import F5TTS
             # Lazy-loaded inside generate(), which on ZeroGPU runs under @spaces.GPU, so
             # F5-TTS's auto device detection picks the allocated GPU. (On the T4 Space it
             # loads to cuda directly; locally it falls back to CPU.)
-            # Auto device detection: cuda on the T4 Space, the allocated GPU inside a ZeroGPU
-            # worker (generate runs under @spaces.GPU), cpu locally.
             self._tts = F5TTS(model="F5TTS_v1_Base")
             self.live = True
             print(f"[engine] F5-TTS base loaded (device={self._tts.device})")
@@ -283,7 +282,7 @@ class TTSEngine:
                     self._lora_loaded = True
                     print(f"[engine] LoRA loaded from {LORA_PATH}")
                 except Exception as e:
-                    print(f"[engine] LoRA load FAILED ({e}); falling back to base model — Well-Tuned badge forfeit")
+                    print(f"[engine] LoRA load FAILED ({e}); falling back to base model, Well-Tuned badge forfeit")
             else:
                 print("[engine] no LoRA path configured; running base model only")
         except ImportError:
@@ -566,7 +565,7 @@ def reapply_fx(dry_path, postfx_preset, music_path, music_gain_db):
 # ----- CSS (dreamy pastel theme: half-remembered photograph of dusk) -----
 
 CUSTOM_CSS = """
-/* HEAVEN OR LAS VEGAS — direct reference. Long-exposure Christmas lights, deep midnight
+/* HEAVEN OR LAS VEGAS, direct reference. Long-exposure Christmas lights, deep midnight
    violet background, hot red-orange sun in the lower-right hemisphere, gold light trails
    swooping diagonally. Title in hand-drawn flowing italic script (Pinyon Script ≈ the
    Vaughan Oliver "Heaven or Las Vegas" lettering). Photographic, luminous, analog. */
@@ -756,7 +755,7 @@ label, .gr-form > label, span[data-testid="block-info"], .label-wrap, label > sp
     align-items: end !important;
 }
 
-/* lyric textarea — handwriting on light, no card, just a hot gold underline */
+/* lyric textarea, handwriting on light, no card, just a hot gold underline */
 textarea {
     background: transparent !important;
     border: none !important;
@@ -776,9 +775,9 @@ textarea {
 textarea::placeholder { color: var(--cream-mute) !important; opacity: 0.45 !important; font-style: italic !important; }
 textarea:focus { border-bottom-color: var(--gold-bright) !important; outline: none !important; box-shadow: none !important; }
 
-/* dropdowns + number inputs — minimal, gold underline only.
+/* dropdowns + number inputs, minimal, gold underline only.
    Need to nuke svelte's wrapper containers AND the inner input.
-   DO NOT collapse min-height on the slider's .wrap — it would hide the track. */
+   DO NOT collapse min-height on the slider's .wrap, it would hide the track. */
 input, select, .gr-input, .gr-dropdown, [role="listbox"],
 .secondary-wrap, .container,
 [data-testid="dropdown"], [data-testid="number"] > div {
@@ -857,7 +856,7 @@ ul[role="listbox"] [role="option"]:hover,
     color: var(--gold-bright) !important;
 }
 
-/* mode radio — luminous gold tabs.
+/* mode radio, luminous gold tabs.
    The radio group's outer wrap on its own variant of the svelte class */
 .wrap.svelte-1mwvhlq, [role="radiogroup"] {
     display: inline-flex !important; gap: 0 !important;
@@ -900,7 +899,7 @@ ul[role="listbox"] [role="option"]:hover,
 .gradio-container input[role="listbox"]::placeholder { color: var(--cream-mute) !important; opacity: 1 !important; }
 .gradio-container .dropdown-arrow.svelte-loyhyk { fill: var(--gold-bright) !important; }
 
-/* Mode radio (Ghost / Tongues) — Gradio v6 svelte-19qdtil */
+/* Mode radio (Ghost / Tongues), Gradio v6 svelte-19qdtil */
 .gradio-container label.svelte-19qdtil {
     background: rgba(14, 8, 32, 0.7) !important;
     border: 1px solid var(--gold) !important;
@@ -925,7 +924,7 @@ ul[role="listbox"] [role="option"]:hover,
 .gradio-container label.svelte-19qdtil:has(input:checked) span.svelte-19qdtil {
     color: var(--night-deep) !important;
 }
-/* The native radio dot — hide it; we use the chip-style instead */
+/* The native radio dot, hide it; we use the chip-style instead */
 .gradio-container input[type="radio"].svelte-19qdtil { display: none !important; }
 [role="radio"][aria-checked="true"] label,
 input[type="radio"]:checked + label {
@@ -934,7 +933,7 @@ input[type="radio"]:checked + label {
     box-shadow: 0 0 22px var(--sun-halo), inset 0 1px 0 rgba(255, 220, 180, 0.5) !important;
 }
 
-/* buttons — glowing pill on dark, gold borders */
+/* buttons, glowing pill on dark, gold borders */
 button.primary, button[variant="primary"], .primary > button, button.lg, .gr-button {
     background: rgba(14, 8, 32, 0.92) !important;       /* opaque enough to read over the sun */
     color: var(--gold-bright) !important;
@@ -956,7 +955,7 @@ button.primary:hover, button[variant="primary"]:hover, .gr-button:hover {
     text-shadow: none;
     box-shadow: 0 0 36px var(--gold-glow), inset 0 0 18px rgba(255, 219, 138, 0.4) !important;
 }
-/* second action — Morph — in the hot vermillion / red-orange sun palette */
+/* second action, Morph, in the hot vermillion / red-orange sun palette */
 .action-row button:nth-of-type(2) {
     border-color: var(--sun-mid) !important;
     color: var(--sun-mid) !important;
@@ -1011,7 +1010,7 @@ button.primary:hover, button[variant="primary"]:hover, .gr-button:hover {
     background: rgba(20, 12, 40, 0.9) !important;
 }
 
-/* LIVE PREVIEW TEXTBOX (#ghost-lyric): big, gold-on-dark, italic — it's the
+/* LIVE PREVIEW TEXTBOX (#ghost-lyric): big, gold-on-dark, italic, it's the
    "see what the voice will say" surface and must be prominent. */
 #ghost-lyric, #ghost-lyric > div, #ghost-lyric .wrap, #ghost-lyric > label > div {
     background: rgba(14, 8, 32, 0.92) !important;
@@ -1031,7 +1030,7 @@ button.primary:hover, button[variant="primary"]:hover, .gr-button:hover {
     min-height: 80px !important;
 }
 
-/* THE DIAL — brass knob with vermillion arc and a pointer needle.
+/* THE DIAL, brass knob with vermillion arc and a pointer needle.
    Tick numbers sit in a semicircle above the knob: 0 on the left, 4 on the right. */
 #dial-stack {
     display: flex; flex-direction: column; align-items: center;
@@ -1106,7 +1105,7 @@ button.primary:hover, button[variant="primary"]:hover, .gr-button:hover {
     touch-action: none; user-select: none;
     transition: filter 0.22s;
 }
-/* Knurled rim — fine repeating ridges in brass */
+/* Knurled rim, fine repeating ridges in brass */
 .knob::before {
     content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
     background: repeating-conic-gradient(
@@ -1145,7 +1144,7 @@ button.primary:hover, button[variant="primary"]:hover, .gr-button:hover {
     filter: drop-shadow(0 0 8px var(--gold-glow));
     opacity: 0.9;
 }
-/* THE INDICATOR LINE — a thin cream line painted on the knob face, from center
+/* THE INDICATOR LINE, a thin cream line painted on the knob face, from center
    to the edge of the knurled rim. Rotates with the knob value. */
 .knob-pointer {
     position: absolute; z-index: 4;
@@ -1165,11 +1164,11 @@ button.primary:hover, button[variant="primary"]:hover, .gr-button:hover {
 }
 .knob-pin { display: none; }
 
-/* Hide the actual gradio slider — the knob drives it via JS */
+/* Hide the actual gradio slider, the knob drives it via JS */
 #dial-slider { display: none !important; }
 #dial-slider .head, #dial-slider .slider_input_container { display: none !important; }
 
-/* readout — newspaper-strip-like, gold rule */
+/* readout, newspaper-strip-like, gold rule */
 .readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 24px;
            border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 16px 0; }
 .readout-cell { background: transparent; padding: 4px 14px; text-align: left; border-right: 1px solid var(--hairline); }
@@ -1177,7 +1176,7 @@ button.primary:hover, button[variant="primary"]:hover, .gr-button:hover {
 .readout-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.32em; color: var(--gold); margin-bottom: 6px; text-transform: uppercase; opacity: 0.7; }
 .readout-val { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; font-weight: 400; color: var(--cream); letter-spacing: -0.01em; }
 
-/* ghost lyric — luminous pulled-quote in gold */
+/* ghost lyric, luminous pulled-quote in gold */
 .ghost-lyric textarea, [data-testid="textbox"]:not(:first-of-type) textarea {
     font-family: 'Cormorant Garamond', serif !important;
     font-style: italic !important;
@@ -1343,7 +1342,7 @@ KNOB_HTML = """
             mask: radial-gradient(circle, transparent 116px, #000 117px, #000 124px, transparent 125px);
     filter: drop-shadow(0 0 8px var(--vermillion-glow));
   }
-  /* indicator — a tiny vermillion bar with subtle glow */
+  /* indicator, a tiny vermillion bar with subtle glow */
   .knob-indicator {
     position: absolute; z-index: 4; left: 50%; top: 22px;
     width: 4px; height: 28px; margin-left: -2px;
@@ -1354,7 +1353,7 @@ KNOB_HTML = """
     pointer-events: none;
     transition: transform 0.16s cubic-bezier(.34,1.36,.4,1);
   }
-  /* the center numeral — italic Fraunces in ink */
+  /* the center numeral, italic Fraunces in ink */
   .knob-label {
     position: absolute; z-index: 5; inset: 0;
     display: flex; align-items: center; justify-content: center;
@@ -1363,7 +1362,7 @@ KNOB_HTML = """
     letter-spacing: -0.04em; pointer-events: none;
     text-shadow: 0 1px 0 rgba(255, 240, 220, 0.5), 0 -1px 0 rgba(42, 31, 45, 0.12);
   }
-  /* ticks — italic editorial numerals around the knob */
+  /* ticks, italic editorial numerals around the knob */
   .knob-ticks {
     display: flex; justify-content: space-between; width: 320px; margin: 28px auto 0;
     font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
@@ -1471,7 +1470,7 @@ STYLE_PRESETS = {
 }
 
 with gr.Blocks(title="Glossolalia Dial") as demo:
-    # Inject fonts via <link> — Gradio's CSS-in-JS strips @import, so the stylesheet
+    # Inject fonts via <link>, Gradio's CSS-in-JS strips @import, so the stylesheet
     # rule has to land in the document head as a tag, not in the CSS string.
     gr.HTML(
         """
@@ -1486,7 +1485,7 @@ with gr.Blocks(title="Glossolalia Dial") as demo:
         """
     )
 
-    # lyric — magazine pull-quote spanning full width
+    # lyric, magazine pull-quote spanning full width
     sentence = gr.Textbox(label="the lyric", value=DEFAULT_TEXT, lines=2,
                           placeholder="anything; the dial will dissolve it",
                           elem_id="lyric-input")
@@ -1498,7 +1497,7 @@ with gr.Blocks(title="Glossolalia Dial") as demo:
         mode = gr.Radio(choices=list(MODES), value=MODE_TONGUES,
                         label="the path", scale=1)
 
-    # custom voice — record or upload a 10-sec clip; F5-TTS clones it
+    # custom voice, record or upload a 10-sec clip; F5-TTS clones it
     with gr.Accordion("🎤  Clone your own voice  (record or upload 6-12 sec)",
                       open=False, elem_id="custom-voice-accord"):
         with gr.Row():
@@ -1515,7 +1514,7 @@ with gr.Blocks(title="Glossolalia Dial") as demo:
                 scale=1,
             )
 
-    # background music — upload an instrumental; we tempo-lock + mix the vocal over it
+    # background music, upload an instrumental; we tempo-lock + mix the vocal over it
     with gr.Accordion("🎵  Add background music  (mix a backing track under the voice)",
                       open=False, elem_id="music-accord"):
         with gr.Row():
@@ -1531,7 +1530,7 @@ with gr.Blocks(title="Glossolalia Dial") as demo:
                 scale=1,
             )
 
-    # per-word overrides — stretch + pronunciation per individual word.
+    # per-word overrides, stretch + pronunciation per individual word.
     # Token preview HTML is Python-rendered on every lyric / state change so the markup
     # is always in sync. JS only handles the click-to-edit popover and writes the new
     # state back into the textbox below; Python then re-renders on that change.
@@ -1549,7 +1548,7 @@ with gr.Blocks(title="Glossolalia Dial") as demo:
         # Click-to-edit on .token chips. Gradio v6 strips inline <script> tags inside
         # gr.HTML, so we register the delegated listener via demo.load(js=...) below.
 
-    # the dial — brass knob with vermillion arc and a Fraunces numeral center.
+    # the dial, brass knob with vermillion arc and a Fraunces numeral center.
     # Tick numbers sit in a semicircle above the knob (0 on the left, 4 on the right).
     # The knob's indicator is a pointer needle that lines up with the active tick.
     gr.HTML(
@@ -1578,6 +1577,20 @@ with gr.Blocks(title="Glossolalia Dial") as demo:
     )
     level = gr.Slider(0, 4, value=0, step=1, label="", elem_id="dial-slider",
                       show_label=False, visible=True)
+    # The custom knob writes the dial value into this slider's <input type="range"> via JS,
+    # where a range input's value is always a STRING. Gradio's slider bounds-check does
+    # `value < minimum`, which raises "TypeError: '<' not supported between str and int" on a
+    # string and kills the request (it surfaced as the dial erroring when turned). Coerce to a
+    # number before the original preprocess so turning the knob can never crash. Instance-level
+    # override (not a subclass) so the component stays a plain Slider and the knob wiring holds.
+    _level_orig_preprocess = level.preprocess
+    def _level_safe_preprocess(payload, *args, **kwargs):
+        try:
+            payload = float(payload)
+        except (TypeError, ValueError):
+            payload = 0.0
+        return _level_orig_preprocess(payload, *args, **kwargs)
+    level.preprocess = _level_safe_preprocess
 
     # Live preview of what the audio will say, updates as the dial / mode / lyric change.
     ghost_lyric = gr.Textbox(label="what the voice will say at this dial position",
@@ -1605,7 +1618,7 @@ with gr.Blocks(title="Glossolalia Dial") as demo:
     # Holds the last DRY (pre-effect) voice so changing post-fx / music re-renders
     # instantly from it instead of re-running F5-TTS.
     dry_cache = gr.State(None)
-    # Hidden — stub metrics block, only shown after we wire real Whisper-WER + Resemblyzer.
+    # Hidden, stub metrics block, only shown after we wire real Whisper-WER + Resemblyzer.
     metrics = gr.HTML(readout(), visible=False)
 
     # Bind the brass knob to the hidden slider. Gradio strips inline <script> tags,
@@ -1736,7 +1749,7 @@ with gr.Blocks(title="Glossolalia Dial") as demo:
         }""",
     )
 
-    # Click-to-edit on .token chips. Same demo.load(js=...) pattern as the knob —
+    # Click-to-edit on .token chips. Same demo.load(js=...) pattern as the knob -
     # inline <script> in gr.HTML is stripped by Gradio v6.
     demo.load(
         fn=None,