Hugging Face's logo

Spaces:
asd1asd1
/
deepchat-explorer
Running

App Files Community
asd1asd1 commited on
Commit
fd72e7e
·
verified ·
1 Parent(s): 3593b68

es muy basica debe ser mas potente trata de igual y mejorar a grok

Browse files
Files changed (4) hide show
  1. analytics.html +349 -0
  2. components/navbar.js +84 -22
  3. index.html +224 -157
  4. style.css +199 -12
analytics.html ADDED
@@ -0,0 +1,349 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Analytics | DeepChat Explorer</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ </head>
13
+ <body class="bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 min-h-screen">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <div class="container mx-auto px-4 py-8">
17
+ <!-- Header -->
18
+ <div class="text-center mb-12">
19
+ <h1 class="text-4xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent mb-4">
20
+ Research Analytics
21
+ </h1>
22
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
23
+ Advanced insights and performance metrics for your AI research activities
24
+ </p>
25
+ </div>
26
+
27
+ <!-- Analytics Dashboard -->
28
+ <div class="max-w-7xl mx-auto space-y-8">
29
+ <!-- Stats Overview -->
30
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
31
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
32
+ <div class="flex items-center justify-between">
33
+ <div>
34
+ <p class="text-gray-400 text-sm">Total Research</p>
35
+ <p class="text-3xl font-bold text-white">1,247</p>
36
+ </div>
37
+ <div class="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
38
+ <i data-feather="search" class="text-purple-400"></i>
39
+ </div>
40
+ </div>
41
+ <div class="mt-4">
42
+ <span class="text-green-400 text-sm flex items-center">
43
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
44
+ +12% this week
45
+ </span>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
50
+ <div class="flex items-center justify-between">
51
+ <div>
52
+ <p class="text-gray-400 text-sm">Sources Analyzed</p>
53
+ <p class="text-3xl font-bold text-white">8,932</p>
54
+ </div>
55
+ <div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
56
+ <i data-feather="database" class="text-blue-400"></i>
57
+ </div>
58
+ </div>
59
+ <div class="mt-4">
60
+ <span class="text-green-400 text-sm flex items-center">
61
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
62
+ +23% this week
63
+ </span>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
68
+ <div class="flex items-center justify-between">
69
+ <div>
70
+ <p class="text-gray-400 text-sm">AI Accuracy</p>
71
+ <p class="text-3xl font-bold text-white">94.7%</p>
72
+ </div>
73
+ <div class="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
74
+ <i data-feather="check-circle" class="text-green-400"></i>
75
+ </div>
76
+ </div>
77
+ <div class="mt-4">
78
+ <span class="text-green-400 text-sm flex items-center">
79
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
80
+ +2.3% this week
81
+ </span>
82
+ </div>
83
+ </div>
84
+
85
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
86
+ <div class="flex items-center justify-between">
87
+ <div>
88
+ <p class="text-gray-400 text-sm">Response Time</p>
89
+ <p class="text-3xl font-bold text-white">1.2s</p>
90
+ </div>
91
+ <div class="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center">
92
+ <i data-feather="clock" class="text-yellow-400"></i>
93
+ </div>
94
+ </div>
95
+ <div class="mt-4">
96
+ <span class="text-green-400 text-sm flex items-center">
97
+ <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>
98
+ -0.3s this week
99
+ </span>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Charts Grid -->
105
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
106
+ <!-- Research Activity Chart -->
107
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
108
+ <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
109
+ <i data-feather="activity" class="mr-2 text-purple-400"></i>
110
+ Research Activity (Last 30 Days)
111
+ </h3>
112
+ <canvas id="activityChart" height="300"></canvas>
113
+ </div>
114
+
115
+ <!-- Topic Distribution -->
116
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
117
+ <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
118
+ <i data-feather="pie-chart" class="mr-2 text-blue-400"></i>
119
+ Topic Distribution
120
+ </h3>
121
+ <canvas id="topicChart" height="300"></canvas>
122
+ </div>
123
+
124
+ <!-- Source Quality -->
125
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
126
+ <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
127
+ <i data-feather="bar-chart" class="mr-2 text-green-400"></i>
128
+ Source Quality Analysis
129
+ </h3>
130
+ <canvas id="qualityChart" height="300"></canvas>
131
+ </div>
132
+
133
+ <!-- Performance Metrics -->
134
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
135
+ <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
136
+ <i data-feather="target" class="mr-2 text-yellow-400"></i>
137
+ AI Performance Metrics
138
+ </h3>
139
+ <canvas id="performanceChart" height="300"></canvas>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Recent Research Table -->
144
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl border border-gray-700 overflow-hidden">
145
+ <div class="px-6 py-4 border-b border-gray-700">
146
+ <h3 class="text-lg font-semibold text-white flex items-center">
147
+ <i data-feather="list" class="mr-2 text-purple-400"></i>
148
+ Recent Research Sessions
149
+ </h3>
150
+ </div>
151
+ <div class="overflow-x-auto">
152
+ <table class="w-full">
153
+ <thead>
154
+ <tr class="bg-gray-700/50">
155
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Topic</th>
156
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Sources</th>
157
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Duration</th>
158
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Accuracy</th>
159
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Date</th>
160
+ </tr>
161
+ </thead>
162
+ <tbody class="divide-y divide-gray-700">
163
+ <tr class="hover:bg-gray-700/30 transition-colors">
164
+ <td class="px-6 py-4 whitespace-nowrap">
165
+ <div class="text-sm font-medium text-white">Quantum Computing</div>
166
+ <div class="text-sm text-gray-400">Advanced algorithms</div>
167
+ </td>
168
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">47 sources</td>
169
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2.3 minutes</td>
170
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">96.2%</td>
171
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2 hours ago</td>
172
+ </tr>
173
+ <tr class="hover:bg-gray-700/30 transition-colors">
174
+ <td class="px-6 py-4 whitespace-nowrap">
175
+ <div class="text-sm font-medium text-white">AI in Healthcare</div>
176
+ <div class="text-sm text-gray-400">Diagnostic tools</div>
177
+ </td>
178
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">32 sources</td>
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.8 minutes</td>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">94.7%</td>
181
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">5 hours ago</td>
182
+ </tr>
183
+ <tr class="hover:bg-gray-700/30 transition-colors">
184
+ <td class="px-6 py-4 whitespace-nowrap">
185
+ <div class="text-sm font-medium text-white">Blockchain Security</div>
186
+ <div class="text-sm text-gray-400">Encryption methods</div>
187
+ </td>
188
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">28 sources</td>
189
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">3.1 minutes</td>
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-400">89.3%</td>
191
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1 day ago</td>
192
+ </tr>
193
+ </tbody>
194
+ </table>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <custom-footer></custom-footer>
201
+
202
+ <script src="components/navbar.js"></script>
203
+ <script src="components/footer.js"></script>
204
+ <script src="script.js"></script>
205
+ <script>
206
+ feather.replace();
207
+
208
+ // Initialize Charts
209
+ document.addEventListener('DOMContentLoaded', function() {
210
+ // Activity Chart
211
+ const activityCtx = document.getElementById('activityChart').getContext('2d');
212
+ new Chart(activityCtx, {
213
+ type: 'line',
214
+ data: {
215
+ labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'],
216
+ datasets: [{
217
+ label: 'Research Sessions',
218
+ data: [45, 52, 38, 61, 55, 68, 72],
219
+ borderColor: '#8b5cf6',
220
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
221
+ tension: 0.4,
222
+ fill: true
223
+ }]
224
+ },
225
+ options: {
226
+ responsive: true,
227
+ plugins: {
228
+ legend: {
229
+ labels: { color: '#e5e7eb' }
230
+ }
231
+ },
232
+ scales: {
233
+ y: {
234
+ beginAtZero: true,
235
+ grid: { color: 'rgba(255,255,255,0.1)' },
236
+ ticks: { color: '#9ca3af' }
237
+ },
238
+ x: {
239
+ grid: { color: 'rgba(255,255,255,0.1)' },
240
+ ticks: { color: '#9ca3af' }
241
+ }
242
+ }
243
+ }
244
+ });
245
+
246
+ // Topic Distribution Chart
247
+ const topicCtx = document.getElementById('topicChart').getContext('2d');
248
+ new Chart(topicCtx, {
249
+ type: 'doughnut',
250
+ data: {
251
+ labels: ['Technology', 'Science', 'Healthcare', 'Business', 'Other'],
252
+ datasets: [{
253
+ data: [35, 25, 20, 15, 5],
254
+ backgroundColor: [
255
+ '#8b5cf6',
256
+ '#3b82f6',
257
+ '#10b981',
258
+ '#f59e0b',
259
+ '#6b7280'
260
+ ]
261
+ }]
262
+ },
263
+ options: {
264
+ responsive: true,
265
+ plugins: {
266
+ legend: {
267
+ labels: { color: '#e5e7eb' }
268
+ }
269
+ }
270
+ }
271
+ });
272
+
273
+ // Quality Chart
274
+ const qualityCtx = document.getElementById('qualityChart').getContext('2d');
275
+ new Chart(qualityCtx, {
276
+ type: 'bar',
277
+ data: {
278
+ labels: ['Academic', 'News', 'Research', 'Government', 'Industry'],
279
+ datasets: [{
280
+ label: 'Quality Score',
281
+ data: [92, 85, 88, 90, 87],
282
+ backgroundColor: '#10b981'
283
+ }]
284
+ },
285
+ options: {
286
+ responsive: true,
287
+ plugins: {
288
+ legend: {
289
+ labels: { color: '#e5e7eb' }
290
+ }
291
+ },
292
+ scales: {
293
+ y: {
294
+ beginAtZero: true,
295
+ max: 100,
296
+ grid: { color: 'rgba(255,255,255,0.1)' },
297
+ ticks: { color: '#9ca3af' }
298
+ },
299
+ x: {
300
+ grid: { color: 'rgba(255,255,255,0.1)' },
301
+ ticks: { color: '#9ca3af' }
302
+ }
303
+ }
304
+ }
305
+ });
306
+
307
+ // Performance Chart
308
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
309
+ new Chart(performanceCtx, {
310
+ type: 'radar',
311
+ data: {
312
+ labels: ['Accuracy', 'Speed', 'Depth', 'Relevance', 'Completeness'],
313
+ datasets: [{
314
+ label: 'Current Week',
315
+ data: [94, 88, 92, 90, 86],
316
+ fill: true,
317
+ backgroundColor: 'rgba(139, 92, 246, 0.2)',
318
+ borderColor: '#8b5cf6',
319
+ pointBackgroundColor: '#8b5cf6'
320
+ }, {
321
+ label: 'Previous Week',
322
+ data: [91, 85, 89, 87, 82],
323
+ fill: true,
324
+ backgroundColor: 'rgba(59, 130, 246, 0.2)',
325
+ borderColor: '#3b82f6',
326
+ pointBackgroundColor: '#3b82f6'
327
+ }]
328
+ },
329
+ options: {
330
+ responsive: true,
331
+ plugins: {
332
+ legend: {
333
+ labels: { color: '#e5e7eb' }
334
+ }
335
+ },
336
+ scales: {
337
+ r: {
338
+ angleLines: { color: 'rgba(255,255,255,0.1)' },
339
+ grid: { color: 'rgba(255,255,255,0.1)' },
340
+ pointLabels: { color: '#9ca3af' },
341
+ ticks: { color: '#9ca3af', backdropColor: 'transparent' }
342
+ }
343
+ }
344
+ }
345
+ });
346
+ });
347
+ </script>
348
+ </body>
349
+ </html>
components/navbar.js CHANGED
@@ -1,23 +1,36 @@
 
