Spaces:

MarcRyan
/

avgen

Running

App Files Files Community

MarcRyan commited on May 20

Commit

3dd8c5c

verified ·

1 Parent(s): c00b2da

Add 2 files

Browse files

Files changed (2) hide show

index.html +104 -43
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Video Re-Generator | AI Video Enhancement</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -62,6 +62,9 @@
             background: rgba(59, 130, 246, 0.2);
             border-color: #93c5fd;
         }
     </style>
 </head>
 <body class="gradient-bg min-h-screen text-white">
@@ -71,7 +74,7 @@
             <div class="text-center mb-6">
                 <i class="fas fa-video text-4xl text-blue-500 mb-4"></i>
                 <h2 class="text-2xl font-bold mb-2">Welcome to Video Re-Generator</h2>
-                <p class="text-gray-300">Enhance and transform your videos with AI-powered regeneration.</p>
             </div>
             <div class="flex flex-col space-y-4">
                 <button id="confirmAge" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium transition">
@@ -88,11 +91,16 @@
     <div id="mainContent" class="hidden container mx-auto px-4 py-8">
         <!-- Header -->
         <header class="mb-10 text-center">
             <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">
                 Video Re-Generator
             </h1>
             <p class="text-lg text-blue-200 max-w-3xl mx-auto">
-                Transform your MP4 videos with AI-powered enhancement, style transfer, and quality improvement.
             </p>
         </header>
@@ -100,7 +108,7 @@
             <!-- Left Panel - Controls -->
             <div class="lg:col-span-1 bg-gray-900/50 p-6 rounded-xl">
                 <h2 class="text-xl font-semibold mb-6 flex items-center">
-                    <i class="fas fa-sliders-h mr-2 text-blue-400"></i> Video Settings
                 </h2>
                 <!-- Video Upload Section -->
@@ -119,6 +127,19 @@
                     </div>
                 </div>
                 <!-- Style Selection -->
                 <div class="mb-6">
                     <label class="block text-sm font-medium mb-2">
@@ -145,40 +166,40 @@
                     <div class="grid grid-cols-2 gap-2">
                         <div>
                             <label class="block text-xs mb-1">Resolution</label>
-                            <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
-                                <option>Original</option>
-                                <option>480p</option>
-                                <option>720p</option>
-                                <option>1080p</option>
-                                <option>4K</option>
                             </select>
                         </div>
                         <div>
                             <label class="block text-xs mb-1">Frame Rate</label>
-                            <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
-                                <option>Original</option>
-                                <option>24 fps</option>
-                                <option>30 fps</option>
-                                <option>60 fps</option>
                             </select>
                         </div>
                         <div>
                             <label class="block text-xs mb-1">Stabilization</label>
-                            <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
-                                <option>None</option>
-                                <option>Light</option>
-                                <option>Moderate</option>
-                                <option>Strong</option>
                             </select>
                         </div>
                         <div>
                             <label class="block text-xs mb-1">Color Grade</label>
-                            <select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
-                                <option>None</option>
-                                <option>Vibrant</option>
-                                <option>Warm</option>
-                                <option>Cool</option>
-                                <option>Cinematic</option>
                             </select>
                         </div>
                     </div>
@@ -188,34 +209,39 @@
                 <div class="mb-6">
                     <div class="flex items-center justify-between mb-2 cursor-pointer" onclick="toggleAdvanced()">
                         <label class="text-sm font-medium">
-                            <i class="fas fa-cog mr-1 text-blue-300"></i> Advanced Options
                         </label>
                         <i id="advancedArrow" class="fas fa-chevron-down text-blue-300 transition-transform"></i>
                     </div>
                     <div id="advancedOptions" class="hidden space-y-4 pt-2">
                         <div>
                             <label class="block text-xs mb-1">Style Strength</label>
-                            <input type="range" min="0" max="100" value="50" class="w-full slider-thumb">
                         </div>
                         <div>
-                            <label class="block text-xs mb-1">Noise Reduction</label>
-                            <input type="range" min="0" max="100" value="30" class="w-full slider-thumb">
                         </div>
                         <div>
-                            <label class="block text-xs mb-1">Detail Enhancement</label>
-                            <input type="range" min="0" max="100" value="50" class="w-full slider-thumb">
                         </div>
                         <div>
-                            <label class="block text-xs mb-1">Temporal Smoothing</label>
-                            <input type="range" min="0" max="100" value="40" class="w-full slider-thumb">
                         </div>
                     </div>
                 </div>
                 <!-- Generate Button -->
                 <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">
-                    <i class="fas fa-sync-alt mr-2"></i> Re-Generate Video
                 </button>
             </div>
             <!-- Right Panel - Results -->
