Hugging Face's logo

Spaces:
qimma
/
leaderboard
Running on CPU Upgrade

App Files Community
Alyafeai commited on
Commit
9efd00d
·
1 Parent(s): 4b5cff3

add arabic support

Browse files
Files changed (5) hide show
  1. frontend/about.html +554 -273
  2. frontend/header.html +67 -6
  3. frontend/index.html +90 -10
  4. frontend/leaderboard.html +393 -95
  5. frontend/submit.html +129 -25
frontend/about.html CHANGED
@@ -16,343 +16,624 @@
16
  -webkit-background-clip: text;
17
  -webkit-text-fill-color: transparent;
18
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </style>
20
  </head>
21
 
22
  <body class="bg-slate-50 text-slate-800 font-sans transition-colors duration-300 dark:bg-darkbg dark:text-slate-100">
23
 
24
- <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
25
 
26
- <div class="text-center mb-12">
27
- <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl gradient-text mb-6">About QIMMA</h1>
28
- </div>
 
 
 
29
 
30
- <div class="space-y-12 animate-fade-in">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
 
32
- <!-- What is QIMMA -->
33
- <section
34
- class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
35
- <div class="flex items-center gap-3 mb-4">
36
- <div class="p-2 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg text-indigo-600 dark:text-indigo-400">
37
- <i data-lucide="info" class="w-6 h-6"></i>
38
- </div>
39
- <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">What is QIMMA?</h2>
40
- </div>
41
- <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
42
- <p class="mb-4">
43
- QIMMA قمّة (Summit in Arabic) is a quality-assured Arabic LLM evaluation leaderboard built on 14 carefully chosen benchmarks spanning STEM, legal reasoning, medical knowledge, poetry, cultural understanding, and code generation. QIMMA includes over 52,000 quality-validated samples across multiple-choice, generative, and code evaluation tracks. Over 99% of QIMMA's content is native Arabic, ensuring authentic linguistic and cultural assessment rather than relying on translated materials.
44
- </p>
45
- <p>
46
- QIMMA was constructed through a systematic benchmark curation process: candidate benchmarks were assessed using a multi-model quality validation pipeline that identified issues in the samples, including false, missing or invalid gold answers, textual encoding problems and many more. Only clean, validated samples made it into the final leaderboard. This process also revealed that quality problems are more pervasive across existing Arabic benchmarks than previously documented.
47
- </p>
48
- </div>
49
- </section>
50
-
51
- <!-- How It Works -->
52
- <section
53
- class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
54
- <div class="flex items-center gap-3 mb-4">
55
- <div class="p-2 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg text-emerald-600 dark:text-emerald-400">
56
- <i data-lucide="cpu" class="w-6 h-6"></i>
57
- </div>
58
- <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">How It Works</h2>
59
- </div>
60
- <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
61
- <p class="mb-6">
62
- QIMMA uses a multi-framework evaluation pipeline tailored to each task type. Multiple-choice and generative QA tasks are evaluated using <a href="https://github.com/huggingface/lighteval" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">LightEval</a>, code generation is evaluated using <a href="https://github.com/evalplus/evalplus" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">EvalPlus</a>, and poetry understanding is evaluated using an adapted version of the <a href="https://github.com/mbzuai-oryx/FannOrFlop" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">FannOrFlop</a> evaluation framework. All models are run in a controlled environment with consistent prompt templates to ensure fair comparison.
63
- </p>
64
-
65
- <h3 class="text-lg font-bold text-slate-800 dark:text-slate-200 mb-3">Evaluation Pipeline</h3>
66
- <ul class="space-y-3 list-disc list-inside marker:text-indigo-500">
67
- <li><strong>Submission:</strong> Users submit their Hugging Face model ID.</li>
68
- <li><strong>Queue:</strong> Models are added to a processing queue. You can track the status of your submission at any time on the <a href="https://huggingface.co/spaces/qimma/leaderboard" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">submission page</a>.</li>
69
- <li><strong>Execution:</strong> Our GPU cluster loads the model and runs the benchmark suite across all tracks.</li>
70
- <li><strong>Scoring:</strong> Per-subset scores are aggregated by domain and published alongside per-sample model predictions for full transparency.</li>
71
- </ul>
72
- </div>
73
- </section>
74
-
75
- <!-- Exploring the Leaderboard -->
76
- <section
77
- class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
78
- <div class="flex items-center gap-3 mb-4">
79
- <div class="p-2 bg-orange-100 dark:bg-orange-900/50 rounded-lg text-orange-600 dark:text-orange-400">
80
- <i data-lucide="layout-dashboard" class="w-6 h-6"></i>
81
- </div>
82
- <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Exploring the Leaderboard</h2>
83
- </div>
84
- <!-- Group 1: Finding Models -->
85
- <div class="mb-6">
86
- <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Finding Models</p>
87
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
88
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
89
- <div class="flex items-center gap-2 mb-2">
90
- <i data-lucide="search" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
91
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Search</h4>
92
- </div>
93
- <p class="text-sm text-slate-600 dark:text-slate-400">Instantly find any model by typing the <strong class="font-semibold text-slate-700 dark:text-slate-300">name or organization</strong></p>
94
  </div>
95
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
96
- <div class="flex items-center gap-2 mb-2">
97
- <i data-lucide="sliders-horizontal" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
98
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Model Filters</h4>
 
 
99
  </div>
100
- <p class="text-sm text-slate-600 dark:text-slate-400">Filter by <strong class="font-semibold text-slate-700 dark:text-slate-300">model type</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">model size</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">organization</strong>, and <strong class="font-semibold text-slate-700 dark:text-slate-300">license</strong> to narrow comparisons to exactly the model families you care about.</p>
101
  </div>
102
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
103
- <div class="flex items-center gap-2 mb-2">
104
- <i data-lucide="filter" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
105
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Benchmark Filters</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
106
  </div>
107
- <p class="text-sm text-slate-600 dark:text-slate-400">Filter by <strong class="font-semibold text-slate-700 dark:text-slate-300">task type</strong> (MCQ, QA, Code) or <strong class="font-semibold text-slate-700 dark:text-slate-300">domain</strong> (STEM, Medical, Legal, Cultural, etc.) to focus on evaluation dimensions most relevant to your work.</p>
108
  </div>
109
- </div>
110
- </div>
111
 
112
- <!-- Group 2: Controlling the View -->
113
- <div class="mb-6">
114
- <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Controlling the View</p>
115
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
116
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
117
- <div class="flex items-center gap-2 mb-2">
118
- <i data-lucide="eye" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
119
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Column Visibility</h4>
 
 
 
 
 
 
 
 
 
120
  </div>
121
- <p class="text-sm text-slate-600 dark:text-slate-400">Toggle individual <strong class="font-semibold text-slate-700 dark:text-slate-300">benchmark columns</strong> on or off to keep the table focused on the tasks relevant to your evaluation needs.</p>
122
  </div>
123
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
124
- <div class="flex items-center gap-2 mb-2">
125
- <i data-lucide="arrow-up-down" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
126
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Sortable Columns</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
127
  </div>
128
- <p class="text-sm text-slate-600 dark:text-slate-400">Click any <strong class="font-semibold text-slate-700 dark:text-slate-300">column header</strong> to sort <strong class="font-semibold text-slate-700 dark:text-slate-300">ascending or descending</strong> to immediately see which models lead on any individual benchmark.</p>
129
  </div>
130
- </div>
131
- </div>
132
 
133
- <!-- Group 3: Analyzing Results -->
134
- <div class="mb-6">
135
- <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Analyzing Results</p>
136
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
137
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
138
- <div class="flex items-center gap-2 mb-2">
139
- <i data-lucide="trophy" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
140
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Ranking Mode</h4>
141
  </div>
142
- <p class="text-sm text-slate-600 dark:text-slate-400"><strong class="font-semibold text-slate-700 dark:text-slate-300">Global Rank</strong> shows fixed positions across all benchmarks. <strong class="font-semibold text-slate-700 dark:text-slate-300">Current View Rank</strong> recalculates live based on your active filters and sort.</p>
143
  </div>
144
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
145
- <div class="flex items-center gap-2 mb-2">
146
- <i data-lucide="calculator" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
147
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Filtered Average</h4>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  </div>
149
- <p class="text-sm text-slate-600 dark:text-slate-400">Switch the Avg column between <strong class="font-semibold text-slate-700 dark:text-slate-300">Global Average</strong> (all benchmarks) and <strong class="font-semibold text-slate-700 dark:text-slate-300">Filtered Average</strong> (only visible columns) to compare models on a custom subset.</p>
150
  </div>
151
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
152
- <div class="flex items-center gap-2 mb-2">
153
- <i data-lucide="panel-right-open" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
154
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Model Detail View</h4>
 
 
155
  </div>
156
- <p class="text-sm text-slate-600 dark:text-slate-400">Click any model name to open a full breakdown: <strong class="font-semibold text-slate-700 dark:text-slate-300">per-benchmark scores</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">model size</strong>, type, license, and a link to the <strong class="font-semibold text-slate-700 dark:text-slate-300">Hugging Face model card</strong>.</p>
157
  </div>
158
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
159
  </div>
160
- </section>
161
-
162
- <!-- Benchmarks & Metrics -->
163
- <section
164
- class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
165
- <div class="flex items-center gap-3 mb-4">
166
- <div class="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
167
- <i data-lucide="bar-chart-2" class="w-6 h-6"></i>
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
- <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Benchmarks & Metrics</h2>
170
  </div>
171
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
172
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
173
- <div class="flex items-center justify-between mb-2">
174
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Cultural Understanding</h4>
175
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
 
 
 
 
 
 
 
 
176
  </div>
177
- <p class="text-sm text-slate-600 dark:text-slate-400">AraDiCE-Culture, ArabCulture, PalmX — evaluating native Arabic cultural knowledge, social norms, and regional understanding.</p>
178
- </div>
179
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
180
- <div class="flex items-center justify-between mb-2">
181
- <h4 class="font-bold text-slate-800 dark:text-slate-200">STEM</h4>
182
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
 
183
  </div>
184
- <p class="text-sm text-slate-600 dark:text-slate-400">ArabicMMLU, 3LM STEM, GAT (Saudi General Aptitude Test) — covering science, mathematics, verbal reasoning, and technical aptitude across diverse academic subjects.</p>
185
- </div>
186
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
187
- <div class="flex items-center justify-between mb-2">
188
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Legal</h4>
189
- <div class="flex gap-1">
190
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
191
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
192
  </div>
 
193
  </div>
194
- <p class="text-sm text-slate-600 dark:text-slate-400">ArabLegalQA (Saudi law), MizanQA (Moroccan law) — testing legal reasoning and regulatory understanding across Arabic jurisdictions.</p>
195
- </div>
196
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
197
- <div class="flex items-center justify-between mb-2">
198
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Medical</h4>
199
- <div class="flex gap-1">
200
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
201
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
 
 
 
 
 
 
 
 
 
 
 
202
  </div>
 
203
  </div>
204
- <p class="text-sm text-slate-600 dark:text-slate-400">MedArabiQ, MedAraBench — evaluating healthcare knowledge, clinical reasoning, and medical terminology in Arabic.</p>
205
- </div>
206
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
207
- <div class="flex items-center justify-between mb-2">
208
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Poetry & Literature</h4>
209
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
210
  </div>
211
- <p class="text-sm text-slate-600 dark:text-slate-400">FannOrFlop — assessing understanding of classical and modern Arabic poetry, literary devices, and cultural context.</p>
212
- </div>
213
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
214
- <div class="flex items-center justify-between mb-2">
215
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Trust & Safety</h4>
216
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
217
  </div>
218
- <p class="text-sm text-slate-600 dark:text-slate-400">AraTrust — probing model behavior on sensitive content, bias, and safety-relevant scenarios in Arabic.</p>
219
- </div>
220
- <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
221
- <div class="flex items-center justify-between mb-2">
222
- <h4 class="font-bold text-slate-800 dark:text-slate-200">Code Generation</h4>
223
- <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400">CODE</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
224
  </div>
225
- <p class="text-sm text-slate-600 dark:text-slate-400">3LM HumanEval+, 3LM MBPP+ — assessing code generation from Arabic instructions, evaluated via functional correctness (pass@1).</p>
226
- </div>
227
- </div>
228
- </section>
229
-
230
- <!-- Resources -->
231
- <section
232
- class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
233
- <div class="flex items-center gap-3 mb-6">
234
- <div class="p-2 bg-cyan-100 dark:bg-cyan-900/50 rounded-lg text-cyan-600 dark:text-cyan-400">
235
- <i data-lucide="link" class="w-6 h-6"></i>
236
- </div>
237
- <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Resources</h2>
238
- </div>
239
- <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
240
- <!-- Paper -->
241
- <a href="https://arxiv.org/pdf/2604.03395" target="_blank"
242
- 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">
243
- <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">
244
- <i data-lucide="file-text" class="w-5 h-5 shrink-0"></i>
245
- <span class="font-semibold">Paper</span>
246
  </div>
247
- <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
248
- Describes the full methodology, benchmark design, and analysis behind QIMMA — including task selection, scoring, and model comparisons.
249
- </p>
250
- <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
251
- Read on arXiv <i data-lucide="arrow-right" class="w-3 h-3"></i>
252
- </span>
253
- </a>
254
-
255
- <!-- Blog Post -->
256
- <a href="https://huggingface.co/blog/tiiuae/qimma-arabic-leaderboard" target="_blank"
257
- 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">
258
- <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">
259
- <i data-lucide="newspaper" class="w-5 h-5 shrink-0"></i>
260
- <span class="font-semibold">Blog Post</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
261
  </div>
262
- <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
263
- A high-level overview of QIMMA, its goals, the benchmarks it covers, and key findings from the evaluation of Arabic language models.
264
  </p>
265
- <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
266
- Read on Hugging Face <i data-lucide="arrow-right" class="w-3 h-3"></i>
267
- </span>
268
- </a>
269
-
270
- <!-- GitHub -->
271
- <a href="https://github.com/tiiuae/QIMMA-leaderboard" target="_blank"
272
- 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">
273
- <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">
274
- <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>
275
- <span class="font-semibold">GitHub Repository</span>
276
  </div>
277
- <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
278
- Contains the full evaluation pipeline used to produce every score on this leaderboard. Use it to reproduce results, run evaluations on your own models, or extend the benchmark suite.
279
  </p>
280
- <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
281
- View on GitHub <i data-lucide="arrow-right" class="w-3 h-3"></i>
282
- </span>
283
- </a>
284
- </div>
285
- <p class="mt-5 text-sm text-slate-600 dark:text-slate-400">
286
- To contact us about the leaderboard, open a discussion <a href="https://huggingface.co/spaces/qimma/leaderboard/discussions" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">here</a>.
287
- </p>
288
- </section>
289
-
290
- <!-- Acknowledgements -->
291
- <section
292
- class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
293
- <div class="flex items-center gap-3 mb-4">
294
- <div class="p-2 bg-amber-100 dark:bg-amber-900/50 rounded-lg text-amber-600 dark:text-amber-400">
295
- <i data-lucide="sparkles" class="w-6 h-6"></i>
296
- </div>
297
- <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Acknowledgements</h2>
298
  </div>
299
- <p class="text-slate-600 dark:text-slate-300 leading-relaxed">
300
- QIMMA is sponsored by the <a href="https://www.tii.ae" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">Technology Innovation Institute (TII)</a>, which provides the compute resources and institutional support that make this leaderboard possible.
301
- </p>
302
- </section>
303
-
304
- </div>
305
-
306
- <!-- Citation -->
307
- <div class="mt-12 border-t border-slate-200 dark:border-slate-700 pt-8 pb-8">
308
- <h3 class="text-xl font-bold text-center text-slate-800 dark:text-slate-100 mb-6">Citation</h3>
309
- <div class="max-w-4xl mx-auto relative group">
310
- <div class="absolute top-3 right-3">
311
- <button onclick="copyCitation()"
312
- class="p-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 shadow-sm transition-all"
313
- title="Copy to clipboard">
314
- <i id="copyIcon" data-lucide="copy" class="w-4 h-4"></i>
315
- </button>
316
- </div>
317
- <pre id="citationCode"
318
- class="bg-slate-100 dark:bg-slate-900/50 p-6 rounded-xl border border-slate-200 dark:border-slate-700 overflow-x-auto text-xs sm:text-sm text-slate-600 dark:text-slate-400 font-mono leading-relaxed">@misc{alqadi2026arabicbenchmarksreliableqimmas,
319
- title={Are Arabic Benchmarks Reliable? QIMMA's Quality-First Approach to LLM Evaluation},
320
  author={Leen AlQadi and Ahmed Alzubaidi and Mohammed Alyafeai and Hamza Alobeidli and Maitha Alhammadi and Shaikha Alsuwaidi and Omar Alkaabi and Basma El Amel Boussaha and Hakim Hacid},
321
  year={2026},
322
  eprint={2604.03395},
323
  archivePrefix={arXiv},
324
  primaryClass={cs.CL},
325
- url={https://arxiv.org/abs/2604.03395},
326
  }</pre>
327
- </div>
328
- </div>
329
-
330
- </div>
331
 
332
- <script>
333
- if (window.lucide) lucide.createIcons();
334
- // Dark mode check for standalone viewing
335
- if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
336
- document.documentElement.classList.add('dark');
 
337
  }
338
 
339
- // Copy Citation
340
  function copyCitation() {
341
- const text = document.getElementById('citationCode').innerText;
 
342
  navigator.clipboard.writeText(text).then(() => {
343
  const icon = document.getElementById('copyIcon');
 
344
  icon.setAttribute('data-lucide', 'check');
345
  icon.classList.add('text-emerald-500');
346
- lucide.createIcons();
347
 
348
  setTimeout(() => {
349
  icon.setAttribute('data-lucide', 'copy');
350
  icon.classList.remove('text-emerald-500');
351
- lucide.createIcons();
352
  }, 2000);
353
  });
354
  }
 
 
 
 
 
355
  </script>
356
  </body>
357
 
358
- </html>
 
16
  -webkit-background-clip: text;
17
  -webkit-text-fill-color: transparent;
18
  }
19
+
20
+ html[dir="rtl"] #aboutPage {
21
+ direction: rtl;
22
+ text-align: right;
23
+ }
24
+
25
+ html[dir="rtl"] #aboutPage .resource-row,
26
+ html[dir="rtl"] #aboutPage .section-row {
27
+ flex-direction: row-reverse;
28
+ }
29
+
30
+ html[dir="rtl"] #aboutPage .citation-button-wrap {
31
+ left: 0.75rem;
32
+ right: auto;
33
+ }
34
+
35
+ html[dir="rtl"] #aboutPage #citationCode {
36
+ direction: ltr;
37
+ text-align: left;
38
+ }
39
  </style>
40
  </head>
41
 
42
  <body class="bg-slate-50 text-slate-800 font-sans transition-colors duration-300 dark:bg-darkbg dark:text-slate-100">
43
 
44
+ <div id="aboutPage" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"></div>
45
 
