Hugging Face's logo

Spaces:
Mudrock10
/
anycoder-bf3a8b20
Running

App Files Community
Mudrock10 commited on
Commit
952beb6
·
verified ·
1 Parent(s): 9e53cc3

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +386 -19
index.html CHANGED
@@ -1,19 +1,386 @@
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>M3DDM Video Outpainting</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+ .glass-effect {
21
+ background: rgba(255, 255, 255, 0.1);
22
+ backdrop-filter: blur(10px);
23
+ border: 1px solid rgba(255, 255, 255, 0.2);
24
+ }
25
+ .video-container {
26
+ background: linear-gradient(145deg, #1a1a2e, #16213e);
27
+ border-radius: 12px;
28
+ overflow: hidden;
29
+ }
30
+ .upload-area {
31
+ border: 2px dashed #667eea;
32
+ transition: all 0.3s ease;
33
+ }
34
+ .upload-area:hover {
35
+ border-color: #764ba2;
36
+ background: rgba(102, 126, 234, 0.1);
37
+ }
38
+ .slider-track {
39
+ background: linear-gradient(90deg, #667eea, #764ba2);
40
+ }
41
+ .loading-spinner {
42
+ border: 3px solid rgba(255, 255, 255, 0.3);
43
+ border-top: 3px solid #fff;
44
+ border-radius: 50%;
45
+ width: 40px;
46
+ height: 40px;
47
+ animation: spin 1s linear infinite;
48
+ }
49
+ @keyframes spin {
50
+ 0% { transform: rotate(0deg); }
51
+ 100% { transform: rotate(360deg); }
52
+ }
53
+ .tab-active {
54
+ background: linear-gradient(90deg, #667eea, #764ba2);
55
+ color: white;
56
+ }
57
+ .tab-inactive {
58
+ background: rgba(255, 255, 255, 0.1);
59
+ color: rgba(255, 255, 255, 0.7);
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div id="root"></div>
65
+
66
+ <script type="text/babel">
67
+ const { useState, useEffect, useRef } = React;
68
+
69
+ const App = () => {
70
+ const [activeTab, setActiveTab] = useState('upload');
71
+ const [videoFile, setVideoFile] = useState(null);
72
+ const [isProcessing, setIsProcessing] = useState(false);
73
+ const [processedVideo, setProcessedVideo] = useState(null);
74
+ const [outpaintAmount, setOutpaintAmount] = useState(30);
75
+ const [quality, setQuality] = useState(75);
76
+ const [style, setStyle] = useState('realistic');
77
+ const [progress, setProgress] = useState(0);
78
+ const [showPreview, setShowPreview] = useState(false);
79
+
80
+ const handleFileUpload = (e) => {
81
+ const file = e.target.files[0];
82
+ if (file && file.type.startsWith('video/')) {
83
+ setVideoFile(file);
84
+ setShowPreview(false);
85
+ setProcessedVideo(null);
86
+ }
87
+ };
88
+
89
+ const handleProcess = () => {
90
+ if (!videoFile) return;
91
+
92
+ setIsProcessing(true);
93
+ setProgress(0);
94
+
95
+ // Simulate processing
96
+ const interval = setInterval(() => {
97
+ setProgress(prev => {
98
+ if (prev >= 100) {
99
+ clearInterval(interval);
100
+ setIsProcessing(false);
101
+ // Simulate processed video
102
+ setTimeout(() => {
103
+ setProcessedVideo(URL.createObjectURL(videoFile));
104
+ setShowPreview(true);
105
+ }, 500);
106
+ return 100;
107
+ }
108
+ return prev + 10;
109
+ });
110
+ }, 200);
111
+ };
112
+
113
+ const handleDownload = () => {
114
+ // In a real app, this would trigger download of processed video
115
+ alert('Download functionality would be implemented here');
116
+ };
117
+
118
+ return (
119
+ <div className="min-h-screen gradient-bg">
120
+ {/* Header */}
121
+ <header className="glass-effect p-4">
122
+ <div className="container mx-auto flex justify-between items-center">
123
+ <h1 className="text-2xl font-bold text-white">M3DDM Video Outpainting</h1>
124
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-white hover:underline">
125
+ Built with anycoder
126
+ </a>
127
+ </div>
128
+ </header>
129
+
130
+ {/* Main Content */}
131
+ <main className="container mx-auto p-4">
132
+ {/* Tabs */}
133
+ <div className="flex space-x-2 mb-6">
134
+ <button
135
+ onClick={() => setActiveTab('upload')}
136
+ className={`px-6 py-2 rounded-lg font-medium transition-all ${activeTab === 'upload' ? 'tab-active' : 'tab-inactive'}`}
137
+ >
138
+ <i className="fas fa-upload mr-2"></i>
139
+ Upload Video
140
+ </button>
141
+ <button
142
+ onClick={() => setActiveTab('settings')}
143
+ className={`px-6 py-2 rounded-lg font-medium transition-all ${activeTab === 'settings' ? 'tab-active' : 'tab-inactive'}`}
144
+ >
145
+ <i className="fas fa-cog mr-2"></i>
146
+ Settings
147
+ </button>
148
+ <button
149
+ onClick={() => setActiveTab('about')}
150
+ className={`px-6 py-2 rounded-lg font-medium transition-all ${activeTab === 'about' ? 'tab-active' : 'tab-inactive'}`}
151
+ >
152
+ <i className="fas fa-info-circle mr-2"></i>
153
+ About
154
+ </button>
155
+ </div>
156
+
157
+ {/* Upload Section */}
158
+ {activeTab === 'upload' && (
159
+ <div className="grid lg:grid-cols-2 gap-6">
160
+ {/* Upload Area */}
161
+ <div className="glass-effect rounded-xl p-6">
162
+ <h2 className="text-xl font-semibold text-white mb-4">Upload Video</h2>
163
+ <div className="upload-area rounded-lg p-8 text-center cursor-pointer" onClick={() => document.getElementById('videoInput').click()}>
164
+ <input
165
+ type="file"
166
+ id="videoInput"
167
+ className="hidden"
168
+ accept="video/*"
169
+ onChange={handleFileUpload}
170
+ />
171
+ <i className="fas fa-cloud-upload-alt text-4xl text-white mb-4"></i>
172
+ <p className="text-white mb-2">Click to upload or drag and drop</p>
173
+ <p className="text-gray-300 text-sm">MP4, AVI, MOV up to 100MB</p>
174
+ {videoFile && (
175
+ <div className="mt-4 p-3 bg-white bg-opacity-10 rounded-lg">
176
+ <p className="text-white text-sm">{videoFile.name}</p>
177
+ <p className="text-gray-300 text-xs">{(videoFile.size / 1024 / 1024).toFixed(2)} MB</p>
178
+ </div>
179
+ )}
180
+ </div>
181
+ </div>
182
+
183
+ {/* Controls */}
184
+ <div className="glass-effect rounded-xl p-6">
185
+ <h2 className="text-xl font-semibold text-white mb-4">Processing Controls</h2>
186
+
187
+ <div className="space-y-4">
188
+ <div>
189
+ <label className="text-white text-sm mb-2 block">Outpaint Amount: {outpaintAmount}%</label>
190
+ <input
191
+ type="range"
192
+ min="10"
193
+ max="100"
194
+ value={outpaintAmount}
195
+ onChange={(e) => setOutpaintAmount(e.target.value)}
196
+ className="w-full h-2 rounded-lg slider-track appearance-none cursor-pointer"
197
+ />
198
+ </div>
199
+
200
+ <div>
201
+ <label className="text-white text-sm mb-2 block">Quality: {quality}%</label>
202
+ <input
203
+ type="range"
204
+ min="50"
205
+ max="100"
206
+ value={quality}
207
+ onChange={(e) => setQuality(e.target.value)}
208
+ className="w-full h-2 rounded-lg slider-track appearance-none cursor-pointer"
209
+ />
210
+ </div>
211
+
212
+ <div>
213
+ <label className="text-white text-sm mb-2 block">Style</label>
214
+ <select
215
+ value={style}
216
+ onChange={(e) => setStyle(e.target.value)}
217
+ className="w-full p-2 rounded-lg bg-white bg-opacity-10 text-white border border-white border-opacity-20"
218
+ >
219
+ <option value="realistic">Realistic</option>
220
+ <option value="artistic">Artistic</option>
221
+ <option value="cartoon">Cartoon</option>
222
+ </select>
223
+ </div>
224
+
225
+ <button
226
+ onClick={handleProcess}
227
+ disabled={!videoFile || isProcessing}
228
+ className="w-full py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:from-purple-600 hover:to-pink-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
229
+ >
230
+ {isProcessing ? (
231
+ <div className="flex items-center justify-center">
232
+ <div className="loading-spinner mr-3"></div>
233
+ Processing...
234
+ </div>
235
+ ) : 'Process Video'}
236
+ </button>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ )}
241
+
242
+ {/* Settings Section */}
243
+ {activeTab === 'settings' && (
244
+ <div className="glass-effect rounded-xl p-6">
245
+ <h2 className="text-xl font-semibold text-white mb-4">Advanced Settings</h2>
246
+ <div className="grid md:grid-cols-2 gap-6">
247
+ <div>
248
+ <h3 className="text-white font-medium mb-3">Performance</h3>
249
+ <div className="space-y-3">
250
+ <div className="flex items-center justify-between">
251
+ <span className="text-gray-300">GPU Acceleration</span>
252
+ <label className="relative inline-flex items-center cursor-pointer">
253
+ <input type="checkbox" className="sr-only peer" defaultChecked />
254
+ <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
255
+ </label>
256
+ </div>
257
+ <div className="flex items-center justify-between">
258
+ <span className="text-gray-300">High Resolution</span>
259
+ <label className="relative inline-flex items-center cursor-pointer">
260
+ <input type="checkbox" className="sr-only peer" />
261
+ <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
262
+ </label>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div>
267
+ <h3 className="text-white font-medium mb-3">Output</h3>
268
+ <div className="space-y-3">
269
+ <div>
270
+ <label className="text-gray-300 text-sm mb-1 block">Output Format</label>
271
+ <select className="w-full p-2 rounded-lg bg-white bg-opacity-10 text-white border border-white border-opacity-20">
272
+ <option>MP4</option>
273
+ <option>WebM</option>
274
+ <option>AVI</option>
275
+ </select>
276
+ </div>
277
+ <div>
278
+ <label className="text-gray-300 text-sm mb-1 block">Frame Rate</label>
279
+ <select className="w-full p-2 rounded-lg bg-white bg-opacity-10 text-white border border-white border-opacity-20">
280
+ <option>24 FPS</option>
281
+ <option>30 FPS</option>
282
+ <option>60 FPS</option>
283
+ </select>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ )}
290
+
291
+ {/* About Section */}
292
+ {activeTab === 'about' && (
293
+ <div className="glass-effect rounded-xl p-6">
294
+ <h2 className="text-xl font-semibold text-white mb-4">About M3DDM Video Outpainting</h2>
295
+ <div className="text-gray-300 space-y-4">
296
+ <p>M3DDM Video Outpainting is an advanced AI-powered tool that extends video content beyond its original boundaries. Using state-of-the-art machine learning models, it intelligently generates realistic video extensions while maintaining visual consistency.</p>
297
+ <div className="grid md:grid-cols-2 gap-4 mt-6">
298
+ <div className="bg-white bg-opacity-10 p-4 rounded-lg">
299
+ <h3 className="text-white font-medium mb-2">Key Features</h3>
300
+ <ul className="space-y-1 text-sm">
301
+ <li>• AI-powered video extension</li>
302
+ <li>• Multiple style options</li>
303
+ <li>• Adjustable outpaint amount</li>
304
+ <li>• High-quality output</li>
305
+ </ul>
306
+ </div>
307
+ <div className="bg-white bg-opacity-10 p-4 rounded-lg">
308
+ <h3 className="text-white font-medium mb-2">Technical Details</h3>
309
+ <ul className="space-y-1 text-sm">
310
+ <li>• Based on diffusion models</li>
311
+ <li>• GPU accelerated processing</li>
312
+ <li>• Supports various formats</li>
313
+ <li>• Real-time preview</li>
314
+ </ul>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ )}
320
+
321
+ {/* Video Preview Section */}
322
+ {showPreview && (
323
+ <div className="mt-6">
324
+ <div className="glass-effect rounded-xl p-6">
325
+ <div className="flex justify-between items-center mb-4">
326
+ <h2 className="text-xl font-semibold text-white">Preview</h2>
327
+ <button
328
+ onClick={handleDownload}
329
+ className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
330
+ >
331
+ <i className="fas fa-download mr-2"></i>
332
+ Download
333
+ </button>
334
+ </div>
335
+
336
+ <div className="grid lg:grid-cols-2 gap-6">
337
+ <div>
338
+ <h3 className="text-white font-medium mb-2">Original Video</h3>
339
+ <div className="video-container aspect-video">
340
+ <video controls className="w-full h-full object-cover">
341
+ <source src={URL.createObjectURL(videoFile)} type={videoFile.type} />
342
+ </video>
343
+ </div>
344
+ </div>
345
+ <div>
346
+ <h3 className="text-white font-medium mb-2">Processed Video</h3>
347
+ <div className="video-container aspect-video">
348
+ <video controls className="w-full h-full object-cover">
349
+ <source src={processedVideo} type={videoFile.type} />
350
+ </video>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ )}
357
+
358
+ {/* Progress Bar */}
359
+ {isProcessing && (
360
+ <div className="mt-6 glass-effect rounded-xl p-6">
361
+ <div className="flex items-center justify-between mb-2">
362
+ <span className="text-white">Processing...</span>
363
+ <span className="text-white">{progress}%</span>
364
+ </div>
365
+ <div className="w-full bg-gray-700 rounded-full h-2">
366
+ <div
367
+ className="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full transition-all duration-300"
368
+ style={{ width: `${progress}%` }}
369
+ ></div>
370
+ </div>
371
+ </div>
372
+ )}
373
+ </main>
374
+
375
+ {/* Footer */}
376
+ <footer className="mt-12 py-6 text-center text-gray-300 text-sm">
377
+ <p>M3DDM Video Outpainting © 2024 | Powered by Advanced AI Technology</p>
378
+ </footer>
379
+ </div>
380
+ );
381
+ };
382
+
383
+ ReactDOM.render(<App />, document.getElementById('root'));
384
+ </script>
385
+ </body>
386
+ </html>