| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>✨ Motif-Video 2B Generator Portal</title> |
| <link rel="stylesheet" href="style.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet"> |
| </head> |
| <body> |
|
|
| <div class="parallax-bg"></div> |
|
|
| <div id="cursor-trail"></div> |
|
|
| <div class="app-container"> |
|
|
| <header class="title-bar"> |
| <span class="icon">🎬</span> |
| <h1>Motif-Video Creator</h1> |
| <button id="show-guide" class="pastel-btn">Connection Guide</button> |
| </header> |
|
|
| <div class="content-wrapper"> |
|
|
| <nav class="sidebar"> |
| <button class="nav-item active" data-target="t2v-section"><span class="icon">✏️</span> Text ➔ Video</button> |
| <button class="nav-item" data-target="i2v-section"><span class="icon">🖼️</span> Image ➔ Video</button> |
| <button class="nav-item" data-target="about-section"><span class="icon">ℹ️</span> About</button> |
| </nav> |
|
|
| <main class="main-content"> |
|
|
| <section id="t2v-section" class="active-section"> |
| <h2>Text to Video</h2> |
| <textarea id="t2v-prompt" placeholder="Describe your masterpiece... e.g., A futuristic city built from giant pastel crystals..."></textarea> |
| <button class="generate-btn action-btn">Generate</button> |
| </section> |
|
|
| <section id="i2v-section"> |
| <h2>Image to Video</h2> |
| <div class="file-input-wrapper action-btn"> |
| <span>Upload Base Image</span> |
| <input type="file" id="i2v-image" accept="image/*"> |
| </div> |
| <textarea id="i2v-prompt" placeholder="Describe the motion: e.g., 'The waves gently lap the shore'"></textarea> |
| <button class="generate-btn action-btn">Generate</button> |
| </section> |
|
|
| <section id="about-section"> |
| <h2>About the Portal</h2> |
| <p>Welcome! This is an aesthetic frontend interface for the powerful **Motif-Video 2B** model.</p> |
| <p>To keep generation **unlimited and free**, this portal *must connect* to your own powerful backend (GPU).</p> |
| <p>Model by Motif Technologies (released under Apache 2.0).</p> |
| </section> |
|
|
| <div class="preview-panel"> |
| <h3>Preview</h3> |
| <div id="video-output" class="animated-frame"> |
| <span class="placeholder-text">Generated video will appear here.</span> |
| </div> |
| </div> |
|
|
| </main> |
| </div> |
| </div> |
|
|
| <div id="guide-modal" class="modal-overlay"> |
| <div class="modal-content cartoonish-swell"> |
| <header class="modal-header"> |
| <h3>🛠️ Setup & Connection Guide</h3> |
| <button class="close-modal">×</button> |
| </header> |
| <div class="modal-body"> |
| <p>This frontend is free, but **generating video requires an intensive backend (GPU)**.</p> |
| <p>To use this portal unlimited times, you must connect it to a running instance of Motif-Video 2B.</p> |
| <div class="guide-steps"> |
| <div class="step"><span class="step-num">1</span> <p><strong>Run Locally (Free/Unlimited)</strong><br>Own a GPU (RTX 3090/4090)? Install the environment and run the code provided at the model page: <a href="https://huggingface.co/Motif-Technologies/Motif-Video-2B" target="_blank">Motif-Video-2B</a>.</p></div> |
| <div class="step"><span class="step-num">2</span> <p><strong>Enter API Address</strong><br>Paste your running local API address below (e.g., Gradio/FastAPI link).</p></div> |
| <input type="text" id="api-url" placeholder="http://127.0.0.1:7860"> |
| </div> |
| <button id="save-connection" class="save-btn action-btn">Connect & Save</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="script.js"></script> |
| </body> |
| </html> |
