script.js

const ORGS = {
  compactai: { name: "CompactAI", chartColor: "rgba(63, 185, 80, 0.70)", chartBorder: "#3fb950", url: "https://huggingface.co/CompactAI-O" },
  supralabs: { name: "SupraLabs", chartColor: "rgba(124, 58, 237, 0.70)", chartBorder: "#7c3aed", url: "https://huggingface.co/SupraLabs" },
  axiomiclabs: { name: "Axiomic Labs", chartColor: "rgba(194, 182, 255, 0.70)", chartBorder: "#c2b6ff", url: "https://huggingface.co/AxiomicLabs" },
  mihaipopa: { name: "Mihai Popa", chartColor: "rgba(247, 129, 102, 0.70)", chartBorder: "#f78166", url: "https://huggingface.co/MihaiPopa-1" },
  lhtechai: { name: "LH-Tech-AI", chartColor: "rgba(249, 115, 22, 0.70)", chartBorder: "#f97316", url: "https://huggingface.co/LH-Tech-AI" },
  facebook: { name: "Facebook", chartColor: "rgba(24, 119, 242, 0.70)", chartBorder: "#1877f2", url: "https://huggingface.co/facebook" },
  harleyml: { name: "Harley ML", chartColor: "rgba(153, 27, 27, 0.70)", chartBorder: "#991b1b", url: "https://huggingface.co/Harley-ml" },
  huggingface: { name: "HuggingFace", chartColor: "rgba(255, 204, 0, 0.70)", chartBorder: "#ffcc00", url: "https://huggingface.co/HuggingFaceTB" },
  eleutherai: { name: "EleutherAI", chartColor: "rgba(239, 68, 68, 0.70)", chartBorder: "#ef4444", url: "https://huggingface.co/EleutherAI" },
  openai: { name: "OpenAI", chartColor: "rgba(16, 163, 127, 0.70)", chartBorder: "#10a37f", url: "https://huggingface.co/openai-community" },
  stentor: { name: "StentorLabs", chartColor: "rgba(255, 107, 203, 0.70)", chartBorder: "#ff6bcb", url: "https://huggingface.co/StentorLabs" },
  eclipsesenpai: { name: "Eclipse-Senpai", chartColor: "rgba(6, 182, 212, 0.70)", chartBorder: "#06b6d4", url: "https://huggingface.co/Eclipse-Senpai" },
  godelev: { name: "GODELEV", chartColor: "rgba(79, 70, 229, 0.70)", chartBorder: "#4f46e5", url: "https://huggingface.co/godelev" },
  sandroeth: { name: "Sandroeth", chartColor: "rgba(132, 204, 22, 0.70)", chartBorder: "#84cc16", url: "https://huggingface.co/Sandroeth" },
  veyraai: { name: "veyra-ai", chartColor: "rgba(212, 86, 114, 0.70)", chartBorder: "#d45672", url: "https://huggingface.co/veyra-ai" },
  thingai: { name: "ThingAI", chartColor: "rgba(180, 83, 9, 0.70)", chartBorder: "#b45309", url: "https://huggingface.co/ThingAI" },
  fromzero: { name: "FromZero", chartColor: "rgba(210, 180, 140, 0.70)", chartBorder: "#d2b48c", url: "https://huggingface.co/fromziro" },
  finnianx: { name: "finnianx", chartColor: "rgba(45, 212, 191, 0.70)", chartBorder: "#2dd4bf", url: "https://huggingface.co/finnianx" },
  joelhenwang: { name: "joelhenwang", chartColor: "rgba(229, 231, 235, 0.70)", chartBorder: "#e5e7eb", url: "https://huggingface.co/joelhenwang" },
  rtc2022: { name: "RTC", chartColor: "rgba(245, 158, 11, 0.70)", chartBorder: "#f59e0b", url: "https://huggingface.co/rtc2022" },
  jhuclsp: { name: "JHU CLSP", chartColor: "rgba(37, 99, 235, 0.70)", chartBorder: "#2563eb", url: "https://huggingface.co/jhu-clsp" },
  liodonai: { name: "Liodon AI", chartColor: "rgba(99, 102, 241, 0.70)", chartBorder: "#6366f1", url: "https://huggingface.co/liodon-ai" },
  smalldoge: { name: "SmallDoge", chartColor: "rgba(236, 72, 153, 0.70)", chartBorder: "#ec4899", url: "https://huggingface.co/SmallDoge" },
  quazim0t0: { name: "Quazim0t0", chartColor: "rgba(14, 165, 233, 0.70)", chartBorder: "#0ea5e9", url: "https://huggingface.co/Quazim0t0" },
  small56ai: { name: "Small56.AI", chartColor: "rgba(34, 197, 94, 0.70)", chartBorder: "#22c55e", url: "https://huggingface.co/56m" },
  multivexai: { name: "MultivexAI", chartColor: "rgba(0, 240, 255, 0.70)", chartBorder: "#00f0ff", url: "https://huggingface.co/MultivexAI" },
  ucr: { name: "UCR", chartColor: "rgba(59, 130, 246, 0.70)", chartBorder: "#3b82f6", url: "https://huggingface.co/UniversalComputingResearch" },
  ideoalabs: { name: "Ideoa Labs", chartColor: "rgba(251, 113, 133, 0.70)", chartBorder: "#fb7185", url: "https://huggingface.co/MaliosDark" },
  user01110: { name: "User01110", chartColor: "rgba(168, 85, 247, 0.70)", chartBorder: "#a855f7", url: "https://huggingface.co/User01110" },
  bananamind: { name: "BananaMind", chartColor: "rgba(250, 204, 21, 0.70)", chartBorder: "#facc15", url: "https://huggingface.co/BananaMind" },
  atomixlabs: { name: "AtomixLabs", chartColor: "rgba(190, 242, 100, 0.70)", chartBorder: "#bef264", url: "https://huggingface.co/AtomixLabs" },
};

