Spaces:
Running
Running
To successfully establish a robust image-to-video generation pipeline using the Lora models available at [Hugging Face's Wan2.2 Loras repository](https://huggingface.co/Playtime-AI/Wan2.2-Loras), we will need to create a user-friendly system that simplifies the process of loading models and generating videos from uploaded images.
12a4e8b
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Upload Images - FrameForge Studio</title> | |
| <link rel="stylesheet" href="/style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <custom-header></custom-header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <section class="mb-12"> | |
| <h1 class="text-4xl font-bold mb-4 text-center">Upload Your Images</h1> | |
| <p class="text-gray-300 text-center max-w-2xl mx-auto mb-8">Start creating stunning videos by uploading your images. Our AI will transform them into dynamic visual stories.</p> | |
| <div class="max-w-2xl mx-auto"> | |
| <div class="bg-gray-800 rounded-xl p-8 mb-8"> | |
| <div id="drop-area" class="border-2 border-dashed border-gray-600 rounded-lg p-12 text-center cursor-pointer hover:border-green-500 transition duration-300"> | |
| <i data-feather="upload" class="w-16 h-16 text-gray-500 mx-auto mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Drag & Drop Your Images</h2> | |
| <p class="text-gray-400 mb-4">or</p> | |
| <button id="browse-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300"> | |
| Browse Files | |
| </button> | |
| <input type="file" id="file-input" multiple accept="image/*" class="hidden"> | |
| <p class="text-gray-400 mt-4">Supports JPG, PNG, WEBP (Max 10MB each)</p> | |
| </div> | |
| </div> | |
| <div id="preview-container" class="hidden"> | |
| <h2 class="text-2xl font-bold mb-4">Image Preview</h2> | |
| <div id="image-preview" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"></div> | |
| <button id="process-btn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 w-full"> | |
| Process Images | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-gradient-to-r from-green-900 to-orange-900 rounded-2xl p-8"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-4 text-center">How It Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Upload</h3> | |
| <p class="text-gray-200">Select your images or drag and drop them to our secure platform</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Customize</h3> | |
| <p class="text-gray-200">Choose your preferred Lora model and adjust settings</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-800 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Generate</h3> | |
| <p class="text-gray-200">Our AI creates your video masterpiece in minutes</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="/components/header.js"></script> | |
| <script src="/components/footer.js"></script> | |
| <script src="/script.js"></script> | |
| <script> | |
| feather.replace(); | |
| const dropArea = document.getElementById('drop-area'); | |
| const fileInput = document.getElementById('file-input'); | |
| const browseBtn = document.getElementById('browse-btn'); | |
| const previewContainer = document.getElementById('preview-container'); | |
| const imagePreview = document.getElementById('image-preview'); | |
| const processBtn = document.getElementById('process-btn'); | |
| // Event listeners | |
| browseBtn.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', handleFiles); | |
| // Drag and drop events | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropArea.classList.add('border-green-500', 'bg-gray-700'); | |
| } | |
| function unhighlight() { | |
| dropArea.classList.remove('border-green-500', 'bg-gray-700'); | |
| } | |
| dropArea.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles({ target: { files } }); | |
| } | |
| function handleFiles(e) { | |
| const files = e.target.files; | |
| if (files.length > 0) { | |
| previewContainer.classList.remove('hidden'); | |
| imagePreview.innerHTML = ''; | |
| Array.from(files).forEach(file => { | |
| if (!file.type.match('image.*')) return; | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const img = document.createElement('img'); | |
| img.src = e.target.result; | |
| img.classList.add('w-full', 'h-32', 'object-cover', 'rounded'); | |
| imagePreview.appendChild(img); | |
| } | |
| reader.readAsDataURL(file); | |
| }); | |
| } | |
| } | |
| processBtn.addEventListener('click', function() { | |
| this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Processing...'; | |
| feather.replace(); | |
| // Simulate processing time | |
| setTimeout(() => { | |
| this.innerHTML = 'Process Images'; | |
| feather.replace(); | |
| alert('Images processed successfully! Redirecting to model selection...'); | |
| window.location.href = '/models/cinematic-motion'; | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |