Hugging Face's logo

Spaces:
qimma
/
leaderboard
Running on CPU Upgrade

App Files Community
LeenAlQadi commited on
Commit
fb5cae1
·
1 Parent(s): b5697c8

updated the header

Browse files
Files changed (1) hide show
  1. frontend/header.html +39 -58
frontend/header.html CHANGED
@@ -1,6 +1,5 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
-
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,43 +10,55 @@
11
  tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } } }
12
  </script>
13
  </head>
14
-
15
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100">
16
-
17
  <div>
18
  <div class="text-center mb-10 pt-8">
19
- <h1
20
- class="text-4xl font-extrabold tracking-tight sm:text-6xl mb-4 inline-flex items-center justify-center gap-4">
21
- <span
22
- class="text-transparent bg-clip-text bg-gradient-to-r from-purple-700 to-indigo-600 dark:from-purple-400 dark:to-indigo-400">
23
- QIMMA Leaderboard
24
  </span>
25
  </h1>
26
- <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">Evaluate and compare the performance
27
- of Arabic Large Language Models.</p>
28
  </div>
29
 
30
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
31
- <div class="stat-card bg-white dark:bg-slate-800 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4
32
- transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default">
33
- <div class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl"><i data-lucide="database"
34
- class="w-6 h-6 text-indigo-600 dark:text-indigo-400"></i></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
35
  <div>
36
  <p class="text-xs font-bold uppercase text-slate-400 tracking-wider">Total Models</p>
37
  <h3 class="text-2xl font-bold text-slate-800 dark:text-white" id="stat-total-models">--</h3>
38
  </div>
39
  </div>
40
 
41
- <div class="stat-card bg-white dark:bg-slate-800 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4
42
- transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default">
43
- <div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl"><i data-lucide="activity"
44
- class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i></div>
 
 
45
  <div class="w-full">
46
  <p class="text-xs font-bold uppercase text-slate-400 tracking-wider mb-2">Eval Status</p>
47
  <div class="grid grid-cols-4 gap-1 text-center mb-2">
48
  <div>
49
- <div class="text-lg font-bold text-emerald-600 dark:text-emerald-400" id="stat-done">--
50
- </div>
51
  <div class="text-[10px] text-slate-500 dark:text-slate-400">Done</div>
52
  </div>
53
  <div>
@@ -64,21 +75,17 @@
64
  </div>
65
  </div>
66
  <div class="flex w-full h-2 rounded-full overflow-hidden bg-slate-100 dark:bg-slate-700">
67
- <div id="bar-done" class="bg-emerald-500 h-full transition-all duration-500" style="width: 0%">
68
- </div>
69
- <div id="bar-failed" class="bg-rose-500 h-full transition-all duration-500" style="width: 0%">
70
- </div>
71
- <div id="bar-running" class="bg-blue-500 h-full transition-all duration-500" style="width: 0%">
72
- </div>
73
- <div id="bar-queue" class="bg-amber-500 h-full transition-all duration-500" style="width: 0%">
74
- </div>
75
  </div>
76
  </div>
77
  </div>
78
 
79
- <div class="stat-card bg-white dark:bg-slate-800 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4
80
- transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default">
81
-
82
  <div class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl">
83
  <i data-lucide="bar-chart-2" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
84
  </div>
@@ -88,39 +95,21 @@
88
  </div>
89
  </div>
90
 
91
- <div class="bg-emerald-900 rounded-xl p-6 shadow-sm text-white relative overflow-hidden group col-span-1 sm:col-span-2 lg:col-span-1
92
- transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default">
93
- <div
94
- class="absolute -right-4 -top-4 bg-emerald-800 w-24 h-24 rounded-full opacity-50 group-hover:scale-110 transition-transform">
95
- </div>
96
-
97
- <div class="flex justify-between items-start mb-4 relative z-10">
98
- <p class="text-sm font-medium text-emerald-200 uppercase tracking-wider">Podium</p>
99
- <i data-lucide="trophy" class="w-5 h-5 text-yellow-400"></i>
100
- </div>
101
- <div id="top-performers-list" class="space-y-3 relative z-10">
102
- </div>
103
- </div>
104
  </div>
105
  </div>
106
 
107
  <script>
108
  window.updateHeaderStats = function (safeQ) {
109
  if (!safeQ) return;
110
-
111
  const doneCount = allData ? allData.length : safeQ.finished.length;
112
  const failedCount = safeQ.failed ? safeQ.failed.length : 0;
113
  const runningCount = safeQ.running ? safeQ.running.length : 0;
114
  const queueCount = safeQ.pending ? safeQ.pending.length : 0;
115
-
116
- // Update Text
117
  const setTxt = (id, val) => { if (document.getElementById(id)) document.getElementById(id).innerText = val; };
118
  setTxt('stat-done', doneCount);
119
  setTxt('stat-failed', failedCount);
120
  setTxt('stat-running', runningCount);
121
  setTxt('stat-queue', queueCount);
122
-
123
- // Update Bars
124
  const total = doneCount + failedCount + runningCount + queueCount;
125
  if (total > 0) {
126
  document.getElementById('bar-done').style.width = (doneCount / total * 100) + "%";
@@ -132,16 +121,12 @@
132
 
133
  function renderHeaderTableStats(data) {
134
  const $ = (selector) => document.querySelector(selector);
135
-
136
  if ($('#stat-total-models')) $('#stat-total-models').innerText = data.length;
137
  if ($('#stat-metrics') && window.EVAL_COLUMNS) $('#stat-metrics').innerText = window.EVAL_COLUMNS.filter(c => c !== "Average").length;
138
-
139
- // Podium Logic
140
  const avgK = Object.keys(data[0] || {}).find(k => k.includes("Average"));
141
  if (avgK && $('#top-performers-list')) {
142
  const top3 = [...data].sort((a, b) => parseFloat(b[avgK]) - parseFloat(a[avgK])).slice(0, 3);
143
  const rankStyles = ['bg-yellow-400 text-emerald-900', 'bg-slate-300 text-emerald-900', 'bg-orange-300 text-emerald-900'];
144
-
145
  $('#top-performers-list').innerHTML = top3.map((m, i) => `
146
  <div class="flex items-center gap-3">
147
  <div class="w-4 h-5 shrink-0 rounded-full ${rankStyles[i] || 'bg-slate-100 text-emerald-900'} flex items-center justify-center text-xs font-bold">${i + 1}</div>
@@ -152,14 +137,10 @@
152
  }
153
  }
154
 
155
- window.initHeader = async function () {
156
- renderHeaderTableStats(allData);
157
- };
158
-
159
  window.initHeader();
160
  if (window.lucide) lucide.createIcons();
161
  </script>
162
 
163
  </body>
164
-
165
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
10
  tailwind.config = { darkMode: 'class', theme: { extend: { colors: { darkbg: '#0f172a', darkcard: '#1e293b' } } } }
11
  </script>
12
  </head>
 
13
  <body class="bg-slate-50 text-slate-800 dark:bg-darkbg dark:text-slate-100">
 
14
  <div>
15
  <div class="text-center mb-10 pt-8">
16
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-6xl mb-4 inline-flex items-center justify-center gap-4">
17
+ <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">
18
+ QIMMA ⛰ قمة
19
+ <span class="block text-center">Leaderboard</span>
 
20
  </span>
21
  </h1>
22
+ <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">A Quality-First Arabic LLM Leaderboard to evaluate and compare the performance of Arabic Large Language Models.</p>
 
23
  </div>
24
 
25
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
26
+
27
+ <!-- Podium -->
28
+ <div class="rounded-xl p-6 shadow-sm text-white relative overflow-hidden group col-span-1 sm:col-span-2 lg:col-span-1 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
29
+ style="background: linear-gradient(to bottom, #2d7d65, #1f604f);">
30
+ <div class="absolute -right-6 -top-6 w-20 h-20 rounded-full opacity-50 group-hover:scale-[2.5] transition-transform duration-500"
31
+ style="background-color: #174d3e;"></div>
32
+ <div class="flex justify-between items-start mb-4 relative z-10">
33
+ <p class="text-sm font-medium text-white/80 uppercase tracking-wider">Podium</p>
34
+ <i data-lucide="trophy" class="w-5 h-5 text-yellow-300"></i>
35
+ </div>
36
+ <div id="top-performers-list" class="space-y-3 relative z-10"></div>
37
+ </div>
38
+
39
+ <!-- Total Models -->
40
+ <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
41
+ style="background-color: #ffffff;">
42
+ <div class="p-3 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl">
43
+ <i data-lucide="database" class="w-6 h-6 text-indigo-600 dark:text-indigo-400"></i>
44
+ </div>
45
  <div>
46
  <p class="text-xs font-bold uppercase text-slate-400 tracking-wider">Total Models</p>
47
  <h3 class="text-2xl font-bold text-slate-800 dark:text-white" id="stat-total-models">--</h3>
48
  </div>
49
  </div>
50
 
51
+ <!-- Eval Status -->
52
+ <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
53
+ style="background-color: #ffffff;">
54
+ <div class="p-3 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl">
55
+ <i data-lucide="activity" class="w-6 h-6 text-emerald-600 dark:text-emerald-400"></i>
56
+ </div>
57
  <div class="w-full">
58
  <p class="text-xs font-bold uppercase text-slate-400 tracking-wider mb-2">Eval Status</p>
59
  <div class="grid grid-cols-4 gap-1 text-center mb-2">
60
  <div>
61
+ <div class="text-lg font-bold text-emerald-600 dark:text-emerald-400" id="stat-done">--</div>
 
62
  <div class="text-[10px] text-slate-500 dark:text-slate-400">Done</div>
63
  </div>
64
  <div>
 
75
  </div>
76
  </div>
77
  <div class="flex w-full h-2 rounded-full overflow-hidden bg-slate-100 dark:bg-slate-700">
78
+ <div id="bar-done" class="bg-emerald-500 h-full transition-all duration-500" style="width: 0%"></div>
79
+ <div id="bar-failed" class="bg-rose-500 h-full transition-all duration-500" style="width: 0%"></div>
80
+ <div id="bar-running" class="bg-blue-500 h-full transition-all duration-500" style="width: 0%"></div>
81
+ <div id="bar-queue" class="bg-amber-500 h-full transition-all duration-500" style="width: 0%"></div>
 
 
 
 
82
  </div>
83
  </div>
84
  </div>
85
 
86
+ <!-- Benchmarks -->
87
+ <div class="stat-card p-4 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4 transition-all duration-300 ease-in-out transform hover:-translate-y-1 cursor-default"
88
+ style="background-color: #ffffff;">
89
  <div class="p-3 bg-purple-50 dark:bg-purple-900/30 rounded-xl">
90
  <i data-lucide="bar-chart-2" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
91
  </div>
 
95
  </div>
96
  </div>
97
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  </div>
99
  </div>
100
 
101
  <script>
102
  window.updateHeaderStats = function (safeQ) {
103
  if (!safeQ) return;
 
104
  const doneCount = allData ? allData.length : safeQ.finished.length;
105
  const failedCount = safeQ.failed ? safeQ.failed.length : 0;
106
  const runningCount = safeQ.running ? safeQ.running.length : 0;
107
  const queueCount = safeQ.pending ? safeQ.pending.length : 0;
 
 
108
  const setTxt = (id, val) => { if (document.getElementById(id)) document.getElementById(id).innerText = val; };
109
  setTxt('stat-done', doneCount);
110
  setTxt('stat-failed', failedCount);
111
  setTxt('stat-running', runningCount);
112
  setTxt('stat-queue', queueCount);
 
 
113
  const total = doneCount + failedCount + runningCount + queueCount;
114
  if (total > 0) {
115
  document.getElementById('bar-done').style.width = (doneCount / total * 100) + "%";
 
121
 
122
  function renderHeaderTableStats(data) {
123
  const $ = (selector) => document.querySelector(selector);
 
124
  if ($('#stat-total-models')) $('#stat-total-models').innerText = data.length;
125
  if ($('#stat-metrics') && window.EVAL_COLUMNS) $('#stat-metrics').innerText = window.EVAL_COLUMNS.filter(c => c !== "Average").length;
 
 
126
  const avgK = Object.keys(data[0] || {}).find(k => k.includes("Average"));
127
  if (avgK && $('#top-performers-list')) {
128
  const top3 = [...data].sort((a, b) => parseFloat(b[avgK]) - parseFloat(a[avgK])).slice(0, 3);
129
  const rankStyles = ['bg-yellow-400 text-emerald-900', 'bg-slate-300 text-emerald-900', 'bg-orange-300 text-emerald-900'];
 
130
  $('#top-performers-list').innerHTML = top3.map((m, i) => `
131
  <div class="flex items-center gap-3">
132
  <div class="w-4 h-5 shrink-0 rounded-full ${rankStyles[i] || 'bg-slate-100 text-emerald-900'} flex items-center justify-center text-xs font-bold">${i + 1}</div>
 
137
  }
138
  }
139
 
140
+ window.initHeader = async function () { renderHeaderTableStats(allData); };
 
 
 
141
  window.initHeader();
142
  if (window.lucide) lucide.createIcons();
143
  </script>
144
 
145
  </body>
 
146
  </html>