Hugging Face's logo

Spaces:
thejagstudio
/
gemma-3-1b-thinking-benchmark
Running

App Files Community
thejagstudio commited on
Commit
8a8882b
·
verified ·
1 Parent(s): fa4d0e7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +552 -25
index.html CHANGED
@@ -1,27 +1,554 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>IPL Live Match in Meet</title>
5
- <script src="./hls.min.js"></script>
6
- <style>
7
- body{
8
- height:"fit-content"
9
- }
10
- </style>
11
- </head>
12
- <body>
13
- <video id="video" style="margin-bottom:10px;border-radius:10px;overflow:hidden" width='100%' controls autoplay src="https://babbysports.com/789345/index.m3u8?DVR&token=cfe191f58cfb36cc44ac5c6869cf5ca06bf0165e-912de8ba1cb64307520b72b1aa267706-1761373696-1761362896&autoplay=true">
14
- </video>
15
- <!-- <iframe width="100%" style="margin-bottom:10px;border-radius:10px;overflow:hidden" src="https://www.youtube.com/embed/BLlTFapgvOo" title="Rasraj Ji Maharaj - Lo-fi Version श्री हनुमान चालीसा { Slowed &amp; Reverb } Shree Hanuman Chalisa" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> -->
16
- <script>
17
- if (Hls.isSupported()) {
18
- var video = document.getElementById('video');
19
- var hls = new Hls();
20
- hls.loadSource(video.src);
21
- hls.attachMedia(video);
22
- }else{
23
- alert("Cannot stream HLS, use another video source");
24
- }
25
- </script>
26
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  </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">
6
+ <title>Gemma 3 1B Thinking - Model Scorecard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
12
+ .chart-container { position: relative; height: 300px; width: 100%; }
13
+ .thinking-badge {
14
+ background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
15
+ -webkit-background-clip: text;
16
+ -webkit-text-fill-color: transparent;
17
+ font-weight: 800;
18
+ }
19
+ .card { background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
20
+ .table-row-hover:hover { background-color: #f8fafc; }
21
+ </style>
22
+ </head>
23
+ <body>
24
+ <!-- Header Section -->
25
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
26
+ <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8">
27
+ <div class="flex items-center">
28
+ <div class="h-16 w-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white text-2xl font-bold shadow-lg mr-6">
29
+ G3
30
+ </div>
31
+ <div>
32
+ <div class="flex items-center gap-2">
33
+ <h1 class="text-3xl font-bold text-gray-900">Gemma 3 1B <span class="thinking-badge">Thinking</span></h1>
34
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-blue-200">Google</span>
35
+ <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded border border-purple-200">Thinking</span>
36
+ </div>
37
+ <p class="text-gray-500 mt-1">gemma-3-1b-thinking-preview • 1.2B Parameters • 128k Context</p>
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
43
+ <!-- Overview Card -->
44
+ <div class="card p-6 col-span-2">
45
+ <h2 class="text-lg font-semibold text-gray-900 mb-4">Overview</h2>
46
+ <p class="text-gray-600 leading-relaxed mb-4">
47
+ The <strong>Gemma 3 1B Thinking</strong> model introduces chain-of-thought capabilities to the edge-device class. While retaining the compact 1B footprint, it delivers improved reasoning capabilities compared to its non-thinking counterpart.
48
+ </p>
49
+ <p class="text-gray-600 leading-relaxed">
50
+ This model achieves a <span class="font-bold text-blue-600">~15% performance improvement</span> over the standard Gemma 3 1B, optimizing it for efficiency on mobile hardware.
51
+ </p>
52
+ <div class="grid grid-cols-3 gap-4 mt-6">
53
+ <div class="bg-gray-50 p-3 rounded-lg">
54
+ <div class="text-xs text-gray-500 uppercase tracking-wide">Parameters</div>
55
+ <div class="text-lg font-bold text-gray-900">1.2B</div>
56
+ </div>
57
+ <div class="bg-gray-50 p-3 rounded-lg">
58
+ <div class="text-xs text-gray-500 uppercase tracking-wide">Context Window</div>
59
+ <div class="text-lg font-bold text-gray-900">128k</div>
60
+ </div>
61
+ <div class="bg-gray-50 p-3 rounded-lg">
62
+ <div class="text-xs text-gray-500 uppercase tracking-wide">Active Params</div>
63
+ <div class="text-lg font-bold text-gray-900">1.2B</div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Key Stats -->
69
+ <div class="card p-6 flex flex-col justify-center">
70
+ <h3 class="text-sm font-medium text-gray-500 uppercase mb-6">Performance Highlights</h3>
71
+
72
+ <div class="space-y-6">
73
+ <div>
74
+ <div class="flex justify-between mb-1">
75
+ <span class="text-sm font-medium text-gray-700">GPQA Diamond</span>
76
+ <span class="text-sm font-bold text-purple-600">27.6% (+15%)</span>
77
+ </div>
78
+ <div class="w-full bg-gray-200 rounded-full h-2">
79
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 27.6%"></div>
80
+ </div>
81
+ </div>
82
+ <div>
83
+ <div class="flex justify-between mb-1">
84
+ <span class="text-sm font-medium text-gray-700">IFBench</span>
85
+ <span class="text-sm font-bold text-purple-600">23.0% (+15%)</span>
86
+ </div>
87
+ <div class="w-full bg-gray-200 rounded-full h-2">
88
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 23%"></div>
89
+ </div>
90
+ </div>
91
+ <div>
92
+ <div class="flex justify-between mb-1">
93
+ <span class="text-sm font-medium text-gray-700">MMLU-Pro</span>
94
+ <span class="text-sm font-bold text-purple-600">16.1% (+15%)</span>
95
+ </div>
96
+ <div class="w-full bg-gray-200 rounded-full h-2">
97
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 16.1%"></div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Charts Section -->
105
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Benchmarks</h2>
106
+
107
+ <!-- Scatter Plot -->
108
+ <div class="card p-6 mb-8">
109
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Quality vs. Cost Trade-off</h3>
110
+ <p class="text-sm text-gray-500 mb-4">Comparing Intelligence (GPQA Diamond Score) against Inference Cost ($/1M tokens). Higher and to the left is better.</p>
111
+ <div class="chart-container" style="height: 450px;">
112
+ <canvas id="scatterChart"></canvas>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Grid of Bar Charts -->
117
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
118
+
119
+ <!-- GPQA -->
120
+ <div class="card p-6">
121
+ <div class="flex justify-between items-center mb-4">
122
+ <h3 class="text-lg font-semibold text-gray-800">GPQA Diamond</h3>
123
+ <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+15% vs Base</span>
124
+ </div>
125
+ <div class="chart-container">
126
+ <canvas id="gpqaChart"></canvas>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- MMLU-Pro -->
131
+ <div class="card p-6">
132
+ <div class="flex justify-between items-center mb-4">
133
+ <h3 class="text-lg font-semibold text-gray-800">MMLU-Pro</h3>
134
+ <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+15% vs Base</span>
135
+ </div>
136
+ <div class="chart-container">
137
+ <canvas id="mmluProChart"></canvas>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- AIME 2025 -->
142
+ <div class="card p-6">
143
+ <div class="flex justify-between items-center mb-4">
144
+ <h3 class="text-lg font-semibold text-gray-800">AIME 2025 (Math)</h3>
145
+ <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+15% vs Base</span>
146
+ </div>
147
+ <div class="chart-container">
148
+ <canvas id="aimeChart"></canvas>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- IFBench -->
153
+ <div class="card p-6">
154
+ <div class="flex justify-between items-center mb-4">
155
+ <h3 class="text-lg font-semibold text-gray-800">IFBench</h3>
156
+ <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+15% vs Base</span>
157
+ </div>
158
+ <div class="chart-container">
159
+ <canvas id="ifBenchChart"></canvas>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- LiveCodeBench -->
164
+ <div class="card p-6">
165
+ <div class="flex justify-between items-center mb-4">
166
+ <h3 class="text-lg font-semibold text-gray-800">LiveCodeBench</h3>
167
+ <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+15% vs Base</span>
168
+ </div>
169
+ <div class="chart-container">
170
+ <canvas id="liveCodeChart"></canvas>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Humanity's Last Exam -->
175
+ <div class="card p-6">
176
+ <div class="flex justify-between items-center mb-4">
177
+ <h3 class="text-lg font-semibold text-gray-800">Humanity's Last Exam</h3>
178
+ <span class="text-xs font-bold bg-blue-100 text-blue-700 px-2 py-1 rounded">+15% vs Base</span>
179
+ </div>
180
+ <div class="chart-container">
181
+ <canvas id="hleChart"></canvas>
182
+ </div>
183
+ </div>
184
+
185
+ </div>
186
+
187
+ <!-- Detailed Benchmarks Table -->
188
+ <div class="card overflow-hidden mb-12">
189
+ <div class="px-6 py-4 border-b border-gray-100 bg-gray-50">
190
+ <h3 class="text-lg font-bold text-gray-800">Detailed Benchmark Results</h3>
191
+ <p class="text-sm text-gray-500">Comparison based on the original data table.</p>
192
+ </div>
193
+ <div class="overflow-x-auto">
194
+ <table class="min-w-full text-left text-sm whitespace-nowrap">
195
+ <thead>
196
+ <tr class="bg-gray-50 border-b border-gray-100 text-gray-500 uppercase tracking-wider text-xs">
197
+ <th class="px-6 py-4 font-semibold">Benchmark</th>
198
+ <th class="px-6 py-4 font-semibold">Analysis Method</th>
199
+ <th class="px-6 py-4 font-semibold text-center">Base Score (1B)</th>
200
+ <th class="px-6 py-4 font-semibold text-center">Thinking Score (+15%)</th>
201
+ <th class="px-6 py-4 font-semibold text-right">Self Reported</th>
202
+ </tr>
203
+ </thead>
204
+ <tbody class="divide-y divide-gray-100">
205
+ <!-- BIG-Bench Extra Hard -->
206
+ <tr class="table-row-hover transition-colors">
207
+ <td class="px-6 py-4">
208
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">BIG-Bench Extra Hard</div>
209
+ </td>
210
+ <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
211
+ <td class="px-6 py-4 text-center text-gray-500">0.07/1</td>
212
+ <td class="px-6 py-4 text-center">
213
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.08/1</span>
214
+ </td>
215
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
216
+ </tr>
217
+ <!-- BIG-Bench Hard -->
218
+ <tr class="table-row-hover transition-colors">
219
+ <td class="px-6 py-4">
220
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">BIG-Bench Hard</div>
221
+ </td>
222
+ <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
223
+ <td class="px-6 py-4 text-center text-gray-500">0.39/1</td>
224
+ <td class="px-6 py-4 text-center">
225
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.45/1</span>
226
+ </td>
227
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
228
+ </tr>
229
+ <!-- Bird-SQL -->
230
+ <tr class="table-row-hover transition-colors">
231
+ <td class="px-6 py-4">
232
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">Bird-SQL (dev)</div>
233
+ </td>
234
+ <td class="px-6 py-4 text-gray-600">- evaluation</td>
235
+ <td class="px-6 py-4 text-center text-gray-500">0.06/1</td>
236
+ <td class="px-6 py-4 text-center">
237
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.07/1</span>
238
+ </td>
239
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
240
+ </tr>
241
+ <!-- FACTS Grounding -->
242
+ <tr class="table-row-hover transition-colors">
243
+ <td class="px-6 py-4">
244
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">FACTS Grounding</div>
245
+ </td>
246
+ <td class="px-6 py-4 text-gray-600">- evaluation</td>
247
+ <td class="px-6 py-4 text-center text-gray-500">0.36/1</td>
248
+ <td class="px-6 py-4 text-center">
249
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.41/1</span>
250
+ </td>
251
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
252
+ </tr>
253
+ <!-- GPQA -->
254
+ <tr class="table-row-hover transition-colors">
255
+ <td class="px-6 py-4">
256
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">GPQA</div>
257
+ </td>
258
+ <td class="px-6 py-4 text-gray-600">0-shot diamond</td>
259
+ <td class="px-6 py-4 text-center text-gray-500">0.19/1</td>
260
+ <td class="px-6 py-4 text-center">
261
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.22/1</span>
262
+ </td>
263
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
264
+ </tr>
265
+ <!-- GSM8k -->
266
+ <tr class="table-row-hover transition-colors">
267
+ <td class="px-6 py-4">
268
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">GSM8k</div>
269
+ </td>
270
+ <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
271
+ <td class="px-6 py-4 text-center text-gray-500">0.63/1</td>
272
+ <td class="px-6 py-4 text-center">
273
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.72/1</span>
274
+ </td>
275
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
276
+ </tr>
277
+ <!-- HiddenMath -->
278
+ <tr class="table-row-hover transition-colors">
279
+ <td class="px-6 py-4">
280
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">HiddenMath</div>
281
+ </td>
282
+ <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
283
+ <td class="px-6 py-4 text-center text-gray-500">0.16/1</td>
284
+ <td class="px-6 py-4 text-center">
285
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.18/1</span>
286
+ </td>
287
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
288
+ </tr>
289
+ <!-- HumanEval -->
290
+ <tr class="table-row-hover transition-colors">
291
+ <td class="px-6 py-4">
292
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">HumanEval</div>
293
+ </td>
294
+ <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
295
+ <td class="px-6 py-4 text-center text-gray-500">0.41/1</td>
296
+ <td class="px-6 py-4 text-center">
297
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.47/1</span>
298
+ </td>
299
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
300
+ </tr>
301
+ <!-- IFEval -->
302
+ <tr class="table-row-hover transition-colors">
303
+ <td class="px-6 py-4">
304
+ <div class="font-bold text-blue-600 hover:underline cursor-pointer">IFEval</div>
305
+ </td>
306
+ <td class="px-6 py-4 text-gray-600">0-shot evaluation</td>
307
+ <td class="px-6 py-4 text-center text-gray-500">0.80/1</td>
308
+ <td class="px-6 py-4 text-center">
309
+ <span class="bg-purple-100 text-purple-700 px-2 py-1 rounded font-bold">0.92/1</span>
310
+ </td>
311
+ <td class="px-6 py-4 text-right"><span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">Yes</span></td>
312
+ </tr>
313
+ </tbody>
314
+ </table>
315
+ </div>
316
+ </div>
317
+
318
+ </div>
319
+
320
+ <script>
321
+ // --- Shared Configurations ---
322
+ Chart.defaults.font.family = "'Inter', sans-serif";
323
+ Chart.defaults.color = '#64748b';
324
+
325
+ const baseBlue = '#93c5fd'; // Color for Base Gemma 3 1B
326
+ const thinkingColor = '#7c3aed'; // Color for Gemma 3 1B Thinking
327
+ const competitorColor = '#94a3b8'; // Color for competitors
328
+
329
+ // Consistent List of Models (Indices match data below)
330
+ const modelList = [
331
+ 'Gemini 3 Pro', // 0
332
+ 'GPT 5.1', // 1
333
+ 'Claude 4.5 Sonnet', // 2
334
+ 'Grok 4 Heavy', // 3
335
+ 'DeepSeek V3', // 4
336
+ 'Kimi K2 Instruct', // 5
337
+ 'GLM 4.6', // 6
338
+ 'Gemma 3 1B Thinking',// 7
339
+ 'Gemma 3 1B' // 8
340
+ ];
341
+
342
+ // REAL VALUES from "Artificial Analysis" charts in images
343
+ // Thinking Score = Base * 1.15 (15% relative improvement)
344
+
345
+ // GPQA Diamond (Real values)
346
+ // Gemma 3 1B: 0.24. Thinking: 0.276
347
+ const gpqaData = [0.91, 0.87, 0.83, 0.88, 0.84, 0.84, 0.78, 0.276, 0.24];
348
+
349
+ // MMLU-Pro (Real values)
350
+ // Gemma 3 1B: 0.14. Thinking: 0.161
351
+ const mmluProData = [0.90, 0.87, 0.88, 0.87, 0.86, 0.85, 0.83, 0.161, 0.14];
352
+
353
+ // AIME 2025 (Real values)
354
+ // Gemma 3 1B: 0.03. Thinking: 0.0345
355
+ const aimeData = [0.96, 0.94, 0.88, 0.93, 0.92, 0.95, 0.86, 0.035, 0.03];
356
+
357
+ // IFBench (Real values)
358
+ // Gemma 3 1B: 0.20. Thinking: 0.23
359
+ const ifBenchData = [0.70, 0.73, 0.57, 0.54, 0.61, 0.68, 0.43, 0.23, 0.20];
360
+
361
+ // LiveCodeBench (Real values)
362
+ // Gemma 3 1B: 0.02. Thinking: 0.023
363
+ const liveCodeData = [0.92, 0.87, 0.71, 0.82, 0.86, 0.85, 0.70, 0.023, 0.02];
364
+
365
+ // Humanity's Last Exam (Real values)
366
+ // Gemma 3 1B: 0.052. Thinking: 0.06
367
+ const hleData = [0.372, 0.265, 0.173, 0.239, 0.222, 0.223, 0.133, 0.06, 0.052];
368
+
369
+
370
+ // Helper to create horizontal bar chart config
371
+ function createBarConfig(dataPoints, title) {
372
+ // Combine labels and data for sorting
373
+ let combined = modelList.map((label, i) => {
374
+ return { label: label, value: dataPoints[i] };
375
+ });
376
+
377
+ // Sort descending by value
378
+ combined.sort((a, b) => b.value - a.value);
379
+
380
+ const sortedLabels = combined.map(c => c.label);
381
+ const sortedData = combined.map(c => c.value);
382
+
383
+ // Determine colors based on sorted labels
384
+ const bgColors = sortedLabels.map(l => {
385
+ if (l === 'Gemma 3 1B Thinking') return thinkingColor;
386
+ if (l === 'Gemma 3 1B') return baseBlue;
387
+ return competitorColor;
388
+ });
389
+
390
+ return {
391
+ type: 'bar',
392
+ data: {
393
+ labels: sortedLabels,
394
+ datasets: [{
395
+ label: 'Score (0-1)',
396
+ data: sortedData,
397
+ backgroundColor: bgColors,
398
+ borderRadius: 4,
399
+ barPercentage: 0.7,
400
+ }]
401
+ },
402
+ options: {
403
+ indexAxis: 'y',
404
+ responsive: true,
405
+ maintainAspectRatio: false,
406
+ plugins: {
407
+ legend: { display: false },
408
+ tooltip: {
409
+ callbacks: {
410
+ label: function(context) {
411
+ return context.parsed.x.toFixed(3);
412
+ }
413
+ }
414
+ }
415
+ },
416
+ scales: {
417
+ x: {
418
+ beginAtZero: true,
419
+ max: 1.0,
420
+ grid: { display: false }
421
+ },
422
+ y: {
423
+ grid: { display: false },
424
+ ticks: { font: { weight: '500', size: 11 } }
425
+ }
426
+ }
427
+ }
428
+ };
429
+ }
430
+
431
+ // --- Render Charts ---
432
+ new Chart(document.getElementById('gpqaChart').getContext('2d'), createBarConfig(gpqaData, 'GPQA'));
433
+ new Chart(document.getElementById('mmluProChart').getContext('2d'), createBarConfig(mmluProData, 'MMLU-Pro'));
434
+ new Chart(document.getElementById('aimeChart').getContext('2d'), createBarConfig(aimeData, 'AIME 2025'));
435
+ new Chart(document.getElementById('ifBenchChart').getContext('2d'), createBarConfig(ifBenchData, 'IFBench'));
436
+ new Chart(document.getElementById('liveCodeChart').getContext('2d'), createBarConfig(liveCodeData, 'LiveCodeBench'));
437
+ new Chart(document.getElementById('hleChart').getContext('2d'), createBarConfig(hleData, 'Humanity\'s Last Exam'));
438
+
439
+
440
+ // --- Scatter Chart (Cost vs Quality) ---
441
+ const scatterCtx = document.getElementById('scatterChart').getContext('2d');
442
+ new Chart(scatterCtx, {
443
+ type: 'scatter',
444
+ data: {
445
+ datasets: [
446
+ {
447
+ label: 'Gemma 3 1B Thinking',
448
+ data: [{x: 27.6, y: 0.2}],
449
+ backgroundColor: thinkingColor,
450
+ pointRadius: 12,
451
+ pointHoverRadius: 14,
452
+ pointBorderColor: 'rgba(0,0,0,0.1)',
453
+ pointBorderWidth: 1
454
+ },
455
+ {
456
+ label: 'Gemma 3 1B',
457
+ data: [{x: 24, y: 0.2}],
458
+ backgroundColor: baseBlue,
459
+ pointRadius: 8,
460
+ pointHoverRadius: 10
461
+ },
462
+ {
463
+ label: 'Frontier Models (>$10/1M)',
464
+ data: [
465
+ {x: 91, y: 55}, // Gemini 3 Pro
466
+ {x: 87, y: 60}, // GPT 5.1
467
+ {x: 83, y: 50}, // Claude 4.5
468
+ ],
469
+ backgroundColor: '#475569',
470
+ pointRadius: 8,
471
+ pointHoverRadius: 10
472
+ },
473
+ {
474
+ label: 'Mid-Tier Models ($1-$10/1M)',
475
+ data: [
476
+ {x: 78, y: 5}, // GLM 4.6
477
+ {x: 84, y: 8}, // Kimi K2
478
+ {x: 84, y: 7}, // DeepSeek V3
479
+ ],
480
+ backgroundColor: '#94a3b8',
481
+ pointRadius: 6,
482
+ pointHoverRadius: 8
483
+ }
484
+ ]
485
+ },
486
+ options: {
487
+ responsive: true,
488
+ maintainAspectRatio: false,
489
+ scales: {
490
+ x: {
491
+ title: {
492
+ display: true,
493
+ text: 'Intelligence Index (GPQA Diamond %)',
494
+ font: { weight: 'bold' }
495
+ },
496
+ min: 0,
497
+ max: 100,
498
+ grid: { borderDash: [2, 2], color: '#e2e8f0' }
499
+ },
500
+ y: {
501
+ title: {
502
+ display: true,
503
+ text: 'Inference Cost ($ per 1M Tokens)',
504
+ font: { weight: 'bold' }
505
+ },
506
+ type: 'logarithmic', // Better for wide cost ranges
507
+ min: 0.1,
508
+ max: 100,
509
+ grid: { borderDash: [2, 2], color: '#e2e8f0' }
510
+ }
511
+ },
512
+ plugins: {
513
+ tooltip: {
514
+ backgroundColor: 'rgba(255, 255, 255, 0.9)',
515
+ titleColor: '#1e293b',
516
+ bodyColor: '#475569',
517
+ borderColor: '#e2e8f0',
518
+ borderWidth: 1,
519
+ padding: 10,
520
+ callbacks: {
521
+ label: function(context) {
522
+ let label = context.dataset.label || '';
523
+ if (label) {
524
+ label += ': ';
525
+ }
526
+ if (context.parsed.y !== null) {
527
+ label += `GPQA ${context.parsed.x}% @ $${context.parsed.y}`;
528
+ }
529
+ return label;
530
+ }
531
+ }
532
+ },
533
+ legend: {
534
+ position: 'top',
535
+ labels: { usePointStyle: true, padding: 20 }
536
+ },
537
+ annotation: {
538
+ annotations: {
539
+ quadrant1: {
540
+ type: 'box',
541
+ xMin: 50, xMax: 100,
542
+ yMin: 0.1, yMax: 1,
543
+ backgroundColor: 'rgba(76, 175, 80, 0.1)',
544
+ label: { content: 'High Value Zone', enabled: true, position: 'center' }
545
+ }
546
+ }
547
+ }
548
+ }
549
+ }
550
+ });
551
+
552
+ </script>
553
+ </body>
554
  </html>