Hugging Face's logo

Spaces:
basheer1414
/
test
Running

App Files Community
basheer1414 commited on
Commit
d8bd31e
·
verified ·
1 Parent(s): a0d514d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +563 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 💻
4
- colorFrom: gray
5
- colorTo: yellow
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: test
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,563 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ANA AI - Multi-Model Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+
13
+ :root {
14
+ --primary: #3b82f6;
15
+ --secondary: #8b5cf6;
16
+ --accent: #06b6d4;
17
+ --success: #10b981;
18
+ --warning: #f59e0b;
19
+ --error: #ef4444;
20
+ }
21
+
22
+ * {
23
+ font-family: 'Inter', sans-serif;
24
+ }
25
+
26
+ .gradient-bg {
27
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
28
+ }
29
+
30
+ .glass-morphism {
31
+ background: rgba(255, 255, 255, 0.1);
32
+ backdrop-filter: blur(10px);
33
+ border: 1px solid rgba(255, 255, 255, 0.2);
34
+ }
35
+
36
+ .model-card {
37
+ transition: all 0.3s ease;
38
+ background: linear-gradient(145deg, #f8fafc, #e2e8f0);
39
+ box-shadow: 20px 20px 60px #d1d5db, -20px -20px 60px #ffffff;
40
+ }
41
+
42
+ .model-card:hover {
43
+ transform: translateY(-5px);
44
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
45
+ }
46
+
47
+ .status-indicator {
48
+ animation: pulse 2s infinite;
49
+ }
50
+
51
+ @keyframes pulse {
52
+ 0% { opacity: 1; }
53
+ 50% { opacity: 0.5; }
54
+ 100% { opacity: 1; }
55
+ }
56
+
57
+ .sidebar {
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .sidebar-collapsed {
62
+ transform: translateX(-100%);
63
+ }
64
+
65
+ .chat-bubble {
66
+ max-width: 70%;
67
+ word-wrap: break-word;
68
+ }
69
+
70
+ .typing-indicator {
71
+ display: inline-block;
72
+ width: 8px;
73
+ height: 8px;
74
+ border-radius: 50%;
75
+ background-color: #6b7280;
76
+ animation: typing 1.4s infinite ease-in-out;
77
+ }
78
+
79
+ .typing-indicator:nth-child(2) {
80
+ animation-delay: 0.2s;
81
+ }
82
+
83
+ .typing-indicator:nth-child(3) {
84
+ animation-delay: 0.4s;
85
+ }
86
+
87
+ @keyframes typing {
88
+ 0%, 60%, 100% { transform: translateY(0); }
89
+ 30% { transform: translateY(-10px); }
90
+ }
91
+
92
+ .metric-card {
93
+ position: relative;
94
+ overflow: hidden;
95
+ }
96
+
97
+ .metric-card::before {
98
+ content: '';
99
+ position: absolute;
100
+ top: 0;
101
+ left: -100%;
102
+ width: 100%;
103
+ height: 100%;
104
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
105
+ transition: left 0.5s;
106
+ }
107
+
108
+ .metric-card:hover::before {
109
+ left: 100%;
110
+ }
111
+
112
+ .glow-effect {
113
+ box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
114
+ }
115
+
116
+ .circular-progress {
117
+ transform: rotate(-90deg);
118
+ }
119
+
120
+ .circular-progress circle {
121
+ stroke-dasharray: 283;
122
+ stroke-dashoffset: 283;
123
+ transition: stroke-dashoffset 0.5s ease-in-out;
124
+ }
125
+ </style>
126
+ </head>
127
+ <body class="bg-gray-50">
128
+ <!-- Navigation -->
129
+ <nav class="bg-white shadow-lg border-b border-gray-200">
130
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
131
+ <div class="flex justify-between items-center h-16">
132
+ <div class="flex items-center">
133
+ <button id="sidebar-toggle" class="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100">
134
+ <i data-feather="menu" class="h-6 w-6"></i>
135
+ </button>
136
+ <h1 class="ml-4 text-2xl font-bold text-gray-900">ANA AI Dashboard</h1>
137
+ </div>
138
+ <div class="flex items-center space-x-4">
139
+ <button class="relative p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full">
140
+ <i data-feather="bell" class="h-5 w-5"></i>
141
+ <span class="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full"></span>
142
+ </button>
143
+ <div class="flex items-center space-x-2">
144
+ <img class="h-8 w-8 rounded-full" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%233b82f6'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='0.35em' fill='white' font-size='40' font-family='Arial'%3EA%3C/text%3E%3C/svg%3E" alt="User">
145
+ <span class="text-sm font-medium">Admin</span>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </nav>
151
+
152
+ <div class="flex h-screen bg-gray-50">
153
+ <!-- Sidebar -->
154
+ <aside id="sidebar" class="sidebar w-64 bg-white shadow-lg flex-shrink-0">
155
+ <nav class="mt-5 px-2">
156
+ <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-white bg-blue-600">
157
+ <i data-feather="home" class="mr-3 h-5 w-5"></i>
158
+ Dashboard
159
+ </a>
160
+ <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
161
+ <i data-feather="cpu" class="mr-3 h-5 w-5"></i>
162
+ Models
163
+ </a>
164
+ <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
165
+ <i data-feather="bar-chart-2" class="mr-3 h-5 w-5"></i>
166
+ Analytics
167
+ </a>
168
+ <a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
169
+ <i data-feather="settings" class="mr-3 h-5 w-5"></i>
170
+ Settings
171
+ </a>
172
+ </nav>
173
+ </aside>
174
+
175
+ <!-- Main Content -->
176
+ <main class="flex-1 overflow-y-auto">
177
+ <div class="py-6">
178
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
179
+ <!-- Header -->
180
+ <div class="mb-8">
181
+ <h2 class="text-3xl font-bold text-gray-900">Welcome back to ANA AI</h2>
182
+ <p class="mt-2 text-gray-600">Manage your multi-model AI assistant</p>
183
+ </div>
184
+
185
+ <!-- Stats Overview -->
186
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
187
+ <div class="metric-card bg-white p-6 rounded-lg shadow-md">
188
+ <div class="flex items-center justify-between">
189
+ <div>
190
+ <p class="text-sm font-medium text-gray-600">Total Models</p>
191
+ <p class="text-3xl font-bold text-gray-900">8</p>
192
+ </div>
193
+ <div class="p-3 bg-blue-100 rounded-full">
194
+ <i data-feather="cpu" class="h-6 w-6 text-blue-600"></i>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ <div class="metric-card bg-white p-6 rounded-lg shadow-md">
199
+ <div class="flex items-center justify-between">
200
+ <div>
201
+ <p class="text-sm font-medium text-gray-600">Active Sessions</p>
202
+ <p class="text-3xl font-bold text-gray-900">24</p>
203
+ </div>
204
+ <div class="p-3 bg-green-100 rounded-full">
205
+ <i data-feather="activity" class="h-6 w-6 text-green-600"></i>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ <div class="metric-card bg-white p-6 rounded-lg shadow-md">
210
+ <div class="flex items-center justify-between">
211
+ <div>
212
+ <p class="text-sm font-medium text-gray-600">API Calls</p>
213
+ <p class="text-3xl font-bold text-gray-900">12.4k</p>
214
+ </div>
215
+ <div class="p-3 bg-purple-100 rounded-full">
216
+ <i data-feather="trending-up" class="h-6 w-6 text-purple-600"></i>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="metric-card bg-white p-6 rounded-lg shadow-md">
221
+ <div class="flex items-center justify-between">
222
+ <div>
223
+ <p class="text-sm font-medium text-gray-600">Uptime</p>
224
+ <p class="text-3xl font-bold text-gray-900">99.9%</p>
225
+ </div>
226
+ <div class="p-3 bg-yellow-100 rounded-full">
227
+ <i data-feather="clock" class="h-6 w-6 text-yellow-600"></i>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Models Grid -->
234
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
235
+ <!-- Model Performance -->
236
+ <div class="bg-white p-6 rounded-lg shadow-md">
237
+ <h3 class="text-lg font-semibold mb-4">Model Performance</h3>
238
+ <canvas id="performanceChart" width="400" height="200"></canvas>
239
+ </div>
240
+
241
+ <!-- Model Distribution -->
242
+ <div class="bg-white p-6 rounded-lg shadow-md">
243
+ <h3 class="text-lg font-semibold mb-4">Model Distribution</h3>
244
+ <div class="space-y-4">
245
+ <div class="flex items-center justify-between">
246
+ <span class="text-sm text-gray-600">GPT-4</span>
247
+ <div class="flex items-center">
248
+ <div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
249
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div>
250
+ </div>
251
+ <span class="text-sm text-gray-600">45%</span>
252
+ </div>
253
+ </div>
254
+ <div class="flex items-center justify-between">
255
+ <span class="text-sm text-gray-600">Claude</span>
256
+ <div class="flex items-center">
257
+ <div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
258
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 30%"></div>
259
+ </div>
260
+ <span class="text-sm text-gray-600">30%</span>
261
+ </div>
262
+ </div>
263
+ <div class="flex items-center justify-between">
264
+ <span class="text-sm text-gray-600">Gemini</span>
265
+ <div class="flex items-center">
266
+ <div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
267
+ <div class="bg-green-600 h-2 rounded-full" style="width: 25%"></div>
268
+ </div>
269
+ <span class="text-sm text-gray-600">25%</span>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Active Models -->
277
+ <div class="bg-white p-6 rounded-lg shadow-md mb-8">
278
+ <h3 class="text-lg font-semibold mb-4">Active Models</h3>
279
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
280
+ <!-- Model Cards -->
281
+ <div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('gpt')">
282
+ <div class="flex items-center justify-between mb-2">
283
+ <h4 class="font-semibold">GPT-4 Turbo</h4>
284
+ <span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
285
+ </div>
286
+ <p class="text-sm text-gray-600 mb-2">Latest OpenAI model</p>
287
+ <div class="flex items-center justify-between">
288
+ <span class="text-xs text-gray-500">2.3ms avg</span>
289
+ <div class="flex space-x-1">
290
+ <div class="w-1 h-4 bg-blue-600 rounded"></div>
291
+ <div class="w-1 h-6 bg-blue-600 rounded"></div>
292
+ <div class="w-1 h-3 bg-blue-600 rounded"></div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('claude')">
298
+ <div class="flex items-center justify-between mb-2">
299
+ <h4 class="font-semibold">Claude 3</h4>
300
+ <span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
301
+ </div>
302
+ <p class="text-sm text-gray-600 mb-2">Anthropic's best</p>
303
+ <div class="flex items-center justify-between">
304
+ <span class="text-xs text-gray-500">1.8ms avg</span>
305
+ <div class="flex space-x-1">
306
+ <div class="w-1 h-5 bg-purple-600 rounded"></div>
307
+ <div class="w-1 h-7 bg-purple-600 rounded"></div>
308
+ <div class="w-1 h-4 bg-purple-600 rounded"></div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('gemini')">
314
+ <div class="flex items-center justify-between mb-2">
315
+ <h4 class="font-semibold">Gemini Pro</h4>
316
+ <span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
317
+ </div>
318
+ <p class="text-sm text-gray-600 mb-2">Google's AI</p>
319
+ <div class="flex items-center justify-between">
320
+ <span class="text-xs text-gray-500">2.1ms avg</span>
321
+ <div class="flex space-x-1">
322
+ <div class="w-1 h-4 bg-green-600 rounded"></div>
323
+ <div class="w-1 h-5 bg-green-600 rounded"></div>
324
+ <div class="w-1 h-3 bg-green-600 rounded"></div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('llama')">
330
+ <div class="flex items-center justify-between mb-2">
331
+ <h4 class="font-semibold">Llama 3</h4>
332
+ <span class="status-indicator w-2 h-2 bg-yellow-500 rounded-full"></span>
333
+ </div>
334
+ <p class="text-sm text-gray-600 mb-2">Meta's open-source</p>
335
+ <div class="flex items-center justify-between">
336
+ <span class="text-xs text-gray-500">3.5ms avg</span>
337
+ <div class="flex space-x-1">
338
+ <div class="w-1 h-3 bg-orange-600 rounded"></div>
339
+ <div class="w-1 h-4 bg-orange-600 rounded"></div>
340
+ <div class="w-1 h-2 bg-orange-600 rounded"></div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Chat Interface -->
348
+ <div class="bg-white p-6 rounded-lg shadow-md">
349
+ <h3 class="text-lg font-semibold mb-4">Test Model</h3>
350
+ <div id="chat-container" class="h-64 border rounded-lg mb-4 overflow-y-auto p-4">
351
+ <div id="chat-messages"></div>
352
+ </div>
353
+ <div class="flex space-x-2">
354
+ <input type="text" id="message-input" placeholder="Type your message..."
355
+ class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
356
+ <button onclick="sendMessage()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
357
+ <i data-feather="send" class="h-4 w-4"></i>
358
+ </button>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </main>
364
+ </div>
365
+
366
+ <!-- Model Modal -->
367
+ <div id="modelModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
368
+ <div class="bg-white p-8 rounded-lg max-w-md w-full">
369
+ <h3 id="modalTitle" class="text-xl font-bold mb-4">Model Details</h3>
370
+ <div id="modalContent" class="space-y-4">
371
+ <!-- Content will be dynamically inserted -->
372
+ </div>
373
+ <button onclick="closeModal()" class="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
374
+ Close
375
+ </button>
376
+ </div>
377
+ </div>
378
+
379
+ <script>
380
+ // Initialize Feather Icons
381
+ feather.replace();
382
+
383
+ // Chart.js configuration
384
+ const ctx = document.getElementById('performanceChart').getContext('2d');
385
+ new Chart(ctx, {
386
+ type: 'line',
387
+ data: {
388
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
389
+ datasets: [{
390
+ label: 'Response Time (ms)',
391
+ data: [120, 190, 300, 500, 200, 300],
392
+ borderColor: 'rgb(59, 130, 246)',
393
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
394
+ tension: 0.4
395
+ }, {
396
+ label: 'Accuracy (%)',
397
+ data: [85, 90, 88, 95, 92, 93],
398
+ borderColor: 'rgb(139, 92, 246)',
399
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
400
+ tension: 0.4,
401
+ yAxisID: 'y1'
402
+ }]
403
+ },
404
+ options: {
405
+ responsive: true,
406
+ maintainAspectRatio: false,
407
+ scales: {
408
+ y: {
409
+ type: 'linear',
410
+ display: true,
411
+ position: 'left',
412
+ },
413
+ y1: {
414
+ type: 'linear',
415
+ display: true,
416
+ position: 'right',
417
+ grid: {
418
+ drawOnChartArea: false,
419
+ },
420
+ }
421
+ }
422
+ }
423
+ });
424
+
425
+ // Sidebar toggle
426
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
427
+ const sidebar = document.getElementById('sidebar');
428
+ sidebar.classList.toggle('sidebar-collapsed');
429
+ });
430
+
431
+ // Modal functions
432
+ function selectModel(model) {
433
+ const modal = document.getElementById('modelModal');
434
+ const title = document.getElementById('modalTitle');
435
+ const content = document.getElementById('modalContent');
436
+
437
+ const models = {
438
+ gpt: {
439
+ title: 'GPT-4 Turbo',
440
+ content: `
441
+ <p><strong>Type:</strong> OpenAI GPT-4</p>
442
+ <p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
443
+ <p><strong>Response Time:</strong> 2.3ms average</p>
444
+ <p><strong>Accuracy:</strong> 94%</p>
445
+ <p><strong>Last Updated:</strong> 2 hours ago</p>
446
+ `
447
+ },
448
+ claude: {
449
+ title: 'Claude 3',
450
+ content: `
451
+ <p><strong>Type:</strong> Anthropic Claude 3</p>
452
+ <p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
453
+ <p><strong>Response Time:</strong> 1.8ms average</p>
454
+ <p><strong>Accuracy:</strong> 96%</p>
455
+ <p><strong>Last Updated:</strong> 1 hour ago</p>
456
+ `
457
+ },
458
+ gemini: {
459
+ title: 'Gemini Pro',
460
+ content: `
461
+ <p><strong>Type:</strong> Google Gemini Pro</p>
462
+ <p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
463
+ <p><strong>Response Time:</strong> 2.1ms average</p>
464
+ <p><strong>Accuracy:</strong> 93%</p>
465
+ <p><strong>Last Updated:</strong> 30 minutes ago</p>
466
+ `
467
+ },
468
+ llama: {
469
+ title: 'Llama 3',
470
+ content: `
471
+ <p><strong>Type:</strong> Meta Llama 3</p>
472
+ <p><strong>Status:</strong> <span class="text-yellow-600">Moderate</span></p>
473
+ <p><strong>Response Time:</strong> 3.5ms average</p>
474
+ <p><strong>Accuracy:</strong> 89%</p>
475
+ <p><strong>Last Updated:</strong> 4 hours ago</p>
476
+ `
477
+ }
478
+ };
479
+
480
+ title.textContent = models[model].title;
481
+ content.innerHTML = models[model].content;
482
+ modal.classList.remove('hidden');
483
+ modal.classList.add('flex');
484
+ }
485
+
486
+ function closeModal() {
487
+ const modal = document.getElementById('modelModal');
488
+ modal.classList.add('hidden');
489
+ modal.classList.remove('flex');
490
+ }
491
+
492
+ // Chat functionality
493
+ function sendMessage() {
494
+ const input = document.getElementById('message-input');
495
+ const message = input.value.trim();
496
+ if (!message) return;
497
+
498
+ addMessage('user', message);
499
+ input.value = '';
500
+
501
+ // Simulate AI response
502
+ setTimeout(() => {
503
+ const responses = [
504
+ "I understand your query. Let me process that information...",
505
+ "Based on my analysis, here's what I found...",
506
+ "That's an interesting question. Here's my response...",
507
+ "Let me break this down for you..."
508
+ ];
509
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
510
+
511
+ // Show typing indicator
512
+ showTypingIndicator();
513
+
514
+ setTimeout(() => {
515
+ hideTypingIndicator();
516
+ addMessage('ai', randomResponse);
517
+ }, 1500);
518
+ }, 500);
519
+ }
520
+
521
+ function addMessage(type, content) {
522
+ const container = document.getElementById('chat-messages');
523
+ const messageDiv = document.createElement('div');
524
+ messageDiv.className = `flex ${type === 'user' ? 'justify-end' : 'justify-start'} mb-4`;
525
+ messageDiv.innerHTML = `
526
+ <div class="chat-bubble ${type === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'} px-4 py-2 rounded-lg">
527
+ ${content}
528
+ </div>
529
+ `;
530
+ container.appendChild(messageDiv);
531
+ container.scrollTop = container.scrollHeight;
532
+ }
533
+
534
+ function showTypingIndicator() {
535
+ const container = document.getElementById('chat-messages');
536
+ const typingDiv = document.createElement('div');
537
+ typingDiv.id = 'typing-indicator';
538
+ typingDiv.className = 'flex justify-start mb-4';
539
+ typingDiv.innerHTML = `
540
+ <div class="chat-bubble bg-gray-200 px-4 py-2 rounded-lg">
541
+ <div class="typing-indicator"></div>
542
+ <div class="typing-indicator"></div>
543
+ <div class="typing-indicator"></div>
544
+ </div>
545
+ `;
546
+ container.appendChild(typingDiv);
547
+ container.scrollTop = container.scrollHeight;
548
+ }
549
+
550
+ function hideTypingIndicator() {
551
+ const indicator = document.getElementById('typing-indicator');
552
+ if (indicator) indicator.remove();
553
+ }
554
+
555
+ // Enter key to send message
556
+ document.getElementById('message-input').addEventListener('keypress', function(e) {
557
+ if (e.key === 'Enter') {
558
+ sendMessage();
559
+ }
560
+ });
561
+ </script>
562
+ <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=basheer1414/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
563
+ </html>