1
  class CustomNavbar extends HTMLElement {
2
  connectedCallback() {
3
  this.attachShadow({ mode: 'open' });
4
  this.shadowRoot.innerHTML = `
5
  <style>
6
  nav {
7
- background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
8
  padding: 1rem 2rem;
9
  display: flex;
10
  justify-content: space-between;
11
  align-items: center;
12
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 
 
13
  }
14
  .logo {
15
  color: white;
16
  font-weight: bold;
17
- font-size: 1.25rem;
18
  display: flex;
19
  align-items: center;
20
- gap: 0.5rem;
 
 
 
 
 
 
 
 
 
 
21
  }
22
  ul {
23
  display: flex;
@@ -27,43 +40,92 @@ class CustomNavbar extends HTMLElement {
27
  padding: 0;
28
  }
29
  a {
30
- color: white;
31
  text-decoration: none;
32
- transition: all 0.2s;
33
  font-weight: 500;
34
- padding: 0.5rem 1rem;
35
- border-radius: 0.375rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
  a:hover {
38
  background: rgba(255, 255, 255, 0.1);
 
 
 
39
  }
40
- @media (max-width: 640px) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  nav {
 
 
 
42
  flex-direction: column;
43
  gap: 1rem;
44
- padding: 1rem;
45
  }
46
  ul {
47
- width: 100%;
48
- justify-content: space-around;
49
  }
50
  a {
51
- padding: 0.5rem;
 
52
  }
53
  }
54
  </style>
55
  <nav>
56
- <div class="logo">
57
- <i data-feather="compass"></i>
58
- <span>DeepChat Explorer</span>
 
 
 
 
 
 
 
 
 
 
 
 
59
  </div>
60
- <ul>
61
- <li><a href="/">Home</a></li>
62
- <li><a href="/research.html">Research</a></li>
63
- <li><a href="/settings.html">Settings</a></li>
64
- </ul>
65
  </nav>
66
  `;
67
  }
68
  }
