Hugging Face's logo

Spaces:
Hadiil
/
home23
Sleeping

App Files Community
1
Hadiil commited on
Commit
81250d0
·
verified ·
1 Parent(s): 664c39c

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +888 -83
static/index.html CHANGED
@@ -1,113 +1,918 @@
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>Cosmic AI Assistant</title>
7
- <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
8
- <link rel="stylesheet" href="/static/styles.css">
9
- <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
  <body>
12
  <!-- Stars Background -->
13
- <div class="stars" id="starsContainer"></div>
14
 
15
- <!-- Floating Particles -->
16
- <div class="particles" id="particlesContainer"></div>
17
 
18
- <div class="app-container">
19
- <!-- Header -->
20
- <header class="app-header">
21
- <div class="app-title">
22
- <div class="app-logo">
23
- <i class='bx bx-planet'></i>
24
- </div>
25
- <h1>Cosmic AI Assistant</h1>
26
  </div>
27
- <div class="app-controls">
28
- <button class="feature-toggle" id="featureToggle" data-tooltip="Afficher les fonctionnalités">
29
- <i class='bx bx-bulb'></i> Fonctionnalités
30
- </button>
31
- <button class="theme-toggle tooltip" id="themeToggle" data-tooltip="Changer de thème">
32
- <i class='bx bx-moon'></i>
 
 
 
33
  </button>
34
  </div>
35
- </header>
36
-
37
- <!-- Feature Showcase -->
38
- <div class="feature-showcase" id="featureShowcase">
39
- <div class="feature-grid">
40
- <div class="feature-card" data-feature="summarize">
41
- <div class="feature-icon"><i class='bx bx-book-content'></i></div>
42
- <h3>Résumé de Texte</h3>
43
- <p>Résumez automatiquement des documents, articles ou textes longs.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  </div>
45
- <div class="feature-card" data-feature="image-caption">
46
- <div class="feature-icon"><i class='bx bx-image'></i></div>
47
- <h3>Description d'Images</h3>
48
- <p>Générez des descriptions détaillées à partir d'images.</p>
 
 
 
 
 
49
  </div>
50
- <div class="feature-card" data-feature="qa">
51
- <div class="feature-icon"><i class='bx bx-question-mark'></i></div>
52
- <h3>Questions-Réponses</h3>
53
- <p>Obtenez des réponses précises à vos questions.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  </div>
55
- <div class="feature-card" data-feature="vqa">
56
- <div class="feature-icon"><i class='bx bx-image-alt'></i></div>
57
- <h3>Questions sur Images</h3>
58
- <p>Posez des questions sur le contenu d'une image.</p>
 
 
 
 
 
 
 
 
 
59
  </div>
60
- <div class="feature-card" data-feature="visualization">
61
- <div class="feature-icon"><i class='bx bx-bar-chart-alt-2'></i></div>
62
- <h3>Visualisation de Données</h3>
63
- <p>Générez du code pour visualiser vos données Excel.</p>
 
 
 
 
 
 
 
 
 
64
  </div>
65
- <div class="feature-card" data-feature="translate">
66
- <div class="feature-icon"><i class='bx bx-transfer'></i></div>
67
- <h3>Traduction</h3>
68
- <p>Traduisez du texte vers différentes langues.</p>
 
 
 
 
 
 
 
 
 
69
  </div>
70
  </div>
71
  </div>
72
-
73
- <!-- Chat Container -->
74
- <div class="chat-container">
75
- <div class="messages" id="messages">
76
- <div class="message bot-message">
77
- <div class="markdown-content">
78
- <p>Bonjour ! Je suis votre assistant IA cosmique. Téléchargez un fichier ou posez une question, et je peux :</p>
79
- <ul>
80
- <li>Résumer des documents</li>
81
- <li>Décrire des images</li>
82
- <li>Répondre à vos questions</li>
83
- <li>Traduire du texte</li>
84
- <li>Générer du code de visualisation</li>
85
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  </div>
87
- <div class="message-time">Maintenant</div>
88
- <div class="message-avatar"><i class='bx bx-bot'></i></div>
89
  </div>
90
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
 
92
- <!-- File Preview Area -->
93
- <div id="filePreviewArea"></div>
94
-
95
- <!-- Input Area -->
96
- <div class="input-area">
97
- <label for="fileInput" class="input-button tooltip" data-tooltip="Télécharger un fichier">
98
- <i class='bx bx-paperclip'></i>
99
- </label>
100
- <input type="file" id="fileInput" accept=".pdf,.docx,.txt,image/*,.xlsx,.xls">
101
 
102
- <input type="text" id="chatInput" placeholder="Posez une question ou téléchargez un fichier...">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
 
104
- <button class="input-button send-btn tooltip" id="sendButton" data-tooltip="Envoyer">
105
- <i class='bx bx-send'></i>
106
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </div>
108
  </div>
