Hugging Face's logo

Spaces:
PetraAI
/
zalamati-deepsite
Running

App Files Community
PetraAI commited on
Commit
f2d6272
·
verified ·
1 Parent(s): 98397dd

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +857 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Zalamati Deepsite
3
- emoji: 🏆
4
- colorFrom: yellow
5
- colorTo: red
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: zalamati-deepsite
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,857 @@
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>Zalamati</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #f3f4f6;
16
+ }
17
+
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #1e1e2e 0%, #111827 100%);
20
+ }
21
+
22
+ .message-animation {
23
+ animation: fadeIn 0.3s ease-out;
24
+ }
25
+
26
+ @keyframes fadeIn {
27
+ from { opacity: 0; transform: translateY(10px); }
28
+ to { opacity: 1; transform: translateY(0); }
29
+ }
30
+
31
+ .typing-indicator::after {
32
+ content: '...';
33
+ animation: typing 1.5s infinite;
34
+ }
35
+
36
+ @keyframes typing {
37
+ 0% { content: '.'; }
38
+ 33% { content: '..'; }
39
+ 66% { content: '...'; }
40
+ }
41
+
42
+ /* Custom scrollbar */
43
+ ::-webkit-scrollbar {
44
+ width: 6px;
45
+ }
46
+
47
+ ::-webkit-scrollbar-track {
48
+ background: #1f2937;
49
+ }
50
+
51
+ ::-webkit-scrollbar-thumb {
52
+ background: #4b5563;
53
+ border-radius: 3px;
54
+ }
55
+
56
+ ::-webkit-scrollbar-thumb:hover {
57
+ background: #6b7280;
58
+ }
59
+
60
+ /* File upload styling */
61
+ .file-upload {
62
+ position: relative;
63
+ overflow: hidden;
64
+ }
65
+
66
+ .file-upload input {
67
+ position: absolute;
68
+ top: 0;
69
+ right: 0;
70
+ margin: 0;
71
+ padding: 0;
72
+ font-size: 20px;
73
+ cursor: pointer;
74
+ opacity: 0;
75
+ height: 100%;
76
+ width: 100%;
77
+ }
78
+
79
+ /* Modal styling */
80
+ .modal {
81
+ display: none;
82
+ position: fixed;
83
+ top: 0;
84
+ left: 0;
85
+ width: 100%;
86
+ height: 100%;
87
+ background-color: rgba(0, 0, 0, 0.7);
88
+ z-index: 1000;
89
+ justify-content: center;
90
+ align-items: center;
91
+ }
92
+
93
+ .modal-content {
94
+ background-color: #1f2937;
95
+ border-radius: 0.5rem;
96
+ width: 90%;
97
+ max-width: 500px;
98
+ max-height: 90vh;
99
+ overflow-y: auto;
100
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
101
+ }
102
+
103
+ /* Settings panel */
104
+ .settings-panel {
105
+ display: none;
106
+ position: absolute;
107
+ right: 1rem;
108
+ top: 4rem;
109
+ background-color: #1f2937;
110
+ border-radius: 0.5rem;
111
+ width: 300px;
112
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
113
+ z-index: 100;
114
+ border: 1px solid #374151;
115
+ }
116
+ </style>
117
+ </head>
118
+ <body class="h-screen flex flex-col">
119
+ <!-- Header -->
120
+ <header class="gradient-bg border-b border-gray-800 py-4 px-6 flex items-center justify-between">
121
+ <div class="flex items-center space-x-3">
122
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center">
123
+ <i class="fas fa-robot text-white"></i>
124
+ </div>
125
+ <h1 class="text-xl font-semibold">Zalamati</h1>
126
+ </div>
127
+
128
+ <div class="flex items-center space-x-4">
129
+ <button id="settingsButton" class="text-gray-400 hover:text-white transition-colors">
130
+ <i class="fas fa-cog"></i>
131
+ </button>
132
+ <button id="themeToggle" class="text-gray-400 hover:text-white transition-colors">
133
+ <i class="fas fa-moon"></i>
134
+ </button>
135
+ <button class="bg-gradient-to-r from-purple-600 to-blue-500 text-white px-4 py-1.5 rounded-full text-sm font-medium hover:opacity-90 transition-opacity">
136
+ Upgrade
137
+ </button>
138
+ </div>
139
+
140
+ <!-- Settings Panel -->
141
+ <div id="settingsPanel" class="settings-panel p-4">
142
+ <div class="flex justify-between items-center mb-4">
143
+ <h3 class="font-medium text-lg">Settings</h3>
144
+ <button id="closeSettings" class="text-gray-400 hover:text-white">
145
+ <i class="fas fa-times"></i>
146
+ </button>
147
+ </div>
148
+
149
+ <div class="space-y-4">
150
+ <div>
151
+ <label class="block text-sm font-medium text-gray-300 mb-1">Theme</label>
152
+ <select id="themeSelect" class="w-full bg-gray-800 border border-gray-700 text-gray-300 rounded-md py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500">
153
+ <option value="dark">Dark</option>
154
+ <option value="light">Light</option>
155
+ <option value="system">System</option>
156
+ </select>
157
+ </div>
158
+
159
+ <div>
160
+ <label class="block text-sm font-medium text-gray-300 mb-1">Default Model</label>
161
+ <select id="defaultModelSelect" class="w-full bg-gray-800 border border-gray-700 text-gray-300 rounded-md py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500">
162
+ <option>ZalamatiPro (GPT-4)</option>
163
+ <option>Zalamati Ultra (GPT-4 Turbo)</option>
164
+ <option>Zalamati Basic (GPT-3.5)</option>
165
+ <option>Claude 3 Opus</option>
166
+ <option>Gemini Pro</option>
167
+ </select>
168
+ </div>
169
+
170
+ <div class="flex items-center justify-between">
171
+ <span class="text-sm font-medium text-gray-300">Enable Web Search</span>
172
+ <label class="relative inline-flex items-center cursor-pointer">
173
+ <input type="checkbox" id="webSearchToggle" checked class="sr-only peer">
174
+ <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
175
+ </label>
176
+ </div>
177
+
178
+ <div class="flex items-center justify-between">
179
+ <span class="text-sm font-medium text-gray-300">Enable Voice Input</span>
180
+ <label class="relative inline-flex items-center cursor-pointer">
181
+ <input type="checkbox" id="voiceInputToggle" checked class="sr-only peer">
182
+ <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
183
+ </label>
184
+ </div>
185
+
186
+ <div class="pt-2 border-t border-gray-700">
187
+ <button class="w-full bg-gray-800 hover:bg-gray-700 text-gray-300 py-2 rounded-md text-sm font-medium transition-colors">
188
+ <i class="fas fa-sign-out-alt mr-2"></i> Logout
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </header>
194
+
195
+ <!-- Main Content -->
196
+ <div class="flex flex-1 overflow-hidden">
197
+ <!-- Sidebar -->
198
+ <aside class="w-64 gradient-bg border-r border-gray-800 hidden md:block overflow-y-auto">
199
+ <div class="p-4">
200
+ <button id="newChatButton" class="w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white py-2.5 rounded-lg font-medium flex items-center justify-center space-x-2 mb-4">
201
+ <i class="fas fa-plus"></i>
202
+ <span>New Chat</span>
203
+ </button>
204
+
205
+ <div class="space-y-1">
206
+ <div class="text-gray-400 text-xs uppercase font-medium px-2 py-1">Recent Chats</div>
207
+ <button class="w-full text-left px-3 py-2 rounded-lg bg-gray-800 text-white flex items-center justify-between">
208
+ <span class="truncate">How to build a React app</span>
209
+ <i class="fas fa-ellipsis-h text-gray-400"></i>
210
+ </button>
211
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-800 text-gray-300 flex items-center justify-between">
212
+ <span class="truncate">JavaScript best practices</span>
213
+ <i class="fas fa-ellipsis-h text-gray-400"></i>
214
+ </button>
215
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-800 text-gray-300 flex items-center justify-between">
216
+ <span class="truncate">Python data analysis</span>
217
+ <i class="fas fa-ellipsis-h text-gray-400"></i>
218
+ </button>
219
+ </div>
220
+
221
+ <div class="mt-6 space-y-1">
222
+ <div class="text-gray-400 text-xs uppercase font-medium px-2 py-1">Collections</div>
223
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-800 text-gray-300 flex items-center space-x-2">
224
+ <i class="fas fa-code text-blue-400"></i>
225
+ <span>Programming</span>
226
+ </button>
227
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-800 text-gray-300 flex items-center space-x-2">
228
+ <i class="fas fa-chart-line text-green-400"></i>
229
+ <span>Data Science</span>
230
+ </button>
231
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-800 text-gray-300 flex items-center space-x-2">
232
+ <i class="fas fa-briefcase text-purple-400"></i>
233
+ <span>Business</span>
234
+ </button>
235
+ </div>
236
+
237
+ <div class="mt-6 p-3 bg-gray-900 rounded-lg">
238
+ <div class="flex items-center space-x-3">
239
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
240
+ <i class="fas fa-user text-gray-400"></i>
241
+ </div>
242
+ <div>
243
+ <div class="font-medium">Free Plan</div>
244
+ <div class="text-xs text-gray-400">5/20 messages left</div>
245
+ </div>
246
+ </div>
247
+ <div class="mt-3 h-1.5 w-full bg-gray-700 rounded-full overflow-hidden">
248
+ <div class="h-full bg-gradient-to-r from-purple-500 to-blue-500 rounded-full" style="width: 25%"></div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </aside>
253
+
254
+ <!-- Chat Area -->
255
+ <main class="flex-1 flex flex-col overflow-hidden">
256
+ <!-- Model Selector -->
257
+ <div class="gradient-bg border-b border-gray-800 py-2 px-4 flex items-center justify-between">
258
+ <div class="flex items-center space-x-2">
259
+ <div class="relative">
260
+ <select id="modelSelect" class="bg-gray-800 border border-gray-700 text-gray-300 rounded-md py-1.5 pl-3 pr-8 text-sm appearance-none focus:outline-none focus:ring-1 focus:ring-purple-500">
261
+ <option>Zalamati Pro (GPT-4)</option>
262
+ <option>Zalamati Ultra (GPT-4 Turbo)</option>
263
+ <option>Zalamati Basic (GPT-3.5)</option>
264
+ <option>Claude 3 Opus</option>
265
+ <option>Gemini Pro</option>
266
+ </select>
267
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
268
+ <i class="fas fa-chevron-down text-xs"></i>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="flex items-center text-xs text-gray-400">
273
+ <i class="fas fa-plug mr-1"></i>
274
+ <span>Internet Access</span>
275
+ <label class="relative inline-flex items-center cursor-pointer ml-2">
276
+ <input type="checkbox" id="internetAccessToggle" checked class="sr-only peer">
277
+ <div class="w-7 h-4 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-blue-500"></div>
278
+ </label>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="flex items-center space-x-3">
283
+ <button id="clearChatButton" class="text-gray-400 hover:text-white transition-colors">
284
+ <i class="fas fa-trash-alt"></i>
285
+ </button>
286
+ <button id="shareChatButton" class="text-gray-400 hover:text-white transition-colors">
287
+ <i class="fas fa-share-alt"></i>
288
+ </button>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Messages Container -->
293
+ <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-6">
294
+ <!-- Welcome Message -->
295
+ <div class="message-animation max-w-3xl mx-auto bg-gray-800 rounded-xl p-4">
296
+ <div class="flex items-start space-x-3">
297
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center shrink-0">
298
+ <i class="fas fa-robot text-white text-sm"></i>
299
+ </div>
300
+ <div class="flex-1">
301
+ <div class="font-medium text-gray-100">Zalamati</div>
302
+ <div class="mt-1 text-gray-300">
303
+ <p>Hello! I'm Zalamati, your intelligent assistant. I can help with:</p>
304
+ <ul class="list-disc pl-5 mt-2 space-y-1">
305
+ <li>Answering questions with web search</li>
306
+ <li>Analyzing uploaded documents</li>
307
+ <li>Code generation and debugging</li>
308
+ <li>Creative writing and brainstorming</li>
309
+ </ul>
310
+ <p class="mt-2">How can I assist you today?</p>
311
+ </div>
312
+ <div class="mt-3 flex flex-wrap gap-2">
313
+ <button class="sample-question text-xs bg-gray-700 hover:bg-gray-600 text-gray-200 px-3 py-1 rounded-full">Explain quantum computing</button>
314
+ <button class="sample-question text-xs bg-gray-700 hover:bg-gray-600 text-gray-200 px-3 py-1 rounded-full">Write a Python script</button>
315
+ <button class="sample-question text-xs bg-gray-700 hover:bg-gray-600 text-gray-200 px-3 py-1 rounded-full">Help me study for exam</button>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <!-- Input Area -->
323
+ <div class="gradient-bg border-t border-gray-800 p-4">
324
+ <div class="max-w-3xl mx-auto">
325
+ <div class="relative">
326
+ <textarea id="userInput" rows="1" class="w-full bg-gray-800 border border-gray-700 rounded-xl py-3 pl-4 pr-12 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-purple-500 resize-none" placeholder="Message Zalamati..."></textarea>
327
+
328
+ <div class="absolute right-3 bottom-3 flex items-center space-x-2">
329
+ <button class="file-upload text-gray-400 hover:text-gray-200 p-1 rounded-full">
330
+ <i class="fas fa-paperclip"></i>
331
+ <input type="file" id="fileUpload" class="hidden">
332
+ </button>
333
+
334
+ <button id="voiceButton" class="text-gray-400 hover:text-gray-200 p-1 rounded-full">
335
+ <i class="fas fa-microphone"></i>
336
+ </button>
337
+
338
+ <button id="sendButton" class="bg-gradient-to-r from-purple-600 to-blue-500 text-white p-2 rounded-full hover:opacity-90 transition-opacity">
339
+ <i class="fas fa-paper-plane"></i>
340
+ </button>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="mt-2 text-xs text-gray-500 text-center">
345
+ Zalamati can make mistakes. Consider checking important information.
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </main>
350
+ </div>
351
+
352
+ <!-- Mobile Bottom Navigation -->
353
+ <div class="md:hidden gradient-bg border-t border-gray-800 flex justify-around py-3">
354
+ <button class="text-gray-400 hover:text-white transition-colors">
355
+ <i class="fas fa-home text-xl"></i>
356
+ </button>
357
+ <button class="text-gray-400 hover:text-white transition-colors">
358
+ <i class="fas fa-comment text-xl"></i>
359
+ </button>
360
+ <button id="mobileUploadButton" class="text-gray-400 hover:text-white transition-colors">
361
+ <i class="fas fa-file-upload text-xl"></i>
362
+ </button>
363
+ <button id="mobileSettingsButton" class="text-gray-400 hover:text-white transition-colors">
364
+ <i class="fas fa-cog text-xl"></i>
365
+ </button>
366
+ </div>
367
+
368
+ <!-- File Upload Modal -->
369
+ <div id="fileUploadModal" class="modal">
370
+ <div class="modal-content p-6">
371
+ <div class="flex justify-between items-center mb-4">
372
+ <h3 class="font-medium text-lg">Upload File</h3>
373
+ <button id="closeUploadModal" class="text-gray-400 hover:text-white">
374
+ <i class="fas fa-times"></i>
375
+ </button>
376
+ </div>
377
+
378
+ <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center mb-4">
379
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
380
+ <p class="text-gray-300 mb-2">Drag & drop files here</p>
381
+ <p class="text-xs text-gray-500 mb-4">or</p>
382
+ <label for="modalFileUpload" class="bg-gray-800 hover:bg-gray-700 text-gray-300 py-2 px-4 rounded-md cursor-pointer">
383
+ Select Files
384
+ </label>
385
+ <input type="file" id="modalFileUpload" class="hidden">
386
+ </div>
387
+
388
+ <div class="text-xs text-gray-500">
389
+ Supported formats: PDF, TXT, DOCX, PPTX, XLSX (Max 25MB)
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Share Modal -->
395
+ <div id="shareModal" class="modal">
396
+ <div class="modal-content p-6">
397
+ <div class="flex justify-between items-center mb-4">
398
+ <h3 class="font-medium text-lg">Share Chat</h3>
399
+ <button id="closeShareModal" class="text-gray-400 hover:text-white">
400
+ <i class="fas fa-times"></i>
401
+ </button>
402
+ </div>
403
+
404
+ <div class="mb-4">
405
+ <label class="block text-sm font-medium text-gray-300 mb-1">Share Link</label>
406
+ <div class="flex">
407
+ <input type="text" id="shareLink" class="flex-1 bg-gray-800 border border-gray-700 text-gray-300 rounded-l-md py-2 px-3 text-sm focus:outline-none" value="https://Zalamatiai.com/share/abc123" readonly>
408
+ <button id="copyShareLink" class="bg-gray-700 hover:bg-gray-600 text-gray-300 py-2 px-3 rounded-r-md text-sm">
409
+ <i class="fas fa-copy"></i>
410
+ </button>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="mb-4">
415
+ <label class="block text-sm font-medium text-gray-300 mb-1">Permissions</label>
416
+ <select class="w-full bg-gray-800 border border-gray-700 text-gray-300 rounded-md py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500">
417
+ <option>Anyone with the link</option>
418
+ <option>Only people you specify</option>
419
+ <option>Only me</option>
420
+ </select>
421
+ </div>
422
+
423
+ <div class="flex space-x-2">
424
+ <button class="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 py-2 rounded-md text-sm font-medium">
425
+ <i class="fab fa-whatsapp mr-2"></i> WhatsApp
426
+ </button>
427
+ <button class="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 py-2 rounded-md text-sm font-medium">
428
+ <i class="fab fa-telegram mr-2"></i> Telegram
429
+ </button>
430
+ <button class="flex-1 bg-gray-800 hover:bg-gray-700 text-gray-300 py-2 rounded-md text-sm font-medium">
431
+ <i class="fas fa-envelope mr-2"></i> Email
432
+ </button>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <script>
438
+ document.addEventListener('DOMContentLoaded', function() {
439
+ // DOM Elements
440
+ const userInput = document.getElementById('userInput');
441
+ const sendButton = document.getElementById('sendButton');
442
+ const messagesContainer = document.getElementById('messages');
443
+ const voiceButton = document.getElementById('voiceButton');
444
+ const fileUpload = document.getElementById('fileUpload');
445
+ const settingsButton = document.getElementById('settingsButton');
446
+ const settingsPanel = document.getElementById('settingsPanel');
447
+ const closeSettings = document.getElementById('closeSettings');
448
+ const themeToggle = document.getElementById('themeToggle');
449
+ const newChatButton = document.getElementById('newChatButton');
450
+ const clearChatButton = document.getElementById('clearChatButton');
451
+ const shareChatButton = document.getElementById('shareChatButton');
452
+ const modelSelect = document.getElementById('modelSelect');
453
+ const internetAccessToggle = document.getElementById('internetAccessToggle');
454
+ const mobileUploadButton = document.getElementById('mobileUploadButton');
455
+ const mobileSettingsButton = document.getElementById('mobileSettingsButton');
456
+ const fileUploadModal = document.getElementById('fileUploadModal');
457
+ const closeUploadModal = document.getElementById('closeUploadModal');
458
+ const modalFileUpload = document.getElementById('modalFileUpload');
459
+ const shareModal = document.getElementById('shareModal');
460
+ const closeShareModal = document.getElementById('closeShareModal');
461
+ const copyShareLink = document.getElementById('copyShareLink');
462
+
463
+ // Initialize chat history
464
+ let chatHistory = [];
465
+
466
+ // Auto-resize textarea
467
+ userInput.addEventListener('input', function() {
468
+ this.style.height = 'auto';
469
+ this.style.height = (this.scrollHeight) + 'px';
470
+ });
471
+
472
+ // Send message on Enter (Shift+Enter for new line)
473
+ userInput.addEventListener('keydown', function(e) {
474
+ if (e.key === 'Enter' && !e.shiftKey) {
475
+ e.preventDefault();
476
+ sendMessage();
477
+ }
478
+ });
479
+
480
+ // Send button click
481
+ sendButton.addEventListener('click', sendMessage);
482
+
483
+ // Sample question buttons
484
+ document.querySelectorAll('.sample-question').forEach(button => {
485
+ button.addEventListener('click', function() {
486
+ userInput.value = this.textContent;
487
+ userInput.dispatchEvent(new Event('input'));
488
+ sendMessage();
489
+ });
490
+ });
491
+
492
+ // Settings panel toggle
493
+ settingsButton.addEventListener('click', function() {
494
+ settingsPanel.style.display = settingsPanel.style.display === 'block' ? 'none' : 'block';
495
+ });
496
+
497
+ mobileSettingsButton.addEventListener('click', function() {
498
+ settingsPanel.style.display = settingsPanel.style.display === 'block' ? 'none' : 'block';
499
+ });
500
+
501
+ closeSettings.addEventListener('click', function() {
502
+ settingsPanel.style.display = 'none';
503
+ });
504
+
505
+ // Close settings when clicking outside
506
+ document.addEventListener('click', function(event) {
507
+ if (!settingsPanel.contains(event.target) && event.target !== settingsButton && event.target !== mobileSettingsButton) {
508
+ settingsPanel.style.display = 'none';
509
+ }
510
+ });
511
+
512
+ // Theme toggle
513
+ themeToggle.addEventListener('click', function() {
514
+ document.body.classList.toggle('light-theme');
515
+ const icon = themeToggle.querySelector('i');
516
+ if (document.body.classList.contains('light-theme')) {
517
+ icon.classList.remove('fa-moon');
518
+ icon.classList.add('fa-sun');
519
+ } else {
520
+ icon.classList.remove('fa-sun');
521
+ icon.classList.add('fa-moon');
522
+ }
523
+ });
524
+
525
+ // New chat button
526
+ newChatButton.addEventListener('click', function() {
527
+ if (messagesContainer.children.length > 1 || chatHistory.length > 0) {
528
+ if (confirm('Start a new chat? Your current chat will be saved.')) {
529
+ clearChat();
530
+ }
531
+ }
532
+ });
533
+
534
+ // Clear chat button
535
+ clearChatButton.addEventListener('click', function() {
536
+ if (messagesContainer.children.length > 1 || chatHistory.length > 0) {
537
+ if (confirm('Are you sure you want to clear this chat?')) {
538
+ clearChat();
539
+ }
540
+ }
541
+ });
542
+
543
+ // Share chat button
544
+ shareChatButton.addEventListener('click', function() {
545
+ shareModal.style.display = 'flex';
546
+ });
547
+
548
+ closeShareModal.addEventListener('click', function() {
549
+ shareModal.style.display = 'none';
550
+ });
551
+
552
+ copyShareLink.addEventListener('click', function() {
553
+ const shareLink = document.getElementById('shareLink');
554
+ shareLink.select();
555
+ document.execCommand('copy');
556
+
557
+ const originalText = this.innerHTML;
558
+ this.innerHTML = '<i class="fas fa-check"></i> Copied!';
559
+
560
+ setTimeout(() => {
561
+ this.innerHTML = originalText;
562
+ }, 2000);
563
+ });
564
+
565
+ // File upload handling
566
+ fileUpload.addEventListener('change', handleFileUpload);
567
+ mobileUploadButton.addEventListener('click', function() {
568
+ fileUploadModal.style.display = 'flex';
569
+ });
570
+
571
+ modalFileUpload.addEventListener('change', function() {
572
+ handleFileUpload({ target: { files: this.files } });
573
+ fileUploadModal.style.display = 'none';
574
+ });
575
+
576
+ closeUploadModal.addEventListener('click', function() {
577
+ fileUploadModal.style.display = 'none';
578
+ });
579
+
580
+ // Close modals when clicking outside
581
+ window.addEventListener('click', function(event) {
582
+ if (event.target === fileUploadModal) {
583
+ fileUploadModal.style.display = 'none';
584
+ }
585
+ if (event.target === shareModal) {
586
+ shareModal.style.display = 'none';
587
+ }
588
+ });
589
+
590
+ // Model select change
591
+ modelSelect.addEventListener('change', function() {
592
+ console.log('Model changed to:', this.value);
593
+ });
594
+
595
+ // Internet access toggle
596
+ internetAccessToggle.addEventListener('change', function() {
597
+ console.log('Internet access:', this.checked ? 'Enabled' : 'Disabled');
598
+ });
599
+
600
+ // Voice recognition
601
+ let recognition;
602
+ let isListening = false;
603
+
604
+ voiceButton.addEventListener('click', toggleVoiceRecognition);
605
+
606
+ // Functions
607
+ function sendMessage() {
608
+ const message = userInput.value.trim();
609
+ if (message === '') return;
610
+
611
+ // Add user message
612
+ addMessage(message, 'user');
613
+ chatHistory.push({ role: 'user', content: message });
614
+ userInput.value = '';
615
+ userInput.style.height = 'auto';
616
+
617
+ // Show typing indicator
618
+ const typingIndicator = document.createElement('div');
619
+ typingIndicator.className = 'max-w-3xl mx-auto bg-gray-800 rounded-xl p-4';
620
+ typingIndicator.innerHTML = `
621
+ <div class="flex items-start space-x-3">
622
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 flex items-center justify-center shrink-0">
623
+ <i class="fas fa-robot text-white text-sm"></i>
624
+ </div>
625
+ <div class="flex-1">
626
+ <div class="font-medium text-gray-100">Zalamati</div>
627
+ <div class="mt-1 text-gray-300 typing-indicator">Thinking</div>
628
+ </div>
629
+ </div>
630
+ `;
631
+ messagesContainer.appendChild(typingIndicator);
632
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
633
+
634
+ // Simulate AI response after delay
635
+ setTimeout(() => {
636
+ messagesContainer.removeChild(typingIndicator);
637
+
638
+ // Get selected model
639
+ const selectedModel = modelSelect.value;
640
+
641
+ // Generate response based on model and message
642
+ let response;
643
+ if (message.toLowerCase().includes('hello') || message.toLowerCase().includes('hi')) {
644
+ response = `Hello! I'm Zalamati (${selectedModel}). How can I assist you today?`;
645
+ } else if (message.toLowerCase().includes('thank')) {
646
+ response = "You're welcome! Is there anything else I can help you with?";
647
+ } else if (message.toLowerCase().includes('code') || message.toLowerCase().includes('program')) {
648
+ response = generateCodeResponse(message, selectedModel);
649
+ } else {
650
+ response = generateGeneralResponse(message, selectedModel);
651
+ }
652
+
653
+ // Add AI response
654
+ addMessage(response, 'ai');
655
+ chatHistory.push({ role: 'assistant', content: response });
656
+ }, 1500 + Math.random() * 2000);
657
+ }
658
+
659
+ function addMessage(content, sender) {
660
+ const messageDiv = document.createElement('div');
661
+ messageDiv.className = 'message-animation max-w-3xl mx-auto ' +
662
+ (sender === 'user' ? 'ml-auto bg-gradient-to-r from-purple-600 to-blue-500' : 'bg-gray-800') +
663
+ ' rounded-xl p-4';
664
+
665
+ messageDiv.innerHTML = `
666
+ <div class="flex items-start space-x-3">
667
+ <div class="w-8 h-8 rounded-full ${sender === 'user' ? 'bg-gray-100' : 'bg-gradient-to-r from-purple-600 to-blue-500'} flex items-center justify-center shrink-0">
668
+ <i class="fas ${sender === 'user' ? 'fa-user text-gray-800' : 'fa-robot text-white text-sm'}"></i>
669
+ </div>
670
+ <div class="flex-1">
671
+ <div class="font-medium ${sender === 'user' ? 'text-white' : 'text-gray-100'}">${sender === 'user' ? 'You' : 'Zalamati'}</div>
672
+ <div class="mt-1 ${sender === 'user' ? 'text-white' : 'text-gray-300'}">
673
+ ${sender === 'user' ? content : content.replace(/\n/g, '<br>')}
674
+ </div>
675
+ ${sender === 'ai' ? `
676
+ <div class="mt-3 flex items-center space-x-4 text-xs text-gray-400">
677
+ <button class="feedback-btn flex items-center space-x-1 hover:text-gray-200" data-feedback="helpful">
678
+ <i class="fas fa-thumbs-up"></i>
679
+ <span>Helpful</span>
680
+ </button>
681
+ <button class="feedback-btn flex items-center space-x-1 hover:text-gray-200" data-feedback="not-helpful">
682
+ <i class="fas fa-thumbs-down"></i>
683
+ <span>Not Helpful</span>
684
+ </button>
685
+ <button class="regenerate-btn flex items-center space-x-1 hover:text-gray-200">
686
+ <i class="fas fa-redo"></i>
687
+ <span>Regenerate</span>
688
+ </button>
689
+ </div>
690
+ ` : ''}
691
+ </div>
692
+ </div>
693
+ `;
694
+
695
+ messagesContainer.appendChild(messageDiv);
696
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
697
+
698
+ // Add event listeners for feedback buttons
699
+ if (sender === 'ai') {
700
+ messageDiv.querySelectorAll('.feedback-btn').forEach(btn => {
701
+ btn.addEventListener('click', function() {
702
+ const feedback = this.getAttribute('data-feedback');
703
+ console.log('Feedback:', feedback);
704
+ this.innerHTML = `<i class="fas fa-${feedback === 'helpful' ? 'check' : 'times'}"></i> ${feedback === 'helpful' ? 'Thanks!' : 'Sorry!'}`;
705
+ });
706
+ });
707
+
708
+ messageDiv.querySelector('.regenerate-btn').addEventListener('click', function() {
709
+ const lastUserMessage = chatHistory[chatHistory.length - 2].content;
710
+ userInput.value = lastUserMessage;
711
+ userInput.dispatchEvent(new Event('input'));
712
+ sendMessage();
713
+ });
714
+ }
715
+ }
716
+
717
+ function clearChat() {
718
+ // Keep only the welcome message
719
+ while (messagesContainer.children.length > 1) {
720
+ messagesContainer.removeChild(messagesContainer.lastChild);
721
+ }
722
+ chatHistory = [];
723
+ }
724
+
725
+ function toggleVoiceRecognition() {
726
+ if (!('webkitSpeechRecognition' in window)) {
727
+ alert('Your browser does not support speech recognition. Try Chrome or Edge.');
728
+ return;
729
+ }
730
+
731
+ if (!isListening) {
732
+ startVoiceRecognition();
733
+ } else {
734
+ stopVoiceRecognition();
735
+ }
736
+ }
737
+
738
+ function startVoiceRecognition() {
739
+ recognition = new webkitSpeechRecognition();
740
+ recognition.continuous = false;
741
+ recognition.interimResults = false;
742
+
743
+ recognition.onstart = function() {
744
+ isListening = true;
745
+ voiceButton.innerHTML = '<i class="fas fa-microphone-slash"></i>';
746
+ voiceButton.classList.remove('text-gray-400', 'hover:text-gray-200');
747
+ voiceButton.classList.add('text-red-400');
748
+ };
749
+
750
+ recognition.onresult = function(event) {
751
+ const transcript = event.results[0][0].transcript;
752
+ userInput.value = transcript;
753
+ userInput.dispatchEvent(new Event('input'));
754
+ };
755
+
756
+ recognition.onerror = function(event) {
757
+ console.error('Speech recognition error', event.error);
758
+ stopVoiceRecognition();
759
+ };
760
+
761
+ recognition.onend = function() {
762
+ stopVoiceRecognition();
763
+ };
764
+
765
+ recognition.start();
766
+ }
767
+
768
+ function stopVoiceRecognition() {
769
+ if (recognition) {
770
+ recognition.stop();
771
+ }
772
+ isListening = false;
773
+ voiceButton.innerHTML = '<i class="fas fa-microphone"></i>';
774
+ voiceButton.classList.remove('text-red-400');
775
+ voiceButton.classList.add('text-gray-400', 'hover:text-gray-200');
776
+ }
777
+
778
+ function handleFileUpload(event) {
779
+ const file = event.target.files[0];
780
+ if (!file) return;
781
+
782
+ // Check file size (25MB max)
783
+ if (file.size > 25 * 1024 * 1024) {
784
+ alert('File size exceeds 25MB limit');
785
+ return;
786
+ }
787
+
788
+ // Check file type
789
+ const allowedTypes = ['application/pdf', 'text/plain',
790
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
791
+ 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
792
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
793
+
794
+ if (!allowedTypes.includes(file.type)) {
795
+ alert('File type not supported');
796
+ return;
797
+ }
798
+
799
+ // Simulate file processing
800
+ addMessage(`Processing file: ${file.name} (${(file.size / 1024).toFixed(1)} KB)`, 'user');
801
+ chatHistory.push({ role: 'user', content: `[File: ${file.name}]` });
802
+
803
+ setTimeout(() => {
804
+ let response;
805
+
806
+ if (file.type === 'application/pdf') {
807
+ response = `I've analyzed the PDF file "${file.name}". It appears to be ${file.size > 1024 * 1024 ? 'a large' : 'a'} document. ` +
808
+ 'I can summarize its content or answer questions about it. What would you like to know?';
809
+ } else if (file.type === 'text/plain') {
810
+ response = `I've processed the text file "${file.name}". It contains plain text data. ` +
811
+ 'I can analyze, summarize, or extract information from it. How can I help?';
812
+ } else {
813
+ response = `I've analyzed the ${file.type.split('.').pop().toUpperCase()} file "${file.name}". ` +
814
+ 'I can extract data, summarize content, or answer questions about this document. What would you like me to do?';
815
+ }
816
+
817
+ addMessage(response, 'ai');
818
+ chatHistory.push({ role: 'assistant', content: response });
819
+ }, 2000);
820
+ }
821
+
822
+ function generateCodeResponse(message, model) {
823
+ const languages = ['Python', 'JavaScript', 'Java', 'C++', 'C#', 'Go', 'Rust', 'TypeScript'];
824
+ const frameworks = ['React', 'Vue', 'Angular', 'Django', 'Flask', 'Spring', '.NET'];
825
+
826
+ const randomLang = languages[Math.floor(Math.random() * languages.length)];
827
+ const randomFramework = frameworks[Math.floor(Math.random() * frameworks.length)];
828
+
829
+ const responses = [
830
+ `Here's a ${randomLang} code example based on your request about "${message}":\n\n` +
831
+ `\`\`\`${randomLang.toLowerCase()}\n// ${randomLang} code example\nfunction example() {\n console.log("Hello from ${model}!");\n}\n\`\`\``,
832
+
833
+ `For "${message}", here's how you might implement it in ${randomFramework}:\n\n` +
834
+ `\`\`\`javascript\n// ${randomFramework} component\nclass Example extends React.Component {\n render() {\n return <div>Hello from ${model}</div>;\n }\n}\n\`\`\``,
835
+
836
+ `Based on your question about "${message}", here's a solution:\n\n` +
837
+ `\`\`\`python\n# ${randomLang} solution\ndef solution():\n return "This is a sample answer from ${model}"\n\`\`\``
838
+ ];
839
+
840
+ return responses[Math.floor(Math.random() * responses.length)];
841
+ }
842
+
843
+ function generateGeneralResponse(message, model) {
844
+ const responses = [
845
+ `I've analyzed your question about "${message}". Using ${model}, here's what I found...`,
846
+ `That's an interesting question! With ${model}, I can tell you that...`,
847
+ `Based on my knowledge and ${model}'s capabilities, here's the answer to your question about "${message}"...`,
848
+ `I understand you're asking about "${message}". Using ${model}, here's a detailed explanation...`
849
+ ];
850
+
851
+ return responses[Math.floor(Math.random() * responses.length)] +
852
+ "\n\nThis is a simulated response. In a real implementation, this would be generated by the AI model you selected.";
853
+ }
854
+ });
855
+ </script>
856
+ <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=PetraAI/zalamati-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
857
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ create a simple ai assistant app, with a simple ui packed with many features like uploading file, switching models, internet browser access, voice chat, design must be modern , sleek, similar to DeepSeek UI with dark theme
2
+ ensure functionallty , nothing work, cant upload files, cant access settings, all functions isnt functioning, fix that