Hugging Face's logo

Spaces:
docto41
/
ai-center
Running

App Files Community
docto41 commited on
Commit
96948ea
·
verified ·
1 Parent(s): 3d0be40

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +347 -420
  2. prompts.txt +3 -1
index.html CHANGED
@@ -1,20 +1,19 @@
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>AI ARMY COMMAND CENTER | Deploy Your AI Army</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
11
 
12
  :root {
13
- --primary: #1e40af;
14
- --primary-dark: #1e3a8a;
15
  --secondary: #10b981;
16
  --accent: #f59e0b;
17
- --danger: #ef4444;
18
  }
19
 
20
  body {
@@ -23,7 +22,7 @@
23
  color: #e2e8f0;
24
  }
25
 
26
- .command-font {
27
  font-family: 'Orbitron', sans-serif;
28
  }
29
 
@@ -32,36 +31,19 @@
32
  border: 1px solid #334155;
33
  }
34
 
35
- .terminal-text {
36
- color: #10b981;
37
- font-family: 'Courier New', monospace;
38
  }
39
 
40
- .status-indicator {
41
- width: 12px;
42
- height: 12px;
43
- border-radius: 50%;
44
- display: inline-block;
45
- margin-right: 8px;
46
  }
47
 
48
- .status-active {
49
- background-color: #10b981;
50
- box-shadow: 0 0 10px #10b981;
51
- }
52
-
53
- .status-inactive {
54
- background-color: #64748b;
55
- }
56
-
57
- .status-warning {
58
- background-color: #f59e0b;
59
- box-shadow: 0 0 10px #f59e0b;
60
- }
61
-
62
- .status-danger {
63
- background-color: #ef4444;
64
- box-shadow: 0 0 10px #ef4444;
65
  }
66
 
67
  .glow-effect {
@@ -72,35 +54,6 @@
72
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
73
  }
74
 
75
- .dashboard-grid {
76
- display: grid;
77
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
78
- gap: 1.5rem;
79
- }
80
-
81
- .command-btn {
82
- transition: all 0.3s ease;
83
- border: 1px solid #334155;
84
- }
85
-
86
- .command-btn:hover {
87
- transform: translateY(-2px);
88
- border-color: #60a5fa;
89
- }
90
-
91
- .progress-bar {
92
- height: 6px;
93
- background-color: #334155;
94
- border-radius: 3px;
95
- overflow: hidden;
96
- }
97
-
98
- .progress-value {
99
- height: 100%;
100
- background: linear-gradient(90deg, #3b82f6, #60a5fa);
101
- border-radius: 3px;
102
- }
103
-
104
  @keyframes pulse {
105
  0%, 100% {
106
  opacity: 1;
@@ -139,466 +92,440 @@
139
  transform: translateY(100%);
140
  }
141
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  </style>
143
  </head>
144
  <body class="min-h-screen">
145
- <!-- Top Navigation Bar -->
146
  <nav class="bg-gray-900 border-b border-gray-800">
147
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
148
  <div class="flex justify-between h-16">
149
  <div class="flex items-center">
150
  <div class="flex-shrink-0 flex items-center">
151
- <i class="fas fa-robot text-blue-500 text-2xl mr-3"></i>
152
- <span class="text-xl font-bold text-white command-font">AI ARMY COMMAND CENTER</span>
153
  </div>
154
  </div>
155
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
156
- <div class="flex items-center space-x-2">
157
- <span class="status-indicator status-active"></span>
158
- <span class="text-green-400 text-sm font-medium">OPERATIONAL</span>
159
- </div>
160
- <div class="flex items-center space-x-2">
161
- <span class="status-indicator status-warning"></span>
162
- <span class="text-yellow-400 text-sm font-medium">12 UNITS ACTIVE</span>
163
- </div>
164
- <div class="flex items-center space-x-2">
165
- <i class="fas fa-bolt text-blue-400"></i>
166
- <span class="text-blue-400 text-sm font-medium">87% POWER</span>
167
- </div>
168
  </div>
169
  <div class="flex items-center">
170
- <div class="relative">
171
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
172
- <i class="fas fa-user-shield text-gray-400"></i>
173
- </div>
174
- <span class="pl-8 pr-4 py-2 text-gray-300 text-sm">COMMANDER: ADMIN</span>
175
- </div>
176
- <button class="ml-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out glow-effect">
177
- <i class="fas fa-power-off mr-2"></i> DEPLOY
178
  </button>
179
  </div>
180
  </div>
181
  </div>
182
  </nav>
183
 
184
- <!-- Main Command Interface -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
186
  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
187
- <!-- Left Sidebar - Unit Status -->
188
  <div class="lg:col-span-1 terminal-bg rounded-lg p-6 relative overflow-hidden">
189
  <div class="scanline"></div>
190
- <h3 class="text-lg font-bold text-white mb-6 command-font border-b border-gray-700 pb-2">
191
- <i class="fas fa-tachometer-alt mr-2 text-blue-400"></i> UNIT STATUS
192
  </h3>
193
 
194
  <div class="space-y-4">
195
- <div class="flex justify-between items-center">
196
- <div class="flex items-center">
197
- <span class="status-indicator status-active"></span>
198
- <span class="text-sm">CONTENT GENERATORS</span>
199
  </div>
200
- <span class="text-green-400 text-sm font-bold">8/8</span>
201
- </div>
202
 
203
- <div class="flex justify-between items-center">
204
- <div class="flex items-center">
205
- <span class="status-indicator status-active"></span>
206
- <span class="text-sm">CODE ENGINEERS</span>
207
  </div>
208
- <span class="text-green-400 text-sm font-bold">4/4</span>
209
- </div>
210
 
211
- <div class="flex justify-between items-center">
212
- <div class="flex items-center">
213
- <span class="status-indicator status-warning"></span>
214
- <span class="text-sm">DESIGN UNITS</span>
215
  </div>
216
- <span class="text-yellow-400 text-sm font-bold">3/4</span>
217
- </div>
218
 
219
- <div class="flex justify-between items-center">
220
- <div class="flex items-center">
221
- <span class="status-indicator status-danger"></span>
222
- <span class="text-sm">ANALYTICS</span>
223
- </div>
224
- <span class="text-red-400 text-sm font-bold">1/2</span>
225
- </div>
226
- </div>
227
-
228
- <div class="mt-8">
229
- <h4 class="text-sm font-bold text-gray-400 mb-2">SYSTEM RESOURCES</h4>
230
- <div class="mb-3">
231
- <div class="flex justify-between text-xs mb-1">
232
- <span>CPU</span>
233
- <span>78%</span>
234
- </div>
235
- <div class="progress-bar">
236
- <div class="progress-value" style="width: 78%"></div>
237
  </div>
238
- </div>
239
- <div class="mb-3">
240
- <div class="flex justify-between text-xs mb-1">
241
- <span>MEMORY</span>
242
- <span>64%</span>
243
- </div>
244
- <div class="progress-bar">
245
- <div class="progress-value" style="width: 64%"></div>
246
- </div>
247
- </div>
248
- <div class="mb-3">
249
- <div class="flex justify-between text-xs mb-1">
250
- <span>STORAGE</span>
251
- <span>42%</span>
252
- </div>
253
- <div class="progress-bar">
254
- <div class="progress-value" style="width: 42%"></div>
255
- </div>
256
- </div>
257
- <div>
258
- <div class="flex justify-between text-xs mb-1">
259
- <span>NETWORK</span>
260
- <span>91%</span>
261
- </div>
262
- <div class="progress-bar">
263
- <div class="progress-value" style="width: 91%"></div>
264
  </div>
265
- </div>
 
266
  </div>
267
 
268
  <div class="mt-8 pt-4 border-t border-gray-700">
269
- <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm font-medium transition duration-150 ease-in-out glow-effect">
270
- <i class="fas fa-sync-alt mr-2"></i> REINFORCE UNITS
271
- </button>
 
 
 
 
 
 
 
 
 
 
 
272
  </div>
273
  </div>
274
 
275
- <!-- Main Command Dashboard -->
276
  <div class="lg:col-span-3 space-y-6">
277
- <!-- Command Terminal -->
278
- <div class="terminal-bg rounded-lg p-6 relative overflow-hidden">
279
  <div class="scanline"></div>
280
- <div class="flex justify-between items-center mb-4">
281
- <h3 class="text-lg font-bold text-white command-font">
282
- <i class="fas fa-terminal mr-2 text-green-400"></i> COMMAND TERMINAL
 
 
283
  </h3>
284
  <div class="flex space-x-2">
285
  <button class="bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 py-1 rounded text-xs font-medium">
286
- CLEAR
287
  </button>
288
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-xs font-medium glow-effect">
289
- EXECUTE
290
  </button>
291
  </div>
292
  </div>
293
 
294
- <div class="terminal-bg rounded p-4 h-64 overflow-y-auto mb-4">
295
- <div class="terminal-text space-y-2 text-sm">
296
- <div>> <span class="text-white">Initializing AI Army Command Center v3.2.1</span></div>
297
- <div>> <span class="text-white">Checking unit status... <span class="text-green-400">OK</span></span></div>
298
- <div>> <span class="text-white">Establishing secure connection... <span class="text-green-400">ESTABLISHED</span></span></div>
299
- <div>> <span class="text-white">Authenticating commander... <span class="text-green-400">ADMIN PRIVILEGES GRANTED</span></span></div>
300
- <div>> <span class="text-white">All systems nominal. Ready for commands.</span></div>
301
- <div class="mt-4">> <span class="text-white">Last deployment: <span class="text-blue-400">12 AI units generated 47 content pieces (3.9/unit)</span></span></div>
302
- <div>> <span class="text-white">Average generation time: <span class="text-blue-400">8.7 seconds</span></span></div>
303
- <div>> <span class="text-white">Quality rating: <span class="text-blue-400">92.4%</span></span></div>
304
- <div class="mt-4">> <span class="text-purple-400">Enter command or select from deployment options below</span></div>
305
- </div>
306
- </div>
307
-
308
- <div class="flex">
309
- <input type="text" class="flex-grow bg-gray-800 text-green-400 px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter command...">
310
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-md glow-effect">
311
- <i class="fas fa-paper-plane"></i>
312
- </button>
313
- </div>
314
- </div>
315
-
316
- <!-- Deployment Options -->
317
- <div class="terminal-bg rounded-lg p-6 relative overflow-hidden">
318
- <div class="scanline"></div>
319
- <h3 class="text-lg font-bold text-white mb-6 command-font border-b border-gray-700 pb-2">
320
- <i class="fas fa-fighter-jet mr-2 text-yellow-400"></i> DEPLOYMENT OPTIONS
321
- </h3>
322
-
323
- <div class="dashboard-grid">
324
- <!-- Content Generation -->
325
- <div class="terminal-bg rounded-lg p-4 command-btn hover:border-blue-500">
326
- <div class="flex items-center mb-3">
327
- <div class="bg-blue-500 bg-opacity-20 p-2 rounded-md mr-3">
328
- <i class="fas fa-align-left text-blue-400"></i>
329
  </div>
330
- <h4 class="font-bold text-white">CONTENT GENERATION</h4>
331
  </div>
332
- <p class="text-gray-400 text-sm mb-4">Deploy AI units to generate articles, blogs, social media posts, and marketing copy.</p>
333
- <div class="flex justify-between items-center">
334
- <span class="text-xs text-gray-500">12 units available</span>
335
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-xs glow-effect">
336
- DEPLOY
337
- </button>
338
  </div>
339
  </div>
340
 
341
- <!-- Code Generation -->
342
- <div class="terminal-bg rounded-lg p-4 command-btn hover:border-green-500">
343
- <div class="flex items-center mb-3">
344
- <div class="bg-green-500 bg-opacity-20 p-2 rounded-md mr-3">
345
- <i class="fas fa-code text-green-400"></i>
346
- </div>
347
- <h4 class="font-bold text-white">CODE ENGINEERING</h4>
348
- </div>
349
- <p class="text-gray-400 text-sm mb-4">Generate, debug, and optimize code in multiple programming languages.</p>
350
- <div class="flex justify-between items-center">
351
- <span class="text-xs text-gray-500">8 units available</span>
352
- <button class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-xs glow-effect">
353
- DEPLOY
354
- </button>
355
  </div>
356
  </div>
357
 
358
- <!-- Design Generation -->
359
- <div class="terminal-bg rounded-lg p-4 command-btn hover:border-purple-500">
360
- <div class="flex items-center mb-3">
361
- <div class="bg-purple-500 bg-opacity-20 p-2 rounded-md mr-3">
362
- <i class="fas fa-palette text-purple-400"></i>
363
  </div>
364
- <h4 class="font-bold text-white">DESIGN CREATION</h4>
365
  </div>
366
- <p class="text-gray-400 text-sm mb-4">Generate UI/UX designs, logos, illustrations, and marketing materials.</p>
367
- <div class="flex justify-between items-center">
368
- <span class="text-xs text-gray-500">6 units available</span>
369
- <button class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded text-xs glow-effect">
370
- DEPLOY
371
- </button>
372
  </div>
373
  </div>
374
 
375
- <!-- Data Analysis -->
376
- <div class="terminal-bg rounded-lg p-4 command-btn hover:border-yellow-500">
377
- <div class="flex items-center mb-3">
378
- <div class="bg-yellow-500 bg-opacity-20 p-2 rounded-md mr-3">
379
- <i class="fas fa-chart-bar text-yellow-400"></i>
380
  </div>
381
- <h4 class="font-bold text-white">DATA ANALYSIS</h4>
382
  </div>
383
- <p class="text-gray-400 text-sm mb-4">Process and visualize data, generate reports, and extract insights.</p>
384
- <div class="flex justify-between items-center">
385
- <span class="text-xs text-gray-500">4 units available</span>
386
- <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded text-xs glow-effect">
387
- DEPLOY
388
- </button>
389
- </div>
390
- </div>
391
-
392
- <!-- Multimedia -->
393
- <div class="terminal-bg rounded-lg p-4 command-btn hover:border-red-500">
394
- <div class="flex items-center mb-3">
395
- <div class="bg-red-500 bg-opacity-20 p-2 rounded-md mr-3">
396
- <i class="fas fa-photo-film text-red-400"></i>
397
  </div>
398
- <h4 class="font-bold text-white">MULTIMEDIA</h4>
399
- </div>
400
- <p class="text-gray-400 text-sm mb-4">Generate videos, edit images, create animations and audio content.</p>
401
- <div class="flex justify-between items-center">
402
- <span class="text-xs text-gray-500">5 units available</span>
403
- <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-xs glow-effect">
404
- DEPLOY
405
- </button>
406
  </div>
407
  </div>
408
-
409
- <!-- Research -->
410
- <div class="terminal-bg rounded-lg p-4 command-btn hover:border-indigo-500">
411
- <div class="flex items-center mb-3">
412
- <div class="bg-indigo-500 bg-opacity-20 p-2 rounded-md mr-3">
413
- <i class="fas fa-microscope text-indigo-400"></i>
414
- </div>
415
- <h4 class="font-bold text-white">RESEARCH</h4>
416
- </div>
417
- <p class="text-gray-400 text-sm mb-4">Conduct research, summarize papers, and generate technical documentation.</p>
418
- <div class="flex justify-between items-center">
419
- <span class="text-xs text-gray-500">7 units available</span>
420
- <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-xs glow-effect">
421
- DEPLOY
422
- </button>
423
- </div>
424
  </div>
 
 
 
425
  </div>
426
  </div>
427
 
428
- <!-- Recent Deployments -->
429
- <div class="terminal-bg rounded-lg p-6 relative overflow-hidden">
430
- <div class="scanline"></div>
431
- <h3 class="text-lg font-bold text-white mb-6 command-font border-b border-gray-700 pb-2">
432
- <i class="fas fa-history mr-2 text-blue-400"></i> RECENT DEPLOYMENTS
433
- </h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
434
 
435
- <div class="overflow-x-auto">
436
- <table class="min-w-full divide-y divide-gray-700">
437
- <thead>
438
- <tr>
439
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Mission ID</th>
440
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Type</th>
441
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Units</th>
442
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Output</th>
443
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
444
- <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Time</th>
445
- </tr>
446
- </thead>
447
- <tbody class="divide-y divide-gray-700">
448
- <tr>
449
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-blue-400">#CMD-4829</td>
450
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Content</td>
451
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">3</td>
452
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">12 articles</td>
453
- <td class="px-4 py-3 whitespace-nowrap">
454
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Completed</span>
455
- </td>
456
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2m 14s</td>
457
- </tr>
458
- <tr>
459
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-blue-400">#CMD-4828</td>
460
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Code</td>
461
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2</td>
462
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">React component</td>
463
- <td class="px-4 py-3 whitespace-nowrap">
464
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Completed</span>
465
- </td>
466
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">1m 37s</td>
467
- </tr>
468
- <tr>
469
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-blue-400">#CMD-4827</td>
470
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Design</td>
471
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">1</td>
472
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Logo concepts</td>
473
- <td class="px-4 py-3 whitespace-nowrap">
474
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">Completed</span>
475
- </td>
476
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">3m 02s</td>
477
- </tr>
478
- <tr>
479
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-blue-400">#CMD-4826</td>
480
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Research</td>
481
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">4</td>
482
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Market analysis</td>
483
- <td class="px-4 py-3 whitespace-nowrap">
484
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-900 text-yellow-300">Processing</span>
485
- </td>
486
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">5m 18s</td>
487
- </tr>
488
- <tr>
489
- <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-blue-400">#CMD-4825</td>
490
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Multimedia</td>
491
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">2</td>
492
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">Product video</td>
493
- <td class="px-4 py-3 whitespace-nowrap">
494
- <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-300">Queued</span>
495
- </td>
496
- <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-300">-</td>
497
- </tr>
498
- </tbody>
499
- </table>
500
  </div>
501
  </div>
502
  </div>
503
  </div>
504
  </div>
505
 
506
- <!-- Command Footer -->
507
  <footer class="bg-gray-900 border-t border-gray-800 mt-12">
508
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
509
- <div class="flex flex-col md:flex-row justify-between items-center">
510
- <div class="flex items-center">
511
- <i class="fas fa-robot text-blue-500 text-xl mr-3"></i>
512
- <span class="text-white command-font">AI ARMY COMMAND CENTER</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
513
  </div>
514
- <div class="mt-4 md:mt-0 text-center md:text-right">
515
- <p class="text-xs text-gray-500">SYSTEM STATUS: <span class="text-green-400">OPERATIONAL</span></p>
516
- <p class="text-xs text-gray-500">VERSION 3.2.1 | SECURITY CLEARANCE: ALPHA-9</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
517
  </div>
518
  </div>
519
  </div>
520
  </footer>
521
 
522
- <!-- JavaScript for interactive elements -->
523
  <script>
524
  document.addEventListener('DOMContentLoaded', function() {
525
- // Deployment buttons
526
- const deployButtons = document.querySelectorAll('.command-btn button');
527
- deployButtons.forEach(button => {
528
- button.addEventListener('click', function() {
529
- const card = this.closest('.command-btn');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
530
 
531
- // Add pulse animation to show deployment in progress
532
- card.classList.add('pulse-animation');
 
533
 
534
- // Simulate deployment
535
  setTimeout(() => {
536
- card.classList.remove('pulse-animation');
537
 
538
- // Update terminal with deployment confirmation
539
- const terminal = document.querySelector('.terminal-text');
540
- const deploymentType = card.querySelector('h4').textContent;
541
- const newEntry = document.createElement('div');
542
- newEntry.innerHTML = `> <span class="text-white">Deployed 2 units for ${deploymentType.toLowerCase()} mission <span class="text-blue-400">#CMD-${Math.floor(1000 + Math.random() * 9000)}</span></span>`;
543
- terminal.appendChild(newEntry);
544
-
545
- // Scroll terminal to bottom
546
- terminal.parentElement.scrollTop = terminal.parentElement.scrollHeight;
547
- }, 2000);
548
- });
549
  });
550
 
551
- // Execute button in terminal
552
- const executeBtn = document.querySelector('button:contains("EXECUTE")');
553
- if(executeBtn) {
554
- executeBtn.addEventListener('click', function() {
555
- const commandInput = document.querySelector('input[type="text"]');
556
- if(commandInput.value.trim() !== '') {
557
- const terminal = document.querySelector('.terminal-text');
558
- const newEntry = document.createElement('div');
559
- newEntry.innerHTML = `> <span class="text-white">${commandInput.value}</span>`;
560
- terminal.appendChild(newEntry);
561
-
562
- // Add response
563
- const responseEntry = document.createElement('div');
564
- responseEntry.innerHTML = `> <span class="text-green-400">Command executed successfully. 3 units deployed.</span>`;
565
- terminal.appendChild(responseEntry);
566
-
567
- // Clear input and scroll terminal
568
- commandInput.value = '';
569
- terminal.parentElement.scrollTop = terminal.parentElement.scrollHeight;
570
- }
571
- });
572
- }
573
-
574
- // Simulate terminal typing effect
575
- const terminalText = document.querySelector('.terminal-text');
576
- const commands = [
577
- "analyze market trends for Q3",
578
- "generate 5 blog post ideas about AI ethics",
579
- "create python script for data scraping",
580
- "design mobile app wireframe for fintech startup"
581
- ];
582
 
583
- let currentCommand = 0;
584
- setInterval(() => {
585
- const commandInput = document.querySelector('input[type="text"]');
586
- let text = commands[currentCommand];
 
 
587
  let i = 0;
588
 
589
- const typeWriter = setInterval(() => {
590
- if(i < text.length) {
591
- commandInput.value = text.substring(0, i+1);
592
  i++;
593
  } else {
594
- clearInterval(typeWriter);
595
- setTimeout(() => {
596
- commandInput.value = '';
597
- currentCommand = (currentCommand + 1) % commands.length;
598
- }, 2000);
599
  }
600
- }, 100);
601
- }, 8000);
602
  });
603
  </script>
604
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/ai-center" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
1
  <!DOCTYPE html>
2
+ <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DeepMind AI | Assistant Intelligence Artificielle</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
11
 
12
  :root {
13
+ --primary: #2563eb;
14
+ --primary-dark: #1e40af;
15
  --secondary: #10b981;
16
  --accent: #f59e0b;
 
17
  }
18
 
19
  body {
 
22
  color: #e2e8f0;
23
  }
24
 
25
+ .ai-font {
26
  font-family: 'Orbitron', sans-serif;
27
  }
28
 
 
31
  border: 1px solid #334155;
32
  }
33
 
34
+ .chat-bubble {
35
+ border-radius: 1rem;
36
+ position: relative;
37
  }
38
 
39
+ .user-bubble {
40
+ background-color: #1e40af;
41
+ border-bottom-right-radius: 0;
 
 
 
42
  }
43
 
44
+ .ai-bubble {
45
+ background-color: #1e293b;
46
+ border-bottom-left-radius: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  }
48
 
49
  .glow-effect {
 
54
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
55
  }
56
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  @keyframes pulse {
58
  0%, 100% {
59
  opacity: 1;
 
92
  transform: translateY(100%);
93
  }
94
  }
95
+
96
+ .typing-indicator span {
97
+ display: inline-block;
98
+ width: 8px;
99
+ height: 8px;
100
+ background-color: #94a3b8;
101
+ border-radius: 50%;
102
+ margin-right: 4px;
103
+ animation: bounce 1.5s infinite ease-in-out;
104
+ }
105
+
106
+ .typing-indicator span:nth-child(2) {
107
+ animation-delay: 0.2s;
108
+ }
109
+
110
+ .typing-indicator span:nth-child(3) {
111
+ animation-delay: 0.4s;
112
+ }
113
+
114
+ @keyframes bounce {
115
+ 0%, 100% {
116
+ transform: translateY(0);
117
+ }
118
+ 50% {
119
+ transform: translateY(-5px);
120
+ }
121
+ }
122
  </style>
123
  </head>
124
  <body class="min-h-screen">
125
+ <!-- Navigation -->
126
  <nav class="bg-gray-900 border-b border-gray-800">
127
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
128
  <div class="flex justify-between h-16">
129
  <div class="flex items-center">
130
  <div class="flex-shrink-0 flex items-center">
131
+ <i class="fas fa-brain text-blue-500 text-2xl mr-3"></i>
132
+ <span class="text-xl font-bold text-white ai-font">DEEPMIND AI</span>
133
  </div>
134
  </div>
135
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
136
+ <a href="#" class="text-blue-400 hover:text-blue-300 px-3 py-2 text-sm font-medium">Accueil</a>
137
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Fonctionnalités</a>
138
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">API</a>
139
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Tarifs</a>
 
 
 
 
 
 
 
 
140
  </div>
141
  <div class="flex items-center">
142
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out glow-effect">
143
+ <i class="fas fa-sign-in-alt mr-2"></i> Connexion
 
 
 
 
 
 
144
  </button>
145
  </div>
146
  </div>
147
  </div>
148
  </nav>
149
 
150
+ <!-- Hero Section -->
151
+ <div class="relative bg-gradient-to-b from-gray-900 to-gray-800">
152
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
153
+ <div class="text-center">
154
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 ai-font">
155
+ <span class="text-blue-400">DeepMind</span> AI Assistant
156
+ </h1>
157
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
158
+ L'intelligence artificielle la plus avancée pour répondre à vos questions, générer du contenu et automatiser vos tâches.
159
+ </p>
160
+ <div class="mt-10">
161
+ <div class="relative max-w-2xl mx-auto">
162
+ <input type="text" placeholder="Posez votre question ici..."
163
+ class="w-full bg-gray-800 text-white px-6 py-4 rounded-full border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
164
+ <button class="absolute right-2 top-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full glow-effect">
165
+ <i class="fas fa-paper-plane"></i>
166
+ </button>
167
+ </div>
168
+ <p class="text-sm text-gray-500 mt-3">
169
+ Essayez : "Explique-moi le machine learning comme si j'avais 5 ans"
170
+ </p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Main Chat Interface -->
177
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
178
  <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
179
+ <!-- Left Sidebar - Tools -->
180
  <div class="lg:col-span-1 terminal-bg rounded-lg p-6 relative overflow-hidden">
181
  <div class="scanline"></div>
182
+ <h3 class="text-lg font-bold text-white mb-6 ai-font border-b border-gray-700 pb-2">
183
+ <i class="fas fa-tools mr-2 text-blue-400"></i> Outils AI
184
  </h3>
185
 
186
  <div class="space-y-4">
187
+ <button class="w-full flex items-center p-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
188
+ <div class="bg-blue-500 bg-opacity-20 p-2 rounded-md mr-3">
189
+ <i class="fas fa-comment-dots text-blue-400"></i>
 
190
  </div>
191
+ <span class="text-white">Chat intelligent</span>
192
+ </button>
193
 
194
+ <button class="w-full flex items-center p-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
195
+ <div class="bg-green-500 bg-opacity-20 p-2 rounded-md mr-3">
196
+ <i class="fas fa-file-alt text-green-400"></i>
 
197
  </div>
198
+ <span class="text-white">Génération de texte</span>
199
+ </button>
200
 
201
+ <button class="w-full flex items-center p-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
202
+ <div class="bg-purple-500 bg-opacity-20 p-2 rounded-md mr-3">
203
+ <i class="fas fa-code text-purple-400"></i>
 
204
  </div>
205
+ <span class="text-white">Assistant code</span>
206
+ </button>
207
 
208
+ <button class="w-full flex items-center p-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
209
+ <div class="bg-yellow-500 bg-opacity-20 p-2 rounded-md mr-3">
210
+ <i class="fas fa-image text-yellow-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
211
  </div>
212
+ <span class="text-white">Génération d'images</span>
213
+ </button>
214
+
215
+ <button class="w-full flex items-center p-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
216
+ <div class="bg-red-500 bg-opacity-20 p-2 rounded-md mr-3">
217
+ <i class="fas fa-language text-red-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
218
  </div>
219
+ <span class="text-white">Traduction</span>
220
+ </button>
221
  </div>
222
 
223
  <div class="mt-8 pt-4 border-t border-gray-700">
224
+ <h3 class="text-lg font-bold text-white mb-4 ai-font">
225
+ <i class="fas fa-history mr-2 text-blue-400"></i> Historique
226
+ </h3>
227
+ <div class="space-y-2">
228
+ <button class="w-full text-left text-gray-400 hover:text-white text-sm p-2 truncate">
229
+ Comment créer un site web moderne ?
230
+ </button>
231
+ <button class="w-full text-left text-gray-400 hover:text-white text-sm p-2 truncate">
232
+ Différence entre AI et ML
233
+ </button>
234
+ <button class="w-full text-left text-gray-400 hover:text-white text-sm p-2 truncate">
235
+ Code Python pour trier une liste
236
+ </button>
237
+ </div>
238
  </div>
239
  </div>
240
 
241
+ <!-- Main Chat Area -->
242
  <div class="lg:col-span-3 space-y-6">
243
+ <div class="terminal-bg rounded-lg p-6 h-[600px] flex flex-col relative overflow-hidden">
 
244
  <div class="scanline"></div>
245
+
246
+ <!-- Chat Header -->
247
+ <div class="flex justify-between items-center mb-6 pb-4 border-b border-gray-700">
248
+ <h3 class="text-lg font-bold text-white ai-font">
249
+ <i class="fas fa-comment-dots mr-2 text-blue-400"></i> Chat avec DeepMind AI
250
  </h3>
251
  <div class="flex space-x-2">
252
  <button class="bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 py-1 rounded text-xs font-medium">
253
+ <i class="fas fa-eraser mr-1"></i> Effacer
254
  </button>
255
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-xs font-medium glow-effect">
256
+ <i class="fas fa-share-alt mr-1"></i> Partager
257
  </button>
258
  </div>
259
  </div>
260
 
261
+ <!-- Chat Messages -->
262
+ <div id="chatMessages" class="flex-1 overflow-y-auto space-y-4 pr-2">
263
+ <!-- AI Welcome Message -->
264
+ <div class="flex">
265
+ <div class="flex-shrink-0 mr-3">
266
+ <div class="bg-blue-600 w-8 h-8 rounded-full flex items-center justify-center">
267
+ <i class="fas fa-brain text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268
  </div>
 
269
  </div>
270
+ <div class="ai-bubble chat-bubble p-4 max-w-[80%]">
271
+ <p class="text-white">
272
+ Bonjour ! Je suis DeepMind AI, votre assistant intelligent. Comment puis-je vous aider aujourd'hui ?
273
+ </p>
274
+ <p class="text-xs text-gray-400 mt-2">Aujourd'hui, 10:24</p>
 
275
  </div>
276
  </div>
277
 
278
+ <!-- User Message -->
279
+ <div class="flex justify-end">
280
+ <div class="user-bubble chat-bubble p-4 max-w-[80%]">
281
+ <p class="text-white">
282
+ Peux-tu m'expliquer ce qu'est l'intelligence artificielle ?
283
+ </p>
284
+ <p class="text-xs text-blue-200 mt-2">Aujourd'hui, 10:25</p>
 
 
 
 
 
 
 
285
  </div>
286
  </div>
287
 
288
+ <!-- AI Response -->
289
+ <div class="flex">
290
+ <div class="flex-shrink-0 mr-3">
291
+ <div class="bg-blue-600 w-8 h-8 rounded-full flex items-center justify-center">
292
+ <i class="fas fa-brain text-white"></i>
293
  </div>
 
294
  </div>
295
+ <div class="ai-bubble chat-bubble p-4 max-w-[80%]">
296
+ <p class="text-white">
297
+ Bien sûr ! L'intelligence artificielle (IA) est un domaine de l'informatique qui vise à créer des systèmes capables d'effectuer des tâches qui nécessiteraient normalement l'intelligence humaine. Cela inclut des choses comme la compréhension du langage naturel, la reconnaissance d'images, la prise de décision et l'apprentissage à partir de données.
298
+ </p>
299
+ <p class="text-xs text-gray-400 mt-2">Aujourd'hui, 10:25</p>
 
300
  </div>
301
  </div>
302
 
303
+ <!-- AI Typing Indicator -->
304
+ <div class="flex" id="typingIndicator" style="display: none;">
305
+ <div class="flex-shrink-0 mr-3">
306
+ <div class="bg-blue-600 w-8 h-8 rounded-full flex items-center justify-center">
307
+ <i class="fas fa-brain text-white"></i>
308
  </div>
 
309
  </div>
310
+ <div class="ai-bubble chat-bubble p-4 max-w-[80%]">
311
+ <div class="typing-indicator">
312
+ <span></span>
313
+ <span></span>
314
+ <span></span>
 
 
 
 
 
 
 
 
 
315
  </div>
 
 
 
 
 
 
 
 
316
  </div>
317
  </div>
318
+ </div>
319
+
320
+ <!-- Chat Input -->
321
+ <div class="mt-4 pt-4 border-t border-gray-700">
322
+ <div class="flex items-center">
323
+ <button class="bg-gray-700 hover:bg-gray-600 text-gray-300 p-2 rounded-md mr-2">
324
+ <i class="fas fa-paperclip"></i>
325
+ </button>
326
+ <input type="text" id="chatInput" placeholder="Envoyer un message..."
327
+ class="flex-grow bg-gray-800 text-white px-4 py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
328
+ <button id="sendMessageBtn" class="ml-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-md glow-effect">
329
+ <i class="fas fa-paper-plane"></i>
330
+ </button>
 
 
 
331
  </div>
332
+ <p class="text-xs text-gray-500 mt-2">
333
+ DeepMind AI peut faire des erreurs. Vérifiez les informations importantes.
334
+ </p>
335
  </div>
336
  </div>
337
 
338
+ <!-- Features Grid -->
339
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
340
+ <div class="terminal-bg rounded-lg p-6 hover:border-blue-500 border border-transparent transition">
341
+ <div class="flex items-center mb-3">
342
+ <div class="bg-blue-500 bg-opacity-20 p-2 rounded-md mr-3">
343
+ <i class="fas fa-lightbulb text-blue-400"></i>
344
+ </div>
345
+ <h4 class="font-bold text-white">Idées créatives</h4>
346
+ </div>
347
+ <p class="text-gray-400 text-sm">
348
+ Générez des idées innovantes pour vos projets, articles ou startups.
349
+ </p>
350
+ </div>
351
+
352
+ <div class="terminal-bg rounded-lg p-6 hover:border-green-500 border border-transparent transition">
353
+ <div class="flex items-center mb-3">
354
+ <div class="bg-green-500 bg-opacity-20 p-2 rounded-md mr-3">
355
+ <i class="fas fa-code text-green-400"></i>
356
+ </div>
357
+ <h4 class="font-bold text-white">Code & Debug</h4>
358
+ </div>
359
+ <p class="text-gray-400 text-sm">
360
+ Écrivez, optimisez et débuggez du code dans plusieurs langages.
361
+ </p>
362
+ </div>
363
 
364
+ <div class="terminal-bg rounded-lg p-6 hover:border-purple-500 border border-transparent transition">
365
+ <div class="flex items-center mb-3">
366
+ <div class="bg-purple-500 bg-opacity-20 p-2 rounded-md mr-3">
367
+ <i class="fas fa-file-alt text-purple-400"></i>
368
+ </div>
369
+ <h4 class="font-bold text-white">Rédaction</h4>
370
+ </div>
371
+ <p class="text-gray-400 text-sm">
372
+ Créez du contenu de qualité : articles, emails, scripts et plus.
373
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
374
  </div>
375
  </div>
376
  </div>
377
  </div>
378
  </div>
379
 
380
+ <!-- Footer -->
381
  <footer class="bg-gray-900 border-t border-gray-800 mt-12">
382
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
383
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
384
+ <div>
385
+ <h3 class="text-white text-lg font-bold mb-4 ai-font">DeepMind AI</h3>
386
+ <p class="text-gray-400 text-sm">
387
+ L'assistant d'intelligence artificielle le plus avancé pour booster votre productivité et créativité.
388
+ </p>
389
+ </div>
390
+ <div>
391
+ <h3 class="text-white text-sm font-bold mb-4 uppercase">Produit</h3>
392
+ <ul class="space-y-2">
393
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Fonctionnalités</a></li>
394
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Tarifs</a></li>
395
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">API</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Applications</a></li>
397
+ </ul>
398
+ </div>
399
+ <div>
400
+ <h3 class="text-white text-sm font-bold mb-4 uppercase">Ressources</h3>
401
+ <ul class="space-y-2">
402
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li>
403
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog</a></li>
404
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Tutoriels</a></li>
405
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Support</a></li>
406
+ </ul>
407
  </div>
408
+ <div>
409
+ <h3 class="text-white text-sm font-bold mb-4 uppercase">Legal</h3>
410
+ <ul class="space-y-2">
411
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Confidentialité</a></li>
412
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Conditions</a></li>
413
+ <li><a href="#" class="text-gray-400 hover:text-white text-sm">Politique cookies</a></li>
414
+ </ul>
415
+ </div>
416
+ </div>
417
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
418
+ <p class="text-gray-500 text-sm">
419
+ © 2023 DeepMind AI. Tous droits réservés.
420
+ </p>
421
+ <div class="flex space-x-6 mt-4 md:mt-0">
422
+ <a href="#" class="text-gray-400 hover:text-white">
423
+ <i class="fab fa-twitter"></i>
424
+ </a>
425
+ <a href="#" class="text-gray-400 hover:text-white">
426
+ <i class="fab fa-linkedin"></i>
427
+ </a>
428
+ <a href="#" class="text-gray-400 hover:text-white">
429
+ <i class="fab fa-github"></i>
430
+ </a>
431
+ <a href="#" class="text-gray-400 hover:text-white">
432
+ <i class="fab fa-discord"></i>
433
+ </a>
434
  </div>
435
  </div>
436
  </div>
437
  </footer>
438
 
439
+ <!-- JavaScript -->
440
  <script>
441
  document.addEventListener('DOMContentLoaded', function() {
442
+ const chatMessages = document.getElementById('chatMessages');
443
+ const chatInput = document.getElementById('chatInput');
444
+ const sendMessageBtn = document.getElementById('sendMessageBtn');
445
+ const typingIndicator = document.getElementById('typingIndicator');
446
+
447
+ // Sample AI responses
448
+ const aiResponses = [
449
+ "L'intelligence artificielle est un domaine fascinant qui évolue rapidement.",
450
+ "Le machine learning est une sous-catégorie de l'IA qui se concentre sur l'apprentissage à partir de données.",
451
+ "Les réseaux de neurones sont inspirés par le fonctionnement du cerveau humain.",
452
+ "L'IA peut être utilisée dans de nombreux domaines comme la santé, la finance et l'éducation.",
453
+ "Les modèles de langage comme moi sont entraînés sur d'énormes quantités de données textuelles."
454
+ ];
455
+
456
+ // Function to add a new message to the chat
457
+ function addMessage(text, isUser = false) {
458
+ const now = new Date();
459
+ const timeString = `Aujourd'hui, ${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
460
+
461
+ const messageDiv = document.createElement('div');
462
+ messageDiv.className = `flex ${isUser ? 'justify-end' : ''}`;
463
+
464
+ messageDiv.innerHTML = `
465
+ ${!isUser ? `
466
+ <div class="flex-shrink-0 mr-3">
467
+ <div class="bg-blue-600 w-8 h-8 rounded-full flex items-center justify-center">
468
+ <i class="fas fa-brain text-white"></i>
469
+ </div>
470
+ </div>
471
+ ` : ''}
472
+ <div class="${isUser ? 'user-bubble' : 'ai-bubble'} chat-bubble p-4 max-w-[80%]">
473
+ <p class="text-white">${text}</p>
474
+ <p class="text-xs ${isUser ? 'text-blue-200' : 'text-gray-400'} mt-2">${timeString}</p>
475
+ </div>
476
+ `;
477
+
478
+ chatMessages.appendChild(messageDiv);
479
+ chatMessages.scrollTop = chatMessages.scrollHeight;
480
+ }
481
+
482
+ // Send message button click handler
483
+ sendMessageBtn.addEventListener('click', function() {
484
+ const message = chatInput.value.trim();
485
+ if (message) {
486
+ // Add user message
487
+ addMessage(message, true);
488
+ chatInput.value = '';
489
 
490
+ // Show typing indicator
491
+ typingIndicator.style.display = 'flex';
492
+ chatMessages.scrollTop = chatMessages.scrollHeight;
493
 
494
+ // Simulate AI thinking
495
  setTimeout(() => {
496
+ typingIndicator.style.display = 'none';
497
 
498
+ // Get random AI response
499
+ const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
500
+ addMessage(randomResponse);
501
+ }, 1500);
502
+ }
 
 
 
 
 
 
503
  });
504
 
505
+ // Allow Enter key to send message
506
+ chatInput.addEventListener('keypress', function(e) {
507
+ if (e.key === 'Enter') {
508
+ sendMessageBtn.click();
509
+ }
510
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
511
 
512
+ // Simulate initial typing animation
513
+ setTimeout(() => {
514
+ const welcomeMessage = document.querySelector('.ai-bubble p');
515
+ welcomeMessage.innerHTML = '';
516
+
517
+ const text = "Bonjour ! Je suis DeepMind AI, votre assistant intelligent. Comment puis-je vous aider aujourd'hui ?";
518
  let i = 0;
519
 
520
+ const typing = setInterval(() => {
521
+ if (i < text.length) {
522
+ welcomeMessage.innerHTML += text.charAt(i);
523
  i++;
524
  } else {
525
+ clearInterval(typing);
 
 
 
 
526
  }
527
+ }, 30);
528
+ }, 1000);
529
  });
530
  </script>
531
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/ai-center" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1,2 +1,4 @@
1
  https://huggingface.co/spaces/docto41/beep-site-pro
2
- AI ARMY COMMAND CENTER Déployez votre armée d'IA pour générer tout type de contenu, code, design et plus
 
 
 
1
  https://huggingface.co/spaces/docto41/beep-site-pro
2
+ AI ARMY COMMAND CENTER Déployez votre armée d'IA pour générer tout type de contenu, code, design et plus
3
+ AUCUN BOUTON FONCTIONNE
4
+ je veux creer un site comme deepsite