Hugging Face's logo

Spaces:
GrimsenClory
/
undefined
Running

App Files Community
GrimsenClory commited on
Commit
27290c2
·
verified ·
1 Parent(s): f22db89

now how about you implement for the user to actually test it with their LLM model locally running on local lm-studios api server (localhost:1234)

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +716 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📉
4
- colorFrom: green
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: undefined
3
+ colorFrom: pink
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,717 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nexus AI Framework - Advanced Multi-Agent System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
13
+ <script>
14
+ tailwind.config = {
15
+ darkMode: 'class',
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ violet: {
20
+ 50: '#f5f3ff',
21
+ 100: '#ede9fe',
22
+ 200: '#ddd6fe',
23
+ 300: '#c4b5fd',
24
+ 400: '#a78bfa',
25
+ 500: '#8b5cf6',
26
+ 600: '#7c3aed',
27
+ 700: '#6d28d9',
28
+ 800: '#5b21b6',
29
+ 900: '#4c1d95',
30
+ }
31
+ },
32
+ animation: {
33
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
34
+ 'float': 'float 6s ease-in-out infinite',
35
+ 'glow': 'glow 2s ease-in-out infinite alternate',
36
+ },
37
+ keyframes: {
38
+ float: {
39
+ '0%, 100%': { transform: 'translateY(0)' },
40
+ '50%': { transform: 'translateY(-10px)' },
41
+ },
42
+ glow: {
43
+ '0%': { boxShadow: '0 0 20px rgba(139, 92, 246, 0.5)' },
44
+ '100%': { boxShadow: '0 0 30px rgba(139, 92, 246, 0.8)' },
45
+ }
46
+ }
47
+ }
48
+ }
49
+ }
50
+ </script>
51
+ <style>
52
+ .glass-morphism {
53
+ background: rgba(17, 24, 39, 0.7);
54
+ backdrop-filter: blur(10px);
55
+ border: 1px solid rgba(139, 92, 246, 0.2);
56
+ }
57
+ .neon-border {
58
+ box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), inset 0 0 20px rgba(139, 92, 246, 0.1);
59
+ }
60
+ .agent-card {
61
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
62
+ }
63
+ .agent-card:hover {
64
+ transform: translateY(-5px) scale(1.02);
65
+ }
66
+ .message-bubble {
67
+ animation: slideIn 0.3s ease-out;
68
+ }
69
+ @keyframes slideIn {
70
+ from {
71
+ opacity: 0;
72
+ transform: translateX(-20px);
73
+ }
74
+ to {
75
+ opacity: 1;
76
+ transform: translateX(0);
77
+ }
78
+ }
79
+ .neural-network {
80
+ background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
81
+ }
82
+ .code-block {
83
+ background: linear-gradient(135deg, #1e1b4b 0%, #0f0f23 100%);
84
+ }
85
+ .pulse-ring {
86
+ animation: pulseRing 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
87
+ }
88
+ @keyframes pulseRing {
89
+ 0% {
90
+ transform: scale(0.95);
91
+ opacity: 1;
92
+ }
93
+ 100% {
94
+ transform: scale(1.4);
95
+ opacity: 0;
96
+ }
97
+ }
98
+ ::-webkit-scrollbar {
99
+ width: 8px;
100
+ height: 8px;
101
+ }
102
+ ::-webkit-scrollbar-track {
103
+ background: #1f2937;
104
+ }
105
+ ::-webkit-scrollbar-thumb {
106
+ background: #8b5cf6;
107
+ border-radius: 4px;
108
+ }
109
+ ::-webkit-scrollbar-thumb:hover {
110
+ background: #7c3aed;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body class="bg-gray-900 text-gray-100 min-h-screen overflow-x-hidden">
115
+ <!-- Vanta.js Background -->
116
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
117
+
118
+ <!-- Main Content -->
119
+ <div class="relative z-10">
120
+ <!-- Navigation Header -->
121
+ <nav class="glass-morphism sticky top-0 z-50 px-6 py-4 border-b border-violet-500/20">
122
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
123
+ <div class="flex items-center space-x-4">
124
+ <div class="relative">
125
+ <div class="w-10 h-10 bg-violet-600 rounded-lg flex items-center justify-center">
126
+ <i data-feather="cpu" class="w-6 h-6"></i>
127
+ </div>
128
+ <div class="absolute -inset-1 bg-violet-600 rounded-lg pulse-ring"></div>
129
+ </div>
130
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-violet-400 to-violet-600 bg-clip-text text-transparent">
131
+ Nexus AI Framework
132
+ </h1>
133
+ </div>
134
+ <div class="flex items-center space-x-6">
135
+ <button class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-700 transition-colors">
136
+ <i data-feather="play" class="w-4 h-4"></i>
137
+ <span>Start Simulation</span>
138
+ </button>
139
+ <button class="p-2 rounded-lg hover:bg-gray-800 transition-colors">
140
+ <i data-feather="settings" class="w-5 h-5"></i>
141
+ </button>
142
+ </div>
143
+ </div>
144
+ </nav>
145
+
146
+ <!-- Dashboard Grid -->
147
+ <div class="max-w-7xl mx-auto p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
148
+ <!-- Agent Management Panel -->
149
+ <div class="lg:col-span-2 space-y-6">
150
+ <!-- Active Agents -->
151
+ <div class="glass-morphism rounded-xl p-6 neon-border">
152
+ <div class="flex items-center justify-between mb-6">
153
+ <h2 class="text-xl font-semibold flex items-center space-x-2">
154
+ <i data-feather="users" class="w-5 h-5 text-violet-400"></i>
155
+ <span>Active Agents</span>
156
+ </h2>
157
+ <button onclick="createAgent()" class="px-3 py-1 bg-violet-600 rounded-lg text-sm hover:bg-violet-700 transition-colors">
158
+ + Add Agent
159
+ </button>
160
+ </div>
161
+ <div id="agents-container" class="grid grid-cols-1 md:grid-cols-2 gap-4">
162
+ <!-- Agent cards will be dynamically inserted here -->
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Communication Flow -->
167
+ <div class="glass-morphism rounded-xl p-6 neon-border">
168
+ <h2 class="text-xl font-semibold mb-6 flex items-center space-x-2">
169
+ <i data-feather="message-circle" class="w-5 h-5 text-violet-400"></i>
170
+ <span>Agent Communication Flow</span>
171
+ </h2>
172
+ <div id="message-flow" class="space-y-3 max-h-96 overflow-y-auto">
173
+ <!-- Messages will be dynamically inserted here -->
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Task Execution Queue -->
178
+ <div class="glass-morphism rounded-xl p-6 neon-border">
179
+ <h2 class="text-xl font-semibold mb-6 flex items-center space-x-2">
180
+ <i data-feather="list" class="w-5 h-5 text-violet-400"></i>
181
+ <span>Task Execution Queue</span>
182
+ </h2>
183
+ <div id="task-queue" class="space-y-2">
184
+ <!-- Tasks will be dynamically inserted here -->
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Right Sidebar -->
190
+ <div class="space-y-6">
191
+ <!-- System Performance -->
192
+ <div class="glass-morphism rounded-xl p-6 neon-border">
193
+ <h3 class="text-lg font-semibold mb-4 flex items-center space-x-2">
194
+ <i data-feather="activity" class="w-5 h-5 text-violet-400"></i>
195
+ <span>System Performance</span>
196
+ </h3>
197
+ <canvas id="performance-chart" width="400" height="200"></canvas>
198
+ </div>
199
+
200
+ <!-- Memory Usage -->
201
+ <div class="glass-morphism rounded-xl p-6 neon-border">
202
+ <h3 class="text-lg font-semibold mb-4 flex items-center space-x-2">
203
+ <i data-feather="database" class="w-5 h-5 text-violet-400"></i>
204
+ <span>Memory Usage</span>
205
+ </h3>
206
+ <div class="space-y-3">
207
+ <div>
208
+ <div class="flex justify-between text-sm mb-1">
209
+ <span>Short-term</span>
210
+ <span id="short-term-memory">45%</span>
211
+ </div>
212
+ <div class="w-full bg-gray-700 rounded-full h-2">
213
+ <div id="short-term-bar" class="bg-violet-500 h-2 rounded-full transition-all duration-500" style="width: 45%"></div>
214
+ </div>
215
+ </div>
216
+ <div>
217
+ <div class="flex justify-between text-sm mb-1">
218
+ <span>Long-term</span>
219
+ <span id="long-term-memory">72%</span>
220
+ </div>
221
+ <div class="w-full bg-gray-700 rounded-full h-2">
222
+ <div id="long-term-bar" class="bg-violet-500 h-2 rounded-full transition-all duration-500" style="width: 72%"></div>
223
+ </div>
224
+ </div>
225
+ <div>
226
+ <div class="flex justify-between text-sm mb-1">
227
+ <span>Working</span>
228
+ <span id="working-memory">28%</span>
229
+ </div>
230
+ <div class="w-full bg-gray-700 rounded-full h-2">
231
+ <div id="working-bar" class="bg-violet-500 h-2 rounded-full transition-all duration-500" style="width: 28%"></div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Agent Specialization -->
238
+ <div class="glass-morphism rounded-xl p-6 neon-border">
239
+ <h3 class="text-lg font-semibold mb-4 flex items-center space-x-2">
240
+ <i data-feather="layers" class="w-5 h-5 text-violet-400"></i>
241
+ <span>Specialization Matrix</span>
242
+ </h3>
243
+ <div id="specialization-grid" class="grid grid-cols-3 gap-2">
244
+ <!-- Specialization badges will be inserted here -->
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <script>
252
+ // Initialize Vanta.js background
253
+ VANTA.NET({
254
+ el: "#vanta-bg",
255
+ mouseControls: true,
256
+ touchControls: true,
257
+ gyroControls: false,
258
+ minHeight: 200.00,
259
+ minWidth: 200.00,
260
+ scale: 1.00,
261
+ scaleMobile: 1.00,
262
+ color: 0x8b5cf6,
263
+ backgroundColor: 0x111827,
264
+ points: 10.00,
265
+ maxDistance: 20.00,
266
+ spacing: 15.00
267
+ });
268
+
269
+ // Agent System Core
270
+ class AgentSystem {
271
+ constructor() {
272
+ this.agents = new Map();
273
+ this.messages = [];
274
+ this.tasks = [];
275
+ this.performanceData = {
276
+ labels: [],
277
+ datasets: [{
278
+ label: 'CPU Usage',
279
+ data: [],
280
+ borderColor: 'rgb(139, 92, 246)',
281
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
282
+ tension: 0.4
283
+ }]
284
+ };
285
+ this.initializeAgents();
286
+ this.startSimulation();
287
+ }
288
+
289
+ initializeAgents() {
290
+ const agentTypes = [
291
+ { name: 'Analyzer', type: 'analytical', specialization: 'data-analysis', status: 'active' },
292
+ { name: 'Creator', type: 'creative', specialization: 'content-generation', status: 'active' },
293
+ { name: 'Decider', type: 'decision', specialization: 'strategic-planning', status: 'idle' },
294
+ { name: 'Coordinator', type: 'coordination', specialization: 'task-orchestration', status: 'active' }
295
+ ];
296
+
297
+ agentTypes.forEach((config, index) => {
298
+ this.createAgent(config);
299
+ });
300
+ }
301
+
302
+ createAgent(config) {
303
+ const agent = {
304
+ id: `agent-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
305
+ ...config,
306
+ thoughts: [],
307
+ goals: [],
308
+ memory: {
309
+ short: [],
310
+ long: [],
311
+ working: []
312
+ },
313
+ tools: this.assignTools(config.specialization),
314
+ metrics: {
315
+ tasksCompleted: 0,
316
+ messagesProcessed: 0,
317
+ accuracy: Math.random() * 20 + 80,
318
+ efficiency: Math.random() * 30 + 70
319
+ }
320
+ };
321
+ this.agents.set(agent.id, agent);
322
+ this.renderAgent(agent);
323
+ return agent;
324
+ }
325
+
326
+ assignTools(specialization) {
327
+ const toolsets = {
328
+ 'data-analysis': ['python', 'sql', 'pandas', 'numpy'],
329
+ 'content-generation': ['nlp', 'gpt', 'image-gen', 'text-to-speech'],
330
+ 'strategic-planning': ['frameworks', 'models', 'simulator', 'optimizer'],
331
+ 'task-orchestration': ['scheduler', 'queue', 'monitor', 'balancer']
332
+ };
333
+ return toolsets[specialization] || ['basic-tools'];
334
+ }
335
+
336
+ renderAgent(agent) {
337
+ const container = document.getElementById('agents-container');
338
+ const agentCard = document.createElement('div');
339
+ agentCard.className = 'agent-card glass-morphism rounded-lg p-4 border border-violet-500/20 hover:border-violet-500/40';
340
+ agentCard.id = `card-${agent.id}`;
341
+ agentCard.innerHTML = `
342
+ <div class="flex items-start justify-between mb-3">
343
+ <div class="flex items-center space-x-3">
344
+ <div class="w-10 h-10 bg-violet-600 rounded-lg flex items-center justify-center">
345
+ <i data-feather="${this.getAgentIcon(agent.type)}" class="w-5 h-5"></i>
346
+ </div>
347
+ <div>
348
+ <h4 class="font-semibold">${agent.name}</h4>
349
+ <span class="text-xs px-2 py-1 rounded-full ${
350
+ agent.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'
351
+ }">${agent.status}</span>
352
+ </div>
353
+ </div>
354
+ <button onclick="agentSystem.removeAgent('${agent.id}')" class="p-1 hover:bg-red-500/20 rounded transition-colors">
355
+ <i data-feather="x" class="w-4 h-4"></i>
356
+ </button>
357
+ </div>
358
+ <div class="space-y-2 text-sm">
359
+ <div class="flex justify-between">
360
+ <span class="text-gray-400">Specialization:</span>
361
+ <span class="text-violet-400">${agent.specialization}</span>
362
+ </div>
363
+ <div class="flex justify-between">
364
+ <span class="text-gray-400">Accuracy:</span>
365
+ <span>${agent.metrics.accuracy.toFixed(1)}%</span>
366
+ </div>
367
+ <div class="flex justify-between">
368
+ <span class="text-gray-400">Efficiency:</span>
369
+ <span>${agent.metrics.efficiency.toFixed(1)}%</span>
370
+ </div>
371
+ </div>
372
+ <div class="mt-3 pt-3 border-t border-gray-700">
373
+ <div class="text-xs text-gray-400">
374
+ <div>Tasks: ${agent.metrics.tasksCompleted}</div>
375
+ <div>Messages: ${agent.metrics.messagesProcessed}</div>
376
+ </div>
377
+ </div>
378
+ `;
379
+ container.appendChild(agentCard);
380
+ feather.replace();
381
+ }
382
+
383
+ getAgentIcon(type) {
384
+ const icons = {
385
+ 'analytical': 'bar-chart-2',
386
+ 'creative': 'pen-tool',
387
+ 'decision': 'git-branch',
388
+ 'coordination': 'git-pull-request'
389
+ };
390
+ return icons[type] || 'cpu';
391
+ }
392
+
393
+ removeAgent(agentId) {
394
+ this.agents.delete(agentId);
395
+ const card = document.getElementById(`card-${agentId}`);
396
+ if (card) {
397
+ anime({
398
+ targets: card,
399
+ opacity: 0,
400
+ scale: 0.8,
401
+ duration: 300,
402
+ easing: 'easeInOutQuad',
403
+ complete: () => card.remove()
404
+ });
405
+ }
406
+ }
407
+
408
+ startSimulation() {
409
+ setInterval(() => this.simulateAgentActivity(), 2000);
410
+ setInterval(() => this.updatePerformanceMetrics(), 1000);
411
+ setInterval(() => this.simulateMemoryUsage(), 3000);
412
+ this.initializeChart();
413
+ }
414
+
415
+ simulateAgentActivity() {
416
+ const agents = Array.from(this.agents.values());
417
+ if (agents.length < 2) return;
418
+
419
+ const sender = agents[Math.floor(Math.random() * agents.length)];
420
+ const receiver = agents[Math.floor(Math.random() * agents.length)];
421
+
422
+ if (sender.id !== receiver.id) {
423
+ this.sendMessage(sender, receiver);
424
+ this.processTask(sender);
425
+ }
426
+ }
427
+
428
+ sendMessage(sender, receiver) {
429
+ const intents = ['ask', 'respond', 'delegate', 'alert', 'inform'];
430
+ const intent = intents[Math.floor(Math.random() * intents.length)];
431
+
432
+ const message = {
433
+ id: `msg-${Date.now()}`,
434
+ from: sender.id,
435
+ to: receiver.id,
436
+ intent: intent,
437
+ content: this.generateMessageContent(intent, sender.specialization),
438
+ timestamp: new Date(),
439
+ priority: Math.random() > 0.7 ? 'high' : 'normal'
440
+ };
441
+
442
+ this.messages.push(message);
443
+ this.renderMessage(message);
444
+ sender.metrics.messagesProcessed++;
445
+ this.updateAgentCard(sender);
446
+ }
447
+
448
+ generateMessageContent(intent, specialization) {
449
+ const templates = {
450
+ 'ask': [
451
+ `Requesting analysis on ${specialization} data`,
452
+ `Need input on current ${specialization} strategy`,
453
+ `Query regarding ${specialization} optimization`
454
+ ],
455
+ 'respond': [
456
+ `Analysis complete for ${specialization} module`,
457
+ `Response to ${specialization} query received`,
458
+ `Updated ${specialization} parameters`
459
+ ],
460
+ 'delegate': [
461
+ `Delegating ${specialization} task to your queue`,
462
+ `Please handle this ${specialization} request`,
463
+ `${specialization} processing required`
464
+ ],
465
+ 'alert': [
466
+ `Alert: ${specialization} threshold exceeded`,
467
+ `Warning: ${specialization} anomaly detected`,
468
+ `Critical: ${specialization} system stress`
469
+ ],
470
+ 'inform': [
471
+ `Update: ${specialization} status changed`,
472
+ `Info: ${specialization} module updated`,
473
+ `Notification: ${specialization} complete`
474
+ ]
475
+ };
476
+
477
+ const messages = templates[intent] || templates['inform'];
478
+ return messages[Math.floor(Math.random() * messages.length)];
479
+ }
480
+
481
+ renderMessage(message) {
482
+ const container = document.getElementById('message-flow');
483
+ const messageEl = document.createElement('div');
484
+ messageEl.className = 'message-bubble flex items-start space-x-3 p-3 rounded-lg bg-gray-800/50 border-l-4 border-violet-500';
485
+
486
+ const sender = this.agents.get(message.from);
487
+ const receiver = this.agents.get(message.to);
488
+
489
+ messageEl.innerHTML = `
490
+ <div class="flex-1">
491
+ <div class="flex items-center justify-between mb-1">
492
+ <span class="text-sm font-semibold">${sender.name} → ${receiver.name}</span>
493
+ <span class="text-xs text-gray-400">${message.timestamp.toLocaleTimeString()}</span>
494
+ </div>
495
+ <p class="text-sm text-gray-300">${message.content}</p>
496
+ <div class="flex items-center space-x-2 mt-2">
497
+ <span class="text-xs px-2 py-1 rounded bg-violet-500/20 text-violet-400">${message.intent}</span>
498
+ ${message.priority === 'high' ? '<span class="text-xs px-2 py-1 rounded bg-red-500/20 text-red-400">HIGH</span>' : ''}
499
+ </div>
500
+ </div>
501
+ `;
502
+
503
+ container.insertBefore(messageEl, container.firstChild);
504
+ if (container.children.length > 10) {
505
+ container.removeChild(container.lastChild);
506
+ }
507
+ }
508
+
509
+ processTask(agent) {
510
+ const taskTypes = ['analysis', 'generation', 'optimization', 'coordination'];
511
+ const task = {
512
+ id: `task-${Date.now()}`,
513
+ type: taskTypes[Math.floor(Math.random() * taskTypes.length)],
514
+ assignedTo: agent.id,
515
+ status: 'processing',
516
+ progress: 0,
517
+ createdAt: new Date()
518
+ };
519
+
520
+ this.tasks.push(task);
521
+ this.renderTask(task);
522
+
523
+ // Simulate task progress
524
+ const progressInterval = setInterval(() => {
525
+ task.progress += Math.random() * 30;
526
+ if (task.progress >= 100) {
527
+ task.progress = 100;
528
+ task.status = 'completed';
529
+ agent.metrics.tasksCompleted++;
530
+ this.updateAgentCard(agent);
531
+ clearInterval(progressInterval);
532
+ setTimeout(() => this.removeTask(task.id), 2000);
533
+ }
534
+ this.updateTaskProgress(task);
535
+ }, 1000);
536
+ }
537
+
538
+ renderTask(task) {
539
+ const container = document.getElementById('task-queue');
540
+ const taskEl = document.createElement('div');
541
+ taskEl.className = 'p-3 rounded-lg bg-gray-800/50 border border-gray-700';
542
+ taskEl.id = `task-${task.id}`;
543
+
544
+ const agent = this.agents.get(task.assignedTo);
545
+
546
+ taskEl.innerHTML = `
547
+ <div class="flex items-center justify-between mb-2">
548
+ <span class="text-sm font-medium">${task.type}</span>
549
+ <span class="text-xs px-2 py-1 rounded ${
550
+ task.status === 'completed' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
551
+ }">${task.status}</span>
552
+ </div>
553
+ <div class="text-xs text-gray-400 mb-2">Assigned to: ${agent.name}</div>
554
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
555
+ <div class="bg-violet-500 h-1.5 rounded-full transition-all duration-500" style="width: ${task.progress}%"></div>
556
+ </div>
557
+ `;
558
+
559
+ container.insertBefore(taskEl, container.firstChild);
560
+ if (container.children.length > 5) {
561
+ container.removeChild(container.lastChild);
562
+ }
563
+ }
564
+
565
+ updateTaskProgress(task) {
566
+ const taskEl = document.getElementById(`task-${task.id}`);
567
+ if (taskEl) {
568
+ const progressBar = taskEl.querySelector('.bg-violet-500');
569
+ const statusBadge = taskEl.querySelector('.rounded');
570
+ progressBar.style.width = `${task.progress}%`;
571
+
572
+ if (task.status === 'completed') {
573
+ statusBadge.className = 'text-xs px-2 py-1 rounded bg-green-500/20 text-green-400';
574
+ statusBadge.textContent = 'completed';
575
+ }
576
+ }
577
+ }
578
+
579
+ removeTask(taskId) {
580
+ const taskEl = document.getElementById(`task-${taskId}`);
581
+ if (taskEl) {
582
+ anime({
583
+ targets: taskEl,
584
+ opacity: 0,
585
+ translateX: -20,
586
+ duration: 300,
587
+ easing: 'easeInOutQuad',
588
+ complete: () => taskEl.remove()
589
+ });
590
+ }
591
+ }
592
+
593
+ updateAgentCard(agent) {
594
+ const card = document.getElementById(`card-${agent.id}`);
595
+ if (card) {
596
+ const metricsDiv = card.querySelector('.text-xs.text-gray-400');
597
+ metricsDiv.innerHTML = `
598
+ <div>Tasks: ${agent.metrics.tasksCompleted}</div>
599
+ <div>Messages: ${agent.metrics.messagesProcessed}</div>
600
+ `;
601
+ }
602
+ }
603
+
604
+ updatePerformanceMetrics() {
605
+ const cpuUsage = Math.random() * 30 + 40;
606
+ const time = new Date().toLocaleTimeString();
607
+
608
+ this.performanceData.labels.push(time);
609
+ this.performanceData.datasets[0].data.push(cpuUsage);
610
+
611
+ if (this.performanceData.labels.length > 10) {
612
+ this.performanceData.labels.shift();
613
+ this.performanceData.datasets[0].data.shift();
614
+ }
615
+
616
+ if (window.performanceChart) {
617
+ window.performanceChart.update('none');
618
+ }
619
+ }
620
+
621
+ simulateMemoryUsage() {
622
+ const shortTerm = Math.random() * 30 + 40;
623
+ const longTerm = Math.random() * 20 + 60;
624
+ const working = Math.random() * 40 + 20;
625
+
626
+ document.getElementById('short-term-memory').textContent = `${shortTerm.toFixed(0)}%`;
627
+ document.getElementById('long-term-memory').textContent = `${longTerm.toFixed(0)}%`;
628
+ document.getElementById('working-memory').textContent = `${working.toFixed(0)}%`;
629
+
630
+ document.getElementById('short-term-bar').style.width = `${shortTerm}%`;
631
+ document.getElementById('long-term-bar').style.width = `${longTerm}%`;
632
+ document.getElementById('working-bar').style.width = `${working}%`;
633
+ }
634
+
635
+ initializeChart() {
636
+ const ctx = document.getElementById('performance-chart').getContext('2d');
637
+ window.performanceChart = new Chart(ctx, {
638
+ type: 'line',
639
+ data: this.performanceData,
640
+ options: {
641
+ responsive: true,
642
+ maintainAspectRatio: false,
643
+ plugins: {
644
+ legend: {
645
+ display: false
646
+ }
647
+ },
648
+ scales: {
649
+ x: {
650
+ display: false
651
+ },
652
+ y: {
653
+ beginAtZero: true,
654
+ max: 100,
655
+ ticks: {
656
+ color: '#9ca3af',
657
+ callback: function(value) {
658
+ return value + '%';
659
+ }
660
+ },
661
+ grid: {
662
+ color: 'rgba(75, 85, 99, 0.3)'
663
+ }
664
+ }
665
+ }
666
+ }
667
+ });
668
+ }
669
+ }
670
+
671
+ // Initialize the system
672
+ let agentSystem;
673
+ document.addEventListener('DOMContentLoaded', () => {
674
+ feather.replace();
675
+ agentSystem = new AgentSystem();
676
+
677
+ // Add animations
678
+ anime({
679
+ targets: '.agent-card',
680
+ opacity: [0, 1],
681
+ translateY: [20, 0],
682
+ delay: anime.stagger(100),
683
+ duration: 800,
684
+ easing: 'easeOutQuad'
685
+ });
686
+ });
687
+
688
+ // Global functions
689
+ function createAgent() {
690
+ const types = ['analytical', 'creative', 'decision', 'coordination'];
691
+ const specializations = ['data-analysis', 'content-generation', 'strategic-planning', 'task-orchestration'];
692
+ const names = ['Quantum', 'Nova', 'Phoenix', 'Titan', 'Oracle', 'Matrix', 'Nexus', 'Vertex'];
693
+
694
+ const config = {
695
+ name: names[Math.floor(Math.random() * names.length)] + '-' + Math.floor(Math.random() * 100),
696
+ type: types[Math.floor(Math.random() * types.length)],
697
+ specialization: specializations[Math.floor(Math.random() * specializations.length)],
698
+ status: Math.random() > 0.3 ? 'active' : 'idle'
699
+ };
700
+
701
+ agentSystem.createAgent(config);
702
+
703
+ // Animate new agent card
704
+ setTimeout(() => {
705
+ const newCard = document.querySelectorAll('.agent-card')[document.querySelectorAll('.agent-card').length - 1];
706
+ anime({
707
+ targets: newCard,
708
+ scale: [0.8, 1],
709
+ opacity: [0, 1],
710
+ duration: 500,
711
+ easing: 'easeOutBack'
712
+ });
713
+ }, 100);
714
+ }
715
+ </script>
716
+ </body>
717
  </html>