Upload 4 files

background.js

@@ -27,5 +27,65 @@
       }
     }
 
+    // ---- Grass strip ----
+    if (!document.querySelector(".grass")) {
+      const NS = "http://www.w3.org/2000/svg";
+      const W = isMobile ? 1200 : 2400;
+      const H = 70;
+      const svg = document.createElementNS(NS, "svg");
+      svg.setAttribute("class", "grass");
+      svg.setAttribute("viewBox", "0 0 " + W + " " + H);
+      svg.setAttribute("preserveAspectRatio", "xMidYMax slice");
+      svg.setAttribute("aria-hidden", "true");
+
+      svg.innerHTML =
+        '<defs><linearGradient id="grass-base" x1="0" y1="1" x2="0" y2="0">' +
+        '<stop offset="0" stop-color="#3e7a46" stop-opacity="0.55"/>' +
+        '<stop offset="1" stop-color="#3e7a46" stop-opacity="0"/>' +
+        "</linearGradient></defs>" +
+        '<rect x="0" y="' + (H - 16) + '" width="' + W + '" height="16" fill="url(#grass-base)"/>';
+
+      const layers = isMobile
+        ? [
+            { count: 50, hMin: 18, hMax: 32, colors: ["#4f9854"], opacity: 0.9 },
+            { count: 40, hMin: 24, hMax: 42, colors: ["#63ad64"], opacity: 1 },
+          ]
+        : [
+            { count: 190, hMin: 18, hMax: 36, colors: ["#3e7a46", "#457f4b", "#4a8a50"], opacity: 0.8 },
+            { count: 160, hMin: 26, hMax: 52, colors: ["#4f9854", "#57a05a", "#63ad64", "#6db36e"], opacity: 1 },
+          ];
+
+      layers.forEach((layer) => {
+        const g = document.createElementNS(NS, "g");
+        g.setAttribute("opacity", layer.opacity);
+        for (let i = 0; i < layer.count; i++) {
+          const x = Math.random() * W;
+          const h = layer.hMin + Math.random() * (layer.hMax - layer.hMin);
+          const lean = (Math.random() - 0.5) * 16;
+          const w = 3 + Math.random() * 3;
+          const color = layer.colors[(Math.random() * layer.colors.length) | 0];
+          const blade = document.createElementNS(NS, "path");
+          blade.setAttribute(
+            "d",
+            "M " + x + " " + H +
+              " Q " + (x + lean * 0.2) + " " + (H - h * 0.6) + " " + (x + lean) + " " + (H - h) +
+              " Q " + (x + lean * 0.6 + w * 0.5) + " " + (H - h * 0.55) + " " + (x + w) + " " + H + " Z"
+          );
+          blade.setAttribute("fill", color);
+          blade.style.transformBox = "fill-box";
+          blade.style.transformOrigin = "50% 100%";
+          if (!isMobile) {
+            blade.style.animation =
+              "blade-sway " + (2.6 + Math.random() * 2.4).toFixed(2) + "s ease-in-out " +
+              (-(x / W) * 3 - Math.random()).toFixed(2) + "s infinite alternate";
+          }
+          g.appendChild(blade);
+        }
+        svg.appendChild(g);
+      });
+
+      document.body.appendChild(svg);
+    }
+
   });
 })();

index.html

@@ -51,12 +51,12 @@
         <div class="range-slider" id="params-range-slider">
           <div class="range-slider-track"></div>
           <div class="range-slider-fill" id="params-range-fill"></div>
-          <input type="range" id="params-range-min" class="range-thumb range-thumb-min" min="0" max="100" step="0.1" value="0" aria-label="Minimum parameters in billions">
-          <input type="range" id="params-range-max" class="range-thumb range-thumb-max" min="0" max="100" step="0.1" value="100" aria-label="Maximum parameters in billions">
+          <input type="range" id="params-range-min" class="range-thumb range-thumb-min" min="0" max="1000" step="1" value="0" aria-label="Minimum parameters in billions">
+          <input type="range" id="params-range-max" class="range-thumb range-thumb-max" min="0" max="1000" step="1" value="1000" aria-label="Maximum parameters in billions">
         </div>
         <div class="range-slider-values">
           <span id="params-range-min-label">0B</span>
