Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>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="text-center mb-16"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">Transform Images into Stunning Videos</h1> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">Leverage powerful Lora models to create dynamic visual stories from your still images</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="/models" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">Get Started</a> | |
| <a href="#features" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300">Explore Features</a> | |
| </div> | |
| </section> | |
| <section id="models" class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Featured Lora Models</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="film" class="text-green-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Cinematic Motion</h3> | |
| <p class="text-gray-300 mb-4">Create dramatic cinematic transitions with dynamic camera movements</p> | |
| <a href="/models/cinematic-motion" class="text-green-400 hover:text-green-300 font-medium">Select Model →</a> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="aperture" class="text-orange-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Artistic Filter</h3> | |
| <p class="text-gray-300 mb-4">Apply painterly effects and artistic styles to your videos</p> | |
| <a href="/models/artistic-filter" class="text-green-400 hover:text-green-300 font-medium">Select Model →</a> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="zap" class="text-green-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Smooth Transitions</h3> | |
| <p class="text-gray-300 mb-4">Generate seamless morphing effects between images</p> | |
| <a href="/models/smooth-transitions" class="text-green-400 hover:text-green-300 font-medium">Select Model →</a> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="star" class="text-blue-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">WAN2.1 Cinematic</h3> | |
| <p class="text-gray-300 mb-4">Professional cinematic effects with dramatic lighting</p> | |
| <a href="/models/wan21-cinematic" class="text-green-400 hover:text-green-300 font-medium">Select Model →</a> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="heart" class="text-pink-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">WAN2.1 Anime</h3> | |
| <p class="text-gray-300 mb-4">Authentic anime-style animations with vibrant colors</p> | |
| <a href="/models/wan21-anime" class="text-green-400 hover:text-green-300 font-medium">Select Model →</a> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="grid" class="text-green-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">WAN2.1 Pixel Art</h3> | |
| <p class="text-gray-300 mb-4">Retro 8-bit and 16-bit style animations</p> | |
| <a href="/models/wan21-pixel-art" class="text-green-400 hover:text-green-300 font-medium">Select Model →</a> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="/models" class="text-green-400 hover:text-green-300 font-medium inline-flex items-center"> | |
| View All Models <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <section id="features" class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Powerful Features</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <i data-feather="sliders" class="text-green-500 mr-2"></i> | |
| <h3 class="text-xl font-bold">Customizable Parameters</h3> | |
| </div> | |
| <p class="text-gray-300">Adjust frame rate, resolution, duration, and visual effects with intuitive controls</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <i data-feather="layers" class="text-orange-500 mr-2"></i> | |
| <h3 class="text-xl font-bold">Multi-Image Support</h3> | |
| </div> | |
| <p class="text-gray-300">Upload multiple images to create rich, dynamic video sequences</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <i data-feather="cpu" class="text-green-500 mr-2"></i> | |
| <h3 class="text-xl font-bold">Optimized Processing</h3> | |
| </div> | |
| <p class="text-gray-300">Leverage GPU acceleration for faster video generation</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-8"> | |
| <h3 class="text-xl font-bold mb-4">Preview Customization</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Video Duration: <span id="duration-value">5</span>s</label> | |
| <input type="range" min="1" max="30" value="5" class="w-full accent-green-500" id="duration-slider"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Frame Rate: <span id="fps-value">24</span>fps</label> | |
| <input type="range" min="12" max="60" value="24" class="w-full accent-orange-500" id="fps-slider"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Transition Style</label> | |
| <select class="w-full bg-gray-700 text-white rounded p-2" id="transition-style"> | |
| <option value="dissolve">Dissolve</option> | |
| <option value="slide">Slide</option> | |
| <option value="zoom">Zoom</option> | |
| <option value="rotate">Rotate</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="bg-gradient-to-r from-green-900 to-orange-900 rounded-2xl p-8 mb-16"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Ready to Create Your Masterpiece?</h2> | |
| <p class="text-gray-200 mb-6">Join thousands of creators transforming their images into captivating videos</p> | |
| <a href="/upload" class="bg-white text-gray-900 hover:bg-gray-200 font-bold py-3 px-8 rounded-full inline-flex items-center transition duration-300"> | |
| <i data-feather="upload" class="mr-2"></i> | |
| Upload Images | |
| </a> | |
| </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(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |