Upload index.html

index.html

@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Tiny-ML Leaderboard</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
 <style>
   :root {
     --bg: #0d1117;
@@ -13,7 +14,8 @@
     --accent: #58a6ff;
     --green: #3fb950;
     --orange: #d29922;
-    --red: #f85149;
+    --compactai: #58a6ff;
+    --supralabs: #3fb950;
   }
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; background: var(--bg); color: var(--text); padding: 2rem; }
@@ -22,20 +24,27 @@
   .subtitle { color: #8b949e; margin-bottom: 2rem; font-size: .95rem; }
   .note { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 2rem; font-size: .9rem; line-height: 1.5; }
   .note a { color: var(--accent); }
+  .section-title { font-size: 1.2rem; margin: 2rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
+  .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
+  .chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
+  .chart-card.full { grid-column: 1 / -1; }
+  .chart-card h3 { font-size: .95rem; margin-bottom: .75rem; color: var(--text); }
+  .chart-card canvas { max-height: 360px; }
+  .legend { display: flex; gap: 1.5rem; margin-bottom: .75rem; font-size: .8rem; }
+  .legend-item { display: flex; align-items: center; gap: .4rem; }
+  .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
   table { width: 100%; border-collapse: collapse; font-size: .85rem; }
   th { background: var(--card); padding: .75rem .5rem; text-align: center; border: 1px solid var(--border); font-weight: 600; white-space: nowrap; }
   td { padding: .6rem .5rem; text-align: center; border: 1px solid var(--border); }
   td:first-child, th:first-child { text-align: left; padding-left: 1rem; }
   tr:hover td { background: rgba(88,166,255,.05); }
-  .group-row td { background: var(--bg); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; padding: .5rem; border-bottom: 2px solid var(--accent); color: var(--accent); }
   .org-tag { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
-  .org-compactai { background: #1f6feb33; color: #58a6ff; }
-  .org-supralabs { background: #3fb95033; color: #3fb950; }
+  .org-compactai { background: #1f6feb33; color: var(--compactai); }
+  .org-supralabs { background: #3fb95033; color: var(--supralabs); }
   .best { color: var(--green); font-weight: 700; }
   .na { color: #484f58; font-style: italic; }
   .links a { color: var(--accent); text-decoration: none; }
   .links a:hover { text-decoration: underline; }
-  .section-title { font-size: 1.2rem; margin: 2rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
   footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .8rem; color: #484f58; text-align: center; }
   footer a { color: var(--accent); }
   .methodology { margin-top: 2rem; }
@@ -43,6 +52,7 @@
   .methodology p { font-size: .85rem; line-height: 1.6; color: #8b949e; }
   @media (max-width: 768px) {
     body { padding: 1rem; }
+    .chart-grid { grid-template-columns: 1fr; }
     table { font-size: .75rem; }
     th, td { padding: .4rem .3rem; }
   }
@@ -61,7 +71,29 @@
   <small>Also see the <a href="https://lh-tech.de/ai/compare-tiny-models.html" target="_blank">independent comparison page</a> by LH-Tech-AI.</small>
 </div>
 
-<h2 class="section-title">Benchmark Table</h2>
+<h2 class="section-title">Benchmark Overview</h2>
+
+<div class="legend">
+  <span class="legend-item"><span class="legend-dot" style="background:var(--compactai)"></span> CompactAI</span>
+  <span class="legend-item"><span class="legend-dot" style="background:var(--supralabs)"></span> SupraLabs</span>
+</div>
+
+<div class="chart-grid">
+  <div class="chart-card">
+    <h3>BLiMP ↑ (higher is better)</h3>
+    <canvas id="blimpChart"></canvas>
+  </div>
+  <div class="chart-card">
+    <h3>ARC-Easy ↑ (higher is better)</h3>
+    <canvas id="arcChart"></canvas>
+  </div>
+  <div class="chart-card full">
+    <h3>WikiText-2 ↓ (lower is better)</h3>
+    <canvas id="wikiChart"></canvas>
+  </div>
+</div>
+
+<h2 class="section-title">Detailed Results</h2>
 
 <table>
 <thead>
@@ -242,7 +274,6 @@
 </tbody>
 </table>
 
-
 <div class="methodology" style="margin-top:1.5rem">
 <h3>Regarding the claim that Glint-1.3 is a "fake model with fake benchmarks"</h3>
 
@@ -333,5 +364,78 @@ All benchmark data is self-reported by model authors unless otherwise noted.</p>
 </footer>
 
 </div>
+<script>
+const models = [
+  { name: 'Supra-50M-Instruct', org: 'supralabs', blimp: 76.3, arc: 52.2, wiki: null },
+  { name: 'Glint-1.3 (merged)', org: 'compactai', blimp: 68.7, arc: 32.5, wiki: 3.08 },
+  { name: 'Supra-Mini-v5',     org: 'supralabs', blimp: 63.5, arc: 34.4, wiki: 2.66 },
+  { name: 'Glint-1',           org: 'compactai', blimp: 61.2, arc: 32.0, wiki: 4.07 },
+  { name: 'Supra-Mini-v4',     org: 'supralabs', blimp: 60.7, arc: 31.5, wiki: 3.17 },
+  { name: 'Glint-0.4',         org: 'compactai', blimp: 58.5, arc: 31.0, wiki: 5.24 },
+  { name: 'Supra-Mini-v3',     org: 'supralabs', blimp: 55.3, arc: 27.3, wiki: 4.49 },
+  { name: 'Supra-Mini-v2',     org: 'supralabs', blimp: 53.5, arc: 26.8, wiki: 7.79 },
+  { name: 'Glint-0.2',         org: 'compactai', blimp: 49.8, arc: 27.0, wiki: null },
+  { name: 'Glint-0.3',         org: 'compactai', blimp: 47.3, arc: 25.5, wiki: null },
+  { name: 'Glint-0.1',         org: 'compactai', blimp: 46.7, arc: 21.0, wiki: null },
+];
+
+const colorMap = { compactai: '#58a6ff', supralabs: '#3fb950' };
+const bgMap = { compactai: 'rgba(88,166,255,0.7)', supralabs: 'rgba(63,185,80,0.7)' };
+
+function buildChart(canvasId, metric, label, reverse) {
+  const m = metric === 'wiki' ? 'wiki' : metric;
+  const fmt = metric === 'wiki' ? v => v.toFixed(2) : v => v.toFixed(1) + '%';
+  const sorted = models
+    .filter(d => d[metric] !== null)
+    .sort((a, b) => reverse ? a[metric] - b[metric] : b[metric] - a[metric]);
+
+  new Chart(document.getElementById(canvasId), {
+    type: 'bar',
+    data: {
+      labels: sorted.map(d => d.name),
+      datasets: [{
+        data: sorted.map(d => d[metric]),
+        backgroundColor: sorted.map(d => bgMap[d.org]),
+        borderColor: sorted.map(d => colorMap[d.org]),
+        borderWidth: 1,
+        borderRadius: 3,
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: ctx => fmt(ctx.parsed.x)
+          }
+        }
+      },
+      scales: {
+        x: {
+          beginAtZero: true,
+          grid: { color: 'rgba(255,255,255,0.06)' },
+          ticks: { color: '#8b949e', callback: v => metric === 'wiki' ? v.toFixed(1) : v + '%' }
+        },
+        y: {
+          grid: { display: false },
+          ticks: {
+            color: '#c9d1d9',
+            font: { size: 11 },
+            autoSkip: false,
+            callback: label => label.length > 18 ? label.slice(0, 17) + '…' : label
+          }
+        }
+      }
+    }
+  });
+}
+
+buildChart('blimpChart', 'blimp', 'BLiMP Accuracy', false);
+buildChart('arcChart', 'arc', 'ARC-Easy Accuracy', false);
+buildChart('wikiChart', 'wiki', 'WikiText-2 Perplexity', true);
+</script>
 </body>
 </html>