Upload folder using huggingface_hub

app.py

@@ -156,10 +156,11 @@ app = Server()
 
 @app.api(name="run_diffusiongemma")
 @spaces.GPU(duration=90, size="xlarge")
-def run_diffusiongemma(ocr_text: str, canvas_init: bool = False) -> dict:
+def run_diffusiongemma(ocr_text: str, canvas_init: bool = False, gold: str = "") -> dict:
     """Correct OCR text with DiffusionGemma. canvas_init=True seeds the first
     denoising canvas with the OCR text itself (experimental — under-corrects;
-    see the results tab) instead of random noise."""
+    see the results tab) instead of random noise. If a gold transcription is
+    supplied (demo examples), a diff against it is returned too."""
     if err := _validate(ocr_text):
         return {"error": err}
     inputs = _prepare_inputs(dg_processor, dg_model, ocr_text)
@@ -183,6 +184,7 @@ def run_diffusiongemma(ocr_text: str, canvas_init: bool = False) -> dict:
     return {
         "text": text,
         "diff": diff_segments(ocr_text.strip(), text),
+        "diff_gold": diff_segments(gold.strip(), text) if gold.strip() else None,
         "seconds": round(seconds, 2),
         "tokens_per_second": round(n_tokens / seconds, 1),
         "denoising_steps": len(streamer.snapshots),
@@ -194,7 +196,7 @@ def run_diffusiongemma(ocr_text: str, canvas_init: bool = False) -> dict:
 
 @app.api(name="run_gemma4")
 @spaces.GPU(duration=60, size="xlarge")
-def run_gemma4(ocr_text: str) -> dict:
+def run_gemma4(ocr_text: str, gold: str = "") -> dict:
     """Correct OCR text with the autoregressive Gemma-4-E4B baseline (greedy)."""
     if err := _validate(ocr_text):
         return {"error": err}
@@ -208,6 +210,7 @@ def run_gemma4(ocr_text: str) -> dict:
     return {
         "text": text,
         "diff": diff_segments(ocr_text.strip(), text),
+        "diff_gold": diff_segments(gold.strip(), text) if gold.strip() else None,
         "seconds": round(seconds, 2),
         "tokens_per_second": round(n_tokens / seconds, 1),
         "error": None,
@@ -225,18 +228,22 @@ async def homepage():
 @app.get("/data/examples")
 async def get_examples():
     examples = json.loads((HERE / "examples.json").read_text())
-    cached = {}
+    cached, golds = {}, {}
     cached_path = HERE / "examples_cached.json"
     if cached_path.exists():
         for e in json.loads(cached_path.read_text()):
             for m, out in e["output"].items():
                 out.pop("_raw", None)
             cached[e["id"]] = e["output"]
+            golds[e["id"]] = e.get("gold", "")
     for e in examples:
         e["cached"] = cached.get(e["id"])
+        e["gold"] = golds.get(e["id"], "")
         if e["cached"]:
             for m, out in e["cached"].items():
                 out["diff"] = diff_segments(e["ocr_input"].strip(), out["text"])
+                if e["gold"]:
+                    out["diff_gold"] = diff_segments(e["gold"].strip(), out["text"])
     return JSONResponse(examples)
 
 

index.html

@@ -19,118 +19,123 @@
     --ochre-edge: #a8842a;
     --green-ink: #2e5d34;
     --red-ink: #9c2b22;
-    --col-gap: 2.5rem;
   }
   * { box-sizing: border-box; }
   html { background: #d9cdaf; }
   body {
-    margin: 0 auto;
-    max-width: 1180px;
-    padding: 2.2rem 2.4rem 4rem;
+    margin: 0 auto; max-width: 1080px; padding: 2rem 2.2rem 3.5rem;
     background:
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
       var(--paper);
     color: var(--ink);
     font-family: "Old Standard TT", "Iowan Old Style", Georgia, serif;
-    font-size: 17px;
-    line-height: 1.55;
-    box-shadow: 0 0 60px rgba(0,0,0,.35);
-    min-height: 100vh;
+    font-size: 17px; line-height: 1.55;
+    box-shadow: 0 0 50px rgba(0,0,0,.3); min-height: 100vh;
   }
 
   /* ---------- masthead ---------- */
-  header { text-align: center; animation: settle .7s ease-out both; }
-  .gazette-name {
-    font-family: "UnifrakturCook", serif;
-    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
-    margin: 0;
-    letter-spacing: .01em;
-  }
-  .gazette-name .amp { color: var(--oxblood); }
+  header { text-align: center; animation: settle .6s ease-out both; }
+  .gazette-name { font-family: "UnifrakturCook", serif; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0; }
   .dateline {
-    display: flex; align-items: center; gap: 1rem;
-    margin: .65rem 0 0;
-    font-variant: small-caps; letter-spacing: .22em; font-size: .8rem; color: var(--ink-soft);
+    display: flex; align-items: center; gap: 1rem; margin: .5rem 0 0;
+    font-variant: small-caps; letter-spacing: .2em; font-size: .78rem; color: var(--ink-soft);
   }
   .dateline::before, .dateline::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
-  .double-rule { border: 0; border-top: 3px double var(--rule); margin: .8rem 0 0; }
-  .standfirst {
-    max-width: 62ch; margin: 1.1rem auto 0; font-style: italic; color: var(--ink-soft); font-size: 1.02rem;
-  }
+  .double-rule { border: 0; border-top: 3px double var(--rule); margin: .7rem 0 0; }
+  .standfirst { max-width: 60ch; margin: .9rem auto 0; font-style: italic; color: var(--ink-soft); font-size: .98rem; }
   .standfirst a { color: var(--oxblood); }
 
-  /* ---------- composing desk ---------- */
-  .desk { margin-top: 2rem; animation: settle .7s .12s ease-out both; }
-  .desk-head {
-    font-variant: small-caps; letter-spacing: .3em; font-size: .78rem;
-    color: var(--ink-soft); text-align: center; margin-bottom: .8rem;
-  }
-  .desk-head::before { content: "❧ "; color: var(--oxblood); }
-  .desk-head::after { content: " ☙"; color: var(--oxblood); }
-  .chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
+  /* ---------- desk ---------- */
+  .desk { margin-top: 1.7rem; animation: settle .6s .1s ease-out both; }
+  .chips { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
   .chip {
-    font-family: inherit; font-size: .82rem; cursor: pointer;
-    background: transparent; color: var(--ink);
-    border: 1px solid var(--rule); border-radius: 0; padding: .3rem .7rem;
-    transition: background .15s, color .15s;
+    font-family: inherit; font-size: .8rem; cursor: pointer; background: transparent; color: var(--ink);
+    border: 1px solid var(--rule); padding: .28rem .65rem; transition: background .15s, color .15s;
   }
   .chip:hover { background: var(--ink); color: var(--paper); }
   .chip.active { background: var(--oxblood); color: var(--paper); border-color: var(--oxblood); }
   textarea {
-    width: 100%; min-height: 9.5rem; margin-top: 1rem; padding: 1rem 1.1rem;
-    font-family: "Special Elite", "Courier New", monospace; font-size: .92rem; line-height: 1.7;
+    width: 100%; min-height: 7.5rem; margin-top: .9rem; padding: .9rem 1rem;
+    font-family: "Special Elite", "Courier New", monospace; font-size: .9rem; line-height: 1.65;
     color: var(--ink); background: var(--paper-deep);
     border: 1px solid var(--rule); outline: none; resize: vertical;
-    box-shadow: inset 0 1px 6px rgba(0,0,0,.12);
+    box-shadow: inset 0 1px 5px rgba(0,0,0,.1);
   }
   textarea:focus { border-color: var(--oxblood); }
-  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: .9rem; }
+  .authority { margin-top: .7rem; border: 1px solid var(--rule); background: var(--paper-deep); display: none; }
+  .authority.visible { display: block; }
+  .authority summary { cursor: pointer; padding: .4rem .8rem; font-variant: small-caps; letter-spacing: .15em; font-size: .76rem; color: var(--ink-soft); }
+  .authority .gold-text { padding: 0 1rem .7rem; font-size: .93rem; line-height: 1.65; }
+  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: .8rem; }
   .run-btn {
-    font-family: inherit; font-variant: small-caps; letter-spacing: .18em; font-size: 1rem;
+    font-family: inherit; font-variant: small-caps; letter-spacing: .15em; font-size: 1rem;
     background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
-    padding: .55rem 1.6rem; cursor: pointer; transition: background .15s, transform .05s;
+    padding: .5rem 1.5rem; cursor: pointer; transition: background .15s;
   }
   .run-btn:hover { background: var(--oxblood); border-color: var(--oxblood); }
-  .run-btn:active { transform: translateY(1px); }
   .run-btn[disabled] { opacity: .45; cursor: wait; }
-  label.toggle {
-    display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink-soft); cursor: pointer;
-  }
+  label.toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-soft); cursor: pointer; }
   label.toggle input { accent-color: var(--oxblood); }
-  .toggle .tag {
-    font-variant: small-caps; font-size: .68rem; letter-spacing: .12em;
-    border: 1px solid var(--ochre-edge); color: var(--ochre-edge); padding: 0 .35rem;
-  }
-  .charcount { margin-left: auto; font-size: .78rem; color: var(--ink-soft); font-variant: small-caps; letter-spacing: .1em; }
+  .charcount { margin-left: auto; font-size: .76rem; color: var(--ink-soft); }
   .charcount.over { color: var(--red-ink); }
 
-  /* ---------- columns ---------- */
-  .columns {
-    display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--col-gap);
-    margin-top: 2.4rem; position: relative; animation: settle .7s .22s ease-out both;
+  /* ---------- tabs ---------- */
+  .tabs { display: flex; justify-content: center; gap: 0; margin-top: 2rem; border-bottom: 3px double var(--rule); animation: settle .6s .18s ease-out both; }
+  .tabs button {
+    font-family: inherit; font-variant: small-caps; letter-spacing: .14em; font-size: .92rem;
+    background: transparent; color: var(--ink-soft); border: 0; padding: .5rem 1.3rem; cursor: pointer;
+    border-bottom: 3px solid transparent; margin-bottom: -3px;
   }
-  .columns::before {
-    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
-    border-left: 1px solid var(--rule);
+  .tabs button.active { color: var(--ink); border-bottom-color: var(--oxblood); font-weight: 700; }
+  .pane { display: none; padding-top: 1.5rem; }
+  .pane.active { display: block; }
+
+  /* ---------- the press (hero) ---------- */
+  .press-stage { max-width: 760px; margin: 0 auto; }
+  .press-status {
+    display: flex; justify-content: space-between; align-items: baseline;
+    font-variant: small-caps; letter-spacing: .15em; font-size: .78rem; color: var(--ink-soft); min-height: 1.6rem;
   }
-  @media (max-width: 760px) {
-    .columns { grid-template-columns: 1fr; gap: 2.2rem; }
-    .columns::before { display: none; }
+  .press-status b { font-size: 1.1rem; color: var(--oxblood); font-variant: normal; letter-spacing: 0; }
+  .press-canvas {
+    margin-top: .5rem; padding: 1.1rem 1.2rem; min-height: 11rem;
+    background: var(--paper-deep); border: 1px solid var(--rule);
+    font-size: 1rem; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word;
+    box-shadow: inset 0 1px 6px rgba(0,0,0,.08);
   }
-  .col-head { border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); padding: .45rem 0 .4rem; text-align: center; }
-  .col-head h2 { margin: 0; font-size: 1.25rem; letter-spacing: .04em; font-weight: 700; }
-  .col-head .col-sub { font-variant: small-caps; letter-spacing: .25em; font-size: .7rem; color: var(--ink-soft); }
-  .col-head .col-sub a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-soft); }
-  .statline {
-    display: flex; justify-content: center; gap: 1.6rem; padding: .55rem 0;
-    border-bottom: 1px solid var(--rule); font-size: .8rem; font-variant: small-caps; letter-spacing: .08em;
-    color: var(--ink-soft); min-height: 2.2rem; align-items: baseline;
+  .press-canvas.settling { font-family: "Special Elite", monospace; font-size: .88rem; }
+  .press-canvas .placeholder { color: var(--ink-soft); font-style: italic; opacity: .75; }
+  .press-controls { display: flex; align-items: center; gap: .9rem; margin-top: .6rem; }
+  .press-controls input[type=range] { flex: 1; accent-color: var(--oxblood); }
+  .press-controls button {
+    font-family: inherit; background: transparent; border: 1px solid var(--rule); cursor: pointer;
+    font-size: .8rem; padding: .2rem .7rem;
+  }
+  .press-stats { text-align: center; margin-top: .8rem; font-size: .85rem; color: var(--ink-soft); min-height: 1.4rem; }
+  .press-stats b { color: var(--ink); font-size: 1.05rem; }
+
+  /* ---------- comparison ---------- */
+  .mode-switch { display: flex; justify-content: center; margin-bottom: 1.2rem; }
+  .mode-switch button {
+    font-family: inherit; font-variant: small-caps; letter-spacing: .1em; font-size: .76rem;
+    background: transparent; color: var(--ink); border: 1px solid var(--rule); padding: .28rem .8rem; cursor: pointer;
   }
-  .statline b { font-size: 1.25rem; color: var(--ink); font-variant: normal; letter-spacing: 0; }
-  .statline .cached-tag { color: var(--oxblood); font-style: italic; font-variant: normal; letter-spacing: 0; }
-  .proof {
-    padding: 1rem .2rem 0; min-height: 8rem; font-size: 1rem; line-height: 1.75; word-wrap: break-word;
+  .mode-switch button.active { background: var(--ink); color: var(--paper); }
+  .mode-switch button[disabled] { opacity: .4; cursor: not-allowed; }
+  .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; position: relative; }
+  .columns::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--rule); }
+  @media (max-width: 720px) { .columns { grid-template-columns: 1fr; gap: 2rem; } .columns::before { display: none; } }
+  .col-head { border-bottom: 1px solid var(--rule); padding-bottom: .35rem; text-align: center; }
+  .col-head h2 { margin: 0; font-size: 1.15rem; }
+  .col-head .col-sub { font-size: .74rem; color: var(--ink-soft); }
+  .col-head .col-sub a { color: inherit; }
+  .statline {
+    display: flex; justify-content: center; gap: 1.4rem; padding: .5rem 0; border-bottom: 1px solid var(--rule);
+    font-size: .78rem; color: var(--ink-soft); min-height: 2rem; align-items: baseline;
   }
+  .statline b { font-size: 1.15rem; color: var(--ink); }
+  .statline .cached-tag { color: var(--oxblood); font-style: italic; }
+  .proof { padding: .9rem .1rem 0; min-height: 7rem; font-size: .98rem; line-height: 1.75; word-wrap: break-word; }
   .proof .placeholder { color: var(--ink-soft); font-style: italic; opacity: .7; }
   .proof .spinner { font-style: italic; color: var(--oxblood); }
   .proof .spinner::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@@ -138,48 +143,25 @@
   .seg-changed { background: var(--ochre-bg); border-bottom: 2px solid var(--ochre-edge); }
   .seg-added { color: var(--green-ink); border-bottom: 2px solid var(--green-ink); font-weight: 700; }
   .seg-removed { color: var(--red-ink); text-decoration: line-through; opacity: .75; }
-  .error-box {
-    border: 1px solid var(--red-ink); color: var(--red-ink); padding: .6rem .9rem; font-style: italic; margin-top: 1rem;
-  }
-
-  /* ---------- press (denoising scrubber) ---------- */
-  .press { margin-top: 1.4rem; border-top: 1px solid var(--rule); padding-top: .8rem; display: none; }
-  .press.visible { display: block; }
-  .press .press-head { font-variant: small-caps; letter-spacing: .2em; font-size: .72rem; color: var(--ink-soft); display: flex; justify-content: space-between; }
-  .press input[type=range] { width: 100%; accent-color: var(--oxblood); margin: .5rem 0; }
-  .press .canvas-view {
-    font-family: "Special Elite", monospace; font-size: .8rem; line-height: 1.65;
-    background: var(--paper-deep); border: 1px dashed var(--rule);
-    padding: .8rem .9rem; min-height: 5.5rem; max-height: 14rem; overflow-y: auto; white-space: pre-wrap;
-  }
-
-  /* ---------- legend ---------- */
-  .legend { display: flex; gap: 1.6rem; justify-content: center; margin-top: 2rem; font-size: .8rem; color: var(--ink-soft); flex-wrap: wrap; }
-  .legend span.swatch { padding: 0 .4rem; }
+  .error-box { border: 1px solid var(--red-ink); color: var(--red-ink); padding: .55rem .85rem; font-style: italic; margin-top: .9rem; }
+  .legend { display: flex; gap: 1.4rem; justify-content: center; margin-top: 1.6rem; font-size: .78rem; color: var(--ink-soft); flex-wrap: wrap; }
 
-  /* ---------- results ---------- */
-  .results { margin-top: 3rem; animation: settle .7s .3s ease-out both; }
-  .section-head {
-    text-align: center; border-top: 3px double var(--rule); padding-top: .6rem; margin-bottom: 1.1rem;
-  }
-  .section-head h2 { margin: 0; font-size: 1.45rem; letter-spacing: .03em; }
-  .section-head .col-sub { font-variant: small-caps; letter-spacing: .25em; font-size: .72rem; color: var(--ink-soft); }
-  table { border-collapse: collapse; margin: 0 auto; font-size: .92rem; }
-  th, td { padding: .45rem .9rem; border-bottom: 1px solid #00000022; text-align: right; }
+  /* ---------- ledger ---------- */
+  table { border-collapse: collapse; margin: 0 auto; font-size: .9rem; }
+  th, td { padding: .42rem .85rem; border-bottom: 1px solid #00000022; text-align: right; }
   th:first-child, td:first-child { text-align: left; }
-  thead th { border-bottom: 2px solid var(--rule); font-variant: small-caps; letter-spacing: .06em; font-weight: 700; }
-  tbody tr:first-child td { color: var(--ink-soft); font-style: italic; }
-  tbody tr:nth-child(2) td:first-child::before { content: "★ "; color: var(--oxblood); }
-  .footnotes { max-width: 75ch; margin: 1.3rem auto 0; font-size: .85rem; color: var(--ink-soft); }
+  thead th { border-bottom: 2px solid var(--rule); font-variant: small-caps; letter-spacing: .05em; }
+  thead th .hint { display: block; font-variant: normal; letter-spacing: 0; font-weight: 400; font-style: italic; font-size: .68rem; color: var(--ink-soft); }
+  tbody tr.baseline td { color: var(--ink-soft); font-style: italic; }
+  tbody tr.dimmed td { color: var(--ink-soft); opacity: .7; }
+  td.win { font-weight: 700; }
+  .footnotes { max-width: 72ch; margin: 1.2rem auto 0; font-size: .84rem; color: var(--ink-soft); }
   .footnotes p { margin: .3rem 0; }
 
-  footer {
-    margin-top: 3.5rem; border-top: 3px double var(--rule); padding-top: 1rem;
-    text-align: center; font-size: .82rem; color: var(--ink-soft);
-  }
+  footer { margin-top: 3rem; border-top: 3px double var(--rule); padding-top: .9rem; text-align: center; font-size: .8rem; color: var(--ink-soft); }
   footer a { color: var(--oxblood); }
 
-  @keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
+  @keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
   @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
 </style>
 </head>
@@ -187,77 +169,95 @@
 
 <header>
   <h1 class="gazette-name">The Post‑OCR Gazette</h1>
-  <div class="dateline"><span>Vol. I — Diffusion <span style="font-variant:normal">vs</span> Autoregression — Price one GPU‑second</span></div>
+  <div class="dateline"><span>Diffusion <span style="font-variant:normal">vs</span> Autoregression · June 2026</span></div>
   <hr class="double-rule" />
   <p class="standfirst">
-    In which <a href="https://huggingface.co/google/diffusiongemma-26B-A4B-it">DiffusionGemma‑26B‑A4B</a>,
-    an experimental block‑diffusion language model, and
-    <a href="https://huggingface.co/google/gemma-4-E4B-it">Gemma‑4‑E4B</a>, its autoregressive cousin,
-    are set against one another in the correction of nineteenth‑century newspaper OCR.
-    Marks upon the proofs show what each model <em>changed</em> in your text.
+    Watch <a href="https://huggingface.co/google/diffusiongemma-26B-A4B-it">DiffusionGemma</a>, an experimental
+    diffusion language model, correct 19th‑century newspaper OCR — step by step — and compare it against
+    autoregressive <a href="https://huggingface.co/google/gemma-4-E4B-it">Gemma‑4‑E4B</a>.
   </p>
 </header>
 
 <section class="desk">
-  <div class="desk-head">The Composing Desk</div>
   <div class="chips" id="chips"></div>
   <textarea id="ocr-input" spellcheck="false" placeholder="Paste noisy OCR text here, or pick a passage above…"></textarea>
+  <details class="authority" id="authority">
+    <summary>Human transcription of this passage</summary>
+    <div class="gold-text" id="gold-text"></div>
+  </details>
   <div class="controls">
     <button class="run-btn" id="run">Correct the Proofs</button>
     <label class="toggle">
       <input type="checkbox" id="canvas-toggle" />
-      seed canvas with OCR text <span class="tag">experimental — under‑corrects</span>
+      seed canvas with OCR text <em style="font-size:.78em">(experimental — barely edits)</em>
     </label>
     <span class="charcount" id="charcount"></span>
   </div>
 </section>
 
-<section class="columns">
-  <div class="col" id="col-dg">
-    <div class="col-head">
-      <h2>The Diffusionist</h2>
-      <div class="col-sub"><a href="https://huggingface.co/google/diffusiongemma-26B-A4B-it">DiffusionGemma‑26B‑A4B‑it</a> · denoises 256 tokens in parallel</div>
+<nav class="tabs">
+  <button class="active" data-pane="pane-press">The Press</button>
+  <button data-pane="pane-compare">Side by Side</button>
+  <button data-pane="pane-ledger">The Ledger</button>
+</nav>
+
+<section class="pane active" id="pane-press">
+  <div class="press-stage">
+    <div class="press-status">
+      <span id="press-label">the denoising press</span>
+      <span id="press-step"></span>
     </div>
-    <div class="statline" id="stats-dg"><span class="placeholder">awaiting copy</span></div>
-    <div class="proof" id="proof-dg"><span class="placeholder">The diffusion model’s corrected proof will appear here.</span></div>
-    <div class="press" id="press">
-      <div class="press-head"><span>The Press — denoising, step by step</span><span id="press-step"></span></div>
-      <input type="range" id="press-slider" min="0" max="0" value="0" step="1" />
-      <div class="canvas-view" id="press-canvas"></div>
+    <div class="press-canvas settling" id="press-canvas"><span class="placeholder">Run a passage and watch DiffusionGemma denoise all 256 tokens in parallel — from rough draft to corrected proof in a handful of steps.</span></div>
+    <div class="press-controls">
+      <button id="press-replay" disabled>replay</button>
+      <input type="range" id="press-slider" min="0" max="0" value="0" step="1" disabled />
     </div>
+    <div class="press-stats" id="press-stats"></div>
+  </div>
+</section>
+
+<section class="pane" id="pane-compare">
+  <div class="mode-switch" id="mode-switch">
+    <button class="active" data-mode="diff">marks vs the OCR input</button>
+    <button data-mode="diff_gold" id="gold-mode-btn" disabled>marks vs the human transcription</button>
   </div>
-  <div class="col" id="col-g4">
-    <div class="col-head">
-      <h2>The Autoregressive</h2>
-      <div class="col-sub"><a href="https://huggingface.co/google/gemma-4-E4B-it">Gemma‑4‑E4B‑it</a> · one token after another, greedily</div>
+  <div class="columns">
+    <div class="col">
+      <div class="col-head">
+        <h2>The Diffusionist</h2>
+        <div class="col-sub"><a href="https://huggingface.co/google/diffusiongemma-26B-A4B-it">DiffusionGemma‑26B‑A4B</a> · parallel denoising</div>
+      </div>
+      <div class="statline" id="stats-dg"><span class="placeholder">awaiting copy</span></div>
+      <div class="proof" id="proof-dg"><span class="placeholder">Corrected proof appears here.</span></div>
+    </div>
+    <div class="col">
+      <div class="col-head">
+        <h2>The Autoregressive</h2>
+        <div class="col-sub"><a href="https://huggingface.co/google/gemma-4-E4B-it">Gemma‑4‑E4B</a> · token by token, greedy</div>
+      </div>
+      <div class="statline" id="stats-g4"><span class="placeholder">awaiting copy</span></div>
+      <div class="proof" id="proof-g4"><span class="placeholder">Corrected proof appears here.</span></div>
     </div>
-    <div class="statline" id="stats-g4"><span class="placeholder">awaiting copy</span></div>
-    <div class="proof" id="proof-g4"><span class="placeholder">The autoregressive model’s corrected proof will appear here.</span></div>
+  </div>
+  <div class="legend">
+    <span><span class="seg-changed">changed</span></span>
+    <span><span class="seg-added">added</span></span>
+    <span><span class="seg-removed">removed</span></span>
+    <span id="legend-note">relative to the OCR input</span>
   </div>
 </section>
 
-<div class="legend">
-  <span><span class="swatch seg-changed">changed</span> — altered from the input</span>
-  <span><span class="swatch seg-added">added</span> — inserted text</span>
-  <span><span class="swatch seg-removed">removed</span> — deleted from the input</span>
-</div>
-
-<section class="results">
-  <div class="section-head">
-    <h2>The Ledger</h2>
-    <div class="col-sub">75 passages of BLN600 · A100‑80GB · full methodology in the repository</div>
-  </div>
+<section class="pane" id="pane-ledger">
   <div id="results-table"><p style="text-align:center;font-style:italic">Fetching the ledger…</p></div>
   <div class="footnotes" id="results-notes"></div>
 </section>
 
 <footer>
   <p>
-    Benchmark texts: <a href="https://doi.org/10.15131/shef.data.25439023">BLN600</a> (CC‑BY‑NC — metrics only republished here).
-    Demo passages: ICDAR2019 post‑OCR (CC‑BY‑4.0). DiffusionGemma is experimental and one day old at press time;
-    its sampler has no greedy mode, so the comparison is defaults‑vs‑greedy. Single run, no significance testing.
+    Benchmark: 75 passages of <a href="https://doi.org/10.15131/shef.data.25439023">BLN600</a> (CC‑BY‑NC; metrics only republished).
+    Demo passages: ICDAR2019 (CC‑BY‑4.0). DiffusionGemma is experimental; single run, no significance testing.
   </p>
-  <p>Set in Old Standard &amp; Special Elite · powered by ZeroGPU · by <a href="https://huggingface.co/davanstrien">davanstrien</a></p>
+  <p>Powered by ZeroGPU · by <a href="https://huggingface.co/davanstrien">davanstrien</a></p>
 </footer>
 
 <script type="module">
@@ -265,11 +265,21 @@ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.m
 
 const $ = (id) => document.getElementById(id);
 const MAX_CHARS = 1200;
-let client = null, examples = [], activeExample = null, snapshots = [];
+let client = null, examples = [], activeExample = null;
+let diffMode = "diff";
+let lastResults = { dg: null, g4: null };
+let snapshots = [], replayTimer = null;
 
 const connect = (async () => { client = await Client.connect(window.location.origin); })();
 
-/* ---------- helpers ---------- */
+/* ---------- tabs ---------- */
+document.querySelectorAll(".tabs button").forEach(b => b.addEventListener("click", () => {
+  document.querySelectorAll(".tabs button").forEach(x => x.classList.toggle("active", x === b));
+  document.querySelectorAll(".pane").forEach(p => p.classList.toggle("active", p.id === b.dataset.pane));
+}));
+function switchTab(paneId) { document.querySelector(`.tabs button[data-pane=${paneId}]`).click(); }
+
+/* ---------- diff rendering ---------- */
 function renderDiff(el, segs) {
   el.innerHTML = "";
   for (const s of segs) {
@@ -279,6 +289,30 @@ function renderDiff(el, segs) {
     el.appendChild(span);
   }
 }
+function renderProofs() {
+  for (const [key, el] of [["dg", $("proof-dg")], ["g4", $("proof-g4")]]) {
+    const r = lastResults[key];
+    if (!r) continue;
+    renderDiff(el, diffMode === "diff_gold" && r.diff_gold ? r.diff_gold : r.diff);
+  }
+  $("legend-note").textContent = diffMode === "diff_gold"
+    ? "relative to the human transcription (remaining errors)" : "relative to the OCR input";
+}
+function setMode(mode) {
+  diffMode = mode;
+  document.querySelectorAll("#mode-switch button").forEach(b => b.classList.toggle("active", b.dataset.mode === mode));
+  renderProofs();
+}
+document.querySelectorAll("#mode-switch button").forEach(b =>
+  b.addEventListener("click", () => { if (!b.disabled) setMode(b.dataset.mode); }));
+function setGoldAvailable(gold) {
+  const btn = $("gold-mode-btn");
+  if (gold) { btn.disabled = false; $("authority").classList.add("visible"); $("gold-text").textContent = gold; }
+  else { btn.disabled = true; $("authority").classList.remove("visible"); if (diffMode === "diff_gold") setMode("diff"); }
+}
+function currentGold() {
+  return activeExample && $("ocr-input").value === activeExample.ocr_input ? (activeExample.gold || "") : "";
+}
 function stats(el, r, extra = "") {
   el.innerHTML = `<span><b>${r.seconds}</b> s</span><span><b>${r.tokens_per_second}</b> tok/s</span>` +
     (r.denoising_steps ? `<span><b>${r.denoising_steps}</b> steps</span>` : "") + extra;
@@ -286,22 +320,41 @@ function stats(el, r, extra = "") {
 function spinner(el, msg) { el.innerHTML = `<span class="spinner">${msg}</span>`; }
 function showError(el, msg) { el.innerHTML = `<div class="error-box">${msg}</div>`; }
 
-function showSnapshots(snaps) {
+/* ---------- the press (hero replay) ---------- */
+function pressShow(i) {
+  const canvas = $("press-canvas");
+  const last = i >= snapshots.length - 1;
+  canvas.classList.toggle("settling", !last);
+  if (last && lastResults.dg) { renderDiff(canvas, lastResults.dg.diff); }
+  else { canvas.textContent = snapshots[i] || ""; }
+  $("press-step").textContent = snapshots.length ? `step ${Math.min(i + 1, snapshots.length)} of ${snapshots.length}` : "";
+  $("press-slider").value = i;
+}
+function pressReplay() {
+  if (!snapshots.length) return;
+  clearInterval(replayTimer);
+  let i = 0;
+  pressShow(0);
+  replayTimer = setInterval(() => {
+    i += 1;
+    if (i >= snapshots.length) { clearInterval(replayTimer); pressShow(snapshots.length - 1); return; }
+    pressShow(i);
+  }, 450);
+}
+function pressLoad(snaps, dgResult) {
   snapshots = snaps || [];
-  const press = $("press");
-  if (!snapshots.length) { press.classList.remove("visible"); return; }
-  press.classList.add("visible");
+  clearInterval(replayTimer);
   const slider = $("press-slider");
-  slider.max = snapshots.length - 1;
-  slider.value = snapshots.length - 1;
-  updatePress();
+  slider.disabled = $("press-replay").disabled = !snapshots.length;
+  slider.max = Math.max(snapshots.length - 1, 0);
+  $("press-stats").innerHTML = dgResult
+    ? `corrected <b>${dgResult.tokens_per_second ? "" : ""}256 tokens</b> in <b>${dgResult.denoising_steps}</b> parallel steps · <b>${dgResult.seconds}s</b>` +
+      (dgResult.canvas_init ? " · <em>OCR-seeded canvas</em>" : "")
+    : "";
+  if (snapshots.length) pressReplay();
 }
-function updatePress() {
-  const i = +$("press-slider").value;
-  $("press-step").textContent = `step ${i + 1} of ${snapshots.length}`;
-  $("press-canvas").textContent = snapshots[i] || "";
-}
-$("press-slider").addEventListener("input", updatePress);
+$("press-slider").addEventListener("input", (e) => { clearInterval(replayTimer); pressShow(+e.target.value); });
+$("press-replay").addEventListener("click", pressReplay);
 
 /* ---------- examples ---------- */
 async function loadExamples() {
@@ -317,6 +370,7 @@ async function loadExamples() {
       $("ocr-input").value = e.ocr_input;
       activeExample = e;
       updateCount();
+      setGoldAvailable(e.gold || "");
       if (e.cached) renderCached(e);
     };
     chips.appendChild(b);
@@ -325,62 +379,81 @@ async function loadExamples() {
 }
 function renderCached(e) {
   const dg = e.cached.diffusiongemma, g4 = e.cached.gemma4;
-  const tag = `<span class="cached-tag">— from the morning edition (pre‑computed)</span>`;
+  const tag = `<span class="cached-tag">— pre‑computed</span>`;
   if (dg) {
+    lastResults.dg = dg;
     stats($("stats-dg"), { seconds: dg.seconds, tokens_per_second: Math.round(dg.tokens_generated / dg.seconds), denoising_steps: dg.denoising_steps }, tag);
-    renderDiff($("proof-dg"), dg.diff);
   }
   if (g4) {
+    lastResults.g4 = g4;
     stats($("stats-g4"), { seconds: g4.seconds, tokens_per_second: Math.round(g4.tokens_generated / g4.seconds) }, tag);
-    renderDiff($("proof-g4"), g4.diff);
   }
-  showSnapshots([]);
+  renderProofs();
+  pressLoad([], null);
+  $("press-canvas").classList.add("settling");
+  $("press-canvas").innerHTML = `<span class="placeholder">Pre‑computed result loaded in the Side by Side tab — press “Correct the Proofs” to watch the denoising live.</span>`;
+  $("press-stats").innerHTML = ""; $("press-step").textContent = "";
 }
 
-/* ---------- character count ---------- */
 function updateCount() {
   const n = $("ocr-input").value.length;
   const el = $("charcount");
-  el.textContent = `${n} / ${MAX_CHARS} characters`;
+  el.textContent = `${n} / ${MAX_CHARS}`;
   el.classList.toggle("over", n > MAX_CHARS);
 }
-$("ocr-input").addEventListener("input", () => { activeExample = null; updateCount(); });
+$("ocr-input").addEventListener("input", () => { activeExample = null; updateCount(); setGoldAvailable(""); });
 updateCount();
 
 /* ---------- run ---------- */
 $("run").addEventListener("click", async () => {
   const text = $("ocr-input").value.trim();
   if (!text) return;
-  if (text.length > MAX_CHARS) { showError($("proof-dg"), `Input too long (${text.length} chars; the cap is ${MAX_CHARS} — DiffusionGemma writes a single 256‑token block).`); return; }
+  if (text.length > MAX_CHARS) {
+    switchTab("pane-press");
+    $("press-canvas").innerHTML = `<div class="error-box">Input too long (${text.length} chars; cap ${MAX_CHARS} — DiffusionGemma writes a single 256‑token block).</div>`;
+    return;
+  }
   const btn = $("run");
   btn.disabled = true;
   await connect;
-  spinner($("proof-dg"), "denoising the canvas"); $("stats-dg").innerHTML = "";
-  spinner($("proof-g4"), "queued behind the diffusionist"); $("stats-g4").innerHTML = "";
-  showSnapshots([]);
+  switchTab("pane-press");
+  clearInterval(replayTimer);
+  $("press-canvas").classList.add("settling");
+  $("press-canvas").innerHTML = `<span class="spinner" style="font-style:italic;color:var(--oxblood)">the press is running</span>`;
+  $("press-step").textContent = ""; $("press-stats").innerHTML = "";
+  spinner($("proof-dg"), "denoising"); $("stats-dg").innerHTML = "";
+  spinner($("proof-g4"), "queued"); $("stats-g4").innerHTML = "";
+  const gold = currentGold();
   try {
     const dg = (await client.predict("/run_diffusiongemma", {
-      ocr_text: text, canvas_init: $("canvas-toggle").checked,
+      ocr_text: text, canvas_init: $("canvas-toggle").checked, gold: gold,
     })).data[0];
-    if (dg.error) showError($("proof-dg"), dg.error);
+    if (dg.error) { showError($("proof-dg"), dg.error); $("press-canvas").innerHTML = `<div class="error-box">${dg.error}</div>`; }
     else {
+      lastResults.dg = dg;
       stats($("stats-dg"), dg, dg.canvas_init ? `<span class="cached-tag">— OCR‑seeded canvas</span>` : "");
-      renderDiff($("proof-dg"), dg.diff);
-      showSnapshots(dg.snapshots);
+      renderProofs();
+      pressLoad(dg.snapshots, dg);
     }
-    spinner($("proof-g4"), "composing, one token at a time");
-    const g4 = (await client.predict("/run_gemma4", { ocr_text: text })).data[0];
+    spinner($("proof-g4"), "composing, token by token");
+    const g4 = (await client.predict("/run_gemma4", { ocr_text: text, gold: gold })).data[0];
     if (g4.error) showError($("proof-g4"), g4.error);
-    else { stats($("stats-g4"), g4); renderDiff($("proof-g4"), g4.diff); }
+    else { lastResults.g4 = g4; stats($("stats-g4"), g4); renderProofs(); }
   } catch (err) {
-    showError($("proof-dg"), `The press has jammed: ${err.message || err}`);
-    $("proof-g4").innerHTML = "";
+    $("press-canvas").innerHTML = `<div class="error-box">The press has jammed: ${err.message || err}</div>`;
   } finally {
     btn.disabled = false;
   }
 });
 
-/* ---------- results ledger ---------- */
+/* ---------- ledger ---------- */
+function columnDirection(header) {
+  if (/reduction|Fix rate|tok\/s|↑/i.test(header)) return "higher";
+  if (/CER|WER|Over|Median|↓/i.test(header)) return "lower";
+  return null;
+}
+const parseNum = (c) => { const m = c.replace(/[*%]/g, "").match(/-?\d+(\.\d+)?/); return m ? parseFloat(m[0]) : null; };
+
 async function loadResults() {
   try {
     const res = await fetch("data/results");
@@ -391,16 +464,35 @@ async function loadResults() {
       const parse = (l) => l.split("|").slice(1, -1).map(c => c.trim());
       const head = parse(tableLines[0]);
       const rows = tableLines.slice(2).map(parse);
-      let html = "<table><thead><tr>" + head.map(h => `<th>${h}</th>`).join("") + "</tr></thead><tbody>";
-      for (const r of rows) html += "<tr>" + r.map(c => `<td>${c}</td>`).join("") + "</tr>";
-      html += "</tbody></table>";
-      $("results-table").innerHTML = html;
+      const isBaseline = (r) => /uncorrected/i.test(r[0]);
+      const isCanvas = (r) => /canvas/i.test(r[0]);
+      const contenders = rows.filter(r => !isBaseline(r) && !isCanvas(r));
+      const best = head.map((h, j) => {
+        const dir = columnDirection(h);
+        if (!dir || j === 0) return null;
+        const vals = contenders.map(r => parseNum(r[j])).filter(v => v !== null);
+        return vals.length ? (dir === "lower" ? Math.min(...vals) : Math.max(...vals)) : null;
+      });
+      const headHtml = head.map((h, j) => {
+        const dir = columnDirection(h);
+        return `<th>${h.replace(/[↓↑]/g, "").trim()}${dir && j > 0 ? `<span class="hint">${dir} is better</span>` : ""}</th>`;
+      }).join("");
+      let html = `<table><thead><tr>${headHtml}</tr></thead><tbody>`;
+      for (const r of rows) {
+        const cls = isBaseline(r) ? "baseline" : isCanvas(r) ? "dimmed" : "";
+        html += `<tr class="${cls}">` + r.map((c, j) => {
+          const win = cls === "" && best[j] !== null && parseNum(c) === best[j];
+          return `<td${win ? ' class="win"' : ""}>${c.replace(/\*\*/g, "")}</td>`;
+        }).join("") + "</tr>";
+      }
+      $("results-table").innerHTML = html + "</tbody></table>";
     }
     const notes = lines.filter(l => /^(Micro|Mean)/.test(l)).map(l => `<p>${l}</p>`).join("");
     $("results-notes").innerHTML = notes +
-      `<p>Over‑correction: of input characters already correct (vs the gold transcription), the share the model changed.
-        Fix rate: of input characters that were wrong, the share the model changed.
-        The OCR‑seeded‑canvas condition (toggle above) converges in 2–5 steps but barely edits — a negative result, reported honestly.</p>`;
+      `<p><b>Bold</b> marks the better of the two main models on each measure.
+        The OCR‑seeded‑canvas row is greyed out: it converges fastest but barely edits anything (a negative result),
+        so highlighting its numbers would mislead. Over‑correction: share of already‑correct characters the model changed.
+        Fix rate: share of wrong characters the model changed.</p>`;
   } catch { $("results-table").innerHTML = "<p style='text-align:center;font-style:italic'>The ledger could not be fetched.</p>"; }
 }