use gradio server

app.py

@@ -1,5 +1,11 @@
 """Pulpie vs Dripper — encoder vs decoder content extraction, live.
 
+gradio.Server backend: a FastAPI app with Gradio's queue engine layered on
+(via @app.api()). The UI is a custom vanilla HTML/CSS/JS frontend served at
+`/`; the Gradio JS client calls the queued `/race` endpoint, so requests go
+through concurrency control and (on ZeroGPU Spaces) GPU allocation — not raw
+fetches that would collide on the GPU.
+
 Both models receive the SAME simplified HTML (pulpie's MinerU-HTML-parity
 simplify). Pulpie classifies every block in one encoder forward pass; Dripper
 (MinerU-HTML 0.6B) emits its answer autoregressively, one token at a time.
@@ -7,15 +13,18 @@ simplify). Pulpie classifies every block in one encoder forward pass; Dripper
 
 from __future__ import annotations
 
+import os
 import re
 import threading
 import time
 from pathlib import Path
 
-import gradio as gr
 import spaces
 import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
+from fastapi.responses import HTMLResponse
+from gradio import Server
+from gradio.data_classes import FileData
 
 from pulpie.chunker import extract_blocks, pack_chunks, tokenize_blocks
 from pulpie.markdown import to_markdown
@@ -174,7 +183,7 @@ def labels_to_markdown(map_html: str, labels: dict[str, str]) -> str:
     return to_markdown(extract_main_html(map_html, labels))
 
 
-# ── The race ──
+# ── The race (queued endpoint, streamed as SSE via the Gradio client) ──
 
 MONO = "font-family: 'IBM Plex Mono', monospace;"
 
@@ -188,23 +197,27 @@ def fmt_timer(seconds: float, done: bool, color: str = "#1B1714") -> str:
 
 
 def race(example_name: str, custom_html: str):
-    """Generator driving both panes. Yields (pulpie_md, pulpie_timer, dripper_md, dripper_timer, verdict)."""
+    """Generator driving both panes. Yields dict records consumed by the SSE
+    frontend: {pulpie_md, pulpie_timer, dripper_md, dripper_timer, verdict}."""
     if custom_html and custom_html.strip():
         html = custom_html
     elif example_name in EXAMPLES:
         html = (EXAMPLES_DIR / EXAMPLES[example_name]).read_text(errors="replace")
     else:
-        yield "", "", "", "", "Pick an example page or paste HTML."
+        yield {"pulpie_md": "", "pulpie_timer": "", "dripper_md": "",
+               "dripper_timer": "", "verdict": "Pick an example page or paste HTML."}
         return
     if len(html.encode()) > MAX_HTML_BYTES:
-        yield "", "", "", "", "HTML too large (2 MB cap)."
+        yield {"pulpie_md": "", "pulpie_timer": "", "dripper_md": "",
+               "dripper_timer": "", "verdict": "HTML too large (2 MB cap)."}
         return
 
     # Shared preprocessing — identical input to both models.
     try:
         simplified, map_html = simplify(html)
     except Exception as e:
-        yield "", "", "", "", f"simplify failed: {e}"
+        yield {"pulpie_md": "", "pulpie_timer": "", "dripper_md": "",
+               "dripper_timer": "", "verdict": f"simplify failed: {e}"}
         return
 
     # Pulpie. Timed on-GPU inside the @spaces.GPU call so ZeroGPU
@@ -212,17 +225,22 @@ def race(example_name: str, custom_html: str):
     pulpie_labels, pulpie_s = pulpie_classify(simplified)
     pulpie_md = labels_to_markdown(map_html, pulpie_labels) or "*No main content detected.*"
     pulpie_timer = fmt_timer(pulpie_s, done=True, color="#C6531D")
-    yield pulpie_md, pulpie_timer, "", fmt_timer(0.0, done=False), ""
+    yield {"pulpie_md": pulpie_md, "pulpie_timer": pulpie_timer,
+           "dripper_md": "", "dripper_timer": fmt_timer(0.0, done=False), "verdict": ""}
 
     # Dripper, streaming.
     raw, dripper_s = "", 0.0
     for acc, gen_s, err in dripper_generate_stream(simplified):
         if err:
-            yield pulpie_md, pulpie_timer, f"*{err}*", fmt_timer(gen_s, done=True), ""
+            yield {"pulpie_md": pulpie_md, "pulpie_timer": pulpie_timer,
+                   "dripper_md": f"*{err}*", "dripper_timer": fmt_timer(gen_s, done=True),
+                   "verdict": ""}
             return
         raw, dripper_s = acc, gen_s
         preview = f"```\n…{raw[-1500:]}\n```" if raw else "*waiting for first token…*"
-        yield pulpie_md, pulpie_timer, preview, fmt_timer(dripper_s, done=False), ""
+        yield {"pulpie_md": pulpie_md, "pulpie_timer": pulpie_timer,
+               "dripper_md": preview, "dripper_timer": fmt_timer(dripper_s, done=False),
+               "verdict": ""}
 
     dripper_md = labels_to_markdown(map_html, parse_dripper_labels(raw)) or "*No main content detected.*"
     speedup = dripper_s / max(pulpie_s, 1e-6)
@@ -233,381 +251,39 @@ def race(example_name: str, custom_html: str):
         f"PULPIE {pulpie_s:.2f}s → DRIPPER {dripper_s:.1f}s · "
         f'<span style="color:#C6531D; font-weight:600;">{speedup_str} ON THIS PAGE</span></div>'
     )
-    yield pulpie_md, pulpie_timer, dripper_md, fmt_timer(dripper_s, done=True), verdict
-
-
-# ── UI ──
-
-CSS = """
-:root, .light, .dark {
-  --paper: #F2EDE3; --raised: #FBF7F0; --sunken: #ECE5D7;
-  --ink: #1B1714; --body-ink: #3F382F; --soft: #756A5E;
-  --orange: #C6531D; --orange-hover: #E0823A; --pine: #2F5A3C;
-  --hairline: #D7CBB6;
-  color-scheme: light;
-  /* Pin the Gradio variables dark mode flips — text must stay ink on paper. */
-  --body-text-color: var(--ink);
-  --body-text-color-subdued: var(--soft);
-  --block-label-text-color: var(--soft);
-  --block-label-background-fill: var(--paper);
-  --block-background-fill: var(--raised);
-  --block-title-text-color: var(--ink);
-  --input-background-fill: var(--raised);
-  --input-background-fill-focus: var(--raised);
-  --input-border-color: var(--hairline);
-  --body-background-fill: var(--paper);
-  --background-fill-primary: var(--paper);
-  --background-fill-secondary: var(--raised);
-  --border-color-primary: var(--hairline);
-  --block-border-color: var(--hairline);
-  --table-text-color: var(--ink);
-  --table-even-background-fill: var(--raised);
-  --table-odd-background-fill: var(--paper);
-  --button-primary-background-fill: var(--orange);
-  --button-primary-background-fill-hover: var(--orange-hover);
-  --button-primary-border-color: var(--orange);
-  --button-primary-text-color: #FBF7F0;
-  --button-secondary-background-fill: var(--paper);
-  --button-secondary-background-fill-hover: var(--sunken);
-  --button-secondary-border-color: var(--hairline);
-  --button-secondary-text-color: var(--ink);
-  --button-secondary-text-color-hover: var(--orange);
-  --error-background-fill: #FFF3EC;
-  --error-text-color: #8A2E16;
-  --error-border-color: var(--orange);
-  --error-icon-color: var(--orange);
-  --error-500: var(--orange);
-  --error-600: #A84418;
-  /* Markdown prose has its own variable set — headings went white without these. */
-  --prose-text-color: var(--body-ink);
-  --prose-header-text-color: var(--ink);
-  --link-text-color: var(--orange);
-  --link-text-color-hover: var(--orange-hover);
-  --link-text-color-visited: var(--orange);
-}
-/* Direct pins in case any prose rule bypasses the variables. */
-.result-pane h1, .result-pane h2, .result-pane h3,
-.result-pane h4, .result-pane h5, .result-pane h6,
-.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
-  color: var(--ink) !important;
-}
-.result-pane a, .prose a { color: var(--orange) !important; }
-.dark .gradio-container, .dark .gradio-container * { color: var(--ink); }
-html, body, gradio-app {
-  background: var(--paper) !important;
-  color: var(--ink) !important;
-}
-/* Paper everywhere — the page behind the container, not just the container. */
-body, gradio-app, .gradio-container, main, .main, .wrap, .contain {
-  background: var(--paper) !important;
-}
-.gradio-container {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-  color: var(--ink) !important;
-  max-width: 1280px !important;
-  margin: 0 auto !important;
-}
-.gradio-container * { border-radius: 0 !important; box-shadow: none !important; }
+    yield {"pulpie_md": pulpie_md, "pulpie_timer": pulpie_timer,
+           "dripper_md": dripper_md, "dripper_timer": fmt_timer(dripper_s, done=True),
+           "verdict": verdict}
 
