Hugging Face's logo

Spaces:
swapit
/
kates
Running

App Files Community
swapit commited on
Commit
9186170
·
verified ·
1 Parent(s): 8fff9af

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +446 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kates
3
- emoji: ⚡
4
  colorFrom: green
5
- colorTo: gray
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: kates
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: green
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,446 @@
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>Image & Video Editor | Creative Studio</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
+ .editor-container {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .tool-btn {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .tool-btn:hover {
17
+ transform: translateY(-3px);
18
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
19
+ }
20
+ .preview-box {
21
+ box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
22
+ }
23
+ .slider-thumb::-webkit-slider-thumb {
24
+ -webkit-appearance: none;
25
+ appearance: none;
26
+ width: 20px;
27
+ height: 20px;
28
+ border-radius: 50%;
29
+ background: #4f46e5;
30
+ cursor: pointer;
31
+ }
32
+ .tab-active {
33
+ border-bottom: 3px solid #4f46e5;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50">
38
+ <!-- Header -->
39
+ <header class="bg-white shadow-sm">
40
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
41
+ <div class="flex items-center space-x-2">
42
+ <i class="fas fa-camera-retro text-indigo-600 text-2xl"></i>
43
+ <h1 class="text-xl font-bold text-gray-800">Creative Studio</h1>
44
+ </div>
45
+ <nav class="hidden md:flex space-x-8">
46
+ <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Home</a>
47
+ <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Features</a>
48
+ <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Tutorials</a>
49
+ <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Pricing</a>
50
+ </nav>
51
+ <div class="flex items-center space-x-4">
52
+ <button class="px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100">
53
+ <i class="fas fa-user-circle text-xl"></i>
54
+ </button>
55
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
56
+ Upgrade
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </header>
61
+
62
+ <!-- Main Content -->
63
+ <main class="container mx-auto px-4 py-8">
64
+ <div class="flex flex-col lg:flex-row gap-8">
65
+ <!-- Tools Panel -->
66
+ <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-6 h-fit">
67
+ <div class="flex border-b mb-6">
68
+ <button id="image-tab" class="tab-active px-4 py-2 font-medium text-indigo-600">Image</button>
69
+ <button id="video-tab" class="px-4 py-2 font-medium text-gray-500 hover:text-indigo-600">Video</button>
70
+ </div>
71
+
72
+ <div id="image-tools">
73
+ <div class="mb-6">
74
+ <h3 class="font-medium text-gray-700 mb-3">Upload Media</h3>
75
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50">
76
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
77
+ <p class="text-gray-500">Drag & drop files here</p>
78
+ <p class="text-sm text-gray-400 mt-1">or click to browse</p>
79
+ <input type="file" id="file-upload" class="hidden" accept="image/*">
80
+ </div>
81
+ </div>
82
+
83
+ <div class="mb-6">
84
+ <h3 class="font-medium text-gray-700 mb-3">Face Tools</h3>
85
+ <div class="grid grid-cols-3 gap-3">
86
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
87
+ <i class="fas fa-user-edit text-indigo-600 text-xl mb-1"></i>
88
+ <span class="text-xs text-gray-700">Face Swap</span>
89
+ </button>
90
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
91
+ <i class="fas fa-smile text-indigo-600 text-xl mb-1"></i>
92
+ <span class="text-xs text-gray-700">Expressions</span>
93
+ </button>
94
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
95
+ <i class="fas fa-magic text-indigo-600 text-xl mb-1"></i>
96
+ <span class="text-xs text-gray-700">Beautify</span>
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="mb-6">
102
+ <h3 class="font-medium text-gray-700 mb-3">Body Tools</h3>
103
+ <div class="space-y-4">
104
+ <div>
105
+ <label class="block text-sm text-gray-600 mb-1">Body Shape</label>
106
+ <input type="range" class="w-full slider-thumb">
107
+ </div>
108
+ <div>
109
+ <label class="block text-sm text-gray-600 mb-1">Height</label>
110
+ <input type="range" class="w-full slider-thumb">
111
+ </div>
112
+ <div>
113
+ <label class="block text-sm text-gray-600 mb-1">Slimness</label>
114
+ <input type="range" class="w-full slider-thumb">
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="mb-6">
120
+ <h3 class="font-medium text-gray-700 mb-3">Effects</h3>
121
+ <div class="grid grid-cols-4 gap-2">
122
+ <div class="effect-thumb bg-gray-200 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div>
123
+ <div class="effect-thumb bg-gray-300 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div>
124
+ <div class="effect-thumb bg-gray-400 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div>
125
+ <div class="effect-thumb bg-gray-500 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div>
126
+ <div class="effect-thumb bg-gray-600 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div>
127
+ <div class="effect-thumb bg-gray-700 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div>
128
+ <div class="effect-thumb bg-gray-800 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div>
129
+ <div class="effect-thumb bg-gray-900 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div id="video-tools" class="hidden">
135
+ <div class="mb-6">
136
+ <h3 class="font-medium text-gray-700 mb-3">Video Effects</h3>
137
+ <div class="grid grid-cols-3 gap-3">
138
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
139
+ <i class="fas fa-film text-indigo-600 text-xl mb-1"></i>
140
+ <span class="text-xs text-gray-700">Filters</span>
141
+ </button>
142
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
143
+ <i class="fas fa-exchange-alt text-indigo-600 text-xl mb-1"></i>
144
+ <span class="text-xs text-gray-700">Transitions</span>
145
+ </button>
146
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
147
+ <i class="fas fa-music text-indigo-600 text-xl mb-1"></i>
148
+ <span class="text-xs text-gray-700">Audio</span>
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="mb-6">
154
+ <h3 class="font-medium text-gray-700 mb-3">Timeline Tools</h3>
155
+ <div class="space-y-4">
156
+ <div>
157
+ <label class="block text-sm text-gray-600 mb-1">Speed</label>
158
+ <input type="range" class="w-full slider-thumb">
159
+ </div>
160
+ <div>
161
+ <label class="block text-sm text-gray-600 mb-1">Trim</label>
162
+ <div class="bg-gray-200 h-10 rounded-md relative">
163
+ <div class="absolute left-2 right-2 top-1/2 transform -translate-y-1/2 h-1 bg-gray-400 rounded-full">
164
+ <div class="absolute left-0 right-0 h-6 -top-2.5">
165
+ <div class="absolute w-4 h-6 bg-indigo-600 rounded-sm left-0 cursor-move"></div>
166
+ <div class="absolute w-4 h-6 bg-indigo-600 rounded-sm right-0 cursor-move"></div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="mb-6">
175
+ <h3 class="font-medium text-gray-700 mb-3">Add Elements</h3>
176
+ <div class="grid grid-cols-3 gap-3">
177
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
178
+ <i class="fas fa-font text-indigo-600 text-xl mb-1"></i>
179
+ <span class="text-xs text-gray-700">Text</span>
180
+ </button>
181
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
182
+ <i class="fas fa-sticky-note text-indigo-600 text-xl mb-1"></i>
183
+ <span class="text-xs text-gray-700">Stickers</span>
184
+ </button>
185
+ <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50">
186
+ <i class="fas fa-draw-polygon text-indigo-600 text-xl mb-1"></i>
187
+ <span class="text-xs text-gray-700">Shapes</span>
188
+ </button>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Editor Area -->
195
+ <div class="w-full lg:w-2/4 editor-container rounded-xl p-6">
196
+ <div class="preview-box bg-white rounded-lg overflow-hidden relative" style="height: 500px;">
197
+ <div class="absolute inset-0 flex items-center justify-center">
198
+ <div class="text-center">
199
+ <i class="fas fa-image text-gray-300 text-5xl mb-3"></i>
200
+ <p class="text-gray-400">Upload an image to start editing</p>
201
+ </div>
202
+ </div>
203
+ <img id="preview-image" src="" alt="" class="hidden w-full h-full object-contain">
204
+ <video id="preview-video" controls class="hidden w-full h-full object-contain"></video>
205
+ </div>
206
+
207
+ <div class="mt-6 flex justify-center space-x-4">
208
+ <button id="undo-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 disabled:opacity-50" disabled>
209
+ <i class="fas fa-undo mr-2"></i> Undo
210
+ </button>
211
+ <button id="redo-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 disabled:opacity-50" disabled>
212
+ <i class="fas fa-redo mr-2"></i> Redo
213
+ </button>
214
+ <button id="reset-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
215
+ <i class="fas fa-trash-alt mr-2"></i> Reset
216
+ </button>
217
+ <button id="save-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
218
+ <i class="fas fa-download mr-2"></i> Save
219
+ </button>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Layers Panel -->
224
+ <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-6 h-fit">
225
+ <div class="flex justify-between items-center mb-4">
226
+ <h3 class="font-medium text-gray-700">Layers</h3>
227
+ <button class="text-indigo-600 hover:text-indigo-800">
228
+ <i class="fas fa-plus"></i>
229
+ </button>
230
+ </div>
231
+
232
+ <div class="space-y-3">
233
+ <div class="flex items-center p-2 bg-indigo-50 rounded-md">
234
+ <div class="w-10 h-10 bg-gray-300 rounded-md mr-3"></div>
235
+ <div class="flex-1">
236
+ <p class="text-sm font-medium">Base Image</p>
237
+ <p class="text-xs text-gray-500">Original</p>
238
+ </div>
239
+ <button class="text-gray-400 hover:text-gray-600">
240
+ <i class="fas fa-eye"></i>
241
+ </button>
242
+ </div>
243
+
244
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-md">
245
+ <div class="w-10 h-10 bg-gray-200 rounded-md mr-3"></div>
246
+ <div class="flex-1">
247
+ <p class="text-sm font-medium">Face Adjustment</p>
248
+ <p class="text-xs text-gray-500">Layer 1</p>
249
+ </div>
250
+ <button class="text-gray-400 hover:text-gray-600">
251
+ <i class="fas fa-eye"></i>
252
+ </button>
253
+ </div>
254
+
255
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-md">
256
+ <div class="w-10 h-10 bg-gray-100 rounded-md mr-3"></div>
257
+ <div class="flex-1">
258
+ <p class="text-sm font-medium">Body Shape</p>
259
+ <p class="text-xs text-gray-500">Layer 2</p>
260
+ </div>
261
+ <button class="text-gray-400 hover:text-gray-600">
262
+ <i class="fas fa-eye"></i>
263
+ </button>
264
+ </div>
265
+
266
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-md">
267
+ <div class="w-10 h-10 bg-gray-50 rounded-md mr-3"></div>
268
+ <div class="flex-1">
269
+ <p class="text-sm font-medium">Color Filter</p>
270
+ <p class="text-xs text-gray-500">Layer 3</p>
271
+ </div>
272
+ <button class="text-gray-400 hover:text-gray-600">
273
+ <i class="fas fa-eye-slash text-gray-300"></i>
274
+ </button>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="mt-6">
279
+ <h3 class="font-medium text-gray-700 mb-3">Export Options</h3>
280
+ <div class="space-y-3">
281
+ <div class="flex items-center">
282
+ <input type="radio" id="format-jpg" name="export-format" class="mr-2" checked>
283
+ <label for="format-jpg" class="text-sm">JPG</label>
284
+ </div>
285
+ <div class="flex items-center">
286
+ <input type="radio" id="format-png" name="export-format" class="mr-2">
287
+ <label for="format-png" class="text-sm">PNG</label>
288
+ </div>
289
+ <div class="flex items-center">
290
+ <input type="radio" id="format-webp" name="export-format" class="mr-2">
291
+ <label for="format-webp" class="text-sm">WebP</label>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="mt-4">
296
+ <label class="block text-sm text-gray-600 mb-1">Quality</label>
297
+ <input type="range" class="w-full slider-thumb">
298
+ </div>
299
+
300
+ <div class="mt-4">
301
+ <label class="block text-sm text-gray-600 mb-1">Dimensions</label>
302
+ <select class="w-full p-2 border border-gray-300 rounded-md text-sm">
303
+ <option>Original</option>
304
+ <option>1080p (1920×1080)</option>
305
+ <option>720p (1280×720)</option>
306
+ <option>480p (854×480)</option>
307
+ <option>Custom...</option>
308
+ </select>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </main>
314
+
315
+ <!-- Footer -->
316
+ <footer class="bg-gray-800 text-white py-8 mt-12">
317
+ <div class="container mx-auto px-4">
318
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
319
+ <div>
320
+ <h3 class="text-lg font-medium mb-4">Creative Studio</h3>
321
+ <p class="text-gray-400 text-sm">Powerful yet simple photo and video editing tools for creators of all levels.</p>
322
+ </div>
323
+ <div>
324
+ <h4 class="font-medium mb-4">Features</h4>
325
+ <ul class="space-y-2 text-sm text-gray-400">
326
+ <li><a href="#" class="hover:text-white">Photo Editor</a></li>
327
+ <li><a href="#" class="hover:text-white">Video Editor</a></li>
328
+ <li><a href="#" class="hover:text-white">AI Tools</a></li>
329
+ <li><a href="#" class="hover:text-white">Effects</a></li>
330
+ </ul>
331
+ </div>
332
+ <div>
333
+ <h4 class="font-medium mb-4">Company</h4>
334
+ <ul class="space-y-2 text-sm text-gray-400">
335
+ <li><a href="#" class="hover:text-white">About Us</a></li>
336
+ <li><a href="#" class="hover:text-white">Careers</a></li>
337
+ <li><a href="#" class="hover:text-white">Blog</a></li>
338
+ <li><a href="#" class="hover:text-white">Contact</a></li>
339
+ </ul>
340
+ </div>
341
+ <div>
342
+ <h4 class="font-medium mb-4">Legal</h4>
343
+ <ul class="space-y-2 text-sm text-gray-400">
344
+ <li><a href="#" class="hover:text-white">Terms of Service</a></li>
345
+ <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
346
+ <li><a href="#" class="hover:text-white">Content Policy</a></li>
347
+ <li><a href="#" class="hover:text-white">Community Guidelines</a></li>
348
+ </ul>
349
+ </div>
350
+ </div>
351
+ <div class="border-t border-gray-700 mt-8 pt-6 text-sm text-gray-400">
352
+ <div class="flex flex-col md:flex-row justify-between items-center">
353
+ <p>© 2023 Creative Studio. All rights reserved.</p>
354
+ <div class="flex space-x-6 mt-4 md:mt-0">
355
+ <a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a>
356
+ <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
357
+ <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
358
+ <a href="#" class="hover:text-white"><i class="fab fa-youtube"></i></a>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </footer>
364
+
365
+ <script>
366
+ // Tab switching functionality
367
+ document.getElementById('image-tab').addEventListener('click', function() {
368
+ this.classList.add('tab-active');
369
+ document.getElementById('video-tab').classList.remove('tab-active');
370
+ document.getElementById('image-tools').classList.remove('hidden');
371
+ document.getElementById('video-tools').classList.add('hidden');
372
+ });
373
+
374
+ document.getElementById('video-tab').addEventListener('click', function() {
375
+ this.classList.add('tab-active');
376
+ document.getElementById('image-tab').classList.remove('tab-active');
377
+ document.getElementById('video-tools').classList.remove('hidden');
378
+ document.getElementById('image-tools').classList.add('hidden');
379
+ });
380
+
381
+ // File upload functionality
382
+ const fileUpload = document.getElementById('file-upload');
383
+ const uploadArea = document.querySelector('.border-dashed');
384
+ const previewImage = document.getElementById('preview-image');
385
+ const previewVideo = document.getElementById('preview-video');
386
+ const placeholder = document.querySelector('.preview-box > div');
387
+
388
+ uploadArea.addEventListener('click', () => fileUpload.click());
389
+
390
+ fileUpload.addEventListener('change', function(e) {
391
+ const file = e.target.files[0];
392
+ if (!file) return;
393
+
394
+ const reader = new FileReader();
395
+ reader.onload = function(event) {
396
+ if (file.type.startsWith('image/')) {
397
+ previewImage.src = event.target.result;
398
+ previewImage.classList.remove('hidden');
399
+ previewVideo.classList.add('hidden');
400
+ placeholder.classList.add('hidden');
401
+ } else if (file.type.startsWith('video/')) {
402
+ previewVideo.src = event.target.result;
403
+ previewVideo.classList.remove('hidden');
404
+ previewImage.classList.add('hidden');
405
+ placeholder.classList.add('hidden');
406
+ }
407
+ };
408
+ reader.readAsDataURL(file);
409
+ });
410
+
411
+ // Reset button functionality
412
+ document.getElementById('reset-btn').addEventListener('click', function() {
413
+ previewImage.src = '';
414
+ previewVideo.src = '';
415
+ previewImage.classList.add('hidden');
416
+ previewVideo.classList.add('hidden');
417
+ placeholder.classList.remove('hidden');
418
+ fileUpload.value = '';
419
+ });
420
+
421
+ // Save button functionality (simulated)
422
+ document.getElementById('save-btn').addEventListener('click', function() {
423
+ if (!previewImage.src && !previewVideo.src) {
424
+ alert('Please upload an image or video first');
425
+ return;
426
+ }
427
+
428
+ // Simulate download
429
+ const link = document.createElement('a');
430
+ if (previewImage.src) {
431
+ link.href = previewImage.src;
432
+ link.download = 'edited-image.jpg';
433
+ } else {
434
+ link.href = previewVideo.src;
435
+ link.download = 'edited-video.mp4';
436
+ }
437
+ document.body.appendChild(link);
438
+ link.click();
439
+ document.body.removeChild(link);
440
+
441
+ // Show success message
442
+ alert('Your file has been downloaded!');
443
+ });
444
+ </script>
445
+ <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=swapit/kates" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
446
+ </html>
prompts.txt ADDED
File without changes