UI polish: sticky avg column at 3rd, global color gradient, podium links, cards pronounced

backend/config.py

@@ -22,7 +22,7 @@ RESULTS_TASKS: List[Tuple[Any, Any, str]] = [
     ("qimma-ArabicMMLU:_average|0",         "acc:logprob_normalization=LogProbCharNorm(name='norm', ignore_first_space=False)",     "ArabicMMLU"),
     ("qimma-ArabCulture:_average|0",        "acc:logprob_normalization=LogProbCharNorm(name='norm', ignore_first_space=False)",     "ArabCulture"),
     ("qimma-PalmX:_average|0",                  "acc:logprob_normalization=LogProbCharNorm(name='norm', ignore_first_space=False)",     "PALMX"),
-    ("qimma-3lmSTEM:_average|0",                    "acc:logprob_normalization=LogProbCharNorm(name='norm', ignore_first_space=False)",     "3lmSTEM"),
+    ("qimma-3lmSTEM:_average|0",                    "acc:logprob_normalization=LogProbCharNorm(name='norm', ignore_first_space=False)",     "3LM STEM"),
     ("qimma-AraTrust|0",                    "acc:logprob_normalization=LogProbCharNorm(name='norm', ignore_first_space=False)",     "AraTrust"),
     ("qimma-Mizan|0", "normalized_mc_prob_norm",     "MizanQA"),
     (

frontend/about.html

@@ -159,21 +159,49 @@
                     </div>
                     <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Resources</h2>
                 </div>
-                <div class="flex flex-wrap gap-3">
-                    <a href="#" target="_blank"
-                        class="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30 text-slate-700 dark:text-slate-300 hover:border-indigo-400 dark:hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all text-sm font-medium">
-                        <i data-lucide="file-text" class="w-4 h-4"></i>
-                        Paper <span class="text-xs text-slate-400 dark:text-slate-500 font-normal ml-1">(coming soon)</span>
-                    </a>
+                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                    <!-- Paper -->
+                    <div class="flex flex-col gap-3 p-5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30">
+                        <div class="flex items-center gap-2 text-slate-700 dark:text-slate-300">
+                            <i data-lucide="file-text" class="w-5 h-5 shrink-0"></i>
+                            <span class="font-semibold">Paper</span>
+                        </div>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
+                            Describes the full methodology, benchmark design, and analysis behind QIMMA — including task selection, scoring, and model comparisons.
+                        </p>
+                        <span class="inline-flex items-center gap-1 text-xs text-slate-400 dark:text-slate-500 font-medium cursor-not-allowed">
+                            <i data-lucide="clock" class="w-3 h-3"></i> Coming soon
+                        </span>
+                    </div>
+
+                    <!-- Blog Post -->
                     <a href="https://huggingface.co/blog/tiiuae/qimma-arabic-leaderboard" target="_blank"
-                        class="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30 text-slate-700 dark:text-slate-300 hover:border-indigo-400 dark:hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all text-sm font-medium">
-                        <i data-lucide="newspaper" class="w-4 h-4"></i>
-                        Blog Post
+                        class="flex flex-col gap-3 p-5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30 hover:border-indigo-400 dark:hover:border-indigo-500 hover:shadow-md transition-all group">
+                        <div class="flex items-center gap-2 text-slate-700 dark:text-slate-300 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+                            <i data-lucide="newspaper" class="w-5 h-5 shrink-0"></i>
+                            <span class="font-semibold">Blog Post</span>
+                        </div>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
+                            A high-level overview of QIMMA, its goals, the benchmarks it covers, and key findings from the evaluation of Arabic language models.
+                        </p>
+                        <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
+                            Read on Hugging Face <i data-lucide="arrow-right" class="w-3 h-3"></i>
+                        </span>
                     </a>
+
+                    <!-- GitHub -->
                     <a href="https://github.com/tiiuae/QIMMA-leaderboard" target="_blank"
-                        class="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30 text-slate-700 dark:text-slate-300 hover:border-indigo-400 dark:hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all text-sm font-medium">
-                        <i data-lucide="github" class="w-4 h-4"></i>
-                        GitHub
+                        class="flex flex-col gap-3 p-5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30 hover:border-indigo-400 dark:hover:border-indigo-500 hover:shadow-md transition-all group">
+                        <div class="flex items-center gap-2 text-slate-700 dark:text-slate-300 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+                            <i data-lucide="github" class="w-5 h-5 shrink-0"></i>
+                            <span class="font-semibold">GitHub Repository</span>
+                        </div>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
+                            Contains the full evaluation pipeline used to produce every score on this leaderboard. Use it to reproduce results, run evaluations on your own models, or extend the benchmark suite.
+                        </p>
+                        <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
+                            View on GitHub <i data-lucide="arrow-right" class="w-3 h-3"></i>
+                        </span>
                     </a>
                 </div>
                 <p class="mt-5 text-sm text-slate-600 dark:text-slate-400">

frontend/header.html

@@ -29,9 +29,9 @@
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
 
             <!-- Podium -->
-            <div class="rounded-xl p-6 shadow-sm text-white relative overflow-visible group col-span-1 sm:col-span-2 lg:col-span-1 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
+            <div class="rounded-xl p-6 shadow-sm text-white relative overflow-hidden group col-span-1 sm:col-span-2 lg:col-span-1 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
                 style="background: linear-gradient(to bottom, #2d7d65, #1f604f);">
-                <div class="absolute -right-6 -top-6 w-20 h-20 rounded-full opacity-50 group-hover:scale-[2.5] transition-transform duration-500"
+                <div class="absolute -right-6 -top-6 w-[86px] h-[86px] rounded-full opacity-50 group-hover:scale-[2.5] transition-transform duration-500"
                     style="background-color: #174d3e;"></div>
                 <div class="flex justify-between items-start mb-4 relative z-10">
                     <p class="text-sm font-medium text-white/80 uppercase tracking-wider">Podium</p>
@@ -41,9 +41,9 @@
             </div>
 
             <!-- Total Models -->
-            <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
+            <div class="stat-card p-4 rounded-2xl border border-slate-300 dark:border-slate-600 shadow-md flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
                 style="background-color: var(--card-bg);">
-                <div class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl">
+                <div class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl border border-indigo-200 dark:border-indigo-700">
                     <i data-lucide="database" class="w-6 h-6 text-indigo-600 dark:text-indigo-400"></i>
                 </div>
                 <div>
@@ -53,28 +53,28 @@
             </div>
 
             <!-- Eval Status -->
-            <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
+            <div class="stat-card p-4 rounded-2xl border border-slate-300 dark:border-slate-600 shadow-md flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
                 style="background-color: var(--card-bg);">
-                <div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl">
+                <div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl border border-emerald-200 dark:border-emerald-700 shrink-0">
                     <i data-lucide="activity" class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i>
                 </div>
                 <div class="w-full">
                     <p class="text-xs font-bold uppercase text-slate-400 tracking-wider mb-2">Eval Status</p>
                     <div class="grid grid-cols-4 gap-1 text-center mb-2">
                         <div>
-                            <div class="text-lg font-bold text-emerald-600 dark:text-emerald-400" id="stat-done">--</div>
+                            <div class="text-base font-bold text-emerald-600 dark:text-emerald-400" id="stat-done">--</div>
                             <div class="text-[10px] text-slate-500 dark:text-slate-400">Done</div>
                         </div>
                         <div>
-                            <div class="text-lg font-bold text-rose-600 dark:text-rose-400" id="stat-failed">--</div>
+                            <div class="text-base font-bold text-rose-600 dark:text-rose-400" id="stat-failed">--</div>
                             <div class="text-[10px] text-slate-500 dark:text-slate-400">Failed</div>
                         </div>
                         <div>
-                            <div class="text-lg font-bold text-blue-600 dark:text-blue-400" id="stat-running">--</div>
-                            <div class="text-[10px] text-slate-500 dark:text-slate-400">Run</div>
+                            <div class="text-base font-bold text-blue-600 dark:text-blue-400" id="stat-running">--</div>
+                            <div class="text-[10px] text-slate-500 dark:text-slate-400">Running</div>
                         </div>
                         <div>
-                            <div class="text-lg font-bold text-amber-500 dark:text-amber-400" id="stat-queue">--</div>
+                            <div class="text-base font-bold text-amber-500 dark:text-amber-400" id="stat-queue">--</div>
                             <div class="text-[10px] text-slate-500 dark:text-slate-400">Queue</div>
                         </div>
                     </div>
@@ -88,9 +88,9 @@
             </div>
 
             <!-- Benchmarks -->
-            <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
+            <div class="stat-card p-4 rounded-2xl border border-slate-300 dark:border-slate-600 shadow-md flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
                 style="background-color: var(--card-bg);">
-                <div class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl">
+                <div class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl border border-purple-200 dark:border-purple-700">
                     <i data-lucide="bar-chart-2" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
                 </div>
                 <div>
@@ -141,7 +141,7 @@
                     <div class="group/podium relative py-0.5">
                         <div class="flex items-center gap-3">
                             <div class="w-4 h-5 shrink-0 rounded-full ${rankStyles[i] || 'bg-slate-100 text-emerald-900'} flex items-center justify-center text-xs font-bold">${i + 1}</div>
-                            <span class="text-sm font-semibold truncate flex-1 min-w-0 cursor-help">${esc(m["Model Name"])}</span>
+                            <span class="text-sm font-semibold truncate flex-1 min-w-0 cursor-pointer hover:underline" onclick="window.openModelDetails && window.openModelDetails(decodeURIComponent('${encodeURIComponent(m["Model Name"])}'))">${esc(m["Model Name"].split('/').pop())}</span>
                             <span class="ml-auto text-xs font-mono text-emerald-300">${parseFloat(m[avgK]).toFixed(1)}</span>
                         </div>
                         <div class="absolute left-7 top-full mt-1 z-30 pointer-events-none opacity-0 translate-y-1 group-hover/podium:opacity-100 group-hover/podium:translate-y-0 transition-all duration-200 ease-out">

frontend/leaderboard.html

@@ -17,6 +17,29 @@
 <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100 relative">
 
     <style>
+        #table-outer {
+            position: relative;
+            --green-opacity: 0.07;
+            --red-opacity: 0;
+        }
+
+        #table-outer::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(
+                to bottom,
+                rgba(16, 185, 129, var(--green-opacity)) 0%,
+                transparent 30%,
+                transparent 70%,
+                rgba(239, 68, 68, var(--red-opacity)) 100%
+            );
+            pointer-events: none;
+            z-index: 1;
+            border-radius: 1rem;
+            transition: background 0.15s ease;
+        }
+
         #table-wrapper {
             max-height: 700px;
             overflow-y: auto;
