Hugging Face's logo

Spaces:
qimma
/
leaderboard
Running on CPU Upgrade

App Files Community
LeenAlQadi commited on
Commit
de2f8be
·
1 Parent(s): bcff379

dark mode overhaul, fix filter panel, and UI polish

Browse files
Files changed (4) hide show
  1. backend/config.py +2 -2
  2. frontend/about.html +1 -1
  3. frontend/header.html +128 -34
  4. frontend/leaderboard.html +504 -358
backend/config.py CHANGED
@@ -93,7 +93,7 @@ BENCHMARK_METADATA: Dict[str, Dict[str, str]] = {
93
  "MedAraBench": {"domain": "Medical", "task_type": "MCQ"},
94
  "HumanEval+": {"domain": "Coding", "task_type": "Code"},
95
  "MBPP+": {"domain": "Coding", "task_type": "Code"},
96
- "FannOrFlop": {"domain": "Poetry", "task_type": "MCQ"},
97
  }
98
 
99
  # --- 3. Model Metadata ---
@@ -109,4 +109,4 @@ MODEL_TYPE_TO_EMOJI: Dict[str, str] = {
109
  # "🔶 : fine-tuned on domain-specific datasets": "🔶",
110
  # "🤝 : base merges and merges": "🤝",
111
  "Missing": "?",
112
- }
 
93
  "MedAraBench": {"domain": "Medical", "task_type": "MCQ"},
94
  "HumanEval+": {"domain": "Coding", "task_type": "Code"},
95
  "MBPP+": {"domain": "Coding", "task_type": "Code"},
96
+ "FannOrFlop": {"domain": "Poetry", "task_type": "QA"},
97
  }
98
 
99
  # --- 3. Model Metadata ---
 
109
  # "🔶 : fine-tuned on domain-specific datasets": "🔶",
110
  # "🤝 : base merges and merges": "🤝",
111
  "Missing": "?",
112
+ }
frontend/about.html CHANGED
@@ -193,7 +193,7 @@
193
  <a href="https://github.com/tiiuae/QIMMA-leaderboard" target="_blank"
194
  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">
195
  <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">
196
- <i data-lucide="github" class="w-5 h-5 shrink-0"></i>
197
  <span class="font-semibold">GitHub Repository</span>
198
  </div>
199
  <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
 
193
  <a href="https://github.com/tiiuae/QIMMA-leaderboard" target="_blank"
194
  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">
195
  <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">
196
+ <svg class="w-6 h-6 shrink-0" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
197
  <span class="font-semibold">GitHub Repository</span>
198
  </div>
199
  <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
frontend/header.html CHANGED
@@ -7,11 +7,11 @@
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/lucide@latest"></script>
9
  <script>
10
- tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } } }
11
  </script>
12
  <style>
13
  :root { --card-bg: #ffffff; }
14
- .dark { --card-bg: #1e293b; }
15
  </style>
16
  </head>
17
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100">
@@ -25,60 +25,60 @@
25
  </h1>
26
  <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">A quality-first Arabic LLM Leaderboard that evaluates and compares the performance of Arabic Large Language Models.</p>
27
  </div>
28
-
29
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
30
-
31
- <!-- Podium -->
32
- <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"
33
  style="background: linear-gradient(to bottom, #2d7d65, #1f604f);">
34
  <div class="absolute -right-6 -top-6 w-[86px] h-[86px] rounded-full opacity-50 group-hover:scale-[2.5] transition-transform duration-500"
35
  style="background-color: #174d3e;"></div>
36
  <div class="flex justify-between items-start mb-4 relative z-10">
37
- <p class="text-sm font-medium text-white/80 uppercase tracking-wider">Podium</p>
38
  <i data-lucide="trophy" class="w-5 h-5 text-yellow-300"></i>
39
  </div>
40
  <div id="top-performers-list" class="space-y-3 relative z-10 overflow-visible"></div>
41
  </div>
42
-
43
  <!-- Total Models -->
44
- <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"
45
  style="background-color: var(--card-bg);">
46
- <div class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl border border-indigo-200 dark:border-indigo-700">
47
  <i data-lucide="database" class="w-6 h-6 text-indigo-600 dark:text-indigo-400"></i>
48
  </div>
49
  <div>
50
- <p class="text-xs font-bold uppercase text-slate-400 tracking-wider">Total Models</p>
51
  <h3 class="text-2xl font-bold text-slate-800 dark:text-white" id="stat-total-models">--</h3>
52
  </div>
53
  </div>
54
-
55
  <!-- Eval Status -->
56
- <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"
57
  style="background-color: var(--card-bg);">
58
- <div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl border border-emerald-200 dark:border-emerald-700 shrink-0">
59
  <i data-lucide="activity" class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i>
60
  </div>
61
  <div class="w-full">
62
- <p class="text-xs font-bold uppercase text-slate-400 tracking-wider mb-2">Eval Status</p>
63
  <div class="grid grid-cols-4 gap-1 text-center mb-2">
64
  <div>
65
  <div class="text-base font-bold text-emerald-600 dark:text-emerald-400" id="stat-done">--</div>
66
- <div class="text-[10px] text-slate-500 dark:text-slate-400">Done</div>
67
  </div>
68
  <div>
69
  <div class="text-base font-bold text-rose-600 dark:text-rose-400" id="stat-failed">--</div>
70
- <div class="text-[10px] text-slate-500 dark:text-slate-400">Failed</div>
71
  </div>
72
  <div>
73
  <div class="text-base font-bold text-blue-600 dark:text-blue-400" id="stat-running">--</div>
74
- <div class="text-[10px] text-slate-500 dark:text-slate-400">Running</div>
75
  </div>
76
  <div>
77
  <div class="text-base font-bold text-amber-500 dark:text-amber-400" id="stat-queue">--</div>
78
- <div class="text-[10px] text-slate-500 dark:text-slate-400">Queue</div>
79
  </div>
80
  </div>
81
- <div class="flex w-full h-2 rounded-full overflow-hidden bg-slate-100 dark:bg-slate-700">
82
  <div id="bar-done" class="bg-emerald-500 h-full transition-all duration-500" style="width: 0%"></div>
83
  <div id="bar-failed" class="bg-rose-500 h-full transition-all duration-500" style="width: 0%"></div>
84
  <div id="bar-running" class="bg-blue-500 h-full transition-all duration-500" style="width: 0%"></div>
@@ -86,22 +86,22 @@
86
  </div>
87
  </div>
88
  </div>
89
-
90
  <!-- Benchmarks -->
91
- <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"
92
  style="background-color: var(--card-bg);">
93
- <div class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl border border-purple-200 dark:border-purple-700">
94
  <i data-lucide="bar-chart-2" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
95
  </div>
96
  <div>
97
- <p class="text-xs font-bold uppercase text-slate-400 tracking-wider">Benchmarks</p>
98
  <h3 class="text-2xl font-bold text-slate-800 dark:text-white" id="stat-metrics">--</h3>
99
  </div>
100
  </div>
101
-
102
  </div>
103
  </div>
104
-
105
  <script>
106
  window.updateHeaderStats = function (safeQ) {
107
  if (!safeQ) return;
@@ -122,7 +122,84 @@
122
  document.getElementById('bar-queue').style.width = (queueCount / total * 100) + "%";
123
  }
124
  };
125
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
126
  function renderHeaderTableStats(data) {
127
  const $ = (selector) => document.querySelector(selector);
128
  const esc = (v) => String(v ?? "")
@@ -136,13 +213,22 @@
136
  const avgK = Object.keys(data[0] || {}).find(k => k.includes("Average"));
137
  if (avgK && $('#top-performers-list')) {
138
  const top3 = [...data].sort((a, b) => parseFloat(b[avgK]) - parseFloat(a[avgK])).slice(0, 3);
139
- const rankStyles = ['bg-yellow-400 text-emerald-900', 'bg-slate-300 text-emerald-900', 'bg-orange-300 text-emerald-900'];
 
 
 
 
 
 
 
 
 
140
  $('#top-performers-list').innerHTML = top3.map((m, i) => `
141
  <div class="group/podium relative py-0.5">
142
  <div class="flex items-center gap-3">
143
- <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>
144
- <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>
145
- <span class="ml-auto text-xs font-mono text-emerald-300">${parseFloat(m[avgK]).toFixed(1)}</span>
146
  </div>
147
  <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">
148
  <div class="inline-block w-max max-w-[34rem] rounded-md border border-emerald-300/60 bg-emerald-950/90 backdrop-blur px-2 py-1 text-[11px] text-emerald-100 break-words shadow-lg">
@@ -152,12 +238,20 @@
152
  </div>
153
  `).join('');
154
  }
 
 
155
  }
156
-
157
  window.initHeader = async function () { renderHeaderTableStats(allData); };
158
  window.initHeader();
159
  if (window.lucide) lucide.createIcons();
 
 
 
 
 
 
160
  </script>
161
-
162
  </body>
163
- </html>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/lucide@latest"></script>
9
  <script>
10
+ tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#131825', darkcard: '#1c2235' } } } }
11
  </script>
12
  <style>
13
  :root { --card-bg: #ffffff; }
14
+ .dark { --card-bg: #161828; }
15
  </style>
16
  </head>
17
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100">
 
25
  </h1>
26
  <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">A quality-first Arabic LLM Leaderboard that evaluates and compares the performance of Arabic Large Language Models.</p>
27
  </div>
28
+
29
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
30
+
31
+ <!-- Podium — NO class changes, inline style preserved for light mode -->
32
+ <div id="podium-card" 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"
33
  style="background: linear-gradient(to bottom, #2d7d65, #1f604f);">
34
  <div class="absolute -right-6 -top-6 w-[86px] h-[86px] rounded-full opacity-50 group-hover:scale-[2.5] transition-transform duration-500"
35
  style="background-color: #174d3e;"></div>
36
  <div class="flex justify-between items-start mb-4 relative z-10">
37
+ <p id="podium-label" class="text-sm font-medium text-white/80 uppercase tracking-wider">Podium</p>
38
  <i data-lucide="trophy" class="w-5 h-5 text-yellow-300"></i>
39
  </div>
40
  <div id="top-performers-list" class="space-y-3 relative z-10 overflow-visible"></div>
41
  </div>
42
+
43
  <!-- Total Models -->
44
+ <div id="stat-card-models" 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"
45
  style="background-color: var(--card-bg);">
46
+ <div id="icon-wrap-models" class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl border border-indigo-200 dark:border-indigo-700">
47
  <i data-lucide="database" class="w-6 h-6 text-indigo-600 dark:text-indigo-400"></i>
48
  </div>
49
  <div>
50
+ <p class="text-xs font-bold uppercase text-slate-400 tracking-wider" id="label-total-models">Total Models</p>
51
  <h3 class="text-2xl font-bold text-slate-800 dark:text-white" id="stat-total-models">--</h3>
52
  </div>
53
  </div>
54
+
55
  <!-- Eval Status -->
56
+ <div id="stat-card-eval" 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"
57
  style="background-color: var(--card-bg);">
58
+ <div id="icon-wrap-eval" class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl border border-emerald-200 dark:border-emerald-700 shrink-0">
59
  <i data-lucide="activity" class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i>
60
  </div>
61
  <div class="w-full">
62
+ <p class="text-xs font-bold uppercase text-slate-400 tracking-wider mb-2" id="label-eval-status">Eval Status</p>
63
  <div class="grid grid-cols-4 gap-1 text-center mb-2">
64
  <div>
65
  <div class="text-base font-bold text-emerald-600 dark:text-emerald-400" id="stat-done">--</div>
66
+ <div class="text-[10px] text-slate-500 dark:text-slate-400" id="sublabel-done">Done</div>
67
  </div>
68
  <div>
69
  <div class="text-base font-bold text-rose-600 dark:text-rose-400" id="stat-failed">--</div>
70
+ <div class="text-[10px] text-slate-500 dark:text-slate-400" id="sublabel-failed">Failed</div>
71
  </div>
72
  <div>
73
  <div class="text-base font-bold text-blue-600 dark:text-blue-400" id="stat-running">--</div>
74
+ <div class="text-[10px] text-slate-500 dark:text-slate-400" id="sublabel-running">Running</div>
75
  </div>
76
  <div>
77
  <div class="text-base font-bold text-amber-500 dark:text-amber-400" id="stat-queue">--</div>
78
+ <div class="text-[10px] text-slate-500 dark:text-slate-400" id="sublabel-queue">Queue</div>
79
  </div>
80
  </div>
81
+ <div id="progress-track" class="flex w-full h-2 rounded-full overflow-hidden bg-slate-100 dark:bg-slate-700">
82
  <div id="bar-done" class="bg-emerald-500 h-full transition-all duration-500" style="width: 0%"></div>
83
  <div id="bar-failed" class="bg-rose-500 h-full transition-all duration-500" style="width: 0%"></div>
84
  <div id="bar-running" class="bg-blue-500 h-full transition-all duration-500" style="width: 0%"></div>
 
86
  </div>
87
  </div>
88
  </div>
89
+
90
  <!-- Benchmarks -->
91
+ <div id="stat-card-bench" 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"
92
  style="background-color: var(--card-bg);">
93
+ <div id="icon-wrap-bench" class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl border border-purple-200 dark:border-purple-700">
94
  <i data-lucide="bar-chart-2" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
95
  </div>
96
  <div>
97
+ <p class="text-xs font-bold uppercase text-slate-400 tracking-wider" id="label-benchmarks">Benchmarks</p>
98
  <h3 class="text-2xl font-bold text-slate-800 dark:text-white" id="stat-metrics">--</h3>
99
  </div>
100
  </div>
101
+
102
  </div>
103
  </div>
104
+
105
  <script>
106
  window.updateHeaderStats = function (safeQ) {
107
  if (!safeQ) return;
 
122
  document.getElementById('bar-queue').style.width = (queueCount / total * 100) + "%";
123
  }
124
  };
125
+
126
+ // All dark mode styling via IDs — no class selectors, no CSS specificity battles
127
+ function applyDarkModeCards() {
128
+ const isDark = document.documentElement.classList.contains('dark');
129
+
130
+ // Podium
131
+ const podium = document.getElementById('podium-card');
132
+ if (podium) {
133
+ podium.style.background = isDark ? '#1a3028' : 'linear-gradient(to bottom, #2d7d65, #1f604f)';
134
+ podium.style.border = isDark ? '1px solid #2d5a3d' : '';
135
+ }
136
+ const podiumLabel = document.getElementById('podium-label');
137
+ if (podiumLabel) podiumLabel.style.color = isDark ? '#5aaf7a' : '';
138
+
139
+ // Stat cards
140
+ ['stat-card-models', 'stat-card-eval', 'stat-card-bench'].forEach(id => {
141
+ const el = document.getElementById(id);
142
+ if (!el) return;
143
+ el.style.backgroundColor = isDark ? '#161828' : '';
144
+ el.style.border = isDark ? '1px solid #252048' : '';
145
+ });
146
+
147
+ // Icon wrappers
148
+ ['icon-wrap-models', 'icon-wrap-eval', 'icon-wrap-bench'].forEach(id => {
149
+ const el = document.getElementById(id);
150
+ if (!el) return;
151
+ el.style.background = isDark ? '#1e1a40' : '';
152
+ el.style.borderColor = isDark ? 'transparent' : '';
153
+ const icon = el.querySelector('i');
154
+ if (icon) icon.style.color = isDark ? '#7868c8' : '';
155
+ });
156
+
157
+ // Stat labels
158
+ ['label-total-models', 'label-eval-status', 'label-benchmarks'].forEach(id => {
159
+ const el = document.getElementById(id);
160
+ if (el) el.style.color = isDark ? '#7878a8' : '';
161
+ });
162
+
163
+ // Stat big values
164
+ ['stat-total-models', 'stat-metrics'].forEach(id => {
165
+ const el = document.getElementById(id);
166
+ if (el) el.style.color = isDark ? '#d0cef0' : '';
167
+ });
168
+
169
+ // Eval sublabels
170
+ ['sublabel-done', 'sublabel-failed', 'sublabel-running', 'sublabel-queue'].forEach(id => {
171
+ const el = document.getElementById(id);
172
+ if (el) el.style.color = isDark ? '#585878' : '';
173
+ });
174
+
175
+ // Running + Queue numbers muted
176
+ ['stat-running', 'stat-queue'].forEach(id => {
177
+ const el = document.getElementById(id);
178
+ if (el) el.style.color = isDark ? '#7878a8' : '';
179
+ });
180
+
181
+ // Progress bar track
182
+ const track = document.getElementById('progress-track');
183
+ if (track) track.style.background = isDark ? '#1e1a40' : '';
184
+
185
+ // Progress bar segments
186
+ const bars = { 'bar-done': '#3a5a8a', 'bar-failed': '#7a3a3a', 'bar-running': '#2e2468', 'bar-queue': '#3a3010' };
187
+ Object.entries(bars).forEach(([id, color]) => {
188
+ const el = document.getElementById(id);
189
+ if (el) el.style.backgroundColor = isDark ? color : '';
190
+ });
191
+
192
+ // Top accent lines via box-shadow trick (no ::before in JS)
193
+ const podiumAccent = document.getElementById('podium-card');
194
+ if (podiumAccent) {
195
+ podiumAccent.style.boxShadow = isDark ? 'inset 0 2px 0 0 #4a8a5a' : '';
196
+ }
197
+ ['stat-card-models', 'stat-card-eval', 'stat-card-bench'].forEach(id => {
198
+ const el = document.getElementById(id);
199
+ if (el) el.style.boxShadow = isDark ? 'inset 0 2px 0 0 #5040a0' : '';
200
+ });
201
+ }
202
+
203
  function renderHeaderTableStats(data) {
204
  const $ = (selector) => document.querySelector(selector);
205
  const esc = (v) => String(v ?? "")
 
213
  const avgK = Object.keys(data[0] || {}).find(k => k.includes("Average"));
214
  if (avgK && $('#top-performers-list')) {
215
  const top3 = [...data].sort((a, b) => parseFloat(b[avgK]) - parseFloat(a[avgK])).slice(0, 3);
216
+ const isDark = document.documentElement.classList.contains('dark');
217
+ const rankBadgeStyles = isDark ? [
218
+ 'background:#1a3a22;color:#7ad898;box-shadow:0 0 0 1px #2e5a38',
219
+ 'background:#162e1e;color:#5ab878;box-shadow:0 0 0 1px #244830',
220
+ 'background:#1a2a1a;color:#4aa858;box-shadow:0 0 0 1px #203820',
221
+ ] : [
222
+ 'background:#facc15;color:#064e3b',
223
+ 'background:#cbd5e1;color:#064e3b',
224
+ 'background:#fdba74;color:#064e3b',
225
+ ];
226
  $('#top-performers-list').innerHTML = top3.map((m, i) => `
227
  <div class="group/podium relative py-0.5">
228
  <div class="flex items-center gap-3">
229
+ <div class="w-4 h-5 shrink-0 rounded-full flex items-center justify-center text-xs font-bold" style="${rankBadgeStyles[i] || ''}">${i + 1}</div>
230
+ <span class="text-sm font-semibold truncate flex-1 min-w-0 cursor-pointer hover:underline" style="${isDark ? 'color:#b8d8c0' : ''}" onclick="window.openModelDetails && window.openModelDetails(decodeURIComponent('${encodeURIComponent(m["Model Name"])}'))">${esc(m["Model Name"].split('/').pop())}</span>
231
+ <span class="ml-auto text-xs font-mono" style="${isDark ? 'color:#6aba82' : 'color:rgb(110 231 183)'}">${parseFloat(m[avgK]).toFixed(1)}</span>
232
  </div>
233
  <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">
234
  <div class="inline-block w-max max-w-[34rem] rounded-md border border-emerald-300/60 bg-emerald-950/90 backdrop-blur px-2 py-1 text-[11px] text-emerald-100 break-words shadow-lg">
 
238
  </div>
239
  `).join('');
240
  }
241
+ // Re-apply dark mode after DOM update
242
+ applyDarkModeCards();
243
  }
244
+
245
  window.initHeader = async function () { renderHeaderTableStats(allData); };
246
  window.initHeader();
247
  if (window.lucide) lucide.createIcons();
248
+
249
+ // Apply immediately and watch for theme toggles
250
+ applyDarkModeCards();
251
+ new MutationObserver(applyDarkModeCards).observe(
252
+ document.documentElement, { attributes: true, attributeFilter: ['class'] }
253
+ );
254
  </script>
255
+
256
  </body>
257
+ </html>
frontend/leaderboard.html CHANGED
@@ -1,6 +1,6 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
-
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,19 +10,19 @@
10
  <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
11
  <script src="https://unpkg.com/lucide@latest"></script>
12
  <script>
13
- tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } } }
14
  </script>
15
  </head>
16
-
17
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100 relative">
18
-
19
  <style>
20
  #table-outer {
21
  position: relative;
22
  --gradient-opacity: 0.07;
23
  --gradient-scroll: 0;
24
  }
25
-
26
  #table-outer::after {
27
  content: '';
28
  position: absolute;
@@ -39,7 +39,7 @@
39
  border-radius: 1rem;
40
  transition: background 0.15s ease;
41
  }
42
-
43
  #table-outer[data-sort-dir="desc"]::after {
44
  background: linear-gradient(
45
  to bottom,
@@ -49,7 +49,7 @@
49
  rgba(16, 185, 129, calc(var(--gradient-opacity) * var(--gradient-scroll))) 100%
50
  );
51
  }
52
-
53
  #table-wrapper {
54
  max-height: 700px;
55
  overflow-y: auto;
@@ -59,29 +59,29 @@
59
  border-radius: 1rem;
60
  border: 1px solid #cbd5e1;
61
  }
62
-
63
  .dark #table-wrapper {
64
- border: 1px solid #334155;
65
  }
66
-
67
  #table-wrapper::-webkit-scrollbar {
68
  width: 8px;
69
  height: 8px;
70
  }
71
-
72
  #table-wrapper::-webkit-scrollbar-track {
73
  background: transparent;
74
  }
75
-
76
  #table-wrapper::-webkit-scrollbar-thumb {
77
  background: #cbd5e1;
78
  border-radius: 4px;
79
  }
80
-
81
  .dark #table-wrapper::-webkit-scrollbar-thumb {
82
- background: #475569;
83
  }
84
-
85
  .gridjs-wrapper {
86
  height: auto !important;
87
  max-height: none !important;
@@ -91,19 +91,19 @@
91
  box-shadow: none !important;
92
  background: transparent !important;
93
  }
94
-
95
  .gridjs-container {
96
  color: inherit;
97
  background-color: transparent;
98
  overflow: visible !important;
99
  }
100
-
101
  .gridjs-head {
102
  position: sticky;
103
  top: 0;
104
  z-index: 20;
105
  }
106
-
107
  .gridjs-th {
108
  background-color: #f1f5f9;
109
  position: relative;
@@ -111,19 +111,19 @@
111
  border-top: none !important;
112
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
113
  }
114
-
115
  .gridjs-td {
116
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.15);
117
  }
118
-
119
  .dark .gridjs-th {
120
- box-shadow: 1px 0 0 rgba(71, 85, 105, 0.4);
121
  }
122
-
123
  .dark .gridjs-td {
124
- box-shadow: 1px 0 0 rgba(71, 85, 105, 0.3);
125
  }
126
-
127
  #table-wrapper .gridjs-th.sticky-rank-col,
128
  #table-wrapper .gridjs-td.sticky-rank-col {
129
  position: sticky !important;
@@ -131,7 +131,7 @@
131
  z-index: 32 !important;
132
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
133
  }
134
-
135
  #table-wrapper .gridjs-th.sticky-model-col,
136
  #table-wrapper .gridjs-td.sticky-model-col {
137
  position: sticky !important;
@@ -139,29 +139,29 @@
139
  z-index: 31 !important;
140
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
141
  }
142
-
143
  #table-wrapper .gridjs-th.sticky-rank-col,
144
  #table-wrapper .gridjs-th.sticky-model-col {
145
  z-index: 40 !important;
146
  top: 0 !important;
147
  }
148
-
149
  #table-wrapper .gridjs-td.sticky-rank-col,
150
  #table-wrapper .gridjs-td.sticky-model-col {
151
  background: #fff !important;
152
  }
153
-
154
  .dark #table-wrapper .gridjs-td.sticky-rank-col,
155
  .dark #table-wrapper .gridjs-td.sticky-model-col {
156
- background: #1e293b !important;
157
- box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
158
  }
159
-
160
  .dark #table-wrapper .gridjs-th.sticky-rank-col,
161
  .dark #table-wrapper .gridjs-th.sticky-model-col {
162
  box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
163
  }
164
-
165
  /* Fallback sticky behavior (covers async re-renders where classes may lag). */
166
  #table-wrapper table.gridjs-table thead th:nth-child(1) {
167
  position: sticky !important;
@@ -170,13 +170,13 @@
170
  z-index: 46 !important;
171
  background: #f1f5f9 !important;
172
  }
173
-
174
  #table-wrapper table.gridjs-table tbody td:nth-child(1) {
175
  position: sticky !important;
176
  left: 0 !important;
177
  z-index: 30 !important;
178
  }
179
-
180
  #table-wrapper table.gridjs-table thead th:nth-child(2) {
181
  position: sticky !important;
182
  left: var(--sticky-model-left, 100px) !important;
@@ -184,18 +184,18 @@
184
  z-index: 45 !important;
185
  background: #f1f5f9 !important;
186
  }
187
-
188
  #table-wrapper table.gridjs-table tbody td:nth-child(2) {
189
  position: sticky !important;
190
  left: var(--sticky-model-left, 100px) !important;
191
  z-index: 29 !important;
192
  }
193
-
194
  .dark #table-wrapper table.gridjs-table thead th:nth-child(1),
195
  .dark #table-wrapper table.gridjs-table thead th:nth-child(2) {
196
- background: #0f172a !important;
197
  }
198
-
199
  #table-wrapper .gridjs-th.avg-col-header,
200
  #table-wrapper .gridjs-td.avg-col-header {
201
  position: sticky !important;
@@ -204,25 +204,26 @@
204
  background: #ffffff !important;
205
  font-weight: 700 !important;
206
  }
207
-
208
  #table-wrapper .gridjs-td.avg-col-header * {
209
  font-weight: 700 !important;
210
  }
211
-
212
  #table-wrapper .gridjs-th.avg-col-header {
213
  background: #f8faff !important;
214
  z-index: 39 !important;
215
  top: 0 !important;
216
  }
217
-
218
  .dark #table-wrapper .gridjs-th.avg-col-header {
219
- background: #1e2235 !important;
 
220
  }
221
-
222
  .dark #table-wrapper .gridjs-td.avg-col-header {
223
- background: #222639 !important;
224
  }
225
-
226
  #avg-col-highlight {
227
  position: absolute;
228
  top: 0;
@@ -234,55 +235,64 @@
234
  border-right: 1px solid rgba(100, 116, 139, 0.25);
235
  box-shadow: -2px 0 8px rgba(0,0,0,0.07), 2px 0 8px rgba(0,0,0,0.07);
236
  }
237
-
238
  .dark #avg-col-highlight {
239
  border-left: 1px solid rgba(148, 163, 184, 0.2);
240
  border-right: 1px solid rgba(148, 163, 184, 0.2);
241
  box-shadow: -2px 0 10px rgba(0,0,0,0.25), 2px 0 10px rgba(0,0,0,0.25);
242
  }
243
-
244
  .dark .gridjs-head,
245
  .dark th.gridjs-th {
246
- background-color: #0f172a !important;
247
- border-color: #334155;
248
- color: #cbd5e1;
 
249
  }
250
-
251
  .dark td.gridjs-td {
252
- background-color: #1e293b;
253
- border-color: #334155;
254
- color: #cbd5e1;
255
  }
256
-
257
  .dark .gridjs-tr:hover td {
258
- background-color: #334155;
259
  }
260
-
 
 
 
 
 
 
 
 
261
  table.gridjs-table {
262
  width: 100% !important;
263
  table-layout: fixed;
264
  border-collapse: separate !important;
265
  border-spacing: 0 !important;
266
  }
267
-
268
  td.gridjs-td {
269
  white-space: nowrap;
270
  padding: 12px 24px !important;
271
  overflow: hidden;
272
  text-overflow: ellipsis;
273
  }
274
-
275
  th.gridjs-th,
276
  td.gridjs-td {
277
  border-left: none !important;
278
  border-right: 1px solid rgba(148, 163, 184, 0.15) !important;
279
  }
280
-
281
  .dark th.gridjs-th,
282
  .dark td.gridjs-td {
283
- border-right: 1px solid rgba(148, 163, 184, 0.12) !important;
284
  }
285
-
286
  .line-clamp-2-custom {
287
  display: -webkit-box;
288
  -webkit-line-clamp: 2;
@@ -292,14 +302,14 @@
292
  line-height: 1.3;
293
  word-break: break-word;
294
  }
295
-
296
  .slider-container {
297
  position: relative;
298
  width: 100%;
299
  height: 20px;
300
  margin-top: 10px;
301
  }
302
-
303
  .slider-track {
304
  position: absolute;
305
  top: 50%;
@@ -310,11 +320,11 @@
310
  border-radius: 10px;
311
  z-index: 1;
312
  }
313
-
314
  .dark .slider-track {
315
  background: #334155;
316
  }
317
-
318
  .slider-range {
319
  position: absolute;
320
  top: 50%;
@@ -324,7 +334,7 @@
324
  z-index: 2;
325
  border-radius: 10px;
326
  }
327
-
328
  input[type=range].dual-slider {
329
  position: absolute;
330
  top: 50%;
@@ -337,7 +347,7 @@
337
  z-index: 3;
338
  margin: 0;
339
  }
340
-
341
  input[type=range].dual-slider::-webkit-slider-thumb {
342
  -webkit-appearance: none;
343
  pointer-events: auto;
@@ -349,7 +359,7 @@
349
  border: 2px solid white;
350
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
351
  }
352
-
353
  input[type=range].dual-slider::-moz-range-thumb {
354
  pointer-events: auto;
355
  height: 18px;
@@ -360,34 +370,34 @@
360
  border: 2px solid white;
361
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
362
  }
363
-
364
  .tooltip-trigger:hover .tooltip-content {
365
  visibility: visible;
366
  opacity: 1;
367
  }
368
-
369
  @keyframes fadeIn {
370
  from {
371
  opacity: 0;
372
  }
373
-
374
  to {
375
  opacity: 1;
376
  }
377
  }
378
-
379
  @keyframes slideUp {
380
  from {
381
  transform: translate(-50%, -45%);
382
  opacity: 0;
383
  }
384
-
385
  to {
386
  transform: translate(-50%, -50%);
387
  opacity: 1;
388
  }
389
  }
390
-
391
  .score-click-demo {
392
  width: 128px;
393
  min-width: 128px;
@@ -398,12 +408,12 @@
398
  position: relative;
399
  overflow: hidden;
400
  }
401
-
402
  .dark .score-click-demo {
403
  border-color: #3730a3;
404
  background: #1e1b4b;
405
  }
406
-
407
  .score-click-demo-screen {
408
  position: absolute;
409
  inset: 6px;
@@ -412,16 +422,17 @@
412
  border: 1px solid #dbeafe;
413
  overflow: hidden;
414
  }
415
-
416
  .dark .score-click-demo-screen {
417
  background: #0f172a;
418
  border-color: #334155;
419
  }
420
-
421
  .score-click-demo-score {
422
  position: absolute;
423
- right: 8px;
424
- top: 8px;
 
425
  font-size: 10px;
426
  font-weight: 800;
427
  color: #4f46e5;
@@ -431,18 +442,18 @@
431
  border: 1px solid #c7d2fe;
432
  animation: demoScorePulse 2.8s ease-in-out infinite;
433
  }
434
-
435
  .dark .score-click-demo-score {
436
  color: #a5b4fc;
437
  background: rgba(79, 70, 229, 0.25);
438
  border-color: rgba(129, 140, 248, 0.4);
439
  }
440
-
441
  .score-click-demo-detail {
442
  position: absolute;
443
  left: 8px;
444
  right: 8px;
445
- top: 24px;
446
  height: 0;
447
  opacity: 0;
448
  border-radius: 5px;
@@ -450,12 +461,12 @@
450
  border: 1px solid #e2e8f0;
451
  animation: demoExpandDetail 2.8s ease-in-out infinite;
452
  }
453
-
454
  .dark .score-click-demo-detail {
455
  background: #1e293b;
456
  border-color: #334155;
457
  }
458
-
459
  .score-click-demo-detail::before {
460
  content: "";
461
  position: absolute;
@@ -466,7 +477,7 @@
466
  border-radius: 2px;
467
  background: #94a3b8;
468
  }
469
-
470
  .score-click-demo-detail::after {
471
  content: "";
472
  position: absolute;
@@ -477,7 +488,7 @@
477
  border-radius: 2px;
478
  background: #cbd5e1;
479
  }
480
-
481
  .score-click-demo-cursor {
482
  position: absolute;
483
  width: 10px;
@@ -492,24 +503,25 @@
492
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
493
  z-index: 3;
494
  }
495
-
496
  .dark .score-click-demo-cursor {
497
  border-left-color: #e2e8f0;
498
  }
499
-
500
  .score-click-demo-click {
501
  position: absolute;
502
  width: 8px;
503
  height: 8px;
504
  border: 2px solid #6366f1;
505
  border-radius: 999px;
506
- right: 26px;
507
- top: 12px;
 
508
  opacity: 0;
509
  animation: demoClickPulse 2.8s ease-out infinite;
510
  z-index: 2;
511
  }
512
-
513
  @keyframes demoCursorMove {
514
  0% {
515
  left: 12px;
@@ -522,82 +534,82 @@
522
  }
523
 
524
  45% {
525
- left: 88px;
526
- top: 12px;
527
  }
528
 
529
  100% {
530
- left: 88px;
531
- top: 12px;
532
  }
533
  }
534
-
535
  @keyframes demoClickPulse {
536
  0%,
537
  40% {
538
  opacity: 0;
539
  transform: scale(0.5);
540
  }
541
-
542
  50% {
543
  opacity: 0.85;
544
  transform: scale(1);
545
  }
546
-
547
  62% {
548
  opacity: 0;
549
  transform: scale(2);
550
  }
551
-
552
  100% {
553
  opacity: 0;
554
  transform: scale(2);
555
  }
556
  }
557
-
558
  @keyframes demoExpandDetail {
559
  0%,
560
  52% {
561
  height: 0;
562
  opacity: 0;
563
  }
564
-
565
  68% {
566
  height: 14px;
567
  opacity: 1;
568
  }
569
-
570
  100% {
571
  height: 14px;
572
  opacity: 1;
573
  }
574
  }
575
-
576
  @keyframes demoScorePulse {
577
  0%,
578
  42% {
579
  transform: scale(1);
580
  }
581
-
582
  52% {
583
  transform: scale(1.08);
584
  }
585
-
586
  62%,
587
  100% {
588
  transform: scale(1);
589
  }
590
  }
591
-
592
  .modal-backdrop {
593
  animation: fadeIn 0.2s ease-out forwards;
594
  }
595
-
596
  .modal-content {
597
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
598
  }
599
  </style>
600
-
601
  <!-- Header & Search -->
602
  <div class="flex justify-center mb-6 pt-10">
603
  <div class="relative w-full sm:w-[75%]">
@@ -605,69 +617,116 @@
605
  <i data-lucide="search" class="h-5 w-5 text-slate-400"></i>
606
  </div>
607
  <input type="text" id="searchInput"
608
- class="block w-full pl-11 pr-72 py-3 border border-slate-300 dark:border-slate-600 rounded-full bg-white dark:bg-slate-800 dark:text-white placeholder-slate-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm shadow-sm transition-colors"
609
  placeholder="Search models (e.g. Falcon, Qwen)...">
610
- <div class="absolute inset-y-0 right-0 flex items-center pr-2 gap-4">
611
- <span id="modelCounter" class="text-sm font-bold text-slate-500 dark:text-slate-400 tabular-nums">-- /
612
- --</span>
613
  <button onclick="window.toggleFilterPanel()" id="filterBtn"
614
- class="flex items-center px-4 py-1.5 text-sm font-medium rounded-full text-slate-700 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-200 transition-all">
615
- <i data-lucide="sliders-horizontal" class="h-4 w-4 mr-2"></i> Filters
 
 
 
616
  </button>
617
  </div>
618
  </div>
619
  </div>
620
-
621
  <!-- Filter Panel -->
622
  <div id="filterPanel"
623
  class="hidden w-full sm:w-[75%] mx-auto bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm p-6 mb-6">
624
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
625
- <!-- Size Slider -->
626
- <div>
627
- <div class="flex justify-between items-center mb-2">
628
- <label class="text-sm font-semibold text-slate-700 dark:text-slate-300">Model Size</label>
629
- <span id="sizeValue"
630
- class="text-sm font-mono text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-slate-700 px-2 py-1 rounded"></span>
 
 
 
 
 
 
 
 
 
 
 
 
631
  </div>
632
- <div class="slider-container">
633
- <div class="slider-track"></div>
634
- <div class="slider-range" id="sliderRange"></div>
635
- <input type="range" id="minSizeSlider" class="dual-slider">
636
- <input type="range" id="maxSizeSlider" class="dual-slider">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
637
  </div>
638
- <div class="flex justify-between text-xs text-slate-400 dark:text-slate-500 mt-3">
639
- <span id="minSizeLabel"></span>
640
- <span id="maxSizeLabel"></span>
 
 
 
 
641
  </div>
 
642
  </div>
643
 
 
 
644
 
645
- <!-- Type & License -->
646
- <div
647
- class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6 p-5 rounded-xl border border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/30">
648
  <div>
649
- <label
650
- class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3 flex items-center gap-2">
651
- <i data-lucide="cpu" class="w-4 h-4 text-slate-400"></i> Model Type
652
- </label>
653
- <div class="flex flex-wrap gap-2" id="typeFilterContainer"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
654
  </div>
 
 
655
  <div>
656
- <label
657
- class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3 flex items-center gap-2">
658
- <i data-lucide="scale" class="w-4 h-4 text-slate-400"></i> License
659
- </label>
660
- <div class="flex flex-wrap gap-2" id="licenseFilterContainer"></div>
661
  </div>
 
662
  </div>
 
663
  </div>
664
- <div class="mt-6 pt-4 border-t border-slate-100 dark:border-slate-700 flex justify-end">
665
- <button onclick="window.resetFilters()"
666
- class="text-sm text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 underline">Reset
667
- all filters</button>
668
- </div>
669
- </div>
670
 
 
 
671
  <!-- Table Controls -->
672
  <div class="w-full sm:w-[95%] mx-auto flex justify-end mb-2 relative gap-2">
673
  <!-- Table Options Button -->
@@ -677,8 +736,8 @@
677
  </button>
678
  <!-- Table Options Menu -->
679
  <div id="tableOpsMenu"
680
- class="hidden absolute top-10 right-40 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">
681
-
682
  <!-- Header with Reset -->
683
  <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
684
  <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Table Options</span>
@@ -686,19 +745,18 @@
686
  class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
687
  data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
688
  </div>
689
-
690
  <!-- Group 1: View Options -->
691
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">View Options</p>
692
- <div class="mb-4 p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/60">
693
-
694
  <!-- Section 1: Ranking Mode -->
695
  <div class="mb-4">
696
  <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
697
  Ranking Mode
698
  <div class="relative tooltip-trigger group cursor-help">
699
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
700
- <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">
701
- <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>
702
  <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>
703
  <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>
704
  </div>
