Hugging Face's logo

Spaces:
likesimo75
/
revive
Running

App Files Community
likesimo75 commited on
Commit
0f605d2
·
verified ·
1 Parent(s): 32da3cd

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +415 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Revive
3
- emoji: 🐠
4
- colorFrom: blue
5
  colorTo: pink
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: revive
3
+ emoji: 🐳
4
+ colorFrom: pink
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,415 @@
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>PixelRevive - Media Enhancement Tool</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .file-upload {
14
+ border: 2px dashed rgba(255, 255, 255, 0.4);
15
+ transition: all 0.3s ease;
16
+ }
17
+ .file-upload:hover {
18
+ border-color: rgba(255, 255, 255, 0.8);
19
+ transform: translateY(-2px);
20
+ }
21
+ .enhancement-card {
22
+ transition: all 0.3s ease;
23
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .enhancement-card:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
28
+ }
29
+ .slider-thumb::-webkit-slider-thumb {
30
+ -webkit-appearance: none;
31
+ appearance: none;
32
+ width: 20px;
33
+ height: 20px;
34
+ border-radius: 50%;
35
+ background: #667eea;
36
+ cursor: pointer;
37
+ }
38
+ .before-after {
39
+ position: relative;
40
+ overflow: hidden;
41
+ }
42
+ .before-after .before {
43
+ position: absolute;
44
+ top: 0;
45
+ left: 0;
46
+ width: 50%;
47
+ height: 100%;
48
+ overflow: hidden;
49
+ }
50
+ .slider-handle {
51
+ position: absolute;
52
+ width: 4px;
53
+ height: 100%;
54
+ background: white;
55
+ left: 50%;
56
+ transform: translateX(-50%);
57
+ cursor: ew-resize;
58
+ }
59
+ .slider-handle::after {
60
+ content: '';
61
+ position: absolute;
62
+ width: 30px;
63
+ height: 30px;
64
+ border-radius: 50%;
65
+ background: white;
66
+ top: 50%;
67
+ left: 50%;
68
+ transform: translate(-50%, -50%);
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="gradient-bg min-h-screen text-white">
73
+ <div class="container mx-auto px-4 py-8">
74
+ <header class="text-center mb-12">
75
+ <h1 class="text-4xl md:text-5xl font-bold mb-2">PixelRevive</h1>
76
+ <p class="text-xl opacity-80">Bring your media to life with AI-powered enhancement and colorization</p>
77
+ </header>
78
+
79
+ <div class="max-w-4xl mx-auto bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 shadow-xl">
80
+ <div class="flex flex-col md:flex-row gap-6">
81
+ <!-- Upload Section -->
82
+ <div class="w-full md:w-1/2">
83
+ <div class="file-upload rounded-xl p-8 text-center cursor-pointer mb-6" id="dropZone">
84
+ <i class="fas fa-cloud-upload-alt text-4xl mb-4 opacity-70"></i>
85
+ <h3 class="text-xl font-semibold mb-2">Drag & Drop Media Here</h3>
86
+ <p class="opacity-70 mb-4">or click to browse files</p>
87
+ <input type="file" id="fileInput" class="hidden" accept="image/*, video/*">
88
+ <button class="bg-white text-purple-700 px-6 py-2 rounded-full font-medium hover:bg-opacity-90 transition">
89
+ Select File
90
+ </button>
91
+ </div>
92
+
93
+ <div class="bg-white bg-opacity-5 rounded-xl p-4 mb-6">
94
+ <h3 class="font-semibold mb-3">Enhancement Options</h3>
95
+
96
+ <div class="space-y-4">
97
+ <div class="enhancement-card bg-white bg-opacity-10 rounded-lg p-4">
98
+ <div class="flex justify-between items-center mb-2">
99
+ <label class="flex items-center">
100
+ <input type="checkbox" class="form-checkbox rounded text-purple-500" checked>
101
+ <span class="ml-2">Colorize B&W</span>
102
+ </label>
103
+ <span class="text-xs bg-purple-500 px-2 py-1 rounded-full">AI</span>
104
+ </div>
105
+ <p class="text-xs opacity-70">Automatically add realistic colors to black & white media</p>
106
+ </div>
107
+
108
+ <div class="enhancement-card bg-white bg-opacity-10 rounded-lg p-4">
109
+ <div class="flex justify-between items-center mb-2">
110
+ <label class="flex items-center">
111
+ <input type="checkbox" class="form-checkbox rounded text-purple-500" checked>
112
+ <span class="ml-2">Enhance Quality</span>
113
+ </label>
114
+ <span class="text-xs bg-purple-500 px-2 py-1 rounded-full">AI</span>
115
+ </div>
116
+ <p class="text-xs opacity-70">Increase resolution and reduce noise</p>
117
+ </div>
118
+
119
+ <div class="enhancement-card bg-white bg-opacity-10 rounded-lg p-4">
120
+ <div class="flex justify-between items-center mb-2">
121
+ <label class="flex items-center">
122
+ <input type="checkbox" class="form-checkbox rounded text-purple-500">
123
+ <span class="ml-2">Restore Details</span>
124
+ </label>
125
+ </div>
126
+ <p class="text-xs opacity-70">Recover lost details in old or damaged media</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="bg-white bg-opacity-5 rounded-xl p-4">
132
+ <h3 class="font-semibold mb-3">Adjustment Sliders</h3>
133
+
134
+ <div class="space-y-4">
135
+ <div>
136
+ <label class="block text-sm mb-1">Color Intensity</label>
137
+ <input type="range" min="0" max="100" value="70" class="w-full slider-thumb">
138
+ </div>
139
+ <div>
140
+ <label class="block text-sm mb-1">Sharpness</label>
141
+ <input type="range" min="0" max="100" value="50" class="w-full slider-thumb">
142
+ </div>
143
+ <div>
144
+ <label class="block text-sm mb-1">Noise Reduction</label>
145
+ <input type="range" min="0" max="100" value="30" class="w-full slider-thumb">
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Preview Section -->
152
+ <div class="w-full md:w-1/2">
153
+ <div class="bg-black bg-opacity-20 rounded-xl p-4 mb-4">
154
+ <h3 class="font-semibold mb-3">Preview</h3>
155
+
156
+ <div class="before-after rounded-lg overflow-hidden relative h-64 bg-gray-800 flex items-center justify-center" id="previewContainer">
157
+ <div class="text-center" id="emptyPreview">
158
+ <i class="fas fa-image text-4xl opacity-30 mb-2"></i>
159
+ <p class="opacity-50">Your enhanced media will appear here</p>
160
+ </div>
161
+
162
+ <div class="hidden" id="imagePreview">
163
+ <img src="" alt="Preview" class="max-w-full max-h-64 mx-auto" id="previewImage">
164
+ <div class="before">
165
+ <img src="" alt="Original" class="max-w-full max-h-64" id="beforeImage">
166
+ </div>
167
+ <div class="slider-handle"></div>
168
+ </div>
169
+
170
+ <div class="hidden" id="videoPreview">
171
+ <video controls class="max-w-full max-h-64 mx-auto" id="previewVideo"></video>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="bg-white bg-opacity-5 rounded-xl p-4 mb-4">
177
+ <h3 class="font-semibold mb-3">Processing Status</h3>
178
+ <div class="space-y-2">
179
+ <div class="flex items-center">
180
+ <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
181
+ <span>File uploaded</span>
182
+ </div>
183
+ <div class="flex items-center opacity-50">
184
+ <div class="w-4 h-4 rounded-full bg-gray-500 mr-2"></div>
185
+ <span>Analyzing content</span>
186
+ </div>
187
+ <div class="flex items-center opacity-50">
188
+ <div class="w-4 h-4 rounded-full bg-gray-500 mr-2"></div>
189
+ <span>Applying enhancements</span>
190
+ </div>
191
+ <div class="flex items-center opacity-50">
192
+ <div class="w-4 h-4 rounded-full bg-gray-500 mr-2"></div>
193
+ <span>Finalizing output</span>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-xl font-semibold flex items-center justify-center transition disabled:opacity-50" id="processBtn" disabled>
199
+ <i class="fas fa-magic mr-2"></i> Process Media
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="max-w-4xl mx-auto mt-12">
206
+ <h2 class="text-2xl font-semibold mb-6 text-center">How It Works</h2>
207
+
208
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
209
+ <div class="bg-white bg-opacity-10 rounded-xl p-6 text-center">
210
+ <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
211
+ <i class="fas fa-upload text-2xl"></i>
212
+ </div>
213
+ <h3 class="font-semibold mb-2">Upload Media</h3>
214
+ <p class="opacity-80 text-sm">Upload your black & white or low-quality images/videos</p>
215
+ </div>
216
+
217
+ <div class="bg-white bg-opacity-10 rounded-xl p-6 text-center">
218
+ <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
219
+ <i class="fas fa-cogs text-2xl"></i>
220
+ </div>
221
+ <h3 class="font-semibold mb-2">AI Processing</h3>
222
+ <p class="opacity-80 text-sm">Our advanced algorithms analyze and enhance your media</p>
223
+ </div>
224
+
225
+ <div class="bg-white bg-opacity-10 rounded-xl p-6 text-center">
226
+ <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
227
+ <i class="fas fa-download text-2xl"></i>
228
+ </div>
229
+ <h3 class="font-semibold mb-2">Download Result</h3>
230
+ <p class="opacity-80 text-sm">Get your colorized and enhanced media in high quality</p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <footer class="text-center py-8 opacity-70 text-sm">
237
+ <p>© 2023 PixelRevive - AI Media Enhancement Tool</p>
238
+ </footer>
239
+
240
+ <script>
241
+ document.addEventListener('DOMContentLoaded', function() {
242
+ const fileInput = document.getElementById('fileInput');
243
+ const dropZone = document.getElementById('dropZone');
244
+ const processBtn = document.getElementById('processBtn');
245
+ const emptyPreview = document.getElementById('emptyPreview');
246
+ const imagePreview = document.getElementById('imagePreview');
247
+ const videoPreview = document.getElementById('videoPreview');
248
+ const previewImage = document.getElementById('previewImage');
249
+ const beforeImage = document.getElementById('beforeImage');
250
+ const previewVideo = document.getElementById('previewVideo');
251
+
252
+ // Handle file selection
253
+ dropZone.addEventListener('click', () => fileInput.click());
254
+
255
+ fileInput.addEventListener('change', handleFileSelect);
256
+
257
+ // Drag and drop functionality
258
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
259
+ dropZone.addEventListener(eventName, preventDefaults, false);
260
+ });
261
+
262
+ function preventDefaults(e) {
263
+ e.preventDefault();
264
+ e.stopPropagation();
265
+ }
266
+
267
+ ['dragenter', 'dragover'].forEach(eventName => {
268
+ dropZone.addEventListener(eventName, highlight, false);
269
+ });
270
+
271
+ ['dragleave', 'drop'].forEach(eventName => {
272
+ dropZone.addEventListener(eventName, unhighlight, false);
273
+ });
274
+
275
+ function highlight() {
276
+ dropZone.classList.add('border-white', 'border-opacity-80');
277
+ }
278
+
279
+ function unhighlight() {
280
+ dropZone.classList.remove('border-white', 'border-opacity-80');
281
+ }
282
+
283
+ dropZone.addEventListener('drop', handleDrop, false);
284
+
285
+ function handleDrop(e) {
286
+ const dt = e.dataTransfer;
287
+ const files = dt.files;
288
+ if (files.length) {
289
+ fileInput.files = files;
290
+ handleFileSelect({ target: fileInput });
291
+ }
292
+ }
293
+
294
+ function handleFileSelect(e) {
295
+ const file = e.target.files[0];
296
+ if (!file) return;
297
+
298
+ // Enable process button
299
+ processBtn.disabled = false;
300
+
301
+ // Hide empty preview
302
+ emptyPreview.classList.add('hidden');
303
+
304
+ // Check if file is image or video
305
+ if (file.type.startsWith('image/')) {
306
+ imagePreview.classList.remove('hidden');
307
+ videoPreview.classList.add('hidden');
308
+
309
+ const reader = new FileReader();
310
+ reader.onload = function(e) {
311
+ previewImage.src = e.target.result;
312
+ beforeImage.src = e.target.result;
313
+
314
+ // Initialize before/after slider
315
+ initBeforeAfterSlider();
316
+ };
317
+ reader.readAsDataURL(file);
318
+ } else if (file.type.startsWith('video/')) {
319
+ imagePreview.classList.add('hidden');
320
+ videoPreview.classList.remove('hidden');
321
+
322
+ const videoURL = URL.createObjectURL(file);
323
+ previewVideo.src = videoURL;
324
+ }
325
+ }
326
+
327
+ function initBeforeAfterSlider() {
328
+ const container = document.querySelector('.before-after');
329
+ const before = document.querySelector('.before');
330
+ const handle = document.querySelector('.slider-handle');
331
+
332
+ let isDragging = false;
333
+
334
+ handle.addEventListener('mousedown', () => {
335
+ isDragging = true;
336
+ });
337
+
338
+ document.addEventListener('mousemove', (e) => {
339
+ if (!isDragging) return;
340
+
341
+ const containerRect = container.getBoundingClientRect();
342
+ let x = e.clientX - containerRect.left;
343
+
344
+ // Constrain within container
345
+ x = Math.max(0, Math.min(x, containerRect.width));
346
+
347
+ const percent = (x / containerRect.width) * 100;
348
+ before.style.width = `${percent}%`;
349
+ handle.style.left = `${percent}%`;
350
+ });
351
+
352
+ document.addEventListener('mouseup', () => {
353
+ isDragging = false;
354
+ });
355
+
356
+ // Touch support
357
+ handle.addEventListener('touchstart', () => {
358
+ isDragging = true;
359
+ });
360
+
361
+ document.addEventListener('touchmove', (e) => {
362
+ if (!isDragging) return;
363
+
364
+ const containerRect = container.getBoundingClientRect();
365
+ let x = e.touches[0].clientX - containerRect.left;
366
+
367
+ // Constrain within container
368
+ x = Math.max(0, Math.min(x, containerRect.width));
369
+
370
+ const percent = (x / containerRect.width) * 100;
371
+ before.style.width = `${percent}%`;
372
+ handle.style.left = `${percent}%`;
373
+ });
374
+
375
+ document.addEventListener('touchend', () => {
376
+ isDragging = false;
377
+ });
378
+ }
379
+
380
+ // Process button click
381
+ processBtn.addEventListener('click', function() {
382
+ // Simulate processing
383
+ processBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
384
+ processBtn.disabled = true;
385
+
386
+ // Simulate progress
387
+ const statusItems = document.querySelectorAll('.bg-gray-500');
388
+ let i = 0;
389
+ const interval = setInterval(() => {
390
+ if (i < statusItems.length) {
391
+ statusItems[i].classList.remove('bg-gray-500');
392
+ statusItems[i].classList.add('bg-green-500');
393
+ i++;
394
+ } else {
395
+ clearInterval(interval);
396
+
397
+ // Show success message
398
+ processBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Processing Complete!';
399
+
400
+ // After 2 seconds, change to download button
401
+ setTimeout(() => {
402
+ processBtn.innerHTML = '<i class="fas fa-download mr-2"></i> Download Result';
403
+ processBtn.disabled = false;
404
+
405
+ // Change button color
406
+ processBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
407
+ processBtn.classList.add('bg-green-600', 'hover:bg-green-700');
408
+ }, 2000);
409
+ }
410
+ }, 1000);
411
+ });
412
+ });
413
+ </script>
414
+ <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=likesimo75/revive" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
415
+ </html>