46
+ <script>
47
+ const ABOUT_PAGE_CONTENT = {
48
+ en: `
49
+ <div class="text-center mb-12">
50
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl gradient-text mb-6">About QIMMA</h1>
51
+ </div>
52
 
53
+ <div class="space-y-12 animate-fade-in">
54
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
55
+ <div class="section-row flex items-center gap-3 mb-4">
56
+ <div class="p-2 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg text-indigo-600 dark:text-indigo-400">
57
+ <i data-lucide="info" class="w-6 h-6"></i>
58
+ </div>
59
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">What is QIMMA?</h2>
60
+ </div>
61
+ <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
62
+ <p class="mb-4">
63
+ QIMMA قمّة (Summit in Arabic) is a quality-assured Arabic LLM evaluation leaderboard built on 14 carefully chosen benchmarks spanning STEM, legal reasoning, medical knowledge, poetry, cultural understanding, and code generation. QIMMA includes over 52,000 quality-validated samples across multiple-choice, generative, and code evaluation tracks. Over 99% of QIMMA's content is native Arabic, ensuring authentic linguistic and cultural assessment rather than relying on translated materials.
64
+ </p>
65
+ <p>
66
+ QIMMA was constructed through a systematic benchmark curation process: candidate benchmarks were assessed using a multi-model quality validation pipeline that identified issues in the samples, including false, missing or invalid gold answers, textual encoding problems and many more. Only clean, validated samples made it into the final leaderboard. This process also revealed that quality problems are more pervasive across existing Arabic benchmarks than previously documented.
67
+ </p>
68
+ </div>
69
+ </section>
70
 
71
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
72
+ <div class="section-row flex items-center gap-3 mb-4">
73
+ <div class="p-2 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg text-emerald-600 dark:text-emerald-400">
74
+ <i data-lucide="cpu" class="w-6 h-6"></i>
75
+ </div>
76
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">How It Works</h2>
77
+ </div>
78
+ <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
79
+ <p class="mb-6">
80
+ QIMMA uses a multi-framework evaluation pipeline tailored to each task type. Multiple-choice and generative QA tasks are evaluated using <a href="https://github.com/huggingface/lighteval" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">LightEval</a>, code generation is evaluated using <a href="https://github.com/evalplus/evalplus" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">EvalPlus</a>, and poetry understanding is evaluated using an adapted version of the <a href="https://github.com/mbzuai-oryx/FannOrFlop" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">FannOrFlop</a> evaluation framework. All models are run in a controlled environment with consistent prompt templates to ensure fair comparison.
81
+ </p>
82
+
83
+ <h3 class="text-lg font-bold text-slate-800 dark:text-slate-200 mb-3">Evaluation Pipeline</h3>
84
+ <ul class="space-y-3 list-disc list-inside marker:text-indigo-500">
85
+ <li><strong>Submission:</strong> Users submit their Hugging Face model ID.</li>
86
+ <li><strong>Queue:</strong> Models are added to a processing queue. You can track the status of your submission at any time on the <a href="https://huggingface.co/spaces/qimma/leaderboard" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">submission page</a>.</li>
87
+ <li><strong>Execution:</strong> Our GPU cluster loads the model and runs the benchmark suite across all tracks.</li>
88
+ <li><strong>Scoring:</strong> Per-subset scores are aggregated by domain and published alongside per-sample model predictions for full transparency.</li>
89
+ </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
+ </section>
92
+
93
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
94
+ <div class="section-row flex items-center gap-3 mb-4">
95
+ <div class="p-2 bg-orange-100 dark:bg-orange-900/50 rounded-lg text-orange-600 dark:text-orange-400">
96
+ <i data-lucide="layout-dashboard" class="w-6 h-6"></i>
97
  </div>
98
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Exploring the Leaderboard</h2>
99
  </div>
100
+ <div class="mb-6">
101
+ <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Finding Models</p>
102
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
103
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
104
+ <div class="flex items-center gap-2 mb-2">
105
+ <i data-lucide="search" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
106
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Search</h4>
107
+ </div>
108
+ <p class="text-sm text-slate-600 dark:text-slate-400">Instantly find any model by typing the <strong class="font-semibold text-slate-700 dark:text-slate-300">name or organization</strong></p>
109
+ </div>
110
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
111
+ <div class="flex items-center gap-2 mb-2">
112
+ <i data-lucide="sliders-horizontal" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
113
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Model Filters</h4>
114
+ </div>
115
+ <p class="text-sm text-slate-600 dark:text-slate-400">Filter by <strong class="font-semibold text-slate-700 dark:text-slate-300">model type</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">model size</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">organization</strong>, and <strong class="font-semibold text-slate-700 dark:text-slate-300">license</strong> to narrow comparisons to exactly the model families you care about.</p>
116
+ </div>
117
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
118
+ <div class="flex items-center gap-2 mb-2">
119
+ <i data-lucide="filter" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
120
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Benchmark Filters</h4>
121
+ </div>
122
+ <p class="text-sm text-slate-600 dark:text-slate-400">Filter by <strong class="font-semibold text-slate-700 dark:text-slate-300">task type</strong> (MCQ, QA, Code) or <strong class="font-semibold text-slate-700 dark:text-slate-300">domain</strong> (STEM, Medical, Legal, Cultural, etc.) to focus on evaluation dimensions most relevant to your work.</p>
123
+ </div>
124
  </div>
 
125
  </div>
 
 
126
 
127
+ <div class="mb-6">
128
+ <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Controlling the View</p>
129
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
130
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
131
+ <div class="flex items-center gap-2 mb-2">
132
+ <i data-lucide="eye" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
133
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Column Visibility</h4>
134
+ </div>
135
+ <p class="text-sm text-slate-600 dark:text-slate-400">Toggle individual <strong class="font-semibold text-slate-700 dark:text-slate-300">benchmark columns</strong> on or off to keep the table focused on the tasks relevant to your evaluation needs.</p>
136
+ </div>
137
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
138
+ <div class="flex items-center gap-2 mb-2">
139
+ <i data-lucide="arrow-up-down" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
140
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Sortable Columns</h4>
141
+ </div>
142
+ <p class="text-sm text-slate-600 dark:text-slate-400">Click any <strong class="font-semibold text-slate-700 dark:text-slate-300">column header</strong> to sort <strong class="font-semibold text-slate-700 dark:text-slate-300">ascending or descending</strong> to immediately see which models lead on any individual benchmark.</p>
143
+ </div>
144
  </div>
 
145
  </div>
146
+
147
+ <div class="mb-6">
148
+ <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Analyzing Results</p>
149
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
150
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
151
+ <div class="flex items-center gap-2 mb-2">
152
+ <i data-lucide="trophy" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
153
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Ranking Mode</h4>
154
+ </div>
155
+ <p class="text-sm text-slate-600 dark:text-slate-400"><strong class="font-semibold text-slate-700 dark:text-slate-300">Global Rank</strong> shows fixed positions across all benchmarks. <strong class="font-semibold text-slate-700 dark:text-slate-300">Current View Rank</strong> recalculates live based on your active filters and sort.</p>
156
+ </div>
157
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
158
+ <div class="flex items-center gap-2 mb-2">
159
+ <i data-lucide="calculator" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
160
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Filtered Average</h4>
161
+ </div>
162
+ <p class="text-sm text-slate-600 dark:text-slate-400">Switch the Avg column between <strong class="font-semibold text-slate-700 dark:text-slate-300">Global Average</strong> (all benchmarks) and <strong class="font-semibold text-slate-700 dark:text-slate-300">Filtered Average</strong> (only visible columns) to compare models on a custom subset.</p>
163
+ </div>
164
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
165
+ <div class="flex items-center gap-2 mb-2">
166
+ <i data-lucide="panel-right-open" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
167
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Model Detail View</h4>
168
+ </div>
169
+ <p class="text-sm text-slate-600 dark:text-slate-400">Click any model name to open a full breakdown: <strong class="font-semibold text-slate-700 dark:text-slate-300">per-benchmark scores</strong>, <strong class="font-semibold text-slate-700 dark:text-slate-300">model size</strong>, type, license, and a link to the <strong class="font-semibold text-slate-700 dark:text-slate-300">Hugging Face model card</strong>.</p>
170
+ </div>
171
  </div>
 
172
  </div>
173
+ </section>
 
174
 
175
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
176
+ <div class="section-row flex items-center gap-3 mb-4">
177
+ <div class="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
178
+ <i data-lucide="bar-chart-2" class="w-6 h-6"></i>
 
 
 
 
179
  </div>
180
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Benchmarks & Metrics</h2>
181
  </div>
182
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
183
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
184
+ <div class="flex items-center justify-between mb-2">
185
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Cultural Understanding</h4>
186
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
187
+ </div>
188
+ <p class="text-sm text-slate-600 dark:text-slate-400">AraDiCE-Culture, ArabCulture, PalmX — evaluating native Arabic cultural knowledge, social norms, and regional understanding.</p>
189
+ </div>
190
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
191
+ <div class="flex items-center justify-between mb-2">
192
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">STEM</h4>
193
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
194
+ </div>
195
+ <p class="text-sm text-slate-600 dark:text-slate-400">ArabicMMLU, 3LM STEM, GAT (Saudi General Aptitude Test) — covering science, mathematics, verbal reasoning, and technical aptitude across diverse academic subjects.</p>
196
+ </div>
197
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
198
+ <div class="flex items-center justify-between mb-2">
199
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Legal</h4>
200
+ <div class="flex gap-1">
201
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
202
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
203
+ </div>
204
+ </div>
205
+ <p class="text-sm text-slate-600 dark:text-slate-400">ArabLegalQA (Saudi law), MizanQA (Moroccan law) — testing legal reasoning and regulatory understanding across Arabic jurisdictions.</p>
206
+ </div>
207
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
208
+ <div class="flex items-center justify-between mb-2">
209
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Medical</h4>
210
+ <div class="flex gap-1">
211
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
212
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
213
+ </div>
214
+ </div>
215
+ <p class="text-sm text-slate-600 dark:text-slate-400">MedArabiQ, MedAraBench — evaluating healthcare knowledge, clinical reasoning, and medical terminology in Arabic.</p>
216
+ </div>
217
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
218
+ <div class="flex items-center justify-between mb-2">
219
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Poetry & Literature</h4>
220
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
221
+ </div>
222
+ <p class="text-sm text-slate-600 dark:text-slate-400">FannOrFlop — assessing understanding of classical and modern Arabic poetry, literary devices, and cultural context.</p>
223
+ </div>
224
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
225
+ <div class="flex items-center justify-between mb-2">
226
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Trust & Safety</h4>
227
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
228
+ </div>
229
+ <p class="text-sm text-slate-600 dark:text-slate-400">AraTrust — probing model behavior on sensitive content, bias, and safety-relevant scenarios in Arabic.</p>
230
+ </div>
231
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
232
+ <div class="flex items-center justify-between mb-2">
233
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">Code Generation</h4>
234
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400">CODE</span>
235
+ </div>
236
+ <p class="text-sm text-slate-600 dark:text-slate-400">3LM HumanEval+, 3LM MBPP+ — assessing code generation from Arabic instructions, evaluated via functional correctness (pass@1).</p>
237
  </div>
 
238
  </div>
239
+ </section>
240
+
241
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
242
+ <div class="section-row flex items-center gap-3 mb-6">
243
+ <div class="p-2 bg-cyan-100 dark:bg-cyan-900/50 rounded-lg text-cyan-600 dark:text-cyan-400">
244
+ <i data-lucide="link" class="w-6 h-6"></i>
245
  </div>
246
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Resources</h2>
247
  </div>
248
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
249
+ <a href="https://arxiv.org/pdf/2604.03395" target="_blank" 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">
250
+ <div class="resource-row 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">
251
+ <i data-lucide="file-text" class="w-5 h-5 shrink-0"></i>
252
+ <span class="font-semibold">Paper</span>
253
+ </div>
254
+ <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
255
+ Describes the full methodology, benchmark design, and analysis behind QIMMA — including task selection, scoring, and model comparisons.
256
+ </p>
257
+ <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
258
+ Read on arXiv <i data-lucide="arrow-right" class="w-3 h-3"></i>
259
+ </span>
260
+ </a>
261
+
262
+ <a href="https://huggingface.co/blog/tiiuae/qimma-arabic-leaderboard" target="_blank" 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">
263
+ <div class="resource-row 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">
264
+ <i data-lucide="newspaper" class="w-5 h-5 shrink-0"></i>
265
+ <span class="font-semibold">Blog Post</span>
266
+ </div>
267
+ <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
268
+ A high-level overview of QIMMA, its goals, the benchmarks it covers, and key findings from the evaluation of Arabic language models.
269
+ </p>
270
+ <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
271
+ Read on Hugging Face <i data-lucide="arrow-right" class="w-3 h-3"></i>
272
+ </span>
273
+ </a>
274
+
275
+ <a href="https://github.com/tiiuae/QIMMA-leaderboard" target="_blank" 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">
276
+ <div class="resource-row 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">
277
+ <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>
278
+ <span class="font-semibold">GitHub Repository</span>
279
+ </div>
280
+ <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
281
+ Contains the full evaluation pipeline used to produce every score on this leaderboard. Use it to reproduce results, run evaluations on your own models, or extend the benchmark suite.
282
+ </p>
283
+ <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
284
+ View on GitHub <i data-lucide="arrow-right" class="w-3 h-3"></i>
285
+ </span>
286
+ </a>
287
+ </div>
288
+ <p class="mt-5 text-sm text-slate-600 dark:text-slate-400">
289
+ To contact us about the leaderboard, open a discussion <a href="https://huggingface.co/spaces/qimma/leaderboard/discussions" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">here</a>.
290
+ </p>
291
+ </section>
292
+
293
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
294
+ <div class="section-row flex items-center gap-3 mb-4">
295
+ <div class="p-2 bg-amber-100 dark:bg-amber-900/50 rounded-lg text-amber-600 dark:text-amber-400">
296
+ <i data-lucide="sparkles" class="w-6 h-6"></i>
297
+ </div>
298
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Acknowledgements</h2>
299
+ </div>
300
+ <p class="text-slate-600 dark:text-slate-300 leading-relaxed">
301
+ QIMMA is sponsored by the <a href="https://www.tii.ae" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">Technology Innovation Institute (TII)</a>, which provides the compute resources and institutional support that make this leaderboard possible.
302
+ </p>
303
+ </section>
304
  </div>
305
+
306
+ <div class="mt-12 border-t border-slate-200 dark:border-slate-700 pt-8 pb-8">
307
+ <h3 class="text-xl font-bold text-center text-slate-800 dark:text-slate-100 mb-6">Citation</h3>
308
+ <div class="max-w-4xl mx-auto relative group">
309
+ <div class="citation-button-wrap absolute top-3 right-3">
310
+ <button onclick="copyCitation()" class="p-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 shadow-sm transition-all" title="Copy to clipboard">
311
+ <i id="copyIcon" data-lucide="copy" class="w-4 h-4"></i>
312
+ </button>
313
+ </div>
314
+ <pre id="citationCode" class="bg-slate-100 dark:bg-slate-900/50 p-6 rounded-xl border border-slate-200 dark:border-slate-700 overflow-x-auto text-xs sm:text-sm text-slate-600 dark:text-slate-400 font-mono leading-relaxed">@misc{alqadi2026arabicbenchmarksreliableqimmas,
315
+ title={Are Arabic Benchmarks Reliable? QIMMA's Quality-First Approach to LLM Evaluation},
316
+ author={Leen AlQadi and Ahmed Alzubaidi and Mohammed Alyafeai and Hamza Alobeidli and Maitha Alhammadi and Shaikha Alsuwaidi and Omar Alkaabi and Basma El Amel Boussaha and Hakim Hacid},
317
+ year={2026},
318
+ eprint={2604.03395},
319
+ archivePrefix={arXiv},
320
+ primaryClass={cs.CL},
321
+ url={https://arxiv.org/abs/2604.03395},
322
+ }</pre>
323
  </div>
 
324
  </div>
325
+ `,
326
+ ar: `
327
+ <div class="text-center mb-12">
328
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl gradient-text mb-6">حول QIMMA</h1>
329
+ </div>
330
+
331
+ <div class="space-y-12 animate-fade-in">
332
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
333
+ <div class="section-row flex items-center gap-3 mb-4">
334
+ <div class="p-2 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg text-indigo-600 dark:text-indigo-400">
335
+ <i data-lucide="info" class="w-6 h-6"></i>
336
+ </div>
337
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">ما هي QIMMA؟</h2>
338
  </div>
339
+ <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
340
+ <p class="mb-4">
341
+ QIMMA قمّة هي لوحة صدارة عربية مضمونة الجودة لتقييم النماذج اللغوية، مبنية على 14 معيارًا تقييمياً تم اختيارها بعناية، وتغطي مجالات العلوم والتقنية والهندسة والرياضيات، والاستدلال القانوني، والمعرفة الطبية، والشعر، والفهم الثقافي، والبرمجة. تضم QIMMA أكثر من 52,000 عينة تم تحقق من جودتها وتضم الاختيار من متعدد، والإجابة التوليدية، وتقييم البرمجي. وأكثر من 99% من محتوى QIMMA عربيُّ الأصل، مما يضمن تقييمًا لغويًا وثقافيًا أصيلًا بدلًا من الاعتماد على مواد مترجمة.
342
+ </p>
343
+ <p>
344
+ بنية QIMMA عبر عملية منهجية، حيث خضعت المعايير المرشحة لمسار تحقق من الجودة يعتمد على عدة نماذج، وكشف عن مشكلات في العينات، منها الإجابات المرجعية الخاطئة أو الناقصة أو غير الصالحة، ومشكلات ترميز النص، وغيرها الكثير. لم تصل إلى لوحة الصدارة النهائية إلا العينات النظيفة والمتحقق منها. كما كشفت هذه العملية أن مشكلات الجودة أكثر انتشارًا في المعايير العربية الحالية مما كان موثقًا سابقًا.
345
+ </p>
346
  </div>
347
+ </section>
348
+
349
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
350
+ <div class="section-row flex items-center gap-3 mb-4">
351
+ <div class="p-2 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg text-emerald-600 dark:text-emerald-400">
352
+ <i data-lucide="cpu" class="w-6 h-6"></i>
 
 
353
  </div>
354
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">كيف تعمل المنصة</h2>
355
  </div>
356
+ <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
357
+ <p class="mb-6">
358
+ تستخدم QIMMA مسار تقييم متعدد إطارات ومصم��ًا بما يلائم كل نوع من المهام. يتم تقييم أسئلة الاختيار من متعدد ومهام الإجابة التوليدية باستخدام <a href="https://github.com/huggingface/lighteval" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">LightEval</a>، وتقيم المهام البرمجة بإستخدام <a href="https://github.com/evalplus/evalplus" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">EvalPlus</a>، بينما يُقيَّم فهم الشعر باستخدام نسخة معدله من إطار التقييم <a href="https://github.com/mbzuai-oryx/FannOrFlop" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">FannOrFlop</a>. ويتم تشغيل جميع النماذج ضمن بيئة مضبوطة مع قوالب توجيه ثابته لضمان مقارنة عادلة.
359
+ </p>
360
+
361
+ <h3 class="text-lg font-bold text-slate-800 dark:text-slate-200 mb-3">مسار التقيم</h3>
362
+ <ul class="space-y-3 list-disc list-inside marker:text-indigo-500">
363
+ <li><strong>الإرسال:</strong> يرسل المستخدمون اسم النموذج الخاص بهم على Hugging Face.</li>
364
+ <li><strong>الانتظار:</strong> تُضاف النماذج إلى قائمة معالجة. ويمكنك تتبع حالة الإرسال في أي وقت عبر <a href="https://huggingface.co/spaces/qimma/leaderboard" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">صفحة الإرسال</a>.</li>
365
+ <li><strong>التنفيذ:</strong> تقوم الحواسيب ال GPU لدينا بتحميل النموذج وتشغيل مجموعة المعايير التقييمية عبر جميع المسارات.</li>
366
+ <li><strong>التقيم:</strong> تُجمع الدرجات على مستوى الأجزاء الفرعية بحسب المجال، وتُنشر إلى جانب تنبؤات النموذج لكل عينة لضمان الشفافية الكاملة.</li>
367
+ </ul>
368
+ </div>
369
+ </section>
370
+
371
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
372
+ <div class="section-row flex items-center gap-3 mb-4">
373
+ <div class="p-2 bg-orange-100 dark:bg-orange-900/50 rounded-lg text-orange-600 dark:text-orange-400">
374
+ <i data-lucide="layout-dashboard" class="w-6 h-6"></i>
375
  </div>
376
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">استكشاف لوحة الصدارة</h2>
377
  </div>
378
+ <div class="mb-6">
379
+ <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">العثور على النماذج</p>
380
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
381
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
382
+ <div class="flex items-center gap-2 mb-2">
383
+ <i data-lucide="search" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
384
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">البحث</h4>
385
+ </div>
386
+ <p class="text-sm text-slate-600 dark:text-slate-400">اعثر فورًا على أي نموذج بكتابة <strong class="font-semibold text-slate-700 dark:text-slate-300">اسمه أو الجهة المطوّرة له</strong>.</p>
387
+ </div>
388
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
389
+ <div class="flex items-center gap-2 mb-2">
390
+ <i data-lucide="sliders-horizontal" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
391
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">فلاتر النموذج</h4>
392
+ </div>
393
+ <p class="text-sm text-slate-600 dark:text-slate-400">فلتر بحسب <strong class="font-semibold text-slate-700 dark:text-slate-300">نوع النموذج</strong>، و<strong class="font-semibold text-slate-700 dark:text-slate-300">حجم النموذج</strong>، و<strong class="font-semibold text-slate-700 dark:text-slate-300">الجهة المطوّرة</strong>، و<strong class="font-semibold text-slate-700 dark:text-slate-300">الترخيص</strong> للمقارنة بين النماذج التي تهمك.</p>
394
+ </div>
395
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
396
+ <div class="flex items-center gap-2 mb-2">
397
+ <i data-lucide="filter" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
398
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">فلاتر المعايير</h4>
399
+ </div>
400
+ <p class="text-sm text-slate-600 dark:text-slate-400">فلتر بحسب <strong class="font-semibold text-slate-700 dark:text-slate-300">نوع المهمة</strong> (اختيار من متعدد، سؤال وجواب، برمجة) أو <strong class="font-semibold text-slate-700 dark:text-slate-300">المجال</strong> (STEM، الطب، القانون، الثقافة، وغيرها) للتركيز على أبعاد التقييم الأكثر صلة بعملك.</p>
401
+ </div>
402
+ </div>
403
  </div>
404
+
405
+ <div class="mb-6">
406
+ <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">التحكم في العرض</p>
407
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
408
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
409
+ <div class="flex items-center gap-2 mb-2">
410
+ <i data-lucide="eye" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
411
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">إظهار الأعمدة</h4>
412
+ </div>
413
+ <p class="text-sm text-slate-600 dark:text-slate-400">أوقف أو شغل أيا من <strong class="font-semibold text-slate-700 dark:text-slate-300">أعمدة المعايير</strong> لإبقاء الجدول مركزًا على المهام ذات الصلة باحتياجاتك التقييمية.</p>
414
+ </div>
415
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
416
+ <div class="flex items-center gap-2 mb-2">
417
+ <i data-lucide="arrow-up-down" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
418
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">أعمدة قابلة للترتيب</h4>
419
+ </div>
420
+ <p class="text-sm text-slate-600 dark:text-slate-400">انقر على أي <strong class="font-semibold text-slate-700 dark:text-slate-300">رأس عمود</strong> لترتيب <strong class="font-semibold text-slate-700 dark:text-slate-300">تصاعديًا أو تنازليًا</strong> لرؤية النماذج المتقدمة فورًا في أي من المعيار التقييمية.</p>
421
+ </div>
422
+ </div>
423
  </div>
424
+
425
+ <div class="mb-6">
426
+ <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">تحليل النتائج</p>
427
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
428
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
429
+ <div class="flex items-center gap-2 mb-2">
430
+ <i data-lucide="trophy" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
431
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">وضع الترتيب</h4>
432
+ </div>
433
+ <p class="text-sm text-slate-600 dark:text-slate-400"><strong class="font-semibold text-slate-700 dark:text-slate-300">الترتيب العام</strong> يعرض ترتيب ثابت عبر جميع المعايير. أما <strong class="font-semibold text-slate-700 dark:text-slate-300">ترتيب العرض الحالي</strong> فيُعاد حسابه مباشرة بناءً على الفلترات والترتيب النشطين.</p>
434
+ </div>
435
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
436
+ <div class="flex items-center gap-2 mb-2">
437
+ <i data-lucide="calculator" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
438
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">فلترت المتوسط الحسابي</h4>
439
+ </div>
440
+ <p class="text-sm text-slate-600 dark:text-slate-400">بدّل عمود المتوسط بين <strong class="font-semibold text-slate-700 dark:text-slate-300">المتوسط العام</strong> (جميع المعايير) و<strong class="font-semibold text-slate-700 dark:text-slate-300">فلتر المتوسط الحسابي
441
+ </strong> (الأعمدة الظاهرة فقط) لمقارنة النماذج على مجموعة فرعية مخصّصة.</p>
442
+ </div>
443
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
444
+ <div class="flex items-center gap-2 mb-2">
445
+ <i data-lucide="panel-right-open" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
446
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">عرض تفاصيل النموذج</h4>
447
+ </div>
448
+ <p class="text-sm text-slate-600 dark:text-slate-400">انقر على اسم أي نموذج لفتح تفصيل كامل: <strong class="font-semibold text-slate-700 dark:text-slate-300">درجات كل معيار</strong>، و<strong class="font-semibold text-slate-700 dark:text-slate-300">حجم النموذج</strong>، ونوعه، وترخيصه، ورابط إلى <strong class="font-semibold text-slate-700 dark:text-slate-300">صفحة النموذج على Hugging Face</strong>.</p>
449
+ </div>
450
+ </div>
451
  </div>
452
+ </section>
453
+
454
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
455
+ <div class="section-row flex items-center gap-3 mb-4">
456
+ <div class="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
457
+ <i data-lucide="bar-chart-2" class="w-6 h-6"></i>
458
+ </div>
459
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">المعايير والمقاييس</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
460
  </div>
461
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
462
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
463
+ <div class="flex items-center justify-between mb-2">
464
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">الفهم الثقافي</h4>
465
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
466
+ </div>
467
+ <p class="text-sm text-slate-600 dark:text-slate-400">AraDiCE-Culture وArabCulture وPalmX — لتقييم المعرفة الثقافية العربية الأصيلة، والأعراف الاجتماعية، والفهم الإقليمي.</p>
468
+ </div>
469
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
470
+ <div class="flex items-center justify-between mb-2">
471
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">STEM</h4>
472
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
473
+ </div>
474
+ <p class="text-sm text-slate-600 dark:text-slate-400">ArabicMMLU و3LM STEM وGAT (اختبار القدرات العامة السعودي) — لتغطية العلوم، والرياضيات، والاستدلال اللفظي، والقدرة التقنية عبر موضوعات أكاديمية متنوعة.</p>
475
+ </div>
476
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
477
+ <div class="flex items-center justify-between mb-2">
478
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">القانون</h4>
479
+ <div class="flex gap-1">
480
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
481
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
482
+ </div>
483
+ </div>
484
+ <p class="text-sm text-slate-600 dark:text-slate-400">ArabLegalQA (القانون السعودي) وMizanQA (القانون المغربي) — لاختبار الاستدلال القانوني وفهم الأنظمة عبر ولايات قضائية عربية.</p>
485
+ </div>
486
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
487
+ <div class="flex items-center justify-between mb-2">
488
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">الطب</h4>
489
+ <div class="flex gap-1">
490
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
491
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
492
+ </div>
493
+ </div>
494
+ <p class="text-sm text-slate-600 dark:text-slate-400">MedArabiQ وMedAraBench — لتقييم المعرفة الصحية، والاستدلال السريري، والمصطلحات الطبية باللغة العربية.</p>
495
+ </div>
496
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
497
+ <div class="flex items-center justify-between mb-2">
498
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">الشعر والأدب</h4>
499
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400">QA</span>
500
+ </div>
501
+ <p class="text-sm text-slate-600 dark:text-slate-400">FannOrFlop — لتقييم فهم الشعر العربي القديم والحديث، والأساليب البلاغية، والسياق الثقافي.</p>
502
+ </div>
503
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
504
+ <div class="flex items-center justify-between mb-2">
505
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">الثقة والسلامة</h4>
506
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-600 dark:text-indigo-400">MCQ</span>
507
+ </div>
508
+ <p class="text-sm text-slate-600 dark:text-slate-400">AraTrust — لاستكشاف سلوك النموذج في المحتوى الحساس، والانحياز، والسيناريوهات المرتبطة بالسلامة باللغة العربية.</p>
509
+ </div>
510
+ <div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
511
+ <div class="flex items-center justify-between mb-2">
512
+ <h4 class="font-bold text-slate-800 dark:text-slate-200">توليد البرمجة</h4>
513
+ <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400">CODE</span>
514
+ </div>
515
+ <p class="text-sm text-slate-600 dark:text-slate-400">3LM HumanEval+ و3LM MBPP+ — لتقييم توليد البرمجة من تعليمات عربية، ويجري تقييمها عبر الصحة الوظيفية (pass@1).</p>
516
+ </div>
517
+ </div>
518
+ </section>
519
+
520
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
521
+ <div class="section-row flex items-center gap-3 mb-6">
522
+ <div class="p-2 bg-cyan-100 dark:bg-cyan-900/50 rounded-lg text-cyan-600 dark:text-cyan-400">
523
+ <i data-lucide="link" class="w-6 h-6"></i>
524
+ </div>
525
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">المصادر</h2>
526
+ </div>
527
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
528
+ <a href="https://arxiv.org/pdf/2604.03395" target="_blank" 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">
529
+ <div class="resource-row 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">
530
+ <i data-lucide="file-text" class="w-5 h-5 shrink-0"></i>
531
+ <span class="font-semibold">الورقة البحثية</span>
532
+ </div>
533
+ <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
534
+ تصف المنهجية الكاملة، وتصميم المعايير، والتحليل الكامن وراء QIMMA، بما في ذلك اختيار المهام، واحتساب الدرجات، ومقارنات النماذج.
535
+ </p>
536
+ <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
537
+ اقرأ على arXiv <i data-lucide="arrow-left" class="w-3 h-3"></i>
538
+ </span>
539
+ </a>
540
+
541
+ <a href="https://huggingface.co/blog/tiiuae/qimma-arabic-leaderboard" target="_blank" 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">
542
+ <div class="resource-row 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">
543
+ <i data-lucide="newspaper" class="w-5 h-5 shrink-0"></i>
544
+ <span class="font-semibold">المقال التعريفي</span>
545
+ </div>
546
+ <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
547
+ مقدمة موجزة إلى QIMMA، ودوافعها، والمجالات المعيارية التي تغطيها.
548
+ </p>
549
+ <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
550
+ اقرأ على Hugging Face <i data-lucide="arrow-left" class="w-3 h-3"></i>
551
+ </span>
552
+ </a>
553
+
554
+ <a href="https://github.com/tiiuae/QIMMA-leaderboard" target="_blank" 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">
555
+ <div class="resource-row 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">
556
+ <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>
557
+ <span class="font-semibold">مشروع GitHub</span>
558
+ </div>
559
+ <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
560
+ التنفيذ المفتوح المصدر للوحة الصدارة، ومسار التقييم، وواجهة الويب.
561
+ </p>
562
+ <span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
563
+ افتح GitHub <i data-lucide="arrow-left" class="w-3 h-3"></i>
564
+ </span>
565
+ </a>
566
  </div>
567
+ <p class="mt-5 text-sm text-slate-600 dark:text-slate-400">
568
+ لمشاركة الملاحظات، أو طلب إضافة معايير، أو الإبلاغ عن مشكلة، يُرجى فتح <a href="https://huggingface.co/spaces/qimma/leaderboard/discussions" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">نقاش هنا</a>.
569
  </p>
570
+ </section>
571
+
572
+ <section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
573
+ <div class="section-row flex items-center gap-3 mb-4">
574
+ <div class="p-2 bg-amber-100 dark:bg-amber-900/50 rounded-lg text-amber-600 dark:text-amber-400">
575
+ <i data-lucide="sparkles" class="w-6 h-6"></i>
576
+ </div>
577
+ <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">شكر وتقدير</h2>
 
 
 
578
  </div>
579
+ <p class="text-slate-600 dark:text-slate-300 leading-relaxed">يتم دعم QIMMA من <a href="https://www.tii.ae" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">معهد الابتكار التكنولوجي (TII)</a>، من خلال بنيته التحتية ودعمه المؤسسي.
 
580
  </p>
581
+ </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
582
  </div>
583
+
584
+ <div class="mt-12 border-t border-slate-200 dark:border-slate-700 pt-8 pb-8">
585
+ <h3 class="text-xl font-bold text-center text-slate-800 dark:text-slate-100 mb-6">الاستشهاد</h3>
586
+ <div class="max-w-4xl mx-auto relative group">
587
+ <div class="citation-button-wrap absolute top-3 right-3">
588
+ <button onclick="copyCitation()" class="p-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 text-slate-500 hover:text-indigo-600 dark:text-slate-400 dark:hover:text-indigo-400 shadow-sm transition-all" title="نسخ إلى الحافظة">
589
+ <i id="copyIcon" data-lucide="copy" class="w-4 h-4"></i>
590
+ </button>
591
+ </div>
592
+ <pre id="citationCode" class="bg-slate-100 dark:bg-slate-900/50 p-6 rounded-xl border border-slate-200 dark:border-slate-700 overflow-x-auto text-xs sm:text-sm text-slate-600 dark:text-slate-400 font-mono leading-relaxed">@misc{alqadi2026arabicbenchmarksreliableqimmas,
593
+ title={Are Arabic Benchmarks Reliable? QIMMA's Quality-First Approach to LLM Evaluation},
 
 
 
 
 
 
 
 
 
 
594
  author={Leen AlQadi and Ahmed Alzubaidi and Mohammed Alyafeai and Hamza Alobeidli and Maitha Alhammadi and Shaikha Alsuwaidi and Omar Alkaabi and Basma El Amel Boussaha and Hakim Hacid},
595
  year={2026},
596
  eprint={2604.03395},
597
  archivePrefix={arXiv},
598
  primaryClass={cs.CL},
599
+ url={https://arxiv.org/abs/2604.03395},
600
  }</pre>
601
+ </div>
602
+ </div>
603
+ `
604
+ };
605
 
