Create static/script.js

static/script.js

@@ -0,0 +1,59 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const storyInput = document.getElementById('story-input');
+    const animateBtn = document.getElementById('animate-btn');
+    const loader = document.getElementById('loader');
+
+    // Output elements
+    const outputVideo = document.getElementById('output-video');
+    const storyExplanationText = document.getElementById('story-explanation-text');
+    const explainerAudio = document.getElementById('explainer-audio');
+    const codeExplanationText = document.getElementById('code-explanation-text');
+    const promptOutput = document.getElementById('prompt-output');
+
+    animateBtn.addEventListener('click', async () => {
+        const story = storyInput.value;
+        if (!story.trim()) {
+            alert('Please write a story first!');
+            return;
+        }
+
+        // Show loader and disable button
+        loader.style.display = 'block';
+        animateBtn.disabled = true;
+        animateBtn.textContent = 'Generating...';
+
+        try {
+            const response = await fetch('/animate', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ story: story }),
+            });
+
+            if (!response.ok) {
+                throw new Error(`Server error: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+
+            // Update the page with the results from the backend
+            outputVideo.src = data.video_url;
+            outputVideo.load(); // Important to load the new source
+
+            storyExplanationText.textContent = data.story_explanation;
+            explainerAudio.src = data.audio_url;
+            codeExplanationText.textContent = data.code_explanation;
+            promptOutput.textContent = data.prompt;
+
+        } catch (error) {
+            console.error('Error:', error);
+            alert('An error occurred while creating the animation. See the console for details.');
+        } finally {
+            // Hide loader and re-enable button
+            loader.style.display = 'none';
+            animateBtn.disabled = false;
+            animateBtn.textContent = '✨ Create Animation';
+        }
+    });
+});