Hugging Face's logo

Spaces:
HapppyHooochie
/
nubia
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +577 -145
  2. prompts.txt +2 -1
index.html CHANGED
@@ -90,6 +90,45 @@
90
  opacity: 0;
91
  }
92
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
93
  </style>
94
  </head>
95
  <body class="min-h-screen">
@@ -172,11 +211,11 @@
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>
@@ -186,6 +225,9 @@
186
  </button>
187
  </div>
188
  </div>
 
 
 
189
  </aside>
190
 
191
  <!-- Main Panel -->
@@ -202,7 +244,7 @@
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>
@@ -216,35 +258,35 @@
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>
@@ -258,7 +300,7 @@
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>
@@ -272,14 +314,14 @@
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>
@@ -303,61 +345,36 @@
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>
@@ -465,37 +482,105 @@
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
 
@@ -516,41 +601,302 @@
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">
@@ -558,58 +904,144 @@
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>
 
90
  opacity: 0;
91
  }
92
  }
93
+
94
+ .typing-indicator {
95
+ display: flex;
96
+ justify-content: center;
97
+ align-items: center;
98
+ }
99
+
100
+ .typing-dot {
101
+ width: 8px;
102
+ height: 8px;
103
+ margin: 0 2px;
104
+ background-color: var(--neon-pink);
105
+ border-radius: 50%;
106
+ opacity: 0.6;
107
+ animation: typing-animation 1.4s infinite ease-in-out;
108
+ }
109
+
110
+ .typing-dot:nth-child(1) {
111
+ animation-delay: 0s;
112
+ }
113
+
114
+ .typing-dot:nth-child(2) {
115
+ animation-delay: 0.2s;
116
+ }
117
+
118
+ .typing-dot:nth-child(3) {
119
+ animation-delay: 0.4s;
120
+ }
121
+
122
+ @keyframes typing-animation {
123
+ 0%, 60%, 100% {
124
+ transform: translateY(0);
125
+ opacity: 0.6;
126
+ }
127
+ 30% {
128
+ transform: translateY(-5px);
129
+ opacity: 1;
130
+ }
131
+ }
132
  </style>
133
  </head>
134
  <body class="min-h-screen">
 
211
  <div class="mt-8 pt-6 border-t border-gray-800">
212
  <h3 class="text-lg font-semibold mb-4 neon-text">Quick Access</h3>
213
  <div class="space-y-2">
214
+ <button id="upload-btn" class="w-full flex items-center justify-between p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition">
215
  <span>Upload Document</span>
216
  <i class="fas fa-upload text-pink-500"></i>
217
  </button>
218
+ <button id="new-chat-btn" class="w-full flex items-center justify-between p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition">
219
  <span>New Chat</span>
220
  <i class="fas fa-comment-alt text-pink-500"></i>
221
  </button>
 
225
  </button>
226
  </div>
227
  </div>
228
+
229
+ <!-- Hidden file input -->
230
+ <input type="file" id="file-input" class="hidden" accept=".pdf,.jpg,.jpeg,.png,.txt,.docx">
231
  </aside>
232
 
233
  <!-- Main Panel -->
 
244
 
245
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
246
  <!-- Model Cards -->
247
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition" data-model="meta-llama/Meta-Llama-3-70B-Instruct">
248
  <div class="flex items-center mb-3">
249
  <div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-3">
250
  <i class="fas fa-robot text-pink-400"></i>
 
258
  </div>
259
  </div>
260
 
261
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition" data-model="mistralai/Mistral-7B-Instruct-v0.1">
262
  <div class="flex items-center mb-3">
263
  <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-3">
264
  <i class="fas fa-lock-open text-purple-400"></i>
265
  </div>
266
+ <h3 class="font-semibold">Mistral 7B</h3>
267
  </div>
268
+ <p class="text-gray-400 text-sm mb-3">High-quality uncensored model with 7B parameters, great for creative tasks.</p>
269
  <div class="flex justify-between items-center text-xs">
