const state = { view: "summary", sort: "overall", direction: "desc", query: "", type: "all" };
const languages = ["DE", "EN", "ES", "FR", "ID", "IT", "NL", "PT", "VI", "AR", "HI", "JP", "KO", "RU", "TH", "ZH", "ZH-T"];
const summaryColumns = [["overall", "Overall"], ["digital", "Digital"], ["photo", "Photo"], ["latin", "Latin"], ["non_latin", "Non-Latin"], ["private", "Private"]];
function value(score) { return Number.isFinite(score) ? score.toFixed(1) : "โ"; }
function metadata(model) { return MODEL_METADATA[model.name] || { label: model.name, links: [] }; }
function linkIcon(label) {
if (label === "GitHub") return ``;
return `๐ค`;
}
function modelLinks(model) {
const links = metadata(model).links || [];
if (!links.length) return "";
return `${links.map((link) => `${linkIcon(link.label)}`).join("")}`;
}
function columnsForView() { return state.view === "languages" ? languages.map((language) => [language, language]) : summaryColumns; }
function scoreFor(model, key) { return languages.includes(key) ? model.languages[key] : model[key]; }
function sortIndicator(key) {
if (state.sort !== key) return `โ`;
return `${state.direction === "desc" ? "โ" : "โ"}`;
}
function renderHeader() {
const headings = columnsForView().map(([key, label]) => ` | `).join("");
document.querySelector("#leaderboard-head").innerHTML = `| Rank | Model | Type | ${headings}
|---|
`;
}
function render(data) {
const models = data.models
.filter((m) => state.type === "all" || m.type === state.type)
.filter((m) => `${m.name} ${m.source_name || ""}`.toLowerCase().includes(state.query))
.sort((a, b) => {
const difference = scoreFor(a, state.sort) - scoreFor(b, state.sort);
return state.direction === "desc" ? -difference : difference;
});
renderHeader();
document.querySelector("#leaderboard-body").innerHTML = models.map((model, index) => {
const scores = columnsForView().map(([key]) => `${value(scoreFor(model, key))} | `).join("");
return `| ${index + 1} | ${metadata(model).label}${modelLinks(model)} | ${model.type} | ${scores}
`;
}).join("");
document.querySelectorAll("[data-column]").forEach((button) => button.addEventListener("click", () => {
const column = button.dataset.column;
state.direction = state.sort === column && state.direction === "desc" ? "asc" : "desc";
state.sort = column;
render(data);
}));
}
fetch("leaderboard.json")
.then((response) => response.json())
.then((data) => {
document.querySelector("#updated").textContent = `Last updated ยท ${data.benchmark.updated}`;
render(data);
document.querySelectorAll("[data-view]").forEach((button) => button.addEventListener("click", () => {
state.view = button.dataset.view;
state.sort = state.view === "languages" ? "EN" : "overall";
state.direction = "desc";
document.querySelectorAll("[data-view]").forEach((item) => item.classList.toggle("active", item === button));
render(data);
}));
document.querySelector("#search").addEventListener("input", (event) => { state.query = event.target.value.toLowerCase().trim(); render(data); });
document.querySelector("#type-filter").addEventListener("change", (event) => { state.type = event.target.value; render(data); });
})
.catch(() => { document.querySelector("#leaderboard-body").innerHTML = '| Could not load leaderboard data. |
'; });