Hugging Face's logo

Spaces:
MarcRyan
/
avgen
Running

App Files Community
MarcRyan commited on
Commit
c00b2da
·
verified ·
1 Parent(s): 779d523

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +196 -142
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,23 +3,23 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Artistic Vision Generator | Creative Content</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, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
12
  }
13
- .illustration-card {
14
  transition: all 0.3s ease;
15
  border: 2px solid transparent;
16
  }
17
- .illustration-card:hover {
18
  transform: translateY(-5px);
19
  border-color: #3b82f6;
20
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
21
  }
22
- .illustration-card.selected {
23
  border-color: #3b82f6;
24
  background-color: rgba(59, 130, 246, 0.1);
25
  }
@@ -34,7 +34,7 @@
34
  background-color: #3b82f6;
35
  border-radius: 20px;
36
  }
37
- .result-container {
38
  min-height: 500px;
39
  background: rgba(30, 58, 138, 0.5);
40
  border: 1px dashed #3b82f6;
@@ -51,6 +51,17 @@
51
  .age-gate {
52
  backdrop-filter: blur(10px);
53
  }
 
 
 
 
 
 
 
 
 
 
 
54
  </style>
55
  </head>
56
  <body class="gradient-bg min-h-screen text-white">
@@ -58,9 +69,9 @@
58
  <div id="ageModal" class="fixed inset-0 z-50 flex items-center justify-center age-gate">
59
  <div class="bg-gray-900/80 p-8 rounded-xl max-w-md w-full mx-4">
60
  <div class="text-center mb-6">
61
- <i class="fas fa-paint-brush text-4xl text-blue-500 mb-4"></i>
62
- <h2 class="text-2xl font-bold mb-2">Welcome to Artistic Vision Generator</h2>
63
- <p class="text-gray-300">This platform creates family-friendly artistic content suitable for all ages.</p>
64
  </div>
65
  <div class="flex flex-col space-y-4">
66
  <button id="confirmAge" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium transition">
@@ -78,10 +89,10 @@
78
  <!-- Header -->
79
  <header class="mb-10 text-center">
80
  <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-500">
81
- Artistic Vision Generator
82
  </h1>
83
  <p class="text-lg text-blue-200 max-w-3xl mx-auto">
84
- Create beautiful illustrations and animations with our advanced AI. Select from multiple styles and customize every detail.
85
  </p>
86
  </header>
87
 
@@ -89,88 +100,85 @@
89
  <!-- Left Panel - Controls -->
90
  <div class="lg:col-span-1 bg-gray-900/50 p-6 rounded-xl">
91
  <h2 class="text-xl font-semibold mb-6 flex items-center">
92
- <i class="fas fa-sliders-h mr-2 text-blue-400"></i> Generation Settings
93
  </h2>
94
 
95
- <!-- Prompt Section -->
96
- <div class="mb-6">
97
- <label class="block text-sm font-medium mb-2" for="prompt">
98
- <i class="fas fa-comment-dots mr-1 text-blue-300"></i> Description
99
- </label>
100
- <textarea id="prompt" rows="3" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Describe the scene you want to generate..."></textarea>
101
- </div>
102
-
103
- <!-- Negative Prompt -->
104
  <div class="mb-6">
105
- <label class="block text-sm font-medium mb-2" for="negativePrompt">
106
- <i class="fas fa-ban mr-1 text-blue-300"></i> Exclusions
107
  </label>
108
- <textarea id="negativePrompt" rows="2" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="What you don't want to see..."></textarea>
 
 
 
 
 
 
 
 
109
  </div>
110
 
111
  <!-- Style Selection -->
112
  <div class="mb-6">
113
  <label class="block text-sm font-medium mb-2">
114
- <i class="fas fa-palette mr-1 text-blue-300"></i> Art Style
115
  </label>
116
- <select id="artStyle" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
117
- <option value="realistic">Hyper Realistic</option>
118
  <option value="anime">Anime Style</option>
119
- <option value="cartoon">Western Cartoon</option>
120
  <option value="painting">Oil Painting</option>
121
  <option value="watercolor">Watercolor</option>
122
  <option value="cyberpunk">Cyberpunk</option>
123
- <option value="fantasy">Fantasy Art</option>
124
- <option value="pixel">Pixel Art</option>
125
- <option value="3d-render">3D Render</option>
126
- <option value="children">Children's Book</option>
127
  </select>
128
  </div>
129
 
130
- <!-- Illustration Options -->
131
  <div class="mb-6">
132
  <label class="block text-sm font-medium mb-2">
133
- <i class="fas fa-images mr-1 text-blue-300"></i> Illustration Options
134
  </label>
135
  <div class="grid grid-cols-2 gap-2">
136
  <div>
137
- <label class="block text-xs mb-1">Subject</label>
138
  <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
139
- <option>People</option>
140
- <option>Animals</option>
141
- <option>Landscape</option>
142
- <option>Fantasy</option>
143
- <option>Objects</option>
144
  </select>
145
  </div>
146
  <div>
147
- <label class="block text-xs mb-1">Color Scheme</label>
148
  <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
149
- <option>Vibrant</option>
150
- <option>Pastel</option>
151
- <option>Monochrome</option>
152
- <option>Warm</option>
153
- <option>Cool</option>
154
  </select>
155
  </div>
156
  <div>
157
- <label class="block text-xs mb-1">Composition</label>
158
  <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
159
- <option>Portrait</option>
160
- <option>Landscape</option>
161
- <option>Close-up</option>
162
- <option>Action</option>
163
- <option>Symmetrical</option>
164
  </select>
165
  </div>
166
  <div>
167
- <label class="block text-xs mb-1">Mood</label>
168
  <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
169
- <option>Happy</option>
170
- <option>Serene</option>
171
- <option>Mysterious</option>
172
- <option>Energetic</option>
173
- <option>Whimsical</option>
174
  </select>
175
  </div>
176
  </div>
@@ -186,68 +194,58 @@
186
  </div>
187
  <div id="advancedOptions" class="hidden space-y-4 pt-2">
188
  <div>
189
- <label class="block text-xs mb-1">Creativity Level</label>
190
  <input type="range" min="0" max="100" value="50" class="w-full slider-thumb">
191
  </div>
192
  <div>
193
- <label class="block text-xs mb-1">Detail Level</label>
194
- <input type="range" min="0" max="100" value="70" class="w-full slider-thumb">
195
  </div>
196
  <div>
197
- <label class="block text-xs mb-1">Lighting</label>
198
- <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
199
- <option>Soft</option>
200
- <option>Dramatic</option>
201
- <option>Natural</option>
202
- <option>Studio</option>
203
- <option>Golden Hour</option>
204
- </select>
205
  </div>
206
  <div>
207
- <label class="block text-xs mb-1">Background</label>
208
- <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
209
- <option>None</option>
210
- <option>Nature</option>
211
- <option>Cityscape</option>
212
- <option>Fantasy</option>
213
- <option>Abstract</option>
214
- </select>
215
  </div>
216
  </div>
217
  </div>
218
 
219
  <!-- Generate Button -->
220
  <button id="generateBtn" class="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition">
221
- <i class="fas fa-magic mr-2"></i> Generate Artwork
222
  </button>
223
  </div>
224
 
225
  <!-- Right Panel - Results -->
226
  <div class="lg:col-span-2">
227
- <div class="result-container rounded-xl flex items-center justify-center mb-6 relative overflow-hidden">
228
- <div id="resultPlaceholder" class="text-center p-8">
229
- <i class="fas fa-image text-5xl text-blue-400 mb-4 opacity-50"></i>
230
- <p class="text-blue-300">Your generated artwork will appear here</p>
231
  </div>
232
- <div id="resultDisplay" class="hidden w-full h-full">
233
- <img id="generatedImage" class="w-full h-full object-contain" src="" alt="Generated artwork">
234
- <div id="videoControls" class="hidden absolute bottom-4 left-0 right-0 flex justify-center space-x-4">
235
- <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
236
- <i class="fas fa-play"></i>
237
- </button>
238
- <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
239
- <i class="fas fa-pause"></i>
240
- </button>
241
- <button class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
242
- <i class="fas fa-download"></i>
243
- </button>
244
  </div>
245
  </div>
246
  <div id="loadingIndicator" class="hidden absolute inset-0 flex items-center justify-center bg-black/50">
247
  <div class="text-center">
248
  <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
249
- <p>Generating your artwork...</p>
250
- <p class="text-xs text-blue-300 mt-2">This may take a few moments</p>
 
 
 
 
251
  </div>
252
  </div>
253
  </div>
@@ -262,52 +260,52 @@
262
  <div class="overflow-x-auto pb-2 custom-scrollbar">
263
  <div class="flex space-x-4" style="min-width: max-content;">
264
  <!-- Style Cards -->
265
- <div class="illustration-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'realistic')">
266
  <img src="https://images.unsplash.com/photo-1579783902614-a3fb39268b5b?w=200&h=200&fit=crop" class="w-full h-full object-cover">
267
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
268
- <p class="text-xs font-medium">Realistic</p>
269
  </div>
270
  </div>
271
- <div class="illustration-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'anime')">
272
  <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=200&h=200&fit=crop" class="w-full h-full object-cover">
273
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
274
  <p class="text-xs font-medium">Anime</p>
275
  </div>
276
  </div>
277
- <div class="illustration-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'cartoon')">
278
  <img src="https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?w=200&h=200&fit=crop" class="w-full h-full object-cover">
279
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
280
  <p class="text-xs font-medium">Cartoon</p>
281
  </div>
282
  </div>
283
- <div class="illustration-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'painting')">
284
  <img src="https://images.unsplash.com/photo-1579783900882-c0ddfd6c6b14?w=200&h=200&fit=crop" class="w-full h-full object-cover">
285
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
286
  <p class="text-xs font-medium">Oil Painting</p>
287
  </div>
288
  </div>
289
- <div class="illustration-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'watercolor')">
290
  <img src="https://images.unsplash.com/photo-1579762715458-f5c5f02b9517?w=200&h=200&fit=crop" class="w-full h-full object-cover">
291
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
292
  <p class="text-xs font-medium">Watercolor</p>
293
  </div>
294
  </div>
295
- <div class="illustration-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'cyberpunk')">
296
  <img src="https://images.unsplash.com/photo-1548092372-44d6dd47c9d3?w=200&h=200&fit=crop" class="w-full h-full object-cover">
297
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
298
  <p class="text-xs font-medium">Cyberpunk</p>
299
  </div>
300
  </div>
301
- <div class="illustration-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'fantasy')">
302
  <img src="https://images.unsplash.com/photo-1589254065878-42a9da3a8abe?w=200&h=200&fit=crop" class="w-full h-full object-cover">
303
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
304
- <p class="text-xs font-medium">Fantasy</p>
305
  </div>
306
  </div>
307
- <div class="illustration-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'pixel')">
308
  <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?w=200&h=200&fit=crop" class="w-full h-full object-cover">
309
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
310
- <p class="text-xs font-medium">Pixel Art</p>
311
  </div>
312
  </div>
313
  </div>
@@ -324,8 +322,8 @@
324
  <a href="#" class="hover:text-blue-200"><i class="fab fa-github"></i></a>
325
  <a href="#" class="hover:text-blue-200"><i class="fas fa-envelope"></i></a>
326
  </div>
327
- <p>© 2023 Artistic Vision Generator. All ages welcome.</p>
328
- <p class="mt-2 text-xs opacity-70">All generated content is fictional and created by AI</p>
329
  </footer>
330
  </div>
331
 
@@ -349,11 +347,11 @@
349
 
350
  // Style selection
351
  function selectStyle(element, style) {
352
- document.querySelectorAll('.illustration-card').forEach(card => {
353
  card.classList.remove('selected');
354
  });
355
  element.classList.add('selected');
356
- document.getElementById('artStyle').value = style;
357
  }
358
 
359
  // Toggle advanced options
@@ -372,49 +370,105 @@
372
  }