270
  <span class="bg-purple-900 bg-opacity-50 text-purple-300 px-2 py-1 rounded">Uncensored</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" data-model="stabilityai/stable-diffusion-xl-base-1.0">
276
  <div class="flex items-center mb-3">
277
  <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center mr-3">
278
  <i class="fas fa-film text-blue-400"></i>
279
  </div>
280
+ <h3 class="font-semibold">Text-to-Image</h3>
281
  </div>
282
+ <p class="text-gray-400 text-sm mb-3">Generate images from text descriptions with high quality results.</p>
283
  <div class="flex justify-between items-center text-xs">
284
+ <span class="bg-blue-900 bg-opacity-50 text-blue-300 px-2 py-1 rounded">Image Generation</span>
285
  <span class="text-gray-500">Free</span>
286
  </div>
287
  </div>
288
 
289
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition" data-model="deepseek-ai/deepseek-llm-67b-chat">
290
  <div class="flex items-center mb-3">
291
  <div class="w-10 h-10 rounded-full bg-green-900 flex items-center justify-center mr-3">
292
  <i class="fas fa-file-pdf text-green-400"></i>
 
300
  </div>
301
  </div>
302
 
303
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition" data-model="google/gemma-7b-it">
304
  <div class="flex items-center mb-3">
305
  <div class="w-10 h-10 rounded-full bg-yellow-900 flex items-center justify-center mr-3">
306
  <i class="fas fa-atom text-yellow-400"></i>
 
314
  </div>
315
  </div>
316
 
317
+ <div class="model-card bg-gray-800 rounded-lg p-4 cursor-pointer hover:shadow-lg transition" data-model="NousResearch/Nous-Hermes-2-Mistral-7B-DPO">
318
  <div class="flex items-center mb-3">
319
  <div class="w-10 h-10 rounded-full bg-red-900 flex items-center justify-center mr-3">
320
  <i class="fas fa-lock-open text-red-400"></i>
321
  </div>
322
+ <h3 class="font-semibold">Uncensored Hermes</h3>
323
  </div>
324
+ <p class="text-gray-400 text-sm mb-3">No restrictions version for unfiltered discussions and creative tasks.</p>
325
  <div class="flex justify-between items-center text-xs">
326
  <span class="bg-red-900 bg-opacity-50 text-red-300 px-2 py-1 rounded">Uncensored</span>
327
  <span class="text-gray-500">Free</span>
 
345
  <button class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg transition">
346
  <i class="fas fa-cog text-pink-500"></i>
347
  </button>
348
+ <button id="clear-chat-btn" class="bg-gray-800 hover:bg-gray-700 p-2 rounded-lg transition">
349
  <i class="fas fa-history text-pink-500"></i>
350
  </button>
351
  </div>
352
  </div>
353
 
354
+ <div id="document-viewer" class="document-viewer rounded-lg mb-4 p-4 h-48 overflow-y-auto hidden">
355
  <div class="flex items-center mb-3">
356
  <i class="fas fa-file-pdf text-pink-500 mr-2"></i>
357
+ <span id="document-name" class="font-medium"></span>
358
+ <span class="ml-auto text-sm text-gray-500" id="document-time"></span>
359
  </div>
360
+ <p id="document-preview" class="text-sm text-gray-300"></p>
361
  </div>
362
 
363
+ <div id="chat-messages" class="chat-messages h-64 overflow-y-auto mb-4 space-y-4">
364
+ <div class="flex justify-center">
365
+ <div class="bg-gray-800 rounded-lg px-4 py-2 text-sm text-gray-400">
366
+ Select a model and start chatting or upload a document
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
  </div>
368
  </div>
369
  </div>
370
 
371
  <div class="flex items-center">
372
+ <button id="attach-btn" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg mr-3 transition">
373
  <i class="fas fa-paperclip text-pink-500"></i>
374
  </button>
375
  <div class="flex-1 relative">
376
+ <input id="chat-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">
377
+ <button id="send-btn" 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">
378
  <i class="fas fa-paper-plane text-sm"></i>
379
  </button>
380
  </div>
 
482
  </footer>
483
 
484
  <script>
485
+ // App state
486
+ const state = {
487
+ currentModel: null,
488
+ chatHistory: [],
489
+ currentDocument: null,
490
+ apiKey: "hf_YourAPIKeyHere" // Replace with your Hugging Face API key
491
+ };
492
+
493
+ // DOM elements
494
+ const elements = {
495
+ chatMessages: document.getElementById('chat-messages'),
496
+ chatInput: document.getElementById('chat-input'),
497
+ sendBtn: document.getElementById('send-btn'),
498
+ attachBtn: document.getElementById('attach-btn'),
499
+ fileInput: document.getElementById('file-input'),
500
+ documentViewer: document.getElementById('document-viewer'),
501
+ documentName: document.getElementById('document-name'),
502
+ documentPreview: document.getElementById('document-preview'),
503
+ documentTime: document.getElementById('document-time'),
504
+ uploadBtn: document.getElementById('upload-btn'),
505
+ newChatBtn: document.getElementById('new-chat-btn'),
506
+ clearChatBtn: document.getElementById('clear-chat-btn'),
507
+ modelCards: document.querySelectorAll('.model-card')
508
+ };
509
+
510
+ // Initialize the app
511
+ function init() {
512
+ // Cherry blossom animation
513
+ createBlossomAnimation();
514
 
515
+ // Event listeners
516
+ setupEventListeners();
 
 
517
 
518
+ // Load any saved state from localStorage
519
+ loadState();
520
+ }
521
+
522
+ // Create cherry blossom animation
523
+ function createBlossomAnimation() {
524
+ function createBlossom() {
525
+ const blossom = document.createElement('div');
526
+ blossom.className = 'cherry-blossom';
527
+
528
+ // Random position and size
529
+ const size = Math.random() * 10 + 5;
530
+ blossom.style.width = `${size}px`;
531
+ blossom.style.height = `${size}px`;
532
+ blossom.style.left = `${Math.random() * 100}vw`;
533
+
534
+ // Random animation duration and delay
535
+ const duration = Math.random() * 10 + 5;
536
+ const delay = Math.random() * 5;
537
+ blossom.style.animation = `fall ${duration}s linear ${delay}s infinite`;
538
+
539
+ document.getElementById('blossoms-container').appendChild(blossom);
540
+
541
+ // Remove after animation completes to prevent DOM clutter
542
+ setTimeout(() => {
543
+ blossom.remove();
544
+ }, (duration + delay) * 1000);
545
+ }
546
 
547
+ // Create multiple blossoms
548
+ for (let i = 0; i < 15; i++) {
549
+ setTimeout(createBlossom, i * 1000);
550
+ }
551
  }
552
 
553
+ // Set up event listeners
554
+ function setupEventListeners() {
555
+ // Theme toggle
556
+ document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
557
+
558
+ // Model selection
559
+ elements.modelCards.forEach(card => {
560
+ card.addEventListener('click', () => selectModel(card));
561
+ });
562
+
563
+ // Chat input
564
+ elements.chatInput.addEventListener('keypress', (e) => {
565
+ if (e.key === 'Enter' && elements.chatInput.value.trim() !== '') {
566
+ sendMessage();
567
+ }
568
+ });
569
+
570
+ elements.sendBtn.addEventListener('click', sendMessage);
571
+
572
+ // Document handling
573
+ elements.attachBtn.addEventListener('click', () => elements.fileInput.click());
574
+ elements.uploadBtn.addEventListener('click', () => elements.fileInput.click());
575
+ elements.fileInput.addEventListener('change', handleFileUpload);
576
+
577
+ // Chat management
578
+ elements.newChatBtn.addEventListener('click', startNewChat);
579
+ elements.clearChatBtn.addEventListener('click', clearChat);
580
  }
581
 
582
+ // Toggle between dark and light theme
583
+ function toggleTheme() {
584
  const dot = document.getElementById('theme-toggle-dot');
585
  const isDark = dot.classList.contains('translate-x-6');
586
 
 
601
  document.body.classList.remove('text-gray-900');
602
  document.body.classList.add('text-gray-100');
603
  }
604
+ }
605
+
606
+ // Select a model
607
+ function selectModel(card) {
608
+ // Remove selection from all cards
609
+ elements.modelCards.forEach(c => {
610
+ c.classList.remove('neon-border');
611
+ });
612
+
613
+ // Add selection to clicked card
614
+ card.classList.add('neon-border');
615
+
616
+ // Update current model
617
+ state.currentModel = card.dataset.model;
618
+
619
+ // Add message about model selection
620
+ addMessage({
621
+ type: 'system',
622
+ content: `Switched to ${card.querySelector('h3').textContent} model`
623
+ });
624
+
625
+ // Save state
626
+ saveState();
627
+ }
628
 
629
+ // Send a message to the AI
630
+ async function sendMessage() {
631
+ const message = elements.chatInput.value.trim();
632
+ if (!message) return;
633
+
634
+ if (!state.currentModel) {
635
+ addMessage({
636
+ type: 'system',
637
+ content: 'Please select a model first'
638
  });
639
+ return;
640
+ }
641
+
642
+ // Add user message to chat
643
+ addMessage({
644
+ type: 'user',
645
+ content: message
646
+ });
647
+
648
+ // Clear input
649
+ elements.chatInput.value = '';
650
+
651
+ // Show typing indicator
652
+ const typingId = showTypingIndicator();
653
+
654
+ try {
655
+ // Prepare the prompt
656
+ let prompt = message;
657
+ if (state.currentDocument) {
658
+ prompt = `Document context: ${state.currentDocument.content.substring(0, 1000)}...\n\nQuestion: ${message}`;
659
+ }
660
 
661
+ // Call the Hugging Face API
662
+ const response = await queryHuggingFace(state.currentModel, prompt);
663
+
664
+ // Remove typing indicator
665
+ removeTypingIndicator(typingId);
666
+
667
+ // Add AI response to chat
668
+ addMessage({
669
+ type: 'ai',
670
+ content: response,
671
+ model: state.currentModel
672
+ });
673
+
674
+ // Save state
675
+ saveState();
676
+ } catch (error) {
677
+ console.error('Error calling Hugging Face API:', error);
678
+ removeTypingIndicator(typingId);
679
+
680
+ addMessage({
681
+ type: 'system',
682
+ content: 'Error getting response from the AI. Please try again.'
683
+ });
684
+ }
685
+ }
686
+
687
+ // Query Hugging Face API
688
+ async function queryHuggingFace(model, prompt) {
689
+ // Different endpoints for different model types
690
+ let endpoint;
691
+ let payload;
692
+
693
+ if (model.includes('stable-diffusion')) {
694
+ // Image generation model
695
+ endpoint = `https://api-inference.huggingface.co/models/${model}`;
696
+ payload = { inputs: prompt };
697
+
698
+ const response = await fetch(endpoint, {
699
+ method: 'POST',
700
+ headers: {
701
+ 'Authorization': `Bearer ${state.apiKey}`,
702
+ 'Content-Type': 'application/json'
703
+ },
704
+ body: JSON.stringify(payload)
705
+ });
706
+
707
+ const imageBlob = await response.blob();
708
+ const imageUrl = URL.createObjectURL(imageBlob);
709
+ return `![Generated Image](${imageUrl})`;
710
+ } else {
711
+ // Text generation model
712
+ endpoint = `https://api-inference.huggingface.co/models/${model}`;
713
+ payload = {
714
+ inputs: prompt,
715
+ parameters: {
716
+ max_new_tokens: 500,
717
+ temperature: 0.7,
718
+ top_p: 0.9
719
+ }
720
+ };
721
+
722
+ const response = await fetch(endpoint, {
723
+ method: 'POST',
724
+ headers: {
725
+ 'Authorization': `Bearer ${state.apiKey}`,
726
+ 'Content-Type': 'application/json'
727
+ },
728
+ body: JSON.stringify(payload)
729
+ });
730
+
731
+ const result = await response.json();
732
+
733
+ if (Array.isArray(result) && result[0].generated_text) {
734
+ return result[0].generated_text;
735
+ } else if (result.error) {
736
+ throw new Error(result.error);
737
+ } else {
738
+ return "I couldn't generate a response. Please try again.";
739
+ }
740
+ }
741
+ }
742
+
743
+ // Handle file upload
744
+ async function handleFileUpload(event) {
745
+ const file = event.target.files[0];
746
+ if (!file) return;
747
+
748
+ // Reset file input
749
+ elements.fileInput.value = '';
750
+
751
+ // Show loading state
752
+ addMessage({
753
+ type: 'system',
754
+ content: `Processing ${file.name}...`
755
+ });
756
+
757
+ try {
758
+ let content;
759
+
760
+ if (file.type === 'application/pdf') {
761
+ // PDF processing
762
+ content = await extractTextFromPDF(file);
763
+ } else if (file.type.startsWith('image/')) {
764
+ // Image processing
765
+ content = await extractTextFromImage(file);
766
+ } else if (file.type === 'text/plain' || file.name.endsWith('.txt')) {
767
+ // Text file processing
768
+ content = await file.text();
769
+ } else if (file.name.endsWith('.docx')) {
770
+ // DOCX processing
771
+ content = await extractTextFromDOCX(file);
772
+ } else {
773
+ throw new Error('Unsupported file type');
774
+ }
775
+
776
+ // Update document state
777
+ state.currentDocument = {
778
+ name: file.name,
779
+ content: content,
780
+ uploadedAt: new Date().toLocaleString()
781
+ };
782
+
783
+ // Show document preview
784
+ showDocumentPreview();
785
+
786
+ // Add success message
787
+ addMessage({
788
+ type: 'system',
789
+ content: `Document "${file.name}" uploaded successfully. You can now ask questions about it.`
790
+ });
791
+
792
+ // Save state
793
+ saveState();
794
+ } catch (error) {
795
+ console.error('Error processing file:', error);
796
+ addMessage({
797
+ type: 'system',
798
+ content: `Error processing ${file.name}: ${error.message}`
799
+ });
800
+ }
801
+ }
802
+
803
+ // Extract text from PDF (simplified - in a real app you'd use a library like pdf.js)
804
+ async function extractTextFromPDF(file) {
805
+ return new Promise((resolve) => {
806
+ // Simulate PDF processing
807
+ setTimeout(() => {
808
+ resolve(`PDF content extracted from ${file.name}. This would contain the actual text from the PDF in a real implementation.`);
809
+ }, 1500);
810
  });
811
+ }
812
 
