| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Video Generator | Local Text-to-Video</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, #a777e3); |
| } |
| .model-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .progress-bar { |
| transition: width 0.3s ease; |
| } |
| .video-preview { |
| aspect-ratio: 16/9; |
| } |
| @media (max-width: 640px) { |
| .model-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen"> |
| <div class="gradient-bg text-white py-6 px-4 shadow-lg"> |
| <div class="container mx-auto"> |
| <div class="flex justify-between items-center"> |
| <h1 class="text-3xl font-bold flex items-center"> |
| <i class="fas fa-film mr-3"></i> AI Video Studio |
| </h1> |
| <div class="flex space-x-4"> |
| <button class="bg-white text-purple-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition"> |
| <i class="fas fa-cog mr-2"></i> Settings |
| </button> |
| <button class="bg-purple-800 text-white px-4 py-2 rounded-lg font-semibold hover:bg-purple-900 transition"> |
| <i class="fas fa-question-circle mr-2"></i> Help |
| </button> |
| </div> |
| </div> |
| <p class="mt-2 opacity-90">Transform your text into engaging YouTube videos with local AI processing</p> |
| </div> |
| </div> |
|
|
| <div class="container mx-auto px-4 py-8"> |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Recommended Models for Your System</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 model-grid"> |
| |
| <div class="model-card bg-white border border-gray-200 rounded-xl p-6 transition duration-300 hover:shadow-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-bolt text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">Stable Video Diffusion</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Best for: High-quality short clips (2-4 sec) with good coherence</p> |
| <div class="flex items-center text-sm text-gray-500 mb-4"> |
| <i class="fas fa-microchip mr-2"></i> |
| <span>VRAM: 12-16GB (RTX 3090 recommended)</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-500 mb-4"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>~30 sec per frame (24GB VRAM)</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Best Match</span> |
| <button class="text-blue-600 font-medium hover:text-blue-800">Select</button> |
| </div> |
| </div> |
|
|
| |
| <div class="model-card bg-white border border-gray-200 rounded-xl p-6 transition duration-300 hover:shadow-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-video text-purple-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">ModelScope Text2Video</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Best for: Longer sequences (5-10 sec) with basic motion</p> |
| <div class="flex items-center text-sm text-gray-500 mb-4"> |
| <i class="fas fa-microchip mr-2"></i> |
| <span>VRAM: 8GB+ (Works on RTX 3060)</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-500 mb-4"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>~1-2 min per second of video</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Balanced</span> |
| <button class="text-blue-600 font-medium hover:text-blue-800">Select</button> |
| </div> |
| </div> |
|
|
| |
| <div class="model-card bg-white border border-gray-200 rounded-xl p-6 transition duration-300 hover:shadow-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-robot text-green-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-gray-800">AnimateDiff + SDXL</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Best for: Custom character animation with control</p> |
| <div class="flex items-center text-sm text-gray-500 mb-4"> |
| <i class="fas fa-microchip mr-2"></i> |
| <span>VRAM: 16GB+ (Best on RTX 3090)</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-500 mb-4"> |
| <i class="fas fa-clock mr-2"></i> |
| <span>~2-3 min per second of video</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Advanced</span> |
| <button class="text-blue-600 font-medium hover:text-blue-800">Select</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| <div class="lg:col-span-2"> |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Video Creation Panel</h2> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">Script/Prompt</label> |
| <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" rows="5" placeholder="Describe your video scene in detail..."></textarea> |
| <div class="flex justify-between mt-2 text-sm text-gray-500"> |
| <span>Example: "A futuristic cityscape at sunset with flying cars, cinematic style"</span> |
| <span>0/500</span> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label class="block text-gray-700 font-medium mb-2">Video Length</label> |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| <option>2 seconds</option> |
| <option>4 seconds</option> |
| <option selected>6 seconds</option> |
| <option>8 seconds</option> |
| <option>10 seconds</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 font-medium mb-2">Style</label> |
| <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"> |
| <option>Realistic</option> |
| <option selected>Cinematic</option> |
| <option>Anime</option> |
| <option>Cartoon</option> |
| <option>Watercolor</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">Advanced Options</label> |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <input type="checkbox" class="h-5 w-5 text-purple-600 rounded focus:ring-purple-500" checked> |
| <label class="ml-2 text-gray-700">Enable frame interpolation</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" class="h-5 w-5 text-purple-600 rounded focus:ring-purple-500"> |
| <label class="ml-2 text-gray-700">Use high-resolution mode</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" class="h-5 w-5 text-purple-600 rounded focus:ring-purple-500" checked> |
| <label class="ml-2 text-gray-700">Add background music</label> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex justify-between items-center"> |
| <div> |
| <span class="text-sm text-gray-500">Estimated VRAM usage: <span class="font-medium">18.4GB/24GB</span></span> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1"> |
| <div class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 76%"></div> |
| </div> |
| </div> |
| <button class="gradient-bg text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition flex items-center"> |
| <i class="fas fa-play-circle mr-2"></i> Generate Video |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div> |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8 sticky top-4"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">System Monitor</h2> |
| |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">GPU (RTX 3090)</span> |
| <span class="text-sm font-medium text-gray-700">62%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 62%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">VRAM Usage</span> |
| <span class="text-sm font-medium text-gray-700">18.4/24 GB</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 76%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">CPU Usage</span> |
| <span class="text-sm font-medium text-gray-700">45%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium text-gray-700">RAM Usage</span> |
| <span class="text-sm font-medium text-gray-700">12.7/32 GB</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 40%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-6 pt-4 border-t border-gray-200"> |
| <h3 class="font-medium text-gray-700 mb-2">Recent Videos</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer"> |
| <div class="bg-gray-200 w-16 h-10 rounded-md overflow-hidden video-preview mr-3"></div> |
| <div> |
| <p class="text-sm font-medium">Sunset Cityscape</p> |
| <p class="text-xs text-gray-500">4s • 2 min ago</p> |
| </div> |
| </div> |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer"> |
| <div class="bg-gray-200 w-16 h-10 rounded-md overflow-hidden video-preview mr-3"></div> |
| <div> |
| <p class="text-sm font-medium">Forest Animation</p> |
| <p class="text-xs text-gray-500">6s • 15 min ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Video Preview</h2> |
| <div class="bg-gray-200 rounded-xl overflow-hidden video-preview flex items-center justify-center"> |
| <div class="text-center"> |
| <i class="fas fa-video text-gray-400 text-5xl mb-3"></i> |
| <p class="text-gray-500">Your generated video will appear here</p> |
| </div> |
| </div> |
| <div class="flex justify-end mt-4 space-x-3"> |
| <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-300 transition"> |
| <i class="fas fa-redo mr-2"></i> Regenerate |
| </button> |
| <button class="bg-green-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-green-700 transition"> |
| <i class="fas fa-save mr-2"></i> Save Project |
| </button> |
| <button class="gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition"> |
| <i class="fas fa-upload mr-2"></i> Export to YouTube |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <footer class="bg-gray-800 text-white py-8 mt-12"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between"> |
| <div class="mb-6 md:mb-0"> |
| <h3 class="text-xl font-bold mb-4">AI Video Studio</h3> |
| <p class="text-gray-400 max-w-md">Transform your ideas into videos with the power of local AI processing on your high-end machine.</p> |
| <div class="mt-4"> |
| <h4 class="font-semibold text-white mb-2">Model Installation Guide</h4> |
| <p class="text-sm text-gray-400">1. Download models from links above</p> |
| <p class="text-sm text-gray-400">2. Place in models/ directory</p> |
| <p class="text-sm text-gray-400">3. Restart application to detect</p> |
| </div> |
| </div> |
| <div class="grid grid-cols-2 gap-8"> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Model Hub</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Support</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 AI Video Studio. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord text-xl"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelectorAll('.model-card button').forEach(button => { |
| button.addEventListener('click', function() { |
| const modelName = this.closest('.model-card').querySelector('h3').textContent; |
| alert(`Selected model: ${modelName}\nThis model will now be used for generation.`); |
| }); |
| }); |
| |
| document.querySelector('.gradient-bg.text-white.px-6.py-3').addEventListener('click', function() { |
| const progressBar = document.querySelector('.progress-bar'); |
| let width = 0; |
| const interval = setInterval(() => { |
| if (width >= 100) { |
| clearInterval(interval); |
| alert('Video generation complete!'); |
| } else { |
| width += 5; |
| progressBar.style.width = width + '%'; |
| } |
| }, 300); |
| }); |
| </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=j4myjohn/ai-vids" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
