Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
Fetching metadata from the HF Docker repository...
File size: 64,536 Bytes
178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 76ee1db 9efd00d 178c53e 9efd00d 2f314ce 9efd00d 2f314ce 9efd00d 2f314ce 9efd00d 2f314ce 9efd00d 2f314ce 9efd00d 2f314ce 9efd00d 2f314ce 9efd00d 2f314ce 9efd00d 2f314ce 9efd00d 3cc4b4e 9efd00d 3638b8c 9efd00d 3638b8c 9efd00d 3638b8c 9efd00d 3638b8c 9efd00d b5697c8 9efd00d 5d308f0 9efd00d 178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d 178c53e 9efd00d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - QIMMA Leaderboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' }, animation: { 'fade-in': 'fadeIn 0.5s ease-out' }, keyframes: { fadeIn: { '0%': { opacity: '0', transform: 'translateY(10px)' }, '100%': { opacity: '1', transform: 'translateY(0)' } } } } } }
</script>
<style>
.gradient-text {
background: linear-gradient(to right, #4F46E5, #06B6D4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
html[dir="rtl"] #aboutPage {
direction: rtl;
text-align: right;
}
html[dir="rtl"] #aboutPage .resource-row,
html[dir="rtl"] #aboutPage .section-row {
flex-direction: row-reverse;
}
html[dir="rtl"] #aboutPage .citation-button-wrap {
left: 0.75rem;
right: auto;
}
html[dir="rtl"] #aboutPage #citationCode {
direction: ltr;
text-align: left;
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans transition-colors duration-300 dark:bg-darkbg dark:text-slate-100">
<div id="aboutPage" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"></div>
<script>
const ABOUT_PAGE_CONTENT = {
en: `
<div class="text-center mb-12">
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl gradient-text mb-6">About QIMMA</h1>
</div>
<div class="space-y-12 animate-fade-in">
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg text-indigo-600 dark:text-indigo-400">
<i data-lucide="info" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">What is QIMMA?</h2>
</div>
<div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
<p class="mb-4">
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.
</p>
<p>
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.
</p>
</div>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg text-emerald-600 dark:text-emerald-400">
<i data-lucide="cpu" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">How It Works</h2>
</div>
<div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
<p class="mb-6">
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.
</p>
<h3 class="text-lg font-bold text-slate-800 dark:text-slate-200 mb-3">Evaluation Pipeline</h3>
<ul class="space-y-3 list-disc list-inside marker:text-indigo-500">
<li><strong>Submission:</strong> Users submit their Hugging Face model ID.</li>
<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>
<li><strong>Execution:</strong> Our GPU cluster loads the model and runs the benchmark suite across all tracks.</li>
<li><strong>Scoring:</strong> Per-subset scores are aggregated by domain and published alongside per-sample model predictions for full transparency.</li>
</ul>
</div>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-orange-100 dark:bg-orange-900/50 rounded-lg text-orange-600 dark:text-orange-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Exploring the Leaderboard</h2>
</div>
<div class="mb-6">
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Finding Models</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="search" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">Search</h4>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="sliders-horizontal" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">Model Filters</h4>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="filter" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">Benchmark Filters</h4>
</div>
<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>
</div>
</div>
</div>
<div class="mb-6">
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Controlling the View</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="eye" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">Column Visibility</h4>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="arrow-up-down" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">Sortable Columns</h4>
</div>
<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>
</div>
</div>
</div>
<div class="mb-6">
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">Analyzing Results</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="trophy" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">Ranking Mode</h4>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="calculator" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">Filtered Average</h4>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="panel-right-open" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">Model Detail View</h4>
</div>
<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>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
<i data-lucide="bar-chart-2" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Benchmarks & Metrics</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">Cultural Understanding</h4>
<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>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">STEM</h4>
<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>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">Legal</h4>
<div class="flex gap-1">
<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>
<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>
</div>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">Medical</h4>
<div class="flex gap-1">
<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>
<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>
</div>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">MedArabiQ, MedAraBench — evaluating healthcare knowledge, clinical reasoning, and medical terminology in Arabic.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">Poetry & Literature</h4>
<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>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">Trust & Safety</h4>
<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>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">Code Generation</h4>
<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>
</div>
<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>
</div>
</div>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-6">
<div class="p-2 bg-cyan-100 dark:bg-cyan-900/50 rounded-lg text-cyan-600 dark:text-cyan-400">
<i data-lucide="link" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Resources</h2>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<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">
<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">
<i data-lucide="file-text" class="w-5 h-5 shrink-0"></i>
<span class="font-semibold">Paper</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
Describes the full methodology, benchmark design, and analysis behind QIMMA — including task selection, scoring, and model comparisons.
</p>
<span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
Read on arXiv <i data-lucide="arrow-right" class="w-3 h-3"></i>
</span>
</a>
<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">
<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">
<i data-lucide="newspaper" class="w-5 h-5 shrink-0"></i>
<span class="font-semibold">Blog Post</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
A high-level overview of QIMMA, its goals, the benchmarks it covers, and key findings from the evaluation of Arabic language models.
</p>
<span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
Read on Hugging Face <i data-lucide="arrow-right" class="w-3 h-3"></i>
</span>
</a>
<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">
<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">
<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>
<span class="font-semibold">GitHub Repository</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
Contains the full evaluation pipeline used to produce every score on this leaderboard. Use it to reproduce results, run evaluations on your own models, or extend the benchmark suite.
</p>
<span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
View on GitHub <i data-lucide="arrow-right" class="w-3 h-3"></i>
</span>
</a>
</div>
<p class="mt-5 text-sm text-slate-600 dark:text-slate-400">
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>.
</p>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-amber-100 dark:bg-amber-900/50 rounded-lg text-amber-600 dark:text-amber-400">
<i data-lucide="sparkles" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Acknowledgements</h2>
</div>
<p class="text-slate-600 dark:text-slate-300 leading-relaxed">
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.
</p>
</section>
</div>
<div class="mt-12 border-t border-slate-200 dark:border-slate-700 pt-8 pb-8">
<h3 class="text-xl font-bold text-center text-slate-800 dark:text-slate-100 mb-6">Citation</h3>
<div class="max-w-4xl mx-auto relative group">
<div class="citation-button-wrap absolute top-3 right-3">
<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">
<i id="copyIcon" data-lucide="copy" class="w-4 h-4"></i>
</button>
</div>
<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,
title={Are Arabic Benchmarks Reliable? QIMMA's Quality-First Approach to LLM Evaluation},
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},
year={2026},
eprint={2604.03395},
archivePrefix={arXiv},
primaryClass={cs.CL},
url={https://arxiv.org/abs/2604.03395},
}</pre>
</div>
</div>
`,
ar: `
<div class="text-center mb-12">
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl gradient-text mb-6">حول QIMMA</h1>
</div>
<div class="space-y-12 animate-fade-in">
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg text-indigo-600 dark:text-indigo-400">
<i data-lucide="info" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">ما هي QIMMA؟</h2>
</div>
<div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
<p class="mb-4">
QIMMA قمّة هي لوحة صدارة عربية مضمونة الجودة لتقييم النماذج اللغوية، مبنية على 14 معيارًا تقييمياً تم اختيارها بعناية، وتغطي مجالات العلوم والتقنية والهندسة والرياضيات، والاستدلال القانوني، والمعرفة الطبية، والشعر، والفهم الثقافي، والبرمجة. تضم QIMMA أكثر من 52,000 عينة تم تحقق من جودتها وتضم الاختيار من متعدد، والإجابة التوليدية، وتقييم البرمجي. وأكثر من 99% من محتوى QIMMA عربيُّ الأصل، مما يضمن تقييمًا لغويًا وثقافيًا أصيلًا بدلًا من الاعتماد على مواد مترجمة.
</p>
<p>
بنية QIMMA عبر عملية منهجية، حيث خضعت المعايير المرشحة لمسار تحقق من الجودة يعتمد على عدة نماذج، وكشف عن مشكلات في العينات، منها الإجابات المرجعية الخاطئة أو الناقصة أو غير الصالحة، ومشكلات ترميز النص، وغيرها الكثير. لم تصل إلى لوحة الصدارة النهائية إلا العينات النظيفة والمتحقق منها. كما كشفت هذه العملية أن مشكلات الجودة أكثر انتشارًا في المعايير العربية الحالية مما كان موثقًا سابقًا.
</p>
</div>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg text-emerald-600 dark:text-emerald-400">
<i data-lucide="cpu" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">كيف تعمل المنصة</h2>
</div>
<div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300 leading-relaxed">
<p class="mb-6">
تستخدم 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>. ويتم تشغيل جميع النماذج ضمن بيئة مضبوطة مع قوالب توجيه ثابته لضمان مقارنة عادلة.
</p>
<h3 class="text-lg font-bold text-slate-800 dark:text-slate-200 mb-3">مسار التقيم</h3>
<ul class="space-y-3 list-disc list-inside marker:text-indigo-500">
<li><strong>الإرسال:</strong> يرسل المستخدمون اسم النموذج الخاص بهم على Hugging Face.</li>
<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>
<li><strong>التنفيذ:</strong> تقوم الحواسيب ال GPU لدينا بتحميل النموذج وتشغيل مجموعة المعايير التقييمية عبر جميع المسارات.</li>
<li><strong>التقيم:</strong> تُجمع الدرجات على مستوى الأجزاء الفرعية بحسب المجال، وتُنشر إلى جانب تنبؤات النموذج لكل عينة لضمان الشفافية الكاملة.</li>
</ul>
</div>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-orange-100 dark:bg-orange-900/50 rounded-lg text-orange-600 dark:text-orange-400">
<i data-lucide="layout-dashboard" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">استكشاف لوحة الصدارة</h2>
</div>
<div class="mb-6">
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">العثور على النماذج</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="search" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">البحث</h4>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">اعثر فورًا على أي نموذج بكتابة <strong class="font-semibold text-slate-700 dark:text-slate-300">اسمه أو الجهة المطوّرة له</strong>.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="sliders-horizontal" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">فلاتر النموذج</h4>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="filter" class="w-4 h-4 text-indigo-500 dark:text-indigo-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">فلاتر المعايير</h4>
</div>
<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>
</div>
</div>
</div>
<div class="mb-6">
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">التحكم في العرض</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="eye" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">إظهار الأعمدة</h4>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">أوقف أو شغل أيا من <strong class="font-semibold text-slate-700 dark:text-slate-300">أعمدة المعايير</strong> لإبقاء الجدول مركزًا على المهام ذات الصلة باحتياجاتك التقييمية.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="arrow-up-down" class="w-4 h-4 text-emerald-500 dark:text-emerald-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">أعمدة قابلة للترتيب</h4>
</div>
<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>
</div>
</div>
</div>
<div class="mb-6">
<p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-3">تحليل النتائج</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="trophy" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">وضع الترتيب</h4>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="calculator" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">فلترت المتوسط الحسابي</h4>
</div>
<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>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="panel-right-open" class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0"></i>
<h4 class="font-bold text-slate-800 dark:text-slate-200">عرض تفاصيل النموذج</h4>
</div>
<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>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
<i data-lucide="bar-chart-2" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">المعايير والمقاييس</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">الفهم الثقافي</h4>
<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>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">AraDiCE-Culture وArabCulture وPalmX — لتقييم المعرفة الثقافية العربية الأصيلة، والأعراف الاجتماعية، والفهم الإقليمي.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">STEM</h4>
<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>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">ArabicMMLU و3LM STEM وGAT (اختبار القدرات العامة السعودي) — لتغطية العلوم، والرياضيات، والاستدلال اللفظي، والقدرة التقنية عبر موضوعات أكاديمية متنوعة.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">القانون</h4>
<div class="flex gap-1">
<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>
<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>
</div>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">ArabLegalQA (القانون السعودي) وMizanQA (القانون المغربي) — لاختبار الاستدلال القانوني وفهم الأنظمة عبر ولايات قضائية عربية.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">الطب</h4>
<div class="flex gap-1">
<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>
<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>
</div>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">MedArabiQ وMedAraBench — لتقييم المعرفة الصحية، والاستدلال السريري، والمصطلحات الطبية باللغة العربية.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">الشعر والأدب</h4>
<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>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">FannOrFlop — لتقييم فهم الشعر العربي القديم والحديث، والأساليب البلاغية، والسياق الثقافي.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">الثقة والسلامة</h4>
<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>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">AraTrust — لاستكشاف سلوك النموذج في المحتوى الحساس، والانحياز، والسيناريوهات المرتبطة بالسلامة باللغة العربية.</p>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-700/30 rounded-xl border border-slate-100 dark:border-slate-700">
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-slate-800 dark:text-slate-200">توليد البرمجة</h4>
<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>
</div>
<p class="text-sm text-slate-600 dark:text-slate-400">3LM HumanEval+ و3LM MBPP+ — لتقييم توليد البرمجة من تعليمات عربية، ويجري تقييمها عبر الصحة الوظيفية (pass@1).</p>
</div>
</div>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-6">
<div class="p-2 bg-cyan-100 dark:bg-cyan-900/50 rounded-lg text-cyan-600 dark:text-cyan-400">
<i data-lucide="link" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">المصادر</h2>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<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">
<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">
<i data-lucide="file-text" class="w-5 h-5 shrink-0"></i>
<span class="font-semibold">الورقة البحثية</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
تصف المنهجية الكاملة، وتصميم المعايير، والتحليل الكامن وراء QIMMA، بما في ذلك اختيار المهام، واحتساب الدرجات، ومقارنات النماذج.
</p>
<span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
اقرأ على arXiv <i data-lucide="arrow-left" class="w-3 h-3"></i>
</span>
</a>
<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">
<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">
<i data-lucide="newspaper" class="w-5 h-5 shrink-0"></i>
<span class="font-semibold">المقال التعريفي</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
مقدمة موجزة إلى QIMMA، ودوافعها، والمجالات المعيارية التي تغطيها.
</p>
<span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
اقرأ على Hugging Face <i data-lucide="arrow-left" class="w-3 h-3"></i>
</span>
</a>
<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">
<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">
<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>
<span class="font-semibold">مشروع GitHub</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed flex-1">
التنفيذ المفتوح المصدر للوحة الصدارة، ومسار التقييم، وواجهة الويب.
</p>
<span class="inline-flex items-center gap-1 text-xs text-indigo-500 dark:text-indigo-400 font-medium">
افتح GitHub <i data-lucide="arrow-left" class="w-3 h-3"></i>
</span>
</a>
</div>
<p class="mt-5 text-sm text-slate-600 dark:text-slate-400">
لمشاركة الملاحظات، أو طلب إضافة معايير، أو الإبلاغ عن مشكلة، يُرجى فتح <a href="https://huggingface.co/spaces/qimma/leaderboard/discussions" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">نقاش هنا</a>.
</p>
</section>
<section class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
<div class="section-row flex items-center gap-3 mb-4">
<div class="p-2 bg-amber-100 dark:bg-amber-900/50 rounded-lg text-amber-600 dark:text-amber-400">
<i data-lucide="sparkles" class="w-6 h-6"></i>
</div>
<h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">شكر وتقدير</h2>
</div>
<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>، من خلال بنيته التحتية ودعمه المؤسسي.
</p>
</section>
</div>
<div class="mt-12 border-t border-slate-200 dark:border-slate-700 pt-8 pb-8">
<h3 class="text-xl font-bold text-center text-slate-800 dark:text-slate-100 mb-6">الاستشهاد</h3>
<div class="max-w-4xl mx-auto relative group">
<div class="citation-button-wrap absolute top-3 right-3">
<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="نسخ إلى الحافظة">
<i id="copyIcon" data-lucide="copy" class="w-4 h-4"></i>
</button>
</div>
<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,
title={Are Arabic Benchmarks Reliable? QIMMA's Quality-First Approach to LLM Evaluation},
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},
year={2026},
eprint={2604.03395},
archivePrefix={arXiv},
primaryClass={cs.CL},
url={https://arxiv.org/abs/2604.03395},
}</pre>
</div>
</div>
`
};
function applyAboutTranslations(lang) {
const page = document.getElementById('aboutPage');
if (!page) return;
page.innerHTML = ABOUT_PAGE_CONTENT[lang] || ABOUT_PAGE_CONTENT.en;
document.title = lang === 'ar' ? 'حول QIMMA' : 'About QIMMA';
if (window.lucide) lucide.createIcons();
}
function copyCitation() {
const text = document.getElementById('citationCode')?.innerText;
if (!text) return;
navigator.clipboard.writeText(text).then(() => {
const icon = document.getElementById('copyIcon');
if (!icon) return;
icon.setAttribute('data-lucide', 'check');
icon.classList.add('text-emerald-500');
if (window.lucide) lucide.createIcons();
setTimeout(() => {
icon.setAttribute('data-lucide', 'copy');
icon.classList.remove('text-emerald-500');
if (window.lucide) lucide.createIcons();
}, 2000);
});
}
applyAboutTranslations(window.getCurrentLanguage ? window.getCurrentLanguage() : 'en');
if (window.registerLanguageListener) {
window.registerLanguageListener(applyAboutTranslations);
}
</script>
</body>
</html>
|