373
  }
374
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
375
  // Generate button functionality
376
  document.getElementById('generateBtn').addEventListener('click', function() {
377
- const prompt = document.getElementById('prompt').value;
378
-
379
- if(!prompt) {
380
- alert('Please enter a description for your artwork');
381
  return;
382
  }
383
 
384
  // Show loading state
385
- document.getElementById('resultPlaceholder').classList.add('hidden');
386
- document.getElementById('resultDisplay').classList.add('hidden');
387
  document.getElementById('loadingIndicator').classList.remove('hidden');
388
 
389
- // Simulate generation (in a real app, this would be an API call)
390
- setTimeout(function() {
391
- document.getElementById('loadingIndicator').classList.add('hidden');
392
- document.getElementById('resultDisplay').classList.remove('hidden');
 
393
 
394
- // For demo purposes, we'll use a placeholder
395
- const style = document.getElementById('artStyle').value;
396
- const placeholderImages = {
397
- 'realistic': 'https://images.unsplash.com/photo-1579783902614-a3fb39268b5b?w=800&h=500&fit=crop',
398
- 'anime': 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=800&h=500&fit=crop',
399
- 'cartoon': 'https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?w=800&h=500&fit=crop',
400
- 'painting': 'https://images.unsplash.com/photo-1579783900882-c0ddfd6c6b14?w=800&h=500&fit=crop',
401
- 'watercolor': 'https://images.unsplash.com/photo-1579762715458-f5c5f02b9517?w=800&h=500&fit=crop',
402
- 'cyberpunk': 'https://images.unsplash.com/photo-1548092372-44d6dd47c9d3?w=800&h=500&fit=crop',
403
- 'fantasy': 'https://images.unsplash.com/photo-1589254065878-42a9da3a8abe?w=800&h=500&fit=crop',
404
- 'pixel': 'https://images.unsplash.com/photo-1639762681057-408e52192e55?w=800&h=500&fit=crop',
405
- '3d-render': 'https://images.unsplash.com/photo-1639762681057-408e52192e55?w=800&h=500&fit=crop',
406
- 'children': 'https://images.unsplash.com/photo-1579762715116-735c13fb0d3e?w=800&h=500&fit=crop'
407
- };
408
 
409
- document.getElementById('generatedImage').src = placeholderImages[style] || placeholderImages['realistic'];
410
-
411
- // Randomly decide if it's a video (30% chance)
412
- if(Math.random() < 0.3) {
413
- document.getElementById('videoControls').classList.remove('hidden');
414
- } else {
415
- document.getElementById('videoControls').classList.add('hidden');
416
  }
417
- }, 3000);
 
 
 
 
 
 
 
 
 
 
 
418
  });