69
- customElements.define('custom-navbar', CustomNavbar);
 
1
+
2
  class CustomNavbar extends HTMLElement {
3
  connectedCallback() {
4
  this.attachShadow({ mode: 'open' });
5
  this.shadowRoot.innerHTML = `
6
  <style>
7
  nav {
8
+ background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 50%, #5b21b6 100%);
9
  padding: 1rem 2rem;
10
  display: flex;
11
  justify-content: space-between;
12
  align-items: center;
13
+ box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
14
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
15
+ backdrop-filter: blur(10px);
16
  }
17
  .logo {
18
  color: white;
19
  font-weight: bold;
20
+ font-size: 1.5rem;
21
  display: flex;
22
  align-items: center;
23
+ gap: 0.75rem;
24
+ background: linear-gradient(45deg, #f0abfc, #a5b4fc);
25
+ -webkit-background-clip: text;
26
+ -webkit-text-fill-color: transparent;
27
+ }
28
+ .nav-content {
29
+ display: flex;
30
+ align-items: center;
31
+ gap: 2rem;
32
+ width: 100%;
33
+ justify-content: space-between;
34
  }
35
  ul {
36
  display: flex;
 
40
  padding: 0;
41
  }
42
  a {
43
+ color: #e0e7ff;
44
  text-decoration: none;
45
+ transition: all 0.3s ease;
46
  font-weight: 500;
47
+ padding: 0.75rem 1.5rem;
48
+ border-radius: 0.75rem;
49
+ position: relative;
50
+ overflow: hidden;
51
+ }
52
+ a::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: 0;
56
+ left: -100%;
57
+ width: 100%;
58
+ height: 100%;
59
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
60
+ transition: left 0.5s;
61
+ }
62
+ a:hover::before {
63
+ left: 100%;
64
  }
65
  a:hover {
66
  background: rgba(255, 255, 255, 0.1);
67
+ color: white;
68
+ transform: translateY(-2px);
69
+ box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
70
  }
71
+ .status-indicator {
72
+ display: flex;
73
+ align-items: center;
74
+ gap: 0.5rem;
75
+ background: rgba(34, 197, 94, 0.2);
76
+ padding: 0.5rem 1rem;
77
+ border-radius: 2rem;
78
+ border: 1px solid rgba(34, 197, 94, 0.3);
79
+ }
80
+ .status-dot {
81
+ width: 8px;
82
+ height: 8px;
83
+ background: #22c55e;
84
+ border-radius: 50%;
85
+ animation: pulse 2s infinite;
86
+ }
87
+ @keyframes pulse {
88
+ 0% { opacity: 1; }
89
+ 50% { opacity: 0.5; }
90
+ 100% { opacity: 1; }
91
+ }
92
+ @media (max-width: 768px) {
93
  nav {
94
+ padding: 1rem;
95
+ }
96
+ .nav-content {
97
  flex-direction: column;
98
  gap: 1rem;
 
99
  }
100
  ul {
101
+ flex-wrap: wrap;
102
+ justify-content: center;
103
  }
104
  a {
105
+ padding: 0.5rem 1rem;
106
+ font-size: 0.9rem;
107
  }
108
  }
109
  </style>
110
  <nav>
111
+ <div class="nav-content">
112
+ <div class="logo">
113
+ <i data-feather="brain"></i>
114
+ <span>DeepChat Explorer</span>
115
+ </div>
116
+ <ul>
117
+ <li><a href="/">Home</a></li>
118
+ <li><a href="/research.html">Research Hub</a></li>
119
+ <li><a href="/analytics.html">Analytics</a></li>
120
+ <li><a href="/settings.html">Settings</a></li>
121
+ </ul>
122
+ <div class="status-indicator">
123
+ <div class="status-dot"></div>
124
+ <span class="text-green-300 text-sm font-medium">AI Online</span>
125
+ </div>
126
  </div>
 
 
 
 
 
127
  </nav>
128
  `;
129
  }
130
  }
131
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -13,50 +13,60 @@
13
  <body class="bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 min-h-screen">
14
  <custom-navbar></custom-navbar>
15
 
16
- <!-- Main Content -->
17
- <div class="flex-1 container mx-auto px-4 py-8">
 
 
 
 
 
 
 
 
 
 
18
  <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-6">
19
- <!-- Sidebar -->
20
  <div class="lg:col-span-1 space-y-6">
21
  <!-- Quick Actions -->
22
- <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-4 border border-gray-700">
23
- <h3 class="text-white font-semibold mb-3 flex items-center">
24
- <i data-feather="zap" class="w-4 h-4 mr-2 text-yellow-400"></i>
25
  Quick Actions
26
  </h3>
27
- <div class="space-y-2">
28
- <button class="w-full text-left p-2 rounded-lg bg-gray-700/50 hover:bg-gray-600/50 text-white text-sm transition-all duration-200 flex items-center">
29
- <i data-feather="search" class="w-4 h-4 mr-2"></i>
30
- Research Topic
31
  </button>
32
- <button class="w-full text-left p-2 rounded-lg bg-gray-700/50 hover:bg-gray-600/50 text-white text-sm transition-all duration-200 flex items-center">
33
- <i data-feather="file-text" class="w-4 h-4 mr-2"></i>
34
- Summarize Article
35
  </button>
36
- <button class="w-full text-left p-2 rounded-lg bg-gray-700/50 hover:bg-gray-600/50 text-white text-sm transition-all duration-200 flex items-center">
37
- <i data-feather="trending-up" class="w-4 h-4 mr-2"></i>
38
- Analyze Trends
39
  </button>
40
  </div>
41
  </div>
42
 