@@ -223,7 +249,7 @@
                 <div class="video-container rounded-xl flex items-center justify-center mb-6 relative overflow-hidden">
                     <div id="videoPlaceholder" class="text-center p-8">
                         <i class="fas fa-video text-5xl text-blue-400 mb-4 opacity-50"></i>
-                        <p class="text-blue-300">Your original and regenerated videos will appear here</p>
                     </div>
                     <div id="videoDisplay" class="hidden w-full h-full">
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
@@ -232,20 +258,29 @@
                                 <video id="originalVideo" controls class="w-full h-auto max-h-80 rounded-lg"></video>
                             </div>
                             <div>
-                                <h3 class="text-sm font-medium mb-2 text-center">Regenerated Video</h3>
                                 <video id="regeneratedVideo" controls class="w-full h-auto max-h-80 rounded-lg"></video>
                             </div>
                         </div>
                     </div>
                     <div id="loadingIndicator" class="hidden absolute inset-0 flex items-center justify-center bg-black/50">
                         <div class="text-center">
                             <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
-                            <p>Processing your video...</p>
                             <p class="text-xs text-blue-300 mt-2">This may take several minutes depending on length</p>
                             <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4 max-w-md mx-auto">
                                 <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
                             </div>
                             <p id="progressText" class="text-xs mt-2">0% completed</p>
                         </div>
                     </div>
                 </div>
@@ -253,7 +288,7 @@
                 <!-- Style Gallery -->
                 <div class="bg-gray-900/50 p-6 rounded-xl">
                     <h2 class="text-xl font-semibold mb-4 flex items-center">
-                        <i class="fas fa-gem mr-2 text-blue-400"></i> Style Gallery
                     </h2>
                     <p class="text-sm text-blue-200 mb-4">Select a style to preview or click to apply</p>
@@ -322,7 +357,7 @@
                 <a href="#" class="hover:text-blue-200"><i class="fab fa-github"></i></a>
                 <a href="#" class="hover:text-blue-200"><i class="fas fa-envelope"></i></a>
             </div>
-            <p>© 2023 Video Re-Generator. All rights reserved.</p>
             <p class="mt-2 text-xs opacity-70">Supports MP4 files up to 5 minutes in length</p>
         </footer>
     </div>
@@ -434,18 +469,25 @@
             else return (bytes / 1048576).toFixed(1) + ' MB';
         }
-        // Generate button functionality
         document.getElementById('generateBtn').addEventListener('click', function() {
             if(!fileInput.files.length) {
                 alert('Please upload a video file first');
                 return;
             }
             // Show loading state
             document.getElementById('loadingIndicator').classList.remove('hidden');
-            // Simulate processing (in a real app, this would be an API call)
             let progress = 0;
             const progressInterval = setInterval(() => {
                 progress += Math.random() * 5;
                 if(progress > 100) progress = 100;
@@ -455,6 +497,9 @@
                 if(progress === 100) {
                     clearInterval(progressInterval);
                     setTimeout(finishProcessing, 1000);
                 }
             }, 500);
@@ -467,7 +512,23 @@
                 document.getElementById('regeneratedVideo').src = originalSrc;
                 // Show a success message
-                alert('Video regeneration completed successfully!');
             }
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Re-Generator with Google Veo2 AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
             background: rgba(59, 130, 246, 0.2);
             border-color: #93c5fd;
         }
+        .veo-badge {
+            background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 100%);
+        }
     </style>
 </head>
 <body class="gradient-bg min-h-screen text-white">
             <div class="text-center mb-6">
                 <i class="fas fa-video text-4xl text-blue-500 mb-4"></i>
                 <h2 class="text-2xl font-bold mb-2">Welcome to Video Re-Generator</h2>
+                <p class="text-gray-300">Powered by Google Veo2 AI for advanced video generation</p>
             </div>
             <div class="flex flex-col space-y-4">
                 <button id="confirmAge" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium transition">
     <div id="mainContent" class="hidden container mx-auto px-4 py-8">
         <!-- Header -->
         <header class="mb-10 text-center">
+            <div class="flex items-center justify-center mb-2">
+                <span class="veo-badge text-xs font-bold px-3 py-1 rounded-full inline-flex items-center">
+                    <i class="fab fa-google mr-1"></i> Powered by Veo2 AI
+                </span>
+            </div>
             <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">
                 Video Re-Generator
             </h1>
             <p class="text-lg text-blue-200 max-w-3xl mx-auto">
+                Transform your MP4 videos with Google's Veo2 AI for high-quality video generation and enhancement.
             </p>
         </header>
             <!-- Left Panel - Controls -->
             <div class="lg:col-span-1 bg-gray-900/50 p-6 rounded-xl">
                 <h2 class="text-xl font-semibold mb-6 flex items-center">
