Hugging Face's logo

Spaces:
Gtmix
/
quant_Synth
Running

App Files Community
Joe-C-Wales commited on
Commit
954fb1d
·
verified ·
1 Parent(s): ee5ea19

Agent training

Browse files
Files changed (7) hide show
  1. about.html +2 -0
  2. agent.html +547 -0
  3. api.html +2 -1
  4. index.html +3 -1
  5. quantum.html +3 -1
  6. synthesizer.html +3 -1
  7. visualization.html +3 -1
about.html CHANGED
@@ -74,6 +74,8 @@
74
  <a class="text-text-light hover:text-primary transition-colors" href="composer.html">Composer</a>
75
  <a class="text-text-light hover:text-primary transition-colors" href="visualizer.html">Visualizer</a>
76
  <a class="text-text-light hover:text-primary transition-colors" href="profile.html">Profile</a>
 
 
77
  <a class="text-primary font-medium" href="about.html">About</a>
78
  </nav>
79
  <div class="flex items-center gap-4">
 
74
  <a class="text-text-light hover:text-primary transition-colors" href="composer.html">Composer</a>
75
  <a class="text-text-light hover:text-primary transition-colors" href="visualizer.html">Visualizer</a>
76
  <a class="text-text-light hover:text-primary transition-colors" href="profile.html">Profile</a>
77
+ <a class="text-text-light hover:text-primary transition-colors" href="api.html">API</a>
78
+ <a class="text-text-light hover:text-primary transition-colors" href="agent.html">Agent</a>
79
  <a class="text-primary font-medium" href="about.html">About</a>
80
  </nav>
81
  <div class="flex items-center gap-4">
agent.html ADDED
@@ -0,0 +1,547 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Agent Training - Quantum Music Synthesizer</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ :root {
14
+ --quantum-purple: #6e45e2;
15
+ --quantum-teal: #88d3ce;
16
+ --quantum-pink: #ff2a6d;
17
+ --quantum-blue: #05d9e8;
18
+ --quantum-dark: #0c0f1f;
19
+ --quantum-darker: #080a1a;
20
+ }
21
+
22
+ .quantum-bg {
23
+ background: linear-gradient(135deg, var(--quantum-dark), var(--quantum-darker));
24
+ position: relative;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .quantum-bg::before {
29
+ content: '';
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ right: 0;
34
+ bottom: 0;
35
+ background:
36
+ radial-gradient(circle at 10% 20%, rgba(110, 69, 226, 0.1) 0%, transparent 20%),
37
+ radial-gradient(circle at 90% 80%, rgba(136, 211, 206, 0.1) 0%, transparent 20%),
38
+ radial-gradient(circle at 50% 50%, rgba(5, 217, 232, 0.05) 0%, transparent 30%);
39
+ z-index: 0;
40
+ }
41
+
42
+ .quantum-card {
43
+ background: rgba(255, 255, 255, 0.05);
44
+ backdrop-filter: blur(10px);
45
+ border: 1px solid rgba(255, 255, 255, 0.1);
46
+ border-radius: 16px;
47
+ transition: all 0.3s ease;
48
+ }
49
+
50
+ .quantum-card:hover {
51
+ transform: translateY(-5px);
52
+ box-shadow: 0 10px 30px rgba(110, 69, 226, 0.2);
53
+ border-color: rgba(110, 69, 226, 0.3);
54
+ }
55
+
56
+ .quantum-header {
57
+ background: rgba(12, 15, 31, 0.8);
58
+ backdrop-filter: blur(10px);
59
+ position: sticky;
60
+ top: 0;
61
+ z-index: 100;
62
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
63
+ }
64
+
65
+ .quantum-nav a {
66
+ position: relative;
67
+ padding: 8px 0;
68
+ }
69
+
70
+ .quantum-nav a::after {
71
+ content: '';
72
+ position: absolute;
73
+ bottom: 0;
74
+ left: 0;
75
+ width: 0;
76
+ height: 2px;
77
+ background: var(--quantum-blue);
78
+ transition: width 0.3s ease;
79
+ }
80
+
81
+ .quantum-nav a:hover::after {
82
+ width: 100%;
83
+ }
84
+
85
+ .training-progress {
86
+ height: 12px;
87
+ background: rgba(255, 255, 255, 0.1);
88
+ border-radius: 6px;
89
+ overflow: hidden;
90
+ }
91
+
92
+ .progress-bar {
93
+ height: 100%;
94
+ background: linear-gradient(90deg, var(--quantum-purple), var(--quantum-teal));
95
+ border-radius: 6px;
96
+ width: 0%;
97
+ transition: width 0.5s ease;
98
+ }
99
+
100
+ .metric-card {
101
+ background: rgba(26, 30, 45, 0.7);
102
+ border: 1px solid rgba(110, 69, 226, 0.2);
103
+ border-radius: 12px;
104
+ padding: 1.5rem;
105
+ }
106
+
107
+ .neural-network {
108
+ position: relative;
109
+ height: 300px;
110
+ background: rgba(10, 12, 25, 0.7);
111
+ border-radius: 12px;
112
+ overflow: hidden;
113
+ border: 1px solid rgba(110, 69, 226, 0.2);
114
+ }
115
+
116
+ .neuron {
117
+ position: absolute;
118
+ width: 20px;
119
+ height: 20px;
120
+ border-radius: 50%;
121
+ background: var(--quantum-purple);
122
+ box-shadow: 0 0 10px rgba(110, 69, 226, 0.5);
123
+ }
124
+
125
+ .connection {
126
+ position: absolute;
127
+ height: 2px;
128
+ background: rgba(136, 211, 206, 0.3);
129
+ transform-origin: left;
130
+ }
131
+
132
+ .quantum-btn {
133
+ background: linear-gradient(45deg, var(--quantum-purple), var(--quantum-teal));
134
+ border: none;
135
+ border-radius: 30px;
136
+ padding: 12px 20px;
137
+ font-weight: 600;
138
+ transition: all 0.3s ease;
139
+ color: white;
140
+ }
141
+
142
+ .quantum-btn:hover {
143
+ transform: translateY(-3px);
144
+ box-shadow: 0 5px 20px rgba(110, 69, 226, 0.4);
145
+ }
146
+
147
+ .log-entry {
148
+ padding: 0.75rem;
149
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
150
+ font-family: monospace;
151
+ font-size: 0.9rem;
152
+ }
153
+
154
+ .log-entry:last-child {
155
+ border-bottom: none;
156
+ }
157
+
158
+ .log-info { color: #05d9e8; }
159
+ .log-success { color: #88d3ce; }
160
+ .log-warning { color: #ffcc00; }
161
+ .log-error { color: #ff2a6d; }
162
+ </style>
163
+ </head>
164
+ <body class="bg-gray-900 text-white min-h-screen">
165
+ <div class="quantum-bg min-h-screen">
166
+ <!-- Header -->
167
+ <header class="quantum-header container mx-auto py-4 px-4">
168
+ <div class="flex justify-between items-center">
169
+ <h1 class="text-3xl font-bold">Quantum Music Synthesizer</h1>
170
+ <nav class="quantum-nav">
171
+ <ul class="flex space-x-8">
172
+ <li><a href="index.html" class="hover:text-purple-300 font-medium">Home</a></li>
173
+ <li><a href="synthesizer.html" class="hover:text-purple-300 font-medium">Synthesizer</a></li>
174
+ <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
175
+ <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
176
+ <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
177
+ <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
178
+ <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
179
+ </ul>
180
+ </nav>
181
+ </div>
182
+ </header>
183
+
184
+ <!-- Agent Training Section -->
185
+ <section class="container mx-auto py-16 px-4">
186
+ <h1 class="text-4xl font-bold text-center mb-4">Agent Training Dashboard</h1>
187
+ <p class="text-xl text-center mb-12 text-gray-300">Monitor and control AI agent training for quantum music composition</p>
188
+
189
+ <div class="max-w-6xl mx-auto">
190
+ <!-- Training Controls -->
191
+ <div class="quantum-card p-8 mb-8">
192
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
193
+ <div>
194
+ <h2 class="text-2xl font-bold mb-4">Training Controls</h2>
195
+ <div class="space-y-4">
196
+ <div>
197
+ <label class="block mb-2">Epochs</label>
198
+ <input type="range" min="1" max="1000" value="100" class="w-full slider">
199
+ <div class="flex justify-between text-sm mt-1">
200
+ <span>1</span>
201
+ <span id="epoch-value">100</span>
202
+ <span>1000</span>
203
+ </div>
204
+ </div>
205
+
206
+ <div>
207
+ <label class="block mb-2">Learning Rate</label>
208
+ <input type="range" min="0.0001" max="0.1" step="0.0001" value="0.001" class="w-full slider">
209
+ <div class="flex justify-between text-sm mt-1">
210
+ <span>0.0001</span>
211
+ <span id="lr-value">0.001</span>
212
+ <span>0.1</span>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="flex space-x-4 pt-4">
217
+ <button id="start-training" class="quantum-btn flex-1">
218
+ <i data-feather="play" class="inline mr-2"></i>Start Training
219
+ </button>
220
+ <button id="pause-training" class="quantum-btn flex-1" disabled>
221
+ <i data-feather="pause" class="inline mr-2"></i>Pause
222
+ </button>
223
+ <button id="stop-training" class="quantum-btn flex-1" disabled>
224
+ <i data-feather="square" class="inline mr-2"></i>Stop
225
+ </button>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <div>
231
+ <h2 class="text-2xl font-bold mb-4">Training Progress</h2>
232
+ <div class="space-y-6">
233
+ <div>
234
+ <div class="flex justify-between mb-2">
235
+ <span>Overall Progress</span>
236
+ <span id="progress-percent">0%</span>
237
+ </div>
238
+ <div class="training-progress">
239
+ <div class="progress-bar" id="overall-progress"></div>
240
+ </div>
241
+ </div>
242
+
243
+ <div>
244
+ <div class="flex justify-between mb-2">
245
+ <span>Current Epoch</span>
246
+ <span id="current-epoch">0/100</span>
247
+ </div>
248
+ <div class="training-progress">
249
+ <div class="progress-bar" id="epoch-progress"></div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="grid grid-cols-2 gap-4">
254
+ <div class="metric-card">
255
+ <h3 class="font-bold text-lg mb-2">Loss</h3>
256
+ <div class="text-2xl font-bold" id="loss-value">0.0000</div>
257
+ </div>
258
+ <div class="metric-card">
259
+ <h3 class="font-bold text-lg mb-2">Accuracy</h3>
260
+ <div class="text-2xl font-bold" id="accuracy-value">0.00%</div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Neural Network Visualization -->
269
+ <div class="quantum-card p-8 mb-8">
270
+ <h2 class="text-2xl font-bold mb-6">Neural Network Architecture</h2>
271
+ <div class="neural-network" id="network-viz">
272
+ <!-- Neurons and connections will be generated by JavaScript -->
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Training Logs -->
277
+ <div class="quantum-card p-8">
278
+ <h2 class="text-2xl font-bold mb-6">Training Logs</h2>
279
+ <div class="bg-gray-800/50 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm" id="training-logs">
280
+ <div class="log-entry log-info">[INFO] Initializing quantum music composition agent...</div>
281
+ <div class="log-entry log-info">[INFO] Loading dataset: Quantum harmonic sequences</div>
282
+ <div class="log-entry log-info">[INFO] Model architecture: LSTM-Transformer hybrid</div>
283
+ <div class="log-entry log-info">[INFO] Ready for training. Adjust parameters and click Start.</div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Footer -->
290
+ <footer class="container mx-auto py-8 px-4 text-center border-t border-gray-800">
291
+ <p class="text-gray-400">Powered by QuantumToolbox.jl, Amazon Braket, and Lindblad Solvers</p>
292
+ </footer>
293
+ </div>
294
+
295
+ <script>
296
+ feather.replace();
297
+
298
+ // DOM Elements
299
+ const epochValue = document.getElementById('epoch-value');
300
+ const lrValue = document.getElementById('lr-value');
301
+ const overallProgress = document.getElementById('overall-progress');
302
+ const epochProgress = document.getElementById('epoch-progress');
303
+ const progressPercent = document.getElementById('progress-percent');
304
+ const currentEpoch = document.getElementById('current-epoch');
305
+ const lossValue = document.getElementById('loss-value');
306
+ const accuracyValue = document.getElementById('accuracy-value');
307
+ const trainingLogs = document.getElementById('training-logs');
308
+ const startBtn = document.getElementById('start-training');
309
+ const pauseBtn = document.getElementById('pause-training');
310
+ const stopBtn = document.getElementById('stop-training');
311
+
312
+ // Slider event listeners
313
+ document.querySelectorAll('input[type="range"]')[0].addEventListener('input', function() {
314
+ epochValue.textContent = this.value;
315
+ });
316
+
317
+ document.querySelectorAll('input[type="range"]')[1].addEventListener('input', function() {
318
+ lrValue.textContent = parseFloat(this.value).toFixed(4);
319
+ });
320
+
321
+ // Training simulation variables
322
+ let trainingInterval;
323
+ let isTraining = false;
324
+ let isPaused = false;
325
+ let currentEpochNum = 0;
326
+ let totalEpochs = parseInt(document.querySelectorAll('input[type="range"]')[0].value);
327
+ let logCounter = 0;
328
+
329
+ // Log messages for simulation
330
+ const logMessages = [
331
+ "[INFO] Starting epoch {epoch}...",
332
+ "[INFO] Processing quantum harmonic sequences...",
333
+ "[INFO] Updating weights with learning rate {lr}",
334
+ "[INFO] Loss decreased to {loss}",
335
+ "[WARNING] Gradient norm approaching threshold",
336
+ "[INFO] Completed epoch {epoch} in {time}ms",
337
+ "[INFO] Validation accuracy: {acc}%",
338
+ "[INFO] Saving checkpoint..."
339
+ ];
340
+
341
+ // Start training
342
+ startBtn.addEventListener('click', function() {
343
+ if (!isTraining) {
344
+ isTraining = true;
345
+ isPaused = false;
346
+ startBtn.disabled = true;
347
+ pauseBtn.disabled = false;
348
+ stopBtn.disabled = false;
349
+
350
+ // Reset values
351
+ currentEpochNum = 0;
352
+ totalEpochs = parseInt(document.querySelectorAll('input[type="range"]')[0].value);
353
+ updateProgress();
354
+
355
+ // Add log entry
356
+ addLogEntry("[INFO] Starting training session...", "log-info");
357
+
358
+ // Start training interval
359
+ trainingInterval = setInterval(runTrainingStep, 500);
360
+ } else if (isPaused) {
361
+ isPaused = false;
362
+ pauseBtn.innerHTML = '<i data-feather="pause" class="inline mr-2"></i>Pause';
363
+ feather.replace();
364
+ trainingInterval = setInterval(runTrainingStep, 500);
365
+ }
366
+ });
367
+
368
+ // Pause training
369
+ pauseBtn.addEventListener('click', function() {
370
+ if (!isPaused) {
371
+ isPaused = true;
372
+ clearInterval(trainingInterval);
373
+ pauseBtn.innerHTML = '<i data-feather="play" class="inline mr-2"></i>Resume';
374
+ feather.replace();
375
+ addLogEntry("[INFO] Training paused", "log-info");
376
+ } else {
377
+ isPaused = false;
378
+ pauseBtn.innerHTML = '<i data-feather="pause" class="inline mr-2"></i>Pause';
379
+ feather.replace();
380
+ trainingInterval = setInterval(runTrainingStep, 500);
381
+ addLogEntry("[INFO] Training resumed", "log-info");
382
+ }
383
+ });
384
+
385
+ // Stop training
386
+ stopBtn.addEventListener('click', function() {
387
+ isTraining = false;
388
+ isPaused = false;
389
+ clearInterval(trainingInterval);
390
+ startBtn.disabled = false;
391
+ pauseBtn.disabled = true;
392
+ stopBtn.disabled = true;
393
+ pauseBtn.innerHTML = '<i data-feather="pause" class="inline mr-2"></i>Pause';
394
+ feather.replace();
395
+ addLogEntry("[INFO] Training stopped by user", "log-info");
396
+ });
397
+
398
+ // Run a single training step
399
+ function runTrainingStep() {
400
+ if (currentEpochNum >= totalEpochs) {
401
+ clearInterval(trainingInterval);
402
+ isTraining = false;
403
+ startBtn.disabled = false;
404
+ pauseBtn.disabled = true;
405
+ stopBtn.disabled = true;
406
+ addLogEntry("[INFO] Training completed successfully!", "log-success");
407
+ return;
408
+ }
409
+
410
+ currentEpochNum++;
411
+
412
+ // Simulate progress
413
+ const epochProgressValue = Math.min(100, Math.floor(Math.random() * 30) + 70);
414
+ epochProgress.style.width = epochProgressValue + '%';
415
+
416
+ // Simulate metrics
417
+ const loss = Math.max(0, (1 - currentEpochNum/totalEpochs) * (0.5 + Math.random() * 0.5)).toFixed(4);
418
+ const accuracy = Math.min(100, (currentEpochNum/totalEpochs) * (80 + Math.random() * 20)).toFixed(2);
419
+
420
+ // Update UI
421
+ lossValue.textContent = loss;
422
+ accuracyValue.textContent = accuracy + '%';
423
+ currentEpoch.textContent = `${currentEpochNum}/${totalEpochs}`;
424
+
425
+ updateProgress();
426
+
427
+ // Add log entry
428
+ if (logCounter % 3 === 0) {
429
+ const randomLog = logMessages[Math.floor(Math.random() * logMessages.length)];
430
+ const formattedLog = randomLog
431
+ .replace('{epoch}', currentEpochNum)
432
+ .replace('{lr}', lrValue.textContent)
433
+ .replace('{loss}', loss)
434
+ .replace('{acc}', accuracy)
435
+ .replace('{time}', Math.floor(Math.random() * 2000) + 500);
436
+
437
+ const logTypes = ['log-info', 'log-success', 'log-warning'];
438
+ const logType = logTypes[Math.floor(Math.random() * logTypes.length)];
439
+ addLogEntry(formattedLog, logType);
440
+ }
441
+
442
+ logCounter++;
443
+ }
444
+
445
+ // Update overall progress
446
+ function updateProgress() {
447
+ const progress = (currentEpochNum / totalEpochs) * 100;
448
+ overallProgress.style.width = progress + '%';
449
+ progressPercent.textContent = Math.round(progress) + '%';
450
+ }
451
+
452
+ // Add log entry
453
+ function addLogEntry(message, type) {
454
+ const logEntry = document.createElement('div');
455
+ logEntry.className = `log-entry ${type}`;
456
+ logEntry.textContent = `${new Date().toLocaleTimeString()} ${message}`;
457
+ trainingLogs.appendChild(logEntry);
458
+ trainingLogs.scrollTop = trainingLogs.scrollHeight;
459
+ }
460
+
461
+ // Create neural network visualization
462
+ function createNetworkVisualization() {
463
+ const container = document.getElementById('network-viz');
464
+ container.innerHTML = '';
465
+
466
+ // Create layers
467
+ const layers = [
468
+ { neurons: 8, x: 50 },
469
+ { neurons: 12, x: 150 },
470
+ { neurons: 16, x: 250 },
471
+ { neurons: 12, x: 350 },
472
+ { neurons: 8, x: 450 }
473
+ ];
474
+
475
+ // Store neuron positions
476
+ const neuronPositions = [];
477
+
478
+ // Create neurons
479
+ layers.forEach((layer, layerIndex) => {
480
+ const layerNeurons = [];
481
+ for (let i = 0; i < layer.neurons; i++) {
482
+ const neuron = document.createElement('div');
483
+ neuron.className = 'neuron';
484
+
485
+ // Position neurons vertically
486
+ const y = 30 + (i * (240 / Math.max(1, layer.neurons - 1)));
487
+ neuron.style.left = (layer.x - 10) + 'px';
488
+ neuron.style.top = (y - 10) + 'px';
489
+
490
+ container.appendChild(neuron);
491
+ layerNeurons.push({ x: layer.x, y: y });
492
+ }
493
+ neuronPositions.push(layerNeurons);
494
+ });
495
+
496
+ // Create connections
497
+ for (let l = 0; l < neuronPositions.length - 1; l++) {
498
+ const currentLayer = neuronPositions[l];
499
+ const nextLayer = neuronPositions[l + 1];
500
+
501
+ currentLayer.forEach(neuron => {
502
+ nextLayer.forEach(nextNeuron => {
503
+ const connection = document.createElement('div');
504
+ connection.className = 'connection';
505
+
506
+ // Calculate distance and angle
507
+ const dx = nextNeuron.x - neuron.x;
508
+ const dy = nextNeuron.y - neuron.y;
509
+ const length = Math.sqrt(dx * dx + dy * dy);
510
+ const angle = Math.atan2(dy, dx) * 180 / Math.PI;
511
+
512
+ connection.style.width = length + 'px';
513
+ connection.style.left = neuron.x + 'px';
514
+ connection.style.top = neuron.y + 'px';
515
+ connection.style.transform = `rotate(${angle}deg)`;
516
+
517
+ container.appendChild(connection);
518
+ });
519
+ });
520
+ }
521
+
522
+ // Animate neurons
523
+ animateNeurons();
524
+ }
525
+
526
+ // Animate neurons
527
+ function animateNeurons() {
528
+ const neurons = document.querySelectorAll('.neuron');
529
+ setInterval(() => {
530
+ neurons.forEach(neuron => {
531
+ if (Math.random() > 0.7) {
532
+ neuron.style.opacity = '0.5';
533
+ setTimeout(() => {
534
+ neuron.style.opacity = '1';
535
+ }, 200);
536
+ }
537
+ });
538
+ }, 500);
539
+ }
540
+
541
+ // Initialize when page loads
542
+ window.addEventListener('load', function() {
543
+ createNetworkVisualization();
544
+ });
545
+ </script>
546
+ </body>
547
+ </html>
api.html CHANGED
@@ -154,8 +154,9 @@
154
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
155
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
156
  <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
 
157
  </ul>
158
- </nav>
159
  </div>
160
  </header>
161
 
 
154
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
155
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
156
  <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
157
+ <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
158
  </ul>
159
+ </nav>
160
  </div>
161
  </header>
162
 
index.html CHANGED
@@ -181,8 +181,10 @@
181
  <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
182
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
183
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
 
 
184
  </ul>
185
- </nav>
186
  </div>
187
  </header>
188
 
 
181
  <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
182
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
183
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
184
+ <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
185
+ <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
186
  </ul>
187
+ </nav>
188
  </div>
189
  </header>
190
 
quantum.html CHANGED
@@ -165,8 +165,10 @@
165
  <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
166
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
167
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
 
 
168
  </ul>
169
- </nav>
170
  </div>
171
  </header>
172
 
 
165
  <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
166
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
167
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
168
+ <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
169
+ <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
170
  </ul>
171
+ </nav>
172
  </div>
173
  </header>
174
 
synthesizer.html CHANGED
@@ -189,8 +189,10 @@
189
  <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
190
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
191
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
 
 
192
  </ul>
193
- </nav>
194
  </div>
195
  </header>
196
 
 
189
  <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
190
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
191
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
192
+ <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
193
+ <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
194
  </ul>
195
+ </nav>
196
  </div>
197
  </header>
198
 
visualization.html CHANGED
@@ -171,8 +171,10 @@
171
  <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
172
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
173
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
 
 
174
  </ul>
175
- </nav>
176
  </div>
177
  </header>
178
 
 
171
  <li><a href="quantum.html" class="hover:text-purple-300 font-medium">Quantum</a></li>
172
  <li><a href="visualization.html" class="hover:text-purple-300 font-medium">Visualization</a></li>
173
  <li><a href="about.html" class="hover:text-purple-300 font-medium">About</a></li>
174
+ <li><a href="api.html" class="hover:text-purple-300 font-medium">API</a></li>
175
+ <li><a href="agent.html" class="hover:text-purple-300 font-medium">Agent</a></li>
176
  </ul>
177
+ </nav>
178
  </div>
179
  </header>
180