-          <span id="params-range-max-label">100B+</span>
+          <span id="params-range-max-label">1000B+</span>
         </div>
         <button type="button" class="filter-reset" id="params-filter-reset">Reset</button>
       </div>

script.js

@@ -6,8 +6,7 @@
     activeBenchmark: null,
     search: "",
     sort: "score-desc",
-    paramsBounds: { min: 0, max: 100 }, // full data range, computed on load
-    paramsFilter: { min: 0, max: 100 }, // current filter selection
+    paramsFilter: { min: 0, max: 1000 }, // current filter selection, in billions of params
   };
 
   const els = {};
@@ -154,31 +153,39 @@
 
   // -------------------- PARAMS FILTER --------------------
 
-  // Derive slider bounds from the actual dataset so the range always matches
-  // whatever models are in models.json (no hardcoded cap).
+  // Absolute ceiling the slider will ever offer, regardless of what's in the
+  // data today — 1000B (1T) parameters, so future large-model submissions
+  // don't require touching this code.
+  const PARAMS_ABSOLUTE_MAX = 1000;
+
+  // The slider works in log-space (0.1B .. 1000B) so both a 0.5B and a
+  // 400B model are draggable to precisely — a linear 0..1000 slider would
+  // make anything under ~10B unreachable with a mouse.
+  const LOG_MIN = -1; // 10^-1 = 0.1B
+  const LOG_MAX = Math.log10(PARAMS_ABSOLUTE_MAX); // 10^3 = 1000B
+
+  function paramsToSlider(b) {
+    const clamped = Math.max(0.1, Math.min(PARAMS_ABSOLUTE_MAX, b));
+    return (Math.log10(clamped) - LOG_MIN) / (LOG_MAX - LOG_MIN);
+  }
+
+  function sliderToParams(t) {
+    return Math.pow(10, LOG_MIN + t * (LOG_MAX - LOG_MIN));
+  }
+
+  // Derive slider bounds from the actual dataset, but always offer the full
+  // 0.1B–1000B range so filtering isn't capped to whatever's in models.json
+  // today.
   function initParamsBounds() {
-    const values = state.data.models
-      .map((m) => m.params_b)
-      .filter((v) => typeof v === "number");
-
-    let min = 0;
-    let max = values.length ? Math.max(...values) : 100;
-    // round the ceiling up a bit so the top model's dot isn't pinned to the
-    // very edge of the track, and so the slider still makes sense with 1 model
-    max = Math.max(1, Math.ceil(max * 1.1 * 10) / 10);
-
-    state.paramsBounds = { min, max };
-    state.paramsFilter = { min, max };
-
-    els.rangeMin.min = String(min);
-    els.rangeMin.max = String(max);
-    els.rangeMin.step = "0.1";
-    els.rangeMin.value = String(min);
-
-    els.rangeMax.min = String(min);
-    els.rangeMax.max = String(max);
-    els.rangeMax.step = "0.1";
-    els.rangeMax.value = String(max);
+    state.paramsFilter = { min: 0, max: PARAMS_ABSOLUTE_MAX };
+
+    [els.rangeMin, els.rangeMax].forEach((el) => {
+      el.min = "0";
+      el.max = "1000";
+      el.step = "1";
+    });
+    els.rangeMin.value = "0";
+    els.rangeMax.value = "1000";
   }
 
   function bindParamsFilter() {
@@ -201,12 +208,16 @@
     });
 
     const onSlide = () => {
-      let lo = parseFloat(els.rangeMin.value);
-      let hi = parseFloat(els.rangeMax.value);
+      let loPos = parseFloat(els.rangeMin.value);
+      let hiPos = parseFloat(els.rangeMax.value);
       // keep the two thumbs from crossing
-      if (lo > hi) {
-        [lo, hi] = [hi, lo];
+      if (loPos > hiPos) {
+        [loPos, hiPos] = [hiPos, loPos];
       }
+      // slider position 0 is a true "no lower bound" (0B); anything above
+      // maps through the log curve so small models stay draggable.
+      const lo = loPos <= 0 ? 0 : sliderToParams(loPos / 1000);
+      const hi = hiPos >= 1000 ? PARAMS_ABSOLUTE_MAX : sliderToParams(hiPos / 1000);
       state.paramsFilter = { min: lo, max: hi };
       updateRangeVisuals();
       render();
@@ -216,10 +227,9 @@
     els.rangeMax.addEventListener("input", onSlide);
 
     els.filterReset.addEventListener("click", () => {
-      const { min, max } = state.paramsBounds;
-      state.paramsFilter = { min, max };
-      els.rangeMin.value = String(min);
-      els.rangeMax.value = String(max);
+      state.paramsFilter = { min: 0, max: PARAMS_ABSOLUTE_MAX };
+      els.rangeMin.value = "0";
+      els.rangeMax.value = "1000";
       updateRangeVisuals();
       render();
     });
@@ -233,26 +243,29 @@
   }
 
   function isParamsFilterActive() {
-    const { min, max } = state.paramsBounds;
-    return state.paramsFilter.min > min || state.paramsFilter.max < max;
+    return state.paramsFilter.min > 0 || state.paramsFilter.max < PARAMS_ABSOLUTE_MAX;
   }
 
   function updateRangeVisuals() {
-    const { min, max } = state.paramsBounds;
-    const span = Math.max(0.0001, max - min);
-    const loPct = ((state.paramsFilter.min - min) / span) * 100;
-    const hiPct = ((state.paramsFilter.max - min) / span) * 100;
+    // thumbs are already in slider-position units (0-1000); just read them
+    // back for the fill bar rather than re-deriving from log space, so the
+    // fill always matches exactly where the thumbs are.
+    const loPct = (parseFloat(els.rangeMin.value) / 1000) * 100;
+    const hiPct = (parseFloat(els.rangeMax.value) / 1000) * 100;
 
     els.rangeFill.style.left = loPct.toFixed(2) + "%";
     els.rangeFill.style.right = (100 - hiPct).toFixed(2) + "%";
 
-    const fmt = (v) => {
-      const isMax = v >= max;
-      const rounded = Math.round(v * 10) / 10;
-      return (Number.isInteger(rounded) ? rounded.toFixed(0) : rounded.toFixed(1)) + "B" + (isMax ? "+" : "");
+    const fmt = (b, isMax) => {
+      if (isMax && b >= PARAMS_ABSOLUTE_MAX) return "1000B+";
+      if (b <= 0) return "0B";
+      if (b >= 1000) return (b / 1000).toFixed(1).replace(/\.0$/, "") + "T";
+      if (b < 1) return b.toFixed(2) + "B";
+      if (b < 10) return b.toFixed(1) + "B";
+      return Math.round(b) + "B";
     };
-    els.rangeMinLabel.textContent = fmt(state.paramsFilter.min);
-    els.rangeMaxLabel.textContent = fmt(state.paramsFilter.max);
+    els.rangeMinLabel.textContent = fmt(state.paramsFilter.min, false);
+    els.rangeMaxLabel.textContent = fmt(state.paramsFilter.max, true);
 
     const active = isParamsFilterActive();
     els.filterBtn.classList.toggle("has-active-filter", active);
@@ -346,11 +359,10 @@
 
     if (isParamsFilterActive()) {
       const { min, max } = state.paramsFilter;
-      const { max: dataMax } = state.paramsBounds;
       rows = rows.filter((r) => {
         const p = r.model.params_b;
         if (p == null) return false; // unknown size excluded once a filter is set
-        if (max >= dataMax) return p >= min; // top thumb at the ceiling = open-ended "+"
+        if (max >= PARAMS_ABSOLUTE_MAX) return p >= min; // top thumb at the ceiling = open-ended "+"
         return p >= min && p <= max;
       });
     }

style.css

@@ -116,6 +116,23 @@ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-
     to   { transform: translateX(120vw) scale(var(--cloud-scale, 1)); }
 }
 
+.grass {
+    position: fixed;
+    bottom: -2px; left: 0;
+    width: 100%; height: 70px;
+    z-index: 50;
+    pointer-events: none;
+}
+
+@keyframes blade-sway {
+    from { transform: rotate(-2.4deg); }
+    to   { transform: rotate(3.2deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .grass path { animation: none !important; }
+}
+
 /* -------------------- LAYOUT -------------------- */
 
 .container {
@@ -222,6 +239,7 @@ a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-
 /* -------------------- SUBMIT PANEL -------------------- */
 
 .submit-panel {
+    margin-top: 32px;
     margin-bottom: 26px;
     border-radius: var(--radius);
     background: var(--surface);