Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Storybook Animator</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>π°β¨ AI Storybook Animator β¨π°</h1> | |
| <p>Write a story and watch a powerful AI bring it to life!</p> | |
| <div class="input-area"> | |
| <textarea id="story-input" placeholder="A majestic dragon flying through a snowy mountain range..."></textarea> | |
| <button id="animate-btn">β¨ Create Animation</button> | |
| </div> | |
| <div id="loader" class="loader" style="display: none;"></div> | |
| <div class="output-area"> | |
| <div class="video-container"> | |
| <h2>π¬ Your Story Comes Alive</h2> | |
| <video id="output-video" controls muted autoplay></video> | |
| </div> | |
| <div class="explanation-container"> | |
| <h2>π‘ Explanation & Behind the Scenes</h2> | |
| <h3>The Story Explanation</h3> | |
| <p id="story-explanation-text">...</p> | |
| <audio id="explainer-audio" controls></audio> | |
| <hr> | |
| <h3>How the Code Works</h3> | |
| <p id="code-explanation-text">...</p> | |
| <h4>Generated AI Prompt:</h4> | |
| <pre><code id="prompt-output">...</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |