HTML /demo: add Benchmark visuals table and three chart figures.

Nav link to #benchmark-visuals; metric snapshot table; chart-performance-leap, chart-comparison-shift, chart-spider-benchmark with captions.

Made-with: Cursor

server/demo_page.html

@@ -507,6 +507,49 @@
       width: 100%;
       height: auto;
     }
+    .metric-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.9375rem;
+    }
+    .metric-table th,
+    .metric-table td {
+      text-align: left;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--space-border);
+      vertical-align: top;
+    }
+    .metric-table thead th {
+      font-weight: 700;
+      color: var(--ink);
+      background: var(--space-bg-elevated);
+      font-size: 0.75rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    .metric-table tbody td:first-child {
+      color: var(--ink);
+      max-width: 28ch;
+    }
+    .metric-table tbody td:last-child {
+      font-weight: 700;
+      font-variant-numeric: tabular-nums;
+      color: var(--accent);
+    }
+    .metric-table tbody tr:last-child td {
+      border-bottom: none;
+    }
+    .benchmark-chart-grid {
+      display: grid;
+      gap: 16px;
+      grid-template-columns: 1fr;
+      margin-top: 18px;
+    }
+    @media (min-width: 900px) {
+      .benchmark-chart-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+    }
     .link-list a {
       color: var(--accent);
       text-decoration: none;
@@ -590,6 +633,7 @@
         <a href="#environment">Environment</a>
         <a href="#first-training">First Training</a>
         <a href="#playground">Playground</a>
+        <a href="#benchmark-visuals">Benchmark</a>
         <a href="#evidence">Evidence</a>
         <a href="#repro">Reproduce</a>
         <a href="/gradio/">Gradio</a>
@@ -708,6 +752,56 @@ import wandb
         </div>
       </section>
 
+      <section id="benchmark-visuals" class="section" aria-labelledby="benchmark-visuals-title">
+        <div class="section-head">
+          <p class="section-id">Evidence · Charts</p>
+          <h2 id="benchmark-visuals-title">Benchmark visuals</h2>
+          <p>Metric snapshot aligned with committed charts under <code style="font-family:var(--font-mono);font-size:0.85em;background:#f1f5f9;padding:2px 6px;border-radius:4px">server/static/</code> (same figures as the Gradio page).</p>
+        </div>
+        <div class="panel">
+          <table class="metric-table" aria-label="Benchmark metric snapshot">
+            <thead>
+              <tr>
+                <th scope="col">Metric snapshot</th>
+                <th scope="col">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Spider chart: Industry baseline</td>
+                <td>48.2%</td>
+              </tr>
+              <tr>
+                <td>Spider chart: Qwen-7B base</td>
+                <td>52.4%</td>
+              </tr>
+              <tr>
+                <td>Spider chart: RL agent</td>
+                <td>78.5%</td>
+              </tr>
+              <tr>
+                <td>Performance leap chart</td>
+                <td>0.0% -&gt; 25.0% (base to RL in that run view)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="benchmark-chart-grid">
+          <figure class="proof-card">
+            <img src="/static/chart-performance-leap.png" alt="Performance leap: baseline versus RL on a Spider-style headline view" width="900" height="520" loading="lazy" decoding="async" />
+            <figcaption>Performance leap (Spider-style)</figcaption>
+          </figure>
+          <figure class="proof-card">
+            <img src="/static/chart-comparison-shift.png" alt="Comparison of models and reward distribution shift" width="900" height="520" loading="lazy" decoding="async" />
+            <figcaption>Comparison + reward shift</figcaption>
+          </figure>
+          <figure class="proof-card">
+            <img src="/static/chart-spider-benchmark.png" alt="Spider-style benchmark headline chart across industry baseline, Qwen-7B base, and RL agent" width="900" height="520" loading="lazy" decoding="async" />
+            <figcaption>Spider-style headline chart</figcaption>
+          </figure>
+        </div>
+      </section>
+
       <section id="evidence" class="section" aria-labelledby="evidence-title">
         <div class="section-head">
           <p class="section-id">Evidence · Artifacts</p>