Upload index.html with huggingface_hub

index.html

@@ -194,9 +194,15 @@
   <div class="dateline"><span>Diffusion <span style="font-variant:normal">vs</span> Autoregression · June 2026</span></div>
   <hr class="double-rule" />
   <p class="standfirst">
-    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>.
+    <a href="https://huggingface.co/google/diffusiongemma-26B-A4B-it">DiffusionGemma</a> is an experimental
+    language model that generates text by <em>denoising</em> 256 tokens in parallel rather than writing one
+    token at a time. This demo uses it to correct noisy OCR from historical newspapers, head‑to‑head against a
+    conventional autoregressive model (<a href="https://huggingface.co/google/gemma-4-E4B-it">Gemma‑4‑E4B</a>).
+  </p>
+  <p class="standfirst" style="margin-top:.5rem">
+    <b>How to use it:</b> pick a passage below (or paste your own), press <b>Correct this text</b>, and watch the
+    correction emerge step by step. On a 75‑passage benchmark the diffusion model corrected <em>more accurately</em>
+    than the autoregressive baseline — and roughly 8× faster.
   </p>
 </header>
 
@@ -215,7 +221,7 @@
     </div>
   </details>
   <div class="controls">
-    <button class="run-btn" id="run">Correct the Proofs</button>
+    <button class="run-btn" id="run">Correct this text</button>
     <label class="toggle">
       <input type="checkbox" id="canvas-toggle" />
       seed canvas with OCR text <em style="font-size:.78em">(experimental — barely edits)</em>
@@ -225,18 +231,18 @@
 </section>
 
 <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>
+  <button class="active" data-pane="pane-press">Watch it denoise</button>
+  <button data-pane="pane-compare">Side by side</button>
+  <button data-pane="pane-ledger">Benchmark results</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-label">DiffusionGemma's intermediate output at each denoising step</span>
       <span id="press-step"></span>
     </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-canvas settling" id="press-canvas"><span class="placeholder">Run a passage and watch DiffusionGemma refine all 256 tokens at once — from rough draft to corrected text in a handful of steps. The final step shows what changed, highlighted against the input.</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 />
@@ -261,19 +267,19 @@
   <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>
+        <h2>DiffusionGemma</h2>
+        <div class="col-sub"><a href="https://huggingface.co/google/diffusiongemma-26B-A4B-it">26B‑A4B‑it</a> · diffusion: denoises 256 tokens in parallel</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 class="statline" id="stats-dg"><span class="placeholder">no run yet</span></div>
+      <div class="proof" id="proof-dg"><span class="placeholder">Corrected text 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>
+        <h2>Gemma‑4‑E4B</h2>
+        <div class="col-sub"><a href="https://huggingface.co/google/gemma-4-E4B-it">E4B‑it</a> · autoregressive: one token at a time, 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 class="statline" id="stats-g4"><span class="placeholder">no run yet</span></div>
+      <div class="proof" id="proof-g4"><span class="placeholder">Corrected text appears here.</span></div>
     </div>
   </div>
   <div class="legend">
@@ -466,7 +472,7 @@ function renderCached(e) {
   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-canvas").innerHTML = `<span class="placeholder">A pre‑computed result for this example is in the Side by side tab — press “Correct this text” to run it live and watch the denoising here.</span>`;
   $("press-stats").innerHTML = ""; $("press-step").textContent = "";
 }
 
@@ -493,7 +499,7 @@ $("run").addEventListener("click", async () => {
   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-canvas").innerHTML = `<span class="spinner" style="font-style:italic;color:var(--oxblood)">denoising (the steps will replay here when it finishes)</span>`;
   $("press-step").textContent = ""; $("press-stats").innerHTML = "";
   spinner($("proof-dg"), "denoising"); $("stats-dg").innerHTML = "";
   spinner($("proof-g4"), "queued"); $("stats-g4").innerHTML = "";
@@ -515,7 +521,7 @@ $("run").addEventListener("click", async () => {
     if (g4.error) showError($("proof-g4"), g4.error);
     else { lastResults.g4 = g4; stats($("stats-g4"), g4); renderProofs(); }
   } catch (err) {
-    $("press-canvas").innerHTML = `<div class="error-box">The press has jammed: ${err.message || err}</div>`;
+    $("press-canvas").innerHTML = `<div class="error-box">Request failed: ${err.message || err}. Try again — the first request after a cold start can time out.</div>`;
   } finally {
     btn.disabled = false;
   }