@@ -711,15 +769,15 @@
711
  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>
712
  </div>
713
  </div>
714
-
715
  <!-- Section 2: Avg Score Calc -->
716
  <div>
717
  <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
718
  Average Score Calculation
719
  <div class="relative tooltip-trigger group cursor-help">
720
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
721
- <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">
722
- <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>
723
  <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>
724
  <p><span class="font-bold text-slate-600 dark:text-slate-300">Filtered Average:</span> recalculates using only the currently visible evaluation columns.</p>
725
  </div>
@@ -733,26 +791,9 @@
733
  </div>
734
  </div>
735
  </div>
736
-
737
- <!-- Group 2: Benchmark Filters -->
738
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Benchmark Filters</p>
739
- <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/60">
740
-
741
- <!-- Section 3: Task Type -->
742
- <div class="mb-4">
743
- <h4 class="text-xs font-bold text-slate-400 mb-2">Task Type</h4>
744
- <div id="taskTypeFilterBtns" class="flex flex-wrap gap-1.5"></div>
745
- </div>
746
-
747
- <!-- Section 4: Domain -->
748
- <div>
749
- <h4 class="text-xs font-bold text-slate-400 mb-2">Domain</h4>
750
- <div id="domainFilterBtns" class="flex flex-wrap gap-1.5"></div>
751
- </div>
752
- </div>
753
-
754
  </div>
755
-
756
  <!-- Col Visibility -->
757
  <button onclick="window.toggleColMenu(event)" id="colMenuTrigger"
758
  class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 transition-colors select-none">
@@ -767,20 +808,20 @@
767
  data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
768
  </div>
769
  <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Benchmarks</p>
770
- <div class="mb-4 p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/60">
771
  <div id="colListScores" class="flex flex-wrap gap-2"></div>
772
  </div>
773
  <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Model Details</p>
774
- <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/60">
775
  <div id="colListDetails" class="flex flex-wrap gap-2"></div>
776
  </div>
777
  </div>
778
  </div>
779
-
780
  <div id="table-outer" class="w-full sm:w-[99%] mx-auto mb-20">
781
  <div id="table-wrapper" class="bg-white dark:bg-slate-800 shadow-sm transition-colors"></div>
782
  </div>
783
-
784
  <div id="scoreClickToast"
785
  class="hidden fixed bottom-5 right-5 z-[120] max-w-sm px-4 py-3 rounded-xl shadow-xl border border-indigo-200 dark:border-indigo-900/60 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-200 text-xs sm:text-sm">
786
  <div class="flex items-center gap-3">
@@ -798,15 +839,15 @@
798
  </div>
799
  </div>
800
  </div>
801
-
802
  <div id="modelModal" class="hidden fixed inset-0 z-[100]" aria-labelledby="modal-title" role="dialog"
803
  aria-modal="true">
804
  <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity modal-backdrop"
805
  onclick="window.closeModelDetails()"></div>
806
-
807
  <div
808
  class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-[95%] md:w-[60%] max-h-[90vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 modal-content">
809
-
810
  <div
811
  class="sticky top-0 z-10 flex items-start justify-between px-6 py-5 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-100 dark:border-slate-800">
812
  <div>
@@ -819,7 +860,7 @@
819
  <i data-lucide="x" class="w-6 h-6"></i>
820
  </button>
821
  </div>
822
-
823
  <div class="p-6 space-y-8">
824
  <!-- 4 Blocks: Rank, Avg, Size, Hub -->
825
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
@@ -856,19 +897,19 @@
856
  <span id="modalLikes" class="text-2xl font-bold text-pink-700 dark:text-pink-300">--</span>
857
  </div>
858
  </div>
859
-
860
  <!-- Metadata Line -->
861
  <div
862
  class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-slate-500 dark:text-slate-400 border-y border-slate-100 dark:border-slate-800 py-4">
863
  <span class="flex items-center gap-1" title="License"><i data-lucide="scale"
864
  class="w-3.5 h-3.5"></i> <span id="modalLicense">--</span></span>
865
  <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
866
-
867
-
868
  <!-- <span class="flex items-center gap-1" title="Revision"><i data-lucide="git-commit"
869
  class="w-3.5 h-3.5"></i> <span id="modalRevision" class="font-mono">--</span></span> -->
870
  </div>
871
-
872
  <!-- Links -->
873
  <div class="flex flex-col sm:flex-row gap-3 justify-center">
874
  <a id="modalLinkHF" href="#" target="_blank"
@@ -881,7 +922,7 @@
881
  <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Evaluation Details
882
  </a>
883
  </div>
884
-
885
  <!-- Chart Area -->
886
  <div>
887
  <h4 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-wider">Evaluation Results</h4>
@@ -890,7 +931,7 @@
890
  </div>
891
  </div>
892
  </div>
893
-
894
  <!-- Footer -->
895
  <div
896
  class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
@@ -899,12 +940,12 @@
899
  </div>
900
  </div>
901
  </div>
902
-
903
  <div id="benchmarkModal" class="hidden fixed inset-0 z-[110]" aria-labelledby="benchmark-modal-title" role="dialog"
904
  aria-modal="true">
905
  <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity modal-backdrop"
906
  onclick="window.closeBenchmarkDetails()"></div>
907
-
908
  <div id="benchmarkModalPanel"
909
  class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[111] w-[95%] md:w-[75%] max-h-[90vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 modal-content">
910
  <div
@@ -919,7 +960,7 @@
919
  <i data-lucide="x" class="w-6 h-6"></i>
920
  </button>
921
  </div>
922
-
923
  <div class="p-6 space-y-6">
924
  <div id="benchmarkSummary" class="grid grid-cols-1 md:grid-cols-3 gap-3"></div>
925
  <div class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
@@ -942,7 +983,7 @@
942
  </div>
943
  </div>
944
  </div>
945
-
946
  <div
947
  class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
948
  <button onclick="window.closeBenchmarkDetails()"
@@ -950,7 +991,7 @@
950
  </div>
951
  </div>
952
  </div>
953
-
954
  <script>
955
  (function () {
956
  const $ = s => document.querySelector(s);
@@ -1019,11 +1060,11 @@
1019
  </div>
1020
  `;
1021
  };
1022
-
1023
  let lbData = [], grid, maxMeta = 100, minMeta = 0, tableColumns = [];
1024
  let currentSort = { colId: null, dir: 'none' };
1025
  const SCORE_HINT_KEY = "score_click_hint_seen_v1";
1026
-
1027
  // New State
1028
  let tableOptions = {
1029
  rankMode: 'static', // 'static' | 'dynamic'
@@ -1031,25 +1072,25 @@
1031
  taskTypes: [], // [] = All; otherwise selected subset
1032
  domains: [], // [] = All; otherwise selected subset
1033
  };
1034
-
1035
  const ALL_TASK_TYPES = ['Code', 'MCQ', 'QA'];
1036
  const ALL_DOMAINS = ['Cultural', 'STEM', 'Legal', 'Medical', 'Safety', 'Coding', 'Poetry'];
1037
-
1038
  window.initLeaderboard = function (data) {
1039
  lbData = data;
1040
-
1041
  const parsedSizes = lbData.map(r => toNumber(r["Model Size"]));
1042
  const sizes = parsedSizes.filter(v => v !== null);
1043
  const hasUnknownSize = parsedSizes.some(v => v === null);
1044
  minMeta = sizes.length ? Math.floor(Math.min(...sizes)) : 0;
1045
  maxMeta = sizes.length ? Math.floor(Math.max(...sizes)) : 100;
1046
  if (hasUnknownSize) minMeta = Math.min(0, minMeta);
1047
-
1048
  if (!lbData.length) {
1049
  $('#table-wrapper').innerHTML = "<div class='p-8 text-center text-slate-500'>No data loaded.</div>";
1050
  return;
1051
  }
1052
-
1053
  setupFilters();
1054
  prepareColumns(lbData);
1055
  renderTable(lbData);
@@ -1057,9 +1098,9 @@ taskTypes: [], // [] = All; otherwise selected subset
1057
  setupFilterPills();
1058
  buildColMenuDOM();
1059
  setupScoreClickHintToast();
1060
-
1061
  $('#searchInput').addEventListener('keyup', applyFilters);
1062
-
1063
  // Close menus on outside click
1064
  // Use composedPath() so clicks on dynamically re-rendered children
1065
  // (e.g. filter pills rebuilt via innerHTML) still count as "inside".
@@ -1074,26 +1115,26 @@ taskTypes: [], // [] = All; otherwise selected subset
1074
  toggleTableOps();
1075
  }
1076
  });
1077
-
1078
  if (!window.__stickyModelResizeBound) {
1079
  window.addEventListener('resize', () => scheduleStickyApply());
1080
  window.__stickyModelResizeBound = true;
1081
  }
1082
-
1083
  if (window.lucide) lucide.createIcons();
1084
  };
1085
-
1086
  function setupScoreClickHintToast() {
1087
  const toast = $('#scoreClickToast');
1088
  const tableWrapper = $('#table-wrapper');
1089
  if (!toast || !tableWrapper) return;
1090
-
1091
  let seen = false;
1092
  try {
1093
  seen = window.localStorage?.getItem(SCORE_HINT_KEY) === "1";
1094
  } catch { }
1095
  if (seen) return;
1096
-
1097
  const showToast = () => {
1098
  toast.classList.remove('hidden');
1099
  setTimeout(() => toast.classList.add('hidden'), 6500);
@@ -1101,23 +1142,23 @@ taskTypes: [], // [] = All; otherwise selected subset
1101
  window.localStorage?.setItem(SCORE_HINT_KEY, "1");
1102
  } catch { }
1103
  };
1104
-
1105
  const observer = new IntersectionObserver((entries, obs) => {
1106
  if (entries.some(e => e.isIntersecting)) {
1107
  showToast();
1108
  obs.disconnect();
1109
  }
1110
  }, { threshold: 0.2 });
1111
-
1112
  observer.observe(tableWrapper);
1113
  }
1114
-
1115
  // --- MENU LOGIC ---
1116
  window.toggleColMenu = toggleColMenu;
1117
  window.toggleTableOps = toggleTableOps;
1118
  window.setRankMode = setRankMode;
1119
  window.setAvgMode = setAvgMode;
1120
-
1121
  function toggleColMenu(e) {
1122
  e?.stopPropagation();
1123
  $('#colMenu').classList.toggle('hidden');
@@ -1125,7 +1166,7 @@ taskTypes: [], // [] = All; otherwise selected subset
1125
  $('#colMenuIcon').setAttribute('data-lucide', $('#colMenu').classList.contains('hidden') ? 'book-open' : 'x');
1126
  if (window.lucide) lucide.createIcons();
1127
  }
1128
-
1129
  function toggleTableOps(e) {
1130
  e?.stopPropagation();
1131
  $('#tableOpsMenu').classList.toggle('hidden');
@@ -1133,6 +1174,22 @@ taskTypes: [], // [] = All; otherwise selected subset
1133
  if (window.lucide) lucide.createIcons();
1134
  }
1135
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1136
  window.resetTableOps = function () {
1137
  tableOptions.rankMode = 'static';
1138
  tableOptions.avgMode = 'all';
@@ -1147,31 +1204,31 @@ taskTypes: [], // [] = All; otherwise selected subset
1147
  prepareColumns(lbData);
1148
  applyFilters();
1149
  };
1150
-
1151
  function updateOptionUI() {
1152
  const activeClass = "bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300";
1153
  const inactiveClass = "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";
1154
-
1155
  const setBtn = (id, isActive) => {
1156
  const btn = $(id);
1157
  if (btn) btn.className = `px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none ${isActive ? activeClass : inactiveClass}`;
1158
  }
1159
-
1160
  setBtn('#rankBtnStatic', tableOptions.rankMode === 'static');
1161
  setBtn('#rankBtnDynamic', tableOptions.rankMode === 'dynamic');
1162
  setBtn('#avgBtnAll', tableOptions.avgMode === 'all');
1163
  setBtn('#avgBtnVisible', tableOptions.avgMode === 'visible');
1164
-
1165
  setupFilterPills();
1166
  }
1167
-
1168
  function setupFilterPills() {
1169
  const pill = (active) =>
1170
  `px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none ` +
1171
  (active
1172
  ? 'bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300'
1173
  : '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');
1174
-
1175
  const renderPills = (containerId, items, activeList, toggleFn) => {
1176
  const container = $(`#${containerId}`);
1177
  if (!container) return;
@@ -1182,34 +1239,34 @@ setupFilterPills();
1182
  `<button onclick="window.${toggleFn}('${item}')" class="${pill(activeList.includes(item))}">${item}</button>`)
1183
  ].join('');
1184
  };
1185
-
1186
  renderPills('taskTypeFilterBtns', ALL_TASK_TYPES, tableOptions.taskTypes, 'toggleTaskType');
1187
  renderPills('domainFilterBtns', ALL_DOMAINS, tableOptions.domains, 'toggleDomain');
1188
  }
1189
-
1190
  function applyColumnFilters() {
1191
  const meta = window.BENCHMARK_METADATA || {};
1192
  const activeTasks = tableOptions.taskTypes;
1193
  const activeDomains = tableOptions.domains;
1194
-
1195
  tableColumns.forEach(col => {
1196
  if (!EVAL_COLUMNS.includes(col.id)) return;
1197
  const m = meta[col.id];
1198
  if (!m) return;
1199
-
1200
  // mixed (MedArabiQ): visible if MCQ or QA is among selected types
1201
  const taskMatch = activeTasks.length === 0 ||
1202
  (m.task_type === 'mixed'
1203
  ? activeTasks.some(t => t === 'MCQ' || t === 'QA')
1204
  : activeTasks.includes(m.task_type));
1205
-
1206
  const domainMatch = activeDomains.length === 0 ||
1207
  activeDomains.includes(m.domain);
1208
-
1209
  col.hidden = !(taskMatch && domainMatch);
1210
  });
1211
  }