109
- </div>
110
-
111
- <script src="/static/scripts.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </body>
113
- </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>Cosmic AI Assistant</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
+ <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --space-bg-primary: #050518;
14
+ --space-bg-secondary: #0a0a2d;
15
+ --space-accent-primary: #7b2cbf;
16
+ --space-accent-secondary: #c77dff;
17
+ --space-accent-tertiary: #00b4d8;
18
+ --space-text-primary: #e6e6fa;
19
+ --space-text-secondary: #b8b8d4;
20
+ --space-shadow: rgba(123, 44, 191, 0.4);
21
+ --space-glow: 0 0 8px rgba(199, 125, 255, 0.6);
22
+ --space-nebula: linear-gradient(135deg, #7b2cbf 0%, #3a0ca3 50%, #4361ee 100%);
23
+ }
24
+
25
+ body {
26
+ font-family: 'Quicksand', sans-serif;
27
+ background-color: var(--space-bg-primary);
28
+ color: var(--space-text-primary);
29
+ min-height: 100vh;
30
+ overflow-x: hidden;
31
+ }
32
+
33
+ h1, h2, h3, h4, h5, h6 {
34
+ font-family: 'Space Mono', monospace;
35
+ letter-spacing: 1px;
36
+ }
37
+
38
+ .cosmic-gradient {
39
+ background: var(--space-nebula);
40
+ -webkit-background-clip: text;
41
+ -webkit-text-fill-color: transparent;
42
+ background-clip: text;
43
+ text-shadow: var(--space-glow);
44
+ }
45
+
46
+ .bg-cosmic {
47
+ background-color: var(--space-bg-secondary);
48
+ }
49
+
50
+ .text-cosmic {
51
+ color: var(--space-text-primary);
52
+ }
53
+
54
+ .text-cosmic-secondary {
55
+ color: var(--space-text-secondary);
56
+ }
57
+
58
+ .border-cosmic {
59
+ border-color: rgba(123, 44, 191, 0.3);
60
+ }
61
+
62
+ .cosmic-card {
63
+ background: rgba(10, 10, 45, 0.7);
64
+ backdrop-filter: blur(10px);
65
+ border: 1px solid rgba(123, 44, 191, 0.3);
66
+ border-radius: 0.75rem;
67
+ transition: all 0.3s ease;
68
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
69
+ overflow: hidden;
70
+ position: relative;
71
+ }
72
+
73
+ .cosmic-card::before {
74
+ content: '';
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ width: 100%;
79
+ height: 100%;
80
+ background: linear-gradient(135deg, rgba(123, 44, 191, 0.1) 0%, rgba(0, 180, 216, 0.1) 100%);
81
+ opacity: 0;
82
+ transition: opacity 0.3s ease;
83
+ pointer-events: none;
84
+ }
85
+
86
+ .cosmic-card:hover {
87
+ transform: translateY(-5px);
88
+ box-shadow: 0 8px 30px rgba(123, 44, 191, 0.3);
89
+ }
90
+
91
+ .cosmic-card:hover::before {
92
+ opacity: 1;
93
+ }
94
+
95
+ .cosmic-button {
96
+ background: linear-gradient(135deg, var(--space-accent-primary) 0%, var(--space-accent-secondary) 100%);
97
+ color: white;
98
+ position: relative;
99
+ overflow: hidden;
100
+ transition: all 0.3s ease;
101
+ }
102
+
103
+ .cosmic-button::before {
104
+ content: '';
105
+ position: absolute;
106
+ top: 0;
107
+ left: -100%;
108
+ width: 100%;
109
+ height: 100%;
110
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
111
+ transition: all 0.8s ease;
112
+ }
113
+
114
+ .cosmic-button:hover {
115
+ transform: translateY(-2px);
116
+ box-shadow: 0 5px 15px rgba(123, 44, 191, 0.4);
117
+ }
118
+
119
+ .cosmic-button:hover::before {
120
+ left: 100%;
121
+ }
122
+
123
+ .cosmic-input {
124
+ background: rgba(5, 5, 24, 0.6);
125
+ border: 1px solid rgba(123, 44, 191, 0.5);
126
+ color: var(--space-text-primary);
127
+ transition: all 0.3s ease;
128
+ }
129
+
130
+ .cosmic-input:focus {
131
+ outline: none;
132
+ border-color: var(--space-accent-secondary);
133
+ box-shadow: 0 0 0 3px rgba(199, 125, 255, 0.2), var(--space-glow);
134
+ }
135
+
136
+ .stars-container {
137
+ position: fixed;
138
+ top: 0;
139
+ left: 0;
140
+ width: 100%;
141
+ height: 100%;
142
+ z-index: -1;
143
+ overflow: hidden;
144
+ }
145
+
146
+ .star {
147
+ position: absolute;
148
+ background-color: #ffffff;
149
+ border-radius: 50%;
150
+ animation: twinkle 4s infinite ease-in-out;
151
+ }
152
+
153
+ @keyframes twinkle {
154
+ 0%, 100% { opacity: 0.2; transform: scale(0.8); }
155
+ 50% { opacity: 1; transform: scale(1.2); }
156
+ }
157
+
158
+ #particlesCanvas {
159
+ position: fixed;
160
+ top: 0;
161
+ left: 0;
162
+ width: 100%;
163
+ height: 100%;
164
+ z-index: -1;
165
+ }
166
+
167
+ .feature-icon {
168
+ transition: transform 0.3s ease;
169
+ }
170
+
171
+ .cosmic-card:hover .feature-icon {
172
+ transform: scale(1.2);
173
+ }
174
+
175
+ .message {
176
+ max-width: 80%;
177
+ padding: 0.8rem 1.2rem;
178
+ border-radius: 12px;
179
+ animation: messageAppear 0.3s ease;
180
+ }
181
+
182
+ .user-message {
183
+ align-self: flex-end;
184
+ background: linear-gradient(135deg, var(--space-accent-primary) 0%, var(--space-accent-secondary) 100%);
185
+ color: white;
186
+ border-bottom-right-radius: 0;
187
+ }
188
+
189
+ .bot-message {
190
+ align-self: flex-start;
191
+ background: rgba(5, 5, 24, 0.8);
192
+ color: var(--space-text-primary);
193
+ border-bottom-left-radius: 0;
194
+ border: 1px solid rgba(123, 44, 191, 0.3);
195
+ }
196
+
197
+ @keyframes messageAppear {
198
+ from {
199
+ opacity: 0;
200
+ transform: translateY(10px);
201
+ }
202
+ to {
203
+ opacity: 1;
204
+ transform: translateY(0);
205
+ }
206
+ }
207
+
208
+ .cosmic-upload__dropzone {
209
+ background: rgba(10, 10, 45, 0.6);
210
+ border: 2px dashed rgba(123, 44, 191, 0.5);
211
+ transition: all 0.3s ease;
212
+ cursor: pointer;
213
+ }
214
+
215
+ .cosmic-upload__dropzone.active {
216
+ background: rgba(10, 10, 45, 0.8);
217
+ border-color: var(--space-accent-secondary);
218
+ box-shadow: 0 0 20px rgba(123, 44, 191, 0.3);
219
+ }
220
+
221
+ .feature-transition {
222
+ transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
223
+ opacity 0.5s ease;
224
+ opacity: 0;
225
+ transform: translateY(20px);
226
+ }
227
+
228
+ .feature-transition.active {
229
+ opacity: 1;
230
+ transform: translateY(0);
231
+ }
232
+
233
+ .cosmos-loader {
234
+ width: 80px;
235
+ height: 80px;
236
+ position: relative;
237
+ margin: 2rem auto;
238
+ }
239
+
240
+ .cosmos-loader::before,
241
+ .cosmos-loader::after {
242
+ content: '';
243
+ position: absolute;
244
+ top: 0;
245
+ left: 0;
246
+ width: 100%;
247
+ height: 100%;
248
+ border-radius: 50%;
249
+ border: 4px solid transparent;
250
+ border-top-color: var(--space-accent-primary);
251
+ animation: spin 1.5s linear infinite;
252
+ }
253
+
254
+ .cosmos-loader::before {
255
+ border-top-color: var(--space-accent-primary);
256
+ z-index: 1;
257
+ animation-duration: 1.5s;
258
+ }
259
+
260
+ .cosmos-loader::after {
261
+ border-top-color: var(--space-accent-secondary);
262
+ border-right-color: var(--space-accent-secondary);
263
+ z-index: 0;
264
+ animation-duration: 2s;
265
+ }
266
+
267
+ @keyframes spin {
268
+ 0% { transform: rotate(0deg); }
269
+ 100% { transform: rotate(360deg); }
270
+ }
271
+
272
+ .planet {
273
+ width: 150px;
274
+ height: 150px;
275
+ background: linear-gradient(135deg, var(--space-accent-primary) 0%, var(--space-accent-secondary) 100%);
276
+ border-radius: 50%;
277
+ position: relative;
278
+ box-shadow: 0 0 30px rgba(123, 44, 191, 0.5);
279
+ }
280
+
281
+ .planet::before {
282
+ content: '';
283
+ position: absolute;
284
+ width: 160px;
285
+ height: 30px;
286
+ background: rgba(123, 44, 191, 0.3);
287
+ border-radius: 50%;
288
+ top: 50%;
289
+ left: 50%;
290
+ transform: translate(-50%, -50%) rotateX(80deg);
291
+ }
292
+
293
+ .orbit {
294
+ position: absolute;
295
+ top: 50%;
296
+ left: 50%;
297
+ border: 1px dashed rgba(123, 44, 191, 0.5);
298
+ border-radius: 50%;
299
+ transform: translate(-50%, -50%);
300
+ }
301
+
302
+ .moon {
303
+ position: absolute;
304
+ background: rgba(10, 10, 45, 0.9);
305
+ border: 1px solid rgba(123, 44, 191, 0.5);
306
+ border-radius: 50%;
307
+ transform-origin: 50% 100px;
308
+ animation: orbit 20s linear infinite;
309
+ box-shadow: 0 0 10px rgba(199, 125, 255, 0.4);
310
+ }
311
+
312
+ @keyframes orbit {
313
+ 0% { transform: rotate(0deg) translateX(100px); }
314
+ 100% { transform: rotate(360deg) translateX(100px); }
315
+ }
316
+ </style>
317
  </head>
