Create app.js

app.js

@@ -0,0 +1,111 @@
+let models = [];
+let descending = true;
+
+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() {
+
+    const sort = sortSelect.value;
+
+    let sorted = [...models];
+
+    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;
+    });
+
+
+    table.innerHTML = "";
+
+
+    sorted.forEach((model, index) => {
+
+        const row = document.createElement("tr");
+
+        row.innerHTML = `
+            <td>${index + 1}</td>
+            <td>${model.parameters_display || formatParams(model.parameters)}</td>
+            <td>${model.ctx}</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>
+                <a href="${model.hf}" target="_blank">
+                    🤗 HF
+                </a>
+            </td>
+        `;
+
+        table.appendChild(row);
+    });
+}
+
+
+sortSelect.addEventListener(
+    "change",
+    render
+);
+
+
+directionButton.addEventListener(
+    "click",
+    () => {
+
+        descending = !descending;
+
+        directionButton.textContent =
+            descending
+            ? "↓ Descending"
+            : "↑ Ascending";
+
+        render();
+    }
+);