813
+ // Extract text from image (simplified - in a real app you'd use OCR)
814
+ async function extractTextFromImage(file) {
815
+ return new Promise((resolve) => {
816
+ // Simulate OCR processing
817
+ setTimeout(() => {
818
+ resolve(`Text extracted from image ${file.name}. This would contain the OCR results in a real implementation.`);
819
+ }, 1500);
820
+ });
821
+ }
822
+
823
+ // Extract text from DOCX (simplified - in a real app you'd use a library like mammoth)
824
+ async function extractTextFromDOCX(file) {
825
+ return new Promise((resolve) => {
826
+ // Simulate DOCX processing
827
+ setTimeout(() => {
828
+ resolve(`DOCX content extracted from ${file.name}. This would contain the actual text from the document in a real implementation.`);
829
+ }, 1500);
830
+ });
831
+ }
832
+
833
+ // Show document preview
834
+ function showDocumentPreview() {
835
+ if (!state.currentDocument) {
836
+ elements.documentViewer.classList.add('hidden');
837
+ return;
838
+ }
839
 
840
+ elements.documentName.textContent = state.currentDocument.name;
841
+ elements.documentPreview.textContent = state.currentDocument.content.substring(0, 500) + '...';
842
+ elements.documentTime.textContent = state.currentDocument.uploadedAt;
843
+ elements.documentViewer.classList.remove('hidden');
844
+ }
845
+
846
+ // Add a message to the chat
847
+ function addMessage({ type, content, model }) {
848
+ let messageElement;
849
+
850
+ switch (type) {
851
+ case 'user':
852
+ messageElement = createUserMessage(content);
853
+ break;
854
+ case 'ai':
855
+ messageElement = createAIMessage(content, model);
856
+ break;
857
+ case 'system':
858
+ messageElement = createSystemMessage(content);
859
+ break;
860
+ default:
861
+ return;
862
+ }
863
+
864
+ elements.chatMessages.appendChild(messageElement);
865
+ elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
866
+
867
+ // Add to chat history
868
+ state.chatHistory.push({ type, content, model, timestamp: new Date() });
869
+ }
870
+
871
+ // Create user message element
872
+ function createUserMessage(content) {
873
+ const messageDiv = document.createElement('div');
874
+ messageDiv.className = 'flex';
875
+ messageDiv.innerHTML = `
876
+ <div class="w-8 h-8 rounded-full bg-pink-900 flex items-center justify-center mr-3">
877
+ <i class="fas fa-user text-sm"></i>
878
+ </div>
879
+ <div class="bg-gray-800 rounded-lg p-3 max-w-3/4">
880
+ <p>${content}</p>
881
+ </div>
882
+ `;
883
+ return messageDiv;
884
+ }
885
+
886
+ // Create AI message element
887
+ function createAIMessage(content, model) {
888
+ const messageDiv = document.createElement('div');
889
+ messageDiv.className = 'flex justify-end';
890
+
891
+ // Handle image responses
892
+ if (content.startsWith('![Generated Image](')) {
893
+ const imageUrl = content.match(/\(([^)]+)\)/)[1];
894
+ messageDiv.innerHTML = `
895
  <div class="bg-pink-900 bg-opacity-30 rounded-lg p-3 max-w-3/4">
896
+ <img src="${imageUrl}" alt="Generated image" class="max-w-full rounded-lg">
897
+ <div class="mt-2 text-xs text-pink-300 flex items-center">
898
+ <i class="fas fa-robot mr-1"></i>
899
+ <span>${model}</span>
900
  </div>
901
  </div>
902
  <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center ml-3">
 
904
  </div>
905
  `;
906
  } else {
907
+ messageDiv.innerHTML = `
908
+ <div class="bg-pink-900 bg-opacity-30 rounded-lg p-3 max-w-3/4">
909
+ <p>${content}</p>
910
+ <div class="mt-2 text-xs text-pink-300 flex items-center">
911
+ <i class="fas fa-robot mr-1"></i>
912
+ <span>${model}</span>
913
+ </div>
914
  </div>
915
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center ml-3">
916
+ <i class="fas fa-robot text-sm"></i>
917
  </div>
918
  `;
919
  }