318
  <body>
319
  <!-- Stars Background -->
320
+ <div class="stars-container" id="starsContainer"></div>
321
 
322
+ <!-- Particles Canvas -->
323
+ <canvas id="particlesCanvas"></canvas>
324
 
325
+ <!-- Navigation -->
326
+ <nav class="fixed top-0 left-0 w-full bg-opacity-90 bg-cosmic border-b border-cosmic z-50 py-3 px-6">
327
+ <div class="container mx-auto flex justify-between items-center">
328
+ <div class="flex items-center">
329
+ <h1 class="text-2xl font-bold">
330
+ <span class="cosmic-gradient">Cosmic AI</span>
331
+ </h1>
 
332
  </div>
333
+ <div class="hidden md:flex space-x-8">
334
+ <a href="#home" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">Home</a>
335
+ <a href="#features" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">Features</a>
336
+ <a href="#chat" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">Chat</a>
337
+ <a href="#about" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">About</a>
338
+ </div>
339
+ <div class="md:hidden">
340
+ <button id="menuToggle" class="text-cosmic">
341
+ <i class="fas fa-bars"></i>
342
  </button>
343
  </div>
344
+ </div>
345
+ <!-- Mobile Menu -->
346
+ <div id="mobileMenu" class="md:hidden hidden bg-cosmic absolute top-full left-0 w-full border-b border-cosmic">
347
+ <div class="container mx-auto py-4 px-6 flex flex-col space-y-4">
348
+ <a href="#home" class="text-cosmic-secondary">Home</a>
349
+ <a href="#features" class="text-cosmic-secondary">Features</a>
350
+ <a href="#chat" class="text-cosmic-secondary">Chat</a>
351
+ <a href="#about" class="text-cosmic-secondary">About</a>
352
+ </div>
353
+ </div>
354
+ </nav>
355
+
356
+ <!-- Hero Section -->
357
+ <section id="home" class="pt-24 pb-12">
358
+ <div class="container mx-auto px-6">
359
+ <div class="flex flex-col md:flex-row items-center">
360
+ <div class="md:w-1/2 mb-12 md:mb-0">
361
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
362
+ Explore the Universe of <span class="cosmic-gradient">Artificial Intelligence</span>
363
+ </h1>
364
+ <p class="text-lg text-cosmic-secondary mb-8">
365
+ Your cosmic companion for intelligent document analysis, image processing, and data visualization. Powered by advanced AI models for an out-of-this-world experience.
366
+ </p>
367
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
368
+ <a href="#features" class="cosmic-button py-3 px-8 rounded-lg text-center font-semibold">
369
+ Explore Features
370
+ </a>
371
+ <a href="#chat" class="bg-transparent border border-cosmic py-3 px-8 rounded-lg text-center text-cosmic hover:bg-cosmic hover:bg-opacity-20 transition-colors duration-300">
372
+ Start Chat
373
+ </a>
374
+ </div>
375
  </div>
