Update index.html

index.html

@@ -230,7 +230,7 @@
     .chart-card {
       border-radius: var(--radius);
       padding: 18px 18px 12px;
-      min-height: 710px;
+      min-height: 920px;
       overflow: hidden;
     }
 
@@ -293,7 +293,7 @@
 
     .canvas-wrap {
       position: relative;
-      height: 575px;
+      height: 780px;
     }
 
     canvas {
@@ -343,64 +343,17 @@
       font-weight: 700;
     }
 
-    .cta-grid {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 14px;
-      margin-top: 14px;
-    }
-
-    .cta-card {
-      display: block;
-      text-decoration: none;
-      border: 1px solid rgba(255,255,255,0.10);
-      border-radius: 20px;
-      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
-      padding: 16px;
-      color: var(--text);
-      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
-    }
-
-    .cta-card:hover {
-      transform: translateY(-1px);
-      border-color: rgba(255,255,255,0.22);
-      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
-    }
-
-    .cta-kicker {
-      color: var(--muted2);
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.14em;
-      margin-bottom: 8px;
-    }
-
-    .cta-title {
-      color: var(--silver);
-      font-size: 16px;
-      font-weight: 800;
-      line-height: 1.35;
-      margin: 0 0 6px;
-    }
-
-    .cta-text {
-      color: var(--muted);
-      font-size: 13px;
-      line-height: 1.6;
-      margin: 0;
-    }
-
     @media (max-width: 1120px) {
       .layout { grid-template-columns: 1fr; }
       .panel { position: static; }
-      .canvas-wrap { height: 540px; }
+      .canvas-wrap { height: 700px; }
       .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
     }
 
     @media (max-width: 760px) {
       body { padding: 16px; }
       .hero, .panel, .chart-card, .info-card { border-radius: 18px; }
-      .canvas-wrap { height: 430px; }
+      .canvas-wrap { height: 520px; }
       .stat-grid { grid-template-columns: 1fr; }
       .info-grid { grid-template-columns: 1fr; }
     }
@@ -462,7 +415,7 @@
               <p class="chart-sub" id="chartSub">Silver regression line over the visible models.</p>
               <div class="callout">
                 <span class="dot"></span>
-                <span>Hover a point for details. Click a point to open the model page.</span>
+                <span>Hover a point for details. Click a point to open the model page. Tiny models are still included on the left side of the plot.</span>
               </div>
             </div>
             <div class="badge" id="countBadge">0 models</div>
@@ -496,19 +449,6 @@
           Residuals are measured in the same score units shown on the chart, after converting scores to percentages. <strong>RMSE</strong> is the square root of mean squared error, and <strong>R²</strong> describes how much of the score variation is explained by the line.
           These metrics describe the fit of this subset, not model quality in general.
         </section>
-
-        <section class="cta-grid">
-          <a class="cta-card" href="https://huggingface.co/spaces/fromziro/SLM_Regression_Line/discussions" target="_blank" rel="noopener noreferrer">
-            <div class="cta-kicker">Contribute</div>
-            <h3 class="cta-title">Want to add your model? Open a discussion or PR.</h3>
-            <p class="cta-text">Use the discussions tab to share a model that is not listed yet, or to suggest an update.</p>
-          </a>
-          <a class="cta-card" href="https://huggingface.co/spaces/AxiomicLabs/Open_SLM_Leaderboard" target="_blank" rel="noopener noreferrer">
-            <div class="cta-kicker">Deeper analysis</div>
-            <h3 class="cta-title">Need a more detailed breakdown of your model?</h3>
-            <p class="cta-text">Open the companion analysis space for a richer, more comprehensive view.</p>
-          </a>
-        </section>
       </main>
     </div>
   </div>
@@ -615,8 +555,8 @@
       { name: 'PicoKittens/PicoStories-853K', org: 'PicoKittens', params: 853120, arc_easy: 0.255050505050505, arc_challenge: 0.22013651877133106, piqa: 0.5119695321001088, hellaswag: 0.26488747261501694, avg_4: 0.3128200823244073, url: 'https://huggingface.co/PicoKittens/PicoStories-853K' },
     ];
 
-    const BENCHMARKS = [ [
-{ key: 'avg_4', label: 'Avg' },
+    const BENCHMARKS = [
+      { key: 'avg_4', label: 'Avg' },
       { key: 'arc_easy', label: 'ARC-Easy' },
       { key: 'arc_challenge', label: 'ARC-Challenge' },
       { key: 'hellaswag', label: 'HellaSwag' },
@@ -675,21 +615,24 @@
     }
 
     function buildFitSamples(data) {
-      const buckets = new Map();
+      const groups = new Map();
+
+      // Fit one sample per exact parameter count so duplicated models do not
+      // over-weight the line. This keeps the regression linear while avoiding
+      // a single repeated parameter size from dominating the fit.
       for (const d of data) {
-        const bucketId = Math.round(d.x / LOG10_BIN_WIDTH);
-        if (!buckets.has(bucketId)) buckets.set(bucketId, []);
-        buckets.get(bucketId).push(d);
+        const key = String(d.params);
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key).push(d);
       }
 
-      return [...buckets.values()]
-        .map(bucket => {
-          const xs = bucket.map(d => d.x);
-          const ys = bucket.map(d => d.y).slice().sort((a, b) => a - b);
-          const mid = Math.floor(ys.length / 2);
-          const medianY = ys.length % 2 ? ys[mid] : (ys[mid - 1] + ys[mid]) / 2;
+      return [...groups.values()]
+        .map(group => {
+          const xs = group.map(d => d.x);
+          const ys = group.map(d => d.y);
           const meanX = xs.reduce((a, b) => a + b, 0) / xs.length;
-          return { x: meanX, y: medianY, count: bucket.length };
+          const meanY = ys.reduce((a, b) => a + b, 0) / ys.length;
+          return { x: meanX, y: meanY, count: group.length };
         })
         .sort((a, b) => a.x - b.x);
     }
@@ -737,7 +680,7 @@
       document.getElementById('infoMAE').textContent = `${absMean.toFixed(2)} pts`;
       document.getElementById('infoResidualSpread').textContent = `${spread.toFixed(2)} pts`;
       document.getElementById('fitNote').textContent =
-        `Linear fit trained on ${bucketCount} grouped log10(parameter) buckets from ${count} visible models. Bucket RMSE is ${rmse.toFixed(2)} score points; raw-point RMSE is ${rawFit.rmse.toFixed(2)}.`;
+        `Linear fit trained on ${bucketCount} exact parameter groups from ${count} visible models. Grouped RMSE is ${rmse.toFixed(2)} score points; raw-point RMSE is ${rawFit.rmse.toFixed(2)}. Very small models are kept in the dataset but may be clipped from the main plot to preserve readability.`;
     }
 
     function render() {
@@ -764,11 +707,11 @@
 
       document.getElementById('chartTitle').textContent = chartTitleMap[activeBenchmark] || 'Regression vs log parameters';
       document.getElementById('chartSub').textContent =
-        `Silver dotted regression line trained on grouped parameter buckets. Hover to inspect a point; click to open the model page.`;
+        `Silver dotted regression line trained on exact parameter groups. The chart auto-zooms to the main cluster so tiny models do not crush the view; hover to inspect a point and click to open the model page.`;
 
       if (data.length < 2) {
         document.getElementById('chartSub').textContent = 'Add more visible models or clear the search filter to fit a line.';
-        document.getElementById('fitNote').textContent = 'Need at least 2 visible models to fit a line. The line is trained on grouped log10(parameter) buckets, not on exact-size single points.';
+        document.getElementById('fitNote').textContent = 'Need at least 2 visible models to fit a line. The line is trained on exact parameter groups, not on repeated exact-size duplicates.';
         document.getElementById('countBadge').textContent = `${data.length} models`;
         document.getElementById('infoBenchmark').textContent = BENCHMARK_NAMES[activeBenchmark] || activeBenchmark;
         document.getElementById('infoCount').textContent = String(data.length);
@@ -792,16 +735,22 @@
       });
       updateStats(fit, data.length, residuals, fitSamples.length, rawFit);
 
-      const xMin = Math.min(...data.map(d => d.x));
-      const xMax = Math.max(...data.map(d => d.x));
-      const xPad = Math.max(0.18, (xMax - xMin) * 0.09);
-      const xLow = xMin - xPad;
-      const xHigh = xMax + xPad;
-      const yLow = fit.slope * xLow + fit.intercept;
-      const yHigh = fit.slope * xHigh + fit.intercept;
+      const rawXMin = Math.min(...data.map(d => d.x));
+      const rawXMax = Math.max(...data.map(d => d.x));
+      const rawPad = Math.max(0.18, (rawXMax - rawXMin) * 0.09);
+      const lineSteps = 40;
+      const regressionLine = [];
+      for (let i = 0; i <= lineSteps; i += 1) {
+        const t = i / lineSteps;
+        const rawX = (rawXMin - rawPad) + ((rawXMax + rawPad) - (rawXMin - rawPad)) * t;
+        regressionLine.push({
+          x: rawX,
+          y: fit.slope * rawX + fit.intercept
+        });
+      }
 
-      const yMin = Math.min(...data.map(d => d.y), yLow) - 1.6;
-      const yMax = Math.max(...data.map(d => d.y), yHigh) + 1.6;
+      const yMin = Math.min(...data.map(d => d.y), ...regressionLine.map(p => p.y)) - 1.6;
+      const yMax = Math.max(...data.map(d => d.y), ...regressionLine.map(p => p.y)) + 1.6;
 
       if (chart) chart.destroy();
 
@@ -813,7 +762,7 @@
             {
               type: 'line',
               label: 'Regression',
-              data: [{ x: xLow, y: yLow }, { x: xHigh, y: yHigh }],
+              data: regressionLine,
               borderColor: 'rgba(239,240,244,0.98)',
               borderWidth: lineEmphasis ? 4 : 3,
               borderDash: [2, 8],
@@ -906,8 +855,8 @@
           scales: {
             x: {
               type: 'linear',
-              min: xLow,
-              max: xHigh,
+              min: Math.max(3.3, rawXMin - 0.20),
+              max: rawXMax + 0.15,
               grid: { color: 'rgba(255,255,255,0.045)' },
               ticks: {
                 color: '#8a8f9a',