@@ -76,6 +99,19 @@
             position: relative;
             z-index: 20;
             border-top: none !important;
+            box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
+        }
+
+        .gridjs-td {
+            box-shadow: 1px 0 0 rgba(148, 163, 184, 0.15);
+        }
+
+        .dark .gridjs-th {
+            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.4);
+        }
+
+        .dark .gridjs-td {
+            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.3);
         }
 
         #table-wrapper .gridjs-th.sticky-rank-col,
@@ -89,7 +125,7 @@
         #table-wrapper .gridjs-th.sticky-model-col,
         #table-wrapper .gridjs-td.sticky-model-col {
             position: sticky !important;
-            left: var(--sticky-model-left, 110px) !important;
+            left: var(--sticky-model-left, 100px) !important;
             z-index: 31 !important;
             box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
         }
@@ -133,7 +169,7 @@
 
         #table-wrapper table.gridjs-table thead th:nth-child(2) {
             position: sticky !important;
-            left: var(--sticky-model-left, 110px) !important;
+            left: var(--sticky-model-left, 100px) !important;
             top: 0 !important;
             z-index: 45 !important;
             background: #f1f5f9 !important;
@@ -141,15 +177,64 @@
 
         #table-wrapper table.gridjs-table tbody td:nth-child(2) {
             position: sticky !important;