376
+ <div class="md:w-1/2 flex justify-center">
377
+ <div class="relative">
378
+ <div class="planet"></div>
379
+ <div class="orbit w-[250px] h-[250px]"></div>
380
+ <div class="orbit w-[350px] h-[350px]"></div>
381
+ <div class="moon w-10 h-10 text-xs flex items-center justify-center text-cosmic">AI</div>
382
+ <div class="moon w-8 h-8 text-xs flex items-center justify-center text-cosmic" style="animation-delay: -5s">ML</div>
383
+ <div class="moon w-12 h-12 text-xs flex items-center justify-center text-cosmic" style="animation-delay: -10s">NLP</div>
384
+ </div>
385
  </div>
386
+ </div>
387
+ </div>
388
+ </section>
389
+
390
+ <!-- Features Section -->
391
+ <section id="features" class="py-16">
392
+ <div class="container mx-auto px-6">
393
+ <div class="text-center mb-16">
394
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
395
+ <span class="cosmic-gradient">Stellar Capabilities</span>
396
+ </h2>
397
+ <p class="text-cosmic-secondary max-w-2xl mx-auto">
398
+ Harness the power of advanced AI models for a variety of tasks, from understanding documents to analyzing images and visualizing data.
399
+ </p>
400
+ </div>
401
+
402
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
403
+ <!-- Text Summary Card -->
404
+ <div class="cosmic-card p-6 feature-transition">
405
+ <div class="text-center mb-6">
406
+ <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4">
407
+ <i class="fas fa-file-alt text-4xl feature-icon text-purple-400"></i>
408
+ </div>
409
+ <h3 class="text-xl font-bold mb-2">Text Summary</h3>
410
+ <p class="text-cosmic-secondary">
411
+ Automatically summarize documents, articles, or long texts with AI precision.
412
+ </p>
413
+ </div>
414
+ <button class="cosmic-button w-full py-2 rounded-lg">Try It</button>
415
+ </div>
416
+
417
+ <!-- Image Description Card -->
418
+ <div class="cosmic-card p-6 feature-transition">
419
+ <div class="text-center mb-6">
420
+ <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4">
421
+ <i class="fas fa-image text-4xl feature-icon text-blue-400"></i>
422
+ </div>
423
+ <h3 class="text-xl font-bold mb-2">Image Description</h3>
424
+ <p class="text-cosmic-secondary">
425
+ Generate detailed descriptions from images using advanced vision models.
426
+ </p>
427
+ </div>
428
+ <button class="cosmic-button w-full py-2 rounded-lg">Try It</button>
429
+ </div>
430
+
431
+ <!-- Question Answering Card -->
432
+ <div class="cosmic-card p-6 feature-transition">
433
+ <div class="text-center mb-6">
434
+ <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4">
435
+ <i class="fas fa-question-circle text-4xl feature-icon text-pink-400"></i>
436
+ </div>
437
+ <h3 class="text-xl font-bold mb-2">Question Answering</h3>
438
+ <p class="text-cosmic-secondary">
439
+ Get precise answers to your questions using contextual understanding.
440
+ </p>
441
+ </div>
442
+ <button class="cosmic-button w-full py-2 rounded-lg">Try It</button>
443
  </div>