const MODELS = [
  // Add models here.
  { name: "MicroBananaMind-v1", org: "bananamind", params: 902272, paramsDisplay: "902K", arc: 31.40, hellaswag: 26.53, piqa: 53.86, arcChall: 20.99, links: { card: "https://huggingface.co/BananaMind/MicroBananaMind-v1" } },
];

const BENCHMARKS = [
  { key: "avg", label: "Avg" },
  { key: "arc", label: "ARC Easy" },
  { key: "piqa", label: "PIQA" },
  { key: "arcChall", label: "ARC Challenge" },
  { key: "hellaswag", label: "HellaSwag" },
];

const SIZE_FILTERS = [
  ["all", "All"],
  [150, "<150M"],
  [100, "<100M"],
  [80, "<80M"],
  [50, "<50M"],
  [25, "<25M"],
  [10, "<10M"],
  [5, "<5M"],
  [3, "<3M"],
  [1, "<1M"],
];

const leaderboardHead = document.querySelector("#leaderboard-head");
const leaderboardBody = document.querySelector("#leaderboard-body");
const summaryStrip = document.querySelector("#summary-strip");
const sizeFilters = document.querySelector("#size-filters");
const orgFilter = document.querySelector("#org-filter");
const searchInput = document.querySelector("#search-input");

let activeSize = "all";
let activeOrg = "all";
let searchTerm = "";
let sortKey = "avg";
let sortDirection = "descending";

const rows = MODELS.map((model) => ({
  ...model,
  avg: average([model.arc, model.piqa, model.arcChall, model.hellaswag]),
}));

function average(values) {
  const valid = values.filter((value) => Number.isFinite(value));
  return valid.length ? valid.reduce((sum, value) => sum + value, 0) / valid.length : 0;
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
}

function orgFor(key) {
  return ORGS[key] || { name: key, chartBorder: "#9ca3af", chartColor: "rgba(156, 163, 175, 0.35)", url: "" };
}

function renderHead() {
  leaderboardHead.innerHTML = `
    <tr>
      <th class="rank-col sortable" data-sort="rank" scope="col">#<span class="sort-mark"></span></th>
      <th class="model-col sortable" data-sort="name" scope="col">Model<span class="sort-mark"></span></th>
      <th class="org-col sortable" data-sort="orgName" scope="col">Org<span class="sort-mark"></span></th>
      <th class="params-col sortable" data-sort="params" scope="col">Params<span class="sort-mark"></span></th>
      ${BENCHMARKS.map((metric) => `<th class="metric-col sortable" data-sort="${metric.key}" scope="col">${metric.label}<span class="sort-mark"></span></th>`).join("")}
      <th class="link-col" scope="col">Card</th>
    </tr>
  `;

  document.querySelectorAll(".sortable").forEach((header) => {
    header.addEventListener("click", () => {
      const nextKey = header.dataset.sort;
      sortDirection = sortKey === nextKey && sortDirection === "descending" ? "ascending" : "descending";
      sortKey = nextKey;
      renderRows();
      updateSortMarks();
    });
  });

  updateSortMarks();
}