419
  </script>
420
  <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=MarcRyan/avgen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Video Re-Generator | AI Video Enhancement</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, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
12
  }
13
+ .video-card {
14
  transition: all 0.3s ease;
15
  border: 2px solid transparent;
16
  }
17
+ .video-card:hover {
18
  transform: translateY(-5px);
19
  border-color: #3b82f6;
20
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
21
  }
22
+ .video-card.selected {
23
  border-color: #3b82f6;
24
  background-color: rgba(59, 130, 246, 0.1);
25
  }
 
34
  background-color: #3b82f6;
35
  border-radius: 20px;
36
  }
37
+ .video-container {
38
  min-height: 500px;
39
  background: rgba(30, 58, 138, 0.5);
40
  border: 1px dashed #3b82f6;
 
51
  .age-gate {
52
  backdrop-filter: blur(10px);
53
  }
54
+ .upload-area {
55
+ border: 2px dashed #3b82f6;
56
+ transition: all 0.3s ease;
57
+ }
58
+ .upload-area:hover {
59
+ background: rgba(59, 130, 246, 0.1);
60
+ }
61
+ .upload-area.dragover {
62
+ background: rgba(59, 130, 246, 0.2);
63
+ border-color: #93c5fd;
64
+ }
65
  </style>
66
  </head>
67
  <body class="gradient-bg min-h-screen text-white">
 
69
  <div id="ageModal" class="fixed inset-0 z-50 flex items-center justify-center age-gate">
70
  <div class="bg-gray-900/80 p-8 rounded-xl max-w-md w-full mx-4">
71
  <div class="text-center mb-6">
72
+ <i class="fas fa-video text-4xl text-blue-500 mb-4"></i>
73
+ <h2 class="text-2xl font-bold mb-2">Welcome to Video Re-Generator</h2>
74
+ <p class="text-gray-300">Enhance and transform your videos with AI-powered regeneration.</p>
75
  </div>
76
  <div class="flex flex-col space-y-4">
77
  <button id="confirmAge" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium transition">
 
89
  <!-- Header -->
90
  <header class="mb-10 text-center">
91
  <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-cyan-500">
92
+ Video Re-Generator
93
  </h1>
94
  <p class="text-lg text-blue-200 max-w-3xl mx-auto">
95
+ Transform your MP4 videos with AI-powered enhancement, style transfer, and quality improvement.
96
  </p>
97
  </header>
98
 
 
100
  <!-- Left Panel - Controls -->
101
  <div class="lg:col-span-1 bg-gray-900/50 p-6 rounded-xl">
102
  <h2 class="text-xl font-semibold mb-6 flex items-center">
103
+ <i class="fas fa-sliders-h mr-2 text-blue-400"></i> Video Settings
104
  </h2>
105
 
106
+ <!-- Video Upload Section -->
 
 
 
 
 
 
 
 
107
  <div class="mb-6">
108
+ <label class="block text-sm font-medium mb-2" for="videoUpload">
109
+ <i class="fas fa-upload mr-1 text-blue-300"></i> Upload MP4 Video
110
  </label>
111
+ <div id="uploadArea" class="upload-area rounded-lg p-8 text-center cursor-pointer mb-2">
112
+ <i class="fas fa-cloud-upload-alt text-3xl text-blue-400 mb-2"></i>
113
+ <p class="text-sm">Drag & drop your MP4 file here</p>
114
+ <p class="text-xs text-blue-300 mt-1">or click to browse</p>
115
+ <input type="file" id="videoUpload" class="hidden" accept="video/mp4">
116
+ </div>
117
+ <div id="fileInfo" class="text-xs text-blue-300 hidden">
118
+ <span id="fileName"></span> (<span id="fileSize"></span>)
119
+ </div>
120
  </div>
121
 
122
  <!-- Style Selection -->
123
  <div class="mb-6">
124
  <label class="block text-sm font-medium mb-2">
125
+ <i class="fas fa-palette mr-1 text-blue-300"></i> Transformation Style
126
  </label>
127
+ <select id="videoStyle" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
128
+ <option value="enhance">Quality Enhancement</option>
129
  <option value="anime">Anime Style</option>
130
+ <option value="cartoon">Cartoon Style</option>
131
  <option value="painting">Oil Painting</option>
132
  <option value="watercolor">Watercolor</option>
133
  <option value="cyberpunk">Cyberpunk</option>
134
+ <option value="retro">Retro Film</option>
135
+ <option value="blackwhite">Black & White</option>
136
+ <option value="sketch">Pencil Sketch</option>
 
137
  </select>
138
  </div>
139
 
140
+ <!-- Video Options -->
141
  <div class="mb-6">
142
  <label class="block text-sm font-medium mb-2">
143
+ <i class="fas fa-film mr-1 text-blue-300"></i> Video Options
144
  </label>
145
  <div class="grid grid-cols-2 gap-2">
146
  <div>
147
+ <label class="block text-xs mb-1">Resolution</label>
148
  <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
149
+ <option>Original</option>
150
+ <option>480p</option>
151
+ <option>720p</option>
152
+ <option>1080p</option>
153
+ <option>4K</option>
154
  </select>
155
  </div>
156
  <div>
157
+ <label class="block text-xs mb-1">Frame Rate</label>
158
  <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
159
+ <option>Original</option>
160
+ <option>24 fps</option>
161
+ <option>30 fps</option>
162
+ <option>60 fps</option>
 
163
  </select>
164
  </div>
165
  <div>
166
+ <label class="block text-xs mb-1">Stabilization</label>
167
  <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
168
+ <option>None</option>
169
+ <option>Light</option>
170
+ <option>Moderate</option>
171
+ <option>Strong</option>
 
172
  </select>
173
  </div>
174
  <div>
175
+ <label class="block text-xs mb-1">Color Grade</label>
176
  <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
177
+ <option>None</option>
178
+ <option>Vibrant</option>
179
+ <option>Warm</option>
180
+ <option>Cool</option>
181
+ <option>Cinematic</option>
182
  </select>
183
  </div>
184
  </div>
 
194
  </div>
195
  <div id="advancedOptions" class="hidden space-y-4 pt-2">
196
  <div>
197
+ <label class="block text-xs mb-1">Style Strength</label>
198
  <input type="range" min="0" max="100" value="50" class="w-full slider-thumb">
199
  </div>
200
  <div>
201
+ <label class="block text-xs mb-1">Noise Reduction</label>
202
+ <input type="range" min="0" max="100" value="30" class="w-full slider-thumb">
203
  </div>
204
  <div>
205
+ <label class="block text-xs mb-1">Detail Enhancement</label>
206
+ <input type="range" min="0" max="100" value="50" class="w-full slider-thumb">
 
 
 
 
 
 
207
  </div>
208
  <div>
209
+ <label class="block text-xs mb-1">Temporal Smoothing</label>
210
+ <input type="range" min="0" max="100" value="40" class="w-full slider-thumb">
 
 
 
 
 
 
211
  </div>
212
  </div>
213
  </div>
214
 
215
  <!-- Generate Button -->
216
  <button id="generateBtn" class="w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition">
217
+ <i class="fas fa-sync-alt mr-2"></i> Re-Generate Video
218
  </button>
219
  </div>
220
 
221
  <!-- Right Panel - Results -->
222
  <div class="lg:col-span-2">
223
+ <div class="video-container rounded-xl flex items-center justify-center mb-6 relative overflow-hidden">
224
+ <div id="videoPlaceholder" class="text-center p-8">
225
+ <i class="fas fa-video text-5xl text-blue-400 mb-4 opacity-50"></i>
226
+ <p class="text-blue-300">Your original and regenerated videos will appear here</p>
227
  </div>
228
+ <div id="videoDisplay" class="hidden w-full h-full">
229
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
230
+ <div>
231
+ <h3 class="text-sm font-medium mb-2 text-center">Original Video</h3>
232
+ <video id="originalVideo" controls class="w-full h-auto max-h-80 rounded-lg"></video>
233
+ </div>
234
+ <div>
235
+ <h3 class="text-sm font-medium mb-2 text-center">Regenerated Video</h3>
236
+ <video id="regeneratedVideo" controls class="w-full h-auto max-h-80 rounded-lg"></video>
237
+ </div>
 
 
238
  </div>
239
  </div>
240
  <div id="loadingIndicator" class="hidden absolute inset-0 flex items-center justify-center bg-black/50">
241
  <div class="text-center">
242
  <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
243
+ <p>Processing your video...</p>
244
+ <p class="text-xs text-blue-300 mt-2">This may take several minutes depending on length</p>
245
+ <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4 max-w-md mx-auto">
246
+ <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
247
+ </div>
248
+ <p id="progressText" class="text-xs mt-2">0% completed</p>
249
  </div>
250
  </div>
251
  </div>
 
260
  <div class="overflow-x-auto pb-2 custom-scrollbar">
261
  <div class="flex space-x-4" style="min-width: max-content;">
262
  <!-- Style Cards -->
263
+ <div class="video-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'enhance')">
264
  <img src="https://images.unsplash.com/photo-1579783902614-a3fb39268b5b?w=200&h=200&fit=crop" class="w-full h-full object-cover">
265
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
266
+ <p class="text-xs font-medium">Enhance</p>
267
  </div>
268
  </div>
269
+ <div class="video-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'anime')">
270
  <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=200&h=200&fit=crop" class="w-full h-full object-cover">
271
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
272
  <p class="text-xs font-medium">Anime</p>
273
  </div>
274
  </div>
275
+ <div class="video-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'cartoon')">
276
  <img src="https://images.unsplash.com/photo-1637858868799-7f26a0640eb6?w=200&h=200&fit=crop" class="w-full h-full object-cover">
277
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
278
  <p class="text-xs font-medium">Cartoon</p>
279
  </div>
280
  </div>
281
+ <div class="video-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'painting')">
282
  <img src="https://images.unsplash.com/photo-1579783900882-c0ddfd6c6b14?w=200&h=200&fit=crop" class="w-full h-full object-cover">
283
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
284
  <p class="text-xs font-medium">Oil Painting</p>
285
  </div>
286
  </div>
287
+ <div class="video-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'watercolor')">
288
  <img src="https://images.unsplash.com/photo-1579762715458-f5c5f02b9517?w=200&h=200&fit=crop" class="w-full h-full object-cover">
289
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
290
  <p class="text-xs font-medium">Watercolor</p>
291
  </div>
292
  </div>
293
+ <div class="video-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'cyberpunk')">
294
  <img src="https://images.unsplash.com/photo-1548092372-44d6dd47c9d3?w=200&h=200&fit=crop" class="w-full h-full object-cover">
295
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
296
  <p class="text-xs font-medium">Cyberpunk</p>
297
  </div>
298
  </div>
299
+ <div class="video-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'retro')">
300
  <img src="https://images.unsplash.com/photo-1589254065878-42a9da3a8abe?w=200&h=200&fit=crop" class="w-full h-full object-cover">
301
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
302
+ <p class="text-xs font-medium">Retro Film</p>
303
  </div>
304
  </div>
305
+ <div class="video-card flex-shrink-0 w-32 h-32 bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="selectStyle(this, 'sketch')">
306
  <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?w=200&h=200&fit=crop" class="w-full h-full object-cover">
307
  <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
308
+ <p class="text-xs font-medium">Pencil Sketch</p>
309
  </div>
310
  </div>
311
  </div>
 
322
  <a href="#" class="hover:text-blue-200"><i class="fab fa-github"></i></a>
323
  <a href="#" class="hover:text-blue-200"><i class="fas fa-envelope"></i></a>
324
  </div>
325
+ <p>© 2023 Video Re-Generator. All rights reserved.</p>
326
+ <p class="mt-2 text-xs opacity-70">Supports MP4 files up to 5 minutes in length</p>
327
  </footer>
328
  </div>
329
 
 
347
 
348
  // Style selection
349
  function selectStyle(element, style) {
350
+ document.querySelectorAll('.video-card').forEach(card => {
351
  card.classList.remove('selected');
352
  });
353
  element.classList.add('selected');
354
+ document.getElementById('videoStyle').value = style;
355
  }
356
 
357
  // Toggle advanced options
 
370
  }