606
+ function applyAboutTranslations(lang) {
607
+ const page = document.getElementById('aboutPage');
608
+ if (!page) return;
609
+ page.innerHTML = ABOUT_PAGE_CONTENT[lang] || ABOUT_PAGE_CONTENT.en;
610
+ document.title = lang === 'ar' ? 'حول QIMMA' : 'About QIMMA';
611
+ if (window.lucide) lucide.createIcons();
612
  }
613
 
 
614
  function copyCitation() {
615
+ const text = document.getElementById('citationCode')?.innerText;
616
+ if (!text) return;
617
  navigator.clipboard.writeText(text).then(() => {
618
  const icon = document.getElementById('copyIcon');
619
+ if (!icon) return;
620
  icon.setAttribute('data-lucide', 'check');
621
  icon.classList.add('text-emerald-500');
622
+ if (window.lucide) lucide.createIcons();
623
 
624
  setTimeout(() => {
625
  icon.setAttribute('data-lucide', 'copy');
626
  icon.classList.remove('text-emerald-500');
627
+ if (window.lucide) lucide.createIcons();
628
  }, 2000);
629
  });
630
  }
631
+
632
+ applyAboutTranslations(window.getCurrentLanguage ? window.getCurrentLanguage() : 'en');
633
+ if (window.registerLanguageListener) {
634
+ window.registerLanguageListener(applyAboutTranslations);
635
+ }
636
  </script>
637
  </body>
638
 
639
+ </html>
frontend/header.html CHANGED
@@ -9,21 +9,32 @@
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">
18
- <div>
19
  <div class="text-center mb-10 pt-8">
20
  <h1 class="text-4xl font-extrabold tracking-tight sm:text-6xl mb-4 inline-flex items-center justify-center gap-4">
21
  <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-violet-400 dark:from-purple-400 dark:to-violet-300">
22
  QIMMA ⛰ قمة
23
- <span class="block text-center">Leaderboard</span>
24
  </span>
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">
@@ -241,7 +252,57 @@
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();
@@ -254,4 +315,4 @@
254
  </script>
255
 
256
  </body>
257
- </html>
 
9
  <script>
10
  tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#131825', darkcard: '#1c2235' } } } }
11
  </script>
12
+ </head>
13
+ <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100">
14
  <style>
15
  :root { --card-bg: #ffffff; }
16
  .dark { --card-bg: #161828; }
17
+
18
+ html[dir="rtl"] #headerSection {
19
+ direction: rtl;
20
+ text-align: right;
21
+ }
22
+
23
+ html[dir="rtl"] #headerSection .stat-card {
24
+ flex-direction: row-reverse;
25
+ text-align: right;
26
+ }
27
  </style>
28
+
29
+ <div id="headerSection">
 
30
  <div class="text-center mb-10 pt-8">
31
  <h1 class="text-4xl font-extrabold tracking-tight sm:text-6xl mb-4 inline-flex items-center justify-center gap-4">
32
  <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-violet-400 dark:from-purple-400 dark:to-violet-300">
33
  QIMMA ⛰ قمة
34
+ <span class="block text-center" id="headerHeroLabel">Leaderboard</span>
35
  </span>
36
  </h1>
37
+ <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto" id="headerHeroSubtitle">A quality-first Arabic LLM Leaderboard that evaluates and compares the performance of Arabic Large Language Models.</p>
38
  </div>
39
 
40
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
 
252
  // Re-apply dark mode after DOM update
253
  applyDarkModeCards();
254
  }
255
+
256
+ const HEADER_TRANSLATIONS = {
257
+ ar: {
258
+ hero_label: "لوحة الصدارة",
259
+ hero_subtitle: "لوحة صدارة عربية للنماذج اللغوية الكبرى تركّز على الجودة، وتقيّم وتقارن أداء النماذج اللغوية العربية.",
260
+ podium: "الصدارة",
261
+ total_models: "إجمالي النماذج",
262
+ eval_status: "حالة التقييم",
263
+ done: "مكتمل",
264
+ failed: "فشل",
265
+ running: "قيد التنفيذ",
266
+ queue: "الانتظار",
267
+ benchmarks: "المعايير",
268
+ },
269
+ en: {
270
+ hero_label: "Leaderboard",
271
+ hero_subtitle: "A quality-first Arabic LLM Leaderboard that evaluates and compares the performance of Arabic Large Language Models.",
272
+ podium: "Podium",
273
+ total_models: "Total Models",
274
+ eval_status: "Eval Status",
275
+ done: "Done",
276
+ failed: "Failed",
277
+ running: "Running",
278
+ queue: "Queue",
279
+ benchmarks: "Benchmarks",
280
+ }
281
+ };
282
+
283
+ function applyHeaderTranslations(lang) {
284
+ const t = HEADER_TRANSLATIONS[lang] || HEADER_TRANSLATIONS.en;
285
+ const setTxt = (id, val) => {
286
+ const el = document.getElementById(id);
287
+ if (el) el.innerText = val;
288
+ };
289
+ setTxt('headerHeroLabel', t.hero_label);
290
+ setTxt('headerHeroSubtitle', t.hero_subtitle);
291
+ setTxt('podium-label', t.podium);
292
+ setTxt('label-total-models', t.total_models);
293
+ setTxt('label-eval-status', t.eval_status);
294
+ setTxt('sublabel-done', t.done);
295
+ setTxt('sublabel-failed', t.failed);
296
+ setTxt('sublabel-running', t.running);
297
+ setTxt('sublabel-queue', t.queue);
298
+ setTxt('label-benchmarks', t.benchmarks);
299
+ }
300
 
301
+ applyHeaderTranslations(window.getCurrentLanguage ? window.getCurrentLanguage() : 'en');
302
+ if (window.registerLanguageListener) {
303
+ window.registerLanguageListener(applyHeaderTranslations);
304
+ }
305
+
306
  window.initHeader = async function () { renderHeaderTableStats(allData); };
307
  window.initHeader();
308
  if (window.lucide) lucide.createIcons();
 
315
  </script>
316
 
317
  </body>
318
+ </html>
frontend/index.html CHANGED
@@ -12,11 +12,30 @@
12
  <script>
13
  tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a' }, animation: { 'fade-in': 'fadeIn 0.5s ease-out' }, keyframes: { fadeIn: { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } } } } } }
14
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  </head>
16
 
17
  <body class="bg-slate-50 text-slate-800 font-sans transition-colors duration-300 dark:bg-darkbg dark:text-slate-100">
18
 
19
- <div class="absolute top-6 right-6 z-50">
 
 
 
 
 
20
  <button onclick="toggleDarkMode()"
21
  class="p-2 rounded-full bg-white text-slate-600 shadow-md hover:bg-slate-100 dark:bg-slate-800 dark:text-yellow-400 dark:hover:bg-slate-700 transition-all">
