fix details

fix issue with details of models, and benchmark, modify the included details for each sample

backend/data_loader.py

@@ -7,6 +7,7 @@ import io
 import logging
 import re
 import ast
+from collections import deque
 from concurrent.futures import ThreadPoolExecutor, as_completed
 from pathlib import Path
 from typing import Dict, List, Any, Optional
@@ -573,11 +574,11 @@ def load_benchmark_details(
 
     selected_entries.sort(key=lambda x: x[0].lower())
 
-    all_rows: List[Dict[str, Any]] = []
+    rows_by_subtask: List[List[Dict[str, Any]]] = []
     subtasks_summary: List[Dict[str, Any]] = []
     for subtask, info in selected_entries:
         rows = _read_detail_parquet(info["path"], subtask)
-        all_rows.extend(rows)
+        rows_by_subtask.append(rows)
 
         valid = [r for r in rows if isinstance(r.get("is_correct"), bool)]
         correct = sum(1 for r in valid if r["is_correct"])
@@ -591,8 +592,23 @@ def load_benchmark_details(
             "accuracy": accuracy,
         })
 
-    if len(all_rows) > max_rows:
-        all_rows = all_rows[:max_rows]
+    total_rows = sum(len(rows) for rows in rows_by_subtask)
+    if max_rows > 0 and total_rows > max_rows:
+        queues = [deque(rows) for rows in rows_by_subtask]
+        all_rows: List[Dict[str, Any]] = []
+        while len(all_rows) < max_rows:
+            progressed = False
+            for q in queues:
+                if not q:
+                    continue
+                all_rows.append(q.popleft())
+                progressed = True
+                if len(all_rows) >= max_rows:
+                    break
+            if not progressed:
+                break
+    else:
+        all_rows = [row for rows in rows_by_subtask for row in rows]
 
     return {
         "benchmark": benchmark_display,

frontend/leaderboard.html

@@ -777,7 +777,6 @@
                             const output = escapeHtml(asUnknown(r.output));
                             const sampleMeta = [
                                 r.question_id ? `id: ${escapeHtml(r.question_id)}` : null,
-                                r.metric_name ? `metric: ${escapeHtml(r.metric_name)}` : null,
                                 r.metric !== null && r.metric !== undefined ? `score: ${escapeHtml(r.metric)}` : null,
                             ].filter(Boolean).join(" | ");
 
@@ -808,7 +807,8 @@
 
                 // --- MODAL LOGIC ---
                 window.openModelDetails = function (modelName) {
-                    const model = lbData.find(r => r["Model Name"] === modelName);
+                    try {
+                    const model = lbData.find(r => String(r["Model Name"] || "") === String(modelName || ""));
                     if (!model) return;
 
                     const fullPath = model["Model Name"];
@@ -817,7 +817,8 @@
                     const displayModel = hasOrg ? fullPath.substring(splitIndex + 1) : fullPath;
                     const displayOrg = hasOrg ? fullPath.substring(0, splitIndex) : null;
 
-                    $('#modalTitle').innerHTML = `
+                    const modalTitleEl = $('#modalTitle');
+                    if (modalTitleEl) modalTitleEl.innerHTML = `
         <div class="flex flex-col">
             <span>${displayModel}</span>
             ${displayOrg ? `
@@ -833,14 +834,21 @@
                     const revisionForApi = revision === "Unknown" ? "main" : revision;
                     const modelSize = toNumber(model["Model Size"]);
                     const fallbackLikes = model["Hub ❤️"];
-                    $('#modalRank').innerText = "#" + model["Rank"];
-                    $('#modalAvg').innerText = parseFloat(model["Average"]).toFixed(2);
-                    $('#modalSize').innerText = modelSize === null ? "Unknown" : `${Math.floor(modelSize)}B`;
-                    $('#modalLikes').innerText = prettyIntOrUnknown(fallbackLikes);
+                    const modalRankEl = $('#modalRank');
+                    if (modalRankEl) modalRankEl.innerText = "#" + model["Rank"];
+                    const modalAvgEl = $('#modalAvg');
+                    if (modalAvgEl) modalAvgEl.innerText = parseFloat(model["Average"]).toFixed(2);
+                    const modalSizeEl = $('#modalSize');
+                    if (modalSizeEl) modalSizeEl.innerText = modelSize === null ? "Unknown" : `${Math.floor(modelSize)}B`;
+                    const modalLikesEl = $('#modalLikes');
+                    if (modalLikesEl) modalLikesEl.innerText = prettyIntOrUnknown(fallbackLikes);
                     // We don't have an ID for downloads yet in the static HTML, so we rely on the injected HTML below
-                    $('#modalLicense').innerText = asUnknown(model["License"]);
-                    $('#modalPrecision').innerText = asUnknown(model["Precision"]);
-                    $('#modalRevision').innerText = revision;
+                    const modalLicenseEl = $('#modalLicense');
+                    if (modalLicenseEl) modalLicenseEl.innerText = asUnknown(model["License"]);
+                    const modalPrecisionEl = $('#modalPrecision');
+                    if (modalPrecisionEl) modalPrecisionEl.innerText = asUnknown(model["Precision"]);
+                    const modalRevisionEl = $('#modalRevision');
+                    if (modalRevisionEl) modalRevisionEl.innerText = revision;
 
                     // --- 1. MODIFIED: Added Download Span to Metadata Line ---
                     // I added the separator dot and the Downloads span at the end of this block
@@ -875,7 +883,8 @@
                         .then(response => response.json())
                         .then(data => {
                             if (data.likes !== undefined && data.likes !== null) {
-                                $('#modalLikes').innerText = prettyIntOrUnknown(data.likes);
+                                const likesEl = $('#modalLikes');
+                                if (likesEl) likesEl.innerText = prettyIntOrUnknown(data.likes);
                             }
                             // Check if API returns downloads and update
                             if (data.downloads !== undefined) {
@@ -887,15 +896,19 @@
                             console.error('Error fetching stats:', error);
                             const dl = document.getElementById('modalDownloads');
                             if (dl) dl.innerText = "Unknown";
-                            $('#modalLikes').innerText = prettyIntOrUnknown(fallbackLikes);
+                            const likesEl = $('#modalLikes');
+                            if (likesEl) likesEl.innerText = prettyIntOrUnknown(fallbackLikes);
                         });
 
-                    $('#modalLinkHF').href = `https://huggingface.co/${model["Model Name"]}`;
+                    const modelPath = encodeURIComponent(String(model["Model Name"] || "")).replace(/%2F/g, '/');
+                    const hfLink = $('#modalLinkHF');
+                    if (hfLink) hfLink.href = `https://huggingface.co/${modelPath}`;
 
-                    $('#modalLinkDetails').href = `https://huggingface.co/datasets/qimma/leaderboard-details/tree/main/${model["Model Name"]}`;
+                    const detailsLink = $('#modalLinkDetails');
+                    if (detailsLink) detailsLink.href = `https://huggingface.co/datasets/qimma/leaderboard-details/tree/main/${modelPath}`;
 
                     const chartContainer = $('#modalChart');
-                    chartContainer.innerHTML = "";
+                    if (chartContainer) chartContainer.innerHTML = "";
 
                     EVAL_COLUMNS.forEach(col => {
                         const score = parseFloat(model[col]) || 0;
@@ -910,7 +923,7 @@
                 <div class="w-12 text-sm font-bold text-slate-700 dark:text-slate-200 text-right shrink-0">${score.toFixed(2)}</div>
             </div>
         `;
-                        chartContainer.insertAdjacentHTML('beforeend', barHtml);
+                        if (chartContainer) chartContainer.insertAdjacentHTML('beforeend', barHtml);
 
                         setTimeout(() => {
                             const bar = document.getElementById(`bar-${col.replace(/\s+/g, '')}`);
@@ -918,12 +931,17 @@
                         }, 100);
                     });
 
-                    $('#modelModal').classList.remove('hidden');
+                    const modelModalEl = $('#modelModal');
+                    if (modelModalEl) modelModalEl.classList.remove('hidden');
                     document.body.style.overflow = 'hidden';
                     if (window.lucide) lucide.createIcons();
+                    } catch (err) {
+                        console.error("openModelDetails failed", err);
+                    }
                 };
                 window.closeModelDetails = function () {
-                    $('#modelModal').classList.add('hidden');
+                    const modelModalEl = $('#modelModal');
+                    if (modelModalEl) modelModalEl.classList.add('hidden');
                     document.body.style.overflow = '';
                 };
 
@@ -1073,11 +1091,12 @@
                                 const type = (typeIdx > -1 && r.cells[typeIdx]) ? r.cells[typeIdx].data : "";
                                 const tMap = { "base": "🟢", "instruct": "🔶"};
                                 const tIcon = tMap[type] || type;
+                                const em = encodeURIComponent(String(c ?? ""));
 
                                 return gridjs.html(`
                         <div class="relative w-full h-[38px] flex items-center group pr-6">
                             ${type ? `<span class="mr-2 text-lg select-none" title="${type}">${tIcon}</span>` : ''}
-                            <div onclick="window.openModelDetails('${c}')" class="font-bold text-indigo-600 dark:text-indigo-400 hover:underline cursor-pointer line-clamp-2-custom leading-[1.3] select-text" title="Click for details">${c}</div>
+                            <div onclick="window.openModelDetails(decodeURIComponent('${em}'))" class="font-bold text-indigo-600 dark:text-indigo-400 hover:underline cursor-pointer line-clamp-2-custom leading-[1.3] select-text" title="Click for details">${c}</div>
                         </div>
                     `);
                             };