1212
-
1213
  window.toggleTaskType = function (type) {
1214
  if (type === 'all') {
1215
  tableOptions.taskTypes = [];
@@ -1229,7 +1286,7 @@ setupFilterPills();
1229
  prepareColumns(lbData);
1230
  applyFilters();
1231
  };
1232
-
1233
  window.toggleDomain = function (domain) {
1234
  if (domain === 'all') {
1235
  tableOptions.domains = [];
@@ -1249,19 +1306,19 @@ setupFilterPills();
1249
  prepareColumns(lbData);
1250
  applyFilters();
1251
  };
1252
-
1253
  function setRankMode(mode) {
1254
  tableOptions.rankMode = mode;
1255
  updateOptionUI();
1256
  applyFilters();
1257
  }
1258
-
1259
  function setAvgMode(mode) {
1260
  tableOptions.avgMode = mode;
1261
  updateOptionUI();
1262
  applyFilters();
1263
  }
1264
-
1265
  window.toggleExpandText = function (idBase, btn) {
1266
  const shortEl = document.getElementById(`${idBase}-short`);
1267
  const fullEl = document.getElementById(`${idBase}-full`);
@@ -1271,7 +1328,7 @@ window.toggleExpandText = function (idBase, btn) {
1271
  fullEl.classList.toggle('hidden', !expanding);
1272
  btn.innerText = expanding ? 'Collapse' : 'Expand';
1273
  };
1274
-
1275
  // --- BENCHMARK DETAILS MODAL ---
1276
  const benchmarkDetailsState = {
1277
  modelName: "",
@@ -1286,7 +1343,7 @@ window.toggleExpandText = function (idBase, btn) {
1286
  requestId: 0,
1287
  };
1288
  let benchmarkModalScrollBound = false;
1289
-
1290
  const renderBenchmarkHeader = (showSubtaskColumn) => {
1291
  $('#benchmarkHeader').innerHTML = showSubtaskColumn
1292
  ? `<div class="col-span-2">Subtask</div>
@@ -1297,7 +1354,7 @@ window.toggleExpandText = function (idBase, btn) {
1297
  <div class="col-span-2">Gold</div>
1298
  <div class="col-span-2">Predicted</div>`;
1299
  };
1300
-
1301
  const renderBenchmarkRows = (rows, startIdx, showSubtaskColumn, benchmark) => {
1302
  const isCodeEvalBenchmark = benchmark === "HumanEval+" || benchmark === "MBPP+";
1303
  return rows.map((r, idx) => {
@@ -1328,7 +1385,7 @@ window.toggleExpandText = function (idBase, btn) {
1328
  r.question_id ? `id: ${escapeHtml(r.question_id)}` : null,
1329
  r.metric !== null && r.metric !== undefined ? `score: ${escapeHtml(r.metric)}` : null,
1330
  ].filter(Boolean).join(" | ");
1331
-
1332
  return `
1333
  <div class="grid grid-cols-12 gap-3 px-4 py-3 text-xs">
1334
  ${subtaskCell}
@@ -1347,13 +1404,13 @@ window.toggleExpandText = function (idBase, btn) {
1347
  `;
1348
  }).join("");
1349
  };
1350
-
1351
  const updateBenchmarkRowsFooter = () => {
1352
  const footer = $('#benchmarkRowsFooter');
1353
  const status = $('#benchmarkRowsStatus');
1354
  const btn = $('#benchmarkShowMoreBtn');
1355
  if (!footer || !status || !btn) return;
1356
-
1357
  const loaded = benchmarkDetailsState.loadedRows;
1358
  const total = benchmarkDetailsState.totalRows;
1359
  const hasRows = total > 0 || loaded > 0;
@@ -1361,12 +1418,12 @@ window.toggleExpandText = function (idBase, btn) {
1361
  status.innerText = benchmarkDetailsState.loading
1362
  ? `Loading... (${loaded}${total ? `/${total}` : ""})`
1363
  : `Showing ${loaded}${total ? ` of ${total}` : ""} samples`;
1364
-
1365
  btn.classList.toggle('hidden', !benchmarkDetailsState.hasMore);
1366
  btn.disabled = benchmarkDetailsState.loading;
1367
  btn.innerText = benchmarkDetailsState.loading ? "Loading..." : "Show More";
1368
  };
1369
-
1370
  const bindBenchmarkModalScroll = () => {
1371
  if (benchmarkModalScrollBound) return;
1372
  const panel = $('#benchmarkModalPanel');
@@ -1379,28 +1436,28 @@ window.toggleExpandText = function (idBase, btn) {
1379
  });
1380
  benchmarkModalScrollBound = true;
1381
  };
1382
-
1383
  const fetchBenchmarkDetailsPage = async ({ reset = false } = {}) => {
1384
  if (benchmarkDetailsState.loading) return;
1385
  if (!reset && !benchmarkDetailsState.hasMore) return;
1386
  benchmarkDetailsState.loading = true;
1387
  updateBenchmarkRowsFooter();
1388
-
1389
  const requestId = benchmarkDetailsState.requestId;
1390
  const formData = new FormData();
1391
  formData.append("model_name", benchmarkDetailsState.modelName);
1392
  formData.append("benchmark", benchmarkDetailsState.benchmark);
1393
  formData.append("cursor", String(reset ? 0 : benchmarkDetailsState.cursor || 0));
1394
-
1395
  try {
1396
  const res = await fetch("/api/benchmark-details", { method: "POST", body: formData });
1397
  const payload = await res.json();
1398
  if (!res.ok) throw new Error(payload.error || "Failed to load details");
1399
  if (requestId !== benchmarkDetailsState.requestId) return;
1400
-
1401
  let subtasks = payload.subtasks || [];
1402
  let rows = payload.rows || [];
1403
-
1404
  // Filter MedArabiQ subtasks/rows when MCQ-only or QA-only filter is active
1405
  if (benchmarkDetailsState.benchmark === 'MedArabiQ') {
1406
  const _at = tableOptions.taskTypes;
@@ -1414,7 +1471,7 @@ window.toggleExpandText = function (idBase, btn) {
1414
  rows = rows.filter(r => !String(r.subtask || '').toLowerCase().includes('mcq'));
1415
  }
1416
  }
1417
-
1418
  if (reset) {
1419
  const benchmarkNorm = String(benchmarkDetailsState.benchmark || "").trim().toLowerCase();
1420
  const hasDistinctSubtask = subtasks.some(s => {
@@ -1439,7 +1496,7 @@ window.toggleExpandText = function (idBase, btn) {
1439
  : "";
1440
  $('#benchmarkRows').innerHTML = "";
1441
  }
1442
-
1443
  if (!subtasks.length && !rows.length && benchmarkDetailsState.totalRows === 0) {
1444
  $('#benchmarkSummary').innerHTML = `<div class="col-span-full p-4 rounded-lg bg-slate-50 dark:bg-slate-800 text-sm text-slate-500 dark:text-slate-400">No details found for this benchmark/model.</div>`;
1445
  $('#benchmarkRows').innerHTML = "";
@@ -1448,7 +1505,7 @@ window.toggleExpandText = function (idBase, btn) {
1448
  benchmarkDetailsState.cursor = 0;
1449
  return;
1450
  }
1451
-
1452
  const chunkHtml = renderBenchmarkRows(
1453
  rows,
1454
  benchmarkDetailsState.loadedRows,
@@ -1458,7 +1515,7 @@ window.toggleExpandText = function (idBase, btn) {
1458
  if (chunkHtml) {
1459
  $('#benchmarkRows').insertAdjacentHTML('beforeend', chunkHtml);
1460
  }
1461
-
1462
  benchmarkDetailsState.loadedRows += rows.length;
1463
  benchmarkDetailsState.totalRows = Number(payload.total_rows || benchmarkDetailsState.totalRows || benchmarkDetailsState.loadedRows);
1464
  benchmarkDetailsState.hasMore = Boolean(payload.has_more);
@@ -1479,7 +1536,7 @@ window.toggleExpandText = function (idBase, btn) {
1479
  }
1480
  }
1481
  };
1482
-
1483
  window.openBenchmarkDetails = async function (modelName, benchmark) {
1484
  benchmarkDetailsState.requestId += 1;
1485
  benchmarkDetailsState.modelName = modelName;
@@ -1490,12 +1547,12 @@ window.toggleExpandText = function (idBase, btn) {
1490
  benchmarkDetailsState.loadedRows = 0;
1491
  benchmarkDetailsState.totalRows = 0;
1492
  benchmarkDetailsState.loading = false;
1493
-
1494
  $('#benchmarkModalTitle').innerText = `${benchmark} Details — ${modelName}`;
1495
  $('#benchmarkSummary').innerHTML = "";
1496
  $('#benchmarkRows').innerHTML = `<div class="p-6 text-sm text-slate-500 dark:text-slate-400">Loading details...</div>`;
1497
  renderBenchmarkHeader(true);
1498
-
1499
  $('#benchmarkModal').classList.remove('hidden');
1500
  document.body.style.overflow = 'hidden';
1501
  const panel = $('#benchmarkModalPanel');
@@ -1503,14 +1560,14 @@ window.toggleExpandText = function (idBase, btn) {
1503
  bindBenchmarkModalScroll();
1504
  updateBenchmarkRowsFooter();
1505
  if (window.lucide) lucide.createIcons();
1506
-
1507
  await fetchBenchmarkDetailsPage({ reset: true });
1508
  };
1509
-
1510
  window.loadMoreBenchmarkDetails = async function () {
1511
  await fetchBenchmarkDetailsPage({ reset: false });
1512
  };
1513
-
1514
  window.closeBenchmarkDetails = function () {
1515
  benchmarkDetailsState.requestId += 1;
1516
  benchmarkDetailsState.loading = false;
@@ -1518,19 +1575,19 @@ window.toggleExpandText = function (idBase, btn) {
1518
  $('#benchmarkModal').classList.add('hidden');
1519
  document.body.style.overflow = '';
1520
  };
1521
-
1522
  // --- MODAL LOGIC ---
1523
  window.openModelDetails = function (modelName) {
1524
  try {
1525
  const model = lbData.find(r => String(r["Model Name"] || "") === String(modelName || ""));
1526
  if (!model) return;
1527
-
1528
  const fullPath = model["Model Name"];
1529
  const splitIndex = fullPath.indexOf('/');
1530
  const hasOrg = splitIndex !== -1;
1531
  const displayModel = hasOrg ? fullPath.substring(splitIndex + 1) : fullPath;
1532
  const displayOrg = hasOrg ? fullPath.substring(0, splitIndex) : null;
1533
-
1534
  const modalTitleEl = $('#modalTitle');
1535
  if (modalTitleEl) modalTitleEl.innerHTML = `
1536
  <div class="flex flex-col">
@@ -1542,7 +1599,7 @@ window.toggleExpandText = function (idBase, btn) {
1542
  </div>` : ''}
1543
  </div>
1544
  `;
1545
-
1546
  // Reset values
1547
  const revision = asUnknown(model["Revision"]);
1548
  const revisionForApi = revision === "Unknown" ? "main" : revision;
@@ -1561,31 +1618,31 @@ window.toggleExpandText = function (idBase, btn) {
1561
  if (modalLicenseEl) modalLicenseEl.innerText = asUnknown(model["License"]);
1562
  const modalRevisionEl = $('#modalRevision');
1563
  if (modalRevisionEl) modalRevisionEl.innerText = revision;
1564
-
1565
  // --- 1. MODIFIED: Added Download Span to Metadata Line ---
1566
  // I added the separator dot and the Downloads span at the end of this block
1567
  const metadataHtml = `
1568
  <span class="flex items-center gap-1" title="License"><i data-lucide="scale" class="w-3.5 h-3.5"></i> <span id="modalLicense">${asUnknown(model["License"])}</span></span>
1569
  <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
1570
-
1571
-
1572
  <span class="flex items-center gap-1" title="Revision"><i data-lucide="git-commit" class="w-3.5 h-3.5"></i> <span id="modalRevision" class="font-mono">${revision}</span></span>
1573
  <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
1574
-
1575
  <span class="flex items-center gap-1" title="Downloads (last 30 days)">
1576
  <i data-lucide="download" class="w-3.5 h-3.5"></i>
1577
  <span id="modalDownloads">Unknown</span>
1578
  </span>
1579
  `;
1580
-
1581
  const metaContainer = document.querySelector('#modelModal .border-y');
1582
  if (metaContainer) metaContainer.innerHTML = metadataHtml;
1583
-
1584
  // --- Fetch Logic to include Downloads ---
1585
  const formData = new FormData();
1586
  formData.append('model_name', model["Model Name"]);
1587
  formData.append('revision', revisionForApi);
1588
-
1589
  fetch('/api/model-likes', {
1590
  method: 'POST',
1591
  body: formData
@@ -1609,21 +1666,21 @@ window.toggleExpandText = function (idBase, btn) {
1609
  const likesEl = $('#modalLikes');
1610
  if (likesEl) likesEl.innerText = prettyIntOrUnknown(fallbackLikes);
1611
  });
1612
-
1613
  const modelPath = encodeURIComponent(String(model["Model Name"] || "")).replace(/%2F/g, '/');
1614
  const hfLink = $('#modalLinkHF');
1615
  if (hfLink) hfLink.href = `https://huggingface.co/${modelPath}`;
1616
-
1617
  const detailsLink = $('#modalLinkDetails');
1618
  if (detailsLink) detailsLink.href = `https://huggingface.co/datasets/qimma/leaderboard-details/tree/main/${modelPath}`;
1619
-
1620
  const chartContainer = $('#modalChart');
1621
  if (chartContainer) chartContainer.innerHTML = "";
1622
-
1623
  EVAL_COLUMNS.forEach(col => {
1624
  const score = parseFloat(model[col]) || 0;
1625
  const hue = (Math.max(0, Math.min(100, score)) / 100) * 120;
1626
-
1627
  const barHtml = `
1628
  <div class="flex items-center gap-3 group">
1629
  <div class="w-32 text-sm font-medium text-slate-600 dark:text-slate-400 truncate text-right shrink-0" title="${col}">${col}</div>
@@ -1634,13 +1691,13 @@ window.toggleExpandText = function (idBase, btn) {
1634
  </div>
1635
  `;
1636
  if (chartContainer) chartContainer.insertAdjacentHTML('beforeend', barHtml);
1637
-
1638
  setTimeout(() => {
1639
  const bar = document.getElementById(`bar-${col.replace(/\s+/g, '')}`);
1640
  if (bar) bar.style.width = `${score}%`;
1641
  }, 100);
1642
  });
1643
-
1644
  const modelModalEl = $('#modelModal');
1645
  if (modelModalEl) modelModalEl.classList.remove('hidden');
1646
  document.body.style.overflow = 'hidden';
@@ -1654,7 +1711,7 @@ window.toggleExpandText = function (idBase, btn) {
1654
  if (modelModalEl) modelModalEl.classList.add('hidden');
1655
  document.body.style.overflow = '';
1656
  };
1657
-
1658
  // --- TABLE LOGIC ---
1659
  window.toggleSort = function (colId) {
1660
  currentSort = (currentSort.colId !== colId) ? { colId, dir: 'asc' } : { colId: (currentSort.dir === 'asc' ? colId : null), dir: (currentSort.dir === 'asc' ? 'desc' : 'none') };
@@ -1668,68 +1725,95 @@ window.toggleExpandText = function (idBase, btn) {
1668
  applyGradient(max > 0 ? wrapper.scrollTop / max : 0);
1669
  }, 50);
1670
  };
1671
-
1672
  window.toggleFilterPanel = function () {
1673
  $('#filterPanel').classList.toggle('hidden');
1674
  const btn = $('#filterBtn');
1675
- ['bg-indigo-100', 'text-indigo-700', 'ring-2', 'ring-indigo-500', 'bg-slate-100'].forEach(c => btn.classList.toggle(c));
1676
  };
1677
-
1678
  window.resetFilters = function () {
 
1679
  $('#searchInput').value = "";
 
 
1680
  $('#minSizeSlider').value = minMeta;
1681
  $('#maxSizeSlider').value = maxMeta;
1682
- $$('input[type="checkbox"]').forEach(c => c.checked = true);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1683
  $('#minSizeSlider').dispatchEvent(new Event('input'));
1684
  applyFilters();
1685
  };
1686
-
1687
  window.resetColumns = function () {
1688
  tableColumns.forEach(c => c.hidden = !(["Average", "Rank", "Model Name"].includes(c.id) || EVAL_COLUMNS.includes(c.id)));
1689
  applyFilters();
1690
  buildColMenuDOM();
1691
  };
1692
-
1693
  window.applyFilters = applyFilters;
1694
-
1695
  function applyStickyModelNameColumn() {
1696
  const wrapper = $('#table-wrapper');
1697
  if (!wrapper) return false;
1698
  const table = wrapper.querySelector('table.gridjs-table');
1699
  if (!table) return false;
1700
-
1701
  const headers = [...table.querySelectorAll('thead th')];
1702
  if (!headers.length) return false;
1703
  const visibleCols = tableColumns.filter(c => !c.hidden).map(c => c.id);
1704
  const rankIdx = visibleCols.indexOf("Rank");
1705
  const modelIdx = visibleCols.indexOf("Model Name");
1706
-
1707
  headers.forEach(th => th.classList.remove('sticky-rank-col', 'sticky-model-col', 'avg-col-header'));
1708
  table.querySelectorAll('tbody tr').forEach(tr => {
1709
  [...tr.children].forEach(td => td.classList.remove('sticky-rank-col', 'sticky-model-col', 'avg-col-header'));
1710
  });
1711
-
1712
  if (rankIdx >= 0 && headers[rankIdx]) {
1713
  headers[rankIdx].classList.add('sticky-rank-col');
1714
  table.querySelectorAll('tbody tr').forEach(tr => {
1715
  if (tr.children[rankIdx]) tr.children[rankIdx].classList.add('sticky-rank-col');
1716
  });
1717
  }
1718
-
1719
  const rankWidth = (rankIdx >= 0 && headers[rankIdx]) ? headers[rankIdx].getBoundingClientRect().width : 0;
1720
  wrapper.style.setProperty('--sticky-model-left', `${Math.max(0, Math.round(rankWidth))}px`);
1721
-
1722
  if (modelIdx >= 0 && headers[modelIdx]) {
1723
  headers[modelIdx].classList.add('sticky-model-col');
1724
  table.querySelectorAll('tbody tr').forEach(tr => {
1725
  if (tr.children[modelIdx]) tr.children[modelIdx].classList.add('sticky-model-col');
1726
  });
1727
  }
1728
-
1729
  const modelWidth = (modelIdx >= 0 && headers[modelIdx]) ? headers[modelIdx].getBoundingClientRect().width : 0;
1730
  const avgLeft = Math.max(0, Math.round(rankWidth + modelWidth));
1731
  wrapper.style.setProperty('--sticky-avg-left', `${avgLeft}px`);
1732
-
1733
  const avgIdx = visibleCols.findIndex(k => k.includes("Average"));
1734
  if (avgIdx >= 0 && headers[avgIdx]) {
1735
  headers[avgIdx].classList.add('avg-col-header');
@@ -1737,15 +1821,15 @@ window.toggleExpandText = function (idBase, btn) {
1737
  if (tr.children[avgIdx]) tr.children[avgIdx].classList.add('avg-col-header');
1738
  });
1739
  }
1740
-
1741
  return true;
1742
  }
1743
-
1744
  function updateAvgColHighlight() {
1745
  const wrapper = $('#table-wrapper');
1746
  const outer = $('#table-outer');
1747
  if (!wrapper || !outer) return;
1748
-
1749
  // Hide only when user has explicitly hidden the Average column.
1750
  const avgColHidden = tableColumns.some(c => c.id && c.id.includes('Average') && c.hidden);
1751
  const existing = $('#avg-col-highlight');
@@ -1753,12 +1837,12 @@ window.toggleExpandText = function (idBase, btn) {
1753
  if (existing) existing.style.display = 'none';
1754
  return;
1755
  }
1756
-
1757
  // If DOM not ready yet (avg-col-header not applied), skip silently —
1758
  // the 100ms/400ms retries in scheduleStickyApply will catch it.
1759
  const th = wrapper.querySelector('th.avg-col-header');
1760
  if (!th) return;
1761
-
1762
  let highlight = existing;
1763
  if (!highlight) {
1764
  highlight = document.createElement('div');
@@ -1766,22 +1850,22 @@ window.toggleExpandText = function (idBase, btn) {
1766
  outer.appendChild(highlight);
1767
  }
1768
  highlight.style.display = '';
1769
-
1770
  const outerRect = outer.getBoundingClientRect();
1771
  const thRect = th.getBoundingClientRect();
1772
-
1773
  highlight.style.left = `${thRect.left - outerRect.left}px`;
1774
  highlight.style.width = `${thRect.width}px`;
1775
  highlight.style.height = `${outer.offsetHeight}px`;
1776
  }
1777
-
1778
  function applyGradient(ratio) {
1779
  const outer = $('#table-outer');
1780
  if (!outer) return;
1781
  outer.style.setProperty('--gradient-scroll', ratio.toFixed(3));
1782
  outer.dataset.sortDir = currentSort ? currentSort.dir : 'none';
1783
  }
1784
-
1785
  function initGradientScroll() {
1786
  const wrapper = $('#table-wrapper');
1787
  if (!wrapper) return;
@@ -1794,7 +1878,7 @@ window.toggleExpandText = function (idBase, btn) {
1794
  updateAvgColHighlight();
1795
  }, { passive: true });
1796
  }
1797
-
1798
  function scheduleStickyApply(retries = 8) {
1799
  const applyAll = () => { applyStickyModelNameColumn(); updateAvgColHighlight(); };
1800
  let attempts = 0;
@@ -1813,16 +1897,17 @@ window.toggleExpandText = function (idBase, btn) {
1813
  };
1814
  run();
1815
  }
1816
-
1817
  function applyFilters() {
1818
  if (!lbData.length) return;
1819
  const sVal = $('#searchInput').value.toLowerCase();
1820
  const minSz = parseInt($('#minSizeSlider').value);
1821
  const maxSz = (parseInt($('#maxSizeSlider').value) === maxMeta) ? 99999 : parseInt($('#maxSizeSlider').value);
1822
-
1823
- const getVals = cls => $$(`.${cls}:checked`).map(c => c.value);
1824
- const [types, lics] = [getVals('type-chk'), getVals('license-chk')];
1825
-
 
1826
  // 1. Filter Data
1827
  let filtered = lbData.filter(r =>
1828
  (r["Model Name"] || "").toLowerCase().includes(sVal) &&
@@ -1831,11 +1916,12 @@ window.toggleExpandText = function (idBase, btn) {
1831
  const sizeValue = s === null ? 0 : s;
1832
  return sizeValue >= minSz && sizeValue <= maxSz;
1833
  })() &&
1834
-
1835
  (!types.length || types.includes(r["Full Type"])) &&
1836
- (!lics.length || lics.includes(r["License"]))
 
1837
  ).map(row => ({ ...row }));
1838
-
1839
  // 2 & 3. When "Filtered Average" is active: swap MedArabiQ to the
1840
  // relevant subset score, then recalculate average over visible cols.
1841
  if (tableOptions.avgMode === 'visible') {
@@ -1856,7 +1942,7 @@ window.toggleExpandText = function (idBase, btn) {
1856
  : 0;
1857
  });
1858
  }
1859
-
1860
  // 3. Sort Data
1861
  if (currentSort.colId && currentSort.dir !== 'none') {
1862
  filtered.sort((a, b) => {
@@ -1869,7 +1955,7 @@ window.toggleExpandText = function (idBase, btn) {
1869
  return String(vA ?? "").localeCompare(String(vB ?? "")) * (currentSort.dir === 'asc' ? 1 : -1);
1870
  });
1871
  }
1872
-
1873
  // 4. Handle Ranking Mode
1874
  if (tableOptions.rankMode === 'dynamic') {
1875
  // Rank is always quality-based (rank 1 = best Average),
@@ -1878,13 +1964,13 @@ window.toggleExpandText = function (idBase, btn) {
1878
  const rankMap = new Map(byQuality.map((row, i) => [row, i + 1]));
1879
  filtered.forEach(row => { row['Rank'] = rankMap.get(row) ?? filtered.length; });
1880
  }
1881
-
1882
  // 5. Update Grid
1883
  grid.updateConfig({ data: filtered, columns: tableColumns }).forceRender();
1884
  scheduleStickyApply();
1885
- $('#modelCounter').innerText = `${filtered.length} / ${lbData.length}`;
1886
- }
1887
 
 
 
1888
  function renderTable(data) {
1889
  $('#table-wrapper').innerHTML = "";
1890
  grid = new gridjs.Grid({
@@ -1899,7 +1985,7 @@ window.toggleExpandText = function (idBase, btn) {
1899
  scheduleStickyApply();
1900
  initGradientScroll();
1901
  }
1902
-
1903
  function prepareColumns(data) {
1904
  const keys = Object.keys(data[0] || {});
1905
  const avgKey = keys.find(k => k.includes("Average"));
@@ -1911,7 +1997,7 @@ window.toggleExpandText = function (idBase, btn) {
1911
  const typeIdx = keys.findIndex(k => ["T", "Type", "Full Type"].includes(k));
1912
  const modelNameIdx = keys.findIndex(k => k === "Model Name");
1913
  const vis = tableColumns.reduce((acc, c) => ({ ...acc, [c.id]: c.hidden }), {});
1914
-
1915
  tableColumns = keys.map(key => {
1916
  const isScore = EVAL_COLUMNS.includes(key), isAvg = key.includes("Average");
1917
  // Skip hidden subset columns — they are data-only, never rendered as columns
@@ -1929,16 +2015,16 @@ window.toggleExpandText = function (idBase, btn) {
1929
  }
1930
  let icon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="lucide lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
1931
  let cls = "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300";
1932
-
1933
  if (currentSort.colId === key) {
1934
  cls = "text-indigo-600 dark:text-indigo-400";
1935
  icon = currentSort.dir === 'desc'
1936
  ? `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>`
1937
  : `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>`;
1938
  }
1939
-
1940
  const headerHtml = `<div onclick="window.toggleSort('${key}')" class="flex items-center justify-between gap-2 cursor-pointer select-none w-full h-full"><span>${name}</span><span class="${cls}">${icon}</span></div>`;
1941
-
1942
  const def = {
1943
  id: key,
1944
  name: gridjs.html(headerHtml),
@@ -1947,7 +2033,7 @@ window.toggleExpandText = function (idBase, btn) {
1947
  width: '140px',
1948
  sort: false
1949
  };
1950
-
1951
  if (key === "Model Size") {
1952
  def.formatter = (c) => {
1953
  const n = toNumber(c);
@@ -1955,14 +2041,14 @@ window.toggleExpandText = function (idBase, btn) {
1955
  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>`);
1956
  };
1957
  }
1958
-
1959
  if (key === "License") {
1960
  def.formatter = (c) => {
1961
  const label = (c && c !== "Unknown") ? c : "Unknown";
1962
  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>`);
1963
  };
1964
  }
1965
-
1966
  if (key === "Model Name") {
1967
  def.width = '400px';
1968
  def.formatter = (c, r) => {
@@ -1970,27 +2056,32 @@ window.toggleExpandText = function (idBase, btn) {
1970
  const tMap = { "base": "🟢", "instruct": "🔶"};
1971
  const tIcon = tMap[type] || type;
1972
  const em = encodeURIComponent(String(c ?? ""));
1973
-
1974
  return gridjs.html(`
1975
  <div class="relative w-full h-[38px] flex items-center group pr-6">
1976
  ${type ? `<span class="mr-2 text-lg select-none" title="${type}">${tIcon}</span>` : ''}
1977
- <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>
1978
  </div>
1979
  `);
1980
  };
1981
  } else if (isScore || isAvg) {
1982
-
1983
- // -- NEW LOGIC FOR SCORE DISPLAY STATUS --
 
1984
  const renderBar = (c, modelName, benchmark) => {
1985
  const n = parseFloat(c); if (isNaN(n)) return c;
1986
  const h = (Math.max(0, Math.min(100, n)) / 100) * 120;
1987
- const bar = `<div class="flex justify-center"><div style="background: linear-gradient(to right, hsla(${h},85%,50%,0.3) ${n}%, hsla(${h},85%,50%,0.05) ${n}%); border: 1px solid hsla(${h},85%,40%,0.3);" class="w-24 py-1 rounded-md text-center text-xs font-bold text-slate-700 dark:text-slate-200 shadow-sm">${n.toFixed(2)}<span class="text-[10px] font-normal opacity-70 ml-0.5">%</span></div></div>`;
 
 
 
 
1988
  if (!isScore || !modelName) return gridjs.html(bar);
1989
  const em = encodeURIComponent(modelName);
1990
  const eb = encodeURIComponent(benchmark);
1991
  return gridjs.html(`<button onclick="window.openBenchmarkDetails(decodeURIComponent('${em}'), decodeURIComponent('${eb}'))" class="w-full text-left hover:opacity-90 transition-opacity" title="Click for per-question details">${bar}</button>`);
1992
  };
1993
-
1994
  const renderRaw = (c, modelName, benchmark) => {
1995
  const n = parseFloat(c); if (isNaN(n)) return c;
1996
  const raw = `<div class="flex justify-center text-xs font-bold text-slate-700 dark:text-slate-300 py-1">${n.toFixed(2)}</div>`;
@@ -1999,80 +2090,135 @@ window.toggleExpandText = function (idBase, btn) {
1999
  const eb = encodeURIComponent(benchmark);
2000
  return gridjs.html(`<button onclick="window.openBenchmarkDetails(decodeURIComponent('${em}'), decodeURIComponent('${eb}'))" class="w-full text-left hover:opacity-90 transition-opacity" title="Click for per-question details">${raw}</button>`);
2001
  };
2002
-
2003
  const shouldUseBar = true;
2004
-
2005
  def.formatter = (c, r) => {
2006
  const modelName = (modelNameIdx > -1 && r.cells[modelNameIdx]) ? r.cells[modelNameIdx].data : "";
2007
  if (isAvg) {
2008
  const n = parseFloat(c); if (isNaN(n)) return c;
2009
  const h = (Math.max(0, Math.min(100, n)) / 100) * 120;
2010
- return gridjs.html(`<div class="flex justify-center"><div style="background: linear-gradient(to right, hsla(${h},100%,45%,0.55) ${n}%, hsla(${h},100%,45%,0.07) ${n}%); border: 1.5px solid hsla(${h},90%,40%,0.65);" class="w-24 py-1 rounded-md text-center text-xs font-bold text-slate-700 dark:text-slate-200 shadow-sm">${n.toFixed(2)}<span class="text-[10px] font-normal opacity-70 ml-0.5">%</span></div></div>`);
 
 
 
 
2011
  }
2012
  return shouldUseBar ? renderBar(c, modelName, key) : renderRaw(c, modelName, key);
2013
  };
2014
-
2015
  } else if (key === "Rank") {
2016
  def.width = '100px';
2017
  def.formatter = (c) => {
2018
  const rank = parseInt(c);
2019
  let badge = `<span class="font-mono font-bold text-slate-700 dark:text-slate-200">#${rank}</span>`;
2020
-
2021
- if (rank === 1) badge = `<span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-700/50 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm box-decoration-clone">1 🥇</span>`;
2022
- if (rank === 2) badge = `<span class="bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300 border border-slate-200 dark:border-slate-600 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm">2 🥈</span>`;
2023
- if (rank === 3) badge = `<span class="bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300 border border-orange-200 dark:border-orange-700/50 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm">3 🥉</span>`;
2024
-
2025
  return gridjs.html(`<div class="flex justify-center items-center h-full">${badge}</div>`);
2026
  };
2027
  }
2028
  return key === "Full Type" || key === "T" ? { ...def, hidden: true } : def;
2029
  });
2030
  }
2031
-
2032
  function setupFilters() {
2033
  const minS = $('#minSizeSlider'), maxS = $('#maxSizeSlider');
2034
  minS.min = maxS.min = minMeta;
2035
  minS.max = maxS.max = maxMeta;
2036
  minS.value = minMeta;
2037
  maxS.value = maxMeta;
2038
-
2039
  const formatLabel = (val) => {
2040
  return val + "B";
2041
  };
2042
-
2043
  $('#minSizeLabel').innerText = formatLabel(minMeta);
2044
  $('#maxSizeLabel').innerText = formatLabel(maxMeta);
2045
-
2046
  const updateDualSlider = () => {
2047
  let minV = parseInt(minS.value), maxV = parseInt(maxS.value);
2048
  if (minV > maxV) { const tmp = minV; minS.value = maxV; maxS.value = tmp; minV = maxV; maxV = tmp; }
2049
-
2050
  const textMin = formatLabel(minV);
2051
  const textMax = formatLabel(maxV);
2052
  $('#sizeValue').innerText = `${textMin} - ${textMax}`;
2053
-
2054
  const range = $('#sliderRange');
2055
  const percent1 = ((minV - minS.min) / (minS.max - minS.min)) * 100;
2056
  const percent2 = ((maxV - maxS.min) / (maxS.max - maxS.min)) * 100;
2057
  range.style.left = percent1 + "%"; range.style.width = (percent2 - percent1) + "%";
2058
  };
2059
-
2060
  minS.oninput = updateDualSlider;
2061
  maxS.oninput = updateDualSlider;
2062
  minS.onchange = maxS.onchange = () => applyFilters();
2063
  updateDualSlider();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2064
 
2065
- const createInputs = (id, key, cls, type) => {
2066
- const vals = [...new Set(lbData.map(d => d[key]))].filter(Boolean);
2067
- $(id).innerHTML = vals.map(v => type === 'pill'
2068
- ? `<label class="cursor-pointer"><input type="checkbox" value="${v}" class="peer sr-only ${cls}" checked onchange="window.applyFilters()"><div class="px-3 py-1 rounded-full border border-slate-300 dark:border-slate-600 text-xs font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-700 hover:bg-slate-50 peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 transition-all">${v}</div></label>`
2069
- : `<label class="inline-flex items-center p-2 border border-slate-200 dark:border-slate-600 rounded-md bg-slate-50 dark:bg-slate-700 hover:bg-white transition cursor-pointer"><input type="checkbox" value="${v}" class="${cls} form-checkbox h-4 w-4 text-indigo-600 rounded" checked onchange="window.applyFilters()"><span class="ml-2 text-xs font-medium text-slate-700 dark:text-slate-200">${v}</span></label>`
2070
- ).join('');
 
 
 
 
 
 
 
 
 
 
2071
  };
2072
- createInputs('#typeFilterContainer', 'Full Type', 'type-chk', 'pill');
2073
- createInputs('#licenseFilterContainer', 'License', 'license-chk', 'pill');
2074
- }
2075
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2076
  function buildColMenuDOM() {
2077
  const addBtns = (grp, el) => {
2078
  $(el).innerHTML = '';
@@ -2092,10 +2238,10 @@ window.toggleExpandText = function (idBase, btn) {
2092
  };
2093
  addBtns('scores', '#colListScores'); addBtns('details', '#colListDetails');
2094
  }
2095
-
2096
  })();
2097
  </script>
2098
-
2099
  </body>
2100
-
2101
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
10
  <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
11
  <script src="https://unpkg.com/lucide@latest"></script>
12
  <script>
13
+ tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#131825', darkcard: '#1c2235' } } } }
14
  </script>
15
  </head>
16
+
17
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100 relative">
18
+
19
  <style>
20
  #table-outer {
21
  position: relative;
22
  --gradient-opacity: 0.07;
23
  --gradient-scroll: 0;
24
  }
25
+
26
  #table-outer::after {
27
  content: '';
28
  position: absolute;
 
39
  border-radius: 1rem;
40
  transition: background 0.15s ease;
41
  }
42
+
43
  #table-outer[data-sort-dir="desc"]::after {
44
  background: linear-gradient(
45
  to bottom,
 
49
  rgba(16, 185, 129, calc(var(--gradient-opacity) * var(--gradient-scroll))) 100%
50
  );
51
  }
52
+
53
  #table-wrapper {
54
  max-height: 700px;
55
  overflow-y: auto;
 
59
  border-radius: 1rem;
60
  border: 1px solid #cbd5e1;
61
  }
62
+
63
  .dark #table-wrapper {
64
+ border: 1px solid #252a4a;
65
  }
66
+
67
  #table-wrapper::-webkit-scrollbar {
68
  width: 8px;
69
  height: 8px;
70
  }
71
+
72
  #table-wrapper::-webkit-scrollbar-track {
73
  background: transparent;
74
  }
75
+
76
  #table-wrapper::-webkit-scrollbar-thumb {
77
  background: #cbd5e1;
78
  border-radius: 4px;
79
  }
80
+
81
  .dark #table-wrapper::-webkit-scrollbar-thumb {
82
+ background: #384060;
83
  }
84
+
85
  .gridjs-wrapper {
86
  height: auto !important;
87
  max-height: none !important;
 
91
  box-shadow: none !important;
92
  background: transparent !important;
93
  }
94
+
95
  .gridjs-container {
96
  color: inherit;
97
  background-color: transparent;
98
  overflow: visible !important;
99
  }
100
+
101
  .gridjs-head {
102
  position: sticky;
103
  top: 0;
104
  z-index: 20;
105
  }
106
+
107
  .gridjs-th {
108
  background-color: #f1f5f9;
109
  position: relative;
 
111
  border-top: none !important;
112
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
113
  }
114
+
115
  .gridjs-td {
116
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.15);
117
  }
118
+
119
  .dark .gridjs-th {
120
+ box-shadow: 1px 0 0 rgba(37, 42, 74, 0.9);
121
  }
122
+
123
  .dark .gridjs-td {
124
+ box-shadow: 1px 0 0 rgba(37, 42, 74, 0.7);
125
  }
126
+
127
  #table-wrapper .gridjs-th.sticky-rank-col,
128
  #table-wrapper .gridjs-td.sticky-rank-col {
129
  position: sticky !important;
 
131
  z-index: 32 !important;
132
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
133
  }
134
+
135
  #table-wrapper .gridjs-th.sticky-model-col,
136
  #table-wrapper .gridjs-td.sticky-model-col {
137
  position: sticky !important;
 
139
  z-index: 31 !important;
140
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
141
  }
142
+
143
  #table-wrapper .gridjs-th.sticky-rank-col,
144
  #table-wrapper .gridjs-th.sticky-model-col {
145
  z-index: 40 !important;
146
  top: 0 !important;
147
  }
148
+
149
  #table-wrapper .gridjs-td.sticky-rank-col,
150
  #table-wrapper .gridjs-td.sticky-model-col {
151
  background: #fff !important;
152
  }
153
+
154
  .dark #table-wrapper .gridjs-td.sticky-rank-col,
155
  .dark #table-wrapper .gridjs-td.sticky-model-col {
156
+ background: #131825 !important;
157
+ box-shadow: 2px 0 0 rgba(37, 42, 74, 0.8);
158
  }
159
+
160
  .dark #table-wrapper .gridjs-th.sticky-rank-col,
161
  .dark #table-wrapper .gridjs-th.sticky-model-col {
162
  box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
163
  }
164
+
165
  /* Fallback sticky behavior (covers async re-renders where classes may lag). */
166
  #table-wrapper table.gridjs-table thead th:nth-child(1) {
167
  position: sticky !important;
 
170
  z-index: 46 !important;
171
  background: #f1f5f9 !important;
172
  }
173
+
174
  #table-wrapper table.gridjs-table tbody td:nth-child(1) {
175
  position: sticky !important;
176
  left: 0 !important;
177
  z-index: 30 !important;
178
  }