22
  <i data-lucide="moon" id="themeIcon" class="h-5 w-5"></i>
@@ -29,17 +48,17 @@
29
  class="w-10 h-10 animate-spin text-indigo-600"></i></div>
30
  </div>
31
 
32
- <div class="border-b border-slate-200 dark:border-slate-700 mb-6">
33
- <nav class="-mb-px flex space-x-8 justify-center">
34
  <button onclick="switchTab('about')" id="tab-btn-about"
35
  class="border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors">ⓘ
36
- About</button>
37
  <button onclick="switchTab('leaderboard')" id="tab-btn-leaderboard"
38
  class="border-indigo-500 text-indigo-600 dark:text-indigo-400 dark:border-indigo-400 border-b-2 py-4 px-1 font-medium text-sm transition-colors">🏅
39
- LLM Leaderboard</button>
40
  <button onclick="switchTab('submit')" id="tab-btn-submit"
41
  class="border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors">🚀
42
- Submit Model</button>
43
  </nav>
44
  </div>
45
 
@@ -52,8 +71,7 @@
52
  <div id="tab-content-about" class="hidden max-w-[97%] mx-auto animate-fade-in"></div>
53
 
54
  <div class="mt-16 text-center border-t border-slate-200 dark:border-slate-700 pt-8">
55
- <p class="text-slate-500 dark:text-slate-400 text-sm">&copy; 2026 QIMMA Leaderboard. Built with ❤️ for the
56
- Arabic AI Community.</p>
57
  </div>
58
  </div>
59
 
@@ -68,11 +86,70 @@
68
  window.EVAL_COLUMNS = JSON.parse(document.getElementById('eval-columns-data').textContent);
69
  window.BENCHMARK_METADATA = JSON.parse(document.getElementById('benchmark-metadata-data').textContent);
70
  const $ = s => document.querySelector(s);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
 
72
  const BASE_URL = window.self !== window.top
73
  ? 'https://qimma-leaderboard.hf.space'
74
  : '';
75
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  function toggleDarkMode() {
77
  const isDark = document.documentElement.classList.toggle('dark');
78
  localStorage.theme = isDark ? 'dark' : 'light';
@@ -96,7 +173,8 @@
96
  loadTabContent(BASE_URL + '/submit.html', '#tab-content-submit');
97
  } catch (err) {
98
  console.error(err);
99
- $('#tab-content-leaderboard').innerHTML = `<div class="p-8 text-center text-rose-500">Error loading leaderboard.</div>`;
 
100
  }
101
  }
102
  async function loadTabContent(url, selector) {
@@ -118,6 +196,7 @@
118
  newScript.textContent = oldScript.textContent;
119
  document.body.appendChild(newScript);
120
  });
 
121
  } catch (err) { console.error(`Failed to load ${url}:`, err); }
122
  }
123
  function switchTab(tab) {
@@ -128,9 +207,10 @@
128
  : "border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors";
129
  });
130
  }
 
131
  init();
132
  lucide.createIcons();
133
  </script>
134
  </body>
135
 
136
- </html>
 
12
  <script>
13
  tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a' }, animation: { 'fade-in': 'fadeIn 0.5s ease-out' }, keyframes: { fadeIn: { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } } } } } }
14
  </script>
15
+ <style>
16
+ html[dir="rtl"] body {
17
+ text-align: right;
18
+ }
19
+
20
+ html[dir="rtl"] #appControls {
21
+ left: 1.5rem;
22
+ right: auto;
23
+ }
24
+
25
+ html[dir="rtl"] #appTabs nav {
26
+ direction: rtl;
27
+ }
28
+ </style>
29
  </head>
30
 
31
  <body class="bg-slate-50 text-slate-800 font-sans transition-colors duration-300 dark:bg-darkbg dark:text-slate-100">
32
 
33
+ <div id="appControls" class="absolute top-6 right-6 z-50 flex items-center gap-3">
34
+ <button onclick="toggleLanguage()"
35
+ class="flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-slate-600 shadow-md hover:bg-slate-100 dark:bg-slate-800 dark:text-sky-300 dark:hover:bg-slate-700 transition-all">
36
+ <i data-lucide="languages" class="h-4 w-4"></i>
37
+ <span id="languageToggleLabel">AR</span>
38
+ </button>
39
  <button onclick="toggleDarkMode()"
40
  class="p-2 rounded-full bg-white text-slate-600 shadow-md hover:bg-slate-100 dark:bg-slate-800 dark:text-yellow-400 dark:hover:bg-slate-700 transition-all">
41
  <i data-lucide="moon" id="themeIcon" class="h-5 w-5"></i>
 
48
  class="w-10 h-10 animate-spin text-indigo-600"></i></div>
49
  </div>
50
 
51
+ <div id="appTabs" class="border-b border-slate-200 dark:border-slate-700 mb-6">
52
+ <nav class="-mb-px flex gap-8 justify-center">
53
  <button onclick="switchTab('about')" id="tab-btn-about"
54
  class="border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors">ⓘ
55
+ <span id="tabLabelAbout">About</span></button>
56
  <button onclick="switchTab('leaderboard')" id="tab-btn-leaderboard"
57
  class="border-indigo-500 text-indigo-600 dark:text-indigo-400 dark:border-indigo-400 border-b-2 py-4 px-1 font-medium text-sm transition-colors">🏅
58
+ <span id="tabLabelLeaderboard">Leaderboard</span></button>
59
  <button onclick="switchTab('submit')" id="tab-btn-submit"
60
  class="border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors">🚀
61
+ <span id="tabLabelSubmit">Submit Model</span></button>
62
  </nav>
63
  </div>
64
 
 
71
  <div id="tab-content-about" class="hidden max-w-[97%] mx-auto animate-fade-in"></div>
72
 
73
  <div class="mt-16 text-center border-t border-slate-200 dark:border-slate-700 pt-8">
74
+ <p class="text-slate-500 dark:text-slate-400 text-sm" id="footerText">&copy; 2026 QIMMA. Built for the Arabic AI community.</p>
 
75
  </div>
76
  </div>
77
 
 
86
  window.EVAL_COLUMNS = JSON.parse(document.getElementById('eval-columns-data').textContent);
87
  window.BENCHMARK_METADATA = JSON.parse(document.getElementById('benchmark-metadata-data').textContent);
88
  const $ = s => document.querySelector(s);
89
+ const SHELL_TRANSLATIONS = {
90
+ ar: {
91
+ title: "QIMMA - لوحة صدارة عربية مفتوحة لتقييم النماذج اللغوية",
92
+ language_toggle: "EN",
93
+ tab_about: "حول",
94
+ tab_leaderboard: "لوحة الصدارة",
95
+ tab_submit: "تسليم نموذج",
96
+ footer: "© 2026 QIMMA. صُمّم هذا المشروع لخدمة مجتمع الذكاء الاصطناعي العربي.",
97
+ load_error: "تعذّر تحميل لوحة الصدارة.",
98
+ },
99
+ en: {
100
+ title: "QIMMA - Open Arabic LLM Leaderboard",
101
+ language_toggle: "AR",
102
+ tab_about: "About",
103
+ tab_leaderboard: "Leaderboard",
104
+ tab_submit: "Submit Model",
105
+ footer: "© 2026 QIMMA. Built for the Arabic AI community.",
106
+ load_error: "Error loading leaderboard.",
107
+ }
108
+ };
109
+ let currentLanguage = localStorage.getItem('language') || 'en';
110
+ const languageListeners = [];
111
 
112
  const BASE_URL = window.self !== window.top
113
  ? 'https://qimma-leaderboard.hf.space'
114
  : '';
115
 
116
+ window.getCurrentLanguage = () => currentLanguage;
117
+ window.registerLanguageListener = (fn) => {
118
+ if (typeof fn === 'function') languageListeners.push(fn);
119
+ };
120
+ window.notifyLanguageChanged = () => {
121
+ languageListeners.forEach(fn => {
122
+ try { fn(currentLanguage); } catch (err) { console.error('language listener failed', err); }
123
+ });
124
+ };
125
+
126
+ function applyShellTranslations() {
127
+ const t = SHELL_TRANSLATIONS[currentLanguage] || SHELL_TRANSLATIONS.en;
128
+ document.title = t.title;
129
+ document.documentElement.lang = currentLanguage === 'ar' ? 'ar' : 'en';
130
+ document.documentElement.dir = currentLanguage === 'ar' ? 'rtl' : 'ltr';
131
+ document.body?.classList.toggle('rtl-ui', currentLanguage === 'ar');
132
+ document.getElementById('languageToggleLabel').innerText = t.language_toggle;
133
+ document.getElementById('tabLabelAbout').innerText = t.tab_about;
134
+ document.getElementById('tabLabelLeaderboard').innerText = t.tab_leaderboard;
135
+ document.getElementById('tabLabelSubmit').innerText = t.tab_submit;
136
+ document.getElementById('footerText').innerText = t.footer;
137
+ }
138
+
139
+ function setLanguage(lang) {
140
+ currentLanguage = lang === 'en' ? 'en' : 'ar';
141
+ localStorage.setItem('language', currentLanguage);
142
+ applyShellTranslations();
143
+ window.notifyLanguageChanged();
144
+ }
145
+
146
+ function toggleLanguage() {
147
+ setLanguage(currentLanguage === 'ar' ? 'en' : 'ar');
148
+ }
149
+
150
+ window.toggleLanguage = toggleLanguage;
151
+ window.setLanguage = setLanguage;
152
+
153
  function toggleDarkMode() {
154
  const isDark = document.documentElement.classList.toggle('dark');
155
  localStorage.theme = isDark ? 'dark' : 'light';
 
173
  loadTabContent(BASE_URL + '/submit.html', '#tab-content-submit');
174
  } catch (err) {
175
  console.error(err);
176
+ const t = SHELL_TRANSLATIONS[currentLanguage] || SHELL_TRANSLATIONS.en;
177
+ $('#tab-content-leaderboard').innerHTML = `<div class="p-8 text-center text-rose-500">${t.load_error}</div>`;
178
  }
179
  }
180
  async function loadTabContent(url, selector) {
 
196
  newScript.textContent = oldScript.textContent;
197
  document.body.appendChild(newScript);
198
  });
199
+ window.notifyLanguageChanged();
200
  } catch (err) { console.error(`Failed to load ${url}:`, err); }
201
  }
202
  function switchTab(tab) {
 
207
  : "border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 border-b-2 py-4 px-1 font-medium text-sm transition-colors";
208
  });
209
  }
210
+ applyShellTranslations();
211
  init();
212
  lucide.createIcons();
213
  </script>
214
  </body>
215
 
216
+ </html>
frontend/leaderboard.html CHANGED
@@ -17,6 +17,76 @@
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;
@@ -143,6 +213,13 @@
143
  z-index: 32 !important;
144
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
145
  }
 
 
 
 
 
 
 
146
 
147
  #table-wrapper .gridjs-th.sticky-model-col,
148
  #table-wrapper .gridjs-td.sticky-model-col {
@@ -151,6 +228,13 @@
151
  z-index: 31 !important;
152
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
153
  }
 
 
 
 
 
 
 
154
 
155
  #table-wrapper .gridjs-th.sticky-rank-col,
156
  #table-wrapper .gridjs-th.sticky-model-col {
@@ -182,12 +266,22 @@
182
  z-index: 46 !important;
183
  background: #f1f5f9 !important;
184
  }
 
 
 
 
 
185
 
186
  #table-wrapper table.gridjs-table tbody td:nth-child(1) {
187
  position: sticky !important;
188
  left: 0 !important;
189
  z-index: 30 !important;
190
  }
 
 
 
 
 
191
 
192
  #table-wrapper table.gridjs-table thead th:nth-child(2) {
193
  position: sticky !important;
@@ -196,12 +290,22 @@
196
  z-index: 45 !important;
197
  background: #f1f5f9 !important;
198
  }
 
 
 
 
 
199
 
200
  #table-wrapper table.gridjs-table tbody td:nth-child(2) {
201
  position: sticky !important;
202
  left: var(--sticky-model-left, 100px) !important;
203
  z-index: 29 !important;
204
  }
 
 
 
 
 
205
 
206
  .dark #table-wrapper table.gridjs-table thead th:nth-child(1),
207
  .dark #table-wrapper table.gridjs-table thead th:nth-child(2) {
@@ -216,6 +320,12 @@
216
  background: #ffffff !important;
217
  font-weight: 700 !important;
218
  }
 
 
 
 
 
 
219
 
220
  #table-wrapper .gridjs-td.avg-col-header * {
221
  font-weight: 700 !important;
@@ -697,19 +807,19 @@
697
  <!-- Header & Search -->
698
  <div class="flex justify-center mb-6 pt-10">
699
  <div class="relative w-full sm:w-[75%]">
700
- <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
701
  <i data-lucide="search" class="h-5 w-5 text-slate-400"></i>
702
  </div>
703
  <input type="text" id="searchInput"
704
  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"
705
- placeholder="Search models (e.g. Falcon, Qwen)...">
706
- <div class="absolute inset-y-0 right-0 flex items-center pr-2">
707
  <button onclick="window.toggleFilterPanel()" id="filterBtn"
708
  class="flex items-center gap-2 px-6 py-2 text-sm font-semibold rounded-full
709
  bg-slate-100 hover:bg-slate-200
710
  dark:bg-transparent dark:hover:bg-slate-700
711
  text-indigo-600 dark:text-indigo-400"style="color:#4F46E5;">
712
- <i data-lucide="sliders-horizontal" class="h-4 w-4"></i> Filters
713
  </button>
714
  </div>
715
  </div>
@@ -720,9 +830,9 @@
720
  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">
721
  <!-- Filter panel header -->
722
  <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
723
- <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Filters</span>
724
  <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">
725
- <i data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset all
726
  </button>
727
  </div>
728
 
@@ -733,7 +843,7 @@
733
 
734
  <!-- Model Type -->
735
  <div>
736
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Model Type</p>
737
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
738
  <div class="flex flex-wrap gap-1.5" id="typeFilterContainer"></div>
739
  </div>
@@ -741,10 +851,10 @@
741
 
742
  <!-- Model Size -->
743
  <div>
744
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Model Size</p>
745
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
746
  <div class="flex justify-between items-center mb-3">
747
- <span class="text-xs font-bold text-slate-400">Parameters</span>
748
  <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>
749
  </div>
750
  <div class="slider-container">
@@ -762,7 +872,7 @@
762
 
763
  <!-- Organization -->
764
  <div>
765
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Organization</p>
766
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
767
  <div class="flex flex-wrap gap-1.5" id="orgFilterContainer"></div>
768
  </div>
@@ -776,22 +886,22 @@
776
  <!-- Benchmark Filters -->
777
  <div>
778
  <div class="flex items-center gap-1.5 mb-2">
779
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400">Benchmark Filters</p>
780
  <div class="relative tooltip-trigger group cursor-help">
781
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
782
  <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">
783
  <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>
784
- 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.
785
  </div>
786
  </div>
787
  </div>
788
  <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">
789
  <div>
790
- <h4 class="text-xs font-bold text-slate-400 mb-2">Task Type</h4>
791
  <div id="taskTypeFilterBtns" class="flex flex-wrap gap-1.5"></div>
792
  </div>
793
  <div>
794
- <h4 class="text-xs font-bold text-slate-400 mb-2">Domain</h4>
795
  <div id="domainFilterBtns" class="flex flex-wrap gap-1.5"></div>
796
  </div>
797
  </div>
@@ -799,7 +909,7 @@
799
 
800
  <!-- License -->
801
  <div>
802
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">License</p>
803
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
804
  <div class="flex flex-wrap gap-1.5" id="licenseFilterContainer"></div>
805
  </div>
@@ -816,7 +926,7 @@
816
  <!-- Table Options Button -->
817
  <button onclick="window.toggleTableOps(event)" id="tableOpsTrigger"
818
  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">
819
- <i data-lucide="settings-2" id="tableOpsIcon" class="h-5 w-5"></i> <span>Table Options</span>
820
  </button>
821
  <!-- Table Options Menu -->
822
  <div id="tableOpsMenu"
@@ -824,10 +934,10 @@
824
 
825
  <!-- Header with Reset -->
826
  <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
827
- <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Table Options</span>
828
  <button onclick="window.resetTableOps()"
829
  class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
830
- data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
831
  </div>
832
 
833
  <!-- Group 1: View Options -->
@@ -836,42 +946,42 @@
836
  <!-- Section 1: Ranking Mode -->
837
  <div class="mb-4">
838
  <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
839
- Ranking Mode
840
  <div class="relative tooltip-trigger group cursor-help">
841
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
842
  <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">
843
  <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>
844
- <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>
845
- <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>
846
  </div>
847
  </div>
848
  </h4>
849
  <div class="flex flex-wrap gap-1.5">
850
  <button onclick="window.setRankMode('static')" id="rankBtnStatic"
851
- class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300">Global Rank</button>
852
  <button onclick="window.setRankMode('dynamic')" id="rankBtnDynamic"
853
- 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>
854
  </div>
855
  </div>
856
 
857
  <!-- Section 2: Avg Score Calc -->
858
  <div>
859
  <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
860
- Average Score Calculation
861
  <div class="relative tooltip-trigger group cursor-help">
862
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
863
  <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">
864
  <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>
865
- <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>
866
- <p><span class="font-bold text-slate-600 dark:text-slate-300">Filtered Average:</span> recalculates using only the currently visible evaluation columns.</p>
867
  </div>
868
  </div>
869
  </h4>
870
  <div class="flex flex-wrap gap-1.5">
871
  <button onclick="window.setAvgMode('all')" id="avgBtnAll"
872
- class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300">Global Average</button>
873
  <button onclick="window.setAvgMode('visible')" id="avgBtnVisible"
874
- class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-white border-slate-200 text-slate-500 hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600">Filtered Average</button>
875
  </div>
876
  </div>
877
  </div>
@@ -881,21 +991,21 @@
881
  <!-- Col Visibility -->
882
  <button onclick="window.toggleColMenu(event)" id="colMenuTrigger"
883
  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">
884
- <i data-lucide="book-open" id="colMenuIcon" class="h-5 w-5"></i> <span>Column Visibility</span>
885
  </button>
886
  <div id="colMenu"
887
  class="hidden absolute top-10 right-0 z-50 w-80 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 max-h-[80vh] overflow-y-auto">
888
  <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
889
- <span class="text-sm font-bold text-slate-700 dark:text-slate-200">Column Visibility</span>
890
  <button onclick="window.resetColumns()"
891
  class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
892
- data-lucide="rotate-ccw" class="w-3 h-3"></i> Reset</button>
893
  </div>
894
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Benchmarks</p>
895
  <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">
896
  <div id="colListScores" class="flex flex-wrap gap-2"></div>
897
  </div>
898
- <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">Model Details</p>
899
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
900
  <div id="colListDetails" class="flex flex-wrap gap-2"></div>
901
  </div>
@@ -910,8 +1020,8 @@
910
  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">
911
  <div class="flex items-center gap-3">
912
  <div class="flex-1 min-w-0">
913
- <div class="font-semibold text-indigo-700 dark:text-indigo-300">Scores are clickable</div>
914
- <div class="mt-1">Click any benchmark score cell to view detailed samples.</div>
915
  </div>
916
  <div class="score-click-demo hidden sm:block" aria-hidden="true">
917
  <div class="score-click-demo-screen">
@@ -953,7 +1063,7 @@
953
  class="bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
954
  <span
955
  class="text-xs font-bold uppercase text-amber-600 dark:text-amber-400 mb-1 flex items-center gap-1"><i
956
- data-lucide="trophy" class="w-3 h-3"></i> Rank</span>
957
  <span id="modalRank" class="text-3xl font-black text-amber-700 dark:text-amber-300">#--</span>
958
  </div>
959
  <!-- Block 2: Avg -->
@@ -961,7 +1071,7 @@
961
  class="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
962
  <span
963
  class="text-xs font-bold uppercase text-indigo-600 dark:text-indigo-400 mb-1 flex items-center gap-1"><i
