Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>U.F. AI Enhancer - Video Quality Improvement Tool</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .video-container { | |
| aspect-ratio: 16/9; | |
| background-color: #1a202c; | |
| } | |
| .slider-thumb::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #6e8efb; | |
| cursor: pointer; | |
| } | |
| .slider-thumb::-moz-range-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #6e8efb; | |
| cursor: pointer; | |
| } | |
| .processing-loader { | |
| border: 5px solid #f3f3f3; | |
| border-top: 5px solid #6e8efb; | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .code-block { | |
| font-family: 'Courier New', Courier, monospace; | |
| background-color: #2d3748; | |
| color: #e2e8f0; | |
| border-radius: 0.5rem; | |
| overflow-x: auto; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-100"> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| <h1 class="text-2xl font-bold">U.F. AI Enhancer</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:text-gray-200 transition">Home</a></li> | |
| <li><a href="#features" class="hover:text-gray-200 transition">Features</a></li> | |
| <li><a href="#how-it-works" class="hover:text-gray-200 transition">How It Works</a></li> | |
| <li><a href="#code" class="hover:text-gray-200 transition">Code</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <section class="mb-16 text-center"> | |
| <h2 class="text-4xl font-bold mb-6 text-gray-800">Enhance Your Videos with AI</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| U.F. AI Enhancer is an offline tool that improves video quality by adjusting brightness, contrast, and sharpness using computer vision techniques. | |
| </p> | |
| </section> | |
| <section class="mb-16 bg-white rounded-xl shadow-lg p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-4 text-gray-800">Upload & Process</h3> | |
| <div class="video-container rounded-lg mb-4 flex items-center justify-center relative"> | |
| <div id="video-placeholder" class="text-center p-4 text-gray-400"> | |
| <i class="fas fa-video text-5xl mb-3"></i> | |
| <p>Your video will appear here</p> | |
| </div> | |
| <video id="video-preview" controls class="w-full h-full hidden"></video> | |
| </div> | |
| <div class="flex justify-between mb-4"> | |
| <button id="upload-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition flex items-center"> | |
| <i class="fas fa-upload mr-2"></i> Upload Video | |
| </button> | |
| <button id="process-btn" class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-lg transition flex items-center disabled:opacity-50" disabled> | |
| <i class="fas fa-magic mr-2"></i> Enhance Video | |
| </button> | |
| </div> | |
| <input type="file" id="video-input" accept="video/*" class="hidden"> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-4 text-gray-800">Enhancement Settings</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="brightness" class="block text-gray-700 mb-2">Brightness</label> | |
| <input type="range" id="brightness" min="-100" max="100" value="0" class="w-full slider-thumb"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Darker</span> | |
| <span>Normal</span> | |
| <span>Brighter</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="contrast" class="block text-gray-700 mb-2">Contrast</label> | |
| <input type="range" id="contrast" min="-100" max="100" value="0" class="w-full slider-thumb"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Lower</span> | |
| <span>Normal</span> | |
| <span>Higher</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="sharpness" class="block text-gray-700 mb-2">Sharpness</label> | |
| <input type="range" id="sharpness" min="0" max="100" value="50" class="w-full slider-thumb"> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Softer</span> | |
| <span>Normal</span> | |
| <span>Sharper</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="filter" class="block text-gray-700 mb-2">Filter Preset</label> | |
| <select id="filter" class="w-full p-2 border border-gray-300 rounded-lg"> | |
| <option value="none">None</option> | |
| <option value="vivid">Vivid Colors</option> | |
| <option value="cinematic">Cinematic</option> | |
| <option value="blackwhite">Black & White</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="features" class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center text-gray-800">Key Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-sun text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Brightness Adjustment</h3> | |
| <p class="text-gray-600">Fine-tune the brightness levels to make your videos clearer in low-light conditions or tone down overexposed footage.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition"> | |
| <div class="text-purple-500 mb-4"> | |
| <i class="fas fa-adjust text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Contrast Enhancement</h3> | |
| <p class="text-gray-600">Improve the distinction between light and dark areas to make your videos pop with better visual depth.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition"> | |
| <div class="text-green-500 mb-4"> | |
| <i class="fas fa-cut text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Sharpness Control</h3> | |
| <p class="text-gray-600">Reduce blurriness and enhance edge definition for crisper, more professional-looking videos.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="how-it-works" class="mb-16 bg-white rounded-xl shadow-lg p-8"> | |
| <h2 class="text-3xl font-bold mb-6 text-center text-gray-800">How It Works</h2> | |
| <div class="space-y-8"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/4 text-center mb-4 md:mb-0"> | |
| <div class="bg-blue-100 text-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto text-2xl font-bold">1</div> | |
| </div> | |
| <div class="md:w-3/4"> | |
| <h3 class="text-xl font-semibold mb-2">Upload Your Video</h3> | |
| <p class="text-gray-600">Select any video file from your device. The tool supports common formats like MP4, AVI, and MOV.</p> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/4 text-center mb-4 md:mb-0"> | |
| <div class="bg-purple-100 text-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto text-2xl font-bold">2</div> | |
| </div> | |
| <div class="md:w-3/4"> | |
| <h3 class="text-xl font-semibold mb-2">Adjust Enhancement Settings</h3> | |
| <p class="text-gray-600">Use the intuitive sliders to customize brightness, contrast, and sharpness levels to your preference.</p> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/4 text-center mb-4 md:mb-0"> | |
| <div class="bg-green-100 text-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto text-2xl font-bold">3</div> | |
| </div> | |
| <div class="md:w-3/4"> | |
| <h3 class="text-xl font-semibold mb-2">Process & Download</h3> | |
| <p class="text-gray-600">The AI processes each frame to apply your enhancements, then outputs a new, improved video file.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="code" class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 text-center text-gray-800">Python Implementation</h2> | |
| <p class="text-gray-600 mb-8 text-center max-w-3xl mx-auto"> | |
| Below is the complete Python code for the U.F. AI Enhancer. This offline tool uses OpenCV for frame-by-frame processing and MoviePy for final rendering. | |
| </p> | |
| <div class="code-block p-6 mb-8"> | |
| <pre><code>import cv2 | |
| import numpy as np | |
| from moviepy.editor import VideoFileClip, VideoClip | |
| import os | |
| import time | |
| class VideoEnhancer: | |
| def __init__(self): | |
| """Initialize the video enhancer with default settings.""" | |
| self.brightness = 0 # Range: -100 to 100 | |
| self.contrast = 0 # Range: -100 to 100 | |
| self.sharpness = 50 # Range: 0 to 100 | |
| self.filter_preset = "none" # Options: none, vivid, cinematic, blackwhite | |
| def apply_enhancements(self, frame): | |
| """Apply all selected enhancements to a single frame. | |
| Args: | |
| frame: Input frame (numpy array) | |
| Returns: | |
| Enhanced frame (numpy array) | |
| """ | |
| # Convert frame to float for processing | |
| frame = frame.astype('float32') / 255.0 | |
| # Apply brightness and contrast | |
| frame = self.adjust_brightness_contrast(frame) | |
| # Apply sharpness | |
| frame = self.apply_sharpness(frame) | |
| # Apply filter preset | |
| frame = self.apply_filter(frame) | |
| # Convert back to 8-bit | |
| frame = (frame * 255).astype('uint8') | |
| return frame | |
| def adjust_brightness_contrast(self, frame): | |
| """Adjust brightness and contrast of the frame. | |
| Args: | |
| frame: Input frame (float32, 0-1 range) | |
| Returns: | |
| Adjusted frame (float32, 0-1 range) | |
| """ | |
| # Convert brightness/contrast values to multipliers | |
| brightness_factor = (self.brightness + 100) / 100.0 | |
| contrast_factor = (self.contrast + 100) / 100.0 | |
| # Apply brightness | |
| frame = frame * brightness_factor | |
| # Apply contrast | |
| frame = ((frame - 0.5) * contrast_factor) + 0.5 | |
| # Clip values to 0-1 range | |
| frame = np.clip(frame, 0, 1) | |
| return frame | |
| def apply_sharpness(self, frame): | |
| """Apply sharpness enhancement to the frame. | |
| Args: | |
| frame: Input frame (float32, 0-1 range) | |
| Returns: | |
| Sharpened frame (float32, 0-1 range) | |
| """ | |
| if self.sharpness == 50: # No sharpness adjustment | |
| return frame | |
| # Convert sharpness to a kernel strength (0-2 range) | |
| strength = self.sharpness / 50.0 | |
| # Create sharpening kernel | |
| kernel = np.array([[-1, -1, -1], | |
| [-1, 9, -1], | |
| [-1, -1, -1]]) * strength | |
| # Apply convolution | |
| sharpened = cv2.filter2D(frame, -1, kernel) | |
| # Blend with original based on strength | |
| alpha = min(1.0, abs(strength - 1.0)) | |
| frame = alpha * sharpened + (1 - alpha) * frame | |
| return np.clip(frame, 0, 1) | |
| def apply_filter(self, frame): | |
| """Apply selected filter preset to the frame. | |
| Args: | |
| frame: Input frame (float32, 0-1 range) | |
| Returns: | |
| Filtered frame (float32, 0-1 range) | |
| """ | |
| if self.filter_preset == "vivid": | |
| # Boost saturation and contrast | |
| hsv = cv2.cvtColor(frame, cv2.COLOR_BGR2HSV) | |
| hsv[..., 1] = hsv[..., 1] * 1.5 # Increase saturation | |
| frame = cv2.cvtColor(hsv, cv2.COLOR_HSV2BGR) | |
| frame = np.clip(frame, 0, 1) | |
| elif self.filter_preset == "cinematic": | |
| # Add a slight blue tint and reduce brightness | |
| frame[..., 0] = frame[..., 0] * 0.9 # Reduce blue slightly | |
| frame[..., 2] = frame[..., 2] * 1.1 # Increase red slightly | |
| frame = frame * 0.9 # Darken slightly | |
| frame = np.clip(frame, 0, 1) | |
| elif self.filter_preset == "blackwhite": | |
| # Convert to grayscale then back to BGR for consistent processing | |
| gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY) | |
| frame = cv2.cvtColor(gray, cv2.COLOR_GRAY2BGR) | |
| return frame | |
| def process_video(self, input_path, output_path): | |
| """Process the entire video file with the current settings. | |
| Args: | |
| input_path: Path to input video file | |
| output_path: Path to save enhanced video file | |
| Returns: | |
| Processing time in seconds | |
| """ | |
| start_time = time.time() | |
| # Load the video | |
| clip = VideoFileClip(input_path) | |
| # Define the processing function for each frame | |
| def process_frame(frame): | |
| return self.apply_enhancements(frame) | |
| # Apply the processing to each frame | |
| enhanced_clip = clip.fl_image(process_frame) | |
| # Write the result to a file | |
| enhanced_clip.write_videofile( | |
| output_path, | |
| codec='libx264', | |
| audio_codec='aac', | |
| threads=4, | |
| fps=clip.fps, | |
| bitrate=f"{int(clip.size[0] * clip.size[1] * clip.fps * 0.1)}k" | |
| ) | |
| # Close the clips | |
| clip.close() | |
| enhanced_clip.close() | |
| return time.time() - start_time | |
| def main(): | |
| """Main function to demonstrate the video enhancement.""" | |
| print("U.F. AI Enhancer - Video Quality Improvement Tool") | |
| print("-----------------------------------------------") | |
| # Initialize enhancer | |
| enhancer = VideoEnhancer() | |
| # Get input file | |
| input_file = input("Enter path to input video file: ").strip('"') | |
| if not os.path.exists(input_file): | |
| print("Error: File not found!") | |
| return | |
| # Set output file | |
| output_file = os.path.splitext(input_file)[0] + "_enhanced.mp4" | |
| # Get enhancement settings from user | |
| print("\nEnhancement Settings (press Enter for defaults)") | |
| print("--------------------------------------------") | |
| try: | |
| brightness = input(f"Brightness (-100 to 100) [default {enhancer.brightness}]: ") | |
| if brightness: enhancer.brightness = int(brightness) | |
| contrast = input(f"Contrast (-100 to 100) [default {enhancer.contrast}]: ") | |
| if contrast: enhancer.contrast = int(contrast) | |
| sharpness = input(f"Sharpness (0 to 100) [default {enhancer.sharpness}]: ") | |
| if sharpness: enhancer.sharpness = int(sharpness) | |
| print("\nFilter Presets:") | |
| print("1. None (default)") | |
| print("2. Vivid Colors") | |
| print("3. Cinematic") | |
| print("4. Black & White") | |
| filter_choice = input("Select filter (1-4) [default 1]: ") | |
| if filter_choice == "2": enhancer.filter_preset = "vivid" | |
| elif filter_choice == "3": enhancer.filter_preset = "cinematic" | |
| elif filter_choice == "4": enhancer.filter_preset = "blackwhite" | |
| # Process the video | |
| print("\nProcessing video... This may take some time depending on video length.") | |
| processing_time = enhancer.process_video(input_file, output_file) | |
| print(f"\nProcessing complete! Enhanced video saved to: {output_file}") | |
| print(f"Processing time: {processing_time:.2f} seconds") | |
| except ValueError: | |
| print("Error: Invalid input! Please enter numbers only for settings.") | |
| except Exception as e: | |
| print(f"An error occurred: {str(e)}") | |
| if __name__ == "__main__": | |
| main()</code></pre> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Requirements</h3> | |
| <p class="text-gray-600 mb-4">To run this tool, you'll need to install the following Python packages:</p> | |
| <div class="code-block p-4 mb-4"> | |
| <code>pip install opencv-python numpy moviepy</code> | |
| </div> | |
| <p class="text-gray-600">For better performance, you can also install FFmpeg:</p> | |
| <div class="code-block p-4"> | |
| <code># On Windows: choco install ffmpeg<br># On macOS: brew install ffmpeg<br># On Linux (Debian/Ubuntu): sudo apt install ffmpeg</code> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="gradient-bg text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> U.F. AI Enhancer | |
| </h2> | |
| <p class="text-gray-200 mt-2">Offline AI-powered video enhancement tool</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-white hover:text-gray-200 transition"> | |
| <i class="fab fa-github text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-gray-200 transition"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-gray-200 transition"> | |
| <i class="fab fa-youtube text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-400 mt-8 pt-6 text-center text-gray-200"> | |
| <p>© 2023 U.F. AI Enhancer. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // UI Functionality | |
| document.getElementById('upload-btn').addEventListener('click', function() { | |
| document.getElementById('video-input').click(); | |
| }); | |
| document.getElementById('video-input').addEventListener('change', function(e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| const videoPreview = document.getElementById('video-preview'); | |
| const videoPlaceholder = document.getElementById('video-placeholder'); | |
| videoPreview.src = URL.createObjectURL(file); | |
| videoPreview.classList.remove('hidden'); | |
| videoPlaceholder.classList.add('hidden'); | |
| document.getElementById('process-btn').disabled = false; | |
| } | |
| }); | |
| document.getElementById('process-btn').addEventListener('click', function() { | |
| // Show processing animation | |
| const processBtn = this; | |
| const originalText = processBtn.innerHTML; | |
| processBtn.innerHTML = '<div class="processing-loader"></div>'; | |
| processBtn.disabled = true; | |
| // Simulate processing (in a real app, this would call the Python backend) | |
| setTimeout(function() { | |
| processBtn.innerHTML = originalText; | |
| processBtn.disabled = false; | |
| // Show success message | |
| alert('Video processing complete! In a real implementation, this would download the enhanced video.'); | |
| }, 3000); | |
| }); | |
| // Update slider value displays | |
| const sliders = ['brightness', 'contrast', 'sharpness']; | |
| sliders.forEach(sliderId => { | |
| const slider = document.getElementById(sliderId); | |
| slider.addEventListener('input', function() { | |
| // In a real app, you might update a preview here | |
| }); | |
| }); | |
| </script> | |
| <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=Notmebug/u-f-ai-enhancer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |