Hugging Face's logo

Spaces:
jayminban
/
41-llms-evaluated-locally-on-19-benchmarks
Running

App Files Community
1
jayminban commited on
Commit
8c5861a
·
1 Parent(s): fef0350

index.html add

Browse files
Files changed (1) hide show
  1. index.html +501 -18
index.html CHANGED
@@ -1,19 +1,502 @@
 
 
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+
3
  <!doctype html>
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="utf-8" />
7
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
8
+ <title>LLM Benchmarks — Overall Rank</title>
9
+
10
+ <style>
11
+ /* ====== Base page ====== */
12
+ :root {
13
+ --bg: #0b1220; /* page background */
14
+ --panel: #0e1626; /* table background */
15
+ --panel-2: #0b1220; /* zebra alt */
16
+ --border: #1f2937; /* borders */
17
+ --text: #e5e7eb; /* body text */
18
+ --muted: #a3aab8; /* caption */
19
+ --head-bg: #111827; /* header background */
20
+ --head-fg: #ffffff; /* header text */
21
+ --accent: #60a5fa; /* subtle accents */
22
+ --shadow: 0 8px 24px rgba(0,0,0,.35);
23
+ }
24
+ html, body { height: 100%; }
25
+ body {
26
+ margin: 0;
27
+ background: var(--bg);
28
+ color: var(--text);
29
+ font: 14px/1.45 Inter, Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, Segoe UI, Noto Sans, sans-serif;
30
+ -webkit-font-smoothing: antialiased;
31
+ font-feature-settings: "tnum" 1, "lnum" 1; /* tabular lining numbers */
32
+ }
33
+
34
+ /* ====== Layout ====== */
35
+ .wrap {
36
+ max-width: 1200px;
37
+ margin: 32px auto 48px;
38
+ padding: 0 16px;
39
+ }
40
+ .title {
41
+ margin: 0 0 12px;
42
+ font-size: 22px;
43
+ font-weight: 800;
44
+ letter-spacing: .2px;
45
+ }
46
+ .subtitle {
47
+ margin: 0 0 20px;
48
+ color: var(--muted);
49
+ font-size: 13px;
50
+ }
51
+
52
+ /* ====== Table container (scroll if narrow) ====== */
53
+ .table-card {
54
+ background: var(--panel);
55
+ border: 1px solid var(--border);
56
+ border-radius: 14px;
57
+ box-shadow: var(--shadow);
58
+ overflow: auto; /* horizontal scroll if needed */
59
+ }
60
+
61
+ /* ====== Table ====== */
62
+ table {
63
+ width: 100%;
64
+ border-collapse: separate;
65
+ border-spacing: 0;
66
+ min-width: 720px; /* avoid cramped columns */
67
+ }
68
+ thead th {
69
+ position: sticky;
70
+ top: 0;
71
+ z-index: 2;
72
+ background: var(--head-bg);
73
+ color: var(--head-fg);
74
+ text-align: left;
75
+ font-weight: 700;
76
+ padding: 12px 14px;
77
+ border-bottom: 1px solid var(--border);
78
+ }
79
+ tbody td {
80
+ padding: 10px 14px;
81
+ border-bottom: 1px solid var(--border);
82
+ vertical-align: middle;
83
+ }
84
+ tbody tr:nth-child(odd) { background: var(--panel-2); }
85
+ tbody tr:nth-child(even) { background: var(--panel); }
86
+ tbody tr:hover { outline: 2px solid rgba(96,165,250,.35); outline-offset: -2px; }
87
+
88
+ /* Align text vs numbers */
89
+ /* Left-align the model name; right-align time/rank columns by default */
90
+ tbody td:first-child, thead th:first-child { text-align: left; }
91
+ tbody td:not(:first-child), thead th:not(:first-child) { text-align: right; }
92
+
93
+ /* Rounded corners for the sticky header */
94
+ thead th:first-child { border-top-left-radius: 14px; }
95
+ thead th:last-child { border-top-right-radius: 14px; }
96
+ tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
97
+ tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; }
98
+
99
+ /* Top-3 emphasis (will be added as a class via JS) */
100
+ .top1 td, .top2 td, .top3 td { font-weight: 800; }
101
+ .medal { margin-left: 6px; font-size: 13px; opacity: .95; }
102
+
103
+ /* Caption style if your dump includes <caption> */
104
+ caption {
105
+ caption-side: top;
106
+ padding: 14px 14px 6px;
107
+ text-align: left;
108
+ color: var(--muted);
109
+ font-weight: 600;
110
+ letter-spacing: .2px;
111
+ }
112
+
113
+ /* Make links subtle if you add them later */
114
+ a { color: var(--accent); text-decoration: none; }
115
+ a:hover { text-decoration: underline; }
116
+ </style>
117
+ </head>
118
+ <body>
119
+ <div class="wrap">
120
+ <h1 class="title">Overall Rank (Average Rank)</h1>
121
+
122
+ <div class="table-card">
123
+ <!-- 🔽 Paste your raw HTML table inside this div -->
124
+ <div id="table-slot">
125
+ <!-- Example: your pandas to_html dump goes here -->
126
+ <!-- <table> ... </table> -->
127
+ <table border="1" class="dataframe">
128
+ <thead>
129
+ <tr style="text-align: right;">
130
+ <th>Model Name</th>
131
+ <th>Total Time</th>
132
+ <th>GPU Util Time</th>
133
+ <th>Mean Score</th>
134
+ <th>Overall Rank</th>
135
+ </tr>
136
+ </thead>
137
+ <tbody>
138
+ <tr>
139
+ <td>google_gemma-3-12b-it</td>
140
+ <td>15h 45m</td>
141
+ <td>14h 8m</td>
142
+ <td>0.6038</td>
143
+ <td>1</td>
144
+ </tr>
145
+ <tr>
146
+ <td>Qwen_Qwen3-14B (8bit)</td>
147
+ <td>29h 45m</td>
148
+ <td>17h 29m</td>
149
+ <td>0.5961</td>
150
+ <td>2</td>
151
+ </tr>
152
+ <tr>
153
+ <td>openchat_openchat-3.6-8b-20240522</td>
154
+ <td>7h 51m</td>
155
+ <td>6h 59m</td>
156
+ <td>0.5871</td>
157
+ <td>3</td>
158
+ </tr>
159
+ <tr>
160
+ <td>Qwen_Qwen3-8B</td>
161
+ <td>15h 31m</td>
162
+ <td>13h 44m</td>
163
+ <td>0.5859</td>
164
+ <td>4</td>
165
+ </tr>
166
+ <tr>
167
+ <td>Qwen_Qwen2.5-7B-Instruct</td>
168
+ <td>9h 36m</td>
169
+ <td>8h 33m</td>
170
+ <td>0.5788</td>
171
+ <td>5</td>
172
+ </tr>
173
+ <tr>
174
+ <td>Qwen_Qwen2.5-14B-Instruct (8bit)</td>
175
+ <td>52h 44m</td>
176
+ <td>29h 32m</td>
177
+ <td>0.5775</td>
178
+ <td>6</td>
179
+ </tr>
180
+ <tr>
181
+ <td>01-ai_Yi-1.5-9B</td>
182
+ <td>11h 43m</td>
183
+ <td>10h 26m</td>
184
+ <td>0.5676</td>
185
+ <td>7</td>
186
+ </tr>
187
+ <tr>
188
+ <td>Qwen_Qwen2.5-7B-Instruct-1M</td>
189
+ <td>11h 17m</td>
190
+ <td>10h 10m</td>
191
+ <td>0.5672</td>
192
+ <td>8</td>
193
+ </tr>
194
+ <tr>
195
+ <td>meta-llama_Llama-3.1-8B-Instruct</td>
196
+ <td>12h 19m</td>
197
+ <td>10h 52m</td>
198
+ <td>0.5653</td>
199
+ <td>9</td>
200
+ </tr>
201
+ <tr>
202
+ <td>01-ai_Yi-1.5-9B-Chat</td>
203
+ <td>13h 54m</td>
204
+ <td>12h 15m</td>
205
+ <td>0.5621</td>
206
+ <td>10</td>
207
+ </tr>
208
+ <tr>
209
+ <td>mistralai_Ministral-8B-Instruct-2410</td>
210
+ <td>10h 46m</td>
211
+ <td>9h 27m</td>
212
+ <td>0.5576</td>
213
+ <td>11</td>
214
+ </tr>
215
+ <tr>
216
+ <td>meta-llama_Meta-Llama-3-8B-Instruct</td>
217
+ <td>6h 30m</td>
218
+ <td>5h 46m</td>
219
+ <td>0.5528</td>
220
+ <td>12</td>
221
+ </tr>
222
+ <tr>
223
+ <td>Qwen_Qwen3-4B</td>
224
+ <td>5h 51m</td>
225
+ <td>5h 3m</td>
226
+ <td>0.5510</td>
227
+ <td>13</td>
228
+ </tr>
229
+ <tr>
230
+ <td>NousResearch_Hermes-2-Pro-Mistral-7B</td>
231
+ <td>8h 27m</td>
232
+ <td>7h 28m</td>
233
+ <td>0.5480</td>
234
+ <td>14</td>
235
+ </tr>
236
+ <tr>
237
+ <td>mistralai_Mistral-7B-Instruct-v0.3</td>
238
+ <td>8h 38m</td>
239
+ <td>7h 41m</td>
240
+ <td>0.5451</td>
241
+ <td>15</td>
242
+ </tr>
243
+ <tr>
244
+ <td>google_gemma-3-4b-it</td>
245
+ <td>4h 51m</td>
246
+ <td>3h 50m</td>
247
+ <td>0.5368</td>
248
+ <td>16</td>
249
+ </tr>
250
+ <tr>
251
+ <td>01-ai_Yi-1.5-6B-Chat</td>
252
+ <td>8h 4m</td>
253
+ <td>7h 1m</td>
254
+ <td>0.5335</td>
255
+ <td>17</td>
256
+ </tr>
257
+ <tr>
258
+ <td>01-ai_Yi-1.5-6B</td>
259
+ <td>4h 28m</td>
260
+ <td>3h 54m</td>
261
+ <td>0.5312</td>
262
+ <td>18</td>
263
+ </tr>
264
+ <tr>
265
+ <td>Qwen_Qwen2-7B-Instruct</td>
266
+ <td>11h 30m</td>
267
+ <td>10h 11m</td>
268
+ <td>0.5271</td>
269
+ <td>19</td>
270
+ </tr>
271
+ <tr>
272
+ <td>deepseek-ai_DeepSeek-R1-0528-Qwen3-8B</td>
273
+ <td>17h 57m</td>
274
+ <td>15h 30m</td>
275
+ <td>0.5219</td>
276
+ <td>20</td>
277
+ </tr>
278
+ <tr>
279
+ <td>meta-llama_Llama-3.2-3B-Instruct</td>
280
+ <td>7h 12m</td>
281
+ <td>5h 57m</td>
282
+ <td>0.5048</td>
283
+ <td>21</td>
284
+ </tr>
285
+ <tr>
286
+ <td>Qwen_Qwen2.5-3B-Instruct</td>
287
+ <td>7h 48m</td>
288
+ <td>6h 30m</td>
289
+ <td>0.4939</td>
290
+ <td>22</td>
291
+ </tr>
292
+ <tr>
293
+ <td>Qwen_Qwen2.5-Math-7B</td>
294
+ <td>27h 21m</td>
295
+ <td>24h 38m</td>
296
+ <td>0.4907</td>
297
+ <td>23</td>
298
+ </tr>
299
+ <tr>
300
+ <td>deepseek-ai_deepseek-llm-7b-chat</td>
301
+ <td>10h 6m</td>
302
+ <td>9h 8m</td>
303
+ <td>0.4869</td>
304
+ <td>24</td>
305
+ </tr>
306
+ <tr>
307
+ <td>deepseek-ai_DeepSeek-R1-Distill-Llama-8B</td>
308
+ <td>11h 46m</td>
309
+ <td>10h 36m</td>
310
+ <td>0.4830</td>
311
+ <td>25</td>
312
+ </tr>
313
+ <tr>
314
+ <td>meta-llama_Llama-2-13b-hf</td>
315
+ <td>19h 21m</td>
316
+ <td>17h 38m</td>
317
+ <td>0.4819</td>
318
+ <td>26</td>
319
+ </tr>
320
+ <tr>
321
+ <td>meta-llama_Llama-2-13b-chat-hf</td>
322
+ <td>17h 8m</td>
323
+ <td>15h 37m</td>
324
+ <td>0.4813</td>
325
+ <td>27</td>
326
+ </tr>
327
+ <tr>
328
+ <td>deepseek-ai_DeepSeek-R1-Distill-Qwen-7B</td>
329
+ <td>6h 28m</td>
330
+ <td>5h 43m</td>
331
+ <td>0.4644</td>
332
+ <td>28</td>
333
+ </tr>
334
+ <tr>
335
+ <td>Qwen_Qwen2.5-1.5B-Instruct</td>
336
+ <td>3h 20m</td>
337
+ <td>2h 36m</td>
338
+ <td>0.4608</td>
339
+ <td>29</td>
340
+ </tr>
341
+ <tr>
342
+ <td>Qwen_Qwen3-1.7B</td>
343
+ <td>4h 25m</td>
344
+ <td>3h 36m</td>
345
+ <td>0.4597</td>
346
+ <td>30</td>
347
+ </tr>
348
+ <tr>
349
+ <td>Qwen_Qwen2.5-Math-7B-Instruct</td>
350
+ <td>5h 37m</td>
351
+ <td>4h 57m</td>
352
+ <td>0.4596</td>
353
+ <td>31</td>
354
+ </tr>
355
+ <tr>
356
+ <td>meta-llama_Llama-2-7b-chat-hf</td>
357
+ <td>6h 57m</td>
358
+ <td>6h 7m</td>
359
+ <td>0.4525</td>
360
+ <td>32</td>
361
+ </tr>
362
+ <tr>
363
+ <td>meta-llama_Llama-2-7b-hf</td>
364
+ <td>5h 42m</td>
365
+ <td>4h 59m</td>
366
+ <td>0.4516</td>
367
+ <td>33</td>
368
+ </tr>
369
+ <tr>
370
+ <td>deepseek-ai_deepseek-llm-7b-base</td>
371
+ <td>7h 11m</td>
372
+ <td>6h 26m</td>
373
+ <td>0.4451</td>
374
+ <td>34</td>
375
+ </tr>
376
+ <tr>
377
+ <td>deepseek-ai_deepseek-math-7b-rl</td>
378
+ <td>8h 2m</td>
379
+ <td>7h 12m</td>
380
+ <td>0.4419</td>
381
+ <td>35</td>
382
+ </tr>
383
+ <tr>
384
+ <td>meta-llama_Llama-3.2-1B-Instruct</td>
385
+ <td>3h 30m</td>
386
+ <td>2h 35m</td>
387
+ <td>0.4219</td>
388
+ <td>36</td>
389
+ </tr>
390
+ <tr>
391
+ <td>google_gemma-3-1b-it</td>
392
+ <td>6h 50m</td>
393
+ <td>4h 52m</td>
394
+ <td>0.4013</td>
395
+ <td>37</td>
396
+ </tr>
397
+ <tr>
398
+ <td>deepseek-ai_DeepSeek-R1-Distill-Qwen-1.5B</td>
399
+ <td>3h 40m</td>
400
+ <td>2h 52m</td>
401
+ <td>0.3986</td>
402
+ <td>38</td>
403
+ </tr>
404
+ <tr>
405
+ <td>Qwen_Qwen2.5-Math-1.5B-Instruct</td>
406
+ <td>3h 25m</td>
407
+ <td>2h 39m</td>
408
+ <td>0.3838</td>
409
+ <td>39</td>
410
+ </tr>
411
+ <tr>
412
+ <td>Qwen_Qwen3-0.6B</td>
413
+ <td>3h 45m</td>
414
+ <td>2h 53m</td>
415
+ <td>0.3816</td>
416
+ <td>40</td>
417
+ </tr>
418
+ <tr>
419
+ <td>Qwen_Qwen2.5-0.5B-Instruct</td>
420
+ <td>2h 34m</td>
421
+ <td>1h 48m</td>
422
+ <td>0.3799</td>
423
+ <td>41</td>
424
+ </tr>
425
+ </tbody>
426
+ </table>
427
+
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <script>
433
+ /* ========= Post-processing “magic” =========
434
+ - Finds the “Overall Rank” column by header text.
435
+ - Marks rows with ranks 1,2,3 as .top1/.top2/.top3.
436
+ - Appends 🥇/🥈/🥉 after the rank cell.
437
+ - Right/left aligns based on header names (fallback if your dump
438
+ didn’t preserve <thead> or orders change).
439
+ */
440
+ (function () {
441
+ const slot = document.getElementById('table-slot');
442
+ const table = slot.querySelector('table');
443
+ if (!table) return;
444
+
445
+ // Ensure we have a THEAD; some dumps put <tr> directly
446
+ let thead = table.querySelector('thead');
447
+ if (!thead) {
448
+ const firstRow = table.querySelector('tr');
449
+ if (firstRow) {
450
+ thead = document.createElement('thead');
451
+ const headRow = firstRow.cloneNode(true);
452
+ thead.appendChild(headRow);
453
+ table.insertBefore(thead, firstRow);
454
+ firstRow.remove(); // move first row into thead
455
+ const tbody = table.querySelector('tbody') || table.createTBody();
456
+ // move remaining rows into tbody if they aren't already
457
+ Array.from(table.querySelectorAll('tr')).forEach(tr => tbody.appendChild(tr));
458
+ }
459
+ }
460
+
461
+ const headCells = Array.from(table.querySelectorAll('thead th, thead td')).map(th => th.textContent.trim());
462
+ const bodyRows = Array.from(table.querySelectorAll('tbody tr'));
463
+
464
+ // Column indices
465
+ const nameIdx = headCells.findIndex(h => /model\s*name/i.test(h));
466
+ const rankIdx = headCells.findIndex(h => /overall\s*rank/i.test(h));
467
+ const totalIdx = headCells.findIndex(h => /total\s*time/i.test(h));
468
+ const utilIdx = headCells.findIndex(h => /gpu\s*util\s*time/i.test(h));
469
+
470
+ // Fallback alignments if header order is unusual
471
+ bodyRows.forEach(row => {
472
+ const cells = row.children;
473
+ if (nameIdx >= 0 && cells[nameIdx]) cells[nameIdx].style.textAlign = 'left';
474
+ [rankIdx, totalIdx, utilIdx].forEach(i => {
475
+ if (i >= 0 && cells[i]) cells[i].style.textAlign = 'right';
476
+ });
477
+ });
478
+
479
+ // Top-3 visuals
480
+ if (rankIdx >= 0) {
481
+ bodyRows.forEach(row => {
482
+ const cell = row.children[rankIdx];
483
+ if (!cell) return;
484
+ const n = parseInt((cell.textContent || '').replace(/[^\d]/g, ''), 10);
485
+ if (n === 1) { row.classList.add('top1'); cell.insertAdjacentHTML('beforeend', '<span class="medal">🥇</span>'); }
486
+ if (n === 2) { row.classList.add('top2'); cell.insertAdjacentHTML('beforeend', '<span class="medal">🥈</span>'); }
487
+ if (n === 3) { row.classList.add('top3'); cell.insertAdjacentHTML('beforeend', '<span class="medal">🥉</span>'); }
488
+ });
489
+ }
490
+
491
+ // Optional: shrink overly long model names gracefully
492
+ if (nameIdx >= 0) {
493
+ bodyRows.forEach(row => {
494
+ const c = row.children[nameIdx];
495
+ if (c) { c.style.whiteSpace = 'nowrap'; c.style.textOverflow = 'ellipsis'; c.style.overflow = 'hidden'; maxNameWidth(c, 520); }
496
+ });
497
+ }
498
+ function maxNameWidth(td, px) { td.style.maxWidth = px + 'px'; }
499
+ })();
500
+ </script>
501
+ </body>
502
+ </html>