Hugging Face's logo

Spaces:
kavalar
/
deepsite-project-ier4x
Running

App Files Community
kavalar commited on
Commit
e7e3bf0
·
verified ·
1 Parent(s): 1672028

Initial DeepSite commit

Browse files
Files changed (2) hide show
  1. README.md +9 -6
  2. index.html +701 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project Ier4x
3
- emoji: 😻
4
- colorFrom: red
5
- colorTo: green
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: DeepSite Project
3
+ colorFrom: blue
4
+ colorTo: blue
 
5
  sdk: static
6
+ emoji: 📱
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,701 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Neural Prompt Studio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ neural: {
16
+ 50: '#f0f9ff',
17
+ 100: '#e0f2fe',
18
+ 500: '#0ea5e9',
19
+ 600: '#0284c7',
20
+ 700: '#0369a1',
21
+ 800: '#075985',
22
+ 900: '#0c4a6e',
23
+ 950: '#082f49',
24
+ },
25
+ accent: {
26
+ 500: '#8b5cf6',
27
+ 600: '#7c3aed',
28
+ }
29
+ },
30
+ animation: {
31
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
32
+ 'float': 'float 6s ease-in-out infinite',
33
+ 'slide-up': 'slideUp 0.3s ease-out',
34
+ },
35
+ keyframes: {
36
+ float: {
37
+ '0%, 100%': { transform: 'translateY(0)' },
38
+ '50%': { transform: 'translateY(-10px)' },
39
+ },
40
+ slideUp: {
41
+ '0%': { transform: 'translateY(10px)', opacity: '0' },
42
+ '100%': { transform: 'translateY(0)', opacity: '1' },
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
48
+ </script>
49
+ <style>
50
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
51
+
52
+ body {
53
+ font-family: 'Inter', sans-serif;
54
+ background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
55
+ min-height: 100vh;
56
+ }
57
+
58
+ .glass-panel {
59
+ background: rgba(30, 41, 59, 0.7);
60
+ backdrop-filter: blur(12px);
61
+ border: 1px solid rgba(255, 255, 255, 0.1);
62
+ }
63
+
64
+ .neural-glow {
65
+ box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(14, 165, 233, 0.2);
66
+ }
67
+
68
+ .input-focus:focus {
69
+ box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.2);
70
+ }
71
+
72
+ .custom-scrollbar::-webkit-scrollbar {
73
+ width: 8px;
74
+ height: 8px;
75
+ }
76
+
77
+ .custom-scrollbar::-webkit-scrollbar-track {
78
+ background: rgba(15, 23, 42, 0.5);
79
+ border-radius: 4px;
80
+ }
81
+
82
+ .custom-scrollbar::-webkit-scrollbar-thumb {
83
+ background: rgba(139, 92, 246, 0.5);
84
+ border-radius: 4px;
85
+ }
86
+
87
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
88
+ background: rgba(139, 92, 246, 0.7);
89
+ }
90
+
91
+ .range-slider {
92
+ -webkit-appearance: none;
93
+ appearance: none;
94
+ background: transparent;
95
+ cursor: pointer;
96
+ }
97
+
98
+ .range-slider::-webkit-slider-track {
99
+ background: rgba(255, 255, 255, 0.1);
100
+ height: 6px;
101
+ border-radius: 3px;
102
+ }
103
+
104
+ .range-slider::-webkit-slider-thumb {
105
+ -webkit-appearance: none;
106
+ appearance: none;
107
+ background: linear-gradient(135deg, #8b5cf6, #0ea5e9);
108
+ height: 18px;
109
+ width: 18px;
110
+ border-radius: 50%;
111
+ margin-top: -6px;
112
+ box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
113
+ transition: transform 0.1s;
114
+ }
115
+
116
+ .range-slider::-webkit-slider-thumb:hover {
117
+ transform: scale(1.2);
118
+ }
119
+
120
+ .drag-active {
121
+ border-color: #8b5cf6 !important;
122
+ background: rgba(139, 92, 246, 0.1) !important;
123
+ transform: scale(1.02);
124
+ }
125
+
126
+ .image-preview {
127
+ animation: slideUp 0.3s ease-out;
128
+ }
129
+ </style>
130
+ </head>
131
+ <body class="text-slate-200 overflow-x-hidden">
132
+
133
+ <!-- Header -->
134
+ <header class="fixed top-0 w-full z-50 glass-panel border-b border-slate-700/50">
135
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
136
+ <div class="flex items-center space-x-3">
137
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-cyan-500 flex items-center justify-center neural-glow">
138
+ <i data-lucide="brain-circuit" class="w-6 h-6 text-white"></i>
139
+ </div>
140
+ <div>
141
+ <h1 class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">
142
+ Neural Studio
143
+ </h1>
144
+ <p class="text-xs text-slate-400">AI Prompt Interface</p>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="flex items-center space-x-4">
149
+ <button onclick="toggleSettings()" class="p-2 rounded-lg hover:bg-slate-700/50 transition-colors lg:hidden">
150
+ <i data-lucide="settings" class="w-5 h-5"></i>
151
+ </button>
152
+ <div class="hidden lg:flex items-center space-x-2 text-sm text-slate-400">
153
+ <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
154
+ <span>System Online</span>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </header>
159
+
160
+ <!-- Main Content -->
161
+ <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
162
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
163
+
164
+ <!-- Settings Panel (Sidebar on desktop, collapsible on mobile) -->
165
+ <aside id="settingsPanel" class="lg:col-span-4 xl:col-span-3 space-y-6 hidden lg:block">
166
+ <div class="glass-panel rounded-2xl p-6 space-y-6 sticky top-24">
167
+ <div class="flex items-center justify-between">
168
+ <h2 class="text-lg font-semibold text-white flex items-center gap-2">
169
+ <i data-lucide="sliders" class="w-5 h-5 text-violet-400"></i>
170
+ Configuration
171
+ </h2>
172
+ </div>
173
+
174
+ <!-- Model Selection -->
175
+ <div class="space-y-2">
176
+ <label class="text-sm font-medium text-slate-300 flex items-center gap-2">
177
+ <i data-lucide="cpu" class="w-4 h-4"></i>
178
+ Model
179
+ </label>
180
+ <select id="modelSelect" class="w-full bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-violet-500 transition-colors">
181
+ <option value="gpt-4">GPT-4 Turbo</option>
182
+ <option value="gpt-4-vision">GPT-4 Vision</option>
183
+ <option value="claude-3">Claude 3 Opus</option>
184
+ <option value="claude-3-sonnet">Claude 3 Sonnet</option>
185
+ <option value="dalle-3">DALL-E 3</option>
186
+ </select>
187
+ </div>
188
+
189
+ <!-- Temperature Slider -->
190
+ <div class="space-y-3">
191
+ <div class="flex justify-between items-center">
192
+ <label class="text-sm font-medium text-slate-300 flex items-center gap-2">
193
+ <i data-lucide="thermometer" class="w-4 h-4"></i>
194
+ Temperature
195
+ </label>
196
+ <span id="tempValue" class="text-sm font-mono text-violet-400">0.7</span>
197
+ </div>
198
+ <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7"
199
+ class="range-slider w-full" oninput="updateTempValue(this.value)">
200
+ <div class="flex justify-between text-xs text-slate-500">
201
+ <span>Precise</span>
202
+ <span>Creative</span>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Max Tokens -->
207
+ <div class="space-y-3">
208
+ <div class="flex justify-between items-center">
209
+ <label class="text-sm font-medium text-slate-300 flex items-center gap-2">
210
+ <i data-lucide="hash" class="w-4 h-4"></i>
211
+ Max Tokens
212
+ </label>
213
+ <span id="tokenValue" class="text-sm font-mono text-cyan-400">2048</span>
214
+ </div>
215
+ <input type="range" id="maxTokens" min="100" max="4096" step="100" value="2048"
216
+ class="range-slider w-full" oninput="updateTokenValue(this.value)">
217
+ <div class="flex justify-between text-xs text-slate-500">
218
+ <span>100</span>
219
+ <span>4096</span>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Top P -->
224
+ <div class="space-y-3">
225
+ <div class="flex justify-between items-center">
226
+ <label class="text-sm font-medium text-slate-300 flex items-center gap-2">
227
+ <i data-lucide="percent" class="w-4 h-4"></i>
228
+ Top P
229
+ </label>
230
+ <span id="topPValue" class="text-sm font-mono text-emerald-400">1.0</span>
231
+ </div>
232
+ <input type="range" id="topP" min="0" max="1" step="0.1" value="1"
233
+ class="range-slider w-full" oninput="updateTopPValue(this.value)">
234
+ </div>
235
+
236
+ <!-- Advanced Options Toggle -->
237
+ <div class="pt-4 border-t border-slate-700/50">
238
+ <button onclick="toggleAdvanced()" class="flex items-center justify-between w-full text-sm text-slate-400 hover:text-white transition-colors">
239
+ <span>Advanced Options</span>
240
+ <i data-lucide="chevron-down" id="advancedIcon" class="w-4 h-4 transition-transform"></i>
241
+ </button>
242
+ <div id="advancedOptions" class="hidden mt-4 space-y-4">
243
+ <label class="flex items-center justify-between cursor-pointer">
244
+ <span class="text-sm text-slate-300">Stream Response</span>
245
+ <input type="checkbox" checked class="w-4 h-4 rounded border-slate-600 text-violet-600 focus:ring-violet-500 bg-slate-800">
246
+ </label>
247
+ <label class="flex items-center justify-between cursor-pointer">
248
+ <span class="text-sm text-slate-300">JSON Mode</span>
249
+ <input type="checkbox" class="w-4 h-4 rounded border-slate-600 text-violet-600 focus:ring-violet-500 bg-slate-800">
250
+ </label>
251
+ <label class="flex items-center justify-between cursor-pointer">
252
+ <span class="text-sm text-slate-300">Safe Mode</span>
253
+ <input type="checkbox" checked class="w-4 h-4 rounded border-slate-600 text-violet-600 focus:ring-violet-500 bg-slate-800">
254
+ </label>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </aside>
259
+
260
+ <!-- Main Input Area -->
261
+ <div class="lg:col-span-8 xl:col-span-9 space-y-6">
262
+
263
+ <!-- Output Display Area -->
264
+ <div id="outputArea" class="hidden glass-panel rounded-2xl p-6 min-h-[200px] relative overflow-hidden">
265
+ <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-violet-500 via-cyan-500 to-violet-500"></div>
266
+ <div class="flex items-center justify-between mb-4">
267
+ <h3 class="text-lg font-semibold text-white flex items-center gap-2">
268
+ <i data-lucide="sparkles" class="w-5 h-5 text-yellow-400"></i>
269
+ Response
270
+ </h3>
271
+ <div class="flex gap-2">
272
+ <button onclick="copyOutput()" class="p-2 rounded-lg hover:bg-slate-700/50 transition-colors text-slate-400 hover:text-white" title="Copy">
273
+ <i data-lucide="copy" class="w-4 h-4"></i>
274
+ </button>
275
+ <button onclick="clearOutput()" class="p-2 rounded-lg hover:bg-slate-700/50 transition-colors text-slate-400 hover:text-red-400" title="Clear">
276
+ <i data-lucide="trash-2" class="w-4 h-4"></i>
277
+ </button>
278
+ </div>
279
+ </div>
280
+ <div id="outputContent" class="prose prose-invert max-w-none text-slate-300 leading-relaxed">
281
+ <!-- Generated content will appear here -->
282
+ </div>
283
+ <div id="loadingIndicator" class="hidden absolute inset-0 bg-slate-900/80 backdrop-blur-sm flex items-center justify-center rounded-2xl">
284
+ <div class="flex flex-col items-center gap-4">
285
+ <div class="w-12 h-12 border-4 border-violet-500/30 border-t-violet-500 rounded-full animate-spin"></div>
286
+ <p class="text-violet-400 animate-pulse">Processing neural request...</p>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Input Form -->
292
+ <div class="glass-panel rounded-2xl p-1 neural-glow">
293
+ <div class="bg-slate-900/50 rounded-xl p-6 space-y-6">
294
+
295
+ <!-- Prompt Textarea -->
296
+ <div class="space-y-2">
297
+ <label class="text-sm font-medium text-slate-300 flex items-center gap-2">
298
+ <i data-lucide="message-square" class="w-4 h-4 text-cyan-400"></i>
299
+ Prompt
300
+ </label>
301
+ <textarea
302
+ id="promptInput"
303
+ placeholder="Describe what you want to generate, analyze, or create... (e.g., 'Analyze this image and describe the architectural style')"
304
+ class="w-full h-32 bg-slate-800/50 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 placeholder-slate-500 focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 resize-none custom-scrollbar transition-all input-focus"
305
+ ></textarea>
306
+ <div class="flex justify-between text-xs text-slate-500">
307
+ <span>Use Shift+Enter for new line</span>
308
+ <span id="charCount">0 characters</span>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Image Upload Area -->
313
+ <div class="space-y-2">
314
+ <label class="text-sm font-medium text-slate-300 flex items-center gap-2">
315
+ <i data-lucide="image" class="w-4 h-4 text-emerald-400"></i>
316
+ Reference Images
317
+ </label>
318
+
319
+ <div
320
+ id="dropZone"
321
+ onclick="document.getElementById('fileInput').click()"
322
+ ondrop="handleDrop(event)"
323
+ ondragover="handleDragOver(event)"
324
+ ondragleave="handleDragLeave(event)"
325
+ class="border-2 border-dashed border-slate-700 rounded-xl p-8 text-center cursor-pointer hover:border-violet-500/50 hover:bg-slate-800/30 transition-all group"
326
+ >
327
+ <input
328
+ type="file"
329
+ id="fileInput"
330
+ multiple
331
+ accept="image/*"
332
+ class="hidden"
333
+ onchange="handleFiles(this.files)"
334
+ >
335
+ <div class="space-y-3">
336
+ <div class="w-16 h-16 mx-auto rounded-full bg-slate-800 flex items-center justify-center group-hover:scale-110 transition-transform">
337
+ <i data-lucide="upload-cloud" class="w-8 h-8 text-slate-400 group-hover:text-violet-400 transition-colors"></i>
338
+ </div>
339
+ <div>
340
+ <p class="text-sm font-medium text-slate-300">
341
+ Drop images here or click to upload
342
+ </p>
343
+ <p class="text-xs text-slate-500 mt-1">
344
+ Supports JPG, PNG, WebP up to 10MB each
345
+ </p>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Image Preview Grid -->
351
+ <div id="imagePreview" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 mt-4 hidden">
352
+ <!-- Images will be inserted here -->
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Mobile Settings (Visible only on small screens) -->
357
+ <div class="lg:hidden space-y-4 pt-4 border-t border-slate-800">
358
+ <div class="grid grid-cols-2 gap-4">
359
+ <div class="space-y-2">
360
+ <label class="text-xs text-slate-400">Model</label>
361
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-300">
362
+ <option>GPT-4</option>
363
+ <option>Claude 3</option>
364
+ </select>
365
+ </div>
366
+ <div class="space-y-2">
367
+ <label class="text-xs text-slate-400">Temperature</label>
368
+ <input type="number" min="0" max="2" step="0.1" value="0.7"
369
+ class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-300">
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Action Buttons -->
375
+ <div class="flex flex-col sm:flex-row gap-3 pt-2">
376
+ <button
377
+ onclick="generateResponse()"
378
+ id="generateBtn"
379
+ class="flex-1 bg-gradient-to-r from-violet-600 to-cyan-600 hover:from-violet-500 hover:to-cyan-500 text-white font-semibold py-3 px-6 rounded-xl flex items-center justify-center gap-2 transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-violet-500/25"
380
+ >
381
+ <i data-lucide="wand-2" class="w-5 h-5"></i>
382
+ Generate Response
383
+ </button>
384
+ <button
385
+ onclick="clearForm()"
386
+ class="px-6 py-3 rounded-xl border border-slate-700 text-slate-400 hover:text-white hover:border-slate-500 hover:bg-slate-800/50 transition-all flex items-center justify-center gap-2"
387
+ >
388
+ <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
389
+ Reset
390
+ </button>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Quick Prompts -->
396
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
397
+ <button onclick="setPrompt('Analyze this image and provide a detailed description of the visual elements, composition, and mood.')" class="glass-panel p-4 rounded-xl text-left hover:bg-slate-800/50 transition-all group border border-transparent hover:border-violet-500/30">
398
+ <i data-lucide="eye" class="w-5 h-5 text-violet-400 mb-2 group-hover:scale-110 transition-transform"></i>
399
+ <p class="text-sm font-medium text-slate-300">Image Analysis</p>
400
+ <p class="text-xs text-slate-500 mt-1">Detailed visual description</p>
401
+ </button>
402
+ <button onclick="setPrompt('Generate creative ideas for a futuristic city design with sustainable architecture.')" class="glass-panel p-4 rounded-xl text-left hover:bg-slate-800/50 transition-all group border border-transparent hover:border-cyan-500/30">
403
+ <i data-lucide="lightbulb" class="w-5 h-5 text-cyan-400 mb-2 group-hover:scale-110 transition-transform"></i>
404
+ <p class="text-sm font-medium text-slate-300">Creative Ideas</p>
405
+ <p class="text-xs text-slate-500 mt-1">Brainstorming assistant</p>
406
+ </button>
407
+ <button onclick="setPrompt('Review and improve this code for better performance and readability.')" class="glass-panel p-4 rounded-xl text-left hover:bg-slate-800/50 transition-all group border border-transparent hover:border-emerald-500/30">
408
+ <i data-lucide="code-2" class="w-5 h-5 text-emerald-400 mb-2 group-hover:scale-110 transition-transform"></i>
409
+ <p class="text-sm font-medium text-slate-300">Code Review</p>
410
+ <p class="text-xs text-slate-500 mt-1">Optimization suggestions</p>
411
+ </button>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </main>
416
+
417
+ <!-- Toast Notification -->
418
+ <div id="toast" class="fixed bottom-6 right-6 transform translate-y-20 opacity-0 transition-all duration-300 z-50">
419
+ <div class="glass-panel px-6 py-3 rounded-xl border border-violet-500/30 flex items-center gap-3 shadow-2xl shadow-violet-500/20">
420
+ <i data-lucide="check-circle" class="w-5 h-5 text-emerald-400"></i>
421
+ <span id="toastMessage" class="text-sm font-medium text-white">Action completed</span>
422
+ </div>
423
+ </div>
424
+
425
+ <script>
426
+ // Initialize Lucide icons
427
+ lucide.createIcons();
428
+
429
+ // Global variables
430
+ let uploadedImages = [];
431
+
432
+ // Update slider values
433
+ function updateTempValue(val) {
434
+ document.getElementById('tempValue').textContent = val;
435
+ }
436
+
437
+ function updateTokenValue(val) {
438
+ document.getElementById('tokenValue').textContent = val;
439
+ }
440
+
441
+ function updateTopPValue(val) {
442
+ document.getElementById('topPValue').textContent = val;
443
+ }
444
+
445
+ // Toggle settings panel on mobile
446
+ function toggleSettings() {
447
+ const panel = document.getElementById('settingsPanel');
448
+ panel.classList.toggle('hidden');
449
+ panel.classList.toggle('fixed');
450
+ panel.classList.toggle('inset-0');
451
+ panel.classList.toggle('z-40');
452
+ panel.classList.toggle('bg-slate-900/95');
453
+ panel.classList.toggle('p-4');
454
+ if (!panel.classList.contains('hidden')) {
455
+ panel.querySelector('.glass-panel').classList.add('h-full', 'overflow-y-auto');
456
+ }
457
+ }
458
+
459
+ // Toggle advanced options
460
+ function toggleAdvanced() {
461
+ const advanced = document.getElementById('advancedOptions');
462
+ const icon = document.getElementById('advancedIcon');
463
+ advanced.classList.toggle('hidden');
464
+ icon.style.transform = advanced.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
465
+ }
466
+
467
+ // Drag and drop handlers
468
+ function handleDragOver(e) {
469
+ e.preventDefault();
470
+ e.currentTarget.classList.add('drag-active');
471
+ }
472
+
473
+ function handleDragLeave(e) {
474
+ e.currentTarget.classList.remove('drag-active');
475
+ }
476
+
477
+ function handleDrop(e) {
478
+ e.preventDefault();
479
+ e.currentTarget.classList.remove('drag-active');
480
+ const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
481
+ handleFiles(files);
482
+ }
483
+
484
+ // Handle file uploads
485
+ function handleFiles(files) {
486
+ const previewContainer = document.getElementById('imagePreview');
487
+ const filesArray = Array.from(files);
488
+
489
+ filesArray.forEach(file => {
490
+ if (file.size > 10 * 1024 * 1024) {
491
+ showToast('File too large: ' + file.name, 'error');
492
+ return;
493
+ }
494
+
495
+ const reader = new FileReader();
496
+ reader.onload = (e) => {
497
+ const imageId = Date.now() + Math.random();
498
+ uploadedImages.push({ id: imageId, file: file, src: e.target.result });
499
+ renderImages();
500
+ };
501
+ reader.readAsDataURL(file);
502
+ });
503
+
504
+ if (filesArray.length > 0) {
505
+ previewContainer.classList.remove('hidden');
506
+ }
507
+ }
508
+
509
+ // Render image previews
510
+ function renderImages() {
511
+ const container = document.getElementById('imagePreview');
512
+ container.innerHTML = '';
513
+
514
+ uploadedImages.forEach((img, index) => {
515
+ const div = document.createElement('div');
516
+ div.className = 'image-preview relative group aspect-square rounded-xl overflow-hidden border border-slate-700 bg-slate-800';
517
+ div.innerHTML = `
518
+ <img src="${img.src}" alt="Preview" class="w-full h-full object-cover">
519
+ <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
520
+ <button onclick="viewImage(${index})" class="p-2 rounded-full bg-white/20 hover:bg-white/40 text-white transition-colors">
521
+ <i data-lucide="zoom-in" class="w-4 h-4"></i>
522
+ </button>
523
+ <button onclick="removeImage(${img.id})" class="p-2 rounded-full bg-red-500/20 hover:bg-red-500/40 text-red-300 transition-colors">
524
+ <i data-lucide="x" class="w-4 h-4"></i>
525
+ </button>
526
+ </div>
527
+ <div class="absolute top-2 right-2 bg-black/60 px-2 py-1 rounded text-xs text-white font-mono">
528
+ ${(img.file.size / 1024).toFixed(0)}KB
529
+ </div>
530
+ `;
531
+ container.appendChild(div);
532
+ });
533
+
534
+ if (uploadedImages.length === 0) {
535
+ container.classList.add('hidden');
536
+ }
537
+
538
+ lucide.createIcons();
539
+ }
540
+
541
+ // Remove image
542
+ function removeImage(id) {
543
+ uploadedImages = uploadedImages.filter(img => img.id !== id);
544
+ renderImages();
545
+ }
546
+
547
+ // View image (simple alert for demo, could be modal)
548
+ function viewImage(index) {
549
+ // In a real app, this would open a lightbox
550
+ console.log('Viewing image:', uploadedImages[index]);
551
+ }
552
+
553
+ // Set quick prompt
554
+ function setPrompt(text) {
555
+ const textarea = document.getElementById('promptInput');
556
+ textarea.value = text;
557
+ textarea.focus();
558
+ updateCharCount();
559
+ showToast('Prompt template loaded');
560
+ }
561
+
562
+ // Character count
563
+ document.getElementById('promptInput').addEventListener('input', updateCharCount);
564
+
565
+ function updateCharCount() {
566
+ const count = document.getElementById('promptInput').value.length;
567
+ document.getElementById('charCount').textContent = count + ' characters';
568
+ }
569
+
570
+ // Generate response (simulated)
571
+ function generateResponse() {
572
+ const prompt = document.getElementById('promptInput').value.trim();
573
+ if (!prompt) {
574
+ showToast('Please enter a prompt first', 'error');
575
+ document.getElementById('promptInput').focus();
576
+ return;
577
+ }
578
+
579
+ const outputArea = document.getElementById('outputArea');
580
+ const loading = document.getElementById('loadingIndicator');
581
+ const content = document.getElementById('outputContent');
582
+ const btn = document.getElementById('generateBtn');
583
+
584
+ // Show output area if hidden
585
+ outputArea.classList.remove('hidden');
586
+
587
+ // Show loading
588
+ loading.classList.remove('hidden');
589
+ btn.disabled = true;
590
+ btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Processing...';
591
+ lucide.createIcons();
592
+
593
+ // Simulate API call
594
+ setTimeout(() => {
595
+ loading.classList.add('hidden');
596
+ btn.disabled = false;
597
+ btn.innerHTML = '<i data-lucide="wand-2" class="w-5 h-5"></i> Generate Response';
598
+ lucide.createIcons();
599
+
600
+ // Generate mock response
601
+ const model = document.getElementById('modelSelect').value;
602
+ const temp = document.getElementById('temperature').value;
603
+ const hasImages = uploadedImages.length > 0;
604
+
605
+ let response = '';
606
+ if (hasImages) {
607
+ response = `<p class="mb-4">I've analyzed the ${uploadedImages.length} image(s) you provided along with your prompt request.</p>
608
+ <p class="mb-4"><strong>Prompt:</strong> "${prompt}"</p>
609
+ <p class="mb-4">Based on the visual analysis using <span class="text-violet-400">${model}</span> at temperature ${temp}, I can observe several key elements:</p>
610
+ <ul class="list-disc pl-5 mb-4 space-y-1">
611
+ <li>Visual composition and spatial relationships</li>
612
+ <li>Color palette and lighting conditions</li>
613
+ <li>Texture details and material properties</li>
614
+ <li>Contextual elements within the scene</li>
615
+ </ul>
616
+ <p>The image appears to contain relevant information that corresponds to your query. Would you like me to focus on any specific aspect of the analysis?</p>`;
617
+ } else {
618
+ response = `<p class="mb-4">Processing your request using <span class="text-violet-400">${model}</span> (temp: ${temp})...</p>
619
+ <p class="mb-4"><strong>Your prompt:</strong> "${prompt}"</p>
620
+ <p class="mb-4">This is a simulated response demonstrating the interface functionality. In a production environment, this would connect to the actual ${model} API endpoint and return real generated content based on your configuration.</p>
621
+ <div class="bg-slate-800/50 rounded-lg p-4 border-l-4 border-violet-500 my-4">
622
+ <p class="text-sm text-slate-400">Configuration used:</p>
623
+ <ul class="text-xs text-slate-500 mt-2 space-y-1 font-mono">
624
+ <li>Model: ${model}</li>
625
+ <li>Temperature: ${temp}</li>
626
+ <li>Max Tokens: ${document.getElementById('maxTokens').value}</li>
627
+ <li>Top P: ${document.getElementById('topP').value}</li>
628
+ </ul>
629
+ </div>`;
630
+ }
631
+
632
+ content.innerHTML = response;
633
+ outputArea.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
634
+ showToast('Response generated successfully');
635
+ }, 2000);
636
+ }
637
+
638
+ // Clear output
639
+ function clearOutput() {
640
+ document.getElementById('outputArea').classList.add('hidden');
641
+ document.getElementById('outputContent').innerHTML = '';
642
+ }
643
+
644
+ // Copy output
645
+ function copyOutput() {
646
+ const content = document.getElementById('outputContent').innerText;
647
+ navigator.clipboard.writeText(content).then(() => {
648
+ showToast('Copied to clipboard');
649
+ });
650
+ }
651
+
652
+ // Clear form
653
+ function clearForm() {
654
+ document.getElementById('promptInput').value = '';
655
+ uploadedImages = [];
656
+ renderImages();
657
+ updateCharCount();
658
+ clearOutput();
659
+ showToast('Form cleared');
660
+ }
661
+
662
+ // Toast notification
663
+ function showToast(message, type = 'success') {
664
+ const toast = document.getElementById('toast');
665
+ const toastMessage = document.getElementById('toastMessage');
666
+ const icon = toast.querySelector('i');
667
+
668
+ toastMessage.textContent = message;
669
+
670
+ if (type === 'error') {
671
+ icon.className = 'w-5 h-5 text-red-400';
672
+ icon.setAttribute('data-lucide', 'alert-circle');
673
+ } else {
674
+ icon.className = 'w-5 h-5 text-emerald-400';
675
+ icon.setAttribute('data-lucide', 'check-circle');
676
+ }
677
+
678
+ lucide.createIcons();
679
+
680
+ toast.classList.remove('translate-y-20', 'opacity-0');
681
+
682
+ setTimeout(() => {
683
+ toast.classList.add('translate-y-20', 'opacity-0');
684
+ }, 3000);
685
+ }
686
+
687
+ // Keyboard shortcuts
688
+ document.addEventListener('keydown', (e) => {
689
+ if (e.ctrlKey && e.key === 'Enter') {
690
+ generateResponse();
691
+ }
692
+ });
693
+
694
+ // Initialize
695
+ document.addEventListener('DOMContentLoaded', () => {
696
+ updateCharCount();
697
+ });
698
+ </script>
699
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
700
+ </body>
701
+ </html>