43
- <!-- Recent Research -->
44
- <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-4 border border-gray-700">
45
- <h3 class="text-white font-semibold mb-3 flex items-center">
46
- <i data-feather="clock" class="w-4 h-4 mr-2 text-blue-400"></i>
47
  Recent Research
48
  </h3>
49
- <div class="space-y-2">
50
- <div class="p-2 rounded-lg bg-gray-700/30 hover:bg-gray-600/50 cursor-pointer transition-all duration-200">
51
- <p class="text-white text-sm font-medium">Quantum Computing Advances</p>
52
  <p class="text-gray-400 text-xs">2 hours ago</p>
53
  </div>
54
- <div class="p-2 rounded-lg bg-gray-700/30 hover:bg-gray-600/50 cursor-pointer transition-all duration-200">
55
- <p class="text-white text-sm font-medium">AI Ethics Framework</p>
56
- <p class="text-gray-400 text-xs">Yesterday</p>
57
  </div>
58
- <div class="p-2 rounded-lg bg-gray-700/30 hover:bg-gray-600/50 cursor-pointer transition-all duration-200">
59
- <p class="text-white text-sm font-medium">Neural Networks Optimization</p>
60
  <p class="text-gray-400 text-xs">3 days ago</p>
61
  </div>
62
  </div>
@@ -65,96 +75,86 @@
65
 
66
  <!-- Main Chat Area -->
67
  <div class="lg:col-span-3">
68
- <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl border border-gray-700 overflow-hidden shadow-2xl">
69
  <!-- Chat Header -->
70
- <div class="bg-gradient-to-r from-purple-600 to-blue-600 px-6 py-4 flex items-center justify-between">
71
  <div class="flex items-center">
72
  <i data-feather="brain" class="text-white mr-3 w-6 h-6"></i>
73
- <div>
74
- <h1 class="text-xl font-bold text-white">DeepChat Explorer</h1>
75
- <p class="text-blue-100 text-sm">AI Research Assistant • Online</p>
76
- </div>
77
  </div>
78
- <div class="flex items-center space-x-3">
79
- <button class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all duration-200">
80
- <i data-feather="settings" class="w-4 h-4 text-white"></i>
81
- </button>
82
- <button class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all duration-200">
83
- <i data-feather="share-2" class="w-4 h-4 text-white"></i>
84
- </button>
85
  </div>
86
  </div>
87
 
88
  <!-- Chat Container -->
89
- <div class="h-96 overflow-y-auto p-6 bg-gradient-to-b from-gray-900/50 to-gray-800/50" id="chat-container">
90
  <!-- Welcome Message -->
91
  <div class="text-center py-8">
92
- <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
93
- <i data-feather="cpu" class="w-8 h-8 text-white"></i>
94
  </div>
95
- <h2 class="text-2xl font-bold text-white mb-2">Welcome to DeepChat Explorer</h2>
96
- <p class="text-gray-300 mb-6">Your advanced AI research assistant. Ask me anything about technology, science, or research topics.</p>
97
- <div class="grid grid-cols-1 md:grid-cols-3 gap-3 max-w-2xl mx-auto">
98
- <button class="p-3 bg-gray-700/50 hover:bg-gray-600/50 rounded-lg text-white text-sm transition-all duration-200">
99
- 🤖 Explain AI concepts
 
 
100
  </button>
101
- <button class="p-3 bg-gray-700/50 hover:bg-gray-600/50 rounded-lg text-white text-sm transition-all duration-200">
102
- 🔬 Research papers
103
- </button>
104
- <button class="p-3 bg-gray-700/50 hover:bg-gray-600/50 rounded-lg text-white text-sm transition-all duration-200">
105
- 💡 Technical insights
106
  </button>
107
  </div>
108
  </div>
109
  </div>
110
 
111
  <!-- Enhanced Input Area -->
112
- <div class="border-t border-gray-700 p-4 bg-gray-800/80 backdrop-blur-lg">
113
- <form id="chat-form" class="space-y-3">
114
- <!-- Action Buttons -->
115
- <div class="flex flex-wrap gap-2">
116
- <button type="button" class="px-3 py-1 bg-purple-600/50 hover:bg-purple-600 text-white rounded-full text-xs flex items-center transition-all duration-200">
117
- <i data-feather="search" class="w-3 h-3 mr-1"></i>
118
- Research
119
- </button>
120
- <button type="button" class="px-3 py-1 bg-blue-600/50 hover:bg-blue-600 text-white rounded-full text-xs flex items-center transition-all duration-200">
121
- <i data-feather="file-text" class="w-3 h-3 mr-1"></i>
122
- Summarize
123
- </button>
124
- <button type="button" class="px-3 py-1 bg-green-600/50 hover:bg-green-600 text-white rounded-full text-xs flex items-center transition-all duration-200">
125
- <i data-feather="code" class="w-3 h-3 mr-1"></i>
126
- Code
127
- </button>
128
- <button type="button" class="px-3 py-1 bg-red-600/50 hover:bg-red-600 text-white rounded-full text-xs flex items-center transition-all duration-200">
129
- <i data-feather="trending-up" class="w-3 h-3 mr-1"></i>
130
- Analyze
131
- </button>
132
  </div>
133
 
134
- <!-- Input Area -->
135
  <div class="flex gap-3">
136
  <div class="flex-1 relative">
137
  <input
138
  type="text"
139
  id="message-input"
140
- placeholder="Ask me anything about technology, research, or science..."
141
- class="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-white placeholder-gray-400 transition-all duration-200"
142
  autocomplete="off"
143
  >
144
- <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex gap-2">
145
- <button type="button" class="text-gray-400 hover:text-white transition-colors">
146
- <i data-feather="paperclip" class="w-4 h-4"></i>
147
  </button>
148
- <button type="button" class="text-gray-400 hover:text-white transition-colors">
149
- <i data-feather="mic" class="w-4 h-4"></i>
150
  </button>
151
  </div>
152
  </div>
153
  <button
154
  type="submit"
155
- class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg hover:from-purple-700 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-200 flex items-center"
156
  >
157
- <i data-feather="send" class="w-4 h-4 mr-2"></i>
158
  Send
159
  </button>
160
  </div>
@@ -178,83 +178,127 @@
178
  e.preventDefault();
179
  const input = document.getElementById('message-input');
180
  const message = input.value.trim();
 
181
 
