Convert to gradio.Server: custom frontend, queued streaming backend

app.py is now a gradio.Server FastAPI app: @app .api(name="race") wraps
the race as a generator endpoint (each yield -> one SSE event, so the
JS client sees pulpie finish, dripper stream live, then the verdict;
concurrency/GPU allocation handled by Gradio's queue). @app .get('/')
serves the new custom index.html. Inference logic and models unchanged.

index.html: self-contained vanilla HTML/CSS/JS frontend (~700 lines,
no build step) that calls the backend through the Gradio JS client
(Client.connect(origin) -> client.submit('/race')), so requests go
through the queue rather than raw fetch. Preserves the paper-light
design and adds: live streaming race, connection pill, progress bar +
button spinner, per-pane copy-md and LCS line-diff, raw-HTML accordion,
keyboard run (Enter / Cmd+Enter), error flash, empty/reset states,
marked+DOMPurify markdown rendering, responsive stacking.

Co-Authored-By: Claude <noreply@anthropic.com>

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,32 @@ 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;
-}
 
-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; }
+# ── gradio.Server app ──
 
-#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;
-}
-"""
+app = Server()
 
-# 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']});
-}
-"""
 
-# 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>
-"""
+@app.api(name="race")
+def race_endpoint(example_name: str, custom_html: str):
+    """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."""
+    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,536 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<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=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;
+    color-scheme: light;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
+  html, body { background: var(--paper); color: var(--ink); }
+  body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    min-height: 100vh; display: flex; flex-direction: column;
+    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+  }
+  .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 28px 24px; flex: 1; }
+  .mono { font-family: 'IBM Plex Mono', monospace; }
+  .serif { font-family: 'Lora', serif; }
+
+  /* ── Header ── */
+  #header-block { border-bottom: 1px solid var(--hairline); padding-bottom: 24px; margin-bottom: 28px; }
+  #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; line-height: 1.05;
+  }
+  #lead { font-family: 'Lora', serif; font-size: 19px; color: var(--body-ink); font-style: italic; max-width: 680px; }
+  .pill {
+    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
+    text-transform: uppercase; color: var(--soft);
+    background: var(--sunken); border: 1px solid var(--hairline); padding: 5px 10px;
+  }
+  .pill .dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
+  .pill.connecting .dot { background: var(--orange); animation: pulse 1s infinite; }
+  .pill.error .dot { background: #8A2E16; }
+  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
+
+  /* ── Input row ── */
+  .input-eyebrow {
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
+    letter-spacing: 0.14em; color: var(--soft); text-transform: uppercase;
+    margin: 8px 0 10px;
+  }
+  #input-row { display: flex; align-items: stretch; gap: 12px; }
+  #example-select {
+    flex: 2; height: 48px; background: var(--raised);
+    border: 1px solid var(--hairline); color: var(--ink);
+    font-family: 'IBM Plex Mono', monospace; font-size: 13px;
+    padding: 0 14px; cursor: pointer; appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23756A5E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 14px center;
+    padding-right: 38px; transition: border-color .15s;
+  }
+  #example-select:hover, #example-select:focus { border-color: var(--orange); outline: none; }
+  #run-btn {
+    flex: 1; height: 48px; min-width: 150px;
+    background: var(--orange); color: #FBF7F0; border: none; cursor: pointer;
+    font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
+    letter-spacing: 0.1em; text-transform: uppercase; transition: background .15s;
+    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
+  }
+  #run-btn:hover:not(:disabled) { background: var(--orange-hover); }
+  #run-btn:disabled { opacity: 0.55; cursor: progress; }
+  .spinner {
+    width: 14px; height: 14px; border: 2px solid rgba(251,247,240,0.35);
+    border-top-color: #FBF7F0; border-radius: 50%;
+    animation: spin .7s linear infinite; display: none;
+  }
+  #run-btn.running .spinner { display: inline-block; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  /* ── Raw HTML accordion ── */
+  #html-accordion { margin-top: 14px; border: 1px solid var(--hairline); background: transparent; }
+  .acc-header {
+    display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
+    user-select: none; transition: background .15s;
+  }
+  .acc-header:hover { background: var(--sunken); }
+  .acc-header .chev {
+    transition: transform .2s; color: var(--soft);
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+  .acc-header .chev::before { content: "▸ "; }
+  #html-accordion.open .acc-header .chev::before { content: "▾ "; }
+  .acc-body { display: none; padding: 0 14px 14px; }
+  #html-accordion.open .acc-body { display: block; }
+  #custom-html {
+    width: 100%; min-height: 120px; background: var(--raised);
+    border: 1px solid var(--hairline); color: var(--ink); padding: 12px 14px;
+    font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.5;
+    resize: vertical; transition: border-color .15s;
+  }
+  #custom-html:focus { border-color: var(--orange); outline: none; }
+  .acc-hint { font-family: 'Lora', serif; font-style: italic; color: var(--soft); font-size: 13px; margin-top: 8px; }
+
+  /* ── Panes ── */
+  .panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
+  .pane { display: flex; flex-direction: column; }
+  .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; margin-bottom: 8px;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .pane-label .badge { color: var(--orange); font-weight: 600; }
+  .result-pane {
+    background: var(--raised); border: 1px solid var(--hairline);
+    min-height: 320px; max-height: 580px; overflow-y: auto; padding: 18px;
+    position: relative;
+  }
+  .result-pane .placeholder { color: var(--soft); font-style: italic; font-family: 'Lora', serif; }
+  .timer {
+    font-family: 'IBM Plex Mono', monospace; font-size: 13px;
+    letter-spacing: 0.08em; color: var(--ink); min-height: 22px; margin-bottom: 4px;
+  }
+  .timer .running { color: var(--green); }
+  .timer.pulpie { color: var(--orange); }
+
+  /* markdown rendering inside panes */
+  .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { color: var(--ink); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 6px; line-height: 1.25; }
+  .md h1 { font-size: 26px; } .md h2 { font-size: 22px; } .md h3 { font-size: 18px; } .md h4 { font-size: 16px; }
+  .md p { font-family: 'Lora', serif; color: var(--body-ink); margin: 8px 0; line-height: 1.6; }
+  .md ul, .md ol { margin: 8px 0 8px 22px; font-family: 'Lora', serif; color: var(--body-ink); }
+  .md li { margin: 3px 0; line-height: 1.55; }
+  .md a { color: var(--orange); }
+  .md a:hover { color: var(--orange-hover); }
+  .md code { background: var(--sunken); border: 1px solid var(--hairline); padding: 1px 5px; font-family: 'IBM Plex Mono', monospace; font-size: 0.88em; color: var(--ink); }
+  .md pre { background: var(--sunken); border: 1px solid var(--hairline); padding: 12px; overflow-x: auto; margin: 10px 0; }
+  .md pre code { background: none; border: none; padding: 0; }
+  .md blockquote { border-left: 3px solid var(--hairline); padding-left: 14px; margin: 10px 0; color: var(--body-ink); font-style: italic; font-family: 'Lora', serif; }
+  .md img { max-width: 100%; height: auto; }
+  .md table { border-collapse: collapse; margin: 10px 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
+  .md th, .md td { border: 1px solid var(--hairline); padding: 6px 10px; text-align: left; }
+  .md th { background: var(--sunken); }
+  .md hr { border: none; border-top: 1px solid var(--hairline); margin: 14px 0; }
+
+  /* verdict */
+  #verdict { margin-top: 18px; }
+  .verdict-bar {
+    font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: 0.08em;
+    padding: 14px 0; border-top: 1px solid var(--hairline); color: var(--ink);
+  }
+  .verdict-bar .speed { color: var(--orange); font-weight: 600; }
+
+  /* progress bar */
+  .progress-track { height: 3px; background: var(--sunken); margin-top: 4px; overflow: hidden; }
+  .progress-fill { height: 100%; width: 0%; background: var(--orange); transition: width .3s ease; }
+
+  /* pane action buttons */
+  .pane-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
+  .mini-btn {
+    background: var(--paper); color: var(--ink); border: 1px solid var(--hairline);
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
+    padding: 6px 10px; cursor: pointer; transition: all .15s; text-transform: uppercase;
+  }
+  .mini-btn:hover { color: var(--orange); border-color: var(--orange); }
+  .mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+  .mini-btn.active { color: var(--orange); border-color: var(--orange); background: var(--sunken); }
+
+  /* error flash */
+  .flash {
+    background: #FFF3EC; color: #8A2E16; border: 1px solid var(--orange);
+    padding: 12px 14px; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
+    margin-top: 16px; display: none;
+  }
+  .flash.show { display: block; }
+
+  /* bench well */
+  #bench-well { background: var(--sunken); border: 1px solid var(--hairline); padding: 20px 24px; margin-top: 28px; }
+  #bench-well .label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--soft); margin-bottom: 12px; }
+  #bench-well table { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 13px; border-collapse: collapse; }
+  #bench-well td { padding: 6px 0; }
+  #bench-well td.win { color: var(--orange); font-weight: 600; }
+  #bench-well .tag { color: var(--soft); padding-left: 12px; }
+  #bench-well .note { font-family: 'Lora', serif; font-style: italic; color: var(--body-ink); margin-top: 12px; }
+
+  /* footer */
+  #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;
+    margin-top: 32px; padding-bottom: 8px;
+  }
+  #footer-mono a { color: var(--ink); text-decoration: none; }
+  #footer-mono a:hover { color: var(--orange); }
+
+  /* responsiveness */
+  @media (max-width: 820px) {
+    .wrap { padding: 24px 18px; }
+    #headline h1 { font-size: 34px; }
+    #lead { font-size: 17px; }
+    .panes { grid-template-columns: 1fr; }
+    #input-row { flex-direction: column; }
+    #example-select, #run-btn { flex: 1; width: 100%; min-width: 0; }
+  }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <!-- Header -->
+  <div id="header-block">
+    <div id="eyebrow">FEYN · CONTENT EXTRACTION · ENCODER VS DECODER</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 class="pill connecting" id="conn-pill">
+      <span class="dot"></span><span id="conn-text">CONNECTING</span>
+    </div>
+  </div>
+
+  <!-- Input -->
+  <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" class="primary">
+      <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">
+      <span class="chev">OR PASTE RAW HTML</span>
+    </div>
+    <div class="acc-body">
+      <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.</div>
+    </div>
+  </div>
+
+  <!-- Panes -->
+  <div class="panes">
+    <div class="pane">
+      <div class="pane-label">PULPIE <span class="badge">ORANGE-SMALL · 210M · ENCODER</span></div>
+      <div class="timer pulpie" id="pulpie-timer"></div>
+      <div class="result-pane" id="pulpie-pane">
+        <div class="placeholder">One encoder forward pass over every block.</div>
+      </div>
+      <div class="pane-actions">
+        <button class="mini-btn" data-copy="pulpie">COPY MD</button>
+        <button class="mini-btn" data-diff="pulpie">SHOW DIFF</button>
+      </div>
+    </div>
+    <div class="pane">
+      <div class="pane-label">DRIPPER <span class="badge">0.6B · DECODER</span></div>
+      <div class="timer" id="dripper-timer"></div>
+      <div class="result-pane" id="dripper-pane">
+        <div class="placeholder">The same labels, one token at a time.</div>
+      </div>
+      <div class="pane-actions">
+        <button class="mini-btn" data-copy="dripper">COPY MD</button>
+        <button class="mini-btn" data-diff="dripper">SHOW DIFF</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="progress-track"><div class="progress-fill" id="progress-fill"></div></div>
+  <div id="verdict"></div>
+  <div class="flash" id="flash"></div>
+
+  <!-- Bench -->
+  <div id="bench-well">
+    <div class="label">WEBMAINBENCH · 6,647 PAGES · ROUGE-5 F1</div>
+    <table>
+      <tr><td>pulpie orange-small</td><td>210M</td><td class="win">0.862</td><td class="tag">13.7 pg/s on L4</td></tr>
+      <tr><td>dripper (MinerU-HTML)</td><td>0.6B</td><td>0.864</td><td class="tag">0.68 pg/s on L4</td></tr>
+      <tr><td>trafilatura</td><td>—</td><td>0.619</td><td class="tag">—</td></tr>
+    </table>
+    <div class="note">Same quality. ~$7,900 to clean 1B pages, versus ~$159,000.</div>
+  </div>
+
+  <!-- Footer -->
+  <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>
+</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 });
+
+  // ── DOM refs ──
+  const $ = (id) => document.getElementById(id);
+  const runBtn = $("run-btn"), btnLabel = runBtn.querySelector(".btn-label");
+  const exampleSelect = $("example-select"), customHtml = $("custom-html");
+  const pulpiePane = $("pulpie-pane"), dripperPane = $("dripper-pane");
+  const pulpieTimer = $("pulpie-timer"), dripperTimer = $("dripper-timer");
+  const verdictEl = $("verdict"), flashEl = $("flash"), progressFill = $("progress-fill");
+  const connPill = $("conn-pill"), connText = $("conn-text");
+
+  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>',
+  };
+
+  // latest raw markdown, kept for copy/diff
+  let lastMd = { pulpie: "", dripper: "" };
+  let lastJob = null;
+
+  function renderMarkdown(md) {
+    if (!md) return "";
+    const html = marked.parse(md);
+    return DOMPurify.sanitize(html);
+  }
+
+  function setPane(pane, md, isRaw) {
+    if (!md) { pane.innerHTML = ""; return; }
+    // Backend sends timer HTML and verdict HTML inline; panes receive markdown text.
+    pane.innerHTML = isRaw ? md : renderMarkdown(md);
+  }
+
+  function setRunning(on) {
+    runBtn.classList.toggle("running", on);
+    runBtn.disabled = on;
+    btnLabel.textContent = on ? "EXTRACTING…" : "EXTRACT →";
+  }
+
+  function showError(msg) {
+    flashEl.textContent = msg;
+    flashEl.classList.add("show");
+  }
+  function clearError() { flashEl.classList.remove("show"); flashEl.textContent = ""; }
+
+  function setProgress(pct) { progressFill.style.width = Math.max(0, Math.min(100, pct)) + "%"; }
+
+  function resetPanes() {
+    pulpiePane.innerHTML = PLACEHOLDERS.pulpie;
+    dripperPane.innerHTML = PLACEHOLDERS.dripper;
+    pulpieTimer.innerHTML = "";
+    dripperTimer.innerHTML = "";
+    verdictEl.innerHTML = "";
+    lastMd = { pulpie: "", dripper: "" };
+    setProgress(0);
+    clearError();
+  }
+
+  // ── Streaming record normalizer (robust to dict or [dict] shapes) ──
+  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 item of d) {
+        if (item && typeof item === "object" && "pulpie_md" in item) return item;
+      }
+    }
+    return null;
+  }
+
+  function applyRecord(rec) {
+    if (!rec) return;
+    if (rec.pulpie_md !== undefined && rec.pulpie_md !== "") {
+      lastMd.pulpie = rec.pulpie_md;
+      setPane(pulpiePane, rec.pulpie_md);
+    }
+    if (rec.dripper_md !== undefined && rec.dripper_md !== "") {
+      lastMd.dripper = rec.dripper_md;
+      setPane(dripperPane, rec.dripper_md);
+    }
+    if (rec.pulpie_timer !== undefined) pulpieTimer.innerHTML = rec.pulpie_timer;
+    if (rec.dripper_timer !== undefined) dripperTimer.innerHTML = rec.dripper_timer;
+    if (rec.verdict !== undefined) verdictEl.innerHTML = rec.verdict;
+    // crude progress proxy: pulpie done = 40%, dripper running fills to 90%, final = 100%
+    if (rec.pulpie_md && !rec.dripper_md) setProgress(40);
+    else if (rec.dripper_md && rec.verdict) setProgress(100);
+    else if (rec.dripper_md) setProgress(90);
+  }
+
+  // ── Connect client ──
+  let client = null;
+  try {
+    client = await Client.connect(window.location.origin);
+    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 exampleName = exampleSelect.value;
+    const custom = customHtml.value.trim();
+    const params = { example_name: exampleName, custom_html: custom };
+
+    try {
+      // submit() returns a streaming Job; iterating delivers records as the
+      // generator yields them (live tokens + running timers). If streaming is
+      // unavailable on this client version, the job still resolves with the
+      // final record — applyRecord is idempotent and converges either way.
+      const job = client.submit("/race", params);
+      const iter = (typeof job[Symbol.asyncIterator] === "function")
+        ? job
+        : (job && typeof job.then === "function" ? await job : null);
+
+      if (iter && typeof iter[Symbol.asyncIterator] === "function") {
+        for await (const msg of iter) {
+          // msg may be { type, data } (gradio job) or the record itself
+          const payload = (msg && msg.type === "data" && msg.data !== undefined) ? msg.data
+                       : (msg && msg.data !== undefined ? msg.data : msg);
+          applyRecord(normalizeRecord(payload));
+        }
+      } else if (iter) {
+        applyRecord(normalizeRecord(iter));
+      } else if (job && job.data !== undefined) {
+        applyRecord(normalizeRecord(job.data));
+      } else {
+        applyRecord(normalizeRecord(job));
+      }
+      if (!verdictEl.innerHTML) setProgress(100);
+    } catch (e) {
+      showError("Race failed: " + (e?.message || e));
+      setProgress(0);
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  runBtn.addEventListener("click", run);
+
+  // Enter on the select runs; Ctrl/Cmd+Enter in the textarea runs.
+  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");
+  $("acc-toggle").addEventListener("click", () => acc.classList.toggle("open"));
+  $("acc-toggle").addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); acc.classList.toggle("open"); }
+  });
+
+  // ── Copy / Diff ──
+  document.querySelectorAll("[data-copy]").forEach((btn) => {
+    btn.addEventListener("click", async () => {
+      const which = btn.getAttribute("data-copy");
+      const text = lastMd[which];
+      if (!text) return;
+      try { await navigator.clipboard.writeText(text); btn.textContent = "COPIED ✓"; }
+      catch { btn.textContent = "COPY FAILED"; }
+      setTimeout(() => (btn.textContent = "COPY MD"), 1400);
+    });
+  });
+
+  document.querySelectorAll("[data-diff]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const which = btn.getAttribute("data-diff");
+      const other = which === "pulpie" ? "dripper" : "pulpie";
+      if (!lastMd[which] || !lastMd[other]) return;
+      const a = lastMd.pulpie, b = lastMd.dripper;
+      const same = a.trim() === b.trim();
+      const targetPane = which === "pulpie" ? pulpiePane : dripperPane;
+      if (same) {
+        targetPane.innerHTML = renderMarkdown(lastMd[which]) +
+          '<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</div>';
+        btn.classList.add("active");
+        setTimeout(() => { btn.classList.remove("active"); btn.textContent = "SHOW DIFF"; }, 2000);
+      } else {
+        const diff = lineDiff(a, b);
+        targetPane.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;">' +
+          escapeHtml(diff) + "</pre>";
+      }
+      btn.textContent = same ? "IDENTICAL" : "TOGGLE BACK";
+      btn.addEventListener("click", function revert() {
+        if (lastMd[which]) targetPane.innerHTML = renderMarkdown(lastMd[which]);
+        btn.textContent = "SHOW DIFF";
+        btn.removeEventListener("click", revert);
+      }, { once: true });
+    });
+  });
+
+  // minimal LCS line diff for the diff view
+  function lineDiff(a, b) {
+    const la = a.split("\n"), lb = b.split("\n");
+    const 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;");
+  }
+</script>
+</body>
+</html>