964
- data-lucide="bar-chart-2" class="w-3 h-3"></i> Average</span>
965
  <span id="modalAvg" class="text-3xl font-black text-indigo-700 dark:text-indigo-300">--</span>
966
  </div>
967
  <!-- Block 3: Size -->
@@ -969,7 +1079,7 @@
969
  class="bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4 rounded-xl flex flex-col items-center justify-center text-center">
970
  <span
971
  class="text-xs font-bold uppercase text-slate-500 dark:text-slate-400 mb-1 flex items-center gap-1"><i
972
- data-lucide="box" class="w-3 h-3"></i> Size</span>
973
  <span id="modalSize" class="text-2xl font-bold text-slate-700 dark:text-slate-200">--</span>
974
  </div>
975
  <!-- Block 4: Hub -->
@@ -977,7 +1087,7 @@
977
  class="bg-pink-50 dark:bg-pink-900/20 border border-pink-100 dark:border-pink-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
978
  <span
979
  class="text-xs font-bold uppercase text-pink-600 dark:text-pink-400 mb-1 flex items-center gap-1"><i
980
- data-lucide="heart" class="w-3 h-3"></i> Hub Likes</span>
981
  <span id="modalLikes" class="text-2xl font-bold text-pink-700 dark:text-pink-300">--</span>
982
  </div>
983
  </div>
@@ -986,7 +1096,7 @@
986
  <div
987
  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">
988
  <span class="flex items-center gap-1" title="License"><i data-lucide="scale"
989
- class="w-3.5 h-3.5"></i> <span id="modalLicense">--</span></span>
990
  <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
991
 
992
 
@@ -999,17 +1109,17 @@
999
  <a id="modalLinkHF" href="#" target="_blank"
1000
  class="inline-flex items-center justify-center px-5 py-2.5 rounded-lg bg-slate-900 text-white hover:bg-slate-800 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100 font-medium transition-colors">
1001
  <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
1002
- class="w-5 h-5 mr-2" alt="HF"> View on Hugging Face
1003
  </a>
1004
  <a id="modalLinkDetails" href="#" target="_blank"
1005
  class="inline-flex items-center justify-center px-5 py-2.5 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 font-medium transition-colors">
1006
- <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Evaluation Details
1007
  </a>
1008
  </div>
1009
 
1010
  <!-- Chart Area -->
1011
  <div>
1012
- <h4 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-wider">Evaluation Results</h4>
1013
  <div id="modalChart" class="space-y-3">
1014
  <!-- Bars injected here -->
1015
  </div>
@@ -1020,7 +1130,7 @@
1020
  <div
1021
  class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
1022
  <button onclick="window.closeModelDetails()"
1023
- class="text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200">Close Details</button>
1024
  </div>
1025
  </div>
1026
  </div>
@@ -1067,11 +1177,11 @@
1067
  </div>
1068
  </div>
1069
  </div>
1070
-
1071
  <div
1072
  class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
1073
  <button onclick="window.closeBenchmarkDetails()"
1074
- class="text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200">Close Details</button>
1075
  </div>
1076
  </div>
1077
  </div>
@@ -1086,9 +1196,9 @@
1086
  return Number.isFinite(n) ? n : null;
1087
  };
1088
  const asUnknown = (v) => {
1089
- if (v === undefined || v === null) return "Unknown";
1090
  const s = String(v).trim();
1091
- return s ? s : "Unknown";
1092
  };
1093
  const tryFormatJsonString = (value) => {
1094
  const s = String(value ?? "").trim();
@@ -1105,14 +1215,14 @@
1105
  }
1106
  };
1107
  const formatDetailValue = (v, emptyAsUnknown = true) => {
1108
- if (v === undefined || v === null) return emptyAsUnknown ? "Unknown" : "";
1109
  if (typeof v === "string") {
1110
  const s = v.trim();
1111
- if (!s) return emptyAsUnknown ? "Unknown" : "";
1112
  return tryFormatJsonString(s) || s;
1113
  }
1114
  if (Array.isArray(v)) {
1115
- if (!v.length) return emptyAsUnknown ? "Unknown" : "";
1116
  const isPrimitive = v.every(item =>
1117
  item === null || ["string", "number", "boolean"].includes(typeof item)
1118
  );
@@ -1120,22 +1230,22 @@
1120
  try {
1121
  return JSON.stringify(v, null, 2);
1122
  } catch {
1123
- return emptyAsUnknown ? "Unknown" : "";
1124
  }
1125
  }
1126
  if (typeof v === "object") {
1127
  try {
1128
  return JSON.stringify(v, null, 2);
1129
  } catch {
1130
- return emptyAsUnknown ? "Unknown" : "";
1131
  }
1132
  }
1133
  const s = String(v).trim();
1134
- return s ? s : (emptyAsUnknown ? "Unknown" : "");
1135
  };
1136
  const prettyIntOrUnknown = (v) => {
1137
  const n = toNumber(v);
1138
- return n === null ? "Unknown" : String(Math.floor(n));
1139
  };
1140
  const escapeHtml = (value) => String(value ?? "")
1141
  .replace(/&/g, "&amp;")
@@ -1195,7 +1305,7 @@
1195
  <div>
1196
  <div id="${idBase}-short" class="${contentClass}">${renderDetailText(short, isJson)}</div>
1197
  <div id="${idBase}-full" class="hidden ${contentClass}">${renderDetailText(raw, isJson)}</div>
1198
- <button type="button" onclick="window.toggleExpandText('${idBase}', this)" class="mt-2 inline-flex items-center gap-1 px-2 py-1 rounded-md border border-indigo-300 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 text-xs font-bold text-indigo-700 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors">Expand</button>
1199
  </div>
1200
  `;
1201
  };
@@ -1203,6 +1313,175 @@
1203
  let lbData = [], grid, maxMeta = 100, minMeta = 0, tableColumns = [];
1204
  let currentSort = { colId: null, dir: 'none' };
1205
  const SCORE_HINT_KEY = "score_click_hint_seen_v1";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1206
 
1207
  // New State
1208
  let tableOptions = {
@@ -1226,7 +1505,7 @@ taskTypes: [], // [] = All; otherwise selected subset
1226
  if (hasUnknownSize) minMeta = Math.min(0, minMeta);
1227
 
1228
  if (!lbData.length) {
1229
- $('#table-wrapper').innerHTML = "<div class='p-8 text-center text-slate-500'>No data loaded.</div>";
1230
  return;
1231
  }
1232
 
@@ -1373,9 +1652,11 @@ setupFilterPills();
1373
  if (!container) return;
1374
  const allActive = activeList.length === 0;
1375
  container.innerHTML = [
1376
- `<button onclick="window.${toggleFn}('all')" class="${pill(allActive)}">All</button>`,
1377
- ...items.map(item =>
1378
- `<button onclick="window.${toggleFn}('${item}')" class="${pill(activeList.includes(item))}">${item}</button>`)
 
 
1379
  ].join('');
1380
  };
1381
 
@@ -1465,7 +1746,7 @@ window.toggleExpandText = function (idBase, btn) {
1465
  const expanding = fullEl.classList.contains('hidden');
1466
  shortEl.classList.toggle('hidden', expanding);
1467
  fullEl.classList.toggle('hidden', !expanding);
1468
- btn.innerText = expanding ? 'Collapse' : 'Expand';
1469
  };
1470
 
1471
  // --- BENCHMARK DETAILS MODAL ---
@@ -1485,13 +1766,13 @@ window.toggleExpandText = function (idBase, btn) {
1485
 
1486
  const renderBenchmarkHeader = (showSubtaskColumn) => {
1487
  $('#benchmarkHeader').innerHTML = showSubtaskColumn
1488
- ? `<div class="col-span-2">Subtask</div>
1489
- <div class="col-span-6">Prompt / Output</div>
1490
- <div class="col-span-2">Gold</div>
1491
- <div class="col-span-2">Predicted</div>`
1492
- : `<div class="col-span-8">Prompt / Output</div>
1493
- <div class="col-span-2">Gold</div>
1494
- <div class="col-span-2">Predicted</div>`;
1495
  };
1496
 
1497
  const renderBenchmarkRows = (rows, startIdx, showSubtaskColumn, benchmark) => {
@@ -1502,15 +1783,15 @@ window.toggleExpandText = function (idBase, btn) {
1502
  ? `<div class="col-span-2 text-slate-600 dark:text-slate-300">${escapeHtml(r.subtask)}</div>`
1503
  : ``;
1504
  const rowId = `bd-row-${startIdx + idx}`;
1505
- let correctBadge = `<span class="text-slate-500 dark:text-slate-400 font-semibold">Unknown</span>`;
1506
  if (r.is_correct === true) {
1507
- correctBadge = `<span class="text-emerald-600 dark:text-emerald-400 font-semibold">Correct</span>`;
1508
  } else if (r.is_correct === false) {
1509
- correctBadge = `<span class="text-rose-600 dark:text-rose-400 font-semibold">Wrong</span>`;
1510
  } else if (r.metric !== null && r.metric !== undefined) {
1511
  const n = Number(r.metric);
1512
  const scoreText = Number.isFinite(n) ? n.toFixed(4) : escapeHtml(r.metric);
1513
- correctBadge = `<span class="text-sky-600 dark:text-sky-400 font-semibold">Score: ${scoreText}</span>`;
1514
  }
1515
  const prompt = (
1516
  isCodeEvalBenchmark
@@ -1521,8 +1802,8 @@ window.toggleExpandText = function (idBase, btn) {
1521
  const gold = formatDetailValue(r.gold_answer, !isCodeEvalBenchmark);
1522
  const predicted = formatDetailValue(r.predicted_answer);
1523
  const sampleMeta = [
1524
- r.question_id ? `id: ${escapeHtml(r.question_id)}` : null,
1525
- r.metric !== null && r.metric !== undefined ? `score: ${escapeHtml(r.metric)}` : null,
1526
  ].filter(Boolean).join(" | ");
1527
 
1528
  return `
@@ -1531,7 +1812,7 @@ window.toggleExpandText = function (idBase, btn) {
1531
  <div class="${promptColSpan} text-slate-700 dark:text-slate-200">
1532
  <div class="font-semibold text-slate-800 dark:text-slate-100">${expandableTextHtml(prompt, `${rowId}-prompt`)}</div>
1533
  <div class="mt-2 text-slate-500 dark:text-slate-400">
1534
- <span class="font-semibold">Output:</span>
1535
  ${expandableTextHtml(output, `${rowId}-output`)}
1536
  </div>
1537
  ${sampleMeta ? `<div class="mt-1 text-slate-400 dark:text-slate-500">${sampleMeta}</div>` : ``}
@@ -1555,12 +1836,12 @@ window.toggleExpandText = function (idBase, btn) {
1555
  const hasRows = total > 0 || loaded > 0;
1556
  footer.classList.toggle('hidden', !hasRows && !benchmarkDetailsState.loading);
1557
  status.innerText = benchmarkDetailsState.loading
1558
- ? `Loading... (${loaded}${total ? `/${total}` : ""})`
1559
- : `Showing ${loaded}${total ? ` of ${total}` : ""} samples`;
1560
 
1561
  btn.classList.toggle('hidden', !benchmarkDetailsState.hasMore);
1562
  btn.disabled = benchmarkDetailsState.loading;
1563
- btn.innerText = benchmarkDetailsState.loading ? "Loading..." : "Show More";
1564
  };
1565
 
1566
  const bindBenchmarkModalScroll = () => {
@@ -1628,8 +1909,8 @@ window.toggleExpandText = function (idBase, btn) {
1628
  ? subtasks.map(s => `
1629
  <div class="p-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/70">
1630
  <div class="text-xs text-slate-500 dark:text-slate-400">${escapeHtml(s.subtask)}</div>
1631
- <div class="text-sm font-bold text-slate-800 dark:text-slate-100 mt-1">${s.accuracy === null ? "Unknown" : `${s.accuracy}%`}</div>
1632
- <div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">${s.mode === "metric" ? `${s.scored} scored` : `${s.correct}/${s.scored} correct`}</div>
1633
  </div>
1634
  `).join("")
1635
  : "";
@@ -1637,7 +1918,7 @@ window.toggleExpandText = function (idBase, btn) {
1637
  }
1638
 
1639
  if (!subtasks.length && !rows.length && benchmarkDetailsState.totalRows === 0) {
1640
- $('#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>`;
1641
  $('#benchmarkRows').innerHTML = "";
1642
  benchmarkDetailsState.hasMore = false;
1643
  benchmarkDetailsState.nextCursor = null;
@@ -1665,7 +1946,7 @@ window.toggleExpandText = function (idBase, btn) {
1665
  } catch (err) {
1666
  if (requestId === benchmarkDetailsState.requestId) {
1667
  $('#benchmarkSummary').innerHTML = "";
1668
- $('#benchmarkRows').innerHTML = `<div class="p-6 text-sm text-rose-600 dark:text-rose-400">${escapeHtml(err.message || "Failed to load details")}</div>`;
1669
  benchmarkDetailsState.hasMore = false;
1670
  }
1671
  } finally {
@@ -1687,9 +1968,9 @@ window.toggleExpandText = function (idBase, btn) {
1687
  benchmarkDetailsState.totalRows = 0;
1688
  benchmarkDetailsState.loading = false;
1689
 
1690
- $('#benchmarkModalTitle').innerText = `${benchmark} Details — ${modelName}`;
1691
  $('#benchmarkSummary').innerHTML = "";
1692
- $('#benchmarkRows').innerHTML = `<div class="p-6 text-sm text-slate-500 dark:text-slate-400">Loading details...</div>`;
1693
  renderBenchmarkHeader(true);
1694
 
1695
  $('#benchmarkModal').classList.remove('hidden');
@@ -2143,14 +2424,14 @@ window.toggleExpandText = function (idBase, btn) {
2143
  if (key === 'MedArabiQ_MCQ' || key === 'MedArabiQ_QA') {
2144
  return { id: key, name: key, hidden: true, sort: false };
2145
  }
2146
- let name = isAvg ? key.toUpperCase() : key;
2147
  // MedArabiQ: show subset subtitle when a single task type is active
2148
  if (key === 'MedArabiQ') {
2149
  const at = tableOptions.taskTypes;
2150
  if (at.length === 1 && at[0] === 'MCQ')
2151
- name = `MedArabiQ<br><span style="font-size:9px;font-weight:400;line-height:1;opacity:0.85;">(MCQ subsets)</span>`;
2152
  else if (at.length === 1 && at[0] === 'QA')
2153
- name = `MedArabiQ<br><span style="font-size:9px;font-weight:400;line-height:1;opacity:0.85;">(QA subsets)</span>`;
2154
  }
2155
  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>`;
2156
  let cls = "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300";
@@ -2176,14 +2457,14 @@ window.toggleExpandText = function (idBase, btn) {
2176
  if (key === "Model Size") {
2177
  def.formatter = (c) => {
2178
  const n = toNumber(c);
2179
- const label = n === null ? "Unknown" : n < 1 ? `${Math.round(n * 1000)}M` : `${Math.round(n)}B`;
2180
  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>`);
2181
  };
2182
  }
2183
 
2184
  if (key === "License") {
2185
  def.formatter = (c) => {
2186
- const label = (c && c !== "Unknown") ? c : "Unknown";
2187
  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>`);
2188
  };
2189
  }
@@ -2193,7 +2474,7 @@ window.toggleExpandText = function (idBase, btn) {
2193
  def.formatter = (c, r) => {
2194
  const type = (typeIdx > -1 && r.cells[typeIdx]) ? r.cells[typeIdx].data : "";
2195
  const tMap = { "base": "🟢", "instruct": "🔶"};
2196
- const tIcon = tMap[type] || type;
2197
  const em = encodeURIComponent(String(c ?? ""));
2198
 
2199
  return gridjs.html(`
@@ -2218,7 +2499,7 @@ window.toggleExpandText = function (idBase, btn) {
2218
  if (!isScore || !modelName) return gridjs.html(bar);
2219
  const em = encodeURIComponent(modelName);
2220
  const eb = encodeURIComponent(benchmark);
2221
- 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>`);
2222
  };
2223
 
2224
  const renderRaw = (c, modelName, benchmark) => {
@@ -2227,7 +2508,7 @@ window.toggleExpandText = function (idBase, btn) {
2227
  if (!isScore || !modelName) return gridjs.html(raw);
2228
  const em = encodeURIComponent(modelName);
2229
  const eb = encodeURIComponent(benchmark);
2230
- 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>`);
2231
  };
2232
 
2233
  const shouldUseBar = true;
@@ -2308,8 +2589,11 @@ window.toggleExpandText = function (idBase, btn) {
2308
  if (!el) return;
2309
  const allActive = activeList.length === 0;
2310
  el.innerHTML = [
2311
- `<button onclick="window.${toggleFn}('__all__')" class="${allActive ? _btnActive : _btnInactive}">All</button>`,
2312
- ...vals.map(v => `<button onclick="window.${toggleFn}('${v}')" class="${activeList.includes(v) ? _btnActive : _btnInactive}">${v}</button>`)
 
 
 
2313
  ].join('');
2314
  };
2315
 
@@ -2363,7 +2647,7 @@ window.toggleExpandText = function (idBase, btn) {
2363
  $(el).innerHTML = '';
2364
  tableColumns.filter(c => c.group === grp && !["_link", "T", "Type", "Full Type", "Precision", "Hub ❤️", "Revision"].includes(c.id)).forEach(c => {
2365
  const b = document.createElement('button');
2366
- b.innerText = c.id.includes("Average") ? "Average" : (c.id === "Model Size Filter" ? "Params" : c.id);
2367
  b.className = `px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none ${!c.hidden ? "bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300" : "bg-white border-slate-200 text-slate-500 hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600"}`;
2368
  b.onclick = (e) => {
2369
  e.stopPropagation();
@@ -2377,6 +2661,20 @@ window.toggleExpandText = function (idBase, btn) {
2377
  };
2378
  addBtns('scores', '#colListScores'); addBtns('details', '#colListDetails');
2379
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2380
 
2381
  })();
2382
  </script>
 
17
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100 relative">
18
 
19
  <style>
20
+ html[dir="rtl"] {
21
+ direction: rtl;
22
+ text-align: right;
23
+ }
24
+
25
+ html[dir="rtl"] .leaderboard-search-icon {
26
+ left: auto;
27
+ right: 0;
28
+ padding-left: 0;
29
+ padding-right: 1rem;
30
+ }
31
+
32
+ html[dir="rtl"] .leaderboard-search-action {
33
+ left: 0;
34
+ right: auto;
35
+ padding-left: 0.5rem;
36
+ padding-right: 0;
37
+ }
38
+
39
+ html[dir="rtl"] #searchInput {
40
+ padding-left: 9rem;
41
+ padding-right: 2.75rem;
42
+ text-align: right;
43
+ }
44
+
45
+ html[dir="rtl"] #tableOpsMenu {
46
+ left: 10rem;
47
+ right: auto;
48
+ }
49
+
50
+ html[dir="rtl"] #colMenu {
51
+ left: 0;
52
+ right: auto;
53
+ }
54
+
55
+ html[dir="rtl"] #scoreClickToast {
56
+ left: 1.25rem;
57
+ right: auto;
58
+ }
59
+
60
+ html[dir="rtl"] .tooltip-content,
61
+ html[dir="rtl"] #modelModal,
62
+ html[dir="rtl"] #benchmarkModal,
63
+ html[dir="rtl"] #filterPanel {
64
+ text-align: right;
65
+ }
66
+
67
+ html[dir="rtl"] #modelModal .sticky,
68
+ html[dir="rtl"] #benchmarkModal .sticky {
69
+ flex-direction: row-reverse;
70
+ }
71
+
72
+ html[dir="rtl"] #modalTitle,
73
+ html[dir="rtl"] #benchmarkModalTitle {
74
+ padding-left: 1rem;
75
+ padding-right: 0;
76
+ text-align: right;
77
+ }
78
+
79
+ html[dir="rtl"] #table-wrapper,
80
+ html[dir="rtl"] .gridjs-container,
81
+ html[dir="rtl"] table.gridjs-table {
82
+ direction: rtl;
83
+ }
84
+
85
+ html[dir="rtl"] th.gridjs-th,
86
+ html[dir="rtl"] td.gridjs-td {
87
+ text-align: right;
88
+ }
89
+
90
  #table-outer {
91
  position: relative;
92
  --gradient-opacity: 0.07;
 
213
  z-index: 32 !important;
214
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
215
  }
