Upload index.html

index.html

@@ -6,56 +6,58 @@
 <title>Tiny-ML Leaderboard</title>
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
 <style>
-  :root {
-    --bg: #0d1117;
-    --card: #161b22;
-    --border: #30363d;
-    --text: #c9d1d9;
-    --accent: #58a6ff;
-    --green: #3fb950;
-    --orange: #d29922;
-    --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; }
-  .container { max-width: 1200px; margin: 0 auto; }
-  h1 { font-size: 1.8rem; margin-bottom: .25rem; }
-  .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); }
-  .org-tag { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
-  .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; }
-  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; }
-  .methodology h3 { margin-bottom: .5rem; }
-  .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; }
-  }
+    :root {
+      --bg: #0d1117;
+      --card: #161b22;
+      --border: #30363d;
+      --text: #c9d1d9;
+      --accent: #58a6ff;
+      --green: #3fb950;
+      --orange: #d29922;
+      --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; }
+    .container { max-width: 1200px; margin: 0 auto; }
+    h1 { font-size: 1.8rem; margin-bottom: .25rem; }
+    .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); }
+    .org-tag { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
+    .org-compactai { background: #1f6feb33; color: var(--compactai); }
+    .org-supralabs { background: #3fb95033; color: var(--supralabs); }
+    .row-compactai { border-left: 3px solid var(--compactai); }
+    .row-supralabs { border-left: 3px solid 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; }
+    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; }
+    .methodology h3 { margin-bottom: .5rem; }
+    .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; }
+    }
 </style>
 </head>
 <body>
@@ -88,7 +90,7 @@
 </thead>
 <tbody>
 
-<tr>
+<tr class="row-supralabs">
   <td><strong>Supra-50M-Instruct</strong></td>
   <td><span class="org-tag org-supralabs">SupraLabs</span></td>
   <td>51.8M</td>
@@ -98,7 +100,7 @@
   <td>20B</td>
   <td class="links"><a href="https://huggingface.co/SupraLabs/Supra-50M-Instruct">card</a> <a href="https://huggingface.co/SupraLabs/Supra-50M-Base">base</a></td>
 </tr>
-<tr>
+<tr class="row-compactai">
   <td><strong>Glint-1.3 (merged)</strong></td>
   <td><span class="org-tag org-compactai">CompactAI</span></td>
   <td>982K</td>
@@ -108,7 +110,7 @@
   <td>100B</td>
   <td class="links"><a href="https://huggingface.co/CompactAI-O/Glint-1.3">card</a></td>
 </tr>
-<tr>
+<tr class="row-supralabs">
   <td><strong>Supra-Mini-v5</strong></td>
   <td><span class="org-tag org-supralabs">SupraLabs</span></td>
   <td>7.87M</td>
@@ -118,7 +120,7 @@
   <td class="na">—</td>
   <td class="links"><a href="https://huggingface.co/SupraLabs/Supra-Mini-v5-8M">card</a></td>
 </tr>
-<tr>
+<tr class="row-compactai">
   <td><strong>Glint-1</strong></td>
   <td><span class="org-tag org-compactai">CompactAI</span></td>
   <td>1M</td>
@@ -128,7 +130,7 @@
   <td>100B</td>
   <td class="links"><a href="https://huggingface.co/CompactAI-O/Glint-1">card</a></td>
 </tr>
-<tr>
+<tr class="row-supralabs">
   <td><strong>Supra-Mini-v4</strong></td>
   <td><span class="org-tag org-supralabs">SupraLabs</span></td>
   <td>2.62M</td>
@@ -138,7 +140,7 @@
   <td class="na">—</td>
   <td class="links"><a href="https://huggingface.co/SupraLabs/Supra-Mini-v4-2M">card</a></td>
 </tr>
-<tr>
+<tr class="row-compactai">
   <td><strong>Glint-0.4</strong></td>
   <td><span class="org-tag org-compactai">CompactAI</span></td>
   <td>1M</td>
@@ -148,7 +150,7 @@
   <td>10B</td>
   <td class="links"><a href="https://huggingface.co/CompactAI-O/Glint-0.4">card</a></td>
 </tr>
-<tr>
+<tr class="row-supralabs">
   <td><strong>Supra-Mini-v3</strong></td>
   <td><span class="org-tag org-supralabs">SupraLabs</span></td>
   <td>468K</td>
@@ -158,7 +160,7 @@
   <td class="na">—</td>
   <td class="links"><a href="https://huggingface.co/SupraLabs/Supra-Mini-v3-0.5M">card</a></td>
 </tr>
-<tr>
+<tr class="row-supralabs">
   <td><strong>Supra-Mini-v2</strong></td>
   <td><span class="org-tag org-supralabs">SupraLabs</span></td>
   <td>168K</td>
@@ -168,7 +170,7 @@
   <td class="na">—</td>
   <td class="links"><a href="https://huggingface.co/SupraLabs/Supra-Mini-v2-0.1M">card</a></td>
 </tr>
-<tr>
+<tr class="row-compactai">
   <td><strong>Glint-0.2</strong></td>
   <td><span class="org-tag org-compactai">CompactAI</span></td>
   <td>1M</td>
@@ -178,7 +180,7 @@
   <td>~100M</td>
   <td class="links"><a href="https://huggingface.co/CompactAI-O/Glint-0.2">card</a></td>
 </tr>
-<tr>
+<tr class="row-compactai">
   <td><strong>Glint-0.3</strong></td>
   <td><span class="org-tag org-compactai">CompactAI</span></td>
   <td>1M</td>