+                    <i class="fas fa-sliders-h mr-2 text-blue-400"></i> Veo2 AI Settings
                 </h2>
                 <!-- Video Upload Section -->
                     </div>
                 </div>
+                <!-- Veo2 AI Model Selection -->
+                <div class="mb-6">
+                    <label class="block text-sm font-medium mb-2">
+                        <i class="fas fa-robot mr-1 text-blue-300"></i> Veo2 Model
+                    </label>
+                    <select id="veoModel" 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">
+                        <option value="veo2-standard">Veo2 Standard</option>
+                        <option value="veo2-creative">Veo2 Creative</option>
+                        <option value="veo2-premium">Veo2 Premium (4K)</option>
+                    </select>
+                    <p class="text-xs text-blue-300 mt-1">Premium models require API credits</p>
+                </div>
                 <!-- Style Selection -->
                 <div class="mb-6">
                     <label class="block text-sm font-medium mb-2">
                     <div class="grid grid-cols-2 gap-2">
                         <div>
                             <label class="block text-xs mb-1">Resolution</label>
+                            <select id="resolution" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
+                                <option value="original">Original</option>
+                                <option value="480p">480p</option>
+                                <option value="720p">720p</option>
+                                <option value="1080p">1080p</option>
+                                <option value="4k">4K (Premium only)</option>
                             </select>
                         </div>
                         <div>
                             <label class="block text-xs mb-1">Frame Rate</label>
+                            <select id="framerate" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
+                                <option value="original">Original</option>
+                                <option value="24">24 fps</option>
+                                <option value="30">30 fps</option>
+                                <option value="60">60 fps</option>
                             </select>
                         </div>
                         <div>
                             <label class="block text-xs mb-1">Stabilization</label>
+                            <select id="stabilization" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
+                                <option value="none">None</option>
+                                <option value="light">Light</option>
+                                <option value="moderate">Moderate</option>
+                                <option value="strong">Strong</option>
                             </select>
                         </div>
                         <div>
                             <label class="block text-xs mb-1">Color Grade</label>
+                            <select id="colorgrade" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
+                                <option value="none">None</option>
+                                <option value="vibrant">Vibrant</option>
+                                <option value="warm">Warm</option>
+                                <option value="cool">Cool</option>
+                                <option value="cinematic">Cinematic</option>
                             </select>
                         </div>
                     </div>
                 <div class="mb-6">
                     <div class="flex items-center justify-between mb-2 cursor-pointer" onclick="toggleAdvanced()">
                         <label class="text-sm font-medium">
+                            <i class="fas fa-cog mr-1 text-blue-300"></i> Veo2 Advanced Options
                         </label>
                         <i id="advancedArrow" class="fas fa-chevron-down text-blue-300 transition-transform"></i>
                     </div>
                     <div id="advancedOptions" class="hidden space-y-4 pt-2">
                         <div>
                             <label class="block text-xs mb-1">Style Strength</label>
+                            <input type="range" min="0" max="100" value="70" class="w-full slider-thumb" id="styleStrength">
                         </div>
                         <div>
+                            <label class="block text-xs mb-1">Creativity Level</label>
+                            <input type="range" min="0" max="100" value="50" class="w-full slider-thumb" id="creativity">
                         </div>
                         <div>
+                            <label class="block text-xs mb-1">Temporal Consistency</label>
+                            <input type="range" min="0" max="100" value="80" class="w-full slider-thumb" id="temporalConsistency">
                         </div>
                         <div>
+                            <label class="block text-xs mb-1">Text Prompt (Optional)</label>
+                            <input type="text" placeholder="Describe desired changes..." class="w-full bg-gray-800 border border-gray-700 rounded-lg p-1 text-xs">
                         </div>
                     </div>
                 </div>
                 <!-- Generate Button -->
                 <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">
+                    <i class="fab fa-google mr-2"></i> Generate with Veo2 AI
                 </button>
+                <div class="mt-4 text-xs text-blue-300 flex items-center">
+                    <i class="fas fa-info-circle mr-1"></i>
+                    <span>Each generation uses 1 API credit</span>
+                </div>
             </div>
             <!-- Right Panel - Results -->
                 <div class="video-container rounded-xl flex items-center justify-center mb-6 relative overflow-hidden">
                     <div id="videoPlaceholder" class="text-center p-8">
                         <i class="fas fa-video text-5xl text-blue-400 mb-4 opacity-50"></i>
+                        <p class="text-blue-300">Your original and Veo2 generated videos will appear here</p>
                     </div>
                     <div id="videoDisplay" class="hidden w-full h-full">
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
                                 <video id="originalVideo" controls class="w-full h-auto max-h-80 rounded-lg"></video>
                             </div>
                             <div>
