UI polish: table options grouping, column visibility redesign, model size fixes

app.py

@@ -55,7 +55,7 @@ def update_leaderboard_cache():
 
             if "Model Size" in df.columns:
                 size_series = pd.to_numeric(df["Model Size"], errors="coerce")
-                df["Model Size"] = size_series.apply(lambda v: int(v) if pd.notna(v) else "Unknown")
+                df["Model Size"] = size_series.apply(lambda v: round(float(v), 1) if pd.notna(v) else "Unknown")
 
             if "Hub ❤️" in df.columns:
                 likes_series = pd.to_numeric(df["Hub ❤️"], errors="coerce")

backend/data_loader.py

@@ -1198,6 +1198,22 @@ def load_benchmark_details(
     }
 
 
+# Manual size overrides (in billions) for models where HF API returns no safetensors metadata.
+_MODEL_SIZE_OVERRIDES: Dict[str, float] = {
+    "Qwen/Qwen2.5-14B-Instruct":             14.0,
+    "Qwen/Qwen2.5-32B-Instruct":             32.0,
+    "Qwen/Qwen3-30B-A3B-Instruct-2507":      30.0,
+    "Qwen/Qwen3-235B-A22B-Instruct-2507":   235.0,
+    "google/gemma-3-270m-it":                 0.27,
+    "google/gemma-3-1b-it":                   1.0,
+    "google/gemma-3-1b-pt":                   1.0,
+    "google/gemma-3-4b-it":                   4.0,
+    "google/gemma-3-12b-it":                 12.0,
+    "google/gemma-3-27b-pt":                 27.0,
+    "microsoft/Phi-4-mini-instruct":          3.8,
+}
+
+
 def _fetch_hf_metadata(model_name: str) -> Dict[str, Any]:
     try:
         info = API.model_info(repo_id=model_name, token=hf_api_token)
@@ -1215,7 +1231,7 @@ def _fetch_hf_metadata(model_name: str) -> Dict[str, Any]:
     if model_size == 0:
         safetensors = getattr(info, "safetensors", None)
         if not safetensors or not safetensors.get("total"):