-#eyebrow {
-  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
-  letter-spacing: 0.18em; color: var(--orange); text-transform: uppercase;
-}
-#headline h1 {
-  font-weight: 700; letter-spacing: -0.035em; font-size: 44px;
-  color: var(--ink); margin: 6px 0 4px;
-}
-#lead { font-family: 'Lora', serif; font-size: 19px; color: var(--body-ink); font-style: italic; }
-#header-block { border-bottom: 1px solid var(--hairline); padding-bottom: 24px; }
-
-.pane-label {
-  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
-  letter-spacing: 0.12em; color: var(--soft); text-transform: uppercase;
-  border-bottom: 1px solid var(--hairline); padding-bottom: 8px;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.result-pane {
-  background: var(--raised) !important; border: 1px solid var(--hairline) !important;
-  min-height: 220px; max-height: 560px; overflow-y: auto; padding: 18px !important;
-}
-/* Gradio nests blocks inside blocks — kill inner borders/padding so panes read as one surface. */
-.result-pane > *, .result-pane .prose, .result-pane .block {
-  border: none !important; background: transparent !important; padding: 0 !important;
-}
-.result-pane h1, .result-pane h2, .result-pane h3 { font-weight: 700; letter-spacing: -0.02em; }
-.result-pane p { font-family: 'Lora', serif; color: var(--body-ink); }
 
-.input-eyebrow {
-  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
-  letter-spacing: 0.14em; color: var(--soft); text-transform: uppercase;
-  margin: 8px 0 6px;
-}
-/* Selector + button: same height, same hairline treatment, flush row.
-   The dropdown's outer .block is Gradio's white card — flatten it entirely
-   and let the input be the only visible surface. */
-#input-row { align-items: center; gap: 12px; }
-#input-row > * { margin: 0 !important; }
-/* Both children are exactly 48px and centered in the row — no stray offsets. */
-#input-row > .block, #input-row > button { align-self: center !important; }
-#input-row .svelte-1xfsv4t { margin: 0 !important; }
-#input-row .block {
-  background: transparent !important; border: none !important; padding: 0 !important;
-  overflow: visible !important;
-}
-#input-row .wrap, #input-row .wrap-inner, #input-row .secondary-wrap {
-  background: transparent !important; border: none !important;
-  padding: 0 !important; height: 100%;
-}
-#input-row input {
-  background: var(--raised) !important;
-  border: 1px solid var(--hairline) !important; height: 48px !important;
-  font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important;
-  color: var(--ink) !important; padding: 0 14px !important;
-  cursor: pointer;
-}
-#input-row input:hover, #input-row input:focus {
-  border-color: var(--orange) !important;
-}
-#input-row .icon-wrap { right: 14px; }
-#input-row .icon-wrap svg { fill: var(--soft); }
-#input-row button.primary { height: 48px !important; min-height: 48px !important; }
-/* Dropdown options list: paper card, hairline, mono — not Gradio's rounded white. */
-ul.options, .options {
-  background: var(--raised) !important; border: 1px solid var(--hairline) !important;
-  font-family: 'IBM Plex Mono', monospace !important; font-size: 13px !important;
-  color: var(--ink) !important;
-}
-ul.options li.item, .options .item { padding: 10px 14px !important; }
-ul.options li.item.selected, .options .item.selected,
-ul.options li.item:hover, .options .item:hover {
-  background: var(--sunken) !important; color: var(--orange) !important;
-}
+# ── gradio.Server app ──
 
