Fix streaming display bug + deep-blue Minima Labs UI

- run_generate double-accumulated cumulative yields (t1+t1t2+t1t2t3);
generate() now yields per-token chunks, accumulated once
- effort is a real gr.Radio input (API/MCP-settable, no gr.State)
- restyle to Minima Labs deep blue; hide Gradio chrome; drop MCP flag

app.py

@@ -2,7 +2,7 @@
 
 A 5.76M-parameter looped-hybrid language model. The signature mechanic: one
 weight-shared body block runs `K` times per token (the "effort"). More passes
-sharpen grammar; fewer favor commonsense. The Space makes the loop visible.
+sharpen grammar; fewer favor commonsense.
 
 Runs on ZeroGPU (free for the creator; visitors consume their own quota). The
 model is tiny so cold-start weight streaming is near-instant.
@@ -24,54 +24,10 @@ TOKENIZER = load_tokenizer()
 _PARAMS = sum(p.numel() for p in MODEL.parameters())
 print(f"  {round(_PARAMS/1e6, 2)}M params ready on {DEVICE}")
 
-EFFORTS = [
-    {"id": "low", "k": 2, "name": "Low", "tag": "commonsense"},
-    {"id": "med", "k": 3, "name": "Medium", "tag": "grammar", "default": True},
-    {"id": "high", "k": 4, "name": "High", "tag": "deeper grammar"},
-]
-EFFORT_K = {e["id"]: e["k"] for e in EFFORTS}
-_MAX_K = max(e["k"] for e in EFFORTS)
-
-
-# ── the effort rail (signature) ─────────────────────────────────────────────
-def effort_html(selected_id: str = "med") -> str:
-    cards = []
-    for e in EFFORTS:
-        sel = "selected" if e["id"] == selected_id else ""
-        dots = "".join(
-            f'<span class="dot {"lit" if i < e["k"] else ""}"></span>'
-            for i in range(_MAX_K)
-        )
-        cards.append(f"""
-        <button class="effort-card {sel}" data-id="{e['id']}" type="button">
-          <span class="eff-label">{e['name']}</span>
-          <span class="eff-k">K={e['k']}</span>
-          <span class="eff-dots">{dots}</span>
-          <span class="eff-tag">{e['tag']}</span>
-        </button>""")
-    return f'<div id="effort-rail" max-k="{_MAX_K}">{"".join(cards)}</div>'
-
-
-# On load: attach click listeners to the cards; track selection in window.__effort.
-ATTACH_JS = """
-() => {
-  window.__effort = "med";
-  const rail = document.getElementById('effort-rail');
-  if (!rail) return;
-  rail.querySelectorAll('.effort-card').forEach(btn => {
-    btn.addEventListener('click', () => {
-      rail.querySelectorAll('.effort-card').forEach(b => b.classList.remove('selected'));
-      btn.classList.add('selected');
-      window.__effort = btn.dataset.id;
-    });
-  });
-}
-"""
-
-# Generate-click preamble: override the effort slot with the JS-tracked selection.
-READ_EFFORT_JS = """
-(prompt, eff, mx, t, k) => [prompt, window.__effort || eff || "med", mx, t, k]
-"""
+# effort label → loop count. The Radio VALUES are what the API/MCP sees.
+EFFORT_CHOICES = [("Low · K=2 — commonsense", 2),
+                  ("Medium · K=3 — grammar", 3),
+                  ("High · K=4 — deeper grammar", 4)]
 
 
 def _estimate_duration(prompt, effort, max_new, temperature, top_k):
@@ -81,111 +37,117 @@ def _estimate_duration(prompt, effort, max_new, temperature, top_k):
 
 
 @spaces.GPU(duration=_estimate_duration)