-            left: var(--sticky-model-left, 110px) !important;
+            left: var(--sticky-model-left, 100px) !important;
             z-index: 29 !important;
         }
 
+        #table-wrapper table.gridjs-table thead th:nth-child(3) {
+            position: sticky !important;
+            left: var(--sticky-avg-left, 620px) !important;
+            top: 0 !important;
+            z-index: 44 !important;
+            background: #f1f5f9 !important;
+            box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
+        }
+
+        #table-wrapper table.gridjs-table tbody td:nth-child(3) {
+            position: sticky !important;
+            left: var(--sticky-avg-left, 620px) !important;
+            z-index: 28 !important;
+            box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
+        }
+
         .dark #table-wrapper table.gridjs-table thead th:nth-child(1),
-        .dark #table-wrapper table.gridjs-table thead th:nth-child(2) {
+        .dark #table-wrapper table.gridjs-table thead th:nth-child(2),
+        .dark #table-wrapper table.gridjs-table thead th:nth-child(3) {
             background: #0f172a !important;
         }
 
+        .dark #table-wrapper table.gridjs-table tbody td:nth-child(3) {
+            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
+        }
+
+        #table-wrapper .gridjs-th.avg-col-header,
+        #table-wrapper .gridjs-td.avg-col-header {
+            position: sticky !important;
+            left: var(--sticky-avg-left, 620px) !important;
+            z-index: 30 !important;
+            box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
+        }
+
+        #table-wrapper .gridjs-th.avg-col-header {
+            background: #f1f5f9 !important;
+            z-index: 39 !important;
+            top: 0 !important;
+        }
+
+        #table-wrapper .gridjs-td.avg-col-header {
+            background: #fff !important;
+        }
+
+        .dark #table-wrapper .gridjs-th.avg-col-header {
+            background: #0f172a !important;
+            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
+        }
+
+        .dark #table-wrapper .gridjs-td.avg-col-header {
+            background: #1e293b !important;
+            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
+        }
+
         .dark .gridjs-head,
         .dark th.gridjs-th {
             background-color: #0f172a !important;
@@ -713,7 +798,7 @@
         </div>
     </div>
 
-    <div class="w-full sm:w-[95%] mx-auto mb-20">
+    <div id="table-outer" class="w-full sm:w-[99%] mx-auto mb-20">
         <div id="table-wrapper" class="bg-white dark:bg-slate-800 shadow-sm transition-colors"></div>
     </div>
 
@@ -1538,9 +1623,9 @@
                     const rankIdx = visibleCols.indexOf("Rank");
                     const modelIdx = visibleCols.indexOf("Model Name");
 
-                    headers.forEach(th => th.classList.remove('sticky-rank-col', 'sticky-model-col'));
+                    headers.forEach(th => th.classList.remove('sticky-rank-col', 'sticky-model-col', 'avg-col-header'));
                     table.querySelectorAll('tbody tr').forEach(tr => {
-                        [...tr.children].forEach(td => td.classList.remove('sticky-rank-col', 'sticky-model-col'));
+                        [...tr.children].forEach(td => td.classList.remove('sticky-rank-col', 'sticky-model-col', 'avg-col-header'));
                     });
 
                     if (rankIdx >= 0 && headers[rankIdx]) {
@@ -1559,9 +1644,34 @@
                             if (tr.children[modelIdx]) tr.children[modelIdx].classList.add('sticky-model-col');
                         });
                     }