216
+
217
+ html[dir="rtl"] #table-wrapper .gridjs-th.sticky-rank-col,
218
+ html[dir="rtl"] #table-wrapper .gridjs-td.sticky-rank-col {
219
+ left: auto !important;
220
+ right: 0 !important;
221
+ box-shadow: -1px 0 0 rgba(148, 163, 184, 0.25);
222
+ }
223
 
224
  #table-wrapper .gridjs-th.sticky-model-col,
225
  #table-wrapper .gridjs-td.sticky-model-col {
 
228
  z-index: 31 !important;
229
  box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
230
  }
231
+
232
+ html[dir="rtl"] #table-wrapper .gridjs-th.sticky-model-col,
233
+ html[dir="rtl"] #table-wrapper .gridjs-td.sticky-model-col {
234
+ left: auto !important;
235
+ right: var(--sticky-model-left, 100px) !important;
236
+ box-shadow: -1px 0 0 rgba(148, 163, 184, 0.25);
237
+ }
238
 
239
  #table-wrapper .gridjs-th.sticky-rank-col,
240
  #table-wrapper .gridjs-th.sticky-model-col {
 
266
  z-index: 46 !important;
267
  background: #f1f5f9 !important;
268
  }
269
+
270
+ html[dir="rtl"] #table-wrapper table.gridjs-table thead th:nth-child(1) {
271
+ left: auto !important;
272
+ right: 0 !important;
273
+ }
274
 
275
  #table-wrapper table.gridjs-table tbody td:nth-child(1) {
276
  position: sticky !important;
277
  left: 0 !important;
278
  z-index: 30 !important;
279
  }
280
+
281
+ html[dir="rtl"] #table-wrapper table.gridjs-table tbody td:nth-child(1) {
282
+ left: auto !important;
283
+ right: 0 !important;
284
+ }
285
 
286
  #table-wrapper table.gridjs-table thead th:nth-child(2) {
287
  position: sticky !important;
 
290
  z-index: 45 !important;
291
  background: #f1f5f9 !important;
292
  }
293
+
294
+ html[dir="rtl"] #table-wrapper table.gridjs-table thead th:nth-child(2) {
295
+ left: auto !important;
296
+ right: var(--sticky-model-left, 100px) !important;
297
+ }
298
 
299
  #table-wrapper table.gridjs-table tbody td:nth-child(2) {
300
  position: sticky !important;
301
  left: var(--sticky-model-left, 100px) !important;
302
  z-index: 29 !important;
303
  }
304
+
305
+ html[dir="rtl"] #table-wrapper table.gridjs-table tbody td:nth-child(2) {
306
+ left: auto !important;
307
+ right: var(--sticky-model-left, 100px) !important;
308
+ }
309
 
310
  .dark #table-wrapper table.gridjs-table thead th:nth-child(1),
311
  .dark #table-wrapper table.gridjs-table thead th:nth-child(2) {
 
320
  background: #ffffff !important;
321
  font-weight: 700 !important;
322
  }
323
+
324
+ html[dir="rtl"] #table-wrapper .gridjs-th.avg-col-header,
325
+ html[dir="rtl"] #table-wrapper .gridjs-td.avg-col-header {
326
+ left: auto !important;
327
+ right: var(--sticky-avg-left, 620px) !important;
328
+ }
329
 
330
  #table-wrapper .gridjs-td.avg-col-header * {
331
  font-weight: 700 !important;
 
807
  <!-- Header & Search -->
808
  <div class="flex justify-center mb-6 pt-10">
809
  <div class="relative w-full sm:w-[75%]">
810
+ <div class="leaderboard-search-icon absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
811
  <i data-lucide="search" class="h-5 w-5 text-slate-400"></i>
812
  </div>
813
  <input type="text" id="searchInput"
814
  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"
815
+ placeholder="ابحث عن نموذج (مثل Falcon أو Qwen)...">
816
+ <div class="leaderboard-search-action absolute inset-y-0 right-0 flex items-center pr-2">
817
  <button onclick="window.toggleFilterPanel()" id="filterBtn"
818
  class="flex items-center gap-2 px-6 py-2 text-sm font-semibold rounded-full
819
  bg-slate-100 hover:bg-slate-200
820
  dark:bg-transparent dark:hover:bg-slate-700
821
  text-indigo-600 dark:text-indigo-400"style="color:#4F46E5;">
822
+ <i data-lucide="sliders-horizontal" class="h-4 w-4"></i> <span id="filterBtnLabel">الفلاتر</span>
823
  </button>
824
  </div>
825
  </div>
 
830
  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">
831
  <!-- Filter panel header -->
832
  <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
833
+ <span id="filterPanelTitle" class="text-sm font-bold text-slate-700 dark:text-slate-200">الفلاتر</span>
834
  <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">
835
+ <i data-lucide="rotate-ccw" class="w-3 h-3"></i> <span id="resetFiltersLabel">إعادة التعيين</span>
836
  </button>
837
  </div>
838
 
 
843
 
844
  <!-- Model Type -->
845
  <div>
846
+ <p id="filterModelTypeLabel" class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">نوع النموذج</p>
847
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
848
  <div class="flex flex-wrap gap-1.5" id="typeFilterContainer"></div>
849
  </div>
 
851
 
852
  <!-- Model Size -->
853
  <div>
854
+ <p id="filterModelSizeLabel" class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">حجم النموذج</p>
855
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
856
  <div class="flex justify-between items-center mb-3">
857
+ <span id="parametersLabel" class="text-xs font-bold text-slate-400">المعاملات</span>
858
  <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>
859
  </div>
860
  <div class="slider-container">
 
872
 
873
  <!-- Organization -->
874
  <div>
875
+ <p id="filterOrganizationLabel" class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">الجهة المطوّرة</p>
876
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
877
  <div class="flex flex-wrap gap-1.5" id="orgFilterContainer"></div>
878
  </div>
 
886
  <!-- Benchmark Filters -->
887
  <div>
888
  <div class="flex items-center gap-1.5 mb-2">
889
+ <p id="benchmarkFiltersLabel" class="text-xs font-semibold text-slate-500 dark:text-slate-400">فلاتر المعايير</p>
890
  <div class="relative tooltip-trigger group cursor-help">
891
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
892
  <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">
893
  <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>
894
+ <span id="benchmarkFilterTipText">انتقل إلى</span> <button onclick="window.scrollAndOpenTableOps(event)" class="font-bold text-indigo-600 dark:text-indigo-400 hover:underline cursor-pointer" id="benchmarkFilterTipLink">خيارات الجدول</button> <span id="benchmarkFilterTipTail">للتبديل بين المتوسط العام والمتوسط المفلتر أو لتغيير نمط الترتيب.</span>
895
  </div>
896
  </div>
897
  </div>
898
  <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">
899
  <div>
900
+ <h4 id="taskTypeLabel" class="text-xs font-bold text-slate-400 mb-2">نوع المهمة</h4>
901
  <div id="taskTypeFilterBtns" class="flex flex-wrap gap-1.5"></div>
902
  </div>
903
  <div>
904
+ <h4 id="domainLabel" class="text-xs font-bold text-slate-400 mb-2">المجال</h4>
905
  <div id="domainFilterBtns" class="flex flex-wrap gap-1.5"></div>
906
  </div>
907
  </div>
 
909
 
910
  <!-- License -->
911
  <div>
912
+ <p id="licenseLabel" class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">الترخيص</p>
913
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
914
  <div class="flex flex-wrap gap-1.5" id="licenseFilterContainer"></div>
915
  </div>
 
926
  <!-- Table Options Button -->
927
  <button onclick="window.toggleTableOps(event)" id="tableOpsTrigger"
928
  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">
929
+ <i data-lucide="settings-2" id="tableOpsIcon" class="h-5 w-5"></i> <span id="tableOptionsTriggerLabel">خيارات الجدول</span>
930
  </button>
931
  <!-- Table Options Menu -->
932
  <div id="tableOpsMenu"
 
934
 
935
  <!-- Header with Reset -->
936
  <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
937
+ <span id="tableOptionsMenuTitle" class="text-sm font-bold text-slate-700 dark:text-slate-200">خيارات الجدول</span>
938
  <button onclick="window.resetTableOps()"
939
  class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
940
+ data-lucide="rotate-ccw" class="w-3 h-3"></i> <span id="resetTableOpsLabel">إعادة التعيين</span></button>
941
  </div>
942
 
943
  <!-- Group 1: View Options -->
 
946
  <!-- Section 1: Ranking Mode -->
947
  <div class="mb-4">
948
  <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
949
+ <span id="rankingModeLabel">نمط الترتيب</span>
950
  <div class="relative tooltip-trigger group cursor-help">
951
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
952
  <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">
953
  <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>
954
+ <p id="rankModeHelpGlobal" class="mb-1">الترتيب العام: يعتمد على المتوسط العام عبر جميع المعايير.</p>
955
+ <p id="rankModeHelpCurrent">ترتيب العرض الحالي: يتغير حسب الفرز والفلاتر النشطة.</p>
956
  </div>
957
  </div>
958
  </h4>
959
  <div class="flex flex-wrap gap-1.5">
960
  <button onclick="window.setRankMode('static')" id="rankBtnStatic"
961
+ class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300">الترتيب العام</button>
962
  <button onclick="window.setRankMode('dynamic')" id="rankBtnDynamic"
963
+ 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">ترتيب العرض الحالي</button>
964
  </div>
965
  </div>
966
 
967
  <!-- Section 2: Avg Score Calc -->
968
  <div>
969
  <h4 class="text-xs font-bold text-slate-400 mb-2 flex items-center gap-2">
970
+ <span id="averageCalcLabel">احتساب المتوسط</span>
971
  <div class="relative tooltip-trigger group cursor-help">
972
  <i data-lucide="info" class="w-3.5 h-3.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"></i>
973
  <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">
974
  <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>
975
+ <p id="averageCalcHelpGlobal" class="mb-1">المتوسط العام: يحسب النتيجة عبر جميع المعايير.</p>
976
+ <p id="averageCalcHelpFiltered">المتوسط المفلتر: يعيد الحساب باستخدام الأعمدة الظاهرة فقط.</p>
977
  </div>
978
  </div>
979
  </h4>
980
  <div class="flex flex-wrap gap-1.5">
981
  <button onclick="window.setAvgMode('all')" id="avgBtnAll"
982
+ class="px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300">المتوسط العام</button>
983
  <button onclick="window.setAvgMode('visible')" id="avgBtnVisible"
984
+ 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">المتوسط المفلتر</button>
985
  </div>
986
  </div>
987
  </div>
 
991
  <!-- Col Visibility -->
992
  <button onclick="window.toggleColMenu(event)" id="colMenuTrigger"
993
  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">
994
+ <i data-lucide="book-open" id="colMenuIcon" class="h-5 w-5"></i> <span id="columnVisibilityTriggerLabel">إظهار الأعمدة</span>
995
  </button>
996
  <div id="colMenu"
997
  class="hidden absolute top-10 right-0 z-50 w-80 p-4 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 max-h-[80vh] overflow-y-auto">
998
  <div class="flex justify-between items-center mb-4 pb-2 border-b border-slate-100 dark:border-slate-700">
999
+ <span id="columnVisibilityMenuTitle" class="text-sm font-bold text-slate-700 dark:text-slate-200">إظهار الأعمدة</span>
1000
  <button onclick="window.resetColumns()"
1001
  class="text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 font-medium flex items-center gap-1"><i
1002
+ data-lucide="rotate-ccw" class="w-3 h-3"></i> <span id="resetColumnsLabel">إعادة التعيين</span></button>
1003
  </div>
1004
+ <p id="columnVisibilityBenchmarksLabel" class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">المعايير</p>
1005
  <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">
1006
  <div id="colListScores" class="flex flex-wrap gap-2"></div>
1007
  </div>
1008
+ <p id="columnVisibilityDetailsLabel" class="text-xs font-semibold text-slate-500 dark:text-slate-400 mb-2">تفاصيل النموذج</p>
1009
  <div class="p-3 rounded-xl border border-slate-200 dark:border-slate-600/80 bg-slate-50 dark:bg-slate-900/50">
1010
  <div id="colListDetails" class="flex flex-wrap gap-2"></div>
1011
  </div>
 
1020
  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">
1021
  <div class="flex items-center gap-3">
1022
  <div class="flex-1 min-w-0">
1023
+ <div id="scoreClickToastTitle" class="font-semibold text-indigo-700 dark:text-indigo-300">يمكن النقر على الدرجات</div>
1024
+ <div id="scoreClickToastDesc" class="mt-1">انقر على أي درجة لعرض تفاصيل العينات المرتبطة بها.</div>
1025
  </div>
1026
  <div class="score-click-demo hidden sm:block" aria-hidden="true">
1027
  <div class="score-click-demo-screen">
 
1063
  class="bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
1064
  <span
1065
  class="text-xs font-bold uppercase text-amber-600 dark:text-amber-400 mb-1 flex items-center gap-1"><i
1066
+ data-lucide="trophy" class="w-3 h-3"></i> <span id="modalRankLabel">الترتيب</span></span>
1067
  <span id="modalRank" class="text-3xl font-black text-amber-700 dark:text-amber-300">#--</span>
1068
  </div>
1069
  <!-- Block 2: Avg -->
 
1071
  class="bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
1072
  <span
1073
  class="text-xs font-bold uppercase text-indigo-600 dark:text-indigo-400 mb-1 flex items-center gap-1"><i
1074
+ data-lucide="bar-chart-2" class="w-3 h-3"></i> <span id="modalAverageLabel">المتوسط</span></span>
1075
  <span id="modalAvg" class="text-3xl font-black text-indigo-700 dark:text-indigo-300">--</span>
1076
  </div>
1077
  <!-- Block 3: Size -->
 
1079
  class="bg-slate-50 dark:bg-slate-800 border border-slate-100 dark:border-slate-700 p-4 rounded-xl flex flex-col items-center justify-center text-center">
1080
  <span
1081
  class="text-xs font-bold uppercase text-slate-500 dark:text-slate-400 mb-1 flex items-center gap-1"><i
1082
+ data-lucide="box" class="w-3 h-3"></i> <span id="modalSizeLabel">الحجم</span></span>
1083
  <span id="modalSize" class="text-2xl font-bold text-slate-700 dark:text-slate-200">--</span>
1084
  </div>
1085
  <!-- Block 4: Hub -->
 
1087
  class="bg-pink-50 dark:bg-pink-900/20 border border-pink-100 dark:border-pink-900/30 p-4 rounded-xl flex flex-col items-center justify-center text-center">
1088
  <span
1089
  class="text-xs font-bold uppercase text-pink-600 dark:text-pink-400 mb-1 flex items-center gap-1"><i
1090
+ data-lucide="heart" class="w-3 h-3"></i> <span id="modalLikesLabel">إعجابات المنصة</span></span>
1091
  <span id="modalLikes" class="text-2xl font-bold text-pink-700 dark:text-pink-300">--</span>
1092
  </div>
1093
  </div>
 
1096
  <div
1097
  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">
1098
  <span class="flex items-center gap-1" title="License"><i data-lucide="scale"
1099
+ class="w-3.5 h-3.5"></i> <span id="modalLicensePrefix">الترخيص:</span> <span id="modalLicense">--</span></span>
1100
  <span class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600"></span>
1101
 
1102
 
 
1109
  <a id="modalLinkHF" href="#" target="_blank"
1110
  class="inline-flex items-center justify-center px-5 py-2.5 rounded-lg bg-slate-900 text-white hover:bg-slate-800 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100 font-medium transition-colors">
1111
  <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
1112
+ class="w-5 h-5 mr-2" alt="HF"> <span id="modalLinkHFText">عرض على Hugging Face</span>
1113
  </a>
1114
  <a id="modalLinkDetails" href="#" target="_blank"
1115
  class="inline-flex items-center justify-center px-5 py-2.5 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 font-medium transition-colors">
1116
+ <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> <span id="modalLinkDetailsText">تفاصيل التقييم</span>
1117
  </a>
1118
  </div>
1119
 
1120
  <!-- Chart Area -->
1121
  <div>
1122
+ <h4 id="evaluationResultsLabel" class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-wider">نتائج التقييم</h4>
1123
  <div id="modalChart" class="space-y-3">
1124
  <!-- Bars injected here -->
1125
  </div>
 
1130
  <div
1131
  class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
1132
  <button onclick="window.closeModelDetails()"
1133
+ class="text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200" id="closeModelDetailsLabel">إغلاق التفاصيل</button>
1134
  </div>
1135
  </div>
1136
  </div>
 
1177
  </div>
1178
  </div>
1179
  </div>
1180
+
1181
  <div
1182
  class="bg-slate-50 dark:bg-slate-800/50 px-6 py-4 border-t border-slate-100 dark:border-slate-800 text-center">
1183
  <button onclick="window.closeBenchmarkDetails()"
1184
+ class="text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200" id="closeBenchmarkDetailsLabel">Close Details</button>
1185
  </div>
1186
  </div>
1187
  </div>
 
1196
  return Number.isFinite(n) ? n : null;
1197
  };
1198
  const asUnknown = (v) => {
1199
+ if (v === undefined || v === null) return getUi('unknown');
1200
  const s = String(v).trim();
1201
+ return s ? s : getUi('unknown');
1202
  };
1203
  const tryFormatJsonString = (value) => {
1204
  const s = String(value ?? "").trim();
 
1215
  }
1216
  };
1217
  const formatDetailValue = (v, emptyAsUnknown = true) => {
1218
+ if (v === undefined || v === null) return emptyAsUnknown ? getUi('unknown') : "";
1219
  if (typeof v === "string") {
1220
  const s = v.trim();
1221
+ if (!s) return emptyAsUnknown ? getUi('unknown') : "";
1222
  return tryFormatJsonString(s) || s;
1223
  }
1224
  if (Array.isArray(v)) {
1225
+ if (!v.length) return emptyAsUnknown ? getUi('unknown') : "";
1226
  const isPrimitive = v.every(item =>
1227
  item === null || ["string", "number", "boolean"].includes(typeof item)
1228
  );
 
1230
  try {
1231
  return JSON.stringify(v, null, 2);
1232
  } catch {
1233
+ return emptyAsUnknown ? getUi('unknown') : "";
1234
  }
1235
  }
1236
  if (typeof v === "object") {
1237
  try {
1238
  return JSON.stringify(v, null, 2);
1239
  } catch {
1240
+ return emptyAsUnknown ? getUi('unknown') : "";
1241
  }
1242
  }
1243
  const s = String(v).trim();
1244
+ return s ? s : (emptyAsUnknown ? getUi('unknown') : "");
1245
  };
1246
  const prettyIntOrUnknown = (v) => {
1247
  const n = toNumber(v);
1248
+ return n === null ? getUi('unknown') : String(Math.floor(n));
1249
  };
1250
  const escapeHtml = (value) => String(value ?? "")
1251
  .replace(/&/g, "&amp;")
 
1305
  <div>
1306
  <div id="${idBase}-short" class="${contentClass}">${renderDetailText(short, isJson)}</div>
1307
  <div id="${idBase}-full" class="hidden ${contentClass}">${renderDetailText(raw, isJson)}</div>
1308
+ <button type="button" onclick="window.toggleExpandText('${idBase}', this)" class="mt-2 inline-flex items-center gap-1 px-2 py-1 rounded-md border border-indigo-300 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 text-xs font-bold text-indigo-700 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors">${getUi('expand')}</button>
1309
  </div>
