Spaces:
Running
Running
| const state = { | |
| rows: [], | |
| sort: { key: "mean", direction: "desc" }, | |
| }; | |
| let columns = []; | |
| function configureColumns(metrics) { | |
| columns = [ | |
| { key: "rank", label: "Rank" }, | |
| { key: "model", label: "Model" }, | |
| { key: "access", label: "Access" }, | |
| { key: "size", label: "Model size" }, | |
| { key: "mean", label: "Mean", score: true }, | |
| ...metrics.map(metric => ({ key: metric.key, label: metric.name, score: true, benchmark: true })), | |
| ]; | |
| } | |
| const $ = (selector) => document.querySelector(selector); | |
| const $$ = (selector) => [...document.querySelectorAll(selector)]; | |
| const escapeHtml = (value) => String(value ?? "").replace(/[&<>'"]/g, (char) => ({ "&": "&", "<": "<", ">": ">", "'": "'", '"': """ })[char]); | |
| const formatScore = (value) => value == null || Number.isNaN(Number(value)) ? "—" : Number(value).toFixed(2); | |
| function visibleColumns() { | |
| return columns.filter(column => | |
| (column.key !== "access" || $("#show-access").value === "show") && | |
| (column.key !== "size" || $("#show-size").value === "show") | |
| ); | |
| } | |
| function renderHead() { | |
| $("#leaderboard-head").innerHTML = `<tr>${visibleColumns().map((column) => { | |
| const sortable = column.score || column.key === "model"; | |
| const active = state.sort.key === column.key; | |
| const arrow = active ? (state.sort.direction === "asc" ? " ↑" : " ↓") : ""; | |
| const label = column.benchmark ? escapeHtml(column.label).replaceAll(" ", "<br>") : escapeHtml(column.label); | |
| return `<th class="${sortable ? "sortable" : ""} ${active ? "active-sort" : ""}" data-key="${escapeHtml(column.key)}">${label}${arrow}</th>`; | |
| }).join("")}</tr>`; | |
| $$("th.sortable").forEach((header) => header.addEventListener("click", () => { | |
| const key = header.dataset.key; | |
| state.sort = { key, direction: state.sort.key === key && state.sort.direction === "desc" ? "asc" : "desc" }; | |
| renderHead(); | |
| renderRows(); | |
| })); | |
| } | |
| function filteredRows() { | |
| const access = $("#model-filter").value; | |
| const rows = state.rows.filter(row => !access || row.access === access); | |
| const multiplier = state.sort.direction === "asc" ? 1 : -1; | |
| return rows.sort((a, b) => { | |
| const av = a[state.sort.key]; | |
| const bv = b[state.sort.key]; | |
| if (typeof av === "number" && typeof bv === "number") return (av - bv) * multiplier; | |
| return String(av ?? "").localeCompare(String(bv ?? "")) * multiplier; | |
| }); | |
| } | |
| function cell(row, column, rank) { | |
| const value = row[column.key]; | |
| if (column.key === "rank") return `<td class="rank ${rank < 3 ? "top" : ""}">${String(rank + 1).padStart(2, "0")}</td>`; | |
| if (column.key === "model") { | |
| const medal = ["🥇", "🥈", "🥉"][rank] || ""; | |
| const suffix = medal ? ` <span aria-label="Rank ${rank + 1}">${medal}</span>` : ""; | |
| const url = /^https:\/\/(huggingface\.co|ai\.google\.dev)\//.test(row.url || "") ? row.url : ""; | |
| return `<td class="model-cell">${url ? `<a href="${escapeHtml(url)}" title="${escapeHtml(row.link_title)}" target="_blank" rel="noopener noreferrer">${escapeHtml(value)}</a>${suffix}` : escapeHtml(value) + suffix}</td>`; | |
| } | |
| if (["access", "size"].includes(column.key)) { | |
| const title = column.key === "size" ? row.size_note : ""; | |
| return `<td title="${escapeHtml(title)}"><span class="pill">${escapeHtml(value)}</span></td>`; | |
| } | |
| if (column.score) return `<td class="score ${column.key === "mean" ? "primary" : ""}">${formatScore(value)}</td>`; | |
| return `<td>${escapeHtml(value ?? "—")}</td>`; | |
| } | |
| function renderRows() { | |
| const rows = filteredRows(); | |
| $("#leaderboard-body").innerHTML = rows.map((row, rank) => `<tr>${visibleColumns().map((column) => cell(row, column, rank)).join("")}</tr>`).join(""); | |
| $(".table-shell").classList.toggle("is-empty", rows.length === 0); | |
| $("#empty-state").classList.toggle("hidden", rows.length > 0); | |
| $("#result-count").textContent = `${rows.length} model${rows.length === 1 ? "" : "s"} shown`; | |
| } | |
| async function loadData() { | |
| try { | |
| const response = await fetch("/leaderboard-assets/results.json"); | |
| if (!response.ok) throw new Error(`HTTP ${response.status}`); | |
| const payload = await response.json(); | |
| state.rows = payload.rows; | |
| configureColumns(payload.metrics); | |
| renderHead(); | |
| renderRows(); | |
| } catch (error) { | |
| $("#leaderboard-body").innerHTML = ""; | |
| $("#data-warning").textContent = `The leaderboard could not be loaded: ${error.message}`; | |
| $("#data-warning").classList.remove("hidden"); | |
| } | |
| } | |
| $("#model-filter").addEventListener("change", renderRows); | |
| [$("#show-access"), $("#show-size")].forEach(control => control.addEventListener("change", () => { | |
| renderHead(); | |
| renderRows(); | |
| })); | |
| loadData(); | |