444
+
445
+ <!-- Visual Q&A Card -->
446
+ <div class="cosmic-card p-6 feature-transition">
447
+ <div class="text-center mb-6">
448
+ <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4">
449
+ <i class="fas fa-eye text-4xl feature-icon text-green-400"></i>
450
+ </div>
451
+ <h3 class="text-xl font-bold mb-2">Visual Q&A</h3>
452
+ <p class="text-cosmic-secondary">
453
+ Ask questions about image content and get intelligent responses.
454
+ </p>
455
+ </div>
456
+ <button class="cosmic-button w-full py-2 rounded-lg">Try It</button>
457
  </div>
458
+
459
+ <!-- Data Visualization Card -->
460
+ <div class="cosmic-card p-6 feature-transition">
461
+ <div class="text-center mb-6">
462
+ <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4">
463
+ <i class="fas fa-chart-bar text-4xl feature-icon text-yellow-400"></i>
464
+ </div>
465
+ <h3 class="text-xl font-bold mb-2">Data Visualization</h3>
466
+ <p class="text-cosmic-secondary">
467
+ Generate code to visualize your Excel data in beautiful charts.
468
+ </p>
469
+ </div>
470
+ <button class="cosmic-button w-full py-2 rounded-lg">Try It</button>
471
  </div>
472
+
473
+ <!-- Translation Card -->
474
+ <div class="cosmic-card p-6 feature-transition">
475
+ <div class="text-center mb-6">
476
+ <div class="inline-block p-4 rounded-full bg-opacity-20 bg-cosmic mb-4">
477
+ <i class="fas fa-language text-4xl feature-icon text-red-400"></i>
478
+ </div>
479
+ <h3 class="text-xl font-bold mb-2">Translation</h3>
480
+ <p class="text-cosmic-secondary">
481
+ Translate text to different languages with high accuracy.
482
+ </p>
483
+ </div>
484
+ <button class="cosmic-button w-full py-2 rounded-lg">Try It</button>
485
  </div>
486
  </div>
487
  </div>
488
+ </section>
489
+
490
+ <!-- Chat Interface Section -->
491
+ <section id="chat" class="py-16">
492
+ <div class="container mx-auto px-6">
493
+ <div class="text-center mb-12">
494
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
495
+ <span class="cosmic-gradient">Cosmic Conversation</span>
496
+ </h2>
497
+ <p class="text-cosmic-secondary max-w-2xl mx-auto">
498
+ Chat with our AI assistant to explore all features or ask any questions you have.
499
+ </p>
500
+ </div>
501
+
502
+ <div class="max-w-4xl mx-auto">
503
+ <div class="cosmic-card p-4 h-[500px] flex flex-col">
504
+ <!-- Chat Messages -->
505
+ <div class="flex-1 overflow-y-auto p-4 flex flex-col space-y-4" id="chatMessages">
506
+ <div class="message bot-message">
507
+ <p>Hello! I'm your Cosmic AI Assistant. Upload a file or ask a question, and I can:</p>
508
+ <ul class="list-disc pl-5 mt-2">
509
+ <li>Summarize documents</li>
510
+ <li>Describe images</li>
511
+ <li>Answer your questions</li>
512
+ <li>Translate text</li>
513
+ <li>Generate visualization code</li>
514
+ </ul>
515
+ </div>
516
+ </div>
517
+
518
+ <!-- File Upload Area -->
519
+ <div class="cosmic-upload__dropzone rounded-lg mx-4 mb-4 p-4" id="fileDropzone">
520
+ <div class="text-center">
521
+ <i class="fas fa-cloud-upload-alt text-3xl text-purple-400 mb-2"></i>
522
+ <p class="text-cosmic">Drag files here or click to upload</p>
523
+ <p class="text-cosmic-secondary text-sm">Supports documents, images, and Excel files</p>
524
+ <input type="file" id="fileInput" class="hidden" multiple />
525
+ </div>
526
+ </div>
527
+ <div id="filePreviewArea" class="hidden flex flex-wrap gap-2 mx-4 mb-4"></div>
528
+
529
+ <!-- Chat Input -->
530
+ <div class="p-4 flex space-x-3">
531
+ <input type="text" id="chatInput" class="cosmic-input flex-1 rounded-lg px-4 py-3" placeholder="Type your message here...">
532
+ <button id="sendButton" class="cosmic-button rounded-lg px-6">
533
+ <i class="fas fa-paper-plane"></i>
534
+ </button>
535
  </div>
 
 