+                                <h3 class="text-sm font-medium mb-2 text-center">Veo2 Generated</h3>
                                 <video id="regeneratedVideo" controls class="w-full h-auto max-h-80 rounded-lg"></video>
+                                <div class="mt-2 flex justify-between items-center text-xs">
+                                    <span class="text-blue-300">Generation time: <span id="genTime">0</span>s</span>
+                                    <button class="text-blue-400 hover:text-blue-300 flex items-center">
+                                        <i class="fas fa-download mr-1"></i> Download
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div id="loadingIndicator" class="hidden absolute inset-0 flex items-center justify-center bg-black/50">
                         <div class="text-center">
                             <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
+                            <p>Processing with Veo2 AI...</p>
                             <p class="text-xs text-blue-300 mt-2">This may take several minutes depending on length</p>
                             <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4 max-w-md mx-auto">
                                 <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
                             </div>
                             <p id="progressText" class="text-xs mt-2">0% completed</p>
+                            <p class="text-xs text-blue-300 mt-4">
+                                <i class="fab fa-google mr-1"></i> Using Veo2 <span id="currentModel">Standard</span> model
+                            </p>
                         </div>
                     </div>
                 </div>
                 <!-- Style Gallery -->
                 <div class="bg-gray-900/50 p-6 rounded-xl">
                     <h2 class="text-xl font-semibold mb-4 flex items-center">
+                        <i class="fas fa-gem mr-2 text-blue-400"></i> Veo2 Style Gallery
                     </h2>
                     <p class="text-sm text-blue-200 mb-4">Select a style to preview or click to apply</p>
                 <a href="#" class="hover:text-blue-200"><i class="fab fa-github"></i></a>
                 <a href="#" class="hover:text-blue-200"><i class="fas fa-envelope"></i></a>
             </div>
+            <p>© 2023 Video Re-Generator with Google Veo2 AI. All rights reserved.</p>
             <p class="mt-2 text-xs opacity-70">Supports MP4 files up to 5 minutes in length</p>
         </footer>
     </div>
             else return (bytes / 1048576).toFixed(1) + ' MB';
         }
+        // Generate button functionality with Veo2 AI simulation
         document.getElementById('generateBtn').addEventListener('click', function() {
             if(!fileInput.files.length) {
                 alert('Please upload a video file first');
                 return;
             }
+            // Get selected model
+            const modelSelect = document.getElementById('veoModel');
+            const selectedModel = modelSelect.options[modelSelect.selectedIndex].text;
+            document.getElementById('currentModel').textContent = selectedModel;
             // Show loading state
             document.getElementById('loadingIndicator').classList.remove('hidden');
+            // Simulate Veo2 AI processing
             let progress = 0;
+            const startTime = new Date().getTime();
             const progressInterval = setInterval(() => {
                 progress += Math.random() * 5;
                 if(progress > 100) progress = 100;
                 if(progress === 100) {
                     clearInterval(progressInterval);
+                    const endTime = new Date().getTime();
+                    const duration = Math.round((endTime - startTime) / 1000);
+                    document.getElementById('genTime').textContent = duration;
                     setTimeout(finishProcessing, 1000);
                 }
             }, 500);
                 document.getElementById('regeneratedVideo').src = originalSrc;
                 // Show a success message
+                alert('Veo2 AI video generation completed successfully!');
+            }
+        });
+        // Update resolution options based on selected model
+        document.getElementById('veoModel').addEventListener('change', function() {
+            const resolutionSelect = document.getElementById('resolution');
+            const selectedModel = this.value;
+            // Disable 4K option unless premium model is selected
+            for(let i = 0; i < resolutionSelect.options.length; i++) {
+                if(resolutionSelect.options[i].value === '4k') {
+                    resolutionSelect.options[i].disabled = selectedModel !== 'veo2-premium';
+                    if(resolutionSelect.options[i].selected && resolutionSelect.options[i].disabled) {
+                        resolutionSelect.value = 'original';
+                    }
+                }
             }
         });
     </script>

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 make this website - https://huggingface.co/spaces/Heartsync/NSFW-Uncensored-video?not-for-all-audiences=true - with more illstration options
 change NSFW to SFW
-gENERATION SETTINGS SHOULD BE DESIGNED FOR VIDEO "RE-GENERATION" FROM AN MP4

 make this website - https://huggingface.co/spaces/Heartsync/NSFW-Uncensored-video?not-for-all-audiences=true - with more illstration options
 change NSFW to SFW
+gENERATION SETTINGS SHOULD BE DESIGNED FOR VIDEO "RE-GENERATION" FROM AN MP4
+ensure its oging to use google ai Veo2 for video generation