@@ -188,7 +190,7 @@
   <td>~100M</td>
   <td class="links"><a href="https://huggingface.co/CompactAI-O/Glint-0.3">card</a></td>
 </tr>
-<tr>
+<tr class="row-compactai">
   <td><strong>Glint-0.1</strong></td>
   <td><span class="org-tag org-compactai">CompactAI</span></td>
   <td>1M</td>
@@ -198,7 +200,7 @@
   <td>~100M</td>
   <td class="links"><a href="https://huggingface.co/CompactAI-O/Glint-0.1">card</a></td>
 </tr>
-<tr>
+<tr class="row-compactai">
   <td><strong>Shard-1</strong></td>
   <td><span class="org-tag org-compactai">CompactAI</span></td>
   <td>54.5M</td>
@@ -208,7 +210,7 @@
   <td>~20B</td>
   <td class="links"><a href="https://huggingface.co/CompactAI-O/Shard-1">card</a></td>
 </tr>
-<tr>
+<tr class="row-supralabs">
   <td><strong>StorySupra-10M</strong></td>
   <td><span class="org-tag org-supralabs">SupraLabs</span></td>
   <td>12.6M</td>
@@ -218,7 +220,7 @@
   <td class="na">—</td>
   <td class="links"><a href="https://huggingface.co/SupraLabs/StorySupra-10M">card</a></td>
 </tr>
-<tr>
+<tr class="row-supralabs">
   <td><strong>DistillSupra-0.2M</strong></td>
   <td><span class="org-tag org-supralabs">SupraLabs</span></td>
   <td>289K</td>
@@ -228,7 +230,7 @@
   <td class="na">—</td>
   <td class="links"><a href="https://huggingface.co/SupraLabs/DistillSupra-0.2M">card</a></td>
 </tr>
-<tr>
+<tr class="row-supralabs">
   <td><strong>MicroSupra-1k</strong></td>
   <td><span class="org-tag org-supralabs">SupraLabs</span></td>
   <td>1K</td>
@@ -238,7 +240,7 @@
   <td class="na">—</td>
   <td class="links"><a href="https://huggingface.co/SupraLabs/MicroSupra-1k">card</a></td>
 </tr>
-<tr>
+<tr class="row-compactai">
   <td><strong>TrueMath</strong></td>
   <td><span class="org-tag org-compactai">CompactAI</span></td>
   <td>1-layer</td>
@@ -433,6 +435,68 @@ function buildChart(canvasId, metric, label, reverse) {
   });
 }
 
+// Apply gradient text color to table metric values based on performance
+function applyTableGradient() {
+  // Define metric ranges (min and max values)
+  const blimpMin = 46.7, blimpMax = 76.3;
+  const arcMin = 21.0, arcMax = 52.2;
+  const wikiMin = 2.66, wikiMax = 7.79;
+  
+  // Text colors from white (worst) to bright green (best)
+  const worstGreen = [255, 255, 255];  // #ffffff — white, fully readable
+  const bestGreen  = [63, 185, 80];    // #3fb950 — bright vibrant green
+  
+  function getColor(value, min, max, lowerIsBetter) {
+    if (value === null || isNaN(value)) return '';
+    let percent = (value - min) / (max - min);
+    // For metrics where lower is better, invert so best=brightest green
+    if (lowerIsBetter) percent = 1 - percent;
+    const clamped = Math.max(0, Math.min(1, percent));
+    // Interpolate between muted and bright green
+    const r = Math.round(worstGreen[0] + (bestGreen[0] - worstGreen[0]) * clamped);
+    const g = Math.round(worstGreen[1] + (bestGreen[1] - worstGreen[1]) * clamped);
+    const b = Math.round(worstGreen[2] + (bestGreen[2] - worstGreen[2]) * clamped);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  
+  // Select all table cells with metric values
+  const blimpCells = document.querySelectorAll('td:nth-child(5)'); // BLiMP column
+  const arcCells = document.querySelectorAll('td:nth-child(6)');   // ARC-Easy column
+  const wikiCells = document.querySelectorAll('td:nth-child(4)');  // WikiText-2 column
+  
+  blimpCells.forEach(cell => {
+    const text = cell.textContent.replace('%', '').trim();
+    if (text && text !== 'not reported' && text !== 'TBD' && text !== '—') {
+      const value = parseFloat(text);
+      if (!isNaN(value)) {
+        cell.style.color = getColor(value, blimpMin, blimpMax, false);
+      }
+    }
+  });
+  
+  arcCells.forEach(cell => {
+    const text = cell.textContent.replace('%', '').trim();
+    if (text && text !== 'not reported' && text !== 'TBD' && text !== '—') {
+      const value = parseFloat(text);
+      if (!isNaN(value)) {
+        cell.style.color = getColor(value, arcMin, arcMax, false);
+      }
+    }
+  });
+  
+  wikiCells.forEach(cell => {
+    const text = cell.textContent.trim();
+    if (text && text !== 'not reported' && text !== 'TBD' && text !== '—') {
+      const value = parseFloat(text);
+      if (!isNaN(value)) {
+        cell.style.color = getColor(value, wikiMin, wikiMax, true);
+      }
+    }
+  });
+}
+
+// Apply gradient after page loads
+window.addEventListener('DOMContentLoaded', applyTableGradient);
 buildChart('blimpChart', 'blimp', 'BLiMP Accuracy', false);
 buildChart('arcChart', 'arc', 'ARC-Easy Accuracy', false);
 buildChart('wikiChart', 'wiki', 'WikiText-2 Perplexity', true);