1310
  `;
1311
  };
 
1313
  let lbData = [], grid, maxMeta = 100, minMeta = 0, tableColumns = [];
1314
  let currentSort = { colId: null, dir: 'none' };
1315
  const SCORE_HINT_KEY = "score_click_hint_seen_v1";
1316
+ const LEADERBOARD_TRANSLATIONS = {
1317
+ ar: {
1318
+ no_data: "لا توجد بيانات محمّلة.",
1319
+ all: "الكل",
1320
+ unknown: "غير معروف",
1321
+ expand: "توسيع",
1322
+ collapse: "طيّ",
1323
+ subtask: "المهمة الفرعية",
1324
+ prompt_output: "الموجّه / المخرجات",
1325
+ gold: "الإجابة المرجعية",
1326
+ predicted: "إجابة النموذج",
1327
+ output: "المخرجات:",
1328
+ id: "المعرّف",
1329
+ score: "الدرجة",
1330
+ correct: "صحيح",
1331
+ wrong: "خاطئ",
1332
+ loading: "جارٍ التحميل...",
1333
+ show_more: "عرض المزيد",
1334
+ showing: "تم عرض {loaded} عينة",
1335
+ showing_of: "تم عرض {loaded} من أصل {total} عينة",
1336
+ loading_progress: "جارٍ التحميل... ({loaded}{suffix})",
1337
+ no_details: "لا توجد تفاصيل متاحة لهذا المعيار مع هذا النموذج.",
1338
+ failed_details: "تعذّر تحميل التفاصيل",
1339
+ details_title: "تفاصيل {benchmark} - {model}",
1340
+ details_loading: "جارٍ تحميل التفاصيل...",
1341
+ scored: "{count} عيّنة مقيمة",
1342
+ correct_ratio: "{correct}/{scored} صحيحة",
1343
+ rank: "الترتيب",
1344
+ average: "المتوسط",
1345
+ model_name: "اسم النموذج",
1346
+ model_size: "حجم النموذج",
1347
+ params: "المعاملات",
1348
+ license: "الترخيص",
1349
+ table_options: "خيارات الجدول",
1350
+ column_visibility: "إظهار الأعمدة",
1351
+ benchmarks: "المعايير",
1352
+ model_details: "تفاصيل النموذج",
1353
+ click_for_details: "انقر لعرض التفاصيل",
1354
+ task_types: { Code: "برمجة", MCQ: "اختيار من متعدد", QA: "سؤال وجواب" },
1355
+ domains: { Cultural: "ثقافي", STEM: "STEM", Legal: "قانوني", Medical: "طبي", Safety: "السلامة", Coding: "برمجة", Poetry: "الشعر" },
1356
+ model_types: {
1357
+ "🟢 : pretrained": "🟢 مدرّب مسبقًا",
1358
+ "🟩 : continuously pretrained": "🟩 تدريب مستمر",
1359
+ "💬 : chat models (RLHF, DPO, IFT, ...)": "💬 نماذج محادثة",
1360
+ "🔶 : fine-tuned on domain-specific datasets": "🔶 ضبط تخصصي",
1361
+ "🤝 : base merges and merges": "🤝 نماذج مدمجة",
1362
+ },
1363
+ },
1364
+ en: {
1365
+ no_data: "No data loaded.",
1366
+ all: "All",
1367
+ unknown: "Unknown",
1368
+ expand: "Expand",
1369
+ collapse: "Collapse",
1370
+ subtask: "Subtask",
1371
+ prompt_output: "Prompt / Output",
1372
+ gold: "Gold",
1373
+ predicted: "Predicted",
1374
+ output: "Output:",
1375
+ id: "id",
1376
+ score: "score",
1377
+ correct: "Correct",
1378
+ wrong: "Wrong",
1379
+ loading: "Loading...",
1380
+ show_more: "Show More",
1381
+ showing: "Showing {loaded} samples",
1382
+ showing_of: "Showing {loaded} of {total} samples",
1383
+ loading_progress: "Loading... ({loaded}{suffix})",
1384
+ no_details: "No details found for this benchmark/model.",
1385
+ failed_details: "Failed to load details",
1386
+ details_title: "{benchmark} Details - {model}",
1387
+ details_loading: "Loading details...",
1388
+ scored: "{count} scored",
1389
+ correct_ratio: "{correct}/{scored} correct",
1390
+ rank: "Rank",
1391
+ average: "Average",
1392
+ model_name: "Model Name",
1393
+ model_size: "Model Size",
1394
+ params: "Params",
1395
+ license: "License",
1396
+ table_options: "Table Options",
1397
+ column_visibility: "Column Visibility",
1398
+ benchmarks: "Benchmarks",
1399
+ model_details: "Model Details",
1400
+ click_for_details: "Click for per-question details",
1401
+ task_types: { Code: "Code", MCQ: "MCQ", QA: "QA" },
1402
+ domains: { Cultural: "Cultural", STEM: "STEM", Legal: "Legal", Medical: "Medical", Safety: "Safety", Coding: "Coding", Poetry: "Poetry" },
1403
+ model_types: {},
1404
+ }
1405
+ };
1406
+ const getUi = (key, vars = {}) => {
1407
+ const lang = window.getCurrentLanguage ? window.getCurrentLanguage() : 'en';
1408
+ const dict = LEADERBOARD_TRANSLATIONS[lang] || LEADERBOARD_TRANSLATIONS.en;
1409
+ let value = dict[key] ?? key;
1410
+ Object.entries(vars).forEach(([name, replacement]) => {
1411
+ value = value.replace(`{${name}}`, replacement);
1412
+ });
1413
+ return value;
1414
+ };
1415
+ const translateTaskType = (value) => {
1416
+ const lang = window.getCurrentLanguage ? window.getCurrentLanguage() : 'en';
1417
+ return (LEADERBOARD_TRANSLATIONS[lang] || LEADERBOARD_TRANSLATIONS.en).task_types?.[value] || value;
1418
+ };
1419
+ const translateDomain = (value) => {
1420
+ const lang = window.getCurrentLanguage ? window.getCurrentLanguage() : 'en';
1421
+ return (LEADERBOARD_TRANSLATIONS[lang] || LEADERBOARD_TRANSLATIONS.en).domains?.[value] || value;
1422
+ };
1423
+ const translateModelType = (value) => {
1424
+ const lang = window.getCurrentLanguage ? window.getCurrentLanguage() : 'en';
1425
+ return (LEADERBOARD_TRANSLATIONS[lang] || LEADERBOARD_TRANSLATIONS.en).model_types?.[value] || value;
1426
+ };
1427
+ const translateColumnLabel = (value) => {
1428
+ if (!value) return value;
1429
+ if (value.includes("Average")) return getUi('average');
1430
+ const map = {
1431
+ "Rank": getUi('rank'),
1432
+ "Model Name": getUi('model_name'),
1433
+ "Model Size": getUi('model_size'),
1434
+ "License": getUi('license'),
1435
+ "Model Size Filter": getUi('params'),
1436
+ };
1437
+ return map[value] || value;
1438
+ };
1439
+ const applyLeaderboardStaticTranslations = () => {
1440
+ const setTxt = (id, value) => {
1441
+ const el = document.getElementById(id);
1442
+ if (el) el.innerText = value;
1443
+ };
1444
+ const searchInput = document.getElementById('searchInput');
1445
+ if (searchInput) searchInput.placeholder = window.getCurrentLanguage && window.getCurrentLanguage() === 'ar'
1446
+ ? 'ابحث عن نموذج (مثل Falcon أو Qwen)...'
1447
+ : 'Search models (e.g. Falcon, Qwen)...';
1448
+ setTxt('filterBtnLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'الفلاتر' : 'Filters');
1449
+ setTxt('filterPanelTitle', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'الفلاتر' : 'Filters');
1450
+ setTxt('resetFiltersLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'إعادة التعيين' : 'Reset all');
1451
+ setTxt('filterModelTypeLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'نوع النموذج' : 'Model Type');
1452
+ setTxt('filterModelSizeLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'حجم النموذج' : 'Model Size');
1453
+ setTxt('parametersLabel', getUi('params'));
1454
+ setTxt('filterOrganizationLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'الجهة المطوّرة' : 'Organization');
1455
+ setTxt('benchmarkFiltersLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'فلاتر المعايير' : 'Benchmark Filters');
1456
+ setTxt('benchmarkFilterTipText', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'انتقل إلى' : 'Head to');
1457
+ setTxt('benchmarkFilterTipLink', getUi('table_options'));
1458
+ setTxt('benchmarkFilterTipTail', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'للتبديل بين المتوسط العام والمتوسط المفلتر أو لتغيير نمط الترتيب.' : 'to switch between Global and Filtered Average, or change the Ranking Mode.');
1459
+ setTxt('taskTypeLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'نوع المهمة' : 'Task Type');
1460
+ setTxt('domainLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'المجال' : 'Domain');
1461
+ setTxt('licenseLabel', getUi('license'));
1462
+ setTxt('tableOptionsTriggerLabel', getUi('table_options'));
1463
+ setTxt('tableOptionsMenuTitle', getUi('table_options'));
1464
+ setTxt('resetTableOpsLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'إعادة التعيين' : 'Reset');
1465
+ setTxt('rankingModeLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'نمط الترتيب' : 'Ranking Mode');
1466
+ setTxt('averageCalcLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'احتساب المتوسط' : 'Average Score Calculation');
1467
+ setTxt('columnVisibilityTriggerLabel', getUi('column_visibility'));
1468
+ setTxt('columnVisibilityMenuTitle', getUi('column_visibility'));
1469
+ setTxt('resetColumnsLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'إعادة التعيين' : 'Reset');
1470
+ setTxt('columnVisibilityBenchmarksLabel', getUi('benchmarks'));
1471
+ setTxt('columnVisibilityDetailsLabel', getUi('model_details'));
1472
+ setTxt('scoreClickToastTitle', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'يمكن النقر على الدرجات' : 'Scores are clickable');
1473
+ setTxt('scoreClickToastDesc', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'انقر على أي درجة لعرض تفاصيل العينات المرتبطة بها.' : 'Click any benchmark score cell to view detailed samples.');
1474
+ setTxt('modalRankLabel', getUi('rank'));
1475
+ setTxt('modalAverageLabel', getUi('average'));
1476
+ setTxt('modalSizeLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'الحجم' : 'Size');
1477
+ setTxt('modalLikesLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'إعجابات المنصة' : 'Hub Likes');
1478
+ setTxt('modalLicensePrefix', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'الترخيص:' : 'License:');
1479
+ setTxt('modalLinkHFText', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'عرض على Hugging Face' : 'View on Hugging Face');
1480
+ setTxt('modalLinkDetailsText', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'تفاصيل التقييم' : 'Evaluation Details');
1481
+ setTxt('evaluationResultsLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'نتائج التقييم' : 'Evaluation Results');
1482
+ setTxt('closeModelDetailsLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'إغلاق التفاصيل' : 'Close Details');
1483
+ setTxt('closeBenchmarkDetailsLabel', window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'إغلاق التفاصيل' : 'Close Details');
1484
+ };
1485
 
1486
  // New State
1487
  let tableOptions = {
 
1505
  if (hasUnknownSize) minMeta = Math.min(0, minMeta);
1506
 
1507
  if (!lbData.length) {
1508
+ $('#table-wrapper').innerHTML = `<div class='p-8 text-center text-slate-500'>${getUi('no_data')}</div>`;
1509
  return;
1510
  }
1511
 
 
1652
  if (!container) return;
1653
  const allActive = activeList.length === 0;
1654
  container.innerHTML = [
1655
+ `<button onclick="window.${toggleFn}('all')" class="${pill(allActive)}">${getUi('all')}</button>`,
1656
+ ...items.map(item => {
1657
+ const label = containerId === 'taskTypeFilterBtns' ? translateTaskType(item) : translateDomain(item);
1658
+ return `<button onclick="window.${toggleFn}('${item}')" class="${pill(activeList.includes(item))}">${label}</button>`;
1659
+ })
1660
  ].join('');
1661
  };
1662
 
 
1746
  const expanding = fullEl.classList.contains('hidden');
1747
  shortEl.classList.toggle('hidden', expanding);
1748
  fullEl.classList.toggle('hidden', !expanding);
1749
+ btn.innerText = expanding ? getUi('collapse') : getUi('expand');
1750
  };
1751
 
1752
  // --- BENCHMARK DETAILS MODAL ---
 
1766
 
1767
  const renderBenchmarkHeader = (showSubtaskColumn) => {
1768
  $('#benchmarkHeader').innerHTML = showSubtaskColumn
1769
+ ? `<div class="col-span-2">${getUi('subtask')}</div>
1770
+ <div class="col-span-6">${getUi('prompt_output')}</div>
1771
+ <div class="col-span-2">${getUi('gold')}</div>
1772
+ <div class="col-span-2">${getUi('predicted')}</div>`
1773
+ : `<div class="col-span-8">${getUi('prompt_output')}</div>
1774
+ <div class="col-span-2">${getUi('gold')}</div>
1775
+ <div class="col-span-2">${getUi('predicted')}</div>`;
1776
  };
1777
 
1778
  const renderBenchmarkRows = (rows, startIdx, showSubtaskColumn, benchmark) => {
 
1783
  ? `<div class="col-span-2 text-slate-600 dark:text-slate-300">${escapeHtml(r.subtask)}</div>`
1784
  : ``;
1785
  const rowId = `bd-row-${startIdx + idx}`;
1786
+ let correctBadge = `<span class="text-slate-500 dark:text-slate-400 font-semibold">${getUi('unknown')}</span>`;
1787
  if (r.is_correct === true) {
1788
+ correctBadge = `<span class="text-emerald-600 dark:text-emerald-400 font-semibold">${getUi('correct')}</span>`;
1789
  } else if (r.is_correct === false) {
1790
+ correctBadge = `<span class="text-rose-600 dark:text-rose-400 font-semibold">${getUi('wrong')}</span>`;
1791
  } else if (r.metric !== null && r.metric !== undefined) {
1792
  const n = Number(r.metric);
1793
  const scoreText = Number.isFinite(n) ? n.toFixed(4) : escapeHtml(r.metric);
1794
+ correctBadge = `<span class="text-sky-600 dark:text-sky-400 font-semibold">${getUi('score')}: ${scoreText}</span>`;
1795
  }
1796
  const prompt = (
1797
  isCodeEvalBenchmark
 
1802
  const gold = formatDetailValue(r.gold_answer, !isCodeEvalBenchmark);
1803
  const predicted = formatDetailValue(r.predicted_answer);
1804
  const sampleMeta = [
1805
+ r.question_id ? `${getUi('id')}: ${escapeHtml(r.question_id)}` : null,
1806
+ r.metric !== null && r.metric !== undefined ? `${getUi('score')}: ${escapeHtml(r.metric)}` : null,
1807
  ].filter(Boolean).join(" | ");
1808
 
1809
  return `
 
1812
  <div class="${promptColSpan} text-slate-700 dark:text-slate-200">
1813
  <div class="font-semibold text-slate-800 dark:text-slate-100">${expandableTextHtml(prompt, `${rowId}-prompt`)}</div>
1814
  <div class="mt-2 text-slate-500 dark:text-slate-400">
1815
+ <span class="font-semibold">${getUi('output')}</span>
1816
  ${expandableTextHtml(output, `${rowId}-output`)}
1817
  </div>
1818
  ${sampleMeta ? `<div class="mt-1 text-slate-400 dark:text-slate-500">${sampleMeta}</div>` : ``}
 
1836
  const hasRows = total > 0 || loaded > 0;
1837
  footer.classList.toggle('hidden', !hasRows && !benchmarkDetailsState.loading);
1838
  status.innerText = benchmarkDetailsState.loading
1839
+ ? getUi('loading_progress', { loaded, suffix: total ? `/${total}` : "" })
1840
+ : (total ? getUi('showing_of', { loaded, total }) : getUi('showing', { loaded }));
1841
 
1842
  btn.classList.toggle('hidden', !benchmarkDetailsState.hasMore);
1843
  btn.disabled = benchmarkDetailsState.loading;
1844
+ btn.innerText = benchmarkDetailsState.loading ? getUi('loading') : getUi('show_more');
1845
  };
1846
 
1847
  const bindBenchmarkModalScroll = () => {
 
1909
  ? subtasks.map(s => `
1910
  <div class="p-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/70">
1911
  <div class="text-xs text-slate-500 dark:text-slate-400">${escapeHtml(s.subtask)}</div>
1912
+ <div class="text-sm font-bold text-slate-800 dark:text-slate-100 mt-1">${s.accuracy === null ? getUi("unknown") : `${s.accuracy}%`}</div>
1913
+ <div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">${s.mode === "metric" ? getUi("scored", { count: s.scored }) : getUi("correct_ratio", { correct: s.correct, scored: s.scored })}</div>
1914
  </div>
1915
  `).join("")
1916
  : "";
 
1918
  }
1919
 
1920
  if (!subtasks.length && !rows.length && benchmarkDetailsState.totalRows === 0) {
1921
+ $('#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">${getUi('no_details')}</div>`;
1922
  $('#benchmarkRows').innerHTML = "";
1923
  benchmarkDetailsState.hasMore = false;
1924
  benchmarkDetailsState.nextCursor = null;
 
1946
  } catch (err) {
1947
  if (requestId === benchmarkDetailsState.requestId) {
1948
  $('#benchmarkSummary').innerHTML = "";
1949
+ $('#benchmarkRows').innerHTML = `<div class="p-6 text-sm text-rose-600 dark:text-rose-400">${escapeHtml(err.message || getUi("failed_details"))}</div>`;
1950
  benchmarkDetailsState.hasMore = false;
1951
  }
1952
  } finally {
 
1968
  benchmarkDetailsState.totalRows = 0;
1969
  benchmarkDetailsState.loading = false;
1970
 
1971
+ $('#benchmarkModalTitle').innerText = getUi('details_title', { benchmark, model: modelName });
1972
  $('#benchmarkSummary').innerHTML = "";
1973
+ $('#benchmarkRows').innerHTML = `<div class="p-6 text-sm text-slate-500 dark:text-slate-400">${getUi('details_loading')}</div>`;
1974
  renderBenchmarkHeader(true);
1975
 
1976
  $('#benchmarkModal').classList.remove('hidden');
 
2424
  if (key === 'MedArabiQ_MCQ' || key === 'MedArabiQ_QA') {
2425
  return { id: key, name: key, hidden: true, sort: false };
2426
  }
2427
+ let name = isAvg ? translateColumnLabel(key).toUpperCase() : translateColumnLabel(key);
2428
  // MedArabiQ: show subset subtitle when a single task type is active
2429
  if (key === 'MedArabiQ') {
2430
  const at = tableOptions.taskTypes;
2431
  if (at.length === 1 && at[0] === 'MCQ')
2432
+ name = `MedArabiQ<br><span style="font-size:9px;font-weight:400;line-height:1;opacity:0.85;">${window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? '(أجزاء الاختيار من متعدد)' : '(MCQ subsets)'}</span>`;
2433
  else if (at.length === 1 && at[0] === 'QA')
2434
+ name = `MedArabiQ<br><span style="font-size:9px;font-weight:400;line-height:1;opacity:0.85;">${window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? '(أجزاء السؤال والجواب)' : '(QA subsets)'}</span>`;
2435
  }
2436
  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>`;
2437
  let cls = "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300";
 
2457
  if (key === "Model Size") {
2458
  def.formatter = (c) => {
2459
  const n = toNumber(c);
2460
+ const label = n === null ? getUi('unknown') : n < 1 ? `${Math.round(n * 1000)}M` : `${Math.round(n)}B`;
2461
  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>`);
2462
  };
2463
  }
2464
 
