Hugging Face's logo

Spaces:
nomadicsynth
/
training-hub
Running

App Files Community
nomadicsynth commited on
Commit
746ea05
·
verified ·
1 Parent(s): 4a66fdf

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +873 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Training Hub
3
- emoji: 📈
4
- colorFrom: blue
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: training-hub
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,873 @@
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>Neon Cortex - AI Training Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap">
9
+ <style>
10
+ :root {
11
+ --neon-cyan: #00f0ff;
12
+ --neon-magenta: #ff00f0;
13
+ --neon-amber: #ffb000;
14
+ --neon-lime: #a0ff00;
15
+ --dark-bg: #0a0a12;
16
+ --panel-bg: #12121a;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Share Tech Mono', monospace;
21
+ background-color: var(--dark-bg);
22
+ color: white;
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ .lcars-panel {
27
+ background-color: var(--panel-bg);
28
+ border-radius: 8px 8px 0 0;
29
+ border-left: 4px solid var(--neon-cyan);
30
+ position: relative;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .lcars-panel::before {
35
+ content: '';
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ right: 0;
40
+ height: 4px;
41
+ background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
42
+ }
43
+
44
+ .lcars-title {
45
+ font-family: 'Orbitron', sans-serif;
46
+ font-weight: 700;
47
+ color: var(--neon-cyan);
48
+ text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
49
+ }
50
+
51
+ .status-light {
52
+ width: 12px;
53
+ height: 12px;
54
+ border-radius: 50%;
55
+ display: inline-block;
56
+ margin-right: 8px;
57
+ box-shadow: 0 0 8px currentColor;
58
+ }
59
+
60
+ .pulse {
61
+ animation: pulse 2s infinite;
62
+ }
63
+
64
+ @keyframes pulse {
65
+ 0% { opacity: 0.6; }
66
+ 50% { opacity: 1; }
67
+ 100% { opacity: 0.6; }
68
+ }
69
+
70
+ .progress-bar {
71
+ height: 8px;
72
+ background: rgba(255, 255, 255, 0.1);
73
+ border-radius: 4px;
74
+ overflow: hidden;
75
+ }
76
+
77
+ .progress-fill {
78
+ height: 100%;
79
+ background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
80
+ transition: width 0.5s ease;
81
+ }
82
+
83
+ .log-entry {
84
+ border-left: 2px solid var(--neon-amber);
85
+ padding-left: 8px;
86
+ margin-bottom: 4px;
87
+ font-size: 0.85rem;
88
+ }
89
+
90
+ .log-warning {
91
+ color: var(--neon-amber);
92
+ border-left-color: var(--neon-amber);
93
+ }
94
+
95
+ .log-error {
96
+ color: var(--neon-magenta);
97
+ border-left-color: var(--neon-magenta);
98
+ }
99
+
100
+ .log-success {
101
+ color: var(--neon-lime);
102
+ border-left-color: var(--neon-lime);
103
+ }
104
+
105
+ .grid-overlay {
106
+ position: absolute;
107
+ top: 0;
108
+ left: 0;
109
+ right: 0;
110
+ bottom: 0;
111
+ background:
112
+ linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
113
+ linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
114
+ background-size: 20px 20px;
115
+ pointer-events: none;
116
+ }
117
+
118
+ .glow-effect {
119
+ box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
120
+ }
121
+
122
+ .control-btn {
123
+ border: 1px solid var(--neon-cyan);
124
+ color: var(--neon-cyan);
125
+ background: rgba(0, 240, 255, 0.1);
126
+ transition: all 0.3s ease;
127
+ }
128
+
129
+ .control-btn:hover {
130
+ background: rgba(0, 240, 255, 0.3);
131
+ box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
132
+ }
133
+
134
+ .control-btn:active {
135
+ background: rgba(0, 240, 255, 0.5);
136
+ }
137
+
138
+ .data-sample {
139
+ border: 1px solid rgba(255, 255, 255, 0.1);
140
+ transition: all 0.3s ease;
141
+ }
142
+
143
+ .data-sample:hover {
144
+ border-color: var(--neon-lime);
145
+ box-shadow: 0 0 10px rgba(160, 255, 0, 0.3);
146
+ }
147
+
148
+ .chart-container {
149
+ position: relative;
150
+ height: 200px;
151
+ }
152
+
153
+ .chart-line {
154
+ fill: none;
155
+ stroke: var(--neon-cyan);
156
+ stroke-width: 2;
157
+ }
158
+
159
+ .chart-area {
160
+ fill: rgba(0, 240, 255, 0.1);
161
+ }
162
+
163
+ .heatmap-cell {
164
+ transition: all 0.3s ease;
165
+ }
166
+
167
+ .heatmap-cell:hover {
168
+ stroke: white;
169
+ stroke-width: 1px;
170
+ }
171
+
172
+ .ai-core {
173
+ position: relative;
174
+ width: 120px;
175
+ height: 120px;
176
+ border-radius: 50%;
177
+ background: radial-gradient(circle, rgba(0,240,255,0.1) 0%, rgba(0,240,255,0) 70%);
178
+ display: flex;
179
+ align-items: center;
180
+ justify-content: center;
181
+ }
182
+
183
+ .ai-core-inner {
184
+ width: 80px;
185
+ height: 80px;
186
+ border-radius: 50%;
187
+ background: radial-gradient(circle, rgba(0,240,255,0.2) 0%, rgba(0,240,255,0) 70%);
188
+ animation: rotate 20s linear infinite;
189
+ }
190
+
191
+ @keyframes rotate {
192
+ 0% { transform: rotate(0deg); }
193
+ 100% { transform: rotate(360deg); }
194
+ }
195
+
196
+ .ai-core-pulse {
197
+ position: absolute;
198
+ width: 100%;
199
+ height: 100%;
200
+ border-radius: 50%;
201
+ background: radial-gradient(circle, rgba(0,240,255,0.4) 0%, rgba(0,240,255,0) 70%);
202
+ animation: pulse-core 3s infinite;
203
+ }
204
+
205
+ @keyframes pulse-core {
206
+ 0% { transform: scale(0.8); opacity: 0; }
207
+ 50% { transform: scale(1); opacity: 0.6; }
208
+ 100% { transform: scale(1.2); opacity: 0; }
209
+ }
210
+ </style>
211
+ </head>
212
+ <body class="min-h-screen p-4">
213
+ <div class="grid-overlay fixed inset-0 z-0"></div>
214
+
215
+ <div class="container mx-auto relative z-10">
216
+ <!-- Header -->
217
+ <header class="flex justify-between items-center mb-6">
218
+ <div>
219
+ <h1 class="lcars-title text-3xl md:text-4xl">NEON CORTEX</h1>
220
+ <p class="text-gray-400">AI Training Core v2.3.7</p>
221
+ </div>
222
+ <div class="flex items-center">
223
+ <span class="status-light bg-green-500 pulse"></span>
224
+ <span>ONLINE</span>
225
+ </div>
226
+ </header>
227
+
228
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">
229
+ <!-- System Status Panel -->
230
+ <div class="lcars-panel p-4 lg:col-span-1">
231
+ <h2 class="text-xl font-bold mb-4 text-cyan-400">SYSTEM STATUS</h2>
232
+
233
+ <div class="mb-4">
234
+ <div class="flex justify-between mb-1">
235
+ <span>Model: <span class="text-amber-400">Nova-7B</span></span>
236
+ <span class="text-lime-400">v2.3.7</span>
237
+ </div>
238
+ <div class="progress-bar">
239
+ <div class="progress-fill" style="width: 68%" id="model-progress"></div>
240
+ </div>
241
+ <div class="flex justify-between text-xs mt-1">
242
+ <span>68% complete</span>
243
+ <span>ETA: 2h 17m</span>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="space-y-3">
248
+ <div>
249
+ <div class="flex items-center">
250
+ <span class="status-light bg-cyan-500"></span>
251
+ <span>Dataset Processing</span>
252
+ </div>
253
+ <div class="ml-6 text-sm text-gray-300">Tokenizing sequences (batch 42/68)</div>
254
+ </div>
255
+
256
+ <div>
257
+ <div class="flex items-center">
258
+ <span class="status-light bg-amber-500"></span>
259
+ <span>Training Phase</span>
260
+ </div>
261
+ <div class="ml-6 text-sm text-gray-300">RLHF - Reward Model Optimization</div>
262
+ </div>
263
+
264
+ <div>
265
+ <div class="flex items-center">
266
+ <span class="status-light bg-magenta-500"></span>
267
+ <span>GPU Utilization</span>
268
+ </div>
269
+ <div class="ml-6 text-sm text-gray-300">4x A100 @ 87% load</div>
270
+ </div>
271
+
272
+ <div>
273
+ <div class="flex items-center">
274
+ <span class="status-light bg-lime-500"></span>
275
+ <span>Memory</span>
276
+ </div>
277
+ <div class="ml-6 text-sm text-gray-300">42GB/64GB allocated</div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- AI Core Visualization -->
282
+ <div class="mt-6 flex justify-center">
283
+ <div class="ai-core">
284
+ <div class="ai-core-pulse"></div>
285
+ <div class="ai-core-inner"></div>
286
+ <div class="absolute text-center">
287
+ <div class="text-xs">CORE</div>
288
+ <div class="text-xl font-bold">87%</div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Training Visualizations -->
295
+ <div class="lcars-panel p-4 lg:col-span-2">
296
+ <h2 class="text-xl font-bold mb-4 text-magenta-400">TRAINING METRICS</h2>
297
+
298
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
299
+ <!-- Loss Curve -->
300
+ <div>
301
+ <h3 class="text-sm font-bold mb-2 text-amber-400">LOSS CURVE</h3>
302
+ <div class="chart-container">
303
+ <svg id="loss-chart" width="100%" height="100%"></svg>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Reward Heatmap -->
308
+ <div>
309
+ <h3 class="text-sm font-bold mb-2 text-lime-400">REWARD HEATMAP</h3>
310
+ <div class="chart-container">
311
+ <svg id="heatmap-chart" width="100%" height="100%"></svg>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Token Frequency -->
316
+ <div>
317
+ <h3 class="text-sm font-bold mb-2 text-cyan-400">TOKEN FREQUENCY</h3>
318
+ <div class="chart-container">
319
+ <svg id="token-chart" width="100%" height="100%"></svg>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Live Generation -->
324
+ <div>
325
+ <h3 class="text-sm font-bold mb-2 text-magenta-400">LIVE GENERATION</h3>
326
+ <div class="bg-black bg-opacity-30 p-3 rounded h-full">
327
+ <div class="text-xs font-mono whitespace-pre-wrap" id="live-generation">
328
+ [Generating sample output...]
329
+ <span class="text-amber-400">▋</span>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">
338
+ <!-- Live Logs -->
339
+ <div class="lcars-panel p-4 lg:col-span-2">
340
+ <h2 class="text-xl font-bold mb-4 text-amber-400">TRAINING LOG</h2>
341
+ <div class="h-64 overflow-y-auto font-mono text-sm space-y-1" id="log-container">
342
+ <!-- Log entries will be added here by JavaScript -->
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Model Controls -->
347
+ <div class="lcars-panel p-4">
348
+ <h2 class="text-xl font-bold mb-4 text-lime-400">MODEL CONTROLS</h2>
349
+
350
+ <div class="space-y-4">
351
+ <div class="flex space-x-2">
352
+ <button class="control-btn px-4 py-2 rounded flex-1" id="start-btn">
353
+ <span class="status-light bg-green-500"></span> START
354
+ </button>
355
+ <button class="control-btn px-4 py-2 rounded flex-1" id="pause-btn">
356
+ <span class="status-light bg-amber-500"></span> PAUSE
357
+ </button>
358
+ </div>
359
+
360
+ <div>
361
+ <label class="block text-sm mb-1">Learning Rate</label>
362
+ <input type="range" min="0.0001" max="0.01" step="0.0001" value="0.001"
363
+ class="w-full accent-cyan-500" id="lr-slider">
364
+ <div class="text-right text-xs" id="lr-value">0.001</div>
365
+ </div>
366
+
367
+ <div>
368
+ <label class="block text-sm mb-1">Batch Size</label>
369
+ <select class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-cyan-500">
370
+ <option>32</option>
371
+ <option selected>64</option>
372
+ <option>128</option>
373
+ <option>256</option>
374
+ </select>
375
+ </div>
376
+
377
+ <div class="pt-2">
378
+ <button class="control-btn w-full py-2 rounded">
379
+ <span class="status-light bg-magenta-500"></span> SAVE CHECKPOINT
380
+ </button>
381
+ </div>
382
+
383
+ <div class="border-t border-gray-700 pt-3">
384
+ <h3 class="text-sm font-bold mb-2">SYSTEM ACTIONS</h3>
385
+ <div class="flex space-x-2">
386
+ <button class="control-btn px-3 py-1 rounded text-xs flex-1">
387
+ DEBUG MODE
388
+ </button>
389
+ <button class="control-btn px-3 py-1 rounded text-xs flex-1">
390
+ EXPORT LOGS
391
+ </button>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Dataset Viewer -->
399
+ <div class="lcars-panel p-4 mb-4">
400
+ <h2 class="text-xl font-bold mb-4 text-magenta-400">DATASET VIEWER</h2>
401
+
402
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
403
+ <!-- Dataset samples -->
404
+ <div class="data-sample p-2 rounded cursor-pointer" data-sample-id="1">
405
+ <div class="bg-gray-800 h-24 mb-1 flex items-center justify-center text-xs">
406
+ <span class="text-center">[TEXT PROMPT]</span>
407
+ </div>
408
+ <div class="text-xs truncate">"Design a futuristic UI for..."</div>
409
+ <div class="text-xxs text-gray-400">Batch 42 • 14:23:07</div>
410
+ </div>
411
+
412
+ <div class="data-sample p-2 rounded cursor-pointer" data-sample-id="2">
413
+ <div class="bg-gray-800 h-24 mb-1 flex items-center justify-center text-xs">
414
+ <span class="text-center">[PARAMETRIC SEQ]</span>
415
+ </div>
416
+ <div class="text-xs truncate">[0.42, 1.73, -0.15, ...]</div>
417
+ <div class="text-xxs text-gray-400">Batch 43 • 14:23:09</div>
418
+ </div>
419
+
420
+ <div class="data-sample p-2 rounded cursor-pointer" data-sample-id="3">
421
+ <div class="bg-gray-800 h-24 mb-1 flex items-center justify-center text-xs">
422
+ <span class="text-center">[SKETCH]</span>
423
+ </div>
424
+ <div class="text-xs truncate">Concept sketch #2871</div>
425
+ <div class="text-xxs text-gray-400">Batch 41 • 14:22:55</div>
426
+ </div>
427
+
428
+ <div class="data-sample p-2 rounded cursor-pointer" data-sample-id="4">
429
+ <div class="bg-gray-800 h-24 mb-1 flex items-center justify-center text-xs">
430
+ <span class="text-center">[CODE]</span>
431
+ </div>
432
+ <div class="text-xs truncate">function generateUI() {...}</div>
433
+ <div class="text-xxs text-gray-400">Batch 44 • 14:23:12</div>
434
+ </div>
435
+
436
+ <div class="data-sample p-2 rounded cursor-pointer" data-sample-id="5">
437
+ <div class="bg-gray-800 h-24 mb-1 flex items-center justify-center text-xs">
438
+ <span class="text-center">[3D MODEL]</span>
439
+ </div>
440
+ <div class="text-xs truncate">Component_A.stl</div>
441
+ <div class="text-xxs text-gray-400">Batch 40 • 14:22:48</div>
442
+ </div>
443
+
444
+ <div class="data-sample p-2 rounded cursor-pointer" data-sample-id="6">
445
+ <div class="bg-gray-800 h-24 mb-1 flex items-center justify-center text-xs">
446
+ <span class="text-center">[AUDIO]</span>
447
+ </div>
448
+ <div class="text-xs truncate">Voice command sample</div>
449
+ <div class="text-xxs text-gray-400">Batch 45 • 14:23:15</div>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Sample Detail View (hidden by default) -->
454
+ <div class="mt-4 hidden" id="sample-detail">
455
+ <div class="bg-black bg-opacity-30 p-4 rounded">
456
+ <div class="flex justify-between items-start mb-2">
457
+ <div>
458
+ <h3 class="font-bold" id="sample-title">Sample Title</h3>
459
+ <div class="text-xs text-gray-400" id="sample-meta">Batch 42 • 14:23:07 • Source: Dataset v3.2</div>
460
+ </div>
461
+ <button class="text-gray-400 hover:text-white" id="close-detail">&times;</button>
462
+ </div>
463
+
464
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
465
+ <div class="md:col-span-2">
466
+ <div class="bg-black p-3 rounded h-48 overflow-auto" id="sample-content">
467
+ Sample content will appear here
468
+ </div>
469
+ </div>
470
+ <div>
471
+ <h4 class="text-sm font-bold mb-2">MODEL INTERPRETATION</h4>
472
+ <div class="bg-black bg-opacity-30 p-3 rounded h-48 overflow-auto text-xs" id="sample-interpretation">
473
+ Model's interpretation of this sample will appear here
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <script>
483
+ // Generate sample log entries
484
+ const logContainer = document.getElementById('log-container');
485
+ const logEntries = [
486
+ {msg: "Initializing Neon Cortex v2.3.7 training session", type: "info"},
487
+ {msg: "Loading dataset from /datastore/nova-7b/v3.2", type: "info"},
488
+ {msg: "Dataset contains 1,240,382 samples", type: "info"},
489
+ {msg: "WARNING: 12 samples failed validation checks", type: "warning"},
490
+ {msg: "Tokenizing input sequences...", type: "info"},
491
+ {msg: "Tokenized batch 1/68 (18,432 sequences)", type: "info"},
492
+ {msg: "Initializing RLHF reward model", type: "info"},
493
+ {msg: "ERROR: GPU 3 temperature threshold exceeded (82°C)", type: "error"},
494
+ {msg: "Cooling system engaged, temperature stabilized", type: "info"},
495
+ {msg: "Training epoch 1 started", type: "info"},
496
+ {msg: "Loss: 3.421 → 2.873 (improvement: 16%)", type: "success"},
497
+ {msg: "Checkpoint saved to /checkpoints/nova-7b/epoch1", type: "info"},
498
+ {msg: "Tokenized batch 42/68 (17,856 sequences)", type: "info"},
499
+ {msg: "Reward model updated with 4,296 new preference pairs", type: "info"},
500
+ {msg: "WARNING: Batch 43 contains irregular token distribution", type: "warning"},
501
+ {msg: "Compensating with dynamic attention scaling", type: "info"},
502
+ {msg: "Loss: 1.873 → 1.642 (improvement: 12.3%)", type: "success"},
503
+ ];
504
+
505
+ function addLogEntry(entry) {
506
+ const logElement = document.createElement('div');
507
+ logElement.className = `log-entry log-${entry.type}`;
508
+ logElement.textContent = `[${new Date().toLocaleTimeString()}] ${entry.msg}`;
509
+ logContainer.appendChild(logElement);
510
+ logContainer.scrollTop = logContainer.scrollHeight;
511
+ }
512
+
513
+ // Add initial logs
514
+ logEntries.forEach((entry, index) => {
515
+ setTimeout(() => addLogEntry(entry), index * 800);
516
+ });
517
+
518
+ // Continue adding logs periodically
519
+ setInterval(() => {
520
+ const sampleLogs = [
521
+ {msg: "Processing batch " + (Math.floor(Math.random() * 68) + 1) + "/68", type: "info"},
522
+ {msg: "Loss: " + (Math.random() * 2 + 1).toFixed(3), type: "info"},
523
+ {msg: "Reward score: " + (Math.random() * 10).toFixed(2), type: "info"},
524
+ {msg: "Memory usage: " + (Math.random() * 20 + 40).toFixed(0) + "GB", type: "info"},
525
+ {msg: "Token frequency distribution updated", type: "info"},
526
+ {msg: "WARNING: Slight gradient spike detected", type: "warning"},
527
+ {msg: "Loss improved by " + (Math.random() * 15 + 5).toFixed(1) + "%", type: "success"},
528
+ ];
529
+ addLogEntry(sampleLogs[Math.floor(Math.random() * sampleLogs.length)]);
530
+ }, 3000);
531
+
532
+ // Update progress bar
533
+ let progress = 68;
534
+ const progressBar = document.getElementById('model-progress');
535
+
536
+ setInterval(() => {
537
+ if (progress < 100) {
538
+ progress += Math.random() * 0.5;
539
+ progressBar.style.width = `${progress}%`;
540
+ document.querySelector('#system-status span:last-child').textContent = `${Math.floor(progress)}% complete`;
541
+
542
+ // Update ETA
543
+ const remaining = 100 - progress;
544
+ const hours = Math.floor(remaining / 30);
545
+ const minutes = Math.floor((remaining % 30) * 2);
546
+ document.querySelector('#system-status span:last-child').nextElementSibling.textContent = `ETA: ${hours}h ${minutes}m`;
547
+ }
548
+ }, 5000);
549
+
550
+ // Sample viewer interaction
551
+ const samples = document.querySelectorAll('.data-sample');
552
+ const sampleDetail = document.getElementById('sample-detail');
553
+ const sampleTitle = document.getElementById('sample-title');
554
+ const sampleMeta = document.getElementById('sample-meta');
555
+ const sampleContent = document.getElementById('sample-content');
556
+ const sampleInterpretation = document.getElementById('sample-interpretation');
557
+ const closeDetail = document.getElementById('close-detail');
558
+
559
+ const sampleData = {
560
+ 1: {
561
+ title: "Text Prompt Sample",
562
+ meta: "Batch 42 • 14:23:07 • Source: Dataset v3.2",
563
+ content: `"Design a futuristic UI for an AI training system with LCARS-inspired elements and cyberpunk aesthetics. The interface should include:\n\n- Real-time training metrics\n- System status indicators\n- Dataset visualization\n- Model control panel\n\nFocus on creating an immersive experience that makes the user feel like they're monitoring a high-tech AI core."`,
564
+ interpretation: "This text prompt is designed to generate UI concepts for AI training systems. The model has associated this with:\n\n- 87% match to interface design tasks\n- 72% match to sci-fi aesthetic generation\n- 63% match to technical dashboard creation\n\nRecommended augmentation: Add parametric constraints for color scheme and layout requirements."
565
+ },
566
+ 2: {
567
+ title: "Parametric Sequence",
568
+ meta: "Batch 43 • 14:23:09 • Source: RLHF Dataset v2.1",
569
+ content: `[0.42, 1.73, -0.15, 0.89, -1.22, 0.56, 1.98, -0.67, 0.31, -1.05, 0.77, 1.12, -0.89, 0.23, 1.45, -0.32, 0.91, 1.67, -0.78, 0.12]`,
570
+ interpretation: "This parametric sequence represents:\n\n- Reward model weights for the current RLHF phase\n- Dimension 1 (0.42): Importance of factual accuracy\n- Dimension 2 (1.73): Creativity multiplier\n- Dimension 3 (-0.15): Safety constraint\n\nSequence is within normal parameters but shows slightly elevated creativity weighting which may require monitoring."
571
+ },
572
+ 3: {
573
+ title: "Concept Sketch",
574
+ meta: "Batch 41 • 14:22:55 • Source: Design Corpus v4.3",
575
+ content: "SKETCH DATA: [vector points...]\n\nRough concept sketch of a circular AI core visualization with pulsating rings and status indicators. Shows radial layout with:\n- Central core display\n- Surrounding metric panels\n- Glowing connection lines\n- Color-coded alert system",
576
+ interpretation: "Sketch matches 92% with successful UI designs from previous iterations. Key features detected:\n\n- Central focal point (optimal for attention)\n- Clear information hierarchy\n- Effective use of color coding\n\nRecommendation: Implement this layout for the system status overview panel with dynamic pulsing animation."
577
+ }
578
+ };
579
+
580
+ samples.forEach(sample => {
581
+ sample.addEventListener('click', () => {
582
+ const sampleId = sample.getAttribute('data-sample-id');
583
+ if (sampleData[sampleId]) {
584
+ sampleTitle.textContent = sampleData[sampleId].title;
585
+ sampleMeta.textContent = sampleData[sampleId].meta;
586
+ sampleContent.textContent = sampleData[sampleId].content;
587
+ sampleInterpretation.textContent = sampleData[sampleId].interpretation;
588
+ sampleDetail.classList.remove('hidden');
589
+ }
590
+ });
591
+ });
592
+
593
+ closeDetail.addEventListener('click', () => {
594
+ sampleDetail.classList.add('hidden');
595
+ });
596
+
597
+ // Control buttons
598
+ const startBtn = document.getElementById('start-btn');
599
+ const pauseBtn = document.getElementById('pause-btn');
600
+
601
+ startBtn.addEventListener('click', () => {
602
+ addLogEntry({msg: "Training resumed", type: "success"});
603
+ startBtn.querySelector('.status-light').classList.add('bg-green-500');
604
+ startBtn.querySelector('.status-light').classList.remove('bg-gray-500');
605
+ pauseBtn.querySelector('.status-light').classList.add('bg-amber-500');
606
+ pauseBtn.querySelector('.status-light').classList.remove('bg-gray-500');
607
+ });
608
+
609
+ pauseBtn.addEventListener('click', () => {
610
+ addLogEntry({msg: "Training paused", type: "warning"});
611
+ startBtn.querySelector('.status-light').classList.remove('bg-green-500');
612
+ startBtn.querySelector('.status-light').classList.add('bg-gray-500');
613
+ pauseBtn.querySelector('.status-light').classList.remove('bg-amber-500');
614
+ pauseBtn.querySelector('.status-light').classList.add('bg-gray-500');
615
+ });
616
+
617
+ // Learning rate slider
618
+ const lrSlider = document.getElementById('lr-slider');
619
+ const lrValue = document.getElementById('lr-value');
620
+
621
+ lrSlider.addEventListener('input', () => {
622
+ lrValue.textContent = lrSlider.value;
623
+ });
624
+
625
+ // Generate charts
626
+ function generateLossChart() {
627
+ const svg = document.getElementById('loss-chart');
628
+ svg.innerHTML = '';
629
+
630
+ const width = svg.clientWidth;
631
+ const height = svg.clientHeight;
632
+ const padding = 20;
633
+
634
+ // Create axes
635
+ const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
636
+ xAxis.setAttribute('x1', padding);
637
+ xAxis.setAttribute('y1', height - padding);
638
+ xAxis.setAttribute('x2', width - padding);
639
+ xAxis.setAttribute('y2', height - padding);
640
+ xAxis.setAttribute('stroke', 'rgba(255,255,255,0.3)');
641
+ xAxis.setAttribute('stroke-width', '1');
642
+ svg.appendChild(xAxis);
643
+
644
+ const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
645
+ yAxis.setAttribute('x1', padding);
646
+ yAxis.setAttribute('y1', padding);
647
+ yAxis.setAttribute('x2', padding);
648
+ yAxis.setAttribute('y2', height - padding);
649
+ yAxis.setAttribute('stroke', 'rgba(255,255,255,0.3)');
650
+ yAxis.setAttribute('stroke-width', '1');
651
+ svg.appendChild(yAxis);
652
+
653
+ // Generate loss curve data
654
+ const points = [];
655
+ for (let i = 0; i < 20; i++) {
656
+ points.push({
657
+ x: padding + (i * (width - padding * 2) / 20),
658
+ y: height - padding - (Math.random() * 0.7 + 0.3) * (height - padding * 2)
659
+ });
660
+ }
661
+
662
+ // Create area
663
+ let areaPath = `M${padding},${height - padding} `;
664
+ points.forEach(point => {
665
+ areaPath += `L${point.x},${point.y} `;
666
+ });
667
+ areaPath += `L${width - padding},${height - padding} Z`;
668
+
669
+ const area = document.createElementNS('http://www.w3.org/2000/svg', 'path');
670
+ area.setAttribute('d', areaPath);
671
+ area.setAttribute('fill', 'rgba(0, 240, 255, 0.1)');
672
+ svg.appendChild(area);
673
+
674
+ // Create line
675
+ let linePath = `M${points[0].x},${points[0].y} `;
676
+ points.slice(1).forEach(point => {
677
+ linePath += `L${point.x},${point.y} `;
678
+ });
679
+
680
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
681
+ line.setAttribute('d', linePath);
682
+ line.setAttribute('fill', 'none');
683
+ line.setAttribute('stroke', '#00f0ff');
684
+ line.setAttribute('stroke-width', '2');
685
+ svg.appendChild(line);
686
+
687
+ // Add labels
688
+ const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
689
+ xLabel.setAttribute('x', width - padding - 30);
690
+ xLabel.setAttribute('y', height - padding + 15);
691
+ xLabel.setAttribute('fill', 'rgba(255,255,255,0.6)');
692
+ xLabel.setAttribute('font-size', '10');
693
+ xLabel.textContent = 'Epochs';
694
+ svg.appendChild(xLabel);
695
+
696
+ const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
697
+ yLabel.setAttribute('x', padding + 5);
698
+ yLabel.setAttribute('y', padding + 10);
699
+ yLabel.setAttribute('fill', 'rgba(255,255,255,0.6)');
700
+ yLabel.setAttribute('font-size', '10');
701
+ yLabel.textContent = 'Loss';
702
+ svg.appendChild(yLabel);
703
+ }
704
+
705
+ function generateHeatmap() {
706
+ const svg = document.getElementById('heatmap-chart');
707
+ svg.innerHTML = '';
708
+
709
+ const width = svg.clientWidth;
710
+ const height = svg.clientHeight;
711
+ const padding = 20;
712
+ const cellSize = 20;
713
+ const cols = Math.floor((width - padding * 2) / cellSize);
714
+ const rows = Math.floor((height - padding * 2) / cellSize);
715
+
716
+ for (let x = 0; x < cols; x++) {
717
+ for (let y = 0; y < rows; y++) {
718
+ const value = Math.random();
719
+ const color = value > 0.8 ? '#ff00f0' :
720
+ value > 0.6 ? '#ff00a0' :
721
+ value > 0.4 ? '#ff0060' :
722
+ value > 0.2 ? '#ff0020' : '#ff0000';
723
+
724
+ const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
725
+ rect.setAttribute('x', padding + x * cellSize);
726
+ rect.setAttribute('y', padding + y * cellSize);
727
+ rect.setAttribute('width', cellSize - 2);
728
+ rect.setAttribute('height', cellSize - 2);
729
+ rect.setAttribute('fill', color);
730
+ rect.setAttribute('class', 'heatmap-cell');
731
+ svg.appendChild(rect);
732
+ }
733
+ }
734
+
735
+ // Add labels
736
+ const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
737
+ xLabel.setAttribute('x', width - padding - 30);
738
+ xLabel.setAttribute('y', height - padding + 15);
739
+ xLabel.setAttribute('fill', 'rgba(255,255,255,0.6)');
740
+ xLabel.setAttribute('font-size', '10');
741
+ xLabel.textContent = 'Reward Dim';
742
+ svg.appendChild(xLabel);
743
+
744
+ const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
745
+ yLabel.setAttribute('x', padding + 5);
746
+ yLabel.setAttribute('y', padding + 10);
747
+ yLabel.setAttribute('fill', 'rgba(255,255,255,0.6)');
748
+ yLabel.setAttribute('font-size', '10');
749
+ yLabel.textContent = 'Samples';
750
+ svg.appendChild(yLabel);
751
+ }
752
+
753
+ function generateTokenChart() {
754
+ const svg = document.getElementById('token-chart');
755
+ svg.innerHTML = '';
756
+
757
+ const width = svg.clientWidth;
758
+ const height = svg.clientHeight;
759
+ const padding = 20;
760
+ const barCount = 10;
761
+ const barWidth = (width - padding * 2) / barCount - 5;
762
+
763
+ const tokens = [
764
+ {token: "Design", freq: 0.42},
765
+ {token: "System", freq: 0.38},
766
+ {token: "Model", freq: 0.35},
767
+ {token: "Neural", freq: 0.31},
768
+ {token: "Core", freq: 0.28},
769
+ {token: "Training", freq: 0.25},
770
+ {token: "Network", freq: 0.22},
771
+ {token: "Learning", freq: 0.19},
772
+ {token: "Deep", freq: 0.16},
773
+ {token: "AI", freq: 0.12}
774
+ ];
775
+
776
+ // Create axes
777
+ const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
778
+ xAxis.setAttribute('x1', padding);
779
+ xAxis.setAttribute('y1', height - padding);
780
+ xAxis.setAttribute('x2', width - padding);
781
+ xAxis.setAttribute('y2', height - padding);
782
+ xAxis.setAttribute('stroke', 'rgba(255,255,255,0.3)');
783
+ xAxis.setAttribute('stroke-width', '1');
784
+ svg.appendChild(xAxis);
785
+
786
+ const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
787
+ yAxis.setAttribute('x1', padding);
788
+ yAxis.setAttribute('y1', padding);
789
+ yAxis.setAttribute('x2', padding);
790
+ yAxis.setAttribute('y2', height - padding);
791
+ yAxis.setAttribute('stroke', 'rgba(255,255,255,0.3)');
792
+ yAxis.setAttribute('stroke-width', '1');
793
+ svg.appendChild(yAxis);
794
+
795
+ // Create bars
796
+ tokens.forEach((token, i) => {
797
+ const barHeight = token.freq * (height - padding * 2);
798
+ const x = padding + i * (barWidth + 5);
799
+ const y = height - padding - barHeight;
800
+
801
+ const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
802
+ rect.setAttribute('x', x);
803
+ rect.setAttribute('y', y);
804
+ rect.setAttribute('width', barWidth);
805
+ rect.setAttribute('height', barHeight);
806
+ rect.setAttribute('fill', '#a0ff00');
807
+ svg.appendChild(rect);
808
+
809
+ const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
810
+ text.setAttribute('x', x + barWidth / 2);
811
+ text.setAttribute('y', height - padding + 15);
812
+ text.setAttribute('text-anchor', 'middle');
813
+ text.setAttribute('fill', 'rgba(255,255,255,0.6)');
814
+ text.setAttribute('font-size', '10');
815
+ text.textContent = token.token;
816
+ svg.appendChild(text);
817
+ });
818
+
819
+ // Add labels
820
+ const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
821
+ yLabel.setAttribute('x', padding + 5);
822
+ yLabel.setAttribute('y', padding + 10);
823
+ yLabel.setAttribute('fill', 'rgba(255,255,255,0.6)');
824
+ yLabel.setAttribute('font-size', '10');
825
+ yLabel.textContent = 'Frequency';
826
+ svg.appendChild(yLabel);
827
+ }
828
+
829
+ // Generate live generation text
830
+ const liveGeneration = document.getElementById('live-generation');
831
+ const generationSamples = [
832
+ "Generating parametric design for orbital habitat module...",
833
+ "Analyzing structural integrity of generated components...",
834
+ "Optimizing material distribution for weight constraints...",
835
+ "Simulating stress points in microgravity environment...",
836
+ "Rendering 3D visualization of assembly sequence...",
837
+ "Calculating thermal properties of composite materials...",
838
+ "Generating assembly instructions for robotic construction...",
839
+ "Validating safety protocols against regulatory standards..."
840
+ ];
841
+
842
+ setInterval(() => {
843
+ const sample = generationSamples[Math.floor(Math.random() * generationSamples.length)];
844
+ liveGeneration.textContent = sample + "\n";
845
+
846
+ // Add blinking cursor
847
+ const cursor = document.createElement('span');
848
+ cursor.className = 'text-amber-400';
849
+ cursor.textContent = '▋';
850
+ liveGeneration.appendChild(cursor);
851
+
852
+ // Randomly add progress indicator
853
+ if (Math.random() > 0.7) {
854
+ setTimeout(() => {
855
+ liveGeneration.textContent += "\n[Progress: " + (Math.random() * 40 + 10).toFixed(0) + "%]";
856
+ }, 500);
857
+ }
858
+ }, 4000);
859
+
860
+ // Initialize charts
861
+ generateLossChart();
862
+ generateHeatmap();
863
+ generateTokenChart();
864
+
865
+ // Make charts responsive
866
+ window.addEventListener('resize', () => {
867
+ generateLossChart();
868
+ generateHeatmap();
869
+ generateTokenChart();
870
+ });
871
+ </script>
872
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nomadicsynth/training-hub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
873
+ </html>