app.js

let models = [];
let descending = true;

const paramFilter = document.getElementById("paramFilter");
const table = document.getElementById("leaderboard");
const sortSelect = document.getElementById("sortSelect");
const directionButton = document.getElementById("direction");


fetch("models.json")
    .then(response => response.json())
    .then(data => {
        models = data;
        render();
    });


function formatParams(num) {
    if (num >= 1e9)
        return (num / 1e9).toFixed(1) + "B";

    return (num / 1e6).toFixed(0) + "M";
}


function render() {

    table.innerHTML = ""; // clear old rows
    const sort = sortSelect.value;

    let sorted = [...models];

    const filter = paramFilter.value;

    if (filter === "200m") {
        sorted = sorted.filter(m => m.parameters < 200_000_000);
    }

    if (filter === "500m") {
        sorted = sorted.filter(m => m.parameters < 500_000_000);
    }

    if (filter === "1b") {
        sorted = sorted.filter(m => m.parameters < 1_000_000_000);
    }

    if (filter === "2b") {
        sorted = sorted.filter(m => m.parameters < 2_000_000_000);
    }

    if (filter === "4b") {
        sorted = sorted.filter(m => m.parameters < 4_000_000_000);
    }


    sorted.forEach(model => {
        model.efficiency = model.parameters / model.overall;
    });


    sorted.sort((a, b) => {

        let result;

        if (sort === "parameters")
            result = a.parameters - b.parameters;

        else if (sort === "ctx")
            result = a.ctx - b.ctx;

        else if (sort === "efficiency")
            result = a.efficiency - b.efficiency;

        else
            result = a[sort] - b[sort];


        return descending ? -result : result;
    });

sorted.forEach((model, index) => {

    const row = document.createElement("tr");

    row.innerHTML = `
        <td>${index + 1}</td>

        <td>
            <a href="${model.hf}" target="_blank">
                ${model.name}
            </a>
        </td>

        <td>${model.parameters_display || formatParams(model.parameters)}</td>

        <td>${model.ctx}</td>

        <td>${model.type || "Unknown"}</td>

        <td>
            ${(model.efficiency / 1000000).toFixed(2)}M
        </td>

        <td>${model.overall.toFixed(2)}</td>
        <td>${model.knowledge.toFixed(2)}</td>
        <td>${model.reasoning.toFixed(2)}</td>
        <td>${model.instructions.toFixed(2)}</td>
        <td>${model.coding.toFixed(2)}</td>
        <td>${model.math.toFixed(2)}</td>

        <td class="notes">
            ${model.notes || ""}
        </td>
     `;

        table.appendChild(row);
    });
}


sortSelect.addEventListener(
    "change",
    render
);

paramFilter.addEventListener(
    "change",
    render
);

directionButton.addEventListener(
    "click",
    () => {

        descending = !descending;

        directionButton.textContent =
            descending
            ? "↓ Descending"
            : "↑ Ascending";

        render();
    }
);