179
+
180
  #table-wrapper table.gridjs-table thead th:nth-child(2) {
181
  position: sticky !important;
182
  left: var(--sticky-model-left, 100px) !important;
 
184
  z-index: 45 !important;
185
  background: #f1f5f9 !important;
186
  }
187
+
188
  #table-wrapper table.gridjs-table tbody td:nth-child(2) {
189
  position: sticky !important;
190
  left: var(--sticky-model-left, 100px) !important;
191
  z-index: 29 !important;
192
  }
193
+
194
  .dark #table-wrapper table.gridjs-table thead th:nth-child(1),
195
  .dark #table-wrapper table.gridjs-table thead th:nth-child(2) {
196
+ background: #1e2245 !important;
197
  }
198
+
199
  #table-wrapper .gridjs-th.avg-col-header,
200
  #table-wrapper .gridjs-td.avg-col-header {
201
  position: sticky !important;
 
204
  background: #ffffff !important;
205
  font-weight: 700 !important;
206
  }
207
+
208
  #table-wrapper .gridjs-td.avg-col-header * {
209
  font-weight: 700 !important;
210
  }
211
+
212
  #table-wrapper .gridjs-th.avg-col-header {
213
  background: #f8faff !important;
214
  z-index: 39 !important;
215
  top: 0 !important;
216
  }
217
+
218
  .dark #table-wrapper .gridjs-th.avg-col-header {
219
+ background: #1a1e40 !important;
220
+ color: #c4a8e8 !important;
221
  }
222
+
223
  .dark #table-wrapper .gridjs-td.avg-col-header {
224
+ background: #161830 !important;
225
  }
226
+
227
  #avg-col-highlight {
228
  position: absolute;
229
  top: 0;
 
235
  border-right: 1px solid rgba(100, 116, 139, 0.25);
236
  box-shadow: -2px 0 8px rgba(0,0,0,0.07), 2px 0 8px rgba(0,0,0,0.07);
237
  }
238
+
239
  .dark #avg-col-highlight {
240
  border-left: 1px solid rgba(148, 163, 184, 0.2);
241
  border-right: 1px solid rgba(148, 163, 184, 0.2);
242
  box-shadow: -2px 0 10px rgba(0,0,0,0.25), 2px 0 10px rgba(0,0,0,0.25);
243
  }
244
+
245
  .dark .gridjs-head,
246
  .dark th.gridjs-th {
247
+ background-color: #1e2245 !important;
248
+ border-color: #252a4a !important;
249
+ color: #c8cce8;
250
+ letter-spacing: 0.03em;
251
  }
252
+
253
  .dark td.gridjs-td {
254
+ background-color: #131825;
255
+ border-color: #1e2245 !important;
256
+ color: #c8cce8;
257
  }
258
+
259
  .dark .gridjs-tr:hover td {
260
+ background-color: #1c2040 !important;
261
  }
262
+
263
+ .dark .gridjs-tr:nth-child(even) td {
264
+ background-color: #161a30;
265
+ }
266
+
267
+ .dark .gridjs-tr:nth-child(even):hover td {
268
+ background-color: #1c2040 !important;
269
+ }
270
+
271
  table.gridjs-table {
272
  width: 100% !important;
273
  table-layout: fixed;
274
  border-collapse: separate !important;
275
  border-spacing: 0 !important;
276
  }
277
+
278
  td.gridjs-td {
279
  white-space: nowrap;
280
  padding: 12px 24px !important;
281
  overflow: hidden;
282
  text-overflow: ellipsis;
283
  }
284
+
285
  th.gridjs-th,
286
  td.gridjs-td {
287
  border-left: none !important;
288
  border-right: 1px solid rgba(148, 163, 184, 0.15) !important;
289
  }
290
+
291
  .dark th.gridjs-th,
292
  .dark td.gridjs-td {
293
+ border-right: 1px solid rgba(148, 163, 184, 0.18) !important;
294
  }
295
+
296
  .line-clamp-2-custom {
297
  display: -webkit-box;
298
  -webkit-line-clamp: 2;
 
302
  line-height: 1.3;
303
  word-break: break-word;
304
  }
305
+
306
  .slider-container {
307
  position: relative;
308
  width: 100%;
309
  height: 20px;
310
  margin-top: 10px;
311
  }
312
+
313
  .slider-track {
314
  position: absolute;
315
  top: 50%;
 
320
  border-radius: 10px;
321
  z-index: 1;
322
  }
323
+
324
  .dark .slider-track {
325
  background: #334155;
326
  }
327
+
328
  .slider-range {
329
  position: absolute;
330
  top: 50%;
 
334
  z-index: 2;
335
  border-radius: 10px;
336
  }
337
+
338
  input[type=range].dual-slider {
339
  position: absolute;
340
  top: 50%;
 
347
  z-index: 3;
348
  margin: 0;
349
  }
350
+
351
  input[type=range].dual-slider::-webkit-slider-thumb {
352
  -webkit-appearance: none;
353
  pointer-events: auto;
 
359
  border: 2px solid white;
360
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
361
  }
362
+
363
  input[type=range].dual-slider::-moz-range-thumb {
364
  pointer-events: auto;
365
  height: 18px;
 
370
  border: 2px solid white;
371
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
372
  }
373
+
374
  .tooltip-trigger:hover .tooltip-content {
375
  visibility: visible;
376
  opacity: 1;
377
  }
378
+
379
  @keyframes fadeIn {
380
  from {
381
  opacity: 0;
382
  }
383
+
384
  to {
385
  opacity: 1;
386
  }
387
  }
388
+
389
  @keyframes slideUp {
390
  from {
391
  transform: translate(-50%, -45%);
392
  opacity: 0;
393
  }
394
+
395
  to {
396
  transform: translate(-50%, -50%);
397
  opacity: 1;
398
  }
399
  }
400
+
401
  .score-click-demo {
402
  width: 128px;
403
  min-width: 128px;
 
408
  position: relative;
409
  overflow: hidden;
410
  }
411
+
412
  .dark .score-click-demo {
413
  border-color: #3730a3;
414
  background: #1e1b4b;
415
  }