-button.primary {
-  background: var(--orange) !important; color: #FBF7F0 !important;
-  font-family: 'IBM Plex Mono', monospace !important; letter-spacing: 0.1em;
-  text-transform: uppercase; border: none !important;
-}
-button.primary, button.primary *, button.primary span { color: #FBF7F0 !important; }
-button.primary:hover { background: var(--orange-hover) !important; }
-button.secondary {
-  background: var(--paper) !important; color: var(--ink) !important;
-  border: 1px solid var(--hairline) !important;
-  font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important;
-  letter-spacing: 0.08em;
-}
-button.secondary:hover { color: var(--orange) !important; border-color: var(--orange) !important; }
+app = Server()
 
-#bench-well {
-  background: var(--sunken); border: 1px solid var(--hairline);
-  padding: 20px 24px; margin-top: 8px;
-}
-#bench-well table { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
-#footer-mono {
-  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
-  color: var(--soft); border-top: 1px solid var(--hairline); padding-top: 16px;
-}
-#footer-mono a { color: var(--ink); text-decoration: none; }
-#footer-mono a:hover { color: var(--orange); }
-textarea { background: var(--raised) !important; border: 1px solid var(--hairline) !important; }
-input, textarea {
-  color: var(--ink) !important;
-  -webkit-text-fill-color: var(--ink) !important;
-}
-input::placeholder, textarea::placeholder {
-  color: var(--soft) !important;
-  opacity: 0.78 !important;
-}
-/* Accordion: hairline bar on paper, mono label — not a white card.
-   The white comes from the .block wrapper Gradio puts around the accordion. */
-#html-accordion, #html-accordion.block {
-  background: transparent !important;
-  border: 1px solid var(--hairline) !important;
-}
-button.label-wrap { background: transparent !important; border: none !important; }
-/* Inner blocks of the accordion (the Textbox card) inherit paper, no border. */
-#html-accordion .block {
-  background: transparent !important; border: none !important; padding: 0 !important;
-}
-button.label-wrap span {
-  font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important;
-  letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft) !important;
-}
-button.label-wrap:hover span { color: var(--orange) !important; }
-#input-row svg, #html-accordion svg, button.label-wrap svg {
-  color: var(--soft) !important;
-  fill: var(--soft) !important;
-  stroke: var(--soft) !important;
-}
-ul.options *, .options * { color: var(--ink) !important; }
-ul.options li.item.selected, .options .item.selected,
-ul.options li.item:hover, .options .item:hover {
-  color: var(--orange) !important;
-}
-.result-pane li, .result-pane strong, .result-pane em,
-.result-pane blockquote, .result-pane code, .result-pane pre {
-  color: var(--body-ink) !important;
-}
-.result-pane pre, .result-pane code {
-  background: var(--sunken) !important;
-  border-color: var(--hairline) !important;
-}
-.error, .validation-error {
-  background: #FFF3EC !important;
-  color: #8A2E16 !important;
-  border-color: var(--orange) !important;
-}
-.toast-body {
-  background: var(--raised) !important;
-  color: var(--ink) !important;
-  border: 1px solid var(--hairline) !important;
-}
-.toast-body.error {
-  --toast-color: var(--orange) !important;
-  border-color: var(--orange) !important;
-}
-.toast-title, .toast-count, .toast-message-text, .toast-close,
-.toast-body .toast-message-item, .toast-body * {
-  color: var(--ink) !important;
-}
-.toast-icon, .toast-icon *, .toast-body.error .toast-icon,
-.toast-body.error .toast-icon * {
-  color: var(--orange) !important;
-  fill: var(--orange) !important;
-  stroke: var(--orange) !important;
-}
-.toast-message-item {
-  background: var(--paper) !important;
-}
-.toast-separator {
-  background: var(--hairline) !important;
-}
-.timer {
-  background: var(--orange) !important;
-}
-.icon-button-wrapper, button.icon-button, .icon-button {
-  background: var(--raised) !important;
-  color: var(--soft) !important;
-  border-color: var(--hairline) !important;
-}
-button.icon-button:hover, .icon-button:hover {
-  background: var(--sunken) !important;
-  color: var(--orange) !important;
-  border-color: var(--orange) !important;
-}
-.icon-button svg, button.icon-button svg,
-.icon-button-wrapper svg {
-  color: currentColor !important;
-  fill: currentColor !important;
-  stroke: currentColor !important;
-}
-#vg-tooltip-element, [role="tooltip"] {
-  background: var(--raised) !important;
-  color: var(--ink) !important;
-  border: 1px solid var(--hairline) !important;
-  box-shadow: none !important;
-}
-#vg-tooltip-element *, [role="tooltip"] * {
-  color: var(--ink) !important;
-}
-"""
 
-# The design is paper-light only: strip Gradio's .dark class before paint and
-# whenever the runtime re-adds it (system dark-mode users otherwise get
-# near-white text on paper).
-FORCE_LIGHT_JS = """
-() => {
-    const root = document.documentElement;
-    const strip = () => { root.classList.remove('dark'); root.classList.add('light'); };
-    strip();
-    new MutationObserver(strip).observe(root, {attributes: true, attributeFilter: ['class']});
-}
-"""
+@app.api(name="race")
+def race_endpoint(example_name: str, custom_html: str) -> dict:
+    """Queued, GPU-managed streaming endpoint. Each yielded record is delivered
+    to the Gradio client (JS or Python) as a separate SSE event, so the frontend
+    sees pulpie finish, then dripper's tokens arrive live, then the verdict.
+    The final record carries every field, so a non-streaming predict() call
+    still converges to the complete result.
 