-            model_size = None
+            model_size = _MODEL_SIZE_OVERRIDES.get(model_name)
 
     return {
         "License": license_name,

frontend/leaderboard.html

@@ -687,72 +687,68 @@
                         data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
             </div>
 
-            <!-- Section 1: Ranking Mode -->
-            <div class="mb-5">
-                <h4 class="text-xs font-bold text-slate-400 mb-3 flex items-center gap-2">
-                    Ranking Mode
-                    <div class="relative tooltip-trigger group cursor-help">
-                        <i data-lucide="info"
-                            class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
-                        <div
-                            class="tooltip-content invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 p-2 bg-slate-800 text-white text-xs rounded shadow-lg transition-all z-50 text-left pointer-events-none">
-                            <p>
-                                <strong>Global Rank:</strong> shows the rank based on the global average across all benchmarks.<br>
-                                <strong>Current View Rank:</strong> updates the rank based on the current sort and filters.
-                            </p>
-                            <div
-                                class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-slate-800">
+            <!-- Group 1: View Options -->
+            <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">View Options</p>
+            <div class="mb-4 p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/60">
+
+                <!-- Section 1: Ranking Mode -->
+                <div class="mb-4">
+                    <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
+                        Ranking Mode
+                        <div class="relative tooltip-trigger group cursor-help">
+                            <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
+                            <div class="tooltip-content invisible opacity-0 absolute top-full left-1/2 -translate-x-1/2 mt-2 w-52 p-3 bg-white/75 dark:bg-slate-700/60 backdrop-blur-sm text-slate-500 dark:text-slate-400 text-[9px] rounded-lg shadow-sm border border-slate-200/60 dark:border-slate-600/50 transition-all z-50 text-left pointer-events-none">
+                                <div class="absolute bottom-full left-1/2 -translate-x-1/2 border-4 border-transparent border-b-slate-200 dark:border-b-slate-600"></div>
+                                <p class="mb-1"><span class="font-bold text-slate-600 dark:text-slate-300">Global Rank:</span> shows the rank based on the global average across all benchmarks.</p>
+                                <p><span class="font-bold text-slate-600 dark:text-slate-300">Current View Rank:</span> updates the rank based on the current sort and filters.</p>
                             </div>
                         </div>
+                    </h4>
+                    <div class="flex flex-wrap gap-1.5">
+                        <button onclick="window.setRankMode('static')" id="rankBtnStatic"
+                            class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300">Global Rank</button>
+                        <button onclick="window.setRankMode('dynamic')" id="rankBtnDynamic"
+                            class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-white border-slate-200 text-slate-500 hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600">Current View Rank</button>
                     </div>
-
-                </h4>
-                <div class="flex flex-wrap gap-1.5">
-                    <button onclick="window.setRankMode('static')" id="rankBtnStatic"
-                        class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300">Global Rank</button>
-                    <button onclick="window.setRankMode('dynamic')" id="rankBtnDynamic"
-                        class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-white border-slate-200 text-slate-500 hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600">Current View Rank</button>
                 </div>
-            </div>
 
-            <!-- Section 2: Avg Score Calc -->
-            <div>
-                <h4 class="text-xs font-bold text-slate-400 mb-3 flex items-center gap-2">
-                    Average Score Calculation
-                    <div class="relative tooltip-trigger group cursor-help">
-                        <i data-lucide="info"
-                            class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
-                        <div
-                            class="tooltip-content invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 p-2 bg-slate-800 text-white text-xs rounded shadow-lg transition-all z-50 text-left pointer-events-none">
-                            <p>
-                                <strong>Global Average:</strong> Calculates the average across all benchmarks.<br>
-                                <strong>Filtered Average:</strong> Recalculates the average using only the currently visible evaluation columns.
-                            </p>
-                            <div
-                                class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-slate-800">
+                <!-- Section 2: Avg Score Calc -->
+                <div>
+                    <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
+                        Average Score Calculation
+                        <div class="relative tooltip-trigger group cursor-help">
+                            <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
+                            <div class="tooltip-content invisible opacity-0 absolute top-full left-1/2 -translate-x-1/2 mt-2 w-52 p-3 bg-white/75 dark:bg-slate-700/60 backdrop-blur-sm text-slate-500 dark:text-slate-400 text-[9px] rounded-lg shadow-sm border border-slate-200/60 dark:border-slate-600/50 transition-all z-50 text-left pointer-events-none">
+                                <div class="absolute bottom-full left-1/2 -translate-x-1/2 border-4 border-transparent border-b-slate-200 dark:border-b-slate-600"></div>
+                                <p class="mb-1"><span class="font-bold text-slate-600 dark:text-slate-300">Global Average:</span> calculates the average across all benchmarks.</p>
+                                <p><span class="font-bold text-slate-600 dark:text-slate-300">Filtered Average:</span> recalculates using only the currently visible evaluation columns.</p>
                             </div>
                         </div>
-
+                    </h4>
+                    <div class="flex flex-wrap gap-1.5">
+                        <button onclick="window.setAvgMode('all')" id="avgBtnAll"
+                            class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300">Global Average</button>
+                        <button onclick="window.setAvgMode('visible')" id="avgBtnVisible"
+                            class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-white border-slate-200 text-slate-500 hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600">Filtered Average</button>
                     </div>
-                </h4>
-                <div class="flex flex-wrap gap-1.5">
-                    <button onclick="window.setAvgMode('all')" id="avgBtnAll"
-                        class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300">Global Average</button>
-                    <button onclick="window.setAvgMode('visible')" id="avgBtnVisible"
-                        class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-white border-slate-200 text-slate-500 hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600">Filtered Average</button>
                 </div>
             </div>
 
-            <!-- Section 3: Task Type -->
-            <div class="mt-5">
-                <h4 class="text-xs font-bold text-slate-400 mb-2">Task Type</h4>
-                <div id="taskTypeFilterBtns" class="flex flex-wrap gap-1.5"></div>
-            </div>
+            <!-- Group 2: Benchmark Filters -->
+            <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Benchmark Filters</p>
+            <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/60">
+
+                <!-- Section 3: Task Type -->
+                <div class="mb-4">
+                    <h4 class="text-xs font-bold text-slate-400 mb-2">Task Type</h4>
+                    <div id="taskTypeFilterBtns" class="flex flex-wrap gap-1.5"></div>
+                </div>
 
-            <!-- Section 4: Domain -->
-            <div class="mt-5">
-                <h4 class="text-xs font-bold text-slate-400 mb-2">Domain</h4>
-                <div id="domainFilterBtns" class="flex flex-wrap gap-1.5"></div>
+                <!-- Section 4: Domain -->
+                <div>
+                    <h4 class="text-xs font-bold text-slate-400 mb-2">Domain</h4>
+                    <div id="domainFilterBtns" class="flex flex-wrap gap-1.5"></div>
+                </div>
             </div>
 
         </div>
@@ -763,21 +759,19 @@
             <i data-lucide="book-open" id="colMenuIcon" class="h-5 w-5"></i> <span>Column Visibility</span>
         </button>
         <div id="colMenu"
-            class="hidden absolute top-10 right-0 z-50 w-80 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700">
+            class="hidden absolute top-10 right-0 z-50 w-80 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 max-h-[80vh] overflow-y-auto">
             <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
-                <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Visible Columns</span>
+                <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Column Visibility</span>
                 <button onclick="window.resetColumns()"
                     class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
                         data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
             </div>
-            <div class="mb-5">
-                <h4 class="text-xs font-bold text-slate-400 mb-2 flex justify-between">Eval Scores <span
-                        id="count-scores" class="text-slate-500"></span></h4>
+            <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Benchmarks</p>
+            <div class="mb-4 p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/60">
                 <div id="colListScores" class="flex flex-wrap gap-2"></div>
             </div>
-            <div>
-                <h4 class="text-xs font-bold text-slate-400 mb-2 flex justify-between">Model Details <span
-                        id="count-details" class="text-slate-500"></span></h4>
+            <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Model Details</p>
+            <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/60">
                 <div id="colListDetails" class="flex flex-wrap gap-2"></div>
             </div>
         </div>
@@ -1067,14 +1061,16 @@ taskTypes: [],        // [] = All; otherwise selected subset
                     $('#searchInput').addEventListener('keyup', applyFilters);
 
                     // Close menus on outside click
+                    // Use composedPath() so clicks on dynamically re-rendered children
+                    // (e.g. filter pills rebuilt via innerHTML) still count as "inside".
                     document.addEventListener('click', e => {
-                        const t = e.target;
+                        const path = e.composedPath();
                         // Col Menu
-                        if (!$('#colMenu').classList.contains('hidden') && !$('#colMenu').contains(t) && !$('#colMenuTrigger').contains(t)) {
+                        if (!$('#colMenu').classList.contains('hidden') && !path.includes($('#colMenu')) && !path.includes($('#colMenuTrigger'))) {
                             toggleColMenu();
                         }
                         // Table Ops Menu
-                        if (!$('#tableOpsMenu').classList.contains('hidden') && !$('#tableOpsMenu').contains(t) && !$('#tableOpsTrigger').contains(t)) {
+                        if (!$('#tableOpsMenu').classList.contains('hidden') && !path.includes($('#tableOpsMenu')) && !path.includes($('#tableOpsTrigger'))) {
                             toggleTableOps();
                         }
                     });
@@ -1955,7 +1951,15 @@ window.toggleExpandText = function (idBase, btn) {
                         if (key === "Model Size") {
                             def.formatter = (c) => {
                                 const n = toNumber(c);
-                                return gridjs.html(`<span class="font-mono">${n === null ? "Unknown" : `${Math.floor(n)}B`}</span>`);
+                                const label = n === null ? "Unknown" : n < 1 ? `${Math.round(n * 1000)}M` : `${Math.round(n)}B`;
+                                return gridjs.html(`<div class="flex justify-center"><span class="inline-block min-w-[6rem] text-center px-2 py-1 rounded-md border text-xs font-mono font-medium shadow-sm bg-slate-100 text-slate-600 border-slate-300 dark:bg-slate-700 dark:text-slate-300 dark:border-slate-500">${label}</span></div>`);
+                            };
+                        }
+
+                        if (key === "License") {
+                            def.formatter = (c) => {
+                                const label = (c && c !== "Unknown") ? c : "Unknown";
+                                return gridjs.html(`<div class="flex justify-center"><span class="inline-block min-w-[6rem] text-center px-2 py-1 rounded-md border text-xs font-medium shadow-sm bg-slate-100 text-slate-600 border-slate-300 dark:bg-slate-700 dark:text-slate-300 dark:border-slate-500 max-w-[160px] truncate" title="${label}">${label}</span></div>`);
                             };
                         }
 
@@ -2072,10 +2076,10 @@ window.toggleExpandText = function (idBase, btn) {
                 function buildColMenuDOM() {
                     const addBtns = (grp, el) => {
                         $(el).innerHTML = '';
-                        tableColumns.filter(c => c.group === grp && !["_link", "T", "Type", "Full Type", "Precision"].includes(c.id)).forEach(c => {
+                        tableColumns.filter(c => c.group === grp && !["_link", "T", "Type", "Full Type", "Precision", "Hub ❤️", "Revision"].includes(c.id)).forEach(c => {
                             const b = document.createElement('button');
                             b.innerText = c.id.includes("Average") ? "Average" : (c.id === "Model Size Filter" ? "Params" : c.id);
-                            b.className = `px-2 py-1 text-xs font-medium rounded-md border transition-all select-none ${!c.hidden ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-slate-600 border-slate-200 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300"}`;
+                            b.className = `px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none ${!c.hidden ? "bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300" : "bg-white border-slate-200 text-slate-500 hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600"}`;
                             b.onclick = (e) => {
                                 e.stopPropagation();
                                 c.hidden = !c.hidden;
@@ -2085,7 +2089,6 @@ window.toggleExpandText = function (idBase, btn) {
                             };
                             $(el).appendChild(b);
                         });
-                        $(`#count-${grp}`).innerText = `(${tableColumns.filter(x => x.group === grp && !x.hidden).length}/${tableColumns.filter(x => x.group === grp).length})`;
                     };
                     addBtns('scores', '#colListScores'); addBtns('details', '#colListDetails');
                 }