416
+
417
  .score-click-demo-screen {
418
  position: absolute;
419
  inset: 6px;
 
422
  border: 1px solid #dbeafe;
423
  overflow: hidden;
424
  }
425
+
426
  .dark .score-click-demo-screen {
427
  background: #0f172a;
428
  border-color: #334155;
429
  }
430
+
431
  .score-click-demo-score {
432
  position: absolute;
433
+ left: 50%;
434
+ top: 50%;
435
+ transform: translate(-50%, -50%);
436
  font-size: 10px;
437
  font-weight: 800;
438
  color: #4f46e5;
 
442
  border: 1px solid #c7d2fe;
443
  animation: demoScorePulse 2.8s ease-in-out infinite;
444
  }
445
+
446
  .dark .score-click-demo-score {
447
  color: #a5b4fc;
448
  background: rgba(79, 70, 229, 0.25);
449
  border-color: rgba(129, 140, 248, 0.4);
450
  }
451
+
452
  .score-click-demo-detail {
453
  position: absolute;
454
  left: 8px;
455
  right: 8px;
456
+ top: 28px;
457
  height: 0;
458
  opacity: 0;
459
  border-radius: 5px;
 
461
  border: 1px solid #e2e8f0;
462
  animation: demoExpandDetail 2.8s ease-in-out infinite;
463
  }
464
+
465
  .dark .score-click-demo-detail {
466
  background: #1e293b;
467
  border-color: #334155;
468
  }
469
+
470
  .score-click-demo-detail::before {
471
  content: "";
472
  position: absolute;
 
477
  border-radius: 2px;
478
  background: #94a3b8;
479
  }
480
+
481
  .score-click-demo-detail::after {
482
  content: "";
483
  position: absolute;
 
488
  border-radius: 2px;
489
  background: #cbd5e1;
490
  }
491
+
492
  .score-click-demo-cursor {
493
  position: absolute;
494
  width: 10px;
 
503
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
504
  z-index: 3;
505
  }
506
+
507
  .dark .score-click-demo-cursor {
508
  border-left-color: #e2e8f0;
509
  }
510
+
511
  .score-click-demo-click {
512
  position: absolute;
513
  width: 8px;
514
  height: 8px;
515
  border: 2px solid #6366f1;
516
  border-radius: 999px;
517
+ left: 50%;
518
+ top: 50%;
519
+ transform: translate(-50%, -50%);
520
  opacity: 0;
521
  animation: demoClickPulse 2.8s ease-out infinite;
522
  z-index: 2;
523
  }
524
+
525
  @keyframes demoCursorMove {
526
  0% {
527
  left: 12px;
 
534
  }
535
 
536
  45% {
537
+ left: 50px;
538
+ top: 14px;
539
  }
540
 
541
  100% {
542
+ left: 50px;
543
+ top: 14px;
544
  }
545
  }
546
+
547
  @keyframes demoClickPulse {
548
  0%,
549
  40% {
550
  opacity: 0;
551
  transform: scale(0.5);
552
  }
553
+
554
  50% {
555
  opacity: 0.85;
556
  transform: scale(1);
557
  }
558
+
559
  62% {
560
  opacity: 0;
561
  transform: scale(2);
562
  }
563
+
564
  100% {
565
  opacity: 0;
566
  transform: scale(2);
567
  }
568
  }
569
+
570
  @keyframes demoExpandDetail {
571
  0%,
572
  52% {
573
  height: 0;
574
  opacity: 0;
575
  }
576
+
577
  68% {
578
  height: 14px;
579
  opacity: 1;
580
  }
581
+
582
  100% {
583
  height: 14px;
584
  opacity: 1;
585
  }
586
  }
587
+
588
  @keyframes demoScorePulse {
589
  0%,
590
  42% {
591
  transform: scale(1);
592
  }
593
+
594
  52% {
595
  transform: scale(1.08);
596
  }
597
+
598
  62%,
599
  100% {
600
  transform: scale(1);
601
  }
602
  }
603
+
604
  .modal-backdrop {
605
  animation: fadeIn 0.2s ease-out forwards;
606
  }
607
+
608
  .modal-content {
609
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
610
  }
611
  </style>
612
+
613
  <!-- Header & Search -->
614
  <div class="flex justify-center mb-6 pt-10">
615
  <div class="relative w-full sm:w-[75%]">
 
617
  <i data-lucide="search" class="h-5 w-5 text-slate-400"></i>
618
  </div>
619
  <input type="text" id="searchInput"
620
+ class="block w-full pl-11 pr-36 py-3 border border-slate-300 dark:border-slate-600 rounded-full bg-white dark:bg-slate-800 dark:text-white placeholder-slate-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm shadow-sm transition-colors"
621
  placeholder="Search models (e.g. Falcon, Qwen)...">
622
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2">
 
 
623
  <button onclick="window.toggleFilterPanel()" id="filterBtn"
624
+ class="flex items-center gap-2 px-6 py-2 text-sm font-semibold rounded-full
625
+ bg-slate-100 hover:bg-slate-200
626
+ dark:bg-transparent dark:hover:bg-slate-700
627
+ text-indigo-600 dark:text-indigo-400"style="color:#4F46E5;">
628
+ <i data-lucide="sliders-horizontal" class="h-4 w-4"></i> Filters
629
  </button>
630
  </div>
631
  </div>
632
  </div>
633
+
634
  <!-- Filter Panel -->
635
  <div id="filterPanel"
636
  class="hidden w-full sm:w-[75%] mx-auto bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm p-6 mb-6">
637
+ <!-- Filter panel header -->
638
+ <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
639
+ <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Filters</span>
640
+ <button onclick="window.resetFilters()" class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1">
641
+ <i data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset all
642
+ </button>
643
+ </div>
644
+
645
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
646
+
647
+ <!-- LEFT COL: Model Type + Model Size + Organization -->
648
+ <div class="space-y-4">
649
+
650
+ <!-- Model Type -->
651
+ <div>
652
+ <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Model Type</p>
653
+ <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
654
+ <div class="flex flex-wrap gap-1.5" id="typeFilterContainer"></div>
655
+ </div>
656
  </div>
657
+
658
+ <!-- Model Size -->
659
+ <div>
660
+ <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Model Size</p>
661
+ <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
662
+ <div class="flex justify-between items-center mb-3">
663
+ <span class="text-xs font-bold text-slate-400">Parameters</span>
664
+ <span id="sizeValue" class="text-xs font-mono text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-slate-700 px-2 py-0.5 rounded"></span>
665
+ </div>
666
+ <div class="slider-container">
667
+ <div class="slider-track"></div>
668
+ <div class="slider-range" id="sliderRange"></div>
669
+ <input type="range" id="minSizeSlider" class="dual-slider">
670
+ <input type="range" id="maxSizeSlider" class="dual-slider">
671
+ </div>
672
+ <div class="flex justify-between text-xs text-slate-400 dark:text-slate-500 mt-3">
673
+ <span id="minSizeLabel"></span>
674
+ <span id="maxSizeLabel"></span>
675
+ </div>
676
+ </div>
677
  </div>
678
+
679
+ <!-- Organization -->
680
+ <div>
681
+ <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Organization</p>
682
+ <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
683
+ <div class="flex flex-wrap gap-1.5" id="orgFilterContainer"></div>
684
+ </div>
685
  </div>
686
+
687
  </div>
688
 
689
+ <!-- RIGHT COL: Benchmark Filters + License -->
690
+ <div class="space-y-4">
691
 
692
+ <!-- Benchmark Filters -->
 
 
693
  <div>
694
+ <div class="flex items-center gap-1.5 mb-2">
695
+ <p class="text-xs font-semibold text-slate-500 dark:text-slate-400">Benchmark Filters</p>
696
+ <div class="relative tooltip-trigger group cursor-help">
697
+ <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
698
+ <div class="tooltip-content invisible opacity-0 absolute right-full top-1/2 -translate-y-1/2 mr-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-auto">
699
+ <div class="absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-slate-200 dark:border-l-slate-600"></div>
700
+ Head to <button onclick="window.scrollAndOpenTableOps(event)" class="font-bold text-indigo-600 dark:text-indigo-400 hover:underline cursor-pointer">Table Options</button> to switch between Global and Filtered Average, or change the Ranking Mode.
701
+ </div>
702
+ </div>
703
+ </div>
704
+ <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50 space-y-4">
705
+ <div>
706
+ <h4 class="text-xs font-bold text-slate-400 mb-2">Task Type</h4>
707
+ <div id="taskTypeFilterBtns" class="flex flex-wrap gap-1.5"></div>
708
+ </div>
709
+ <div>
710
+ <h4 class="text-xs font-bold text-slate-400 mb-2">Domain</h4>
711
+ <div id="domainFilterBtns" class="flex flex-wrap gap-1.5"></div>
712
+ </div>
713
+ </div>
714
  </div>
715
+
716
+ <!-- License -->
717
  <div>
718
+ <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">License</p>
719
+ <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
720
+ <div class="flex flex-wrap gap-1.5" id="licenseFilterContainer"></div>
721
+ </div>
 
722
  </div>
723
+
724
  </div>
725
+
726
  </div>
 
 
 
 
 
 
727
 
728
+ </div>
729
+
730
  <!-- Table Controls -->
731
  <div class="w-full sm:w-[95%] mx-auto flex justify-end mb-2 relative gap-2">
732
  <!-- Table Options Button -->
 
736
  </button>
737
  <!-- Table Options Menu -->
738
  <div id="tableOpsMenu"
739
+ class="hidden absolute top-10 right-40 z-50 w-80 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 overflow-visible">
740
+
741
  <!-- Header with Reset -->
742
  <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
743
  <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Table Options</span>
 
745
  class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
746
  data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
747
  </div>
748
+
749
  <!-- Group 1: View Options -->
750
+ <div class="mb-4 p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
751
+
 
752
  <!-- Section 1: Ranking Mode -->
753
  <div class="mb-4">
754
  <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
755
  Ranking Mode
756
  <div class="relative tooltip-trigger group cursor-help">
757
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
758
+ <div class="tooltip-content invisible opacity-0 absolute right-full top-1/2 -translate-y-1/2 mr-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">
759
+ <div class="absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-slate-200 dark:border-l-slate-600"></div>
760
  <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>
761
  <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>
762
  </div>
 
769
  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>
770
  </div>
771
  </div>
772
+
773
  <!-- Section 2: Avg Score Calc -->
774
  <div>
775
  <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
776
  Average Score Calculation
777
  <div class="relative tooltip-trigger group cursor-help">
778
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
779
+ <div class="tooltip-content invisible opacity-0 absolute right-full top-1/2 -translate-y-1/2 mr-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">
780
+ <div class="absolute left-full top-1/2 -translate-y-1/2 border-4 border-transparent border-l-slate-200 dark:border-l-slate-600"></div>
781
  <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>
782
  <p><span class="font-bold text-slate-600 dark:text-slate-300">Filtered Average:</span> recalculates using only the currently visible evaluation columns.</p>
783
  </div>
 
791
  </div>
792
  </div>
793
  </div>
794
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
795
  </div>
796
+
797
  <!-- Col Visibility -->
798
  <button onclick="window.toggleColMenu(event)" id="colMenuTrigger"
799
  class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 transition-colors select-none">
 
808
  data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
809
  </div>
810
  <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Benchmarks</p>
811
+ <div class="mb-4 p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
812
  <div id="colListScores" class="flex flex-wrap gap-2"></div>
813
  </div>
814
  <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Model Details</p>
815
+ <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
816
  <div id="colListDetails" class="flex flex-wrap gap-2"></div>
817
  </div>
818
  </div>
819
  </div>
820
+
821
  <div id="table-outer" class="w-full sm:w-[99%] mx-auto mb-20">
822
  <div id="table-wrapper" class="bg-white dark:bg-slate-800 shadow-sm transition-colors"></div>
823
  </div>
824
+
825
  <div id="scoreClickToast"
826
  class="hidden fixed bottom-5 right-5 z-[120] max-w-sm px-4 py-3 rounded-xl shadow-xl border border-indigo-200 dark:border-indigo-900/60 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-200 text-xs sm:text-sm">
827
  <div class="flex items-center gap-3">
 
839
  </div>
840
  </div>
841
  </div>
842
+
843
  <div id="modelModal" class="hidden fixed inset-0 z-[100]" aria-labelledby="modal-title" role="dialog"
844
  aria-modal="true">
845
  <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity modal-backdrop"
846
  onclick="window.closeModelDetails()"></div>
847
+
848
  <div
849
  class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-[95%] md:w-[60%] max-h-[90vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 modal-content">
850
+
851
  <div
852
  class="sticky top-0 z-10 flex items-start justify-between px-6 py-5 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-100 dark:border-slate-800">
853
  <div>
 
860
  <i data-lucide="x" class="w-6 h-6"></i>
861
  </button>
862
  </div>
863
+
864
  <div class="p-6 space-y-8">
865
  <!-- 4 Blocks: Rank, Avg, Size, Hub -->
866
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
 
897
  <span id="modalLikes" class="text-2xl font-bold text-pink-700 dark:text-pink-300">--</span>
898
  </div>
899
  </div>
900
+
901
  <!-- Metadata Line -->
902
  <div
903
  class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-slate-500 dark:text-slate-400 border-y border-slate-100 dark:border-slate-800 py-4">
904
  <span class="flex items-center gap-1" title="License"><i data-lucide="scale"
905
  class="w-3.5 h-3.5"></i> <span id="modalLicense">--</span></span>
906
  <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
907
+
908
+
909
  <!-- <span class="flex items-center gap-1" title="Revision"><i data-lucide="git-commit"
910
  class="w-3.5 h-3.5"></i> <span id="modalRevision" class="font-mono">--</span></span> -->
911
  </div>
912
+
913
  <!-- Links -->
914
  <div class="flex flex-col sm:flex-row gap-3 justify-center">
915
  <a id="modalLinkHF" href="#" target="_blank"
 
922
  <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Evaluation Details
923
  </a>
924
  </div>
925
+
926
  <!-- Chart Area -->
927
  <div>
928
  <h4 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-wider">Evaluation Results</h4>
 
931
  </div>
932
  </div>
933
  </div>
934
+
935
  <!-- Footer -->
936
  <div
937
  class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
 
940
  </div>
941
  </div>
942
  </div>
943
+
944
  <div id="benchmarkModal" class="hidden fixed inset-0 z-[110]" aria-labelledby="benchmark-modal-title" role="dialog"
945
  aria-modal="true">
946
  <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity modal-backdrop"
947
  onclick="window.closeBenchmarkDetails()"></div>
948
+
949
  <div id="benchmarkModalPanel"
950
  class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[111] w-[95%] md:w-[75%] max-h-[90vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 modal-content">
951
  <div
 
960
  <i data-lucide="x" class="w-6 h-6"></i>
961
  </button>
962
  </div>
963
+
964
  <div class="p-6 space-y-6">
965
  <div id="benchmarkSummary" class="grid grid-cols-1 md:grid-cols-3 gap-3"></div>
966
  <div class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
 
983
  </div>
984
  </div>
985
  </div>
986
+
987
  <div
988
  class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
989
  <button onclick="window.closeBenchmarkDetails()"
 
991
  </div>
992
  </div>
993
  </div>
994
+
995
  <script>
996
  (function () {
997
  const $ = s => document.querySelector(s);
 
1060
  </div>
1061
  `;
1062
  };
1063
+
1064
  let lbData = [], grid, maxMeta = 100, minMeta = 0, tableColumns = [];
1065
  let currentSort = { colId: null, dir: 'none' };
1066
  const SCORE_HINT_KEY = "score_click_hint_seen_v1";
1067
+
1068
  // New State
1069
  let tableOptions = {
1070
  rankMode: 'static', // 'static' | 'dynamic'
 
1072
  taskTypes: [], // [] = All; otherwise selected subset
1073
  domains: [], // [] = All; otherwise selected subset
1074
  };
1075
+
1076
  const ALL_TASK_TYPES = ['Code', 'MCQ', 'QA'];
1077
  const ALL_DOMAINS = ['Cultural', 'STEM', 'Legal', 'Medical', 'Safety', 'Coding', 'Poetry'];
1078
+
1079
  window.initLeaderboard = function (data) {
1080
  lbData = data;
1081
+
1082
  const parsedSizes = lbData.map(r => toNumber(r["Model Size"]));
1083
  const sizes = parsedSizes.filter(v => v !== null);
1084
  const hasUnknownSize = parsedSizes.some(v => v === null);
1085
  minMeta = sizes.length ? Math.floor(Math.min(...sizes)) : 0;
1086
  maxMeta = sizes.length ? Math.floor(Math.max(...sizes)) : 100;
1087
  if (hasUnknownSize) minMeta = Math.min(0, minMeta);
1088
+
1089
  if (!lbData.length) {
1090
  $('#table-wrapper').innerHTML = "<div class='p-8 text-center text-slate-500'>No data loaded.</div>";
1091
  return;
1092
  }
1093
+
1094
  setupFilters();
1095
  prepareColumns(lbData);
1096
  renderTable(lbData);
 
1098
  setupFilterPills();
1099
  buildColMenuDOM();
1100
  setupScoreClickHintToast();
1101
+
1102
  $('#searchInput').addEventListener('keyup', applyFilters);
1103
+
1104
  // Close menus on outside click
1105
  // Use composedPath() so clicks on dynamically re-rendered children
1106
  // (e.g. filter pills rebuilt via innerHTML) still count as "inside".
 
1115
  toggleTableOps();
1116
  }
1117
  });
1118
+
1119
  if (!window.__stickyModelResizeBound) {
1120
  window.addEventListener('resize', () => scheduleStickyApply());
1121
  window.__stickyModelResizeBound = true;
1122
  }
1123
+
1124
  if (window.lucide) lucide.createIcons();
1125
  };
1126
+
1127
  function setupScoreClickHintToast() {
1128
  const toast = $('#scoreClickToast');
1129
  const tableWrapper = $('#table-wrapper');
1130
  if (!toast || !tableWrapper) return;
1131
+
1132
  let seen = false;
1133
  try {
1134
  seen = window.localStorage?.getItem(SCORE_HINT_KEY) === "1";
1135
  } catch { }
1136
  if (seen) return;
1137
+
1138
  const showToast = () => {
1139
  toast.classList.remove('hidden');
1140
  setTimeout(() => toast.classList.add('hidden'), 6500);
 
1142
  window.localStorage?.setItem(SCORE_HINT_KEY, "1");
1143
  } catch { }
1144
  };
1145
+
1146
  const observer = new IntersectionObserver((entries, obs) => {
1147
  if (entries.some(e => e.isIntersecting)) {
1148
  showToast();
1149
  obs.disconnect();
1150
  }
1151
  }, { threshold: 0.2 });
1152
+
1153
  observer.observe(tableWrapper);
1154
  }
1155
+
1156
  // --- MENU LOGIC ---
1157
  window.toggleColMenu = toggleColMenu;
1158
  window.toggleTableOps = toggleTableOps;
1159
  window.setRankMode = setRankMode;
1160
  window.setAvgMode = setAvgMode;
1161
+
1162
  function toggleColMenu(e) {
1163
  e?.stopPropagation();
1164
  $('#colMenu').classList.toggle('hidden');
 
1166
  $('#colMenuIcon').setAttribute('data-lucide', $('#colMenu').classList.contains('hidden') ? 'book-open' : 'x');
1167
  if (window.lucide) lucide.createIcons();
1168
  }
1169
+
1170
  function toggleTableOps(e) {
1171
  e?.stopPropagation();
1172
  $('#tableOpsMenu').classList.toggle('hidden');
 
1174
  if (window.lucide) lucide.createIcons();
1175
  }
1176
 
1177
+ window.scrollAndOpenTableOps = function(e) {
1178
+ e?.stopPropagation();
1179
+ const trigger = $('#tableOpsTrigger');
1180
+ if (!trigger) return;
1181
+ // If already visible in viewport, just open
1182
+ const rect = trigger.getBoundingClientRect();
1183
+ const inView = rect.top >= 0 && rect.bottom <= window.innerHeight;
1184
+ if (inView) {
1185
+ toggleTableOps(e);
1186
+ } else {
1187
+ // Scroll smoothly, then open after scroll settles
1188
+ trigger.scrollIntoView({ behavior: 'smooth', block: 'center' });
1189
+ setTimeout(() => toggleTableOps(e), 400);
1190
+ }
1191
+ };
1192
+
1193
  window.resetTableOps = function () {
1194
  tableOptions.rankMode = 'static';
1195
  tableOptions.avgMode = 'all';
 
1204
  prepareColumns(lbData);
1205
  applyFilters();
1206
  };
1207
+
1208
  function updateOptionUI() {
1209
  const activeClass = "bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300";
1210
  const inactiveClass = "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";
1211
+
1212
  const setBtn = (id, isActive) => {
1213
  const btn = $(id);
1214
  if (btn) btn.className = `px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none ${isActive ? activeClass : inactiveClass}`;
1215
  }
1216
+
1217
  setBtn('#rankBtnStatic', tableOptions.rankMode === 'static');
1218
  setBtn('#rankBtnDynamic', tableOptions.rankMode === 'dynamic');
1219
  setBtn('#avgBtnAll', tableOptions.avgMode === 'all');
1220
  setBtn('#avgBtnVisible', tableOptions.avgMode === 'visible');
1221
+
1222
  setupFilterPills();
1223
  }
1224
+
1225
  function setupFilterPills() {
1226
  const pill = (active) =>
1227
  `px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none ` +
1228
  (active
1229
  ? 'bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300'
1230
  : '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');
1231
+
1232
  const renderPills = (containerId, items, activeList, toggleFn) => {
1233
  const container = $(`#${containerId}`);
1234
  if (!container) return;
 
1239
  `<button onclick="window.${toggleFn}('${item}')" class="${pill(activeList.includes(item))}">${item}</button>`)
1240
  ].join('');
1241
  };
1242
+
1243
  renderPills('taskTypeFilterBtns', ALL_TASK_TYPES, tableOptions.taskTypes, 'toggleTaskType');
1244
  renderPills('domainFilterBtns', ALL_DOMAINS, tableOptions.domains, 'toggleDomain');
1245
  }