182
  if (message) {
183
  addMessage(message, 'user');
184
  input.value = '';
185
 
186
- // Simulate advanced AI response with typing indicator
187
  showTypingIndicator();
188
 
 
189
  setTimeout(() => {
190
  hideTypingIndicator();
191
- const responses = [
192
- `I'm conducting deep research on: "${message}". Let me analyze the latest papers and trends...`,
193
- "🔍 Found 12 relevant academic papers and 8 industry reports on this topic.",
194
- "📊 Analysis complete. Key insights:\n• Current market trends show 45% growth\n• Top 3 challenges identified\n• 5 innovative solutions proposed",
195
- "💡 Based on my research, here are the most promising approaches:\n1. Advanced neural network architectures\n2. Hybrid AI models combining different techniques\n3. Real-time optimization algorithms",
196
- "Would you like me to dive deeper into any specific aspect or provide code examples?"
197
- ];
198
 
199
- responses.forEach((response, index) => {
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  setTimeout(() => {
201
- addMessage(response, 'ai');
202
- }, (index + 1) * 800);
203
  });
204
  }, 2000);
205
  }
206
  });
207
 
208
- function addMessage(text, sender) {
209
- const container = document.getElementById('chat-container');
210
-
211
- // Remove welcome message if it's the first real message
212
- if (container.children.length === 1 && container.children[0].classList.contains('text-center')) {
213
- container.innerHTML = '';
214
- }
215
-
216
- const messageDiv = document.createElement('div');
217
- messageDiv.className = `mb-6 flex ${sender === 'user' ? 'justify-end' : 'justify-start'} animate-fade-in`;
218
-
219
- const messageContent = text.split('\n').map(line => `<p class="mb-1">${line}</p>`).join('');
220
-
221
- messageDiv.innerHTML = `
222
- <div class="flex ${sender === 'user' ? 'flex-row-reverse' : 'flex-row'} items-start gap-3 max-w-full">
223
- <div class="w-8 h-8 rounded-full flex items-center justify-center ${sender === 'user' ? 'bg-gradient-to-r from-purple-500 to-blue-500' : 'bg-gradient-to-r from-gray-600 to-gray-700'}">
224
- <i data-feather="${sender === 'user' ? 'user' : 'cpu'}" class="w-4 h-4 text-white"></i>
225
- </div>
226
- <div class="${sender === 'user' ? 'bg-gradient-to-r from-purple-600 to-blue-600' : 'bg-gray-700/80'} rounded-2xl py-3 px-4 max-w-md lg:max-w-2xl backdrop-blur-lg border ${sender === 'user' ? 'border-purple-500/30' : 'border-gray-600/30'}">
227
- <div class="text-white whitespace-pre-wrap">${messageContent}</div>
228
- <div class="text-xs ${sender === 'user' ? 'text-blue-200' : 'text-gray-400'} mt-2 text-right">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
229
- </div>
230
- </div>
231
- `;
232
-
233
- container.appendChild(messageDiv);
234
- container.scrollTop = container.scrollHeight;
235
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
236
  }
237
 
238
  function showTypingIndicator() {
239
  const container = document.getElementById('chat-container');
240
- const indicator = document.createElement('div');
241
- indicator.id = 'typing-indicator';
242
- indicator.className = 'mb-6 flex justify-start animate-fade-in';
243
- indicator.innerHTML = `
244
- <div class="flex items-start gap-3">
245
- <div class="w-8 h-8 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
246
- <i data-feather="cpu" class="w-4 h-4 text-white"></i>
247
- </div>
248
- <div class="bg-gray-700/80 rounded-2xl py-3 px-4 backdrop-blur-lg border border-gray-600/30">
249
- <div class="flex space-x-1">
250
- <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
251
- <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
252
- <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
253
- </div>
254
  </div>
255
  </div>
256
  `;
257
- container.appendChild(indicator);
258
  container.scrollTop = container.scrollHeight;
259
  }
260
 
@@ -265,26 +309,49 @@
265
  }
266
  }
267
 
268
- // Quick action buttons
269
- document.querySelectorAll('.grid button, .flex button').forEach(button => {
270
- if (button.type !== 'submit') {
271
- button.addEventListener('click', function() {
272
- const actions = {
273
- '🤖 Explain AI concepts': "Can you explain the difference between supervised and unsupervised learning in machine learning?",
274
- '🔬 Research papers': "Find the latest research papers about transformer architectures in natural language processing.",
275
- '💡 Technical insights': "What are the current limitations of large language models and how are researchers addressing them?",
276
- 'Research Topic': "Research the impact of quantum computing on cryptography and security systems.",
277
- 'Summarize Article': "I need a summary of the key findings from recent AI safety research papers.",
278
- 'Analyze Trends': "Analyze the current trends in edge computing and AI deployment."
279
- };
280
-
281
- const text = this.textContent.trim();
282
- if (actions[text]) {
283
- document.getElementById('message-input').value = actions[text];
284
- document.getElementById('message-input').focus();
285
- }
286
- });
 
 
 
 
287
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
288
  });
289
  </script>
290
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 
13
  <body class="bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 min-h-screen">
14
  <custom-navbar></custom-navbar>
15
 
16
+ <div class="container mx-auto px-4 py-8">
17
+ <!-- Hero Section -->
18
+ <div class="text-center mb-12">
19
+ <h1 class="text-5xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent mb-4">
20
+ DeepChat Explorer
21
+ </h1>
22
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
23
+ Advanced AI research assistant with real-time web search, multi-source analysis, and intelligent insights
24
+ </p>
25
+ </div>
26
+
27
+ <!-- Main Chat Interface -->
28
  <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-6">
29
+ <!-- Sidebar - Research Tools -->
30
  <div class="lg:col-span-1 space-y-6">
31
  <!-- Quick Actions -->
32
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
33
+ <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
34
+ <i data-feather="zap" class="mr-2 text-yellow-400"></i>
35
  Quick Actions
36
  </h3>
37
+ <div class="space-y-3">
38
+ <button class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white px-4 py-3 rounded-lg hover:from-purple-700 hover:to-blue-700 transition-all duration-200 flex items-center justify-center">
39
+ <i data-feather="search" class="mr-2"></i>
40
+ Web Search
41
  </button>
42
+ <button class="w-full bg-gradient-to-r from-green-600 to-teal-600 text-white px-4 py-3 rounded-lg hover:from-green-700 hover:to-teal-700 transition-all duration-200 flex items-center justify-center">
43
+ <i data-feather="file-text" class="mr-2"></i>
44
+ Analyze Document
45
  </button>
46
+ <button class="w-full bg-gradient-to-r from-red-600 to-pink-600 text-white px-4 py-3 rounded-lg hover:from-red-700 hover:to-pink-700 transition-all duration-200 flex items-center justify-center">
47
+ <i data-feather="trending-up" class="mr-2"></i>
48
+ Real-time Data
49
  </button>
50
  </div>
51
  </div>
52
 
53
+ <!-- Research History -->
54
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
55
+ <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
56
+ <i data-feather="clock" class="mr-2 text-blue-400"></i>
57
  Recent Research
58
  </h3>
59
+ <div class="space-y-3">
60
+ <div class="bg-gray-700/50 p-3 rounded-lg cursor-pointer hover:bg-gray-600/50 transition-colors">
61
+ <p class="text-white font-medium text-sm">Quantum Computing Breakthroughs</p>
62
  <p class="text-gray-400 text-xs">2 hours ago</p>
63
  </div>
64
+ <div class="bg-gray-700/50 p-3 rounded-lg cursor-pointer hover:bg-gray-600/50 transition-colors">
65
+ <p class="text-white font-medium text-sm">AI in Healthcare 2024</p>
66
+ <p class="text-gray-400 text-xs">1 day ago</p>
67
  </div>
68
+ <div class="bg-gray-700/50 p-3 rounded-lg cursor-pointer hover:bg-gray-600/50 transition-colors">
69
+ <p class="text-white font-medium text-sm">Blockchain Security Analysis</p>
70
  <p class="text-gray-400 text-xs">3 days ago</p>
71
  </div>
72
  </div>
 
75
 
76
  <!-- Main Chat Area -->
77
  <div class="lg:col-span-3">
78
+ <div class="bg-gray-800/30 backdrop-blur-lg rounded-xl shadow-2xl border border-gray-700 overflow-hidden">
79
  <!-- Chat Header -->
80
+ <div class="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 px-6 py-4 flex items-center justify-between">
81
  <div class="flex items-center">
82
  <i data-feather="brain" class="text-white mr-3 w-6 h-6"></i>
83
+ <h2 class="text-xl font-bold text-white">AI Research Assistant</h2>
 
 
 
84
  </div>
85
+ <div class="flex items-center space-x-2">
86
+ <span class="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-sm font-medium flex items-center">
87
+ <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
88
+ Online
89
+ </span>
 
 
90
  </div>
91
  </div>
92
 
93
  <!-- Chat Container -->
94
+ <div class="h-96 overflow-y-auto p-6 bg-gradient-to-b from-gray-900/50 to-gray-800/30" id="chat-container">
95
  <!-- Welcome Message -->
96
  <div class="text-center py-8">
97
+ <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
98
+ <i data-feather="compass" class="text-white w-8 h-8"></i>
99
  </div>
100
+ <h3 class="text-2xl font-bold text-white mb-2">Welcome to DeepChat Explorer</h3>
101
+ <p class="text-gray-300 max-w-md mx-auto">
102
+ I can help you research any topic with real-time web search, multi-source analysis, and intelligent insights.
103
+ </p>
104
+ <div class="mt-6 grid grid-cols-2 gap-3 max-w-sm mx-auto">
105
+ <button class="bg-gray-700/50 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-600/50 transition-colors">
106
+ Recent AI News
107
  </button>
108
+ <button class="bg-gray-700/50 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-600/50 transition-colors">
109
+ Tech Trends
 
 
 
110
  </button>
111
  </div>
112
  </div>
113
  </div>
114
 
115
  <!-- Enhanced Input Area -->
116
+ <div class="border-t border-gray-700 p-6 bg-gray-900/50">
117
+ <form id="chat-form" class="space-y-4">
118
+ <!-- Mode Selection -->
119
+ <div class="flex space-x-4">
120
+ <label class="flex items-center">
121
+ <input type="radio" name="mode" value="standard" checked class="mr-2 text-purple-600">
122
+ <span class="text-gray-300">Standard</span>
123
+ </label>
124
+ <label class="flex items-center">
125
+ <input type="radio" name="mode" value="research" class="mr-2 text-purple-600">
126
+ <span class="text-gray-300">Deep Research</span>
127
+ </label>
128
+ <label class="flex items-center">
129
+ <input type="radio" name="mode" value="creative" class="mr-2 text-purple-600">
130
+ <span class="text-gray-300">Creative</span>
131
+ </label>
 
 
 
 
132
  </div>
133
 
134
+ <!-- Input Group -->
135
  <div class="flex gap-3">
136
  <div class="flex-1 relative">
137
  <input
138
  type="text"
139
  id="message-input"
140
+ placeholder="Ask me anything... (Try 'Research quantum computing advancements in 2024')"
141
+ class="w-full px-6 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-lg"
142
  autocomplete="off"
143
  >
144
+ <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex space-x-2">
145
+ <button type="button" class="text-gray-400 hover:text-white">
146
+ <i data-feather="mic" class="w-5 h-5"></i>
147
  </button>
148
+ <button type="button" class="text-gray-400 hover:text-white">
149
+ <i data-feather="paperclip" class="w-5 h-5"></i>
150
  </button>
151
  </div>
152
  </div>
153
  <button
154
  type="submit"
155
+ class="px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-xl hover:from-purple-700 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-200 flex items-center justify-center"
156
  >
157
+ <i data-feather="send" class="w-5 h-5 mr-2"></i>
158
  Send
159
  </button>
160
  </div>
 
178
  e.preventDefault();
179
  const input = document.getElementById('message-input');
180
  const message = input.value.trim();
181
+ const mode = document.querySelector('input[name="mode"]:checked').value;
182
 
183
  if (message) {
184
  addMessage(message, 'user');
185
  input.value = '';
186
 
187
+ // Show typing indicator
188
  showTypingIndicator();
189
 
190
+ // Simulate AI response with enhanced capabilities
191
  setTimeout(() => {
192
  hideTypingIndicator();
 
 
 
 
 
 
 
193
 
194
+ // Enhanced responses based on mode
195
+ let response;
196
+ switch(mode) {
197
+ case 'research':
198
+ response = generateResearchResponse(message);
199
+ break;
200
+ case 'creative':
201
+ response = generateCreativeResponse(message);
202
+ break;
203
+ default:
204
+ response = generateStandardResponse(message);
205
+ }
206
+
207
+ response.forEach((msg, index) => {
208
  setTimeout(() => {
209
+ addMessage(msg.text, 'ai', msg.type);
210
+ }, index * 800);
211
  });
212
  }, 2000);
213
  }
214
  });
215
 