371
  }
372
 
373
+ // File upload handling
374
+ const uploadArea = document.getElementById('uploadArea');
375
+ const fileInput = document.getElementById('videoUpload');
376
+ const fileInfo = document.getElementById('fileInfo');
377
+ const fileName = document.getElementById('fileName');
378
+ const fileSize = document.getElementById('fileSize');
379
+
380
+ uploadArea.addEventListener('click', () => fileInput.click());
381
+
382
+ fileInput.addEventListener('change', handleFileSelect);
383
+
384
+ // Drag and drop events
385
+ uploadArea.addEventListener('dragover', (e) => {
386
+ e.preventDefault();
387
+ uploadArea.classList.add('dragover');
388
+ });
389
+
390
+ uploadArea.addEventListener('dragleave', () => {
391
+ uploadArea.classList.remove('dragover');
392
+ });
393
+
394
+ uploadArea.addEventListener('drop', (e) => {
395
+ e.preventDefault();
396
+ uploadArea.classList.remove('dragover');
397
+ if(e.dataTransfer.files.length) {
398
+ fileInput.files = e.dataTransfer.files;
399
+ handleFileSelect({ target: fileInput });
400
+ }
401
+ });
402
+
403
+ function handleFileSelect(event) {
404
+ const file = event.target.files[0];
405
+ if(!file) return;
406
+
407
+ // Check if it's an MP4 file
408
+ if(!file.type.includes('mp4')) {
409
+ alert('Please upload an MP4 video file');
410
+ return;
411
+ }
412
+
413
+ // Check file size (max 500MB for demo)
414
+ if(file.size > 500 * 1024 * 1024) {
415
+ alert('File size exceeds 500MB limit');
416
+ return;
417
+ }
418
+
419
+ // Display file info
420
+ fileName.textContent = file.name;
421
+ fileSize.textContent = formatFileSize(file.size);
422
+ fileInfo.classList.remove('hidden');
423
+
424
+ // Preview the video
425
+ const videoURL = URL.createObjectURL(file);
426
+ document.getElementById('videoPlaceholder').classList.add('hidden');
427
+ document.getElementById('videoDisplay').classList.remove('hidden');
428
+ document.getElementById('originalVideo').src = videoURL;
429
+ }
430
+
431
+ function formatFileSize(bytes) {
432
+ if(bytes < 1024) return bytes + ' bytes';
433
+ else if(bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
434
+ else return (bytes / 1048576).toFixed(1) + ' MB';
435
+ }
436
+
437
  // Generate button functionality
438
  document.getElementById('generateBtn').addEventListener('click', function() {
439
+ if(!fileInput.files.length) {
440
+ alert('Please upload a video file first');
 
 
441
  return;
442
  }
443
 
444
  // Show loading state
 
 
445
  document.getElementById('loadingIndicator').classList.remove('hidden');
446
 
447
+ // Simulate processing (in a real app, this would be an API call)
448
+ let progress = 0;
449
+ const progressInterval = setInterval(() => {
450
+ progress += Math.random() * 5;
451
+ if(progress > 100) progress = 100;
452
 
453
+ document.getElementById('progressBar').style.width = progress + '%';
454
+ document.getElementById('progressText').textContent = Math.floor(progress) + '% completed';
 
 
 
 
 
 
 
 
 
 
 
 
455
 
456
+ if(progress === 100) {
457
+ clearInterval(progressInterval);
458
+ setTimeout(finishProcessing, 1000);
 
 
 
 
459
  }
460
+ }, 500);
461
+
462
+ function finishProcessing() {
463
+ document.getElementById('loadingIndicator').classList.add('hidden');
464
+
465
+ // For demo purposes, we'll just duplicate the original video
466
+ const originalSrc = document.getElementById('originalVideo').src;
467
+ document.getElementById('regeneratedVideo').src = originalSrc;
468
+
469
+ // Show a success message
470
+ alert('Video regeneration completed successfully!');
471
+ }
472
  });
473
  </script>
474
  <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=MarcRyan/avgen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  make this website - https://huggingface.co/spaces/Heartsync/NSFW-Uncensored-video?not-for-all-audiences=true - with more illstration options
2
- change NSFW to SFW
 
 
1
  make this website - https://huggingface.co/spaces/Heartsync/NSFW-Uncensored-video?not-for-all-audiences=true - with more illstration options
2
+ change NSFW to SFW
3
+ gENERATION SETTINGS SHOULD BE DESIGNED FOR VIDEO "RE-GENERATION" FROM AN MP4