function renderFilters() {
  sizeFilters.innerHTML = SIZE_FILTERS.map(([value, label]) => `
    <button class="filter-button ${String(value) === String(activeSize) ? "is-active" : ""}" type="button" data-size="${value}">${label}</button>
  `).join("");

  sizeFilters.querySelectorAll(".filter-button").forEach((button) => {
    button.addEventListener("click", () => {
      activeSize = button.dataset.size;
      renderFilters();
      renderRows();
    });
  });

  const usedOrgs = Object.entries(ORGS)
    .filter(([key]) => rows.some((row) => row.org === key))
    .sort((first, second) => first[1].name.localeCompare(second[1].name));

  orgFilter.innerHTML = `<option value="all">All orgs</option>${usedOrgs
    .map(([key, org]) => `<option value="${key}">${escapeHtml(org.name)}</option>`)
    .join("")}`;
  orgFilter.value = activeOrg;
}

function filteredRows() {
  return rows.filter((row) => {
    const org = orgFor(row.org);
    const matchesSize = activeSize === "all" || row.params < Number(activeSize) * 1_000_000;
    const matchesOrg = activeOrg === "all" || row.org === activeOrg;
    const text = `${row.name} ${org.name} ${row.org}`.toLowerCase();
    return matchesSize && matchesOrg && (!searchTerm || text.includes(searchTerm));
  });
}

function sortedRows() {
  const ranked = [...filteredRows()]
    .sort((first, second) => second.avg - first.avg)
    .map((row, index) => ({ ...row, rank: index + 1, orgName: orgFor(row.org).name }));

  return ranked.sort((first, second) => {
    const firstValue = first[sortKey];
    const secondValue = second[sortKey];
    const result = typeof firstValue === "string"
      ? firstValue.localeCompare(secondValue)
      : firstValue - secondValue;

    return sortDirection === "descending" ? -result : result;
  });
}

function scoreCell(row, key) {
  const value = row[key];
  const width = Math.max(0, Math.min(100, value));
  return `
    <td class="metric-cell">
      <span class="score-value">${value.toFixed(2)}</span>
      <span class="score-track" aria-hidden="true"><span style="width: ${width}%"></span></span>
    </td>
  `;
}

function renderRows() {
  const visibleRows = sortedRows();

  if (!visibleRows.length) {
    leaderboardBody.innerHTML = `
      <tr class="empty-row">
        <td colspan="10">
          <div class="empty-state">
            <p class="empty-title">No matching models</p>
            <p class="empty-copy">Clear search or change filters.</p>
          </div>
        </td>
      </tr>
    `;
    renderSummary([]);
    return;
  }

  leaderboardBody.innerHTML = visibleRows.map((row) => {
    const org = orgFor(row.org);
    const cardUrl = row.links?.card || org.url || "#";

    return `
      <tr>
        <td class="rank-cell">${row.rank}</td>
        <td class="model-cell">
          <a class="model-link" href="${escapeHtml(cardUrl)}" target="_blank" rel="noreferrer">${escapeHtml(row.name)}</a>
          <span class="mobile-meta">${escapeHtml(org.name)} / ${escapeHtml(row.paramsDisplay)}</span>
        </td>
        <td class="org-cell">
          <a class="org-pill" href="${escapeHtml(org.url || cardUrl)}" target="_blank" rel="noreferrer" style="--org-color: ${org.chartBorder}">
            <span></span>${escapeHtml(org.name)}
          </a>
        </td>
        <td class="params-cell">${escapeHtml(row.paramsDisplay)}</td>
        ${BENCHMARKS.map((metric) => scoreCell(row, metric.key)).join("")}
        <td class="card-cell"><a href="${escapeHtml(cardUrl)}" target="_blank" rel="noreferrer">Open</a></td>
      </tr>
    `;
  }).join("");

  renderSummary(visibleRows);
}

function renderSummary(visibleRows) {
  const top = [...visibleRows].sort((first, second) => second.avg - first.avg)[0];
  summaryStrip.innerHTML = `
    <div><strong>${MODELS.length}</strong><span>models</span></div>
    <div><strong>${new Set(MODELS.map((model) => model.org)).size}</strong><span>orgs</span></div>
    <div><strong>${top ? top.avg.toFixed(2) : "--"}</strong><span>top avg</span></div>
  `;
}

function updateSortMarks() {
  document.querySelectorAll(".sortable").forEach((header) => {
    const mark = header.querySelector(".sort-mark");
    const active = header.dataset.sort === sortKey;
    header.classList.toggle("is-sorted", active);
    header.setAttribute("aria-sort", active ? sortDirection : "none");
    mark.textContent = active ? (sortDirection === "descending" ? "↓" : "↑") : "";
  });
}

orgFilter.addEventListener("change", () => {
  activeOrg = orgFilter.value;
  renderRows();
});

searchInput.addEventListener("input", () => {
  searchTerm = searchInput.value.trim().toLowerCase();
  renderRows();
});

renderHead();
renderFilters();
renderRows();