-def run_generate(prompt: str, effort: str, max_new: int,
+def run_generate(prompt: str, effort: int, max_new: int,
                  temperature: float, top_k: int):
-    """Generate text from a prompt. `effort` sets the loop count K (2/3/4):
-    more passes sharpen grammar, fewer favor commonsense. Streams token-by-token."""
-    picked = EFFORT_K.get(effort or "med", 3)
+    """Generate text from a prompt. `effort` is the loop count K (2/3/4): more
+    passes sharpen grammar, fewer favor commonsense. Streams token-by-token."""
+    k = int(effort) if effort in (2, 3, 4) else 3
     if not str(prompt).strip():
-        yield ("<div class='outbox' id='specimen'></div>"
-               "<div class='status'><span class='empty'>Type a prompt to start.</span></div>")
+        yield "", "<div class='status'>Type a prompt to start.</div>"
         return
-    outs = []
-    last_count = 0
-    last_tps = 0.0
-    for text, count, tps in generate(
-            MODEL, TOKENIZER, prompt, loops=picked, max_new=int(max_new),
+    text = ""
+    count = 0
+    tps = 0.0
+    for chunk, count, tps in generate(
+            MODEL, TOKENIZER, prompt, loops=k, max_new=int(max_new),
             temperature=float(temperature), top_k=int(top_k), device=DEVICE):
-        outs.append(text)
-        last_tps, last_count = tps, count
-        status = (f"<div class='status'>"
-                  f"<span class='k-chip'>K={picked}</span>"
-                  f"<span class='stat'>{last_count} tok</span>"
-                  f"<span class='stat'>{last_tps:.1f} tok/s</span>"
-                  f"<span class='stat'>ZeroGPU</span></div>")
-        yield f"<div class='outbox' id='specimen'>{''.join(outs)}</div>", status
-    status = (f"<div class='status'>"
-              f"<span class='k-chip'>K={picked}</span>"
-              f"<span class='stat'>{last_count} tok</span>"
-              f"<span class='stat'>{last_tps:.1f} tok/s</span>"
-              f"<span class='done'>done</span></div>")
-    yield f"<div class='outbox' id='specimen'>{''.join(outs)}</div>", status
+        text += chunk
+        yield text, f"<div class='status'>K={k} · {count} tok · {tps:.1f} tok/s</div>"
+    yield text, f"<div class='status'>K={k} · {count} tok · {tps:.1f} tok/s · done</div>"
 
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
 
 :root{
-  --bg:#13131A; --surface:#1C1C26; --surface2:#22222E;
-  --hair:#2A2A38; --text:#E8E6DF; --muted:#8A8A98;
-  --amber:#E8A547; --amber-dim:#8a6a2e; --teal:#4FB3A0;
+  --bg:#0A1128; --surface:#101A3A; --surface2:#16224A;
+  --hair:#22315E; --text:#E8EDF7; --muted:#7D8DB0;
+  --blue:#3E7BFA; --blue-bright:#5E96FF; --blue-dim:#2A4A8F;
   --r:10px;
 }
 *{box-sizing:border-box;}
-body, .gradio-container, .gradio-container * { background:var(--bg) !important; color:var(--text) !important; font-family:'Inter',system-ui,sans-serif !important; }
-.gradio-container{ max-width:980px !important; padding:28px 20px 48px !important; }
-
-.head{ display:flex; align-items:baseline; gap:16px; padding-bottom:6px; flex-wrap:wrap; }
-.breed{ font-family:'Fraunces',serif; font-weight:300; font-size:30px; line-height:1; letter-spacing:-0.01em; color:var(--text); }
-.breed em{ font-style:italic; font-weight:500; color:var(--amber); }
-.kicker{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--hair); padding-bottom:8px; width:100%; margin-top:4px; }
-.lede{ font-family:'Fraunces',serif; font-weight:300; font-size:15.5px; line-height:1.5; color:#b7b6ad; max-width:62ch; margin:14px 0 4px; }
-.lede b{ font-weight:500; color:var(--teal); }
-
-.panel-h{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px; }
-#effort-rail{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
-.effort-card{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:12px 14px 12px; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; align-items:center; gap:2px 10px; transition:border-color .15s, background .15s; text-align:left; }
-.effort-card:hover{ border-color:#3a3a4a; }
-.effort-card.selected{ background:var(--surface2); border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset; }
-.eff-label{ font-family:'Inter'; font-weight:600; font-size:14px; color:var(--text); }
-.effort-card.selected .eff-label{ color:var(--amber); }
-.eff-k{ grid-column:2; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
-.effort-card.selected .eff-k{ color:#c9a05a; }
-.eff-dots{ grid-column:1 / span 3; grid-row:2; display:flex; gap:4px; margin-top:6px; }
-.dot{ width:7px; height:7px; border-radius:50%; background:#33333f; transition:background .15s, box-shadow .15s; }
-.effort-card .dot.lit{ background:#4a4a3a; }
-.effort-card.selected .dot.lit{ background:var(--amber); box-shadow:0 0 5px rgba(232,165,71,.55); }
-.eff-tag{ grid-column:3; grid-row:1; font-family:'Inter'; font-size:10.5px; color:#6f6f7d; text-transform:lowercase; }
-.effort-card.selected .eff-tag{ color:var(--amber-dim); }
-
-textarea#prompt, .gradio-container textarea{ background:var(--surface) !important; border:1px solid var(--hair) !important; border-radius:var(--r) !important; color:var(--text) !important; font-family:'Fraunces',serif !important; font-weight:300 !important; font-size:16px !important; line-height:1.5 !important; }
-textarea#prompt:focus{ border-color:var(--amber) !important; }
-.label-wrap label, .gradio-container .form label{ color:#b7b6ad !important; font-size:11.5px !important; letter-spacing:0.04em !important; }
-
-button#gen, button.primary{ background:var(--amber) !important; color:#1a1409 !important; border:none !important; border-radius:var(--r) !important; font-weight:600 !important; font-size:14px !important; }
-button#gen:hover{ filter:brightness(1.08); }
-
-.outbox{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:18px 20px; min-height:140px; font-family:'Fraunces',serif; font-weight:300; font-size:17px; line-height:1.55; color:var(--text); white-space:pre-wrap; word-break:break-word; }
-.empty{ color:#55556a; font-style:italic; font-family:'Fraunces',serif; }
-
-.status{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; display:flex; gap:12px; align-items:center; margin-top:10px; flex-wrap:wrap; }
-.stat{ color:var(--muted); }
-.k-chip{ background:rgba(232,165,71,.12); color:var(--amber); border:1px solid rgba(232,165,71,.35); border-radius:5px; padding:1px 7px; font-weight:500; }
-.done{ color:var(--teal); }
-
-input[type=range]{ accent-color:var(--amber); }
-
-.foot{ margin-top:28px; border-top:1px solid var(--hair); padding-top:12px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#5d5d6c; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
+body, .gradio-container{ background:var(--bg) !important; }
+.gradio-container{
+  max-width:820px !important; margin:0 auto !important;
+  padding:32px 20px 40px !important;
+  font-family:'Inter',system-ui,sans-serif !important; color:var(--text) !important;
+}
+
+/* hide Gradio chrome: footer, settings, API/MCP links */
+footer, .gradio-container footer, #footer{ display:none !important; }
+
+.head{ margin-bottom:20px; }
+.title{ font-weight:600; font-size:26px; letter-spacing:-0.01em; color:var(--text); }
+.title em{ font-style:normal; color:var(--blue-bright); }
+.sub{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em;
+      text-transform:uppercase; color:var(--muted); margin-top:6px; }
+
+.field-h{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.16em;
+          text-transform:uppercase; color:var(--muted); margin:18px 0 8px; }
+
+/* prompt */
+.gradio-container textarea{
+  background:var(--surface) !important; border:1px solid var(--hair) !important;
+  border-radius:var(--r) !important; color:var(--text) !important;
+  font-family:'Inter' !important; font-size:15px !important; line-height:1.5 !important;
+}
+.gradio-container textarea:focus{ border-color:var(--blue) !important; box-shadow:none !important; }
+
+/* effort radio — pill row */
+#effort .wrap{ display:flex !important; gap:8px !important; }
+#effort label{
+  flex:1; background:var(--surface) !important; border:1px solid var(--hair) !important;
+  border-radius:var(--r) !important; padding:10px 12px !important; cursor:pointer;
+  font-size:13px !important; color:var(--muted) !important; text-align:center;
+  transition:border-color .15s, background .15s, color .15s;
+}
+#effort label:hover{ border-color:#33508f !important; }
+#effort label.selected{
+  background:var(--surface2) !important; border-color:var(--blue) !important;
+  color:var(--blue-bright) !important; box-shadow:0 0 0 1px var(--blue) inset !important;
+}
+#effort input{ display:none !important; }
+
+/* sliders */
+.gradio-container .form label, .label-wrap label{
+  color:var(--muted) !important; font-size:12px !important; letter-spacing:0.02em !important;
+}
+input[type=range]{ accent-color:var(--blue); }
+
+/* generate button */
+button#gen{
+  background:var(--blue) !important; color:#fff !important; border:none !important;
+  border-radius:var(--r) !important; font-weight:600 !important; font-size:14px !important;
+  margin-top:6px;
+}
+button#gen:hover{ background:var(--blue-bright) !important; }
+
+/* output */
+#out textarea, #out{
+  background:var(--surface) !important; border:1px solid var(--hair) !important;
+  border-radius:var(--r) !important; color:var(--text) !important;
+  font-size:15.5px !important; line-height:1.6 !important;
+}
+.status{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted);
+         margin-top:8px; min-height:16px; }
+
+.foot{ margin-top:26px; border-top:1px solid var(--hair); padding-top:12px;
+       font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#54648c;
+       display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
 .foot a{ color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--hair); }
 .foot a:hover{ color:var(--text); }
 """
 
 HEADER_HTML = """
 <div class="head">
-  <div class="breed">min&nbsp;·spark <em>preview</em></div>
-  <div class="kicker">PICO release 01 · Meiosis · looped hybrid · 5.76M params · ZeroGPU</div>
-</div>
-<div class="lede">
-  A research demo of a small language model trained from scratch on ten billion tokens.
-  Its one mechanic: a single weight-shared block runs <b>K times per token</b> — that is the
-  &ldquo;effort.&rdquo; More passes sharpen grammar; fewer favor commonsense. Pick a pass count
-  and prompt it.
+  <div class="title">min-spark <em>preview</em></div>
+  <div class="sub">Minima Labs · PICO release 01 · Meiosis · looped hybrid · 5.76M params</div>
 </div>
 """
 
 FOOTER_HTML = """
 <div class="foot">
-  <span>ZeroGPU · generations stop early on &lt;eos&gt; · visitors use their own quota</span>
+  <span>ZeroGPU · stops early on &lt;eos&gt; · visitors use their own quota</span>
   <span><a href="https://github.com/eclipse-senpai/PICO" target="_blank" rel="noopener">PICO on GitHub</a></span>
 </div>
 """
@@ -193,34 +155,32 @@ FOOTER_HTML = """
 with gr.Blocks(css=CSS, title="min-spark · Meiosis preview") as demo:
     gr.HTML(HEADER_HTML)
 
-    gr.HTML('<div class="panel-h">Effort — loops per token</div>')
-    effort_view = gr.HTML(effort_html("med"))
+    gr.HTML('<div class="field-h">Effort — loops per token</div>')
+    effort = gr.Radio(choices=EFFORT_CHOICES, value=3, elem_id="effort",
+                      show_label=False, container=False)
 
-    gr.HTML('<div class="panel-h">Prompt</div>')
-    prompt = gr.Textbox(value="", placeholder="Once upon a time, the very small model",
-                        elem_id="prompt", lines=2, show_label=False)
+    gr.HTML('<div class="field-h">Prompt</div>')
+    prompt = gr.Textbox(value="", placeholder="Once upon a time",
+                        lines=2, show_label=False, container=False)
 
     with gr.Row():
         max_new = gr.Slider(8, 256, value=128, step=8, label="Max tokens")
         temperature = gr.Slider(0.1, 1.6, value=0.8, step=0.05, label="Temperature")
-        top_k = gr.Slider(0, 200, value=50, step=5, label="Top-k  (0 = off)")
+        top_k = gr.Slider(0, 200, value=50, step=5, label="Top-k (0 = off)")
 
     gen_btn = gr.Button("Generate", elem_id="gen", variant="primary")
 
-    out = gr.HTML(value='<div class="outbox" id="specimen"></div>')
+    out = gr.Textbox(value="", elem_id="out", show_label=False, container=False,
+                     lines=10, interactive=False, autoscroll=True)
     status = gr.HTML(value='<div class="status"></div>')
 
     gr.HTML(FOOTER_HTML)
 
-    effort_state = gr.State("med")  # default; overridden by READ_EFFORT_JS preamble
-
-    demo.load(fn=None, js=ATTACH_JS)
     gen_btn.click(
         fn=run_generate,
-        js=READ_EFFORT_JS,
-        inputs=[prompt, effort_state, max_new, temperature, top_k],
+        inputs=[prompt, effort, max_new, temperature, top_k],
         outputs=[out, status],
     )
 
 if __name__ == "__main__":
-    demo.queue().launch(mcp_server=True)
+    demo.queue().launch()

loader.py

@@ -44,13 +44,13 @@ def load_model(device: str = "cpu") -> Meiosis:
 @torch.no_grad()
 def generate(model, tokenizer, prompt: str, *, loops: int, max_new: int,
              temperature: float, top_k: int, device: str):
-    """Token-by-token sampling. Yields (text_so_far, token_count, tok_per_s).
-    Mirrors infer.py: EOS prefix, top-k + temperature, stop on EOS. Runs on the
-    GPU worker when invoked under @spaces.GPU; returns only CPU-safe Python
-    objects (str/int/float) so nothing CUDA crosses the pickle boundary."""
+    """Token-by-token sampling, mirroring infer.py. Yields (chunk, count, tps)
+    where `chunk` is THIS step's decoded token (not cumulative) so the caller
+    can stream a typewriter effect. Per-token decode joins byte-exactly for
+    this byte-level BPE (verified against cumulative decode). Runs on the GPU
+    worker under @spaces.GPU; yields only CPU-safe Python objects."""
     import time
     ids = [EOS_ID] + tokenizer.encode(prompt).ids
-    out_text = ""
     t0 = None
     count = 0
     for _ in range(max_new):
@@ -68,7 +68,6 @@ def generate(model, tokenizer, prompt: str, *, loops: int, max_new: int,
         if next_id == EOS_ID:
             break
         ids.append(next_id)
-        out_text += tokenizer.decode([next_id])
         count += 1
         elapsed = time.perf_counter() - t0
-        yield out_text, count, (count / elapsed if elapsed > 0 else 0.0)
+        yield tokenizer.decode([next_id]), count, (count / elapsed if elapsed > 0 else 0.0)