920
 
921
+ return messageDiv;
922
+ }
923
+
924
+ // Create system message element
925
+ function createSystemMessage(content) {
926
+ const messageDiv = document.createElement('div');
927
+ messageDiv.className = 'flex justify-center';
928
+ messageDiv.innerHTML = `
929
+ <div class="bg-gray-800 rounded-lg px-4 py-2 text-sm text-gray-400">
930
+ ${content}
931
+ </div>
932
+ `;
933
+ return messageDiv;
934
+ }
935
+
936
+ // Show typing indicator
937
+ function showTypingIndicator() {
938
+ const typingId = 'typing-' + Date.now();
939
+ const typingDiv = document.createElement('div');
940
+ typingDiv.className = 'flex justify-end';
941
+ typingDiv.id = typingId;
942
+ typingDiv.innerHTML = `
943
+ <div class="bg-pink-900 bg-opacity-30 rounded-lg p-3 max-w-3/4">
944
+ <div class="typing-indicator flex space-x-1">
945
+ <div class="typing-dot"></div>
946
+ <div class="typing-dot"></div>
947
+ <div class="typing-dot"></div>
948
+ </div>
949
+ </div>
950
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center ml-3">
951
+ <i class="fas fa-robot text-sm"></i>
952
+ </div>
953
+ `;
954
+ elements.chatMessages.appendChild(typingDiv);
955
+ elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
956
+ return typingId;
957
+ }
958
+
959
+ // Remove typing indicator
960
+ function removeTypingIndicator(id) {
961
+ const indicator = document.getElementById(id);
962
+ if (indicator) {
963
+ indicator.remove();
964
+ }
965
+ }
966
+
967
+ // Start a new chat
968
+ function startNewChat() {
969
+ state.chatHistory = [];
970
+ elements.chatMessages.innerHTML = `
971
+ <div class="flex justify-center">
972
+ <div class="bg-gray-800 rounded-lg px-4 py-2 text-sm text-gray-400">
973
+ Select a model and start chatting or upload a document
974
+ </div>
975
+ </div>
976
+ `;
977
+
978
+ if (state.currentDocument) {
979
+ showDocumentPreview();
980
+ }
981
+
982
+ saveState();
983
+ }
984
+
985
+ // Clear chat but keep current model and document
986
+ function clearChat() {
987
+ state.chatHistory = [];
988
+ elements.chatMessages.innerHTML = `
989
+ <div class="flex justify-center">
990
+ <div class="bg-gray-800 rounded-lg px-4 py-2 text-sm text-gray-400">
991
+ Chat cleared. Ready for new messages.
992
+ </div>
993
+ </div>
994
+ `;
995
 
996
+ if (state.currentDocument) {
997
+ showDocumentPreview();
 
 
 
 
 
 
 
 
 
 
 
 
998
  }
999
+
1000
+ saveState();
1001
+ }
1002
+
1003
+ // Save app state to localStorage
1004
+ function saveState() {
1005
+ localStorage.setItem('neonbloomState', JSON.stringify({
1006
+ currentModel: state.currentModel,
1007
+ chatHistory: state.chatHistory,
1008
+ currentDocument: state.currentDocument
1009
+ }));
1010
  }