2465
  if (key === "License") {
2466
  def.formatter = (c) => {
2467
+ const label = (c && c !== "Unknown") ? c : getUi('unknown');
2468
  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>`);
2469
  };
2470
  }
 
2474
  def.formatter = (c, r) => {
2475
  const type = (typeIdx > -1 && r.cells[typeIdx]) ? r.cells[typeIdx].data : "";
2476
  const tMap = { "base": "🟢", "instruct": "🔶"};
2477
+ const tIcon = tMap[type] || translateModelType(type);
2478
  const em = encodeURIComponent(String(c ?? ""));
2479
 
2480
  return gridjs.html(`
 
2499
  if (!isScore || !modelName) return gridjs.html(bar);
2500
  const em = encodeURIComponent(modelName);
2501
  const eb = encodeURIComponent(benchmark);
2502
+ return gridjs.html(`<button onclick="window.openBenchmarkDetails(decodeURIComponent('${em}'), decodeURIComponent('${eb}'))" class="w-full ${window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'text-right' : 'text-left'} hover:opacity-90 transition-opacity" title="${getUi('click_for_details')}">${bar}</button>`);
2503
  };
2504
 
2505
  const renderRaw = (c, modelName, benchmark) => {
 
2508
  if (!isScore || !modelName) return gridjs.html(raw);
2509
  const em = encodeURIComponent(modelName);
2510
  const eb = encodeURIComponent(benchmark);
2511
+ return gridjs.html(`<button onclick="window.openBenchmarkDetails(decodeURIComponent('${em}'), decodeURIComponent('${eb}'))" class="w-full ${window.getCurrentLanguage && window.getCurrentLanguage() === 'ar' ? 'text-right' : 'text-left'} hover:opacity-90 transition-opacity" title="${getUi('click_for_details')}">${raw}</button>`);
2512
  };
2513
 
2514
  const shouldUseBar = true;
 
2589
  if (!el) return;
2590
  const allActive = activeList.length === 0;
2591
  el.innerHTML = [
2592
+ `<button onclick="window.${toggleFn}('__all__')" class="${allActive ? _btnActive : _btnInactive}">${getUi('all')}</button>`,
2593
+ ...vals.map(v => {
2594
+ const label = containerId === '#typeFilterContainer' ? translateModelType(v) : v;
2595
+ return `<button onclick="window.${toggleFn}('${v}')" class="${activeList.includes(v) ? _btnActive : _btnInactive}">${label}</button>`;
2596
+ })
2597
  ].join('');
2598
  };
2599
 
 
2647
  $(el).innerHTML = '';
2648
  tableColumns.filter(c => c.group === grp && !["_link", "T", "Type", "Full Type", "Precision", "Hub ❤️", "Revision"].includes(c.id)).forEach(c => {
2649
  const b = document.createElement('button');
2650
+ b.innerText = c.id.includes("Average") ? getUi('average') : (c.id === "Model Size Filter" ? getUi('params') : translateColumnLabel(c.id));
2651
  b.className = `px-3 py-1.5 rounded-lg border text-xs font-medium cursor-pointer transition-all select-none ${!c.hidden ? "bg-indigo-50 border-indigo-400 text-indigo-600 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300" : "bg-white border-slate-200 text-slate-500 hover:bg-slate-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600"}`;
2652
  b.onclick = (e) => {
2653
  e.stopPropagation();
 
2661
  };
2662
  addBtns('scores', '#colListScores'); addBtns('details', '#colListDetails');
2663
  }
2664
+
2665
+ applyLeaderboardStaticTranslations();
2666
+ if (window.registerLanguageListener) {
2667
+ window.registerLanguageListener(() => {
2668
+ applyLeaderboardStaticTranslations();
2669
+ renderBenchmarkHeader(benchmarkDetailsState.showSubtaskColumn);
2670
+ updateBenchmarkRowsFooter();
2671
+ if (lbData.length) {
2672
+ prepareColumns(lbData);
2673
+ buildColMenuDOM();
2674
+ applyFilters();
2675
+ }
2676
+ });
2677
+ }
2678
 
2679
  })();
2680
  </script>
frontend/submit.html CHANGED
@@ -2,33 +2,57 @@
2
  <html lang="en">
3
 
4
  <body class="bg-white dark:bg-slate-900">
5
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  <div class="lg:col-span-1 space-y-4">
7
  <div
8
  class="bg-white dark:bg-slate-800 p-8 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
9
  <h3 class="text-xl font-bold mb-6 flex items-center text-slate-800 dark:text-slate-100">
10
  <span
11
- class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 p-2 rounded-full mr-3">
12
  <i data-lucide="rocket" class="w-5 h-5"></i>
13
  </span>
14
- Submit Model
15
  </h3>
16
  <form id="submitForm" class="space-y-6">
17
  <div class="grid grid-cols-1 gap-6">
18
  <div class="space-y-4">
19
- <div><label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Model
20
- Name</label><input required name="model_name" type="text"
21
  placeholder="myorg/mymodel"
22
  class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none transition">
23
  </div>
24
- <div><label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Model
25
- Type</label>
26
  <div class="relative"><select name="model_type"
27
  class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none appearance-none transition cursor-pointer">
28
- <option value="base">🟢 Base </option>
29
- <option value="instruct" selected>🔶 Instruct</option>
30
- </select><i data-lucide="chevron-down"
31
- class="absolute right-3 top-3 h-4 w-4 text-slate-400 pointer-events-none"></i>
32
  </div>
33
  </div>
34
  <!-- <div><label
@@ -71,8 +95,7 @@
71
  </div>
72
  <div class="pt-4 border-t border-slate-100 dark:border-slate-700">
73
  <button type="submit" id="submitBtn"
74
- class="w-full py-3 px-4 rounded-xl shadow-lg shadow-indigo-500/30 text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 transition-all flex justify-center items-center gap-2 group"><span>Submit
75
- Model</span><i data-lucide="arrow-right"
76
  class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i></button>
77
  </div>
78
  <div id="submitMsg" class="text-center text-sm font-medium min-h-[20px]"></div>
@@ -81,21 +104,94 @@
81
  </div>
82
 
83
  <div class="lg:col-span-1 space-y-4">
84
- <h3 class="text-lg font-bold text-slate-800 dark:text-slate-100 mb-4 px-2">Evaluation Status</h3>
85
  <div id="sidebar-status-container" class="space-y-3">
86
- <div class="p-4 text-center text-sm text-slate-400 animate-pulse">Loading queue...</div>
87
  </div>
88
  <div
89
  class="mt-6 p-4 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700 text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
90
- <h4 class="font-bold text-slate-700 dark:text-slate-300 mb-2">About Submission</h4>
91
- <p>Submitted models are added to the queue automatically. Results appear on the leaderboard once
92
- finished.</p>
93
  </div>
94
  </div>
95
  </div>
96
 
97
  <script>
98
  (function () {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  // 1. Handle Sidebar Loading
100
  async function updateSidebarQueue() {
101
  const container = document.querySelector('#sidebar-status-container');
@@ -115,16 +211,16 @@
115
  container.innerHTML = Object.entries(safeQ).map(([k, items]) => `
116
  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden shadow-sm">
117
  <button onclick="this.nextElementSibling.classList.toggle('hidden')" class="w-full flex items-center justify-between p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
118
- <div class="flex items-center gap-3"><div class="p-2 rounded-lg ${cf[k] ? cf[k][0] : 'text-slate-500 bg-slate-500'} bg-opacity-10 text-current"><i data-lucide="${cf[k] ? cf[k][1] : 'help-circle'}" class="w-4 h-4"></i></div><span class="text-sm font-bold capitalize text-slate-700 dark:text-slate-200">${k}</span></div><span class="text-xs font-bold px-2 py-1 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400">${items.length}</span>
119
  </button>
120
- <div class="hidden text-sm">${items.length ? `<div class="bg-slate-50 dark:bg-darkbg p-3 border-t border-slate-100 dark:border-slate-700 space-y-2">${items.map(i => `<div class="flex justify-between text-xs p-2 bg-white dark:bg-slate-800 rounded border border-slate-200 dark:border-slate-600"><span class="font-mono text-slate-600 dark:text-slate-300 truncate" title="${i.name}">${i.name}</span><span class="px-1.5 bg-slate-100 dark:bg-slate-700 text-slate-500 rounded">${i.user || 'anon'}</span></div>`).join('')}</div>` : `<div class="p-4 text-xs text-center text-slate-400 bg-slate-50 dark:bg-darkbg border-t border-slate-100 dark:border-slate-700 italic">No ${k} evaluations.</div>`}</div>
121
  </div>`).join('');
122
 
123
  if (window.lucide) lucide.createIcons();
124
 
125
  } catch (err) {
126
  console.error("Sidebar queue error:", err);
127
- container.innerHTML = `<div class="p-4 text-center text-rose-500 text-sm">Status offline</div>`;
128
  }
129
  }
130
 
@@ -137,7 +233,7 @@
137
  const msg = document.querySelector('#submitMsg');
138
 
139
  btn.disabled = true;
140
- btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Submitting...`;
141
  if (window.lucide) lucide.createIcons();
142
 
143
  try {
@@ -147,7 +243,7 @@
147
  if (!res.ok) throw new Error(json.detail ? JSON.stringify(json.detail) : (json.message || "Error"));
148
 
149
  msg.className = "text-center text-sm font-medium text-emerald-600 dark:text-emerald-400";
150
- msg.innerText = "✅ " + (json.message || "Success!");
151
  e.target.reset();
152
 
153
  // Update Local Sidebar & Header
@@ -155,15 +251,23 @@
155
 
156
  } catch (err) {
157
  msg.className = "text-center text-sm font-medium text-rose-600 dark:text-rose-400";
158
- msg.innerText = "❌ " + err.message;
159
  }
160
 
161
  btn.disabled = false;
162
- btn.innerHTML = `<span>Submit Model</span> <i data-lucide="arrow-right" class="w-4 h-4"></i>`;
163
  if (window.lucide) lucide.createIcons();
164
  };
165
  }
166
 
 
 
 
 
 
 
 
 
167
  // Init
168
  updateSidebarQueue();
169
  })();
 
2
  <html lang="en">
3
 
4
  <body class="bg-white dark:bg-slate-900">
5
+ <style>
6
+ html[dir="rtl"] #submitPage {
7
+ direction: rtl;
8
+ text-align: right;
9
+ }
10
+
11
+ html[dir="rtl"] #submitPage .submit-title-icon {
12
+ margin-left: 0.75rem;
13
+ margin-right: 0;
14
+ }
15
+
16
+ html[dir="rtl"] #submitPage .submit-select-icon {
17
+ left: 0.75rem;
18
+ right: auto;
19
+ }
20
+
21
+ html[dir="rtl"] #submitPage #submitBtn {
22
+ flex-direction: row-reverse;
23
+ }
24
+
25
+ html[dir="rtl"] #submitPage #sidebar-status-container button,
26
+ html[dir="rtl"] #submitPage #sidebar-status-container .text-xs,
27
+ html[dir="rtl"] #submitPage #submitAboutBody {
28
+ text-align: right;
29
+ }
30
+ </style>
31
+
32
+ <div id="submitPage" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
33
  <div class="lg:col-span-1 space-y-4">
34
  <div
35
  class="bg-white dark:bg-slate-800 p-8 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
36
  <h3 class="text-xl font-bold mb-6 flex items-center text-slate-800 dark:text-slate-100">
37
  <span
38
+ class="submit-title-icon bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 p-2 rounded-full mr-3">
39
  <i data-lucide="rocket" class="w-5 h-5"></i>
40
  </span>
41
+ <span id="submitTitle">Submit Model</span>
42
  </h3>
43
  <form id="submitForm" class="space-y-6">
44
  <div class="grid grid-cols-1 gap-6">
45
  <div class="space-y-4">
46
+ <div><label id="submitLabelModelName" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Model Name</label><input required name="model_name" type="text"
 
47
  placeholder="myorg/mymodel"
48
  class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none transition">
49
  </div>
50
+ <div><label id="submitLabelModelType" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Model Type</label>
 
51
  <div class="relative"><select name="model_type"
52
  class="w-full px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 dark:text-white focus:ring-2 focus:ring-indigo-500 outline-none appearance-none transition cursor-pointer">
53
+ <option id="submitOptionBase" value="base">🟢 Base</option>
54
+ <option id="submitOptionInstruct" value="instruct" selected>🔶 Instruct</option>
55
+ </select><i data-lucide="chevron-down" class="submit-select-icon absolute right-3 top-3 h-4 w-4 text-slate-400 pointer-events-none"></i>
 
56
  </div>
57
  </div>
58
  <!-- <div><label
 
95
  </div>
96
  <div class="pt-4 border-t border-slate-100 dark:border-slate-700">
97
  <button type="submit" id="submitBtn"
98
+ class="w-full py-3 px-4 rounded-xl shadow-lg shadow-indigo-500/30 text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 transition-all flex justify-center items-center gap-2 group"><span id="submitBtnLabel">Submit Model</span><i data-lucide="arrow-right"
 
99
  class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i></button>
100
  </div>
101
  <div id="submitMsg" class="text-center text-sm font-medium min-h-[20px]"></div>
 
104
  </div>
105
 
106
  <div class="lg:col-span-1 space-y-4">
107
+ <h3 id="submitStatusTitle" class="text-lg font-bold text-slate-800 dark:text-slate-100 mb-4 px-2">Evaluation Status</h3>
108
  <div id="sidebar-status-container" class="space-y-3">
109
+ <div id="submitQueueLoading" class="p-4 text-center text-sm text-slate-400 animate-pulse">Loading queue...</div>
110
  </div>
111
  <div
112
  class="mt-6 p-4 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700 text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
113
+ <h4 id="submitAboutTitle" class="font-bold text-slate-700 dark:text-slate-300 mb-2">About Submission</h4>
114
+ <p id="submitAboutBody">Submitted models are added to the queue automatically. Results appear on the leaderboard once finished.</p>
 
115
  </div>
116
  </div>
117
  </div>
118
 
119
  <script>
120
  (function () {
121
+ const SUBMIT_TRANSLATIONS = {
122
+ ar: {
123
+ title: "إرسال نموذج",
124
+ model_name: "اسم النموذج",
125
+ model_type: "نوع النموذج",
126
+ base: "🟢 أساسي",
127
+ instruct: "🔶 موجّه",
128
+ submit_btn: "إرسال النموذج",
129
+ status_title: "حالة التقييم",
130
+ loading_queue: "جارٍ تحميل قائمة الانتظار...",
131
+ about_title: "عن الإرسال",
132
+ about_body: "تُضاف النماذج المرسلة تلقائيًا إلى قائمة الانتظار، وتظهر نتائجها على لوحة الصدارة بمجرد الانتهاء.",
133
+ status_offline: "خدمة الحالة غير متاحة الآن",
134
+ submitting: "جارٍ الإرسال...",
135
+ success_default: "تم الإرسال بنجاح",
136
+ pending: "قيد الانتظار",
137
+ running: "قيد التنفيذ",
138
+ finished: "مكتمل",
139
+ failed: "فشل",
140
+ no_status: "لا توجد تقييمات في حالة {status}.",
141
+ anon: "مجهول",
142
+ error_default: "حدث خطأ",
143
+ },
144
+ en: {
145
+ title: "Submit Model",
146
+ model_name: "Model Name",
147
+ model_type: "Model Type",
148
+ base: "🟢 Base",
149
+ instruct: "🔶 Instruct",
150
+ submit_btn: "Submit Model",
151
+ status_title: "Evaluation Status",
152
+ loading_queue: "Loading queue...",
153
+ about_title: "About Submission",
154
+ about_body: "Submitted models are added to the queue automatically. Results appear on the leaderboard once finished.",
155
+ status_offline: "Status offline",
156
+ submitting: "Submitting...",
157
+ success_default: "Submitted successfully",
158
+ pending: "Pending",
159
+ running: "Running",
160
+ finished: "Finished",
161
+ failed: "Failed",
162
+ no_status: "No {status} evaluations.",
163
+ anon: "anon",
164
+ error_default: "Error",
165
+ }
166
+ };
167
+
168
+ const getText = (key, vars = {}) => {
169
+ const lang = window.getCurrentLanguage ? window.getCurrentLanguage() : 'en';
170
+ const dict = SUBMIT_TRANSLATIONS[lang] || SUBMIT_TRANSLATIONS.en;
171
+ let value = dict[key] ?? key;
172
+ Object.entries(vars).forEach(([name, replacement]) => {
173
+ value = value.replace(`{${name}}`, replacement);
174
+ });
175
+ return value;
176
+ };
177
+
178
+ function applySubmitTranslations() {
179
+ const setTxt = (id, value) => {
180
+ const el = document.getElementById(id);
181
+ if (el) el.innerText = value;
182
+ };
183
+ setTxt('submitTitle', getText('title'));
184
+ setTxt('submitLabelModelName', getText('model_name'));
185
+ setTxt('submitLabelModelType', getText('model_type'));
186
+ setTxt('submitOptionBase', getText('base'));
187
+ setTxt('submitOptionInstruct', getText('instruct'));
188
+ setTxt('submitBtnLabel', getText('submit_btn'));
189
+ setTxt('submitStatusTitle', getText('status_title'));
190
+ setTxt('submitQueueLoading', getText('loading_queue'));
191
+ setTxt('submitAboutTitle', getText('about_title'));
192
+ setTxt('submitAboutBody', getText('about_body'));
193
+ }
194
+
195
  // 1. Handle Sidebar Loading
196
  async function updateSidebarQueue() {
197
  const container = document.querySelector('#sidebar-status-container');
 
211
  container.innerHTML = Object.entries(safeQ).map(([k, items]) => `
212
  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden shadow-sm">
213
  <button onclick="this.nextElementSibling.classList.toggle('hidden')" class="w-full flex items-center justify-between p-4 text-left hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
214
+ <div class="flex items-center gap-3"><div class="p-2 rounded-lg ${cf[k] ? cf[k][0] : 'text-slate-500 bg-slate-500'} bg-opacity-10 text-current"><i data-lucide="${cf[k] ? cf[k][1] : 'help-circle'}" class="w-4 h-4"></i></div><span class="text-sm font-bold capitalize text-slate-700 dark:text-slate-200">${getText(k)}</span></div><span class="text-xs font-bold px-2 py-1 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400">${items.length}</span>
215
  </button>
216
+ <div class="hidden text-sm">${items.length ? `<div class="bg-slate-50 dark:bg-darkbg p-3 border-t border-slate-100 dark:border-slate-700 space-y-2">${items.map(i => `<div class="flex justify-between text-xs p-2 bg-white dark:bg-slate-800 rounded border border-slate-200 dark:border-slate-600"><span class="font-mono text-slate-600 dark:text-slate-300 truncate" title="${i.name}">${i.name}</span><span class="px-1.5 bg-slate-100 dark:bg-slate-700 text-slate-500 rounded">${i.user || getText('anon')}</span></div>`).join('')}</div>` : `<div class="p-4 text-xs text-center text-slate-400 bg-slate-50 dark:bg-darkbg border-t border-slate-100 dark:border-slate-700 italic">${getText('no_status', { status: getText(k).toLowerCase() })}</div>`}</div>
217
  </div>`).join('');
218
 
219
  if (window.lucide) lucide.createIcons();
220
 
221
  } catch (err) {
222
  console.error("Sidebar queue error:", err);
223
+ container.innerHTML = `<div class="p-4 text-center text-rose-500 text-sm">${getText('status_offline')}</div>`;
224
  }
225
  }
226
 
 
233
  const msg = document.querySelector('#submitMsg');
234
 
235
  btn.disabled = true;
236
+ btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> ${getText('submitting')}`;
237
  if (window.lucide) lucide.createIcons();
238
 
239
  try {
 
243
  if (!res.ok) throw new Error(json.detail ? JSON.stringify(json.detail) : (json.message || "Error"));
244
 
245
  msg.className = "text-center text-sm font-medium text-emerald-600 dark:text-emerald-400";
246
+ msg.innerText = "✅ " + (json.message || getText('success_default'));
247
  e.target.reset();
248
 
249
  // Update Local Sidebar & Header
 
251
 
252
  } catch (err) {
253
  msg.className = "text-center text-sm font-medium text-rose-600 dark:text-rose-400";
254
+ msg.innerText = "❌ " + (err.message || getText('error_default'));
255
  }
256
 
257
  btn.disabled = false;
258
+ btn.innerHTML = `<span>${getText('submit_btn')}</span> <i data-lucide="arrow-right" class="w-4 h-4"></i>`;
259
  if (window.lucide) lucide.createIcons();
260
  };
261
  }
262
 
263
+ applySubmitTranslations();
264
+ if (window.registerLanguageListener) {
265
+ window.registerLanguageListener(() => {
266
+ applySubmitTranslations();
267
+ updateSidebarQueue();
268
+ });
269
+ }
270
+
271
  // Init
272
  updateSidebarQueue();
273
  })();