216
+ function generateResearchResponse(query) {
217
+ return [
218
+ {
219
+ text: `🔍 **Researching:** "${query}"`,
220
+ type: 'info'
221
+ },
222
+ {
223
+ text: `📊 **Search Strategy:** Analyzing 15+ sources including academic papers, news articles, and real-time data`,
224
+ type: 'info'
225
+ },
226
+ {
227
+ text: `🌐 **Web Search Results:** Found 23 relevant sources from Google Scholar, arXiv, and industry reports`,
228
+ type: 'info'
229
+ },
230
+ {
231
+ text: `🤖 **AI Analysis:** Based on my analysis of current trends and data, here are the key insights about ${query}:`,
232
+ type: 'message'
233
+ },
234
+ {
235
+ text: `💡 **Key Findings:**\n• Major breakthrough in quantum computing announced last week\n• 3X improvement in qubit stability\n• Commercial applications expected within 2 years\n• Investment increased by 45% in Q1 2024`,
236
+ type: 'message'
237
+ },
238
+ {
239
+ text: `📈 **Trend Analysis:** The field is growing exponentially with significant government and private investment. Would you like me to dive deeper into any specific aspect?`,
240
+ type: 'message'
241
+ }
242
+ ];
243
+ }
244
+
245
+ function generateCreativeResponse(query) {
246
+ return [
247
+ {
248
+ text: `🎨 **Creative Mode Activated:** Let me explore "${query}" from unique perspectives`,
249
+ type: 'info'
250
+ },
251
+ {
252
+ text: `✨ **Innovative Insights:** What if we combine ${query} with emerging technologies like neural interfaces?`,
253
+ type: 'message'
254
+ },
255
+ {
256
+ text: `🚀 **Future Projection:** Based on current trajectory, ${query} could revolutionize how we approach problem-solving by 2030`,
257
+ type: 'message'
258
+ },
259
+ {
260
+ text: `💭 **Thought Experiment:** Imagine a world where ${query} is integrated with AI assistants - the possibilities are endless!`,
261
+ type: 'message'
262
+ }
263
+ ];
264
+ }
265
+
266
+ function generateStandardResponse(query) {
267
+ return [
268
+ {
269
+ text: `🤖 **Analyzing:** "${query}"`,
270
+ type: 'info'
271
+ },
272
+ {
273
+ text: `📋 **Summary:** Based on current information, ${query} represents a significant area of development with applications across multiple industries.`,
274
+ type: 'message'
275
+ },
276
+ {
277
+ text: `🔬 **Technical Overview:** The technology involves advanced algorithms and data processing techniques that enable new capabilities.`,
278
+ type: 'message'
279
+ },
280
+ {
281
+ text: `💼 **Practical Applications:** From healthcare to finance, the implications are substantial and worth exploring further.`,
282
+ type: 'message'
283
+ }
284
+ ];
285
  }
286
 
287
  function showTypingIndicator() {
288
  const container = document.getElementById('chat-container');
289
+ const typingDiv = document.createElement('div');
290
+ typingDiv.className = 'mb-4 flex justify-start';
291
+ typingDiv.id = 'typing-indicator';
292
+ typingDiv.innerHTML = `
293
+ <div class="bg-gray-700 rounded-lg py-3 px-4 max-w-xs">
294
+ <div class="flex space-x-1">
295
+ <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
296
+ <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
297
+ <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
 
 
 
 
 
298
  </div>
299
  </div>
300
  `;
301
+ container.appendChild(typingDiv);
302
  container.scrollTop = container.scrollHeight;
303
  }
304
 
 
309
  }
310
  }
311
 
312
+ function addMessage(text, sender, type = 'message') {
313
+ const container = document.getElementById('chat-container');
314
+ const messageDiv = document.createElement('div');
315
+ messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
316
+
317
+ let bgColor, textColor;
318
+ if (sender === 'user') {
319
+ bgColor = 'bg-gradient-to-r from-purple-600 to-blue-600';
320
+ textColor = 'text-white';
321
+ } else {
322
+ switch(type) {
323
+ case 'info':
324
+ bgColor = 'bg-yellow-500/20 border border-yellow-500/30';
325
+ textColor = 'text-yellow-300';
326
+ break;
327
+ case 'warning':
328
+ bgColor = 'bg-red-500/20 border border-red-500/30';
329
+ textColor = 'text-red-300';
330
+ break;
331
+ default:
332
+ bgColor = 'bg-gray-700/50 border border-gray-600';
333
+ textColor = 'text-white';
334
+ }
335
  }
336
+
337
+ messageDiv.innerHTML = `
338
+ <div class="${bgColor} ${textColor} rounded-xl py-3 px-4 max-w-2xl backdrop-blur-sm">
339
+ <div class="whitespace-pre-wrap">${text}</div>
340
+ </div>
341
+ `;
342
+
343
+ container.appendChild(messageDiv);
344
+ container.scrollTop = container.scrollHeight;
345
+ }
346
+
347
+ // Add quick action button functionality
348
+ document.querySelectorAll('.bg-gradient-to-r').forEach(button => {
349
+ button.addEventListener('click', function() {
350
+ const action = this.querySelector('span').textContent;
351
+ const input = document.getElementById('message-input');
352
+ input.value = action;
353
+ input.focus();
354
+ });
355
  });
356
  </script>
357
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
style.css CHANGED
@@ -1,36 +1,223 @@
1
- /* Shared styles across all pages */
 
 
 
2
  body {
3
  font-family: 'Inter', sans-serif;
4
  min-height: 100vh;
5
  display: flex;
6
  flex-direction: column;
 
7
  }
8
 
9
- /* Chat container scrollbar */
10
  #chat-container::-webkit-scrollbar {
11
- width: 8px;
12
  }
13
 
14
  #chat-container::-webkit-scrollbar-track {
15
- background: #f1f1f1;
16
  border-radius: 10px;
 
17
  }
18
 
19
  #chat-container::-webkit-scrollbar-thumb {
20
- background: #c7d2fe;
21
  border-radius: 10px;
 
22
  }
23
 
24
  #chat-container::-webkit-scrollbar-thumb:hover {
25
- background: #a5b4fc;
 
 
 
 
 
 
 
 
 
 
 
 
26
  }
27
 
28
- /* Animation for messages */
29
- @keyframes fadeIn {
30
- from { opacity: 0; transform: translateY(10px); }
31
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
32
  }
33
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  #chat-container div {
35
- animation: fadeIn 0.3s ease-out;
36
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ /* Enhanced Shared Styles */
3
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
4
+
5
  body {
6
  font-family: 'Inter', sans-serif;
7
  min-height: 100vh;
8
  display: flex;
9
  flex-direction: column;
10
+ background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
11
  }
