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>Sign In - 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="max-w-md mx-auto"> | |
| <h1 class="text-4xl font-bold mb-8 text-center">Sign In to Your Account</h1> | |
| <div class="bg-gray-800 rounded-xl p-8"> | |
| <form id="signin-form"> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-300 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full bg-gray-700 text-white rounded p-3 focus:outline-none focus:ring-2 focus:ring-green-500" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="password" class="block text-gray-300 mb-2">Password</label> | |
| <input type="password" id="password" class="w-full bg-gray-700 text-white rounded p-3 focus:outline-none focus:ring-2 focus:ring-green-500" required> | |
| </div> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="remember" class="mr-2"> | |
| <label for="remember" class="text-gray-300">Remember me</label> | |
| </div> | |
| <a href="/forgot-password" class="text-green-400 hover:text-green-300">Forgot password?</a> | |
| </div> | |
| <button type="submit" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 w-full mb-6"> | |
| Sign In | |
| </button> | |
| <div class="text-center"> | |
| <p class="text-gray-400">Don't have an account? <a href="/signup" class="text-green-400 hover:text-green-300">Sign up</a></p> | |
| </div> | |
| </form> | |
| </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(); | |
| document.getElementById('signin-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // In a real application, you would handle sign in here | |
| alert('Sign in successful!'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |