Hugging Face's logo

Spaces:
basheer1414
/
test
Running

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

use modern gradient colurs and animated elements make it more uneque and remove all charts - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +78 -115
index.html CHANGED
@@ -6,31 +6,73 @@
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 {
@@ -184,47 +226,47 @@
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>
@@ -232,45 +274,8 @@
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 -->
@@ -380,48 +385,6 @@
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');
 
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
+
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: #667eea;
15
+ --secondary: #f093fb;
16
+ --accent: #4facfe;
17
+ --success: #43e97b;
18
+ --warning: #fa709a;
19
+ --error: #ff6b6b;
20
  }
21
 
22
+ * { font-family: 'Inter', sans-serif; }
23
+
24
+ body {
25
+ background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe);
26
+ background-size: 400% 400%;
27
+ animation: gradientShift 12s ease infinite;
28
  }
29
 
30
+ @keyframes gradientShift {
31
+ 0% { background-position: 0% 50%; }
32
+ 50% { background-position: 100% 50%; }
33
+ 100% { background-position: 0% 50%; }
34
  }
35
 
36
  .glass-morphism {
37
+ background: rgba(255, 255, 255, 0.15);
38
+ backdrop-filter: blur(16px);
39
+ border: 1px solid rgba(255, 255, 255, 0.25);
40
+ }
41
+
42
+ .glow-card {
43
+ background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
44
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
45
+ border: 1px solid rgba(255, 255, 255, 0.18);
46
+ transition: transform 0.4s, box-shadow 0.4s;
47
+ }
48
+ .glow-card:hover {
49
+ transform: translateY(-8px) scale(1.02);
50
+ box-shadow: 0 0 20px var(--accent), 0 0 40px var(--primary);
51
+ }
52
+
53
+ .metric-card {
54
+ position: relative;
55
+ overflow: hidden;
56
+ border-radius: 1rem;
57
+ background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
58
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
59
+ border: 1px solid rgba(255, 255, 255, 0.18);
60
+ }
61
+ .metric-card::before {
62
+ content: '';
63
+ position: absolute;
64
+ top: -50%;
65
+ left: -50%;
66
+ width: 200%;
67
+ height: 200%;
68
+ background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent);
69
+ animation: rotate 4s linear infinite;
70
+ z-index: 0;
71
+ }
72
+ .metric-card > * { position: relative; z-index: 1; }
73
+
74
+ @keyframes rotate {
75
+ 100% { transform: rotate(360deg); }
76
  }
77
 
78
  .model-card {
 
226
 
227
  <!-- Stats Overview -->
228
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
229
+ <div class="metric-card p-6 text-white">
230
  <div class="flex items-center justify-between">
231
  <div>
232
+ <p class="text-sm font-medium opacity-80">Total Models</p>
233
+ <p class="text-3xl font-bold">8</p>
234
  </div>
235
+ <div class="p-3 bg-white/20 rounded-full">
236
+ <i data-feather="cpu" class="h-6 w-6"></i>
237
  </div>
238
  </div>
239
  </div>
240
+ <div class="metric-card p-6 text-white">
241
  <div class="flex items-center justify-between">
242
  <div>
243
+ <p class="text-sm font-medium opacity-80">Active Sessions</p>
244
+ <p class="text-3xl font-bold">24</p>
245
  </div>
246
+ <div class="p-3 bg-white/20 rounded-full">
247
+ <i data-feather="activity" class="h-6 w-6"></i>
248
  </div>
249
  </div>
250
  </div>
251
+ <div class="metric-card p-6 text-white">
252
  <div class="flex items-center justify-between">
253
  <div>
254
+ <p class="text-sm font-medium opacity-80">API Calls</p>
255
+ <p class="text-3xl font-bold">12.4k</p>
256
  </div>
257
+ <div class="p-3 bg-white/20 rounded-full">
258
+ <i data-feather="trending-up" class="h-6 w-6"></i>
259
  </div>
260
  </div>
261
  </div>
262
+ <div class="metric-card p-6 text-white">
263
  <div class="flex items-center justify-between">
264
  <div>
265
+ <p class="text-sm font-medium opacity-80">Uptime</p>
266
+ <p class="text-3xl font-bold">99.9%</p>
267
  </div>
268
+ <div class="p-3 bg-white/20 rounded-full">
269
+ <i data-feather="clock" class="h-6 w-6"></i>
270
  </div>
271
  </div>
272
  </div>
 
274
 
275
  <!-- Models Grid -->
276
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
277
+ <!-- Model Performance (removed) -->
278
+ <!-- Model Distribution (removed) -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  </div>
280
 
281
  <!-- Active Models -->
 
385
  // Initialize Feather Icons
386
  feather.replace();
387
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
388
  // Sidebar toggle
389
  document.getElementById('sidebar-toggle').addEventListener('click', function() {
390
  const sidebar = document.getElementById('sidebar');