Update static/js/chat.js

static/js/chat.js

@@ -5,6 +5,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const tellStoryButton = document.getElementById('tell-story-button');
     const storyThemeInput = document.getElementById('story-theme');
     const storyOutput = document.getElementById('story-output');
+    const storyAudio = document.getElementById('story-audio');
+    const tellRiddleButton = document.getElementById('tell-riddle-button');
+    const riddleOutput = document.getElementById('riddle-output');
     const comicStrip = document.getElementById('comic-strip');
 
     // Clear chat messages on page load (do not load history from Firebase)
@@ -63,6 +66,21 @@ document.addEventListener('DOMContentLoaded', () => {
             const storyData = await storyResponse.json();
             storyOutput.innerHTML = `<p><strong>Krishna’s Story:</strong> ${storyData.story}</p>`;
 
+            // Generate audio narration for the story
+            const audioResponse = await fetch('/story_audio', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ story_text: storyData.story })
+            });
+            const audioData = await audioResponse.json();
+            if (audioData.audio_url) {
+                storyAudio.src = audioData.audio_url;
+                storyAudio.style.display = 'block';
+                storyAudio.play().catch(error => console.error('Error playing audio:', error));
+            }
+
             // Generate the comic strip
             const comicResponse = await fetch('/comic');
             const comicData = await comicResponse.json();
@@ -73,9 +91,22 @@ document.addEventListener('DOMContentLoaded', () => {
                 comicStrip.appendChild(img);
             });
         } catch (error) {
-            console.error('Error generating story or comic strip:', error);
+            console.error('Error generating story, audio, or comic strip:', error);
             storyOutput.innerHTML = '<p>Error generating story—try again!</p>';
+            storyAudio.style.display = 'none';
             comicStrip.innerHTML = '<p>Error generating comic strip—try again!</p>';
         }
     });
+
+    // Handle "Tell me a riddle!" button click
+    tellRiddleButton.addEventListener('click', async () => {
+        try {
+            const riddleResponse = await fetch('/riddle');
+            const riddleData = await riddleResponse.json();
+            riddleOutput.innerHTML = `<p><strong>Krishna’s Riddle:</strong> ${riddleData.riddle}</p>`;
+        } catch (error) {
+            console.error('Error generating riddle:', error);
+            riddleOutput.innerHTML = '<p>Error generating riddle—try again!</p>';
+        }
+    });
 });