1011
 
1012
+ // Load app state from localStorage
1013
+ function loadState() {
1014
+ const savedState = localStorage.getItem('neonbloomState');
1015
+ if (savedState) {
1016
+ const parsedState = JSON.parse(savedState);
 
1017
 
1018
+ // Restore state
1019
+ state.currentModel = parsedState.currentModel;
1020
+ state.chatHistory = parsedState.chatHistory || [];
1021
+ state.currentDocument = parsedState.currentDocument;
1022
+
1023
+ // Restore UI
1024
+ if (state.currentModel) {
1025
+ const modelCard = document.querySelector(`.model-card[data-model="${state.currentModel}"]`);
1026
+ if (modelCard) {
1027
+ modelCard.classList.add('neon-border');
1028
+ }
1029
+ }
1030
+
1031
+ if (state.currentDocument) {
1032
+ showDocumentPreview();
1033
+ }
1034
+
1035
+ // Restore chat history
1036
+ if (state.chatHistory.length > 0) {
1037
+ elements.chatMessages.innerHTML = '';
1038
+ state.chatHistory.forEach(msg => addMessage(msg));
1039
+ }
1040
  }
1041
+ }
1042
+
1043
+ // Initialize the app when DOM is loaded
1044
+ document.addEventListener('DOMContentLoaded', init);
1045
  </script>
1046
  <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>
1047
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
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.
 
 
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.
2
+ make it functional.. make the llms ready for questions