-# CSS goes in <head> (not launch(css=...)) so the first paint already has the
-# layout — otherwise the page renders at Gradio's default width, then snaps to
-# 1280px when the runtime-injected stylesheet lands.
-HEAD = f"""
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Lora:ital@0;1&display=swap" rel="stylesheet">
-<style>{CSS}</style>
-"""
+    The `-> dict` return annotation is load-bearing: gradio.Server derives the
+    endpoint's output components from the return type, and a generator without
+    one registers zero outputs — the queue runs (the logs show each yield) but
+    the client receives nothing to render. Annotating with the *yielded* type
+    (dict, not Generator[dict, ...]) declares one dict output while the queue
+    still iterates the generator and streams each dict as a data event."""
+    yield from race(example_name or "", custom_html or "")
 
-with gr.Blocks(title="pulpie — encoder vs decoder") as demo:
-    with gr.Column(elem_id="header-block"):
-        gr.HTML('<div id="eyebrow">FEYN · CONTENT EXTRACTION · ENCODER VS DECODER</div>')
-        gr.HTML('<div id="headline"><h1>pulpie</h1></div>')
-        gr.HTML(
-            '<div id="lead">Extract main content from HTML. '
-            "One forward pass, not one token at a time.</div>"
-        )
-
-    gr.HTML('<div class="input-eyebrow">EXAMPLE PAGE</div>')
-    with gr.Row(elem_id="input-row"):
-        example_dd = gr.Dropdown(
-            choices=list(EXAMPLES.keys()),
-            value="paulgraham.com",
-            label=None,
-            show_label=False,
-            container=False,
-            scale=2,
-        )
-        run_btn = gr.Button("EXTRACT →", variant="primary", scale=1)
-    with gr.Accordion("OR PASTE RAW HTML", open=False, elem_id="html-accordion"):
-        custom_html = gr.Textbox(
-            lines=6,
-            show_label=False,
-            container=False,
-            placeholder="<html>…</html> (2 MB max; JS-rendered SPAs will come up empty — nothing static to extract)",
-        )
-
-    with gr.Row():
-        with gr.Column():
-            gr.HTML('<div class="pane-label">PULPIE ORANGE-SMALL · 210M · ENCODER</div>')
-            pulpie_timer = gr.HTML(fmt_timer(0.0, done=True))
-            pulpie_out = gr.Markdown(
-                "*One encoder forward pass over every block.*", elem_classes=["result-pane"]
-            )
-        with gr.Column():
-            gr.HTML('<div class="pane-label">DRIPPER · 0.6B · DECODER</div>')
-            dripper_timer = gr.HTML(fmt_timer(0.0, done=True))
-            dripper_out = gr.Markdown(
-                "*The same labels, one token at a time.*", elem_classes=["result-pane"]
-            )
-
-    verdict = gr.HTML()
-
-    gr.HTML(
-        """<div id="bench-well">
-        <div style="font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.14em;
-                    color:#756A5E; margin-bottom:12px;">WEBMAINBENCH · 6,647 PAGES · ROUGE-5 F1</div>
-        <table>
-          <tr><td>pulpie orange-small</td><td>210M</td><td style="color:#C6531D; font-weight:600;">0.862</td><td>13.7 pg/s on L4</td></tr>
-          <tr><td>dripper (MinerU-HTML)</td><td>0.6B</td><td>0.864</td><td>0.68 pg/s on L4</td></tr>
-          <tr><td>trafilatura</td><td>—</td><td>0.619</td><td>—</td></tr>
-        </table>
-        <div style="font-family:'Lora',serif; font-style:italic; color:#3F382F; margin-top:12px;">
-        Same quality. ~$7,900 to clean 1B pages, versus ~$159,000.</div>
-        </div>"""
-    )
 
-    gr.HTML(
-        """<div id="footer-mono">
-        pip install pulpie ·
-        <a href="https://github.com/feyninc/pulpie">GITHUB</a> ·
-        <a href="https://huggingface.co/feyninc/pulpie-orange-small">MODEL</a> ·
-        <a href="https://github.com/feyninc/pulpie/blob/main/BENCHMARKS.md">BENCHMARKS</a> ·
-        <a href="https://usefeyn.com/blog/pulpie-pareto-optimal-models-for-cleaning-the-web/">BLOG</a> ·
-        BUILT BY <a href="https://usefeyn.com">FEYN</a>
-        </div>"""
-    )
+@app.get("/")
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return HTMLResponse(content=f.read())
 
-    run_btn.click(
-        race,
-        inputs=[example_dd, custom_html],
-        outputs=[pulpie_out, pulpie_timer, dripper_out, dripper_timer, verdict],
-    )
 
 if __name__ == "__main__":
-    demo.launch(head=HEAD, js=FORCE_LIGHT_JS)
+    app.launch(show_error=True)

index.html

@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<meta name="theme-color" content="#F2EDE3" />
+<title>pulpie — encoder vs decoder</title>
+<meta name="color-scheme" content="light" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Lora:ital@0;1&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --paper:#F2EDE3; --raised:#FBF7F0; --sunken:#ECE5D7;
+    --ink:#1B1714; --body-ink:#3F382F; --soft:#756A5E;
+    --orange:#C6531D; --orange-hover:#E0823A; --pine:#2F5A3C; --hairline:#D7CBB6;
+    --green:#2F5A3C; --err:#8A2E16; --err-bg:#FFF3EC;
+    --r:14px; --r-sm:10px; --r-lg:20px;
+    --sh1:0 1px 2px rgba(27,23,20,.05), 0 1px 3px rgba(27,23,20,.04);
+    --sh2:0 10px 32px -12px rgba(27,23,20,.18), 0 2px 8px -3px rgba(27,23,20,.07);
+    --ring:0 0 0 3px rgba(198,83,29,.22);
+    --safe-t:env(safe-area-inset-top,0px);
+    color-scheme:light;
+  }
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{background:var(--paper);color:var(--ink)}
+  body{font-family:'Inter','Helvetica Neue',Arial,sans-serif;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
+  .mono{font-family:'IBM Plex Mono',monospace}
+  .wrap{width:100%;max-width:920px;margin:0 auto;padding:max(30px,var(--safe-t)) 20px 28px;flex:1}
+  ::selection{background:rgba(198,83,29,.18)}
+  *{scrollbar-width:thin;scrollbar-color:var(--hairline) transparent}
+  ::-webkit-scrollbar{width:9px;height:9px}
+  ::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:20px;border:2px solid var(--raised)}
+  ::-webkit-scrollbar-thumb:hover{background:var(--soft)}
+  ::-webkit-scrollbar-track{background:transparent}
+  a,button,select,textarea{touch-action:manipulation}
+
+  /* ── Header ── */
+  #header-block{margin-bottom:20px}
+  .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
+  #eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--orange);text-transform:uppercase;font-weight:500;line-height:1.3}
+  .pill{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);background:var(--raised);border:1px solid var(--hairline);padding:6px 11px;border-radius:100px;box-shadow:var(--sh1);transition:all .2s;white-space:nowrap}
+  .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,90,60,.15)}
+  .pill.connecting .dot{background:var(--orange);box-shadow:0 0 0 3px rgba(198,83,29,.15);animation:pulse 1.1s infinite}
+  .pill.error{color:var(--err);border-color:var(--orange)}
+  .pill.error .dot{background:var(--err);box-shadow:0 0 0 3px rgba(138,46,22,.15)}
+  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
+  #headline h1{font-weight:700;letter-spacing:-.035em;font-size:50px;color:var(--ink);line-height:1.02;background:linear-gradient(120deg,var(--ink) 30%,var(--orange) 145%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  #lead{font-family:'Lora',serif;font-size:18px;color:var(--body-ink);font-style:italic;max-width:620px;line-height:1.4;margin-top:6px}
+
+  /* ── Unified race card ── */
+  .race-card{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--sh2);overflow:hidden;margin-top:20px}
+  .card-section{padding:18px}
+  .card-divider{height:1px;background:var(--hairline)}
+
+  /* input section */
+  .input-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--soft);text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:8px}
+  .input-eyebrow::after{content:"";flex:1;height:1px;background:var(--hairline)}
+  #input-row{display:flex;align-items:stretch;gap:12px}
+  #example-select{flex:1;height:52px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:13px;padding:0 42px 0 16px;cursor:pointer;appearance:none;border-radius:var(--r-sm);transition:all .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C6531D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
+  #example-select:hover{border-color:var(--orange);box-shadow:var(--sh1)}
+  #example-select:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--orange)}
+  #run-btn{height:52px;min-width:150px;background:linear-gradient(135deg,var(--orange) 0%,#D9642A 100%);color:#FBF7F0;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:all .18s;box-shadow:0 4px 14px -4px rgba(198,83,29,.5)}
+  #run-btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 7px 22px -5px rgba(198,83,29,.55)}
+  #run-btn:active:not(:disabled){transform:translateY(0)}
+  #run-btn:focus-visible{outline:none;box-shadow:var(--ring)}
+  #run-btn:disabled{opacity:.6;cursor:progress;transform:none}
+  #run-btn .bolt{width:15px;height:15px}
+  .spinner{width:15px;height:15px;border:2px solid rgba(251,247,240,.35);border-top-color:#FBF7F0;border-radius:50%;animation:spin .7s linear infinite;display:none}
+  #run-btn.running .spinner{display:inline-block}
+  #run-btn.running .bolt{display:none}
+  @keyframes spin{to{transform:rotate(360deg)}}
+
+  #html-accordion{margin-top:12px}
+  .acc-header{display:flex;align-items:center;gap:9px;padding:7px 2px;cursor:pointer;user-select:none}
+  .acc-header .chev{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:7px;transition:color .15s}
+  .acc-header .chev .arw{display:inline-block;transition:transform .22s;color:var(--orange)}
+  .acc-header:hover .chev{color:var(--ink)}
+  #html-accordion.open .chev .arw{transform:rotate(90deg)}
+  .acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
+  #html-accordion.open .acc-body{max-height:300px}
+  .acc-body-inner{padding-top:8px}
+  #custom-html{width:100%;min-height:120px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);padding:13px 14px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.55;resize:vertical;border-radius:var(--r-sm);transition:all .15s}
+  #custom-html:focus-visible{outline:none;border-color:var(--orange);box-shadow:var(--ring)}
+  .acc-hint{font-family:'Lora',serif;font-style:italic;color:var(--soft);font-size:12px;margin-top:8px}
+
+  /* comparison strip */
+  .cmp-strip{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;padding:16px 18px;background:linear-gradient(180deg,var(--raised),rgba(236,229,215,.4))}
+  .chip{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:11px 13px;display:flex;flex-direction:column;gap:8px;transition:all .25s;min-width:0}
+  .chip.live{border-color:var(--orange);box-shadow:0 0 0 3px rgba(198,83,29,.09)}
+  .chip.dripper.live{border-color:var(--pine);box-shadow:0 0 0 3px rgba(47,90,60,.09)}
+  .chip-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
+  .chip-name{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:7px;min-width:0}
+  .chip-name b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .chip .led{width:8px;height:8px;border-radius:50%;flex:none;opacity:.4;transition:opacity .25s}
+  .chip.pulpie .led{background:var(--orange)}
+  .chip.dripper .led{background:var(--pine)}
+  .chip.live .led{opacity:1;box-shadow:0 0 0 4px rgba(198,83,29,.12)}
+  .chip.dripper.live .led{box-shadow:0 0 0 4px rgba(47,90,60,.12)}
+  .timer{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
+  .timer .running{color:var(--green);font-weight:500}
+  .chip.pulpie .timer{color:var(--orange)}
+  .bar{height:4px;background:var(--sunken);border-radius:4px;position:relative;overflow:hidden}
+  .bar .fill{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--orange),var(--orange-hover));border-radius:4px;transition:right .35s cubic-bezier(.4,0,.2,1)}
+  .chip.dripper .bar .fill{background:linear-gradient(90deg,var(--pine),#4A7E55)}
+  .bar .fill.indeterminate{animation:indet 1.3s ease-in-out infinite}
+  @keyframes indet{0%{left:-30%;right:100%}50%{right:40%}100%{left:100%;right:-30%}}
+
+  .cmp-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4px;min-width:92px}
+  .sp-num{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.03em;color:var(--orange);transition:all .3s}
+  .sp-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:7px;line-height:1.3}
+  .cmp-center.idle .sp-num{color:var(--hairline);font-size:22px}
+  .cmp-center.idle .sp-lbl{opacity:0}
+
+  /* toolbar (toggle + actions) */
+  .read-toolbar{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);flex-wrap:wrap;background:rgba(236,229,215,.32)}
+  .toggle-seg{display:flex;gap:3px;background:var(--sunken);border:1px solid var(--hairline);padding:3px;border-radius:100px}
+  .toggle-seg button{border:none;background:transparent;color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;cursor:pointer;border-radius:100px;transition:all .18s;font-weight:500;display:flex;align-items:center;gap:7px}
+  .toggle-seg button .led{width:7px;height:7px;border-radius:50%;opacity:.5}
+  .toggle-seg button[data-model="pulpie"] .led{background:var(--orange)}
+  .toggle-seg button[data-model="dripper"] .led{background:var(--pine)}
+  .toggle-seg button.active{background:var(--raised);color:var(--ink);box-shadow:var(--sh1)}
+  .toggle-seg button.active .led{opacity:1}
+  .toolbar-spacer{flex:1}
+  .mini-btn{background:var(--paper);color:var(--ink);border:1px solid var(--hairline);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;padding:8px 12px;cursor:pointer;transition:all .15s;text-transform:uppercase;border-radius:7px;display:inline-flex;align-items:center;gap:6px;min-height:34px}
+  .mini-btn:hover{color:var(--orange);border-color:var(--orange);background:var(--raised)}
+  .mini-btn:focus-visible{outline:none;box-shadow:var(--ring)}
+  .mini-btn:disabled{opacity:.4;cursor:not-allowed}
+
+  /* single reading pane */
+  .read-pane{min-height:280px;max-height:560px;overflow-y:auto;padding:18px 20px;-webkit-overflow-scrolling:touch}
+  .read-pane .placeholder{color:var(--soft);font-style:italic;font-family:'Lora',serif;font-size:14.5px;line-height:1.5;display:flex;align-items:center;justify-content:center;min-height:220px;text-align:center;opacity:.85;padding:0 6px}
+  .sk-line{height:10px;background:linear-gradient(90deg,var(--sunken),var(--hairline),var(--sunken));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;margin:14px 0}
+  .sk-line:nth-child(1){width:55%}.sk-line:nth-child(2){width:88%}.sk-line:nth-child(3){width:72%}.sk-line:nth-child(4){width:90%}.sk-line:nth-child(5){width:40%}
+  .sk-line:nth-child(2){animation-delay:.1s}.sk-line:nth-child(3){animation-delay:.2s}.sk-line:nth-child(4){animation-delay:.3s}.sk-line:nth-child(5){animation-delay:.4s}
+  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+
+  /* status line (errors / bad input) */
+  #status-line{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--err);padding:0 20px 14px;display:none}
+  #status-line.show{display:block}
+
+  /* markdown */
+  .md h1,.md h2,.md h3,.md h4,.md h5,.md h6{color:var(--ink);font-weight:700;letter-spacing:-.02em;margin:16px 0 7px;line-height:1.22}
+  .md h1{font-size:25px}.md h2{font-size:20px}.md h3{font-size:18px}.md h4{font-size:15.5px}
+  .md h1:first-child,.md h2:first-child{margin-top:0}
+  .md p{font-family:'Lora',serif;color:var(--body-ink);margin:9px 0;line-height:1.62;font-size:15px}
+  .md ul,.md ol{margin:9px 0 9px 22px;font-family:'Lora',serif;color:var(--body-ink);font-size:15px}
+  .md li{margin:4px 0;line-height:1.55}
+  .md a{color:var(--orange);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--hairline)}
+  .md a:hover{color:var(--orange-hover);text-decoration-color:var(--orange)}
+  .md code{background:var(--sunken);border:1px solid var(--hairline);padding:1px 6px;font-family:'IBM Plex Mono',monospace;font-size:.86em;color:var(--ink);border-radius:5px}
+  .md pre{background:var(--sunken);border:1px solid var(--hairline);padding:13px;overflow-x:auto;margin:11px 0;border-radius:var(--r-sm);font-size:12px;line-height:1.5}
+  .md pre code{background:none;border:none;padding:0;color:var(--ink)}
+  .md blockquote{border-left:3px solid var(--orange);padding:2px 0 2px 14px;margin:11px 0;color:var(--body-ink);font-style:italic;font-family:'Lora',serif}
+  .md img{max-width:100%;height:auto;border-radius:var(--r-sm)}
+  .md table{border-collapse:collapse;margin:11px 0;font-family:'IBM Plex Mono',monospace;font-size:12.5px;width:100%;display:block;overflow-x:auto}
+  .md th,.md td{border:1px solid var(--hairline);padding:7px 10px;text-align:left;white-space:nowrap}
+  .md th{background:var(--sunken)}
+  .md hr{border:none;border-top:1px solid var(--hairline);margin:15px 0}
+
+  /* flash */
+  .flash{background:var(--err-bg);color:var(--err);border:1px solid var(--orange);padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-top:14px;border-radius:var(--r-sm);display:none;align-items:center;gap:10px}
+  .flash.show{display:flex}
+  .flash .x{margin-left:auto;cursor:pointer;opacity:.6;padding:2px 6px}
+  .flash .x:hover{opacity:1}
+
+  /* ── Bench ── */
+  #bench-well{background:var(--raised);border:1px solid var(--hairline);border-radius:var(--r);padding:20px;margin-top:18px;box-shadow:var(--sh1)}
+  #bench-well .label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--soft);margin-bottom:14px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
+  #bench-well .label::after{content:"";flex:1;height:1px;background:var(--hairline)}
+  .bench-row{display:grid;grid-template-columns:170px 1fr 80px;align-items:center;gap:14px;padding:8px 0}
+  .bench-row .who{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .bench-row .who .params{color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:11px;margin-left:6px;font-weight:400}
+  .bench-track{height:10px;background:var(--sunken);border-radius:6px;overflow:hidden}
+  .bench-fill{height:100%;border-radius:6px;background:var(--soft);width:0;transition:width .9s cubic-bezier(.4,0,.2,1)}
+  .bench-row.win .bench-fill{background:linear-gradient(90deg,var(--orange),var(--orange-hover))}
+  .bench-row.dim .bench-fill{opacity:.5}
+  .bench-row .score{font-family:'IBM Plex Mono',monospace;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
+  .bench-row.win .score{color:var(--orange);font-weight:600}
+  #bench-well .note{font-family:'Lora',serif;font-style:italic;color:var(--body-ink);margin-top:12px;font-size:13.5px;line-height:1.5}
+
+  /* footer */
+  #footer-mono{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--soft);border-top:1px solid var(--hairline);padding-top:16px;margin-top:24px;padding-bottom:8px;display:flex;flex-wrap:wrap;gap:3px 0;align-items:center}
+  #footer-mono a{color:var(--ink);text-decoration:none;padding:3px;transition:color .15s}
+  #footer-mono a:hover{color:var(--orange)}
+  #footer-mono .sep{opacity:.4;margin:0 5px}
+
+  /* ── Mobile ── */
+  @media (max-width:600px){
+    .wrap{padding:max(20px,var(--safe-t)) 14px 22px}
+    #headline h1{font-size:38px}
+    #lead{font-size:16px}
+    .race-card{border-radius:var(--r)}
+    .card-section{padding:15px}
+    #input-row{flex-direction:column}
+    #example-select,#run-btn{flex:1;width:100%;min-width:0}
+    /* comparison strip stacks: pulpie / speedup / dripper */
+    .cmp-strip{grid-template-columns:1fr;gap:10px;padding:14px}
+    .cmp-center{flex-direction:row;gap:12px;min-width:0;padding:2px 0;justify-content:flex-start}
+    .cmp-center .sp-num{font-size:24px}
+    .cmp-center .sp-lbl{margin-top:0}
+    .chip{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
+    .chip-top{flex:1;min-width:120px}
+    .chip .bar{flex:1;min-width:80px}
+    .read-toolbar{padding:10px 14px}
+    .read-pane{padding:16px 16px;min-height:240px}
+    .bench-row{grid-template-columns:1fr 60px;gap:6px 12px}
+    .bench-row .who{grid-column:1/3}
+    .bench-row .bench-track{grid-column:1}
+    .bench-row .score{grid-column:2}
+  }
+  @media (max-width:420px){
+    #eyebrow{font-size:9.5px}
+    .pill{font-size:9px;padding:5px 9px}
+    #headline h1{font-size:32px}
+    .sp-num{font-size:22px}
+  }
+
+  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <!-- Header -->
+  <div id="header-block">
+    <div class="topbar">
+      <div id="eyebrow">FEYN · CONTENT EXTRACTION · ENCODER VS DECODER</div>
+      <div class="pill connecting" id="conn-pill"><span class="dot"></span><span id="conn-text">CONNECTING</span></div>
+    </div>
+    <div id="headline"><h1>pulpie</h1></div>
+    <div id="lead">Extract main content from HTML. One forward pass, not one token at a time.</div>
+  </div>
+
+  <!-- Unified race card -->
+  <div class="race-card">
+    <!-- input -->
+    <div class="card-section">
+      <div class="input-eyebrow">EXAMPLE PAGE</div>
+      <div id="input-row">
+        <select id="example-select" aria-label="Example page">
+          <option value="paulgraham.com">paulgraham.com</option>
+          <option value="nodejs.dev">nodejs.dev</option>
+          <option value="protobuf.dev">protobuf.dev</option>
+          <option value="istio.io">istio.io</option>
+          <option value="tutorialspoint.com">tutorialspoint.com</option>
+          <option value="builtin.com">builtin.com</option>
+          <option value="bbc.com">bbc.com</option>
+          <option value="theguardian.com">theguardian.com</option>
+          <option value="wikipedia.org">wikipedia.org</option>
+          <option value="stackoverflow.com">stackoverflow.com</option>
+        </select>
+        <button id="run-btn">
+          <svg class="bolt" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4.5 13.5H11l-1 8.5L19.5 10H13z"/></svg>
+          <span class="spinner"></span>
+          <span class="btn-label">EXTRACT →</span>
+        </button>
+      </div>
+      <div id="html-accordion">
+        <div class="acc-header" id="acc-toggle" role="button" tabindex="0" aria-expanded="false">
+          <span class="chev"><span class="arw">▸</span>OR PASTE RAW HTML</span>
+        </div>
+        <div class="acc-body"><div class="acc-body-inner">
+          <textarea id="custom-html" placeholder="<html>…</html>  (2 MB max; JS-rendered SPAs will come up empty — nothing static to extract)"></textarea>
+          <div class="acc-hint">If set, this overrides the example dropdown. ⌘/Ctrl+Enter to run.</div>
+        </div></div>
+      </div>
+    </div>
+
+    <div class="card-divider"></div>
+
+    <!-- comparison strip (both models, always visible) -->
+    <div class="cmp-strip">
+      <div class="chip pulpie" id="pulpie-chip">
+        <div class="chip-top">
+          <div class="chip-name"><span class="led"></span>PULPIE <b>210M · ENCODER</b></div>
+          <div class="timer" id="pulpie-timer"></div>
+        </div>
+        <div class="bar"><div class="fill" id="pulpie-bar"></div></div>
+      </div>
+      <div class="cmp-center idle" id="cmp-center">
+        <div class="sp-num" id="sp-num">—</div>
+        <div class="sp-lbl" id="sp-lbl">× FASTER · ON THIS PAGE</div>
+      </div>
+      <div class="chip dripper" id="dripper-chip">
+        <div class="chip-top">
+          <div class="chip-name"><span class="led"></span>DRIPPER <b>0.6B · DECODER</b></div>
+          <div class="timer" id="dripper-timer"></div>
+        </div>
+        <div class="bar"><div class="fill" id="dripper-bar"></div></div>
+      </div>
+    </div>
+
+    <!-- toolbar: toggle + actions -->
+    <div class="read-toolbar">
+      <div class="toggle-seg" role="tablist" aria-label="Which model to read">
+        <button data-model="pulpie" class="active" role="tab" aria-selected="true"><span class="led"></span>PULPIE</button>
+        <button data-model="dripper" role="tab" aria-selected="false"><span class="led"></span>DRIPPER</button>
+      </div>
+      <div class="toolbar-spacer"></div>
+      <button class="mini-btn" id="copy-btn">⧉ COPY MD</button>
+      <button class="mini-btn" id="diff-btn">≠ DIFF</button>
+    </div>
+
+    <!-- single reading pane -->
+    <div class="read-pane" id="read-pane">
+      <div class="placeholder">One encoder forward pass over every block.</div>
+    </div>
+    <div id="status-line"></div>
+  </div>
+
+  <div class="flash" id="flash"><span id="flash-text"></span><span class="x" id="flash-x">✕</span></div>
+
+  <!-- Bench -->
+  <div id="bench-well">
+    <div class="label">WEBMAINBENCH · 6,647 PAGES · ROUGE-5 F1</div>
+    <div class="bench-row win"><div class="who">pulpie orange-small<span class="params">210M</span></div><div class="bench-track"><div class="bench-fill" data-pct="86.2"></div></div><div class="score">0.862</div></div>
+    <div class="bench-row"><div class="who">dripper (MinerU-HTML)<span class="params">0.6B</span></div><div class="bench-track"><div class="bench-fill" data-pct="86.4"></div></div><div class="score">0.864</div></div>
+    <div class="bench-row dim"><div class="who">trafilatura<span class="params">—</span></div><div class="bench-track"><div class="bench-fill" data-pct="61.9"></div></div><div class="score">0.619</div></div>
+    <div class="note">Same quality. ~$7,900 to clean 1B pages, versus ~$159,000. <span style="color:var(--soft);font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:11px;letter-spacing:.05em">— 13.7 pg/s on L4 vs 0.68 pg/s</span></div>
+  </div>
+
+  <!-- Footer -->
+  <div id="footer-mono">
+    <span class="sep">pip install pulpie</span><span class="sep">·</span>
+    <a href="https://github.com/feyninc/pulpie">GITHUB</a><span class="sep">·</span>
+    <a href="https://huggingface.co/feyninc/pulpie-orange-small">MODEL</a><span class="sep">·</span>
+    <a href="https://github.com/feyninc/pulpie/blob/main/BENCHMARKS.md">BENCHMARKS</a><span class="sep">·</span>
+    <a href="https://usefeyn.com/blog/pulpie-pareto-optimal-models-for-cleaning-the-web/">BLOG</a><span class="sep">·</span>
+    BUILT BY <a href="https://usefeyn.com">FEYN</a>
+  </div>
+</div>
+
+<script type="module">
+  import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+  import { marked } from "https://cdn.jsdelivr.net/npm/marked@12/lib/marked.esm.js";
+  import DOMPurify from "https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.es.mjs";
+  marked.setOptions({ gfm:true, breaks:false, headerIds:false, mangle:false });
+
+  const $ = (id) => document.getElementById(id);
+  const runBtn=$("run-btn"), btnLabel=runBtn.querySelector(".btn-label");
+  const exampleSelect=$("example-select"), customHtml=$("custom-html");
+  const readPane=$("read-pane");
+  const pulpieChip=$("pulpie-chip"), dripperChip=$("dripper-chip");
+  const pulpieTimer=$("pulpie-timer"), dripperTimer=$("dripper-timer");
+  const pulpieBar=$("pulpie-bar"), dripperBar=$("dripper-bar");
+  const cmpCenter=$("cmp-center"), spNum=$("sp-num"), spLbl=$("sp-lbl");
+  const statusLine=$("status-line");
+  const flashEl=$("flash"), flashText=$("flash-text");
+  const connPill=$("conn-pill"), connText=$("conn-text");
+  const copyBtn=$("copy-btn"), diffBtn=$("diff-btn");
+
+  const PLACEHOLDERS = {
+    pulpie:'<div class="placeholder">One encoder forward pass over every block.</div>',
+    dripper:'<div class="placeholder">The same labels, one token at a time.</div>',
+  };
+  const SKEL = '<div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div><div class="sk-line"></div>';
+  let lastMd = { pulpie:"", dripper:"" };
+  let running = false, currentModel = "pulpie";
+
+  function renderMarkdown(md){ if(!md) return ""; return DOMPurify.sanitize(marked.parse(md)); }
+  function renderRead(){
+    const md = lastMd[currentModel];
+    if(md) readPane.innerHTML = renderMarkdown(md);
+    else if(running) readPane.innerHTML = SKEL;
+    else readPane.innerHTML = PLACEHOLDERS[currentModel];
+  }
+  function setRunning(on){
+    running = on;
+    runBtn.classList.toggle("running", on); runBtn.disabled=on;
+    btnLabel.textContent = on ? "EXTRACTING…" : "EXTRACT →";
+    if(on || lastMd[currentModel]) renderRead();
+  }
+  function showError(msg){ flashText.textContent=msg; flashEl.classList.add("show"); }
+  function clearError(){ flashEl.classList.remove("show"); }
+  function setStatus(html){ if(!html){ statusLine.classList.remove("show"); statusLine.innerHTML=""; return; } statusLine.innerHTML=html; statusLine.classList.add("show"); }
+  function setBar(bar, pct, indeterminate){
+    bar.classList.toggle("indeterminate", !!indeterminate);
+    if(indeterminate){ bar.style.right=""; }
+    else { bar.style.right = (100-Math.max(0,Math.min(100,pct)))+"%"; }
+  }
+  function setSpeedupIdle(){ cmpCenter.classList.add("idle"); spNum.textContent="—"; spLbl.textContent="× FASTER · ON THIS PAGE"; }
+  function setSpeedup(num){
+    cmpCenter.classList.remove("idle");
+    spNum.textContent = num;
+    spLbl.textContent = "× FASTER · ON THIS PAGE";
+  }
+  // Pull the speedup token ("12x" / "9.4x") out of the backend's verdict HTML:
+  //  <div ...>PULPIE 0.42s → DRIPPER 2.8s · <span ...>12x ON THIS PAGE</span></div>
+  function applyVerdict(v){
+    if(!v){ return; }
+    const m = v.match(/<span[^>]*>\s*([\d.]+x)\s+ON THIS PAGE\s*<\/span>/);
+    if(m){ setSpeedup(m[1]); setStatus(""); }
+    else { setSpeedupIdle(); setStatus(v); } // plain-text verdict (bad input / error)
+  }
+
+  function resetPanes(){
+    lastMd={pulpie:"",dripper:""};
+    pulpieChip.classList.remove("live"); dripperChip.classList.remove("live");
+    pulpieTimer.innerHTML=""; dripperTimer.innerHTML="";
+    setBar(pulpieBar,0); setBar(dripperBar,0);
+    setSpeedupIdle(); setStatus(""); clearError();
+    renderRead();
+  }
+
+  function normalizeRecord(d){
+    if(!d) return null;
+    if(typeof d==="object" && !Array.isArray(d) && "pulpie_md" in d) return d;
+    if(Array.isArray(d)){ for(const it of d){ if(it && typeof it==="object" && "pulpie_md" in it) return it; } }
+    return null;
+  }
+
+  function applyRecord(rec){
+    if(!rec) return;
+    if(rec.pulpie_md!==undefined && rec.pulpie_md!==""){
+      lastMd.pulpie=rec.pulpie_md;
+      pulpieChip.classList.add("live");
+      setBar(pulpieBar,100);
+      setTimeout(()=>pulpieChip.classList.remove("live"),900);
+      if(currentModel==="pulpie") renderRead();
+    }
+    if(rec.dripper_md!==undefined && rec.dripper_md!==""){
+      lastMd.dripper=rec.dripper_md;
+      dripperChip.classList.add("live");
+      if(currentModel==="dripper") renderRead();
+    }
+    if(rec.pulpie_timer!==undefined) pulpieTimer.innerHTML=rec.pulpie_timer;
+    if(rec.dripper_timer!==undefined) dripperTimer.innerHTML=rec.dripper_timer;
+    // dripper progress: indeterminate while streaming, full when the verdict lands
+    if(rec.dripper_md && !(rec.verdict)){ setBar(dripperBar,0,true); }
+    if(rec.verdict!==undefined && rec.verdict!==""){
+      applyVerdict(rec.verdict);
+      dripperChip.classList.remove("live");
+      setBar(dripperBar,100);
+    }
+  }
+
+  // ── Connect ──
+  let client=null;
+  try {
+    client = await Client.connect(window.location.origin, { events:["data","status"] });
+    connPill.classList.remove("connecting"); connText.textContent="READY";
+  } catch(e){
+    connPill.classList.remove("connecting"); connPill.classList.add("error"); connText.textContent="OFFLINE";
+    showError("Could not connect to backend: " + (e?.message||e));
+  }
+
+  // ── Run ──
+  async function run(){
+    if(!client){ showError("Backend not connected. Reload the page."); return; }
+    resetPanes(); setRunning(true);
+    const params = { example_name: exampleSelect.value, custom_html: customHtml.value.trim() };
+    try {
+      const submission = client.submit("/race", params);
+      let sawData=false;
+      for await (const msg of submission){
+        if(msg.type==="status"){
+          if(msg.stage==="pending" && msg.position!=null){
+            setStatus('<span style="color:var(--soft)">QUEUED · POSITION '+msg.position+'</span>');
+          } else if(msg.stage==="generating"){ if(!sawData) setStatus(""); }
+          continue;
+        }
+        if(msg.type==="data"){ sawData=true; applyRecord(normalizeRecord(msg.data)); }
+      }
+      if(!sawData) showError("Backend returned no data. Check the /race endpoint and Space logs.");
+    } catch(e){ showError("Race failed: " + (e?.message||e)); }
+    finally { setRunning(false); }
+  }
+  runBtn.addEventListener("click", run);
+  exampleSelect.addEventListener("keydown", e=>{ if(e.key==="Enter"){ e.preventDefault(); run(); } });
+  customHtml.addEventListener("keydown", e=>{ if(e.key==="Enter" && (e.metaKey||e.ctrlKey)){ e.preventDefault(); run(); } });
+
+  // ── Accordion ──
+  const acc=$("html-accordion"), accToggle=$("acc-toggle");
+  accToggle.addEventListener("click", ()=>{ const o=acc.classList.toggle("open"); accToggle.setAttribute("aria-expanded", o); });
+  accToggle.addEventListener("keydown", e=>{ if(e.key==="Enter"||e.key===" "){ e.preventDefault(); accToggle.click(); } });
+
+  // ── Model toggle ──
+  document.querySelectorAll(".toggle-seg button").forEach(b=>{
+    b.addEventListener("click", ()=>{
+      currentModel = b.getAttribute("data-model");
+      document.querySelectorAll(".toggle-seg button").forEach(x=>{ const on=x===b; x.classList.toggle("active",on); x.setAttribute("aria-selected",on); });
+      renderRead();
+    });
+  });
+
+  // ── Flash dismiss ──
+  $("flash-x").addEventListener("click", clearError);
+
+  // ── Copy ──
+  copyBtn.addEventListener("click", async ()=>{
+    const text = lastMd[currentModel];
+    if(!text) return;
+    try { await navigator.clipboard.writeText(text); copyBtn.textContent="✓ COPIED"; }
+    catch { copyBtn.textContent="COPY FAILED"; }
+    setTimeout(()=>(copyBtn.textContent="⧉ COPY MD"), 1400);
+  });
+
+  // ── Diff (against the other model, shown in the single reading pane) ──
+  let diffOpen=false, diffForModel=null;
+  diffBtn.addEventListener("click", ()=>{
+    if(diffOpen && diffForModel===currentModel){ renderRead(); diffOpen=false; diffBtn.textContent="≠ DIFF"; return; }
+    const other = currentModel==="pulpie" ? "dripper" : "pulpie";
+    if(!lastMd[currentModel] || !lastMd[other]) return;
+    const a=lastMd.pulpie, b=lastMd.dripper, same=a.trim()===b.trim();
+    if(same){
+      readPane.innerHTML = renderMarkdown(lastMd[currentModel]) +
+        '<div style="font-family:\'IBM Plex Mono\',monospace;font-size:11px;color:var(--green);margin-top:14px;border-top:1px solid var(--hairline);padding-top:10px;">✓ IDENTICAL OUTPUTS — PULPIE &amp; DRIPPER MATCH</div>';
+      diffBtn.textContent="IDENTICAL";
+    } else {
+      readPane.innerHTML = '<pre style="white-space:pre-wrap;font-family:\'IBM Plex Mono\',monospace;font-size:12px;line-height:1.5;background:var(--sunken);border:1px solid var(--hairline);padding:12px;border-radius:8px;">'+escapeHtml(lineDiff(a,b))+'</pre>';
+      diffBtn.textContent="↩ BACK";
+    }
+    diffOpen=true; diffForModel=currentModel;
+  });
+
+  function lineDiff(a,b){
+    const la=a.split("\n"), lb=b.split("\n"), n=la.length, m=lb.length;
+    const dp=Array.from({length:n+1}, ()=>new Array(m+1).fill(0));
+    for(let i=n-1;i>=0;i--) for(let j=m-1;j>=0;j--) dp[i][j]=la[i]===lb[j]?dp[i+1][j+1]+1:Math.max(dp[i+1][j],dp[i][j+1]);
+    let i=0,j=0,out=[];
+    while(i<n&&j<m){ if(la[i]===lb[j]){ out.push("  "+la[i]); i++; j++; } else if(dp[i+1][j]>=dp[i][j+1]){ out.push("- "+la[i]); i++; } else { out.push("+ "+lb[j]); j++; } }
+    while(i<n) out.push("- "+la[i++]); while(j<m) out.push("+ "+lb[j++]);
+    return out.slice(-400).join("\n");
+  }
+  function escapeHtml(s){ return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
+
+  // ── Animate benchmark bars on first paint ──
+  requestAnimationFrame(()=>{ setTimeout(()=>{
+    requestAnimationFrame(()=>{ document.querySelectorAll(".bench-fill").forEach(f=>{ f.style.width=(f.getAttribute("data-pct")||0)+"%"; }); });
+  }, 120); });
+</script>
+</body>
+</html>