536
  </div>
537
  </div>
538
+ </div>
539
+ </section>
540
+
541
+ <!-- About Section -->
542
+ <section id="about" class="py-16">
543
+ <div class="container mx-auto px-6">
544
+ <div class="text-center mb-12">
545
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
546
+ <span class="cosmic-gradient">About Cosmic AI</span>
547
+ </h2>
548
+ <p class="text-cosmic-secondary max-w-2xl mx-auto">
549
+ Powered by cutting-edge AI models and designed with a cosmic aesthetic for an otherworldly experience.
550
+ </p>
551
+ </div>
552
 
553
+ <div class="max-w-4xl mx-auto cosmic-card p-8">
554
+ <p class="text-cosmic-secondary mb-6">
555
+ Cosmic AI combines multiple AI capabilities into a single, intuitive interface. Our system leverages advanced models to deliver high-quality results for a variety of tasks:
556
+ </p>
 
 
 
 
 
557
 
558
+ <div class="space-y-4">
559
+ <div class="flex items-start">
560
+ <div class="mr-4 mt-1">
561
+ <i class="fas fa-robot text-purple-400"></i>
562
+ </div>
563
+ <div>
564
+ <h3 class="font-bold text-cosmic">Advanced Models</h3>
565
+ <p class="text-cosmic-secondary">Powered by state-of-the-art AI models including BART for summarization, BLIP for image captioning, and Gemini for conversation.</p>
566
+ </div>
567
+ </div>
568
+
569
+ <div class="flex items-start">
570
+ <div class="mr-4 mt-1">
571
+ <i class="fas fa-brain text-purple-400"></i>
572
+ </div>
573
+ <div>
574
+ <h3 class="font-bold text-cosmic">Intelligent Processing</h3>
575
+ <p class="text-cosmic-secondary">Our system automatically detects your intent and selects the most appropriate model for each task.</p>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="flex items-start">
580
+ <div class="mr-4 mt-1">
581
+ <i class="fas fa-shield-alt text-purple-400"></i>
582
+ </div>
583
+ <div>
584
+ <h3 class="font-bold text-cosmic">Privacy-Focused</h3>
585
+ <p class="text-cosmic-secondary">Your data is processed securely and not stored beyond the current session unless explicitly specified.</p>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="flex items-start">
590
+ <div class="mr-4 mt-1">
591
+ <i class="fas fa-expand-arrows-alt text-purple-400"></i>
592
+ </div>
593
+ <div>
594
+ <h3 class="font-bold text-cosmic">Continuously Evolving</h3>
595
+ <p class="text-cosmic-secondary">We're constantly improving our models and adding new capabilities to expand what's possible.</p>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </section>
602
+
603
+ <!-- Footer -->
604
+ <footer class="py-8 border-t border-cosmic">
605
+ <div class="container mx-auto px-6">
606
+ <div class="flex flex-col md:flex-row justify-between items-center">
607
+ <div class="mb-6 md:mb-0">
608
+ <h2 class="text-xl font-bold">
609
+ <span class="cosmic-gradient">Cosmic AI</span>
610
+ </h2>
611
+ <p class="text-cosmic-secondary mt-2">Your AI companion for the digital universe</p>
612
+ </div>
613
 
614
+ <div class="flex space-x-4">
615
+ <a href="#" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">
616
+ <i class="fab fa-github"></i>
617
+ </a>
618
+ <a href="#" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">
619
+ <i class="fab fa-twitter"></i>
620
+ </a>
621
+ <a href="#" class="text-cosmic-secondary hover:text-cosmic transition-colors duration-300">
622
+ <i class="fab fa-linkedin"></i>
623
+ </a>
624
+ </div>
625
+ </div>
626
+
627
+ <div class="mt-8 text-center text-cosmic-secondary text-sm">
628
+ <p>© 2023 Cosmic AI. All rights reserved.</p>
629
+ <p class="mt-2">Powered by advanced AI models and cosmic inspiration.</p>
630
  </div>
631
  </div>