1246
+
1247
  function applyColumnFilters() {
1248
  const meta = window.BENCHMARK_METADATA || {};
1249
  const activeTasks = tableOptions.taskTypes;
1250
  const activeDomains = tableOptions.domains;
1251
+
1252
  tableColumns.forEach(col => {
1253
  if (!EVAL_COLUMNS.includes(col.id)) return;
1254
  const m = meta[col.id];
1255
  if (!m) return;
1256
+
1257
  // mixed (MedArabiQ): visible if MCQ or QA is among selected types
1258
  const taskMatch = activeTasks.length === 0 ||
1259
  (m.task_type === 'mixed'
1260
  ? activeTasks.some(t => t === 'MCQ' || t === 'QA')
1261
  : activeTasks.includes(m.task_type));
1262
+
1263
  const domainMatch = activeDomains.length === 0 ||
1264
  activeDomains.includes(m.domain);
1265
+
1266
  col.hidden = !(taskMatch && domainMatch);
1267
  });
1268
  }
1269
+
1270
  window.toggleTaskType = function (type) {
1271
  if (type === 'all') {
1272
  tableOptions.taskTypes = [];
 
1286
  prepareColumns(lbData);
1287
  applyFilters();
1288
  };
1289
+
1290
  window.toggleDomain = function (domain) {
1291
  if (domain === 'all') {
1292
  tableOptions.domains = [];
 
1306
  prepareColumns(lbData);
1307
  applyFilters();
1308
  };
1309
+
1310
  function setRankMode(mode) {
1311
  tableOptions.rankMode = mode;
1312
  updateOptionUI();
1313
  applyFilters();
1314
  }
1315
+
1316
  function setAvgMode(mode) {
1317
  tableOptions.avgMode = mode;
1318
  updateOptionUI();
1319
  applyFilters();
1320
  }
1321
+
1322
  window.toggleExpandText = function (idBase, btn) {
1323
  const shortEl = document.getElementById(`${idBase}-short`);
1324
  const fullEl = document.getElementById(`${idBase}-full`);
 
1328
  fullEl.classList.toggle('hidden', !expanding);
1329
  btn.innerText = expanding ? 'Collapse' : 'Expand';
1330
  };
1331
+
1332
  // --- BENCHMARK DETAILS MODAL ---
1333
  const benchmarkDetailsState = {
1334
  modelName: "",
 
1343
  requestId: 0,
1344
  };
1345
  let benchmarkModalScrollBound = false;
1346
+
1347
  const renderBenchmarkHeader = (showSubtaskColumn) => {
1348
  $('#benchmarkHeader').innerHTML = showSubtaskColumn
1349
  ? `<div class="col-span-2">Subtask</div>
 
1354
  <div class="col-span-2">Gold</div>
1355
  <div class="col-span-2">Predicted</div>`;
1356
  };
1357
+
1358
  const renderBenchmarkRows = (rows, startIdx, showSubtaskColumn, benchmark) => {
1359
  const isCodeEvalBenchmark = benchmark === "HumanEval+" || benchmark === "MBPP+";
1360
  return rows.map((r, idx) => {
 
1385
  r.question_id ? `id: ${escapeHtml(r.question_id)}` : null,
1386
  r.metric !== null && r.metric !== undefined ? `score: ${escapeHtml(r.metric)}` : null,
1387
  ].filter(Boolean).join(" | ");
1388
+
1389
  return `
1390
  <div class="grid grid-cols-12 gap-3 px-4 py-3 text-xs">
1391
  ${subtaskCell}
 
1404
  `;
1405
  }).join("");
1406
  };
1407
+
1408
  const updateBenchmarkRowsFooter = () => {
1409
  const footer = $('#benchmarkRowsFooter');
1410
  const status = $('#benchmarkRowsStatus');
1411
  const btn = $('#benchmarkShowMoreBtn');
1412
  if (!footer || !status || !btn) return;
1413
+
1414
  const loaded = benchmarkDetailsState.loadedRows;
1415
  const total = benchmarkDetailsState.totalRows;
1416
  const hasRows = total > 0 || loaded > 0;
 
1418
  status.innerText = benchmarkDetailsState.loading
1419
  ? `Loading... (${loaded}${total ? `/${total}` : ""})`
1420
  : `Showing ${loaded}${total ? ` of ${total}` : ""} samples`;
1421
+
1422
  btn.classList.toggle('hidden', !benchmarkDetailsState.hasMore);
1423
  btn.disabled = benchmarkDetailsState.loading;
1424
  btn.innerText = benchmarkDetailsState.loading ? "Loading..." : "Show More";
1425
  };
1426
+
1427
  const bindBenchmarkModalScroll = () => {
1428
  if (benchmarkModalScrollBound) return;
1429
  const panel = $('#benchmarkModalPanel');
 
1436
  });
1437
  benchmarkModalScrollBound = true;
1438
  };
1439
+
1440
  const fetchBenchmarkDetailsPage = async ({ reset = false } = {}) => {
1441
  if (benchmarkDetailsState.loading) return;
1442
  if (!reset && !benchmarkDetailsState.hasMore) return;
1443
  benchmarkDetailsState.loading = true;
1444
  updateBenchmarkRowsFooter();
1445
+
1446
  const requestId = benchmarkDetailsState.requestId;
1447
  const formData = new FormData();
1448
  formData.append("model_name", benchmarkDetailsState.modelName);
1449
  formData.append("benchmark", benchmarkDetailsState.benchmark);
1450
  formData.append("cursor", String(reset ? 0 : benchmarkDetailsState.cursor || 0));
1451
+
1452
  try {
1453
  const res = await fetch("/api/benchmark-details", { method: "POST", body: formData });
1454
  const payload = await res.json();
1455
  if (!res.ok) throw new Error(payload.error || "Failed to load details");
1456
  if (requestId !== benchmarkDetailsState.requestId) return;
1457
+
1458
  let subtasks = payload.subtasks || [];
1459
  let rows = payload.rows || [];
1460
+
1461
  // Filter MedArabiQ subtasks/rows when MCQ-only or QA-only filter is active
1462
  if (benchmarkDetailsState.benchmark === 'MedArabiQ') {
1463
  const _at = tableOptions.taskTypes;
 
1471
  rows = rows.filter(r => !String(r.subtask || '').toLowerCase().includes('mcq'));
1472
  }
1473
  }
1474
+
1475
  if (reset) {
1476
  const benchmarkNorm = String(benchmarkDetailsState.benchmark || "").trim().toLowerCase();
1477
  const hasDistinctSubtask = subtasks.some(s => {
 
1496
  : "";
1497
  $('#benchmarkRows').innerHTML = "";
1498
  }
1499
+
1500
  if (!subtasks.length && !rows.length && benchmarkDetailsState.totalRows === 0) {
1501
  $('#benchmarkSummary').innerHTML = `<div class="col-span-full p-4 rounded-lg bg-slate-50 dark:bg-slate-800 text-sm text-slate-500 dark:text-slate-400">No details found for this benchmark/model.</div>`;
1502
  $('#benchmarkRows').innerHTML = "";
 
1505
  benchmarkDetailsState.cursor = 0;
1506
  return;
1507
  }
1508
+
1509
  const chunkHtml = renderBenchmarkRows(
1510
  rows,
1511
  benchmarkDetailsState.loadedRows,
 
1515
  if (chunkHtml) {
1516
  $('#benchmarkRows').insertAdjacentHTML('beforeend', chunkHtml);
1517
  }
1518
+
1519
  benchmarkDetailsState.loadedRows += rows.length;
1520
  benchmarkDetailsState.totalRows = Number(payload.total_rows || benchmarkDetailsState.totalRows || benchmarkDetailsState.loadedRows);
1521
  benchmarkDetailsState.hasMore = Boolean(payload.has_more);
 
1536
  }
1537
  }
1538
  };
1539
+
1540
  window.openBenchmarkDetails = async function (modelName, benchmark) {
1541
  benchmarkDetailsState.requestId += 1;
1542
  benchmarkDetailsState.modelName = modelName;
 
1547
  benchmarkDetailsState.loadedRows = 0;
1548
  benchmarkDetailsState.totalRows = 0;
1549
  benchmarkDetailsState.loading = false;
1550
+
1551
  $('#benchmarkModalTitle').innerText = `${benchmark} Details — ${modelName}`;
1552
  $('#benchmarkSummary').innerHTML = "";
1553
  $('#benchmarkRows').innerHTML = `<div class="p-6 text-sm text-slate-500 dark:text-slate-400">Loading details...</div>`;
1554
  renderBenchmarkHeader(true);
1555
+
1556
  $('#benchmarkModal').classList.remove('hidden');
1557
  document.body.style.overflow = 'hidden';
1558
  const panel = $('#benchmarkModalPanel');
 
1560
  bindBenchmarkModalScroll();
1561
  updateBenchmarkRowsFooter();
1562
  if (window.lucide) lucide.createIcons();
1563
+
1564
  await fetchBenchmarkDetailsPage({ reset: true });
1565
  };
1566
+
1567
  window.loadMoreBenchmarkDetails = async function () {
1568
  await fetchBenchmarkDetailsPage({ reset: false });
1569
  };
1570
+
1571
  window.closeBenchmarkDetails = function () {
1572
  benchmarkDetailsState.requestId += 1;
1573
  benchmarkDetailsState.loading = false;
 
1575
  $('#benchmarkModal').classList.add('hidden');
1576
  document.body.style.overflow = '';
1577
  };
1578
+
1579
  // --- MODAL LOGIC ---
1580
  window.openModelDetails = function (modelName) {
1581
  try {
1582
  const model = lbData.find(r => String(r["Model Name"] || "") === String(modelName || ""));
1583
  if (!model) return;
1584
+
1585
  const fullPath = model["Model Name"];
1586
  const splitIndex = fullPath.indexOf('/');
1587
  const hasOrg = splitIndex !== -1;
1588
  const displayModel = hasOrg ? fullPath.substring(splitIndex + 1) : fullPath;
1589
  const displayOrg = hasOrg ? fullPath.substring(0, splitIndex) : null;
1590
+
1591
  const modalTitleEl = $('#modalTitle');
1592
  if (modalTitleEl) modalTitleEl.innerHTML = `
1593
  <div class="flex flex-col">
 
1599
  </div>` : ''}
1600
  </div>
1601
  `;
1602
+
1603
  // Reset values
1604
  const revision = asUnknown(model["Revision"]);
1605
  const revisionForApi = revision === "Unknown" ? "main" : revision;
 
1618
  if (modalLicenseEl) modalLicenseEl.innerText = asUnknown(model["License"]);
1619
  const modalRevisionEl = $('#modalRevision');
1620
  if (modalRevisionEl) modalRevisionEl.innerText = revision;
1621
+
1622
  // --- 1. MODIFIED: Added Download Span to Metadata Line ---
1623
  // I added the separator dot and the Downloads span at the end of this block
1624
  const metadataHtml = `
1625
  <span class="flex items-center gap-1" title="License"><i data-lucide="scale" class="w-3.5 h-3.5"></i> <span id="modalLicense">${asUnknown(model["License"])}</span></span>
1626
  <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
1627
+
1628
+
1629
  <span class="flex items-center gap-1" title="Revision"><i data-lucide="git-commit" class="w-3.5 h-3.5"></i> <span id="modalRevision" class="font-mono">${revision}</span></span>
1630
  <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
1631
+
1632
  <span class="flex items-center gap-1" title="Downloads (last 30 days)">
1633
  <i data-lucide="download" class="w-3.5 h-3.5"></i>
1634
  <span id="modalDownloads">Unknown</span>
1635
  </span>
1636
  `;
1637
+
1638
  const metaContainer = document.querySelector('#modelModal .border-y');
1639
  if (metaContainer) metaContainer.innerHTML = metadataHtml;
1640
+
1641
  // --- Fetch Logic to include Downloads ---
1642
  const formData = new FormData();
1643
  formData.append('model_name', model["Model Name"]);
1644
  formData.append('revision', revisionForApi);
1645
+
1646
  fetch('/api/model-likes', {
1647
  method: 'POST',
1648
  body: formData
 
1666
  const likesEl = $('#modalLikes');
1667
  if (likesEl) likesEl.innerText = prettyIntOrUnknown(fallbackLikes);
1668
  });
1669
+
1670
  const modelPath = encodeURIComponent(String(model["Model Name"] || "")).replace(/%2F/g, '/');
1671
  const hfLink = $('#modalLinkHF');
1672
  if (hfLink) hfLink.href = `https://huggingface.co/${modelPath}`;
1673
+
1674
  const detailsLink = $('#modalLinkDetails');
1675
  if (detailsLink) detailsLink.href = `https://huggingface.co/datasets/qimma/leaderboard-details/tree/main/${modelPath}`;
1676
+
1677
  const chartContainer = $('#modalChart');
1678
  if (chartContainer) chartContainer.innerHTML = "";
1679
+
1680
  EVAL_COLUMNS.forEach(col => {
1681
  const score = parseFloat(model[col]) || 0;
1682
  const hue = (Math.max(0, Math.min(100, score)) / 100) * 120;
1683
+
1684
  const barHtml = `
1685
  <div class="flex items-center gap-3 group">
1686
  <div class="w-32 text-sm font-medium text-slate-600 dark:text-slate-400 truncate text-right shrink-0" title="${col}">${col}</div>
 
1691
  </div>
1692
  `;
1693
  if (chartContainer) chartContainer.insertAdjacentHTML('beforeend', barHtml);
1694
+
1695
  setTimeout(() => {
1696
  const bar = document.getElementById(`bar-${col.replace(/\s+/g, '')}`);
1697
  if (bar) bar.style.width = `${score}%`;
1698
  }, 100);
1699
  });
1700
+
1701
  const modelModalEl = $('#modelModal');
1702
  if (modelModalEl) modelModalEl.classList.remove('hidden');
1703
  document.body.style.overflow = 'hidden';
 
1711
  if (modelModalEl) modelModalEl.classList.add('hidden');
1712
  document.body.style.overflow = '';
1713
  };
1714
+
1715
  // --- TABLE LOGIC ---
1716
  window.toggleSort = function (colId) {
1717
  currentSort = (currentSort.colId !== colId) ? { colId, dir: 'asc' } : { colId: (currentSort.dir === 'asc' ? colId : null), dir: (currentSort.dir === 'asc' ? 'desc' : 'none') };
 
1725
  applyGradient(max > 0 ? wrapper.scrollTop / max : 0);
1726
  }, 50);
1727
  };
1728
+
1729
  window.toggleFilterPanel = function () {
1730
  $('#filterPanel').classList.toggle('hidden');
1731
  const btn = $('#filterBtn');
1732
+ btn.classList.toggle('opacity-80');
1733
  };
1734
+
1735
  window.resetFilters = function () {
1736
+ // Search bar
1737
  $('#searchInput').value = "";
1738
+
1739
+ // Size slider
1740
  $('#minSizeSlider').value = minMeta;
1741
  $('#maxSizeSlider').value = maxMeta;
1742
+
1743
+ // Toggle button filters (Type, License, Org)
1744
+ window._activeTypes = [];
1745
+ window._activeLicenses = [];
1746
+ window._activeOrgs = [];
1747
+ if (typeof window._renderToggle === 'function') {
1748
+ window._renderToggle('#typeFilterContainer', window._typeVals, [], 'toggleTypeFilter');
1749
+ window._renderToggle('#licenseFilterContainer', window._licVals, [], 'toggleLicenseFilter');
1750
+ window._renderToggle('#orgFilterContainer', window._orgVals, [], 'toggleOrgFilter');
1751
+ }
1752
+
1753
+ // Benchmark filters (Task Type + Domain) — live in tableOptions
1754
+ tableOptions.taskTypes = [];
1755
+ tableOptions.domains = [];
1756
+ // Restore any benchmark columns hidden by task/domain filters
1757
+ tableColumns.forEach(col => {
1758
+ if (EVAL_COLUMNS.includes(col.id)) col.hidden = false;
1759
+ });
1760
+ // Re-render Task Type + Domain pills back to All
1761
+ setupFilterPills();
1762
+ // Sync Table Options button states (avg mode, rank mode)
1763
+ tableOptions.avgMode = 'all';
1764
+ tableOptions.rankMode = 'static';
1765
+ updateOptionUI();
1766
+
1767
  $('#minSizeSlider').dispatchEvent(new Event('input'));
1768
  applyFilters();
1769
  };
1770
+
1771
  window.resetColumns = function () {
1772
  tableColumns.forEach(c => c.hidden = !(["Average", "Rank", "Model Name"].includes(c.id) || EVAL_COLUMNS.includes(c.id)));
1773
  applyFilters();
1774
  buildColMenuDOM();
1775
  };
1776
+
1777
  window.applyFilters = applyFilters;
