Hugging Face's logo

Spaces:
HapppyHooochie
/
nubia
Running

App Files Community
HapppyHooochie commited on
Commit
5800614
·
verified ·
1 Parent(s): 4e6e549

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +615 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nubia
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: nubia
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,615 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NeonBloom AI - STEM Student Assistant</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');
11
+
12
+ :root {
13
+ --neon-pink: #ff6ec7;
14
+ --dark-bg: #0f0f1a;
15
+ --darker-bg: #0a0a12;
16
+ --light-text: #e0e0e0;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Montserrat', sans-serif;
21
+ background-color: var(--dark-bg);
22
+ color: var(--light-text);
23
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgba(255,110,199,0.05)" d="M30,10 Q50,0 70,10 Q90,20 90,40 Q100,50 90,60 Q90,80 70,90 Q50,100 30,90 Q10,80 10,60 Q0,50 10,40 Q10,20 30,10 Z"/></svg>');
24
+ background-size: 200px;
25
+ background-repeat: repeat;
26
+ }
27
+
28
+ .neon-text {
29
+ text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
30
+ }
31
+
32
+ .neon-border {
33
+ border: 1px solid var(--neon-pink);
34
+ box-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink) inset;
35
+ }
36
+
37
+ .neon-glow {
38
+ box-shadow: 0 0 10px var(--neon-pink);
39
+ }
40
+
41
+ .cherry-blossom {
42
+ position: absolute;
43
+ width: 15px;
44
+ height: 15px;
45
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgba(255,110,199,0.3)" d="M50,0 Q60,40 100,50 Q60,60 50,100 Q40,60 0,50 Q40,40 50,0 Z"/></svg>');
46
+ background-size: contain;
47
+ opacity: 0.6;
48
+ pointer-events: none;
49
+ z-index: -1;
50
+ }
51
+
52
+ .document-viewer {
53
+ background-color: rgba(15, 15, 26, 0.8);
54
+ backdrop-filter: blur(5px);
55
+ }
56
+
57
+ .model-card:hover {
58
+ transform: translateY(-5px);
59
+ transition: all 0.3s ease;
60
+ }
61
+
62
+ /* Custom scrollbar */
63
+ ::-webkit-scrollbar {
64
+ width: 8px;
65
+ }
66
+
67
+ ::-webkit-scrollbar-track {
68
+ background: var(--darker-bg);
69
+ }
70
+
71
+ ::-webkit-scrollbar-thumb {
72
+ background: var(--neon-pink);
73
+ border-radius: 4px;
74
+ }
75
+
76
+ /* Animation for cherry blossoms */
77
+ @keyframes fall {
78
+ 0% {
79
+ transform: translateY(-10vh) rotate(0deg);
80
+ opacity: 0;
81
+ }
82
+ 10% {
83
+ opacity: 0.6;
84
+ }
85
+ 90% {
86
+ opacity: 0.6;
87
+ }
88
+ 100% {
89
+ transform: translateY(100vh) rotate(360deg);
90
+ opacity: 0;
91
+ }
92
+ }
93
+ </style>
94
+ </head>
95
+ <body class="min-h-screen">
96
+ <!-- Cherry Blossom Animation -->
97
+ <div id="blossoms-container" class="fixed inset-0 overflow-hidden pointer-events-none"></div>
98
+
99
+ <!-- Main App Container -->
100
+ <div class="container mx-auto px-4 py-8">
101
+ <!-- Header -->
102
+ <header class="flex justify-between items-center mb-10">
103
+ <div class="flex items-center">
104
+ <div class="w-12 h-12 rounded-full neon-glow bg-gradient-to-br from-pink-600 to-purple-800 flex items-center justify-center mr-4">
105
+ <i class="fas fa-robot text-2xl text-white"></i>
106
+ </div>
107
+ <h1 class="text-3xl font-bold neon-text">NeonBloom AI</h1>
108
+ </div>
109
+ <div class="flex items-center space-x-4">
110
+ <button id="theme-toggle" class="w-12 h-6 rounded-full bg-gray-800 flex items-center transition duration-300 focus:outline-none shadow">
111
+ <div id="theme-toggle-dot" class="w-6 h-6 rounded-full bg-pink-500 shadow-lg transform translate-x-6"></div>
112
+ </button>
113
+ <div class="relative group">
114
+ <button class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center neon-glow hover:bg-gray-700 transition">
115
+ <i class="fas fa-user-graduate text-xl"></i>
116
+ </button>
117
+ <div class="absolute right-0 mt-2 w-48 bg-gray-900 rounded-md shadow-lg py-1 z-50 hidden group-hover:block neon-border">
118
+ <a href="#" class="block px-4 py-2 hover:bg-gray-800">Profile</a>
119
+ <a href="#" class="block px-4 py-2 hover:bg-gray-800">Settings</a>
120
+ <a href="#" class="block px-4 py-2 hover:bg-gray-800">Logout</a>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </header>
125
+
126
+ <!-- Main Content -->
127
+ <main class="grid grid-cols-1 lg:grid-cols-4 gap-8">
128
+ <!-- Sidebar -->
129
+ <aside class="lg:col-span-1 bg-gray-900 rounded-xl p-6 neon-border">
130
+ <h2 class="text-xl font-semibold mb-6 neon-text">Navigation</h2>
131
+ <nav>
132
+ <ul class="space-y-3">
133
+ <li>
134
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition">
135
+ <i class="fas fa-home mr-3 text-pink-500"></i>
136
+ <span>Dashboard</span>
137
+ </a>
138
+ </li>
139
+ <li>
140
+ <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 transition">
141
+ <i class="fas fa-brain mr-3 text-pink-500"></i>
142
+ <span>AI Models</span>
143
+ </a>
144
+ </li>
145
+ <li>
146
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition">
147
+ <i class="fas fa-book mr-3 text-pink-500"></i>
148
+ <span>Study Materials</span>
149
+ </a>
150
+ </li>
151
+ <li>
152
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition">
153
+ <i class="fas fa-chalkboard mr-3 text-pink-500"></i>
154
+ <span>Blackboard</span>
155
+ </a>
156
+ </li>
157
+ <li>
158
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition">
159
+ <i class="fas fa-video mr-3 text-pink-500"></i>
160
+ <span>Video Lectures</span>
161
+ </a>
162
+ </li>
163
+ <li>
164
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-800 transition">
165
+ <i class="fas fa-flask mr-3 text-pink-500"></i>
166
+ <span>STEM Tools</span>
167
+ </a>
168
+ </li>
169
+ </ul>
170
+ </nav>
171
+
172
+ <div class="mt-8 pt-6 border-t border-gray-800">
173
+ <h3 class="text-lg font-semibold mb-4 neon-text">Quick Access</h3>
174
+ <div class="space-y-2">
175
+ <button class="w-full flex items-center justify-between p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition">
176
+ <span>Upload Document</span>
177
+ <i class="fas fa-upload text-pink-500"></i>
178
+ </button>
179
+ <button class="w-full flex items-center justify-between p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition">
180
+ <span>New Chat</span>
181
+ <i class="fas fa-comment-alt text-pink-500"></i>
182
+ </button>
183
+ <button class="w-full flex items-center justify-between p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition">
184
+ <span>Equation Solver</span>
185
+ <i class="fas fa-square-root-alt text-pink-500"></i>
186
+ </button>
187
+ </div>
188
+ </div>
189
+ </aside>
190
+
191
+ <!-- Main Panel -->
192
+ <div class="lg:col-span-3 space-y-8">
193
+ <!-- Model Selection -->
194
+ <section class="bg-gray-900 rounded-xl p-6 neon-border">
195
+ <div class="flex justify-between items-center mb-6">
196
+ <h2 class="text-2xl font-bold neon-text">AI Model Selection</h2>
197
+ <div class="relative">
198
+ <input type="text" placeholder="Search models..." class="bg-gray-800 rounded-full py-2 px-4 pl-10 w-64 focus:outline-none focus:ring-2 focus:ring-pink-500">
199
+ <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
204
+ <!-- Model Cards -->
205
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition">
206
+ <div class="flex items-center mb-3">
207
+ <div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-3">
208
+ <i class="fas fa-robot text-pink-400"></i>
209
+ </div>
210
+ <h3 class="font-semibold">Llama 3 70B</h3>
211
+ </div>
212
+ <p class="text-gray-400 text-sm mb-3">Latest open model from Meta with 70B parameters, excellent for STEM reasoning.</p>
213
+ <div class="flex justify-between items-center text-xs">
214
+ <span class="bg-pink-900 bg-opacity-50 text-pink-300 px-2 py-1 rounded">Document Analysis</span>
215
+ <span class="text-gray-500">Free</span>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition">
220
+ <div class="flex items-center mb-3">
221
+ <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-3">
222
+ <i class="fas fa-lock-open text-purple-400"></i>
223
+ </div>
224
+ <h3 class="font-semibold">GPT-4 Uncensored</h3>
225
+ </div>
226
+ <p class="text-gray-400 text-sm mb-3">Unfiltered version with no content restrictions. Use responsibly.</p>
227
+ <div class="flex justify-between items-center text-xs">
228
+ <span class="bg-purple-900 bg-opacity-50 text-purple-300 px-2 py-1 rounded">Uncensored</span>
229
+ <span class="text-gray-500">Free</span>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition">
234
+ <div class="flex items-center mb-3">
235
+ <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center mr-3">
236
+ <i class="fas fa-film text-blue-400"></i>
237
+ </div>
238
+ <h3 class="font-semibold">Text-to-Video Pro</h3>
239
+ </div>
240
+ <p class="text-gray-400 text-sm mb-3">Generate 15-minute videos from text descriptions with animations.</p>
241
+ <div class="flex justify-between items-center text-xs">
242
+ <span class="bg-blue-900 bg-opacity-50 text-blue-300 px-2 py-1 rounded">Video Generation</span>
243
+ <span class="text-gray-500">Free</span>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition">
248
+ <div class="flex items-center mb-3">
249
+ <div class="w-10 h-10 rounded-full bg-green-900 flex items-center justify-center mr-3">
250
+ <i class="fas fa-file-pdf text-green-400"></i>
251
+ </div>
252
+ <h3 class="font-semibold">DocMaster</h3>
253
+ </div>
254
+ <p class="text-gray-400 text-sm mb-3">Specialized in PDF, DOCX analysis with high accuracy for academic papers.</p>
255
+ <div class="flex justify-between items-center text-xs">
256
+ <span class="bg-green-900 bg-opacity-50 text-green-300 px-2 py-1 rounded">Document Expert</span>
257
+ <span class="text-gray-500">Free</span>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition">
262
+ <div class="flex items-center mb-3">
263
+ <div class="w-10 h-10 rounded-full bg-yellow-900 flex items-center justify-center mr-3">
264
+ <i class="fas fa-atom text-yellow-400"></i>
265
+ </div>
266
+ <h3 class="font-semibold">STEM Specialist</h3>
267
+ </div>
268
+ <p class="text-gray-400 text-sm mb-3">Focused on science, technology, engineering, and mathematics.</p>
269
+ <div class="flex justify-between items-center text-xs">
270
+ <span class="bg-yellow-900 bg-opacity-50 text-yellow-300 px-2 py-1 rounded">STEM Focused</span>
271
+ <span class="text-gray-500">Free</span>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition">
276
+ <div class="flex items-center mb-3">
277
+ <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-3">
278
+ <i class="fas fa-lock-open text-red-400"></i>
279
+ </div>
280
+ <h3 class="font-semibold">Uncensored Claude</h3>
281
+ </div>
282
+ <p class="text-gray-400 text-sm mb-3">No restrictions version of Anthropic's model for unfiltered discussions.</p>
283
+ <div class="flex justify-between items-center text-xs">
284
+ <span class="bg-red-900 bg-opacity-50 text-red-300 px-2 py-1 rounded">Uncensored</span>
285
+ <span class="text-gray-500">Free</span>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="mt-6 flex justify-between items-center">
291
+ <span class="text-sm text-gray-500">Showing 6 of 42 available models</span>
292
+ <button class="bg-pink-900 bg-opacity-50 hover:bg-opacity-70 text-pink-300 px-4 py-2 rounded-lg transition">
293
+ View All Models
294
+ </button>
295
+ </div>
296
+ </section>
297
+
298
+ <!-- Chat Interface -->
299
+ <section class="bg-gray-900 rounded-xl p-6 neon-border">
300
+ <div class="flex justify-between items-center mb-6">
301
+ <h2 class="text-2xl font-bold neon-text">Chat with AI</h2>
302
+ <div class="flex space-x-3">
303
+ <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg transition">
304
+ <i class="fas fa-cog text-pink-500"></i>
305
+ </button>
306
+ <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg transition">
307
+ <i class="fas fa-history text-pink-500"></i>
308
+ </button>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="document-viewer rounded-lg mb-4 p-4 h-48 overflow-y-auto">
313
+ <div class="flex items-center mb-3">
314
+ <i class="fas fa-file-pdf text-pink-500 mr-2"></i>
315
+ <span class="font-medium">Quantum_Mechanics_Lecture_Notes.pdf</span>
316
+ <span class="ml-auto text-sm text-gray-500">Uploaded 2 hours ago</span>
317
+ </div>
318
+ <p class="text-sm text-gray-300">This document contains lecture notes on quantum mechanics from MIT OpenCourseWare. It covers topics like wave-particle duality, Schrödinger equation, and quantum tunneling...</p>
319
+ </div>
320
+
321
+ <div class="chat-messages h-64 overflow-y-auto mb-4 space-y-4">
322
+ <div class="flex">
323
+ <div class="w-8 h-8 rounded-full bg-pink-900 flex items-center justify-center mr-3">
324
+ <i class="fas fa-user text-sm"></i>
325
+ </div>
326
+ <div class="bg-gray-800 rounded-lg p-3 max-w-3/4">
327
+ <p>Can you explain the Schrödinger equation from these notes in simpler terms?</p>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="flex justify-end">
332
+ <div class="bg-pink-900 bg-opacity-30 rounded-lg p-3 max-w-3/4">
333
+ <p>Certainly! The Schrödinger equation is like a mathematical recipe that tells us how quantum particles behave. Imagine it as a wave equation that describes how the quantum state of a physical system changes over time. In the simplest terms, it answers: "Given the current state of a quantum system, how will it evolve in the future?"</p>
334
+ <div class="mt-2 text-xs text-pink-300 flex items-center">
335
+ <i class="fas fa-robot mr-1"></i>
336
+ <span>Llama 3 70B - Document Analysis</span>
337
+ </div>
338
+ </div>
339
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center ml-3">
340
+ <i class="fas fa-robot text-sm"></i>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="flex">
345
+ <div class="w-8 h-8 rounded-full bg-pink-900 flex items-center justify-center mr-3">
346
+ <i class="fas fa-user text-sm"></i>
347
+ </div>
348
+ <div class="bg-gray-800 rounded-lg p-3 max-w-3/4">
349
+ <p>Can you create a simple analogy to understand quantum tunneling?</p>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="flex items-center">
355
+ <button class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg mr-3 transition">
356
+ <i class="fas fa-paperclip text-pink-500"></i>
357
+ </button>
358
+ <div class="flex-1 relative">
359
+ <input type="text" placeholder="Ask your question..." class="w-full bg-gray-800 rounded-full py-3 px-5 pr-12 focus:outline-none focus:ring-2 focus:ring-pink-500">
360
+ <button class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-pink-900 hover:bg-pink-800 w-8 h-8 rounded-full flex items-center justify-center transition">
361
+ <i class="fas fa-paper-plane text-sm"></i>
362
+ </button>
363
+ </div>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- STEM Tools -->
368
+ <section class="bg-gray-900 rounded-xl p-6 neon-border">
369
+ <h2 class="text-2xl font-bold mb-6 neon-text">STEM Student Tools</h2>
370
+
371
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
372
+ <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-700 transition">
373
+ <div class="w-12 h-12 rounded-full bg-pink-900 bg-opacity-50 flex items-center justify-center mb-3">
374
+ <i class="fas fa-calculator text-xl text-pink-400"></i>
375
+ </div>
376
+ <span class="text-center">Equation Solver</span>
377
+ </div>
378
+
379
+ <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-700 transition">
380
+ <div class="w-12 h-12 rounded-full bg-purple-900 bg-opacity-50 flex items-center justify-center mb-3">
381
+ <i class="fas fa-chart-line text-xl text-purple-400"></i>
382
+ </div>
383
+ <span class="text-center">Graph Plotter</span>
384
+ </div>
385
+
386
+ <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-700 transition">
387
+ <div class="w-12 h-12 rounded-full bg-blue-900 bg-opacity-50 flex items-center justify-center mb-3">
388
+ <i class="fas fa-vial text-xl text-blue-400"></i>
389
+ </div>
390
+ <span class="text-center">Chem Lab</span>
391
+ </div>
392
+
393
+ <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-700 transition">
394
+ <div class="w-12 h-12 rounded-full bg-green-900 bg-opacity-50 flex items-center justify-center mb-3">
395
+ <i class="fas fa-dna text-xl text-green-400"></i>
396
+ </div>
397
+ <span class="text-center">Bio Visualizer</span>
398
+ </div>
399
+
400
+ <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-700 transition">
401
+ <div class="w-12 h-12 rounded-full bg-yellow-900 bg-opacity-50 flex items-center justify-center mb-3">
402
+ <i class="fas fa-code text-xl text-yellow-400"></i>
403
+ </div>
404
+ <span class="text-center">Code Runner</span>
405
+ </div>
406
+
407
+ <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-700 transition">
408
+ <div class="w-12 h-12 rounded-full bg-red-900 bg-opacity-50 flex items-center justify-center mb-3">
409
+ <i class="fas fa-atom text-xl text-red-400"></i>
410
+ </div>
411
+ <span class="text-center">Physics Sim</span>
412
+ </div>
413
+
414
+ <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-700 transition">
415
+ <div class="w-12 h-12 rounded-full bg-indigo-900 bg-opacity-50 flex items-center justify-center mb-3">
416
+ <i class="fas fa-square-root-alt text-xl text-indigo-400"></i>
417
+ </div>
418
+ <span class="text-center">Math Helper</span>
419
+ </div>
420
+
421
+ <div class="bg-gray-800 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-700 transition">
422
+ <div class="w-12 h-12 rounded-full bg-teal-900 bg-opacity-50 flex items-center justify-center mb-3">
423
+ <i class="fas fa-brain text-xl text-teal-400"></i>
424
+ </div>
425
+ <span class="text-center">Neuroscience</span>
426
+ </div>
427
+ </div>
428
+ </section>
429
+ </div>
430
+ </main>
431
+ </div>
432
+
433
+ <!-- Footer -->
434
+ <footer class="bg-gray-900 mt-12 py-6 border-t border-gray-800">
435
+ <div class="container mx-auto px-4">
436
+ <div class="flex flex-col md:flex-row justify-between items-center">
437
+ <div class="flex items-center mb-4 md:mb-0">
438
+ <div class="w-8 h-8 rounded-full neon-glow bg-gradient-to-br from-pink-600 to-purple-800 flex items-center justify-center mr-3">
439
+ <i class="fas fa-robot text-sm text-white"></i>
440
+ </div>
441
+ <span class="font-medium">NeonBloom AI</span>
442
+ </div>
443
+ <div class="flex space-x-6">
444
+ <a href="#" class="hover:text-pink-400 transition">Terms</a>
445
+ <a href="#" class="hover:text-pink-400 transition">Privacy</a>
446
+ <a href="#" class="hover:text-pink-400 transition">Docs</a>
447
+ <a href="#" class="hover:text-pink-400 transition">Status</a>
448
+ </div>
449
+ <div class="flex space-x-4 mt-4 md:mt-0">
450
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition">
451
+ <i class="fab fa-github"></i>
452
+ </a>
453
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition">
454
+ <i class="fab fa-discord"></i>
455
+ </a>
456
+ <a href="#" class="w-8 h-8 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition">
457
+ <i class="fab fa-twitter"></i>
458
+ </a>
459
+ </div>
460
+ </div>
461
+ <div class="mt-6 text-center text-sm text-gray-500">
462
+ <p>© 2023 NeonBloom AI. All models provided by HuggingFace. Free for academic use.</p>
463
+ </div>
464
+ </div>
465
+ </footer>
466
+
467
+ <script>
468
+ // Cherry blossom animation
469
+ function createBlossom() {
470
+ const blossom = document.createElement('div');
471
+ blossom.className = 'cherry-blossom';
472
+
473
+ // Random position and size
474
+ const size = Math.random() * 10 + 5;
475
+ blossom.style.width = `${size}px`;
476
+ blossom.style.height = `${size}px`;
477
+ blossom.style.left = `${Math.random() * 100}vw`;
478
+
479
+ // Random animation duration and delay
480
+ const duration = Math.random() * 10 + 5;
481
+ const delay = Math.random() * 5;
482
+ blossom.style.animation = `fall ${duration}s linear ${delay}s infinite`;
483
+
484
+ document.getElementById('blossoms-container').appendChild(blossom);
485
+
486
+ // Remove after animation completes to prevent DOM clutter
487
+ setTimeout(() => {
488
+ blossom.remove();
489
+ }, (duration + delay) * 1000);
490
+ }
491
+
492
+ // Create multiple blossoms
493
+ for (let i = 0; i < 15; i++) {
494
+ setTimeout(createBlossom, i * 1000);
495
+ }
496
+
497
+ // Theme toggle functionality
498
+ document.getElementById('theme-toggle').addEventListener('click', function() {
499
+ const dot = document.getElementById('theme-toggle-dot');
500
+ const isDark = dot.classList.contains('translate-x-6');
501
+
502
+ if (isDark) {
503
+ // Switch to light mode
504
+ dot.classList.remove('translate-x-6');
505
+ dot.classList.add('translate-x-0');
506
+ document.body.classList.remove('bg-gray-900');
507
+ document.body.classList.add('bg-gray-100');
508
+ document.body.classList.remove('text-gray-100');
509
+ document.body.classList.add('text-gray-900');
510
+ } else {
511
+ // Switch to dark mode
512
+ dot.classList.remove('translate-x-0');
513
+ dot.classList.add('translate-x-6');
514
+ document.body.classList.remove('bg-gray-100');
515
+ document.body.classList.add('bg-gray-900');
516
+ document.body.classList.remove('text-gray-900');
517
+ document.body.classList.add('text-gray-100');
518
+ }
519
+ });
520
+
521
+ // Model card selection
522
+ document.querySelectorAll('.model-card').forEach(card => {
523
+ card.addEventListener('click', function() {
524
+ document.querySelectorAll('.model-card').forEach(c => {
525
+ c.classList.remove('neon-border');
526
+ });
527
+ this.classList.add('neon-border');
528
+
529
+ // Update chat header with selected model
530
+ const modelName = this.querySelector('h3').textContent;
531
+ document.querySelector('.chat-messages').innerHTML += `
532
+ <div class="flex justify-center">
533
+ <div class="bg-gray-800 rounded-lg px-4 py-2 text-sm text-gray-400">
534
+ Switched to ${modelName}
535
+ </div>
536
+ </div>
537
+ `;
538
+ });
539
+ });
540
+
541
+ // Simulate typing effect for new messages
542
+ function simulateTyping(message, isAI = true) {
543
+ const chatContainer = document.querySelector('.chat-messages');
544
+ const typingElement = document.createElement('div');
545
+
546
+ if (isAI) {
547
+ typingElement.className = 'flex justify-end';
548
+ typingElement.innerHTML = `
549
+ <div class="bg-pink-900 bg-opacity-30 rounded-lg p-3 max-w-3/4">
550
+ <div class="typing-indicator flex space-x-1">
551
+ <div class="w-2 h-2 rounded-full bg-pink-300 animate-bounce"></div>
552
+ <div class="w-2 h-2 rounded-full bg-pink-300 animate-bounce" style="animation-delay: 0.2s"></div>
553
+ <div class="w-2 h-2 rounded-full bg-pink-300 animate-bounce" style="animation-delay: 0.4s"></div>
554
+ </div>
555
+ </div>
556
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center ml-3">
557
+ <i class="fas fa-robot text-sm"></i>
558
+ </div>
559
+ `;
560
+ } else {
561
+ typingElement.className = 'flex';
562
+ typingElement.innerHTML = `
563
+ <div class="w-8 h-8 rounded-full bg-pink-900 flex items-center justify-center mr-3">
564
+ <i class="fas fa-user text-sm"></i>
565
+ </div>
566
+ <div class="bg-gray-800 rounded-lg p-3 max-w-3/4">
567
+ <p>${message}</p>
568
+ </div>
569
+ `;
570
+ }
571
+
572
+ chatContainer.appendChild(typingElement);
573
+ chatContainer.scrollTop = chatContainer.scrollHeight;
574
+
575
+ if (isAI) {
576
+ setTimeout(() => {
577
+ typingElement.querySelector('.typing-indicator').remove();
578
+ const messageElement = document.createElement('p');
579
+ messageElement.textContent = message;
580
+ typingElement.querySelector('.bg-pink-900').appendChild(messageElement);
581
+
582
+ const modelInfo = document.createElement('div');
583
+ modelInfo.className = 'mt-2 text-xs text-pink-300 flex items-center';
584
+ modelInfo.innerHTML = '<i class="fas fa-robot mr-1"></i><span>Llama 3 70B - Document Analysis</span>';
585
+ typingElement.querySelector('.bg-pink-900').appendChild(modelInfo);
586
+
587
+ chatContainer.scrollTop = chatContainer.scrollHeight;
588
+ }, 1500);
589
+ }
590
+ }
591
+
592
+ // Handle chat input
593
+ document.querySelector('input[placeholder="Ask your question..."]').addEventListener('keypress', function(e) {
594
+ if (e.key === 'Enter' && this.value.trim() !== '') {
595
+ const question = this.value;
596
+ simulateTyping(question, false);
597
+ this.value = '';
598
+
599
+ // Simulate AI response after a delay
600
+ setTimeout(() => {
601
+ const responses = [
602
+ "The Schrödinger equation is fundamental to quantum mechanics. It describes how the quantum state of a physical system changes with time.",
603
+ "Quantum tunneling occurs when a particle passes through a potential barrier that it classically shouldn't be able to. It's like rolling a ball up a hill that's too high for its energy, but in quantum mechanics, there's a probability the ball can appear on the other side!",
604
+ "The double-slit experiment demonstrates wave-particle duality. When particles like electrons are fired through two slits, they create an interference pattern characteristic of waves, even when sent one at a time.",
605
+ "Heisenberg's Uncertainty Principle states that you cannot simultaneously know both the position and momentum of a particle with perfect accuracy. The more precisely one is known, the less precisely the other can be known."
606
+ ];
607
+
608
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
609
+ simulateTyping(randomResponse, true);
610
+ }, 2000);
611
+ }
612
+ });
613
+ </script>
614
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=HapppyHooochie/nubia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
615
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ i want you to make a dark mode app with neon pink accents and cheery blossoms faintly everywhere. this app will have every free llm that huggingface has and it will have 2 uncensored models to stream and 1 model that will make a text to video of 15 minutes, it will constantly up date all of the newest models will be free to use and try it will read pdfs well as well as jpgs and png. it will be able to play youtubevideo and it will integrate smoothly with blackbboard every llm will be about to read and respond to questions about documents with a high level of accuract. this is a stem based student. add anything else you think she needs.