Hugging Face's logo

Spaces:
FlameF0X
/
Benchmark
Running

App Files Community
FlameF0X commited on
Commit
a90aa73
·
verified ·
1 Parent(s): ee2f5d4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +658 -18
index.html CHANGED
@@ -1,19 +1,659 @@
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
+ <!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>SnowflakeCore Model Benchmark Dashboard</title>
7
+ <!-- Tailwind CSS CDN -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- Google Fonts - Inter -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ }
15
+ /* Custom styles for pseudo-bar charts to ensure responsiveness and visual appeal */
16
+ .bar-container {
17
+ display: flex;
18
+ align-items: center;
19
+ margin-bottom: 0.5rem;
20
+ }
21
+ .bar-label {
22
+ width: 120px; /* Fixed width for labels */
23
+ flex-shrink: 0;
24
+ font-size: 0.875rem; /* text-sm */
25
+ color: #4B5563; /* text-gray-700 */
26
+ }
27
+ .bar-wrapper {
28
+ flex-grow: 1;
29
+ height: 1.5rem; /* h-6 */
30
+ background-color: #E5E7EB; /* bg-gray-200 */
31
+ border-radius: 0.25rem; /* rounded */
32
+ overflow: hidden;
33
+ position: relative;
34
+ }
35
+ .bar {
36
+ height: 100%;
37
+ border-radius: 0.25rem; /* rounded */
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: flex-end;
41
+ padding-right: 0.5rem;
42
+ color: white;
43
+ font-weight: 500;
44
+ font-size: 0.75rem; /* text-xs */
45
+ transition: width 0.5s ease-in-out; /* Smooth transition for width changes */
46
+ }
47
+ .bar-value {
48
+ margin-left: 0.5rem;
49
+ font-weight: 600;
50
+ font-size: 0.875rem; /* text-sm */
51
+ color: #1F2937; /* text-gray-800 */
52
+ min-width: 50px; /* Ensure space for value */
53
+ text-align: right;
54
+ }
55
+ .line-chart-table th, .line-chart-table td {
56
+ padding: 0.75rem; /* p-3 */
57
+ border-bottom: 1px solid #E5E7EB; /* border-gray-200 */
58
+ text-align: left;
59
+ }
60
+ .line-chart-table th {
61
+ background-color: #F9FAFB; /* bg-gray-50 */
62
+ font-weight: 600;
63
+ color: #374151; /* text-gray-700 */
64
+ }
65
+ .line-chart-table tr:last-child td {
66
+ border-bottom: none;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-50">
71
+ <div class="w-full min-h-screen p-6">
72
+ <div class="max-w-7xl mx-auto">
73
+ <!-- Header -->
74
+ <div class="mb-8">
75
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">
76
+ SnowflakeCore Model Benchmark Dashboard
77
+ </h1>
78
+ <p class="text-gray-600">
79
+ Comprehensive performance analysis of SnowflakeCore-G1-Tiny models across multiple benchmarks
80
+ </p>
81
+ </div>
82
+
83
+ <!-- Navigation Tabs -->
84
+ <div class="flex gap-2 mb-6" id="tab-navigation">
85
+ <button id="tab-overview"
86
+ class="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-blue-600 text-white">
87
+ Overview
88
+ </button>
89
+ <button id="tab-textgen"
90
+ class="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200">
91
+ Text Generation
92
+ </button>
93
+ <button id="tab-memory"
94
+ class="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200">
95
+ Memory Usage
96
+ </button>
97
+ <button id="tab-comparison"
98
+ class="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200">
99
+ Model Comparison
100
+ </button>
101
+ </div>
102
+
103
+ <!-- Overview Tab Content -->
104
+ <div id="overview-content" class="space-y-6">
105
+ <!-- Key Metrics Cards -->
106
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
107
+ <div class="bg-white p-6 rounded-lg shadow-sm border">
108
+ <div class="text-2xl font-bold text-blue-600">355.87M</div>
109
+ <div class="text-gray-600">Total Parameters</div>
110
+ </div>
111
+ <div class="bg-white p-6 rounded-lg shadow-sm border">
112
+ <div class="text-2xl font-bold text-green-600">1.36 GB</div>
113
+ <div class="text-gray-600">Model Size</div>
114
+ </div>
115
+ <div class="bg-white p-6 rounded-lg shadow-sm border">
116
+ <div class="text-2xl font-bold text-purple-600">65.96</div>
117
+ <div class="text-gray-600">Avg Speed (tokens/s)</div>
118
+ </div>
119
+ <div class="bg-white p-6 rounded-lg shadow-sm border">
120
+ <div class="text-2xl font-bold text-orange-600">1.05 GB</div>
121
+ <div class="text-gray-600">Peak Memory</div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Performance Radar Chart (represented as a detailed list/table) -->
126
+ <div class="bg-white p-6 rounded-lg shadow-sm">
127
+ <h3 class="text-lg font-semibold mb-4">Performance Radar</h3>
128
+ <div class="overflow-x-auto">
129
+ <table class="min-w-full divide-y divide-gray-200">
130
+ <thead class="bg-gray-50">
131
+ <tr>
132
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
133
+ Metric
134
+ </th>
135
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
136
+ Base Model
137
+ </th>
138
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
139
+ Instruct Model
140
+ </th>
141
+ </tr>
142
+ </thead>
143
+ <tbody class="bg-white divide-y divide-gray-200">
144
+ <!-- Data will be populated by JavaScript -->
145
+ </tbody>
146
+ </table>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Quick Comparison (Bar Chart - represented visually) -->
151
+ <div class="bg-white p-6 rounded-lg shadow-sm">
152
+ <h3 class="text-lg font-semibold mb-4">Model Comparison Overview</h3>
153
+ <div id="overview-comparison-chart" class="space-y-4">
154
+ <!-- Bars will be populated by JavaScript -->
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Text Generation Tab Content -->
160
+ <div id="textgen-content" class="hidden space-y-6">
161
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
162
+ <!-- Generation Speed -->
163
+ <div class="bg-white p-6 rounded-lg shadow-sm">
164
+ <h3 class="text-lg font-semibold mb-4">Generation Speed</h3>
165
+ <div id="textgen-speed-chart" class="space-y-4">
166
+ <!-- Bars will be populated by JavaScript -->
167
+ </div>
168
+ <div class="mt-4 text-sm text-gray-600">
169
+ <p>Base model generates text 7% faster than the instruction-tuned variant</p>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Token Length -->
174
+ <div class="bg-white p-6 rounded-lg shadow-sm">
175
+ <h3 class="text-lg font-semibold mb-4">Average Token Length</h3>
176
+ <div id="textgen-token-chart" class="space-y-4">
177
+ <!-- Bars will be populated by JavaScript -->
178
+ </div>
179
+ <div class="mt-4 text-sm text-gray-600">
180
+ <p>Instruction model produces slightly shorter responses on average</p>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Vocabulary Diversity -->
185
+ <div class="bg-white p-6 rounded-lg shadow-sm">
186
+ <h3 class="text-lg font-semibold mb-4">Vocabulary Diversity</h3>
187
+ <div id="textgen-vocab-chart" class="space-y-4">
188
+ <!-- Bars will be populated by JavaScript -->
189
+ </div>
190
+ <div class="mt-4 text-sm text-gray-600">
191
+ <p>Base model shows higher vocabulary diversity (16.6% vs 12.9%)</p>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Performance Summary -->
196
+ <div class="bg-white p-6 rounded-lg shadow-sm">
197
+ <h3 class="text-lg font-semibold mb-4">Text Generation Summary</h3>
198
+ <div class="space-y-4">
199
+ <div class="flex justify-between items-center p-3 bg-blue-50 rounded">
200
+ <span class="font-medium">Generation Speed Winner</span>
201
+ <span class="text-blue-600 font-semibold">Base Model (+7%)</span>
202
+ </div>
203
+ <div class="flex justify-between items-center p-3 bg-red-50 rounded">
204
+ <span class="font-medium">Conciseness Winner</span>
205
+ <span class="text-red-600 font-semibold">Instruct Model</span>
206
+ </div>
207
+ <div class="flex justify-between items-center p-3 bg-orange-50 rounded">
208
+ <span class="font-medium">Vocabulary Diversity</span>
209
+ <span class="text-orange-600 font-semibold">Base Model (+29%)</span>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Memory Usage Tab Content -->
217
+ <div id="memory-content" class="hidden space-y-6">
218
+ <div class="bg-white p-6 rounded-lg shadow-sm">
219
+ <h3 class="text-lg font-semibold mb-4">Memory Usage by Sequence Length</h3>
220
+ <div class="overflow-x-auto">
221
+ <table class="min-w-full divide-y divide-gray-200 line-chart-table">
222
+ <thead>
223
+ <tr>
224
+ <th>Sequence Length</th>
225
+ <th>Base Model (GB)</th>
226
+ <th>Instruct Model (GB)</th>
227
+ </tr>
228
+ </thead>
229
+ <tbody>
230
+ <!-- Data will be populated by JavaScript -->
231
+ </tbody>
232
+ </table>
233
+ </div>
234
+ <div class="mt-4 text-sm text-gray-600">
235
+ <p>Both models show identical memory usage patterns across different sequence lengths</p>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
240
+ <!-- Memory Growth Chart (represented visually) -->
241
+ <div class="bg-white p-6 rounded-lg shadow-sm">
242
+ <h3 class="text-lg font-semibold mb-4">Memory Growth Rate</h3>
243
+ <div id="memory-growth-chart" class="space-y-4">
244
+ <!-- Bars will be populated by JavaScript -->
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Memory Efficiency Metrics -->
249
+ <div class="bg-white p-6 rounded-lg shadow-sm">
250
+ <h3 class="text-lg font-semibold mb-4">Memory Efficiency</h3>
251
+ <div class="space-y-4">
252
+ <div class="flex justify-between items-center p-3 bg-blue-50 rounded">
253
+ <span class="font-medium">Min Memory (128 seq)</span>
254
+ <span class="text-blue-600 font-semibold">0.683 GB</span>
255
+ </div>
256
+ <div class="flex justify-between items-center p-3 bg-purple-50 rounded">
257
+ <span class="font-medium">Max Memory (2048 seq)</span>
258
+ <span class="text-purple-600 font-semibold">1.049 GB</span>
259
+ </div>
260
+ <div class="flex justify-between items-center p-3 bg-green-50 rounded">
261
+ <span class="font-medium">Memory Growth</span>
262
+ <span class="text-green-600 font-semibold">+53.6%</span>
263
+ </div>
264
+ <div class="flex justify-between items-center p-3 bg-orange-50 rounded">
265
+ <span class="font-medium">Memory/Parameter Ratio</span>
266
+ <span class="text-orange-600 font-semibold">2.95 MB/M</span>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Model Comparison Tab Content -->
274
+ <div id="comparison-content" class="hidden space-y-6">
275
+ <!-- Side-by-side comparison -->
276
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
277
+ <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500">
278
+ <h3 class="text-lg font-semibold mb-4 text-blue-700">SnowflakeCore-G1-Tiny (Base)</h3>
279
+ <div class="space-y-3">
280
+ <div class="flex justify-between">
281
+ <span class="text-gray-600">Generation Speed</span>
282
+ <span class="font-semibold">68.23 tokens/s</span>
283
+ </div>
284
+ <div class="flex justify-between">
285
+ <span class="text-gray-600">Avg Token Length</span>
286
+ <span class="font-semibold">55.6 tokens</span>
287
+ </div>
288
+ <div class="flex justify-between">
289
+ <span class="text-gray-600">Vocabulary Diversity</span>
290
+ <span class="font-semibold">16.6%</span>
291
+ </div>
292
+ <div class="flex justify-between">
293
+ <span class="text-gray-600">Peak Memory</span>
294
+ <span class="font-semibold">1.049 GB</span>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-purple-500">
300
+ <h3 class="text-lg font-semibold mb-4 text-purple-700">SnowflakeCore-G1-Tiny-Instruct</h3>
301
+ <div class="space-y-3">
302
+ <div class="flex justify-between">
303
+ <span class="text-gray-600">Generation Speed</span>
304
+ <span class="font-semibold">63.69 tokens/s</span>
305
+ </div>
306
+ <div class="flex justify-between">
307
+ <span class="text-gray-600">Avg Token Length</span>
308
+ <span class="font-semibold">51.0 tokens</span>
309
+ </div>
310
+ <div class="flex justify-between">
311
+ <span class="text-gray-600">Vocabulary Diversity</span>
312
+ <span class="font-semibold">12.9%</span>
313
+ </div>
314
+ <div class="flex justify-between">
315
+ <span class="text-gray-600">Peak Memory</span>
316
+ <span class="font-semibold">1.049 GB</span>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Detailed Comparison Chart (Bar Chart - represented visually) -->
323
+ <div class="bg-white p-6 rounded-lg shadow-sm">
324
+ <h3 class="text-lg font-semibold mb-4">Detailed Performance Comparison</h3>
325
+ <div id="detailed-comparison-chart" class="space-y-4">
326
+ <!-- Bars will be populated by JavaScript -->
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Recommendations -->
331
+ <div class="bg-white p-6 rounded-lg shadow-sm">
332
+ <h3 class="text-lg font-semibold mb-4">Model Selection Recommendations</h3>
333
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
334
+ <div class="p-4 bg-blue-50 rounded-lg">
335
+ <h4 class="font-semibold text-blue-800 mb-2">Choose Base Model When:</h4>
336
+ <ul class="text-sm text-blue-700 space-y-1">
337
+ <li>• Maximum generation speed is critical</li>
338
+ <li>• Need diverse vocabulary output</li>
339
+ <li>• Working with creative writing tasks</li>
340
+ <li>• Fine-tuning for specific domains</li>
341
+ </ul>
342
+ </div>
343
+ <div class="p-4 bg-purple-50 rounded-lg">
344
+ <h4 class="font-semibold text-purple-800 mb-2">Choose Instruct Model When:</h4>
345
+ <ul class="text-sm text-purple-700 space-y-1">
346
+ <li>• Need instruction-following behavior</li>
347
+ <li>• Prefer concise, focused responses</li>
348
+ <li>• Working with Q&A or chat applications</li>
349
+ <li>• Want more predictable output format</li>
350
+ </ul>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Footer -->
357
+ <div class="mt-8 text-center text-sm text-gray-500">
358
+ <p>Data extracted from SnowflakeCore model benchmarks • All metrics verified through synthetic testing</p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <script>
364
+ // Data Definitions
365
+ const textGenData = [
366
+ {
367
+ metric: 'Generation Speed',
368
+ 'Base Model': 68.23,
369
+ 'Instruct Model': 63.69,
370
+ unit: 'tokens/s'
371
+ },
372
+ {
373
+ metric: 'Avg Token Length',
374
+ 'Base Model': 55.6,
375
+ 'Instruct Model': 51.0,
376
+ unit: 'tokens'
377
+ },
378
+ {
379
+ metric: 'Vocabulary Diversity',
380
+ 'Base Model': 16.6,
381
+ 'Instruct Model': 12.9,
382
+ unit: '%'
383
+ }
384
+ ];
385
+
386
+ const memoryData = [
387
+ { sequence: 128, 'Base Model': 0.683, 'Instruct Model': 0.683 },
388
+ { sequence: 512, 'Base Model': 0.732, 'Instruct Model': 0.732 },
389
+ { sequence: 1024, 'Base Model': 0.818, 'Instruct Model': 0.818 },
390
+ { sequence: 2048, 'Base Model': 1.049, 'Instruct Model': 1.049 }
391
+ ];
392
+
393
+ const modelSizeData = [
394
+ { name: 'Parameters', value: 355.87, unit: 'M' },
395
+ { name: 'Model Size', value: 1357.54, unit: 'MB' }
396
+ ];
397
+
398
+ const radarData = [
399
+ { metric: 'Speed', 'Base Model': 68.23, 'Instruct Model': 63.69, max: 80 },
400
+ { metric: 'Token Length', 'Base Model': 55.6, 'Instruct Model': 51.0, max: 70 },
401
+ { metric: 'Vocabulary', 'Base Model': 16.6, 'Instruct Model': 12.9, max: 20 },
402
+ { metric: 'Memory Efficiency', 'Base Model': 95, 'Instruct Model': 95, max: 100 }
403
+ ];
404
+
405
+ // Color schemes for visual bars
406
+ const colors = {
407
+ 'Base Model': '#4F46E5', // Indigo-600
408
+ 'Instruct Model': '#7C3AED', // Purple-600
409
+ 'Base Model Alt1': '#059669', // Emerald-600
410
+ 'Instruct Model Alt1': '#DC2626', // Red-600
411
+ 'Base Model Alt2': '#D97706', // Orange-600
412
+ 'Instruct Model Alt2': '#7C2D12' // Amber-900 (darker orange)
413
+ };
414
+
415
+ let activeTab = 'overview'; // Initial active tab
416
+
417
+ /**
418
+ * Renders a bar chart-like visualization using HTML divs.
419
+ * @param {HTMLElement} container - The DOM element to render the bars into.
420
+ * @param {Array<Object>} data - The data array for the chart.
421
+ * @param {string} labelKey - The key for the label (e.g., 'metric', 'sequence').
422
+ * @param {Array<Object>} barKeys - An array of objects { key: 'dataKey', color: 'tailwind-color-class' }.
423
+ * @param {number} maxValue - The maximum value for scaling the bars.
424
+ * @param {Function} [unitFormatter] - Optional function to format the unit display.
425
+ */
426
+ function renderBarChart(container, data, labelKey, barKeys, maxValue, unitFormatter = (value, unit) => `${value} ${unit || ''}`) {
427
+ container.innerHTML = ''; // Clear previous content
428
+ data.forEach(item => {
429
+ const itemDiv = document.createElement('div');
430
+ itemDiv.className = 'mb-6'; // Add some spacing between items
431
+
432
+ const labelDiv = document.createElement('div');
433
+ labelDiv.className = 'text-sm font-semibold text-gray-800 mb-2';
434
+ labelDiv.textContent = item[labelKey];
435
+ itemDiv.appendChild(labelDiv);
436
+
437
+ barKeys.forEach(barInfo => {
438
+ const value = item[barInfo.key];
439
+ const widthPercentage = (value / maxValue) * 100;
440
+ const barContainer = document.createElement('div');
441
+ barContainer.className = 'bar-container';
442
+
443
+ const modelLabel = document.createElement('span');
444
+ modelLabel.className = 'bar-label';
445
+ modelLabel.textContent = barInfo.key;
446
+ barContainer.appendChild(modelLabel);
447
+
448
+ const barWrapper = document.createElement('div');
449
+ barWrapper.className = 'bar-wrapper';
450
+
451
+ const barDiv = document.createElement('div');
452
+ barDiv.className = `bar ${barInfo.color}`;
453
+ barDiv.style.width = `${widthPercentage}%`;
454
+ barDiv.textContent = unitFormatter(value, item.unit);
455
+ barWrapper.appendChild(barDiv);
456
+ barContainer.appendChild(barWrapper);
457
+
458
+ container.appendChild(itemDiv);
459
+ itemDiv.appendChild(barContainer);
460
+ });
461
+ });
462
+ }
463
+
464
+ /**
465
+ * Renders a table for line chart data.
466
+ * @param {HTMLElement} container - The tbody element of the table.
467
+ * @param {Array<Object>} data - The data array.
468
+ * @param {string} xKey - The key for the X-axis (e.g., 'sequence').
469
+ * @param {Array<string>} yKeys - Array of keys for Y-axis values (e.g., ['Base Model', 'Instruct Model']).
470
+ * @param {Function} [formatter] - Optional function to format the cell value.
471
+ */
472
+ function renderLineChartTable(container, data, xKey, yKeys, formatter = (value) => value) {
473
+ container.innerHTML = ''; // Clear previous content
474
+ data.forEach(item => {
475
+ const row = document.createElement('tr');
476
+ row.className = 'hover:bg-gray-50';
477
+
478
+ const xCell = document.createElement('td');
479
+ xCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
480
+ xCell.textContent = item[xKey];
481
+ row.appendChild(xCell);
482
+
483
+ yKeys.forEach(key => {
484
+ const yCell = document.createElement('td');
485
+ yCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
486
+ yCell.textContent = formatter(item[key]);
487
+ row.appendChild(yCell);
488
+ });
489
+ container.appendChild(row);
490
+ });
491
+ }
492
+
493
+ /**
494
+ * Renders the Performance Radar data as a table.
495
+ * @param {HTMLElement} container - The tbody element of the table.
496
+ * @param {Array<Object>} data - The radar data.
497
+ */
498
+ function renderRadarTable(container, data) {
499
+ container.innerHTML = '';
500
+ data.forEach(item => {
501
+ const row = document.createElement('tr');
502
+ row.className = 'hover:bg-gray-50';
503
+
504
+ const metricCell = document.createElement('td');
505
+ metricCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
506
+ metricCell.textContent = item.metric;
507
+ row.appendChild(metricCell);
508
+
509
+ const baseModelCell = document.createElement('td');
510
+ baseModelCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
511
+ baseModelCell.textContent = `${item['Base Model']} ${item.metric === 'Memory Efficiency' ? '%' : ''}`;
512
+ row.appendChild(baseModelCell);
513
+
514
+ const instructModelCell = document.createElement('td');
515
+ instructModelCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
516
+ instructModelCell.textContent = `${item['Instruct Model']} ${item.metric === 'Memory Efficiency' ? '%' : ''}`;
517
+ row.appendChild(instructModelCell);
518
+
519
+ container.appendChild(row);
520
+ });
521
+ }
522
+
523
+ /**
524
+ * Updates the visibility of content sections and active tab styling.
525
+ */
526
+ function updateContentVisibility() {
527
+ // Hide all content sections
528
+ document.querySelectorAll('[id$="-content"]').forEach(section => {
529
+ section.classList.add('hidden');
530
+ });
531
+ // Show the active content section
532
+ document.getElementById(`${activeTab}-content`).classList.remove('hidden');
533
+
534
+ // Update tab button styles
535
+ document.querySelectorAll('#tab-navigation button').forEach(button => {
536
+ if (button.id === `tab-${activeTab}`) {
537
+ button.classList.remove('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200');
538
+ button.classList.add('bg-blue-600', 'text-white');
539
+ } else {
540
+ button.classList.remove('bg-blue-600', 'text-white');
541
+ button.classList.add('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200');
542
+ }
543
+ });
544
+ }
545
+
546
+ /**
547
+ * Renders all dynamic content based on the active tab.
548
+ */
549
+ function renderAllContent() {
550
+ // Overview Tab Charts
551
+ if (activeTab === 'overview') {
552
+ renderRadarTable(
553
+ document.querySelector('#overview-content .bg-white:nth-child(2) tbody'),
554
+ radarData
555
+ );
556
+ renderBarChart(
557
+ document.getElementById('overview-comparison-chart'),
558
+ textGenData,
559
+ 'metric',
560
+ [
561
+ { key: 'Base Model', color: 'bg-blue-600' },
562
+ { key: 'Instruct Model', color: 'bg-purple-600' }
563
+ ],
564
+ // Determine max value dynamically for scaling
565
+ Math.max(...textGenData.flatMap(d => [d['Base Model'], d['Instruct Model']])) * 1.1 // 10% buffer
566
+ );
567
+ }
568
+ // Text Generation Tab Charts
569
+ else if (activeTab === 'textgen') {
570
+ // Generation Speed
571
+ renderBarChart(
572
+ document.getElementById('textgen-speed-chart'),
573
+ [textGenData[0]],
574
+ 'metric',
575
+ [
576
+ { key: 'Base Model', color: 'bg-blue-600' },
577
+ { key: 'Instruct Model', color: 'bg-purple-600' }
578
+ ],
579
+ Math.max(textGenData[0]['Base Model'], textGenData[0]['Instruct Model']) * 1.1
580
+ );
581
+ // Token Length
582
+ renderBarChart(
583
+ document.getElementById('textgen-token-chart'),
584
+ [textGenData[1]],
585
+ 'metric',
586
+ [
587
+ { key: 'Base Model', color: 'bg-emerald-600' },
588
+ { key: 'Instruct Model', color: 'bg-red-600' }
589
+ ],
590
+ Math.max(textGenData[1]['Base Model'], textGenData[1]['Instruct Model']) * 1.1
591
+ );
592
+ // Vocabulary Diversity
593
+ renderBarChart(
594
+ document.getElementById('textgen-vocab-chart'),
595
+ [textGenData[2]],
596
+ 'metric',
597
+ [
598
+ { key: 'Base Model', color: 'bg-orange-600' },
599
+ { key: 'Instruct Model', color: 'bg-amber-900' }
600
+ ],
601
+ Math.max(textGenData[2]['Base Model'], textGenData[2]['Instruct Model']) * 1.1
602
+ );
603
+ }
604
+ // Memory Usage Tab Charts
605
+ else if (activeTab === 'memory') {
606
+ renderLineChartTable(
607
+ document.querySelector('#memory-content .line-chart-table tbody'),
608
+ memoryData,
609
+ 'sequence',
610
+ ['Base Model', 'Instruct Model'],
611
+ (value) => `${value} GB`
612
+ );
613
+ renderBarChart(
614
+ document.getElementById('memory-growth-chart'),
615
+ memoryData,
616
+ 'sequence',
617
+ [
618
+ { key: 'Base Model', color: 'bg-sky-500' }, // Tailwind sky-500
619
+ { key: 'Instruct Model', color: 'bg-violet-500' } // Tailwind violet-500
620
+ ],
621
+ Math.max(...memoryData.map(d => Math.max(d['Base Model'], d['Instruct Model']))) * 1.1,
622
+ (value, unit) => `${value} GB`
623
+ );
624
+ }
625
+ // Model Comparison Tab Charts
626
+ else if (activeTab === 'comparison') {
627
+ renderBarChart(
628
+ document.getElementById('detailed-comparison-chart'),
629
+ textGenData,
630
+ 'metric',
631
+ [
632
+ { key: 'Base Model', color: 'bg-blue-600' },
633
+ { key: 'Instruct Model', color: 'bg-purple-600' }
634
+ ],
635
+ Math.max(...textGenData.flatMap(d => [d['Base Model'], d['Instruct Model']])) * 1.1
636
+ );
637
+ }
638
+ }
639
+
640
+ // Event Listeners for Tab Navigation
641
+ document.addEventListener('DOMContentLoaded', () => {
642
+ document.getElementById('tab-navigation').addEventListener('click', (event) => {
643
+ if (event.target.tagName === 'BUTTON') {
644
+ const newTab = event.target.id.replace('tab-', '');
645
+ if (newTab !== activeTab) {
646
+ activeTab = newTab;
647
+ updateContentVisibility();
648
+ renderAllContent(); // Re-render content for the new tab
649
+ }
650
+ }
651
+ });
652
+
653
+ // Initial render
654
+ updateContentVisibility();
655
+ renderAllContent();
656
+ });
657
+ </script>
658
+ </body>
659
  </html>