Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NSFW Image to Video Generator | Unlimited Length | Face Consistency</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, #1e1b4b 0%, #4c1d95 50%, #7e22ce 100%); | |
| } | |
| .preview-container { | |
| aspect-ratio: 16/9; | |
| background-color: #1f2937; | |
| } | |
| .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); | |
| } | |
| .face-consistency-meter { | |
| background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%); | |
| } | |
| .progress-bar { | |
| background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 50%, #f43f5e 100%); | |
| } | |
| .nsfw-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <header class="gradient-bg py-6 px-4 shadow-xl"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-film text-2xl text-pink-500"></i> | |
| <h1 class="text-2xl font-bold">NSFW VideoGen</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="nsfw-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">18+</span> | |
| <button class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded-lg font-medium transition"> | |
| <i class="fas fa-user mr-2"></i>Login | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Upload and Settings --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-image mr-2 text-purple-400"></i> Source Image | |
| </h2> | |
| <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center cursor-pointer hover:border-purple-500 transition"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-400">Drag & drop your NSFW image</p> | |
| <p class="text-sm text-gray-500 mt-2">or click to browse</p> | |
| <input type="file" id="image-upload" class="hidden" accept="image/*"> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium">Face Detection</span> | |
| <span class="text-sm font-bold text-green-400">Detected</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="face-consistency-meter h-2.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">High face consistency guaranteed</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-sliders-h mr-2 text-purple-400"></i> Generation Settings | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Video Duration</label> | |
| <div class="flex items-center space-x-2"> | |
| <input type="range" min="1" max="120" value="30" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm font-medium w-16 text-center">30 sec</span> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">Unlimited length supported</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Motion Intensity</label> | |
| <div class="flex items-center space-x-2"> | |
| <input type="range" min="1" max="10" value="5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm font-medium w-16 text-center">Medium</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Face Consistency</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-sm"> | |
| <option>Ultra High (Recommended)</option> | |
| <option>High</option> | |
| <option>Medium</option> | |
| </select> | |
| <p class="text-xs text-gray-400 mt-1">Prevents face distortion and blur</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Output Resolution</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-sm"> | |
| <option>4K Ultra HD</option> | |
| <option selected>1080p Full HD</option> | |
| <option>720p HD</option> | |
| <option>480p SD</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition-all transform hover:scale-105 flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Generate Video | |
| </button> | |
| </div> | |
| <!-- Middle Column - Preview --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-play-circle mr-2 text-purple-400"></i> Video Preview | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="preview-container rounded-lg overflow-hidden relative flex items-center justify-center"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-image text-5xl text-gray-600"></i> | |
| <p class="ml-4 text-gray-500">Upload an image to see preview</p> | |
| </div> | |
| <div id="preview-video" class="hidden w-full h-full"></div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-sm font-medium">Generation Progress</span> | |
| <span class="text-sm font-medium">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="progress-bar h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-microchip mr-2 text-purple-400"></i> Available Models | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Model Cards --> | |
| <div class="model-card bg-gray-700 p-4 rounded-lg border border-gray-600 transition cursor-pointer hover:border-purple-500"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-900 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-robot text-purple-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">AnimateDiff NSFW</h3> | |
| <p class="text-sm text-gray-400">Best for natural movements</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded mr-2">Face Stable</span> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded">Unlimited Length</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-card bg-gray-700 p-4 rounded-lg border border-gray-600 transition cursor-pointer hover:border-pink-500"> | |
| <div class="flex items-start"> | |
| <div class="bg-pink-900 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-fire text-pink-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">DeepMotion X</h3> | |
| <p class="text-sm text-gray-400">High intensity movements</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded mr-2">Face Stable</span> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded">Unlimited Length</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-card bg-gray-700 p-4 rounded-lg border border-gray-600 transition cursor-pointer hover:border-yellow-500"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-900 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-bolt text-yellow-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">RealMotion Pro</h3> | |
| <p class="text-sm text-gray-400">Cinematic quality output</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded mr-2">Face Stable</span> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded">Unlimited Length</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-card bg-gray-700 p-4 rounded-lg border border-gray-600 transition cursor-pointer hover:border-red-500"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-900 p-2 rounded-lg mr-3"> | |
| <i class="fas fa-heart text-red-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">EroMotion V2</h3> | |
| <p class="text-sm text-gray-400">Specialized for NSFW content</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded mr-2">Face Stable</span> | |
| <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded">Unlimited Length</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-info-circle mr-2 text-purple-400"></i> About Our Technology | |
| </h2> | |
| <div class="space-y-3 text-gray-300"> | |
| <p>Our advanced NSFW video generation platform uses state-of-the-art AI models to transform your images into high-quality videos with:</p> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li><span class="font-medium">Unlimited video length</span> - No arbitrary time restrictions</li> | |
| <li><span class="font-medium">Perfect face consistency</span> - No blurring or distortion</li> | |
| <li><span class="font-medium">Multiple model support</span> - Choose the best style for your content</li> | |
| <li><span class="font-medium">No API keys needed</span> - Instant access to all features</li> | |
| <li><span class="font-medium">4K resolution support</span> - Crystal clear output</li> | |
| </ul> | |
| <p class="pt-2 text-sm text-gray-400">All processing happens securely in our cloud infrastructure with no limits on creativity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="bg-gray-800 py-6 mt-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-4 mb-4 md:mb-0"> | |
| <i class="fas fa-film text-2xl text-pink-500"></i> | |
| <span class="font-bold">NSFW VideoGen</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-purple-400 transition">Terms</a> | |
| <a href="#" class="hover:text-purple-400 transition">Privacy</a> | |
| <a href="#" class="hover:text-purple-400 transition">Contact</a> | |
| <a href="#" class="hover:text-purple-400 transition">API</a> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <p class="text-sm text-gray-400">© 2023 NSFW VideoGen. All rights reserved.</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-xs text-gray-500"> | |
| <p>This service is intended for adults only. By using this service you confirm you are 18+ years old.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simulate image upload | |
| document.querySelector('.border-dashed').addEventListener('click', function() { | |
| document.getElementById('image-upload').click(); | |
| }); | |
| document.getElementById('image-upload').addEventListener('change', function(e) { | |
| if (e.target.files.length > 0) { | |
| const file = e.target.files[0]; | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| const previewContainer = document.querySelector('.preview-container'); | |
| previewContainer.innerHTML = ` | |
| <img src="${event.target.result}" class="w-full h-full object-contain" alt="Uploaded preview"> | |
| <div class="absolute bottom-4 left-4 bg-black bg-opacity-70 text-white px-3 py-1 rounded-lg text-sm"> | |
| Ready for video generation | |
| </div> | |
| `; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| // Simulate generation process | |
| document.getElementById('generate-btn').addEventListener('click', function() { | |
| const btn = this; | |
| const progressBar = document.querySelector('.progress-bar'); | |
| const progressText = document.querySelector('.progress-bar + .flex span:last-child'); | |
| // Disable button during generation | |
| btn.disabled = true; | |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...'; | |
| // Simulate progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if (progress > 100) progress = 100; | |
| progressBar.style.width = `${progress}%`; | |
| progressText.textContent = `${Math.round(progress)}%`; | |
| if (progress >= 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| // Show completion | |
| btn.disabled = false; | |
| btn.innerHTML = '<i class="fas fa-check mr-2"></i> Generation Complete!'; | |
| // Simulate showing a video (in a real app this would be the actual video) | |
| const previewContainer = document.querySelector('.preview-container'); | |
| previewContainer.innerHTML = ` | |
| <div class="relative w-full h-full"> | |
| <video controls autoplay loop class="w-full h-full"> | |
| <source src="#" type="video/mp4"> | |
| </video> | |
| <div class="absolute bottom-4 left-4 bg-black bg-opacity-70 text-white px-3 py-1 rounded-lg text-sm"> | |
| Your generated video (simulated) | |
| </div> | |
| </div> | |
| `; | |
| // Reset button after 5 seconds | |
| setTimeout(() => { | |
| btn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Video'; | |
| }, 5000); | |
| }, 500); | |
| } | |
| }, 300); | |
| }); | |
| // Model selection | |
| document.querySelectorAll('.model-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| // Remove all active classes first | |
| document.querySelectorAll('.model-card').forEach(c => { | |
| c.classList.remove('border-purple-500', 'border-pink-500', 'border-yellow-500', 'border-red-500'); | |
| c.classList.add('border-gray-600'); | |
| }); | |
| // Add active class to clicked card | |
| const colors = { | |
| 'hover:border-purple-500': 'border-purple-500', | |
| 'hover:border-pink-500': 'border-pink-500', | |
| 'hover:border-yellow-500': 'border-yellow-500', | |
| 'hover:border-red-500': 'border-red-500' | |
| }; | |
| for (const [hoverClass, activeClass] of Object.entries(colors)) { | |
| if (this.classList.contains(hoverClass)) { | |
| this.classList.remove('border-gray-600'); | |
| this.classList.add(activeClass); | |
| break; | |
| } | |
| } | |
| }); | |
| }); | |
| </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=SungSolo/sungsolo-img2vid" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |