Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lora Models - 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-5xl font-bold mb-4">Lora Model Selection</h1> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8"> | |
| Choose from our curated collection of Lora models to transform your images into stunning videos. | |
| Each model is optimized for specific use cases and creative styles. | |
| </p> | |
| </section> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Featured Models</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Model 1 --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <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> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-green-900 text-green-300 text-xs px-2 py-1 rounded">Action</span> | |
| <span class="bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded">Professional</span> | |
| </div> | |
| <a href="/models/cinematic-motion" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- Model 2 --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <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> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-purple-900 text-purple-300 text-xs px-2 py-1 rounded">Creative</span> | |
| <span class="bg-pink-900 text-pink-300 text-xs px-2 py-1 rounded">Artistic</span> | |
| </div> | |
| <a href="/models/artistic-filter" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- Model 3 --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <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> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-yellow-900 text-yellow-300 text-xs px-2 py-1 rounded">Smooth</span> | |
| <span class="bg-teal-900 text-teal-300 text-xs px-2 py-1 rounded">Fluid</span> | |
| </div> | |
| <a href="/models/smooth-transitions" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- Model 4 --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="star" class="text-yellow-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Hugging Face Wan2.2</h3> | |
| <p class="text-gray-300 mb-4">Advanced model from Hugging Face repository for high-quality generation</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-red-900 text-red-300 text-xs px-2 py-1 rounded">Advanced</span> | |
| <span class="bg-indigo-900 text-indigo-300 text-xs px-2 py-1 rounded">High-Quality</span> | |
| </div> | |
| <a href="/models/huggingface-wan22" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- Model 5 --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="image" class="text-blue-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Image Enhancer</h3> | |
| <p class="text-gray-300 mb-4">Enhance image quality before video generation for crisp results</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-cyan-900 text-cyan-300 text-xs px-2 py-1 rounded">Quality</span> | |
| <span class="bg-emerald-900 text-emerald-300 text-xs px-2 py-1 rounded">Enhancement</span> | |
| </div> | |
| <a href="/models/image-enhancer" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- Model 6 --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="layers" class="text-purple-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Stable Video</h3> | |
| <p class="text-gray-300 mb-4">Ensure smooth and stable video output with advanced stabilization</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-amber-900 text-amber-300 text-xs px-2 py-1 rounded">Stable</span> | |
| <span class="bg-rose-900 text-rose-300 text-xs px-2 py-1 rounded">Professional</span> | |
| </div> | |
| <a href="/models/stable-video" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- WAN2.1 Cinematic --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="film" 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 and motion</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded">Cinematic</span> | |
| <span class="bg-indigo-900 text-indigo-300 text-xs px-2 py-1 rounded">Professional</span> | |
| </div> | |
| <a href="/models/wan21-cinematic" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- WAN2.1 Anime --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <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> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-pink-900 text-pink-300 text-xs px-2 py-1 rounded">Anime</span> | |
| <span class="bg-rose-900 text-rose-300 text-xs px-2 py-1 rounded">Japanese</span> | |
| </div> | |
| <a href="/models/wan21-anime" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- WAN2.1 Pixel Art --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <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> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-green-900 text-green-300 text-xs px-2 py-1 rounded">Retro</span> | |
| <span class="bg-emerald-900 text-emerald-300 text-xs px-2 py-1 rounded">Gaming</span> | |
| </div> | |
| <a href="/models/wan21-pixel-art" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- WAN2.1 Disney --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="star" class="text-yellow-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">WAN2.1 Disney</h3> | |
| <p class="text-gray-300 mb-4">Magical Disney-style animations with expressive characters</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-yellow-900 text-yellow-300 text-xs px-2 py-1 rounded">Magical</span> | |
| <span class="bg-amber-900 text-amber-300 text-xs px-2 py-1 rounded">Family</span> | |
| </div> | |
| <a href="/models/wan21-disney" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </div> | |
| <!-- WAN2.1 GTA --> | |
| <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-300 transform hover:-translate-y-1"> | |
| <div class="bg-gray-700 h-48 rounded-lg mb-4 flex items-center justify-center"> | |
| <i data-feather="truck" class="text-red-500 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">WAN2.1 GTA</h3> | |
| <p class="text-gray-300 mb-4">Gritty urban animations with GTA-inspired aesthetics</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-red-900 text-red-300 text-xs px-2 py-1 rounded">Urban</span> | |
| <span class="bg-orange-900 text-orange-300 text-xs px-2 py-1 rounded">Edgy</span> | |
| </div> | |
| <a href="/models/wan21-gta" class="text-green-400 hover:text-green-300 font-medium flex items-center"> | |
| Select Model <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> | |
| </a> | |
| </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">Need Help Choosing?</h2> | |
| <p class="text-gray-200 mb-6"> | |
| Explore our documentation to understand how each model works and which one suits your project best. | |
| </p> | |
| <a href="/documentation" 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="book" class="mr-2"></i> | |
| View Documentation | |
| </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> | |
| </body> | |
| </html> |