Hugging Face's logo

Spaces:
kaidjuric
/
applied-computing-components-system
Running

App Files Community
kaidjuric commited on
Commit
91a6e07
·
verified ·
1 Parent(s): ad5e928

Deploy from HuggingChat

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +1573 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Applied Computing Components System
3
- emoji: 📈
4
- colorFrom: indigo
5
- colorTo: purple
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: "Applied Computing Components System"
3
+ emoji: 🤗
4
+ colorFrom: yellow
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - huggingchat
10
  ---
11
 
12
+ # Applied Computing Components System
13
+
14
+ Built with [HuggingChat](https://huggingface.co/chat).
index.html CHANGED
@@ -1,19 +1,1574 @@
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>Applied Computing Components</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
16
+ background: #0a0e1a;
17
+ color: #e0e6f0;
18
+ min-height: 100vh;
19
+ overflow-x: hidden;
20
+ }
21
+
22
+ /* Animated Background */
23
+ .bg-canvas {
24
+ position: fixed;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ z-index: 0;
30
+ opacity: 0.3;
31
+ }
32
+
33
+ .app-container {
34
+ position: relative;
35
+ z-index: 10;
36
+ max-width: 1600px;
37
+ margin: 0 auto;
38
+ padding: 20px;
39
+ }
40
+
41
+ /* Header */
42
+ .header {
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: space-between;
46
+ padding: 20px 0;
47
+ margin-bottom: 30px;
48
+ border-bottom: 1px solid rgba(100, 200, 255, 0.1);
49
+ }
50
+
51
+ .logo {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 15px;
55
+ }
56
+
57
+ .logo-icon {
58
+ width: 50px;
59
+ height: 50px;
60
+ background: linear-gradient(135deg, #00d4ff, #7b2cbf);
61
+ border-radius: 12px;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ font-size: 24px;
66
+ box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
67
+ animation: pulse-glow 3s infinite;
68
+ }
69
+
70
+ @keyframes pulse-glow {
71
+ 0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
72
+ 50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.5); }
73
+ }
74
+
75
+ .logo-text h1 {
76
+ font-size: 24px;
77
+ font-weight: 700;
78
+ background: linear-gradient(135deg, #00d4ff, #7b2cbf);
79
+ -webkit-background-clip: text;
80
+ -webkit-text-fill-color: transparent;
81
+ }
82
+
83
+ .logo-text span {
84
+ font-size: 12px;
85
+ color: rgba(255, 255, 255, 0.5);
86
+ letter-spacing: 2px;
87
+ text-transform: uppercase;
88
+ }
89
+
90
+ .system-status {
91
+ display: flex;
92
+ align-items: center;
93
+ gap: 20px;
94
+ }
95
+
96
+ .status-pill {
97
+ display: flex;
98
+ align-items: center;
99
+ gap: 8px;
100
+ padding: 8px 16px;
101
+ background: rgba(0, 212, 255, 0.1);
102
+ border: 1px solid rgba(0, 212, 255, 0.2);
103
+ border-radius: 20px;
104
+ font-size: 13px;
105
+ }
106
+
107
+ .status-dot {
108
+ width: 8px;
109
+ height: 8px;
110
+ border-radius: 50%;
111
+ background: #00ff88;
112
+ animation: blink 2s infinite;
113
+ }
114
+
115
+ @keyframes blink {
116
+ 0%, 100% { opacity: 1; }
117
+ 50% { opacity: 0.3; }
118
+ }
119
+
120
+ /* Component Grid */
121
+ .component-grid {
122
+ display: grid;
123
+ grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
124
+ gap: 20px;
125
+ margin-bottom: 30px;
126
+ }
127
+
128
+ .component-card {
129
+ background: rgba(15, 20, 40, 0.8);
130
+ border: 1px solid rgba(100, 200, 255, 0.1);
131
+ border-radius: 16px;
132
+ overflow: hidden;
133
+ transition: all 0.3s ease;
134
+ backdrop-filter: blur(10px);
135
+ }
136
+
137
+ .component-card:hover {
138
+ border-color: rgba(0, 212, 255, 0.3);
139
+ transform: translateY(-2px);
140
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
141
+ }
142
+
143
+ .component-header {
144
+ padding: 16px 20px;
145
+ background: rgba(0, 212, 255, 0.05);
146
+ border-bottom: 1px solid rgba(100, 200, 255, 0.1);
147
+ display: flex;
148
+ align-items: center;
149
+ justify-content: space-between;
150
+ }
151
+
152
+ .component-title {
153
+ display: flex;
154
+ align-items: center;
155
+ gap: 10px;
156
+ font-size: 15px;
157
+ font-weight: 600;
158
+ }
159
+
160
+ .component-title .icon {
161
+ width: 36px;
162
+ height: 36px;
163
+ background: rgba(0, 212, 255, 0.1);
164
+ border-radius: 10px;
165
+ display: flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ font-size: 18px;
169
+ }
170
+
171
+ .component-actions {
172
+ display: flex;
173
+ gap: 8px;
174
+ }
175
+
176
+ .btn-sm {
177
+ padding: 6px 12px;
178
+ border: none;
179
+ border-radius: 6px;
180
+ font-size: 12px;
181
+ cursor: pointer;
182
+ transition: all 0.2s;
183
+ background: rgba(255, 255, 255, 0.1);
184
+ color: #fff;
185
+ }
186
+
187
+ .btn-sm:hover {
188
+ background: rgba(0, 212, 255, 0.2);
189
+ }
190
+
191
+ .btn-sm.active {
192
+ background: rgba(0, 212, 255, 0.3);
193
+ color: #00d4ff;
194
+ }
195
+
196
+ .component-body {
197
+ padding: 20px;
198
+ }
199
+
200
+ /* Data Flow Visualization */
201
+ .flow-container {
202
+ height: 200px;
203
+ position: relative;
204
+ background: rgba(0, 0, 0, 0.2);
205
+ border-radius: 12px;
206
+ overflow: hidden;
207
+ }
208
+
209
+ .flow-node {
210
+ position: absolute;
211
+ width: 60px;
212
+ height: 60px;
213
+ border-radius: 12px;
214
+ display: flex;
215
+ align-items: center;
216
+ justify-content: center;
217
+ font-size: 24px;
218
+ background: rgba(0, 212, 255, 0.15);
219
+ border: 2px solid rgba(0, 212, 255, 0.3);
220
+ transition: all 0.3s;
221
+ }
222
+
223
+ .flow-node.active {
224
+ background: rgba(0, 212, 255, 0.3);
225
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
226
+ transform: scale(1.1);
227
+ }
228
+
229
+ .flow-edge {
230
+ position: absolute;
231
+ height: 2px;
232
+ background: linear-gradient(90deg, transparent, #00d4ff, transparent);
233
+ transform-origin: left center;
234
+ opacity: 0.5;
235
+ transition: opacity 0.3s;
236
+ }
237
+
238
+ .flow-edge.active {
239
+ opacity: 1;
240
+ animation: flow-pulse 1s infinite;
241
+ }
242
+
243
+ @keyframes flow-pulse {
244
+ 0% { background: linear-gradient(90deg, transparent, #00d4ff, transparent); }
245
+ 50% { background: linear-gradient(90deg, transparent, #fff, transparent); }
246
+ 100% { background: linear-gradient(90deg, transparent, #00d4ff, transparent); }
247
+ }
248
+
249
+ /* Compute Metrics */
250
+ .metrics-grid {
251
+ display: grid;
252
+ grid-template-columns: repeat(3, 1fr);
253
+ gap: 12px;
254
+ }
255
+
256
+ .metric-box {
257
+ text-align: center;
258
+ padding: 15px;
259
+ background: rgba(0, 0, 0, 0.2);
260
+ border-radius: 10px;
261
+ transition: all 0.3s;
262
+ }
263
+
264
+ .metric-box:hover {
265
+ background: rgba(0, 212, 255, 0.05);
266
+ }
267
+
268
+ .metric-value {
269
+ font-size: 28px;
270
+ font-weight: 700;
271
+ color: #00d4ff;
272
+ font-family: 'Courier New', monospace;
273
+ }
274
+
275
+ .metric-label {
276
+ font-size: 11px;
277
+ color: rgba(255, 255, 255, 0.5);
278
+ margin-top: 4px;
279
+ text-transform: uppercase;
280
+ letter-spacing: 1px;
281
+ }
282
+
283
+ /* Processing Queue */
284
+ .queue-list {
285
+ display: flex;
286
+ flex-direction: column;
287
+ gap: 8px;
288
+ max-height: 200px;
289
+ overflow-y: auto;
290
+ }
291
+
292
+ .queue-item {
293
+ display: flex;
294
+ align-items: center;
295
+ gap: 12px;
296
+ padding: 10px 14px;
297
+ background: rgba(255, 255, 255, 0.03);
298
+ border-radius: 8px;
299
+ border-left: 3px solid #00d4ff;
300
+ transition: all 0.3s;
301
+ animation: slide-in 0.3s ease;
302
+ }
303
+
304
+ @keyframes slide-in {
305
+ from { opacity: 0; transform: translateX(-20px); }
306
+ to { opacity: 1; transform: translateX(0); }
307
+ }
308
+
309
+ .queue-item.processing { border-left-color: #00ff88; }
310
+ .queue-item.pending { border-left-color: #ffaa00; }
311
+ .queue-item.error { border-left-color: #ff4444; }
312
+
313
+ .queue-status {
314
+ width: 8px;
315
+ height: 8px;
316
+ border-radius: 50%;
317
+ flex-shrink: 0;
318
+ }
319
+
320
+ .queue-status.processing { background: #00ff88; animation: pulse 1s infinite; }
321
+ .queue-status.pending { background: #ffaa00; }
322
+ .queue-status.error { background: #ff4444; }
323
+
324
+ .queue-info {
325
+ flex: 1;
326
+ min-width: 0;
327
+ }
328
+
329
+ .queue-name {
330
+ font-size: 13px;
331
+ font-weight: 500;
332
+ white-space: nowrap;
333
+ overflow: hidden;
334
+ text-overflow: ellipsis;
335
+ }
336
+
337
+ .queue-meta {
338
+ font-size: 11px;
339
+ color: rgba(255, 255, 255, 0.4);
340
+ }
341
+
342
+ .queue-progress {
343
+ width: 60px;
344
+ height: 4px;
345
+ background: rgba(255, 255, 255, 0.1);
346
+ border-radius: 2px;
347
+ overflow: hidden;
348
+ }
349
+
350
+ .queue-progress-bar {
351
+ height: 100%;
352
+ background: linear-gradient(90deg, #00d4ff, #00ff88);
353
+ border-radius: 2px;
354
+ transition: width 0.5s ease;
355
+ }
356
+
357
+ /* Neural Network Viz */
358
+ .nn-container {
359
+ height: 220px;
360
+ position: relative;
361
+ display: flex;
362
+ align-items: center;
363
+ justify-content: center;
364
+ }
365
+
366
+ .nn-layer {
367
+ display: flex;
368
+ flex-direction: column;
369
+ gap: 8px;
370
+ margin: 0 20px;
371
+ }
372
+
373
+ .nn-node {
374
+ width: 24px;
375
+ height: 24px;
376
+ border-radius: 50%;
377
+ background: rgba(0, 212, 255, 0.2);
378
+ border: 2px solid rgba(0, 212, 255, 0.4);
379
+ transition: all 0.3s;
380
+ position: relative;
381
+ }
382
+
383
+ .nn-node.active {
384
+ background: rgba(0, 212, 255, 0.6);
385
+ box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
386
+ transform: scale(1.2);
387
+ }
388
+
389
+ .nn-node::after {
390
+ content: attr(data-value);
391
+ position: absolute;
392
+ top: -20px;
393
+ left: 50%;
394
+ transform: translateX(-50%);
395
+ font-size: 9px;
396
+ color: rgba(255, 255, 255, 0.6);
397
+ white-space: nowrap;
398
+ opacity: 0;
399
+ transition: opacity 0.3s;
400
+ }
401
+
402
+ .nn-node:hover::after {
403
+ opacity: 1;
404
+ }
405
+
406
+ .nn-connections {
407
+ position: absolute;
408
+ top: 0;
409
+ left: 0;
410
+ width: 100%;
411
+ height: 100%;
412
+ pointer-events: none;
413
+ }
414
+
415
+ /* Memory Map */
416
+ .memory-map {
417
+ display: grid;
418
+ grid-template-columns: repeat(16, 1fr);
419
+ gap: 2px;
420
+ padding: 10px;
421
+ background: rgba(0, 0, 0, 0.2);
422
+ border-radius: 10px;
423
+ }
424
+
425
+ .memory-cell {
426
+ aspect-ratio: 1;
427
+ border-radius: 2px;
428
+ background: rgba(255, 255, 255, 0.05);
429
+ transition: all 0.3s;
430
+ position: relative;
431
+ }
432
+
433
+ .memory-cell:hover {
434
+ transform: scale(1.5);
435
+ z-index: 10;
436
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
437
+ }
438
+
439
+ .memory-cell.active {
440
+ background: rgba(0, 212, 255, 0.4);
441
+ animation: memory-pulse 2s infinite;
442
+ }
443
+
444
+ .memory-cell.used {
445
+ background: rgba(123, 44, 191, 0.4);
446
+ }
447
+
448
+ .memory-cell.system {
449
+ background: rgba(0, 255, 136, 0.3);
450
+ }
451
+
452
+ @keyframes memory-pulse {
453
+ 0%, 100% { opacity: 0.6; }
454
+ 50% { opacity: 1; }
455
+ }
456
+
457
+ /* Algorithm Visualizer */
458
+ .algo-container {
459
+ height: 200px;
460
+ display: flex;
461
+ align-items: flex-end;
462
+ justify-content: center;
463
+ gap: 4px;
464
+ padding: 20px;
465
+ background: rgba(0, 0, 0, 0.2);
466
+ border-radius: 12px;
467
+ }
468
+
469
+ .algo-bar {
470
+ flex: 1;
471
+ background: linear-gradient(to top, #00d4ff, #7b2cbf);
472
+ border-radius: 3px 3px 0 0;
473
+ transition: all 0.5s ease;
474
+ position: relative;
475
+ min-width: 8px;
476
+ max-width: 30px;
477
+ }
478
+
479
+ .algo-bar:hover {
480
+ filter: brightness(1.3);
481
+ }
482
+
483
+ .algo-bar.comparing {
484
+ background: linear-gradient(to top, #ffaa00, #ff4444);
485
+ }
486
+
487
+ .algo-bar.sorted {
488
+ background: linear-gradient(to top, #00ff88, #00d4ff);
489
+ }
490
+
491
+ .algo-bar::after {
492
+ content: attr(data-value);
493
+ position: absolute;
494
+ top: -18px;
495
+ left: 50%;
496
+ transform: translateX(-50%);
497
+ font-size: 10px;
498
+ color: rgba(255, 255, 255, 0.7);
499
+ opacity: 0;
500
+ transition: opacity 0.3s;
501
+ }
502
+
503
+ .algo-bar:hover::after {
504
+ opacity: 1;
505
+ }
506
+
507
+ /* Terminal */
508
+ .terminal {
509
+ background: rgba(0, 0, 0, 0.4);
510
+ border-radius: 10px;
511
+ padding: 15px;
512
+ font-family: 'Courier New', monospace;
513
+ font-size: 12px;
514
+ line-height: 1.6;
515
+ height: 180px;
516
+ overflow-y: auto;
517
+ color: rgba(255, 255, 255, 0.8);
518
+ }
519
+
520
+ .terminal-line {
521
+ margin-bottom: 4px;
522
+ display: flex;
523
+ gap: 10px;
524
+ }
525
+
526
+ .terminal-time {
527
+ color: #00ff88;
528
+ opacity: 0.6;
529
+ flex-shrink: 0;
530
+ }
531
+
532
+ .terminal-type {
533
+ color: #00d4ff;
534
+ flex-shrink: 0;
535
+ }
536
+
537
+ .terminal-msg {
538
+ color: rgba(255, 255, 255, 0.8);
539
+ }
540
+
541
+ .terminal-msg.success { color: #00ff88; }
542
+ .terminal-msg.warning { color: #ffaa00; }
543
+ .terminal-msg.error { color: #ff4444; }
544
+
545
+ /* Control Panel */
546
+ .control-panel {
547
+ display: grid;
548
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
549
+ gap: 15px;
550
+ margin-bottom: 20px;
551
+ }
552
+
553
+ .control-group {
554
+ background: rgba(15, 20, 40, 0.8);
555
+ border: 1px solid rgba(100, 200, 255, 0.1);
556
+ border-radius: 12px;
557
+ padding: 16px;
558
+ }
559
+
560
+ .control-label {
561
+ font-size: 12px;
562
+ color: rgba(255, 255, 255, 0.5);
563
+ text-transform: uppercase;
564
+ letter-spacing: 1px;
565
+ margin-bottom: 10px;
566
+ }
567
+
568
+ .slider-container {
569
+ display: flex;
570
+ align-items: center;
571
+ gap: 10px;
572
+ }
573
+
574
+ .slider {
575
+ flex: 1;
576
+ -webkit-appearance: none;
577
+ height: 6px;
578
+ border-radius: 3px;
579
+ background: rgba(255, 255, 255, 0.1);
580
+ outline: none;
581
+ }
582
+
583
+ .slider::-webkit-slider-thumb {
584
+ -webkit-appearance: none;
585
+ width: 16px;
586
+ height: 16px;
587
+ border-radius: 50%;
588
+ background: #00d4ff;
589
+ cursor: pointer;
590
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
591
+ }
592
+
593
+ .slider-value {
594
+ width: 50px;
595
+ text-align: right;
596
+ font-family: 'Courier New', monospace;
597
+ font-size: 14px;
598
+ color: #00d4ff;
599
+ }
600
+
601
+ .btn {
602
+ padding: 10px 20px;
603
+ border: none;
604
+ border-radius: 8px;
605
+ font-size: 14px;
606
+ font-weight: 600;
607
+ cursor: pointer;
608
+ transition: all 0.3s;
609
+ display: inline-flex;
610
+ align-items: center;
611
+ gap: 8px;
612
+ }
613
+
614
+ .btn-primary {
615
+ background: linear-gradient(135deg, #00d4ff, #7b2cbf);
616
+ color: #fff;
617
+ }
618
+
619
+ .btn-primary:hover {
620
+ transform: translateY(-2px);
621
+ box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
622
+ }
623
+
624
+ .btn-secondary {
625
+ background: rgba(255, 255, 255, 0.1);
626
+ color: #fff;
627
+ }
628
+
629
+ .btn-secondary:hover {
630
+ background: rgba(255, 255, 255, 0.15);
631
+ }
632
+
633
+ /* Full Width Components */
634
+ .component-full {
635
+ grid-column: 1 / -1;
636
+ }
637
+
638
+ /* Scrollbar */
639
+ ::-webkit-scrollbar {
640
+ width: 6px;
641
+ height: 6px;
642
+ }
643
+
644
+ ::-webkit-scrollbar-track {
645
+ background: rgba(255, 255, 255, 0.02);
646
+ }
647
+
648
+ ::-webkit-scrollbar-thumb {
649
+ background: rgba(0, 212, 255, 0.2);
650
+ border-radius: 3px;
651
+ }
652
+
653
+ ::-webkit-scrollbar-thumb:hover {
654
+ background: rgba(0, 212, 255, 0.4);
655
+ }
656
+
657
+ /* Responsive */
658
+ @media (max-width: 768px) {
659
+ .component-grid {
660
+ grid-template-columns: 1fr;
661
+ }
662
+ .metrics-grid {
663
+ grid-template-columns: 1fr;
664
+ }
665
+ .memory-map {
666
+ grid-template-columns: repeat(8, 1fr);
667
+ }
668
+ }
669
+
670
+ /* Tooltip */
671
+ .tooltip {
672
+ position: relative;
673
+ }
674
+
675
+ .tooltip::before {
676
+ content: attr(data-tip);
677
+ position: absolute;
678
+ bottom: 100%;
679
+ left: 50%;
680
+ transform: translateX(-50%);
681
+ padding: 6px 12px;
682
+ background: rgba(0, 0, 0, 0.9);
683
+ border: 1px solid rgba(0, 212, 255, 0.3);
684
+ border-radius: 6px;
685
+ font-size: 12px;
686
+ white-space: nowrap;
687
+ opacity: 0;
688
+ pointer-events: none;
689
+ transition: opacity 0.3s;
690
+ z-index: 100;
691
+ }
692
+
693
+ .tooltip:hover::before {
694
+ opacity: 1;
695
+ }
696
+ </style>
697
+ </head>
698
+ <body>
699
+ <canvas class="bg-canvas" id="bgCanvas"></canvas>
700
+
701
+ <div class="app-container">
702
+ <!-- Header -->
703
+ <header class="header">
704
+ <div class="logo">
705
+ <div class="logo-icon">⚡</div>
706
+ <div class="logo-text">
707
+ <h1>Applied Computing Components</h1>
708
+ <span>Modular Processing System v2.0</span>
709
+ </div>
710
+ </div>
711
+ <div class="system-status">
712
+ <div class="status-pill">
713
+ <span class="status-dot"></span>
714
+ <span>System Online</span>
715
+ </div>
716
+ <div class="status-pill">
717
+ <span id="uptime">00:00:00</span>
718
+ </div>
719
+ </div>
720
+ </header>
721
+
722
+ <!-- Control Panel -->
723
+ <div class="control-panel">
724
+ <div class="control-group">
725
+ <div class="control-label">Processing Threads</div>
726
+ <div class="slider-container">
727
+ <input type="range" class="slider" id="threadSlider" min="1" max="16" value="4">
728
+ <span class="slider-value" id="threadValue">4</span>
729
+ </div>
730
+ </div>
731
+ <div class="control-group">
732
+ <div class="control-label">Memory Allocation</div>
733
+ <div class="slider-container">
734
+ <input type="range" class="slider" id="memorySlider" min="256" max="8192" value="2048" step="256">
735
+ <span class="slider-value" id="memoryValue">2048</span>
736
+ </div>
737
+ </div>
738
+ <div class="control-group">
739
+ <div class="control-label">Queue Depth</div>
740
+ <div class="slider-container">
741
+ <input type="range" class="slider" id="queueSlider" min="10" max="1000" value="100" step="10">
742
+ <span class="slider-value" id="queueValue">100</span>
743
+ </div>
744
+ </div>
745
+ <div class="control-group">
746
+ <div class="control-label">Actions</div>
747
+ <div style="display: flex; gap: 8px;">
748
+ <button class="btn btn-primary" onclick="startSimulation()">▶ Start</button>
749
+ <button class="btn btn-secondary" onclick="pauseSimulation()">⏸ Pause</button>
750
+ <button class="btn btn-secondary" onclick="resetSimulation()">↺ Reset</button>
751
+ </div>
752
+ </div>
753
+ </div>
754
+
755
+ <!-- Component Grid -->
756
+ <div class="component-grid">
757
+ <!-- Data Flow Pipeline -->
758
+ <div class="component-card component-full">
759
+ <div class="component-header">
760
+ <div class="component-title">
761
+ <div class="icon">🌊</div>
762
+ <span>Data Flow Pipeline</span>
763
+ </div>
764
+ <div class="component-actions">
765
+ <button class="btn-sm active" onclick="setFlowMode('pipeline')">Pipeline</button>
766
+ <button class="btn-sm" onclick="setFlowMode('parallel')">Parallel</button>
767
+ <button class="btn-sm" onclick="setFlowMode('distributed')">Distributed</button>
768
+ </div>
769
+ </div>
770
+ <div class="component-body">
771
+ <div class="flow-container" id="flowContainer">
772
+ <!-- Flow nodes injected by JS -->
773
+ </div>
774
+ </div>
775
+ </div>
776
+
777
+ <!-- Compute Metrics -->
778
+ <div class="component-card">
779
+ <div class="component-header">
780
+ <div class="component-title">
781
+ <div class="icon">📊</div>
782
+ <span>Compute Metrics</span>
783
+ </div>
784
+ </div>
785
+ <div class="component-body">
786
+ <div class="metrics-grid">
787
+ <div class="metric-box">
788
+ <div class="metric-value" id="metricThroughput">0</div>
789
+ <div class="metric-label">Throughput<br>ops/sec</div>
790
+ </div>
791
+ <div class="metric-box">
792
+ <div class="metric-value" id="metricLatency">0</div>
793
+ <div class="metric-label">Latency<br>ms</div>
794
+ </div>
795
+ <div class="metric-box">
796
+ <div class="metric-value" id="metricEfficiency">0%</div>
797
+ <div class="metric-label">Efficiency</div>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </div>
802
+
803
+ <!-- Processing Queue -->
804
+ <div class="component-card">
805
+ <div class="component-header">
806
+ <div class="component-title">
807
+ <div class="icon">📋</div>
808
+ <span>Processing Queue</span>
809
+ </div>
810
+ <div class="component-actions">
811
+ <span id="queueCount" style="font-size: 12px; color: rgba(255,255,255,0.5);">0 items</span>
812
+ </div>
813
+ </div>
814
+ <div class="component-body">
815
+ <div class="queue-list" id="queueList">
816
+ <!-- Queue items injected by JS -->
817
+ </div>
818
+ </div>
819
+ </div>
820
+
821
+ <!-- Neural Network -->
822
+ <div class="component-card">
823
+ <div class="component-header">
824
+ <div class="component-title">
825
+ <div class="icon">🧠</div>
826
+ <span>Neural Network</span>
827
+ </div>
828
+ <div class="component-actions">
829
+ <button class="btn-sm" onclick="trainNetwork()">Train</button>
830
+ <button class="btn-sm" onclick="inferenceNetwork()">Infer</button>
831
+ </div>
832
+ </div>
833
+ <div class="component-body">
834
+ <div class="nn-container" id="nnContainer">
835
+ <svg class="nn-connections" id="nnConnections"></svg>
836
+ <!-- Layers injected by JS -->
837
+ </div>
838
+ </div>
839
+ </div>
840
+
841
+ <!-- Memory Map -->
842
+ <div class="component-card">
843
+ <div class="component-header">
844
+ <div class="component-title">
845
+ <div class="icon">💾</div>
846
+ <span>Memory Map</span>
847
+ </div>
848
+ <div class="component-actions">
849
+ <button class="btn-sm" onclick="defragmentMemory()">Defrag</button>
850
+ <button class="btn-sm" onclick="clearCache()">Clear</button>
851
+ </div>
852
+ </div>
853
+ <div class="component-body">
854
+ <div class="memory-map" id="memoryMap">
855
+ <!-- Memory cells injected by JS -->
856
+ </div>
857
+ <div style="display: flex; gap: 15px; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,0.5);">
858
+ <span>● Free</span>
859
+ <span style="color: rgba(0,212,255,0.6);">● Active</span>
860
+ <span style="color: rgba(123,44,191,0.6);">● Used</span>
861
+ <span style="color: rgba(0,255,136,0.6);">● System</span>
862
+ </div>
863
+ </div>
864
+ </div>
865
+
866
+ <!-- Algorithm Visualizer -->
867
+ <div class="component-card">
868
+ <div class="component-header">
869
+ <div class="component-title">
870
+ <div class="icon">📈</div>
871
+ <span>Algorithm Visualizer</span>
872
+ </div>
873
+ <div class="component-actions">
874
+ <button class="btn-sm active" onclick="setAlgorithm('quicksort')">Quicksort</button>
875
+ <button class="btn-sm" onclick="setAlgorithm('mergesort')">Mergesort</button>
876
+ <button class="btn-sm" onclick="setAlgorithm('bubblesort')">Bubble</button>
877
+ </div>
878
+ </div>
879
+ <div class="component-body">
880
+ <div class="algo-container" id="algoContainer">
881
+ <!-- Bars injected by JS -->
882
+ </div>
883
+ </div>
884
+ </div>
885
+
886
+ <!-- System Terminal -->
887
+ <div class="component-card component-full">
888
+ <div class="component-header">
889
+ <div class="component-title">
890
+ <div class="icon">💻</div>
891
+ <span>System Terminal</span>
892
+ </div>
893
+ <div class="component-actions">
894
+ <button class="btn-sm" onclick="clearTerminal()">Clear</button>
895
+ <button class="btn-sm" onclick="exportLogs()">Export</button>
896
+ </div>
897
+ </div>
898
+ <div class="component-body">
899
+ <div class="terminal" id="terminal">
900
+ <!-- Terminal lines injected by JS -->
901
+ </div>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </div>
906
+
907
+ <script>
908
+ // ===== SYSTEM STATE =====
909
+ const state = {
910
+ running: false,
911
+ uptime: 0,
912
+ threads: 4,
913
+ memory: 2048,
914
+ queueDepth: 100,
915
+ flowMode: 'pipeline',
916
+ algorithm: 'quicksort',
917
+ throughput: 0,
918
+ latency: 0,
919
+ efficiency: 0,
920
+ queue: [],
921
+ memoryCells: [],
922
+ nnLayers: [4, 6, 6, 4],
923
+ logs: [],
924
+ flowNodes: [
925
+ { id: 'input', x: 50, y: 70, icon: '📥', label: 'Input' },
926
+ { id: 'preprocess', x: 200, y: 70, icon: '🔧', label: 'Preprocess' },
927
+ { id: 'transform', x: 350, y: 70, icon: '⚡', label: 'Transform' },
928
+ { id: 'analyze', x: 500, y: 70, icon: '🔍', label: 'Analyze' },
929
+ { id: 'output', x: 650, y: 70, icon: '📤', label: 'Output' }
930
+ ],
931
+ flowEdges: [
932
+ { from: 'input', to: 'preprocess' },
933
+ { from: 'preprocess', to: 'transform' },
934
+ { from: 'transform', to: 'analyze' },
935
+ { from: 'analyze', to: 'output' }
936
+ ]
937
+ };
938
+
939
+ // ===== INITIALIZATION =====
940
+ function init() {
941
+ initBackground();
942
+ initFlow();
943
+ initMemoryMap();
944
+ initNeuralNetwork();
945
+ initAlgorithm();
946
+ initSliders();
947
+ updateUptime();
948
+ setInterval(() => {
949
+ if (state.running) {
950
+ updateUptime();
951
+ simulateActivity();
952
+ }
953
+ }, 1000);
954
+ setInterval(() => {
955
+ if (state.running) {
956
+ updateMetrics();
957
+ processQueue();
958
+ }
959
+ }, 500);
960
+ addLog('SYSTEM', 'Applied Computing Components initialized', 'success');
961
+ addLog('SYSTEM', 'All modules loaded and ready', 'success');
962
+ }
963
+
964
+ function initBackground() {
965
+ const canvas = document.getElementById('bgCanvas');
966
+ const ctx = canvas.getContext('2d');
967
+
968
+ function resize() {
969
+ canvas.width = window.innerWidth;
970
+ canvas.height = window.innerHeight;
971
+ }
972
+ resize();
973
+ window.addEventListener('resize', resize);
974
+
975
+ const particles = [];
976
+ for (let i = 0; i < 80; i++) {
977
+ particles.push({
978
+ x: Math.random() * canvas.width,
979
+ y: Math.random() * canvas.height,
980
+ vx: (Math.random() - 0.5) * 0.5,
981
+ vy: (Math.random() - 0.5) * 0.5,
982
+ radius: Math.random() * 2 + 1,
983
+ opacity: Math.random() * 0.5 + 0.2
984
+ });
985
+ }
986
+
987
+ function animate() {
988
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
989
+
990
+ particles.forEach(p => {
991
+ p.x += p.vx;
992
+ p.y += p.vy;
993
+
994
+ if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
995
+ if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
996
+
997
+ ctx.beginPath();
998
+ ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
999
+ ctx.fillStyle = `rgba(0, 212, 255, ${p.opacity})`;
1000
+ ctx.fill();
1001
+ });
1002
+
1003
+ // Draw connections
1004
+ particles.forEach((p1, i) => {
1005
+ particles.slice(i + 1).forEach(p2 => {
1006
+ const dx = p1.x - p2.x;
1007
+ const dy = p1.y - p2.y;
1008
+ const dist = Math.sqrt(dx * dx + dy * dy);
1009
+
1010
+ if (dist < 150) {
1011
+ ctx.beginPath();
1012
+ ctx.moveTo(p1.x, p1.y);
1013
+ ctx.lineTo(p2.x, p2.y);
1014
+ ctx.strokeStyle = `rgba(0, 212, 255, ${0.1 * (1 - dist / 150)})`;
1015
+ ctx.lineWidth = 0.5;
1016
+ ctx.stroke();
1017
+ }
1018
+ });
1019
+ });
1020
+
1021
+ requestAnimationFrame(animate);
1022
+ }
1023
+ animate();
1024
+ }
1025
+
1026
+ // ===== FLOW PIPELINE =====
1027
+ function initFlow() {
1028
+ const container = document.getElementById('flowContainer');
1029
+ container.innerHTML = '';
1030
+
1031
+ // Create edges
1032
+ state.flowEdges.forEach(edge => {
1033
+ const fromNode = state.flowNodes.find(n => n.id === edge.from);
1034
+ const toNode = state.flowNodes.find(n => n.id === edge.to);
1035
+
1036
+ const edgeEl = document.createElement('div');
1037
+ edgeEl.className = 'flow-edge';
1038
+ edgeEl.id = `edge-${edge.from}-${edge.to}`;
1039
+
1040
+ const dx = toNode.x - fromNode.x;
1041
+ const dy = toNode.y - fromNode.y;
1042
+ const length = Math.sqrt(dx * dx + dy * dy);
1043
+ const angle = Math.atan2(dy, dx) * 180 / Math.PI;
1044
+
1045
+ edgeEl.style.width = `${length}px`;
1046
+ edgeEl.style.left = `${fromNode.x + 30}px`;
1047
+ edgeEl.style.top = `${fromNode.y + 30}px`;
1048
+ edgeEl.style.transform = `rotate(${angle}deg)`;
1049
+
1050
+ container.appendChild(edgeEl);
1051
+ });
1052
+
1053
+ // Create nodes
1054
+ state.flowNodes.forEach(node => {
1055
+ const nodeEl = document.createElement('div');
1056
+ nodeEl.className = 'flow-node';
1057
+ nodeEl.id = `node-${node.id}`;
1058
+ nodeEl.innerHTML = node.icon;
1059
+ nodeEl.style.left = `${node.x}px`;
1060
+ nodeEl.style.top = `${node.y}px`;
1061
+ nodeEl.title = node.label;
1062
+ container.appendChild(nodeEl);
1063
+ });
1064
+ }
1065
+
1066
+ function setFlowMode(mode) {
1067
+ state.flowMode = mode;
1068
+ document.querySelectorAll('.component-header .btn-sm').forEach(btn => {
1069
+ btn.classList.remove('active');
1070
+ });
1071
+ event.target.classList.add('active');
1072
+
1073
+ // Reconfigure flow based on mode
1074
+ if (mode === 'parallel') {
1075
+ state.flowNodes[2].y = 30;
1076
+ state.flowNodes[3].y = 110;
1077
+ } else if (mode === 'distributed') {
1078
+ state.flowNodes.forEach((n, i) => {
1079
+ n.y = 30 + (i % 3) * 50;
1080
+ });
1081
+ } else {
1082
+ state.flowNodes.forEach(n => n.y = 70);
1083
+ }
1084
+
1085
+ initFlow();
1086
+ addLog('FLOW', `Switched to ${mode} processing mode`);
1087
+ }
1088
+
1089
+ function animateFlow() {
1090
+ const nodes = document.querySelectorAll('.flow-node');
1091
+ const edges = document.querySelectorAll('.flow-edge');
1092
+
1093
+ nodes.forEach((node, i) => {
1094
+ setTimeout(() => {
1095
+ node.classList.add('active');
1096
+ setTimeout(() => node.classList.remove('active'), 500);
1097
+ }, i * 200);
1098
+ });
1099
+
1100
+ edges.forEach((edge, i) => {
1101
+ setTimeout(() => {
1102
+ edge.classList.add('active');
1103
+ setTimeout(() => edge.classList.remove('active'), 500);
1104
+ }, i * 200 + 100);
1105
+ });
1106
+ }
1107
+
1108
+ // ===== MEMORY MAP =====
1109
+ function initMemoryMap() {
1110
+ const container = document.getElementById('memoryMap');
1111
+ container.innerHTML = '';
1112
+ state.memoryCells = [];
1113
+
1114
+ const totalCells = 128;
1115
+ for (let i = 0; i < totalCells; i++) {
1116
+ const cell = document.createElement('div');
1117
+ cell.className = 'memory-cell';
1118
+ cell.id = `mem-${i}`;
1119
+
1120
+ // Random initial state
1121
+ const rand = Math.random();
1122
+ if (rand > 0.7) cell.classList.add('used');
1123
+ else if (rand > 0.9) cell.classList.add('system');
1124
+
1125
+ cell.title = `Address: 0x${(i * 64).toString(16).padStart(4, '0')}`;
1126
+ container.appendChild(cell);
1127
+ state.memoryCells.push(cell);
1128
+ }
1129
+ }
1130
+
1131
+ defragmentMemory = () => {
1132
+ addLog('MEMORY', 'Starting defragmentation...');
1133
+ const used = state.memoryCells.filter(c => c.classList.contains('used'));
1134
+ const free = state.memoryCells.filter(c => !c.classList.contains('used') && !c.classList.contains('system'));
1135
+
1136
+ // Animate defrag
1137
+ let i = 0;
1138
+ const interval = setInterval(() => {
1139
+ if (i >= used.length) {
1140
+ clearInterval(interval);
1141
+ addLog('MEMORY', 'Defragmentation complete', 'success');
1142
+ return;
1143
+ }
1144
+
1145
+ const cell = state.memoryCells[i];
1146
+ cell.classList.remove('used');
1147
+ cell.classList.add('active');
1148
+ setTimeout(() => cell.classList.remove('active'), 300);
1149
+
1150
+ i++;
1151
+ }, 50);
1152
+ };
1153
+
1154
+ clearCache = () => {
1155
+ addLog('MEMORY', 'Clearing cache...');
1156
+ state.memoryCells.forEach((cell, i) => {
1157
+ if (cell.classList.contains('used')) {
1158
+ setTimeout(() => {
1159
+ cell.classList.remove('used');
1160
+ cell.classList.add('active');
1161
+ setTimeout(() => cell.classList.remove('active'), 200);
1162
+ }, i * 10);
1163
+ }
1164
+ });
1165
+ setTimeout(() => addLog('MEMORY', 'Cache cleared', 'success'), 1500);
1166
+ };
1167
+
1168
+ // ===== NEURAL NETWORK =====
1169
+ function initNeuralNetwork() {
1170
+ const container = document.getElementById('nnContainer');
1171
+ const svg = document.getElementById('nnConnections');
1172
+
1173
+ // Clear existing
1174
+ container.querySelectorAll('.nn-layer').forEach(l => l.remove());
1175
+
1176
+ // Create layers
1177
+ state.nnLayers.forEach((size, layerIdx) => {
1178
+ const layer = document.createElement('div');
1179
+ layer.className = 'nn-layer';
1180
+ layer.id = `layer-${layerIdx}`;
1181
+
1182
+ for (let i = 0; i < size; i++) {
1183
+ const node = document.createElement('div');
1184
+ node.className = 'nn-node';
1185
+ node.id = `node-${layerIdx}-${i}`;
1186
+ node.dataset.value = (Math.random() * 2 - 1).toFixed(2);
1187
+ layer.appendChild(node);
1188
+ }
1189
+
1190
+ container.appendChild(layer);
1191
+ });
1192
+
1193
+ // Draw connections
1194
+ drawNNConnections();
1195
+ }
1196
+
1197
+ function drawNNConnections() {
1198
+ const svg = document.getElementById('nnConnections');
1199
+ svg.innerHTML = '';
1200
+
1201
+ const layers = document.querySelectorAll('.nn-layer');
1202
+
1203
+ for (let i = 0; i < layers.length - 1; i++) {
1204
+ const fromNodes = layers[i].querySelectorAll('.nn-node');
1205
+ const toNodes = layers[i + 1].querySelectorAll('.nn-node');
1206
+
1207
+ fromNodes.forEach(from => {
1208
+ toNodes.forEach(to => {
1209
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
1210
+ const fromRect = from.getBoundingClientRect();
1211
+ const toRect = to.getBoundingClientRect();
1212
+ const containerRect = document.getElementById('nnContainer').getBoundingClientRect();
1213
+
1214
+ line.setAttribute('x1', fromRect.left + fromRect.width/2 - containerRect.left);
1215
+ line.setAttribute('y1', fromRect.top + fromRect.height/2 - containerRect.top);
1216
+ line.setAttribute('x2', toRect.left + toRect.width/2 - containerRect.left);
1217
+ line.setAttribute('y2', toRect.top + toRect.height/2 - containerRect.top);
1218
+ line.setAttribute('stroke', 'rgba(0, 212, 255, 0.1)');
1219
+ line.setAttribute('stroke-width', '1');
1220
+
1221
+ svg.appendChild(line);
1222
+ });
1223
+ });
1224
+ }
1225
+ }
1226
+
1227
+ trainNetwork = () => {
1228
+ addLog('NN', 'Starting training epoch...');
1229
+ const nodes = document.querySelectorAll('.nn-node');
1230
+
1231
+ nodes.forEach((node, i) => {
1232
+ setTimeout(() => {
1233
+ node.classList.add('active');
1234
+ node.dataset.value = (Math.random() * 2 - 1).toFixed(2);
1235
+ setTimeout(() => node.classList.remove('active'), 300);
1236
+ }, i * 30);
1237
+ });
1238
+
1239
+ setTimeout(() => {
1240
+ addLog('NN', 'Training complete. Loss: 0.0234', 'success');
1241
+ }, nodes.length * 30 + 200);
1242
+ };
1243
+
1244
+ inferenceNetwork = () => {
1245
+ addLog('NN', 'Running inference...');
1246
+ const nodes = document.querySelectorAll('.nn-node');
1247
+
1248
+ // Forward pass animation
1249
+ state.nnLayers.forEach((size, layerIdx) => {
1250
+ setTimeout(() => {
1251
+ for (let i = 0; i < size; i++) {
1252
+ const node = document.getElementById(`node-${layerIdx}-${i}`);
1253
+ node.classList.add('active');
1254
+ setTimeout(() => node.classList.remove('active'), 400);
1255
+ }
1256
+ }, layerIdx * 300);
1257
+ });
1258
+
1259
+ setTimeout(() => {
1260
+ const outputs = Array.from({length: state.nnLayers[state.nnLayers.length-1]}, () =>
1261
+ (Math.random() * 100).toFixed(1)
1262
+ );
1263
+ addLog('NN', `Output: [${outputs.join(', ')}]`, 'success');
1264
+ }, state.nnLayers.length * 300 + 200);
1265
+ };
1266
+
1267
+ // ===== ALGORITHM VISUALIZER =====
1268
+ function initAlgorithm() {
1269
+ const container = document.getElementById('algoContainer');
1270
+ container.innerHTML = '';
1271
+
1272
+ const count = 30;
1273
+ const values = [];
1274
+ for (let i = 0; i < count; i++) {
1275
+ values.push(Math.floor(Math.random() * 100) + 10);
1276
+ }
1277
+
1278
+ values.forEach((val, i) => {
1279
+ const bar = document.createElement('div');
1280
+ bar.className = 'algo-bar';
1281
+ bar.id = `bar-${i}`;
1282
+ bar.style.height = `${val}%`;
1283
+ bar.dataset.value = val;
1284
+ container.appendChild(bar);
1285
+ });
1286
+ }
1287
+
1288
+ setAlgorithm = (algo) => {
1289
+ state.algorithm = algo;
1290
+ document.querySelectorAll('.component-header .btn-sm').forEach(btn => {
1291
+ btn.classList.remove('active');
1292
+ });
1293
+ event.target.classList.add('active');
1294
+
1295
+ addLog('ALGO', `Selected ${algo} algorithm`);
1296
+ initAlgorithm();
1297
+ };
1298
+
1299
+ async function runQuicksort() {
1300
+ const bars = document.querySelectorAll('.algo-bar');
1301
+ const values = Array.from(bars).map(b => parseInt(b.dataset.value));
1302
+
1303
+ async function partition(arr, low, high) {
1304
+ const pivot = arr[high];
1305
+ bars[high].classList.add('comparing');
1306
+ let i = low - 1;
1307
+
1308
+ for (let j = low; j < high; j++) {
1309
+ bars[j].classList.add('comparing');
1310
+ await new Promise(r => setTimeout(r, 50));
1311
+
1312
+ if (arr[j] < pivot) {
1313
+ i++;
1314
+ [arr[i], arr[j]] = [arr[j], arr[i]];
1315
+ updateBar(i, arr[i]);
1316
+ updateBar(j, arr[j]);
1317
+ }
1318
+
1319
+ bars[j].classList.remove('comparing');
1320
+ }
1321
+
1322
+ [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
1323
+ updateBar(i + 1, arr[i + 1]);
1324
+ updateBar(high, arr[high]);
1325
+ bars[high].classList.remove('comparing');
1326
+
1327
+ return i + 1;
1328
+ }
1329
+
1330
+ async function quicksort(arr, low, high) {
1331
+ if (low < high) {
1332
+ const pi = await partition(arr, low, high);
1333
+ await quicksort(arr, low, pi - 1);
1334
+ await quicksort(arr, pi + 1, high);
1335
+ }
1336
+ }
1337
+
1338
+ await quicksort(values, 0, values.length - 1);
1339
+
1340
+ bars.forEach(b => b.classList.add('sorted'));
1341
+ addLog('ALGO', 'Quicksort complete', 'success');
1342
+ }
1343
+
1344
+ function updateBar(idx, value) {
1345
+ const bar = document.getElementById(`bar-${idx}`);
1346
+ bar.style.height = `${value}%`;
1347
+ bar.dataset.value = value;
1348
+ }
1349
+
1350
+ // ===== PROCESSING QUEUE =====
1351
+ function generateQueueItem() {
1352
+ const types = ['image_process', 'data_transform', 'model_inference', 'vectorize', 'tag_generate'];
1353
+ const statuses = ['pending', 'processing', 'processing', 'processing', 'completed'];
1354
+ const type = types[Math.floor(Math.random() * types.length)];
1355
+ const status = statuses[Math.floor(Math.random() * statuses.length)];
1356
+
1357
+ return {
1358
+ id: Math.random().toString(36).substr(2, 9),
1359
+ name: `${type}_${Math.floor(Math.random() * 1000)}`,
1360
+ type,
1361
+ status,
1362
+ progress: status === 'completed' ? 100 : Math.floor(Math.random() * 90),
1363
+ eta: `${Math.floor(Math.random() * 60)}s`
1364
+ };
1365
+ }
1366
+
1367
+ function processQueue() {
1368
+ // Add new items
1369
+ while (state.queue.length < state.queueDepth && Math.random() > 0.3) {
1370
+ state.queue.push(generateQueueItem());
1371
+ }
1372
+
1373
+ // Update progress
1374
+ state.queue.forEach(item => {
1375
+ if (item.status === 'processing') {
1376
+ item.progress = Math.min(100, item.progress + Math.random() * 10);
1377
+ if (item.progress >= 100) {
1378
+ item.status = 'completed';
1379
+ item.progress = 100;
1380
+ }
1381
+ }
1382
+ });
1383
+
1384
+ // Remove completed
1385
+ state.queue = state.queue.filter(item => {
1386
+ if (item.status === 'completed' && Math.random() > 0.7) {
1387
+ return false;
1388
+ }
1389
+ return true;
1390
+ });
1391
+
1392
+ renderQueue();
1393
+ }
1394
+
1395
+ function renderQueue() {
1396
+ const container = document.getElementById('queueList');
1397
+ document.getElementById('queueCount').textContent = `${state.queue.length} items`;
1398
+
1399
+ container.innerHTML = state.queue.slice(0, 10).map(item => `
1400
+ <div class="queue-item ${item.status}">
1401
+ <div class="queue-status ${item.status}"></div>
1402
+ <div class="queue-info">
1403
+ <div class="queue-name">${item.name}</div>
1404
+ <div class="queue-meta">${item.type} • ETA: ${item.eta}</div>
1405
+ </div>
1406
+ <div class="queue-progress">
1407
+ <div class="queue-progress-bar" style="width: ${item.progress}%"></div>
1408
+ </div>
1409
+ </div>
1410
+ `).join('');
1411
+ }
1412
+
1413
+ // ===== METRICS =====
1414
+ function updateMetrics() {
1415
+ state.throughput = Math.floor(Math.random() * 500 + 100);
1416
+ state.latency = Math.floor(Math.random() * 50 + 10);
1417
+ state.efficiency = Math.floor(Math.random() * 20 + 80);
1418
+
1419
+ document.getElementById('metricThroughput').textContent = state.throughput;
1420
+ document.getElementById('metricLatency').textContent = state.latency;
1421
+ document.getElementById('metricEfficiency').textContent = state.efficiency + '%';
1422
+
1423
+ // Animate flow
1424
+ if (Math.random() > 0.5) animateFlow();
1425
+
1426
+ // Random memory activity
1427
+ const randomCell = state.memoryCells[Math.floor(Math.random() * state.memoryCells.length)];
1428
+ if (randomCell && !randomCell.classList.contains('system')) {
1429
+ randomCell.classList.add('active');
1430
+ setTimeout(() => randomCell.classList.remove('active'), 500);
1431
+ }
1432
+ }
1433
+
1434
+ // ===== TERMINAL =====
1435
+ function addLog(type, message, level = 'info') {
1436
+ const log = {
1437
+ time: new Date().toLocaleTimeString(),
1438
+ type,
1439
+ message,
1440
+ level
1441
+ };
1442
+ state.logs.push(log);
1443
+ if (state.logs.length > 100) state.logs.shift();
1444
+
1445
+ const container = document.getElementById('terminal');
1446
+ const line = document.createElement('div');
1447
+ line.className = 'terminal-line';
1448
+ line.innerHTML = `
1449
+ <span class="terminal-time">${log.time}</span>
1450
+ <span class="terminal-type">[${log.type}]</span>
1451
+ <span class="terminal-msg ${log.level}">${log.message}</span>
1452
+ `;
1453
+ container.appendChild(line);
1454
+ container.scrollTop = container.scrollHeight;
1455
+ }
1456
+
1457
+ clearTerminal = () => {
1458
+ document.getElementById('terminal').innerHTML = '';
1459
+ state.logs = [];
1460
+ };
1461
+
1462
+ exportLogs = () => {
1463
+ const blob = new Blob([JSON.stringify(state.logs, null, 2)], {type: 'application/json'});
1464
+ const url = URL.createObjectURL(blob);
1465
+ const a = document.createElement('a');
1466
+ a.href = url;
1467
+ a.download = `system-logs-${Date.now()}.json`;
1468
+ a.click();
1469
+ };
1470
+
1471
+ // ===== CONTROLS =====
1472
+ function initSliders() {
1473
+ document.getElementById('threadSlider').addEventListener('input', (e) => {
1474
+ state.threads = e.target.value;
1475
+ document.getElementById('threadValue').textContent = e.target.value;
1476
+ });
1477
+
1478
+ document.getElementById('memorySlider').addEventListener('input', (e) => {
1479
+ state.memory = e.target.value;
1480
+ document.getElementById('memoryValue').textContent = e.target.value;
1481
+ });
1482
+
1483
+ document.getElementById('queueSlider').addEventListener('input', (e) => {
1484
+ state.queueDepth = e.target.value;
1485
+ document.getElementById('queueValue').textContent = e.target.value;
1486
+ });
1487
+ }
1488
+
1489
+ startSimulation = () => {
1490
+ state.running = true;
1491
+ addLog('SYSTEM', 'Simulation started', 'success');
1492
+
1493
+ if (state.algorithm === 'quicksort') {
1494
+ runQuicksort();
1495
+ }
1496
+ };
1497
+
1498
+ pauseSimulation = () => {
1499
+ state.running = false;
1500
+ addLog('SYSTEM', 'Simulation paused');
1501
+ };
1502
+
1503
+ resetSimulation = () => {
1504
+ state.running = false;
1505
+ state.queue = [];
1506
+ state.throughput = 0;
1507
+ state.latency = 0;
1508
+ state.efficiency = 0;
1509
+ state.uptime = 0;
1510
+ initMemoryMap();
1511
+ initAlgorithm();
1512
+ initNeuralNetwork();
1513
+ document.getElementById('metricThroughput').textContent = '0';
1514
+ document.getElementById('metricLatency').textContent = '0';
1515
+ document.getElementById('metricEfficiency').textContent = '0%';
1516
+ addLog('SYSTEM', 'Simulation reset');
1517
+ };
1518
+
1519
+ function updateUptime() {
1520
+ state.uptime++;
1521
+ const hours = Math.floor(state.uptime / 3600).toString().padStart(2, '0');
1522
+ const minutes = Math.floor((state.uptime % 3600) / 60).toString().padStart(2, '0');
1523
+ const seconds = (state.uptime % 60).toString().padStart(2, '0');
1524
+ document.getElementById('uptime').textContent = `${hours}:${minutes}:${seconds}`;
1525
+ }
1526
+
1527
+ function simulateActivity() {
1528
+ // Random log entries
1529
+ if (Math.random() > 0.7) {
1530
+ const events = [
1531
+ { type: 'PIPELINE', msg: 'Processed batch of 50 images' },
1532
+ { type: 'NN', msg: 'Forward pass completed in 12ms' },
1533
+ { type: 'MEMORY', msg: 'Garbage collection triggered' },
1534
+ { type: 'QUEUE', msg: 'New job queued: vectorize_svg_892' },
1535
+ { type: 'ALGO', msg: 'Optimization converged at iteration 234' }
1536
+ ];
1537
+ const event = events[Math.floor(Math.random() * events.length)];
1538
+ addLog(event.type, event.msg);
1539
+ }
1540
+ }
1541
+
1542
+ // ===== START =====
1543
+ window.addEventListener('load', init);
1544
+ window.addEventListener('resize', () => {
1545
+ setTimeout(drawNNConnections, 100);
1546
+ });
1547
+ </script>
1548
+ </body>
1549
  </html>
1550
+ <script data-huggingchat-badge="script">
1551
+ (function () {
1552
+ try {
1553
+ if (document.querySelector("[data-huggingchat-badge]:not(script)")) return;
1554
+ var host = document.createElement("div");
1555
+ host.setAttribute("data-huggingchat-badge", "");
1556
+ var styles = [["all","initial"],["position","fixed"],["right","12px"],["bottom","12px"],["z-index","2147483647"],["display","block"],["visibility","visible"],["opacity","1"],["pointer-events","auto"],["width","auto"],["height","auto"],["margin","0"],["padding","0"],["max-width","none"],["max-height","none"],["transform","none"],["filter","none"],["clip-path","none"],["color-scheme","light"]];
1557
+ for (var i = 0; i < styles.length; i++) {
1558
+ host.style.setProperty(styles[i][0], styles[i][1], "important");
1559
+ }
1560
+ host.attachShadow({ mode: "closed" }).innerHTML = "<style>\n:host { all: initial; }\na {\n display: flex;\n align-items: center;\n gap: 5px;\n box-sizing: border-box;\n height: 26px;\n padding: 0 9px 0 7px;\n border-radius: 999px;\n border: 1px solid rgba(0, 0, 0, 0.07);\n background: rgba(255, 255, 255, 0.92);\n -webkit-backdrop-filter: saturate(180%) blur(8px);\n backdrop-filter: saturate(180%) blur(8px);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.06);\n color: #111827;\n font: 500 11px/1 ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n letter-spacing: 0.01em;\n text-decoration: none;\n white-space: nowrap;\n opacity: 0.72;\n transition: opacity 0.15s ease, transform 0.15s ease;\n}\na:hover, a:focus-visible { opacity: 1; transform: translateY(-1px); }\nsvg { width: 14px; height: 14px; flex: none; }\n@media print { a { display: none; } }\n<\/style><a href=\"https://huggingface.co/chat\" target=\"_blank\" rel=\"noopener noreferrer nofollow\"><svg viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\"><path d=\"M16.0006 25.9992C13.8266 25.999 11.7118 25.2901 9.97686 23.9799C8.2419 22.6698 6.98127 20.8298 6.38599 18.7388C5.79071 16.6478 5.89323 14.4198 6.678 12.3923C7.46278 10.3648 8.88705 8.64837 10.735 7.50308C12.5829 6.35779 14.7538 5.84606 16.9187 6.04544C19.0837 6.24481 21.1246 7.14442 22.7323 8.60795C24.34 10.0715 25.4268 12.0192 25.8281 14.1559C26.2293 16.2926 25.9232 18.5019 24.9561 20.449C24.7703 20.8042 24.7223 21.2155 24.8211 21.604L25.4211 23.8316C25.4803 24.0518 25.4805 24.2837 25.4216 24.5039C25.3627 24.7242 25.2468 24.925 25.0856 25.0862C24.9244 25.2474 24.7235 25.3633 24.5033 25.4222C24.283 25.4811 24.0512 25.4809 23.831 25.4217L21.6034 24.8217C21.2172 24.7248 20.809 24.7729 20.4558 24.9567C19.0683 25.6467 17.5457 26.0068 16.0006 26.0068V25.9992Z\" fill=\"currentColor\"/><path d=\"M9.62598 16.0013C9.62598 15.3799 10.1294 14.8765 10.7508 14.8765C11.3721 14.8765 11.8756 15.3799 11.8756 16.0013C11.8756 17.0953 12.3102 18.1448 13.0838 18.9184C13.8574 19.692 14.9069 20.1266 16.001 20.1267C17.095 20.1267 18.1445 19.692 18.9181 18.9184C19.6918 18.1448 20.1264 17.0953 20.1264 16.0013C20.1264 15.3799 20.6299 14.8765 21.2512 14.8765C21.8725 14.8765 22.3759 15.3799 22.3759 16.0013C22.3759 17.6921 21.7046 19.3137 20.509 20.5093C19.3134 21.7049 17.6918 22.3762 16.001 22.3762C14.3102 22.3762 12.6885 21.7049 11.4929 20.5093C10.2974 19.3137 9.62598 17.6921 9.62598 16.0013Z\" fill=\"#fff\"/><\/svg><span>Made with HuggingChat<\/span><\/a>";
1561
+ function attach() {
1562
+ var parent = document.body || document.documentElement;
1563
+ if (parent && host.parentNode !== parent) parent.appendChild(host);
1564
+ }
1565
+ attach();
1566
+ // Artifacts that rewrite document.body wholesale would drop the badge.
1567
+ if (document.body && typeof MutationObserver === "function") {
1568
+ new MutationObserver(attach).observe(document.body, { childList: true });
1569
+ } else {
1570
+ document.addEventListener("DOMContentLoaded", attach);
1571
+ }
1572
+ } catch (e) {}
1573
+ })();
1574
+ </script>