632
+ </footer>
633
+
634
+ <script>
635
+ document.addEventListener('DOMContentLoaded', function() {
636
+ // Mobile Menu Toggle
637
+ const menuToggle = document.getElementById('menuToggle');
638
+ const mobileMenu = document.getElementById('mobileMenu');
639
+
640
+ menuToggle.addEventListener('click', function() {
641
+ mobileMenu.classList.toggle('hidden');
642
+ });
643
+
644
+ // Stars Background
645
+ function createStars() {
646
+ const starsContainer = document.getElementById('starsContainer');
647
+ starsContainer.innerHTML = '';
648
+
649
+ const starCount = Math.min(300, window.innerWidth * 0.15);
650
+
651
+ for (let i = 0; i < starCount; i++) {
652
+ const star = document.createElement('div');
653
+ star.classList.add('star');
654
+
655
+ // Random positioning
656
+ const x = Math.random() * 100;
657
+ const y = Math.random() * 100;
658
+ const delay = Math.random() * 5;
659
+ const size = Math.random() * 2 + 1;
660
+
661
+ star.style.left = `${x}%`;
662
+ star.style.top = `${y}%`;
663
+ star.style.width = `${size}px`;
664
+ star.style.height = `${size}px`;
665
+ star.style.animationDelay = `${delay}s`;
666
+
667
+ starsContainer.appendChild(star);
668
+ }
669
+ }
670
+
671
+ // Particles System
672
+ function initParticles() {
673
+ const canvas = document.getElementById('particlesCanvas');
674
+ canvas.width = window.innerWidth;
675
+ canvas.height = window.innerHeight;
676
+ const ctx = canvas.getContext('2d');
677
+
678
+ const particles = [];
679
+ const particleCount = Math.min(100, window.innerWidth * 0.05);
680
+
681
+ class Particle {
682
+ constructor() {
683
+ this.x = Math.random() * canvas.width;
684
+ this.y = Math.random() * canvas.height;
685
+ this.size = Math.random() * 1.5 + 0.5;
686
+ this.speedX = Math.random() * 0.5 - 0.25;
687
+ this.speedY = Math.random() * 0.5 - 0.25;
688
+ this.color = this.getRandomColor();
689
+ }
690
+
691
+ getRandomColor() {
692
+ const colors = [
693
+ 'rgba(123, 44, 191, 0.8)', // Purple
694
+ 'rgba(199, 125, 255, 0.8)', // Light purple
695
+ 'rgba(0, 180, 216, 0.8)', // Cyan
696
+ 'rgba(67, 97, 238, 0.8)', // Blue
697
+ 'rgba(255, 255, 255, 0.8)' // White
698
+ ];
699
+ return colors[Math.floor(Math.random() * colors.length)];
700
+ }
701
+
702
+ update() {
703
+ this.x += this.speedX;
704
+ this.y += this.speedY;
705
+
706
+ // Wrap around edges
707
+ if (this.x > canvas.width) this.x = 0;
708
+ if (this.x < 0) this.x = canvas.width;
709
+ if (this.y > canvas.height) this.y = 0;
710
+ if (this.y < 0) this.y = canvas.height;
711
+ }
712
+
713
+ draw() {
714
+ ctx.fillStyle = this.color;
715
+ ctx.beginPath();
716
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
717
+ ctx.fill();
718
+ }
719
+ }
720
+
721
+ for (let i = 0; i < particleCount; i++) {
722
+ particles.push(new Particle());
723
+ }
724
+
725
+ function animate() {
726
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
727
+
728
+ // Draw connections between nearby particles
729
+ ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
730
+ ctx.lineWidth = 0.5;
731
+
732
+ for (let i = 0; i < particles.length; i++) {
733
+ for (let j = i; j < particles.length; j++) {
734
+ const dx = particles[i].x - particles[j].x;
735
+ const dy = particles[i].y - particles[j].y;
736
+ const distance = Math.sqrt(dx * dx + dy * dy);
737
+
738
+ if (distance < 100) {
739
+ ctx.beginPath();
740
+ ctx.moveTo(particles[i].x, particles[i].y);
741
+ ctx.lineTo(particles[j].x, particles[j].y);
742
+ ctx.stroke();
743
+ }
744
+ }
745
+ }
746
+
747
+ // Update and draw particles
748
+ particles.forEach(particle => {
749
+ particle.update();
750
+ particle.draw();
751
+ });
752
+
753
+ requestAnimationFrame(animate);
754
+ }
755
+
756
+ animate();
757
+ }
758
+
759
+ // Feature reveal animation
760
+ function revealFeatures() {
761
+ const features = document.querySelectorAll('.feature-transition');
762
+
763
+ features.forEach((feature, index) => {
764
+ // Add delay based on index
765
+ setTimeout(() => {
766
+ feature.classList.add('active');
767
+ }, index * 150);
768
+ });
769
+ }
770
+
771
+ // Chat Interface
772
+ const chatInput = document.getElementById('chatInput');
773
+ const sendButton = document.getElementById('sendButton');
774
+ const chatMessages = document.getElementById('chatMessages');
775
+
776
+ function addMessage(text, isUser = false) {
777
+ const messageDiv = document.createElement('div');
778
+ messageDiv.classList.add('message');
779
+ messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
780
+ messageDiv.textContent = text;
781
+
782
+ chatMessages.appendChild(messageDiv);
783
+ chatMessages.scrollTop = chatMessages.scrollHeight;
784
+ }
785
+
786
+ function handleUserMessage() {
787
+ const message = chatInput.value.trim();
788
+ if (message === '') return;
789
+
790
+ addMessage(message, true);
791
+ chatInput.value = '';
792
+
793
+ // Simulate AI response
794
+ setTimeout(() => {
795
+ let response;
796
+ if (message.toLowerCase().includes('help')) {
797
+ response = "I can help with document summarization, image description, question answering, translation, and data visualization. What would you like to know?";
798
+ } else if (message.toLowerCase().includes('summarize')) {
799
+ response = "To summarize a document, simply upload it using the upload area or drag and drop. I'll analyze it and provide a concise summary.";
800
+ } else if (message.toLowerCase().includes('translate')) {
801
+ response = "I can translate text to various languages. Just tell me what you want to translate and the target language.";
802
+ } else if (message.toLowerCase().includes('image') || message.toLowerCase().includes('picture')) {
803
+ response = "For image description or visual Q&A, upload an image and I'll analyze it for you.";
804
+ } else {
805
+ response = "I'm your Cosmic AI Assistant. I can help with various tasks including summarization, image analysis, and answering questions. What would you like me to do?";
806
+ }
807
+ addMessage(response);
808
+ }, 1000);
809
+ }
810
+
811
+ sendButton.addEventListener('click', handleUserMessage);
812
+ chatInput.addEventListener('keypress', function(e) {
813
+ if (e.key === 'Enter') {
814
+ handleUserMessage();
815
+ }
816
+ });
817
+
818
+ // File Upload Handling
819
+ const dropzone = document.getElementById('fileDropzone');
820
+ const fileInput = document.getElementById('fileInput');
821
+ const previewArea = document.getElementById('filePreviewArea');
822
+
823
+ dropzone.addEventListener('click', () => {
824
+ fileInput.click();
825
+ });
826
+
827
+ dropzone.addEventListener('dragover', (e) => {
828
+ e.preventDefault();
829
+ dropzone.classList.add('active');
830
+ });
831
+
832
+ dropzone.addEventListener('dragleave', () => {
833
+ dropzone.classList.remove('active');
834
+ });
835
+
836
+ dropzone.addEventListener('drop', (e) => {
837
+ e.preventDefault();
838
+ dropzone.classList.remove('active');
839
+
840
+ if (e.dataTransfer.files.length) {
841
+ handleFiles(e.dataTransfer.files);
842
+ }
843
+ });
844
+
845
+ fileInput.addEventListener('change', () => {
846
+ if (fileInput.files.length) {
847
+ handleFiles(fileInput.files);
848
+ }
849
+ });
850
+
851
+ function handleFiles(files) {
852
+ previewArea.innerHTML = '';
853
+ previewArea.classList.remove('hidden');
854
+
855
+ Array.from(files).forEach(file => {
856
+ const fileElement = document.createElement('div');
857
+ fileElement.className = 'cosmic-card p-2 flex items-center space-x-2';
858
+
859
+ let iconClass = 'fas fa-file';
860
+ if (file.type.startsWith('image/')) {
861
+ iconClass = 'fas fa-image';
862
+ } else if (file.type.includes('pdf')) {
863
+ iconClass = 'fas fa-file-pdf';
864
+ } else if (file.type.includes('word') || file.type.includes('document')) {
865
+ iconClass = 'fas fa-file-word';
866
+ } else if (file.type.includes('excel') || file.type.includes('sheet')) {
867
+ iconClass = 'fas fa-file-excel';
868
+ }
869
+
870
+ const fileSize = (file.size / 1024).toFixed(1) + ' KB';
871
+
872
+ fileElement.innerHTML = `
873
+ <div class="text-purple-400">
874
+ <i class="${iconClass}"></i>
875
+ </div>
876
+ <div class="flex-1 overflow-hidden">
877
+ <div class="truncate text-sm text-cosmic">${file.name}</div>
878
+ <div class="text-xs text-cosmic-secondary">${fileSize}</div>
879
+ </div>
880
+ <button class="text-cosmic-secondary hover:text-red-400 transition-colors duration-300 file-remove">
881
+ <i class="fas fa-times"></i>
882
+ </button>
883
+ `;
884
+
885
+ const removeButton = fileElement.querySelector('.file-remove');
886
+ removeButton.addEventListener('click', (e) => {
887
+ e.stopPropagation();
888
+ fileElement.remove();
889
+ if (previewArea.children.length === 0) {
890
+ previewArea.classList.add('hidden');
891
+ }
892
+ });
893
+
894
+ previewArea.appendChild(fileElement);
895
+ });
896
+
897
+ // Simulate processing response
898
+ addMessage(`I've received ${files.length} file(s). How would you like me to process them?`);
899
+ }
900
+
901
+ // Initialize everything
902
+ createStars();
903
+ initParticles();
904
+ revealFeatures();
905
+
906
+ // Handle window resize
907
+ window.addEventListener('resize', () => {
908
+ createStars();
909
+
910
+ const canvas = document.getElementById('particlesCanvas');
911
+ canvas.width = window.innerWidth;
912
+ canvas.height = window.innerHeight;
913
+ initParticles();
914
+ });
915
+ });
916
+ </script>
917
  </body>
918
+ </html>