1778
+
1779
  function applyStickyModelNameColumn() {
1780
  const wrapper = $('#table-wrapper');
1781
  if (!wrapper) return false;
1782
  const table = wrapper.querySelector('table.gridjs-table');
1783
  if (!table) return false;
1784
+
1785
  const headers = [...table.querySelectorAll('thead th')];
1786
  if (!headers.length) return false;
1787
  const visibleCols = tableColumns.filter(c => !c.hidden).map(c => c.id);
1788
  const rankIdx = visibleCols.indexOf("Rank");
1789
  const modelIdx = visibleCols.indexOf("Model Name");
1790
+
1791
  headers.forEach(th => th.classList.remove('sticky-rank-col', 'sticky-model-col', 'avg-col-header'));
1792
  table.querySelectorAll('tbody tr').forEach(tr => {
1793
  [...tr.children].forEach(td => td.classList.remove('sticky-rank-col', 'sticky-model-col', 'avg-col-header'));
1794
  });
1795
+
1796
  if (rankIdx >= 0 && headers[rankIdx]) {
1797
  headers[rankIdx].classList.add('sticky-rank-col');
1798
  table.querySelectorAll('tbody tr').forEach(tr => {
1799
  if (tr.children[rankIdx]) tr.children[rankIdx].classList.add('sticky-rank-col');
1800
  });
1801
  }
1802
+
1803
  const rankWidth = (rankIdx >= 0 && headers[rankIdx]) ? headers[rankIdx].getBoundingClientRect().width : 0;
1804
  wrapper.style.setProperty('--sticky-model-left', `${Math.max(0, Math.round(rankWidth))}px`);
1805
+
1806
  if (modelIdx >= 0 && headers[modelIdx]) {
1807
  headers[modelIdx].classList.add('sticky-model-col');
1808
  table.querySelectorAll('tbody tr').forEach(tr => {
1809
  if (tr.children[modelIdx]) tr.children[modelIdx].classList.add('sticky-model-col');
1810
  });
1811
  }
1812
+
1813
  const modelWidth = (modelIdx >= 0 && headers[modelIdx]) ? headers[modelIdx].getBoundingClientRect().width : 0;
1814
  const avgLeft = Math.max(0, Math.round(rankWidth + modelWidth));
1815
  wrapper.style.setProperty('--sticky-avg-left', `${avgLeft}px`);
1816
+
1817
  const avgIdx = visibleCols.findIndex(k => k.includes("Average"));
1818
  if (avgIdx >= 0 && headers[avgIdx]) {
1819
  headers[avgIdx].classList.add('avg-col-header');
 
1821
  if (tr.children[avgIdx]) tr.children[avgIdx].classList.add('avg-col-header');
1822
  });
1823
  }
1824
+
1825
  return true;
1826
  }
1827
+
1828
  function updateAvgColHighlight() {
1829
  const wrapper = $('#table-wrapper');
1830
  const outer = $('#table-outer');
1831
  if (!wrapper || !outer) return;
1832
+
1833
  // Hide only when user has explicitly hidden the Average column.
1834
  const avgColHidden = tableColumns.some(c => c.id && c.id.includes('Average') && c.hidden);
1835
  const existing = $('#avg-col-highlight');
 
1837
  if (existing) existing.style.display = 'none';
1838
  return;
1839
  }
1840
+
1841
  // If DOM not ready yet (avg-col-header not applied), skip silently —
1842
  // the 100ms/400ms retries in scheduleStickyApply will catch it.
1843
  const th = wrapper.querySelector('th.avg-col-header');
1844
  if (!th) return;
1845
+
1846
  let highlight = existing;
1847
  if (!highlight) {
1848
  highlight = document.createElement('div');
 
1850
  outer.appendChild(highlight);
1851
  }
1852
  highlight.style.display = '';
1853
+
1854
  const outerRect = outer.getBoundingClientRect();
1855
  const thRect = th.getBoundingClientRect();
1856
+
1857
  highlight.style.left = `${thRect.left - outerRect.left}px`;
1858
  highlight.style.width = `${thRect.width}px`;
1859
  highlight.style.height = `${outer.offsetHeight}px`;
1860
  }
1861
+
1862
  function applyGradient(ratio) {
1863
  const outer = $('#table-outer');
1864
  if (!outer) return;
1865
  outer.style.setProperty('--gradient-scroll', ratio.toFixed(3));
1866
  outer.dataset.sortDir = currentSort ? currentSort.dir : 'none';
1867
  }
1868
+
1869
  function initGradientScroll() {
1870
  const wrapper = $('#table-wrapper');
1871
  if (!wrapper) return;
 
1878
  updateAvgColHighlight();
1879
  }, { passive: true });
1880
  }
1881
+
1882
  function scheduleStickyApply(retries = 8) {
1883
  const applyAll = () => { applyStickyModelNameColumn(); updateAvgColHighlight(); };
1884
  let attempts = 0;
 
1897
  };
1898
  run();
1899
  }
1900
+
1901
  function applyFilters() {
1902
  if (!lbData.length) return;
1903
  const sVal = $('#searchInput').value.toLowerCase();
1904
  const minSz = parseInt($('#minSizeSlider').value);
1905
  const maxSz = (parseInt($('#maxSizeSlider').value) === maxMeta) ? 99999 : parseInt($('#maxSizeSlider').value);
1906
+
1907
+ const types = window._activeTypes || [];
1908
+ const lics = window._activeLicenses || [];
1909
+ const orgs = window._activeOrgs || [];
1910
+
1911
  // 1. Filter Data
1912
  let filtered = lbData.filter(r =>
1913
  (r["Model Name"] || "").toLowerCase().includes(sVal) &&
 
1916
  const sizeValue = s === null ? 0 : s;
1917
  return sizeValue >= minSz && sizeValue <= maxSz;
1918
  })() &&
1919
+
1920
  (!types.length || types.includes(r["Full Type"])) &&
1921
+ (!lics.length || lics.includes(r["License"])) &&
1922
+ (!orgs.length || orgs.some(org => String(r["Model Name"] || '').startsWith(org + '/')))
1923
  ).map(row => ({ ...row }));
1924
+
1925
  // 2 & 3. When "Filtered Average" is active: swap MedArabiQ to the
1926
  // relevant subset score, then recalculate average over visible cols.
1927
  if (tableOptions.avgMode === 'visible') {
 
1942
  : 0;
1943
  });
1944
  }
1945
+
1946
  // 3. Sort Data
1947
  if (currentSort.colId && currentSort.dir !== 'none') {
1948
  filtered.sort((a, b) => {
 
1955
  return String(vA ?? "").localeCompare(String(vB ?? "")) * (currentSort.dir === 'asc' ? 1 : -1);
1956
  });
1957
  }
1958
+
1959
  // 4. Handle Ranking Mode
1960
  if (tableOptions.rankMode === 'dynamic') {
1961
  // Rank is always quality-based (rank 1 = best Average),
 
1964
  const rankMap = new Map(byQuality.map((row, i) => [row, i + 1]));
1965
  filtered.forEach(row => { row['Rank'] = rankMap.get(row) ?? filtered.length; });
1966
  }
1967
+
1968
  // 5. Update Grid
1969
  grid.updateConfig({ data: filtered, columns: tableColumns }).forceRender();
1970
  scheduleStickyApply();
 
 
1971
 
1972
+ }
1973
+
1974
  function renderTable(data) {
1975
  $('#table-wrapper').innerHTML = "";
1976
  grid = new gridjs.Grid({
 
1985
  scheduleStickyApply();
1986
  initGradientScroll();
1987
  }
1988
+
1989
  function prepareColumns(data) {
1990
  const keys = Object.keys(data[0] || {});
1991
  const avgKey = keys.find(k => k.includes("Average"));
 
1997
  const typeIdx = keys.findIndex(k => ["T", "Type", "Full Type"].includes(k));
1998
  const modelNameIdx = keys.findIndex(k => k === "Model Name");
1999
  const vis = tableColumns.reduce((acc, c) => ({ ...acc, [c.id]: c.hidden }), {});
2000
+
2001
  tableColumns = keys.map(key => {
2002
  const isScore = EVAL_COLUMNS.includes(key), isAvg = key.includes("Average");
2003
  // Skip hidden subset columns — they are data-only, never rendered as columns
 
2015
  }
2016
  let icon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="lucide lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
2017
  let cls = "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300";
2018
+
2019
  if (currentSort.colId === key) {
2020
  cls = "text-indigo-600 dark:text-indigo-400";
2021
  icon = currentSort.dir === 'desc'
2022
  ? `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>`
2023
  : `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>`;
2024
  }
2025
+
2026
  const headerHtml = `<div onclick="window.toggleSort('${key}')" class="flex items-center justify-between gap-2 cursor-pointer select-none w-full h-full"><span>${name}</span><span class="${cls}">${icon}</span></div>`;
2027
+
2028
  const def = {
2029
  id: key,
2030
  name: gridjs.html(headerHtml),
 
2033
  width: '140px',
2034
  sort: false
2035
  };
2036
+
2037
  if (key === "Model Size") {
2038
  def.formatter = (c) => {
2039
  const n = toNumber(c);
 
2041
  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>`);
2042
  };
2043
  }
2044
+
2045
  if (key === "License") {
2046
  def.formatter = (c) => {
2047
  const label = (c && c !== "Unknown") ? c : "Unknown";
2048
  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>`);
2049
  };
2050
  }
2051
+
2052
  if (key === "Model Name") {
2053
  def.width = '400px';
2054
  def.formatter = (c, r) => {
 
2056
  const tMap = { "base": "🟢", "instruct": "🔶"};
2057
  const tIcon = tMap[type] || type;
2058
  const em = encodeURIComponent(String(c ?? ""));
2059
+
2060
  return gridjs.html(`
2061
  <div class="relative w-full h-[38px] flex items-center group pr-6">
2062
  ${type ? `<span class="mr-2 text-lg select-none" title="${type}">${tIcon}</span>` : ''}
2063
+ <div onclick="window.openModelDetails(decodeURIComponent('${em}'))" class="font-bold text-indigo-600 dark:text-purple-300 hover:underline cursor-pointer line-clamp-2-custom leading-[1.3] select-text" title="Click for details">${c}</div>
2064
  </div>
2065
  `);
2066
  };
2067
  } else if (isScore || isAvg) {
2068
+
2069
+ const isDark = () => document.documentElement.classList.contains('dark');
2070
+
2071
  const renderBar = (c, modelName, benchmark) => {
2072
  const n = parseFloat(c); if (isNaN(n)) return c;
2073
  const h = (Math.max(0, Math.min(100, n)) / 100) * 120;
2074
+ const dark = isDark();
2075
+ const bg = dark ? `hsla(${h},35%,40%,0.55)` : `hsla(${h},85%,50%,0.3)`;
2076
+ const bgE = dark ? `hsla(${h},35%,40%,0.08)` : `hsla(${h},85%,50%,0.05)`;
2077
+ const bdr = dark ? `hsla(${h},30%,45%,0.45)` : `hsla(${h},85%,40%,0.3)`;
2078
+ const bar = `<div class="flex justify-center"><div style="background:linear-gradient(to right,${bg} ${n}%,${bgE} ${n}%);border:1px solid ${bdr};" class="w-24 py-1 rounded-md text-center text-xs font-bold text-slate-700 dark:text-slate-200 shadow-sm">${n.toFixed(2)}<span class="text-[10px] font-normal opacity-70 ml-0.5">%</span></div></div>`;
2079
  if (!isScore || !modelName) return gridjs.html(bar);
2080
  const em = encodeURIComponent(modelName);
2081
  const eb = encodeURIComponent(benchmark);
2082
  return gridjs.html(`<button onclick="window.openBenchmarkDetails(decodeURIComponent('${em}'), decodeURIComponent('${eb}'))" class="w-full text-left hover:opacity-90 transition-opacity" title="Click for per-question details">${bar}</button>`);
2083
  };
2084
+
2085
  const renderRaw = (c, modelName, benchmark) => {
2086
  const n = parseFloat(c); if (isNaN(n)) return c;
2087
  const raw = `<div class="flex justify-center text-xs font-bold text-slate-700 dark:text-slate-300 py-1">${n.toFixed(2)}</div>`;
 
2090
  const eb = encodeURIComponent(benchmark);
2091
  return gridjs.html(`<button onclick="window.openBenchmarkDetails(decodeURIComponent('${em}'), decodeURIComponent('${eb}'))" class="w-full text-left hover:opacity-90 transition-opacity" title="Click for per-question details">${raw}</button>`);
2092
  };
2093
+
2094
  const shouldUseBar = true;
2095
+
2096
  def.formatter = (c, r) => {
2097
  const modelName = (modelNameIdx > -1 && r.cells[modelNameIdx]) ? r.cells[modelNameIdx].data : "";
2098
  if (isAvg) {
2099
  const n = parseFloat(c); if (isNaN(n)) return c;
2100
  const h = (Math.max(0, Math.min(100, n)) / 100) * 120;
2101
+ const dark = isDark();
2102
+ const bg = dark ? `hsla(${h},40%,42%,0.60)` : `hsla(${h},100%,45%,0.55)`;
2103
+ const bgE = dark ? `hsla(${h},40%,42%,0.08)` : `hsla(${h},100%,45%,0.07)`;
2104
+ const bdr = dark ? `hsla(${h},35%,48%,0.55)` : `hsla(${h},90%,40%,0.65)`;
2105
+ return gridjs.html(`<div class="flex justify-center"><div style="background:linear-gradient(to right,${bg} ${n}%,${bgE} ${n}%);border:1.5px solid ${bdr};" class="w-24 py-1 rounded-md text-center text-xs font-bold text-slate-700 dark:text-slate-200 shadow-sm">${n.toFixed(2)}<span class="text-[10px] font-normal opacity-70 ml-0.5">%</span></div></div>`);
2106
  }
2107
  return shouldUseBar ? renderBar(c, modelName, key) : renderRaw(c, modelName, key);
2108
  };
2109
+
2110
  } else if (key === "Rank") {
2111
  def.width = '100px';
2112
  def.formatter = (c) => {
2113
  const rank = parseInt(c);
2114
  let badge = `<span class="font-mono font-bold text-slate-700 dark:text-slate-200">#${rank}</span>`;
2115
+
2116
+ if (rank === 1) badge = `<span class="bg-yellow-100 text-yellow-800 dark:bg-yellow-400/20 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-400/40 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm">1 🥇</span>`;
2117
+ if (rank === 2) badge = `<span class="bg-slate-100 text-slate-700 dark:bg-slate-400/15 dark:text-slate-200 border border-slate-200 dark:border-slate-400/30 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm">2 🥈</span>`;
2118
+ if (rank === 3) badge = `<span class="bg-orange-100 text-orange-800 dark:bg-orange-400/20 dark:text-orange-200 border border-orange-200 dark:border-orange-400/40 px-2 py-0.5 rounded-md text-xs font-bold shadow-sm">3 🥉</span>`;
2119
+
2120
  return gridjs.html(`<div class="flex justify-center items-center h-full">${badge}</div>`);
2121
  };
2122
  }
2123
  return key === "Full Type" || key === "T" ? { ...def, hidden: true } : def;
2124
  });
2125
  }
2126
+
2127
  function setupFilters() {
2128
  const minS = $('#minSizeSlider'), maxS = $('#maxSizeSlider');
2129
  minS.min = maxS.min = minMeta;
2130
  minS.max = maxS.max = maxMeta;
2131
  minS.value = minMeta;
2132
  maxS.value = maxMeta;
2133
+
2134
  const formatLabel = (val) => {
2135
  return val + "B";
2136
  };
2137
+
2138
  $('#minSizeLabel').innerText = formatLabel(minMeta);
2139
  $('#maxSizeLabel').innerText = formatLabel(maxMeta);
2140
+
2141
  const updateDualSlider = () => {
2142
  let minV = parseInt(minS.value), maxV = parseInt(maxS.value);
2143
  if (minV > maxV) { const tmp = minV; minS.value = maxV; maxS.value = tmp; minV = maxV; maxV = tmp; }
2144
+
2145
  const textMin = formatLabel(minV);
2146
  const textMax = formatLabel(maxV);
2147
  $('#sizeValue').innerText = `${textMin} - ${textMax}`;
2148
+
2149
  const range = $('#sliderRange');
2150
  const percent1 = ((minV - minS.min) / (minS.max - minS.min)) * 100;
2151
  const percent2 = ((maxV - maxS.min) / (maxS.max - maxS.min)) * 100;
2152
  range.style.left = percent1 + "%"; range.style.width = (percent2 - percent1) + "%";
2153
  };
2154
+
2155
  minS.oninput = updateDualSlider;
2156
  maxS.oninput = updateDualSlider;
2157
  minS.onchange = maxS.onchange = () => applyFilters();
2158
  updateDualSlider();
2159
+
2160
+ window._activeTypes = [];
2161
+ window._activeLicenses = [];
2162
+ window._activeOrgs = [];
2163
+
2164
+ const _btnActive = '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';
2165
+ const _btnInactive = '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';
2166
+
2167
+ window._renderToggle = (containerId, vals, activeList, toggleFn) => {
2168
+ const el = $(containerId);
2169
+ if (!el) return;
2170
+ const allActive = activeList.length === 0;
2171
+ el.innerHTML = [
2172
+ `<button onclick="window.${toggleFn}('__all__')" class="${allActive ? _btnActive : _btnInactive}">All</button>`,
2173
+ ...vals.map(v => `<button onclick="window.${toggleFn}('${v}')" class="${activeList.includes(v) ? _btnActive : _btnInactive}">${v}</button>`)
2174
+ ].join('');
2175
+ };
2176
 
2177
+ window._typeVals = [...new Set(lbData.map(d => d['Full Type']))].filter(Boolean);
2178
+ window._licVals = [...new Set(lbData.map(d => d['License']))].filter(Boolean);
2179
+ window._orgVals = [...new Set(lbData.map(d => {
2180
+ const name = String(d['Model Name'] || '');
2181
+ return name.includes('/') ? name.split('/')[0] : null;
2182
+ }))].filter(Boolean).sort((a, b) => a.localeCompare(b));
2183
+
2184
+ window.toggleTypeFilter = (val) => {
2185
+ if (val === '__all__') { window._activeTypes = []; }
2186
+ else {
2187
+ const i = window._activeTypes.indexOf(val);
2188
+ if (i === -1) window._activeTypes.push(val); else window._activeTypes.splice(i, 1);
2189
+ if (window._activeTypes.length === _typeVals.length) window._activeTypes = [];
2190
+ }
2191
+ window._renderToggle('#typeFilterContainer', window._typeVals, window._activeTypes, 'toggleTypeFilter');
2192
+ applyFilters();
2193
  };
 
 
 
2194
 
2195
+ window.toggleLicenseFilter = (val) => {
2196
+ if (val === '__all__') { window._activeLicenses = []; }
2197
+ else {
2198
+ const i = window._activeLicenses.indexOf(val);
2199
+ if (i === -1) window._activeLicenses.push(val); else window._activeLicenses.splice(i, 1);
2200
+ if (window._activeLicenses.length === _licVals.length) window._activeLicenses = [];
2201
+ }
2202
+ window._renderToggle('#licenseFilterContainer', window._licVals, window._activeLicenses, 'toggleLicenseFilter');
2203
+ applyFilters();
2204
+ };
2205
+
2206
+ window.toggleOrgFilter = (val) => {
2207
+ if (val === '__all__') { window._activeOrgs = []; }
2208
+ else {
2209
+ const i = window._activeOrgs.indexOf(val);
2210
+ if (i === -1) window._activeOrgs.push(val); else window._activeOrgs.splice(i, 1);
2211
+ if (window._activeOrgs.length === _orgVals.length) window._activeOrgs = [];
2212
+ }
2213
+ window._renderToggle('#orgFilterContainer', window._orgVals, window._activeOrgs, 'toggleOrgFilter');
2214
+ applyFilters();
2215
+ };
2216
+
2217
+ window._renderToggle('#typeFilterContainer', _typeVals, window._activeTypes, 'toggleTypeFilter');
2218
+ window._renderToggle('#licenseFilterContainer', window._licVals, window._activeLicenses, 'toggleLicenseFilter');
2219
+ window._renderToggle('#orgFilterContainer', _orgVals, window._activeOrgs, 'toggleOrgFilter');
2220
+ }
2221
+
2222
  function buildColMenuDOM() {
2223
  const addBtns = (grp, el) => {
2224
  $(el).innerHTML = '';
 
2238
  };
2239
  addBtns('scores', '#colListScores'); addBtns('details', '#colListDetails');
2240
  }
2241
+
2242
  })();
2243
  </script>
2244
+
2245
  </body>
2246
+
2247
+ </html>