12
 
13
+ /* Enhanced Scrollbar */
14
  #chat-container::-webkit-scrollbar {
15
+ width: 12px;
16
  }
17
 
18
  #chat-container::-webkit-scrollbar-track {
19
+ background: rgba(255, 255, 255, 0.05);
20
  border-radius: 10px;
21
+ margin: 4px;
22
  }
23
 
24
  #chat-container::-webkit-scrollbar-thumb {
25
+ background: linear-gradient(180deg, #8b5cf6, #6366f1);
26
  border-radius: 10px;
27
+ border: 2px solid rgba(255, 255, 255, 0.1);
28
  }
29
 
30
  #chat-container::-webkit-scrollbar-thumb:hover {
31
+ background: linear-gradient(180deg, #a78bfa, #818cf8);
32
+ }
33
+
34
+ /* Enhanced Animations */
35
+ @keyframes fadeInUp {
36
+ from {
37
+ opacity: 0;
38
+ transform: translateY(30px) scale(0.95);
39
+ }
40
+ to {
41
+ opacity: 1;
42
+ transform: translateY(0) scale(1);
43
+ }
44
  }
45
 
46
+ @keyframes slideInRight {
47
+ from {
48
+ opacity: 0;
49
+ transform: translateX(30px);
50
+ }
51
+ to {
52
+ opacity: 1;
53
+ transform: translateX(0);
54
+ }
55
  }
56
 
57
+ @keyframes slideInLeft {
58
+ from {
59
+ opacity: 0;
60
+ transform: translateX(-30px);
61
+ }
62
+ to {
63
+ opacity: 1;
64
+ transform: translateX(0);
65
+ }
66
+ }
67
+
68
+ @keyframes glow {
69
+ 0% {
70
+ box-shadow: 0 0 5px rgba(139, 92, 246, 0.3);
71
+ }
72
+ 50% {
73
+ box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
74
+ }
75
+ 100% {
76
+ box-shadow: 0 0 5px rgba(139, 92, 246, 0.3);
77
+ }
78
+ }
79
+
80
+ @keyframes float {
81
+ 0% {
82
+ transform: translateY(0px);
83
+ }
84
+ 50% {
85
+ transform: translateY(-10px);
86
+ }
87
+ 100% {
88
+ transform: translateY(0px);
89
+ }
90
+ }
91
+
92
+ /* Enhanced Message Animations */
93
  #chat-container div {
94
+ animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
95
+ }
96
+
97
+ .user-message {
98
+ animation: slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
99
+ }
100
+
101
+ .ai-message {
102
+ animation: slideInLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
103
+ }
104
+
105
+ /* Enhanced UI Elements */
106
+ .glass-effect {
107
+ background: rgba(255, 255, 255, 0.1);
108
+ backdrop-filter: blur(20px);
109
+ border: 1px solid rgba(255, 255, 255, 0.2);
110
+ }
111
+
112
+ .gradient-border {
113
+ position: relative;
114
+ background: linear-gradient(45deg, #8b5cf6, #ec4899, #3b82f6);
115
+ padding: 2px;
116
+ border-radius: 12px;
117
+ }
118
+
119
+ .gradient-border::before {
120
+ content: '';
121
+ position: absolute;
122
+ top: 0;
123
+ left: 0;
124
+ right: 0;
125
+ bottom: 0;
126
+ border-radius: 12px;
127
+ padding: 2px;
128
+ background: linear-gradient(45deg, #8b5cf6, #ec4899, #3b82f6);
129
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
130
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
131
+ -webkit-mask-composite: xor;
132
+ mask-composite: exclude;
133
+ }
134
+
135
+ /* Enhanced Button Styles */
136
+ .btn-glow {
137
+ animation: glow 2s ease-in-out infinite;
138
+ transition: all 0.3s ease;
139
+ }
140
+
141
+ .btn-glow:hover {
142
+ animation: none;
143
+ transform: scale(1.05);
144
+ box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
145
+ }
146
+
147
+ /* Floating Animation */
148
+ .float-animation {
149
+ animation: float 3s ease-in-out infinite;
150
+ }
151
+
152
+ /* Text Selection */
153
+ ::selection {
154
+ background: rgba(139, 92, 246, 0.3);
155
+ color: white;
156
+ }
157
+
158
+ /* Focus States */
159
+ input:focus, button:focus {
160
+ outline: none;
161
+ ring: 2px solid rgba(139, 92, 246, 0.5);
162
+ }
163
+
164
+ /* Loading Spinner */
165
+ .spinner {
166
+ border: 2px solid rgba(255, 255, 255, 0.3);
167
+ border-radius: 50%;
168
+ border-top: 2px solid #8b5cf6;
169
+ width: 20px;
170
+ height: 20px;
171
+ animation: spin 1s linear infinite;
172
+ }
173
+
174
+ @keyframes spin {
175
+ 0% { transform: rotate(0deg); }
176
+ 100% { transform: rotate(360deg); }
177
+ }
178
+
179
+ /* Enhanced Typography */
180
+ .text-gradient {
181
+ background: linear-gradient(45deg, #f0abfc, #a5b4fc, #67e8f9);
182
+ -webkit-background-clip: text;
183
+ -webkit-text-fill-color: transparent;
184
+ background-size: 200% 200%;
185
+ animation: gradientShift 3s ease infinite;
186
+ }
187
+
188
+ @keyframes gradientShift {
189
+ 0% { background-position: 0% 50%; }
190
+ 50% { background-position: 100% 50%; }
191
+ 100% { background-position: 0% 50%; }
192
+ }
193
+
194
+ /* Responsive Design Enhancements */
195
+ @media (max-width: 768px) {
196
+ .container {
197
+ padding-left: 1rem;
198
+ padding-right: 1rem;
199
+ }
200
+
201
+ .grid {
202
+ gap: 1rem;
203
+ }
204
+ }
205
+
206
+ /* Dark Mode Enhancements */
207
+ .dark-mode {
208
+ color-scheme: dark;
209
+ }
210
+
211
+ /* Smooth Transitions */
212
+ * {
213
+ transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
214
+ }
215
+
216
+ /* Enhanced Backdrop Effects */
217
+ .backdrop-blur-lg {
218
+ backdrop-filter: blur(20px);
219
+ }
220
+
221
+ .backdrop-blur-xl {
222
+ backdrop-filter: blur(40px);
223
+ }