+
+                    const modelWidth = (modelIdx >= 0 && headers[modelIdx]) ? headers[modelIdx].getBoundingClientRect().width : 0;
+                    const avgLeft = Math.max(0, Math.round(rankWidth + modelWidth));
+                    wrapper.style.setProperty('--sticky-avg-left', `${avgLeft}px`);
+
+                    const avgIdx = visibleCols.findIndex(k => k.includes("Average"));
+                    if (avgIdx >= 0 && headers[avgIdx]) {
+                        headers[avgIdx].classList.add('avg-col-header');
+                        table.querySelectorAll('tbody tr').forEach(tr => {
+                            if (tr.children[avgIdx]) tr.children[avgIdx].classList.add('avg-col-header');
+                        });
+                    }
+
                     return true;
                 }
 
+                function initGradientScroll() {
+                    const wrapper = $('#table-wrapper');
+                    const outer = $('#table-outer');
+                    if (!wrapper || !outer) return;
+                    wrapper.addEventListener('scroll', () => {
+                        const max = wrapper.scrollHeight - wrapper.clientHeight;
+                        const ratio = max > 0 ? wrapper.scrollTop / max : 0;
+                        outer.style.setProperty('--green-opacity', (0.07 * (1 - ratio)).toFixed(3));
+                        outer.style.setProperty('--red-opacity', (0.07 * ratio).toFixed(3));
+                    }, { passive: true });
+                }
+
                 function scheduleStickyApply(retries = 8) {
                     let attempts = 0;
                     const run = () => {
@@ -1646,10 +1756,17 @@
                         }
                     }).render($('#table-wrapper'));
                     scheduleStickyApply();
+                    initGradientScroll();
                 }
 
                 function prepareColumns(data) {
                     const keys = Object.keys(data[0] || {});
+                    const avgKey = keys.find(k => k.includes("Average"));
+                    if (avgKey) {
+                        keys.splice(keys.indexOf(avgKey), 1);
+                        const insertAt = Math.min(2, keys.length);
+                        keys.splice(insertAt, 0, avgKey);
+                    }
                     const typeIdx = keys.findIndex(k => ["T", "Type", "Full Type"].includes(k));
                     const modelNameIdx = keys.findIndex(k => k === "Model Name");
                     const vis = tableColumns.reduce((acc, c) => ({ ...acc, [c.id]: c.hidden }), {});
@@ -1738,7 +1855,7 @@
                             };
 
                         } else if (key === "Rank") {
-                            def.width = '110px';
+                            def.width = '100px';
                             def.formatter = (c) => {
                                 const rank = parseInt(c);
                                 let badge = `<span class="font-mono font-bold text-slate-700 dark:text-slate-200">#${rank}</span>`;