Update static/index.html

static/index.html

@@ -21,18 +21,15 @@
             --link-color: #64b5f6;
             --quote-color: #4CAF50;
         }
-
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
         }
-
         html, body {
             height: 100%;
             overflow: hidden;
         }
-
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             background-color: var(--background-color);
@@ -42,7 +39,6 @@
             height: 100%;
             line-height: 1.6;
         }
-
         .chat-container {
             display: flex;
             flex-direction: column;
@@ -53,7 +49,6 @@
             border-left: 1px solid var(--border-color);
             border-right: 1px solid var(--border-color);
         }
-
         .chat-area {
             flex-grow: 1;
             overflow-y: auto;
@@ -61,29 +56,24 @@
             display: flex;
             flex-direction: column;
         }
-
         .welcome-screen {
             text-align: center;
             margin: auto;
             color: var(--placeholder-color);
             padding: 20px;
         }
-
         .welcome-screen h2 {
             font-size: 1.8rem;
             font-weight: 400;
             margin-bottom: 10px;
         }
-        
         .welcome-screen p {
             font-size: 1rem;
             line-height: 1.5;
         }
-
         .welcome-screen.hidden {
             display: none;
         }
-
         .message {
             max-width: 85%;
             padding: 12px 16px;
@@ -95,20 +85,17 @@
             position: relative;
             animation: fadeIn 0.3s ease-out;
         }
-
         .user-message {
             background-color: var(--user-bubble-color);
             align-self: flex-end;
             border-bottom-right-radius: 4px;
         }
-
         .ai-message {
             background-color: var(--ai-bubble-color);
             align-self: flex-start;
             border-bottom-left-radius: 4px;
             padding-bottom: 30px;
         }
-
         .ai-message-content {
             overflow: hidden;
         }
@@ -148,7 +135,6 @@
             background-color: transparent;
             color: inherit;
         }
-
         .audio-button {
             position: absolute;
             bottom: 6px;
@@ -192,7 +178,6 @@
         .audio-button.loading .loader {
             display: block;
         }
-
         .download-button {
             position: absolute;
             bottom: 6px;
@@ -221,12 +206,10 @@
         .download-button:hover svg {
             fill: #4CAF50;
         }
-
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-
         .typing-indicator {
             display: flex;
             align-items: center;
@@ -238,12 +221,10 @@
         }
         .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
         .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-
         @keyframes bounce {
             0%, 80%, 100% { transform: scale(0); }
             40% { transform: scale(1.0); }
         }
-
         .input-area {
             display: flex;
             align-items: flex-end;
@@ -275,7 +256,6 @@
             outline: none;
         }
         .input-area textarea::placeholder { color: var(--placeholder-color); }
-
         .input-area .icon-button {
             background: none;
             border: none;
@@ -290,7 +270,6 @@
             opacity: 0.8;
         }
         .input-area .icon-button svg { width: 24px; height: 24px; fill: var(--icon-color); }
-        
         .send-button {
             background-color: var(--send-button-color);
             border-radius: 50%;
@@ -306,7 +285,6 @@
             fill: #888;
         }
         .send-button svg { fill: white; width: 24px; height: 24px; }
-
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
@@ -322,7 +300,6 @@
                 <p>For audio responses, try: <em>"Tell me a bedtime story with audio"</em></p>
             </div>
         </main>
-
         <footer class="input-area">
             <form id="chat-form" class="input-wrapper">
                 <textarea id="message-input" placeholder="Ask anything..." rows="1"></textarea>
@@ -340,7 +317,6 @@
             const chatArea = document.querySelector('.chat-area');
             const welcomeScreen = document.querySelector('.welcome-screen');
             const sendButton = document.getElementById('send-button');
-
             let currentAudio = null;
 
             const adjustTextareaHeight = () => {
@@ -354,17 +330,16 @@
                 sendButton.classList.toggle('disabled', isDisabled);
                 sendButton.disabled = isDisabled;
             };
-            
+
             const scrollToBottom = () => {
                 chatArea.scrollTop = chatArea.scrollHeight;
             };
 
             const addMessage = (content, sender, isHTML = false, audioFilename = null) => {
                 welcomeScreen.classList.add('hidden');
-                
                 const messageElement = document.createElement('div');
                 messageElement.classList.add('message', `${sender}-message`);
-                
+
                 const contentDiv = document.createElement('div');
                 if (isHTML) {
                     contentDiv.classList.add(`${sender}-message-content`);
@@ -375,7 +350,7 @@
                 messageElement.appendChild(contentDiv);
 
                 if (sender === 'ai' && audioFilename) {
-                    // Add download button
+                    // Download button
                     const downloadButton = document.createElement('button');
                     downloadButton.classList.add('download-button');
                     downloadButton.title = "Download audio";
@@ -388,8 +363,8 @@
                         window.location.href = `/download/${audioFilename}`;
                     });
                     messageElement.appendChild(downloadButton);
-                    
-                    // Add play button
+
+                    // Play button
                     const playButton = document.createElement('button');
                     playButton.classList.add('audio-button');
                     playButton.dataset.audioUrl = `/static/audio/${audioFilename}`;
@@ -405,16 +380,16 @@
                         playAudio(e.currentTarget, url);
                     });
                     messageElement.appendChild(playButton);
-                    
-                    // Auto-play audio
+
+                    // Auto-play first AI audio
                     setTimeout(() => playButton.click(), 300);
                 }
-                
+
                 chatArea.appendChild(messageElement);
                 scrollToBottom();
                 return messageElement;
             };
-            
+
             const showTypingIndicator = () => {
                 const indicatorElement = document.createElement('div');
                 indicatorElement.classList.add('message', 'ai-message', 'typing-indicator');
@@ -430,29 +405,23 @@
                     currentAudio.currentTime = 0;
                     currentAudio = null;
                 }
-
                 buttonElement.classList.add('loading');
                 buttonElement.disabled = true;
-
                 try {
                     if (!audioUrl) throw new Error("No audio available");
-
                     currentAudio = new Audio(audioUrl);
                     currentAudio.play();
-
                     currentAudio.onended = () => {
                         buttonElement.classList.remove('loading');
                         buttonElement.disabled = false;
                         currentAudio = null;
                     };
-
                     currentAudio.onerror = () => {
                         console.error("Error playing audio");
                         buttonElement.classList.remove('loading');
                         buttonElement.disabled = false;
                         currentAudio = null;
                     };
-                    
                 } catch (error) {
                     console.error("Audio error:", error);
                     alert("Failed to play audio. " + (error.message || "Please try again."));
@@ -463,28 +432,23 @@
 
             const getAIResponse = async (userMessage) => {
                 const indicator = showTypingIndicator();
-                
                 try {
                     const response = await fetch('/chat', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ message: userMessage })
                     });
-                    
                     const data = await response.json();
-                    
                     if (data.error) {
                         throw new Error(data.error);
                     }
-                    
                     chatArea.removeChild(indicator);
                     addMessage(
-                        data.response_html, 
-                        'ai', 
+                        data.response_html,
+                        'ai',
                         true,
                         data.audio_filename
                     );
-                    
                 } catch (error) {
                     chatArea.removeChild(indicator);
                     addMessage("Sorry, I encountered an error. Please try again.", 'ai');
@@ -495,12 +459,10 @@
             chatForm.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 const message = messageInput.value.trim();
-                
                 if (message) {
                     addMessage(message, 'user');
                     messageInput.value = '';
                     adjustTextareaHeight();
-                    
                     await getAIResponse(message);
                 }
             });
@@ -513,7 +475,6 @@
             });
 
             messageInput.addEventListener('input', adjustTextareaHeight);
-            
             updateSendButtonState();
             messageInput.focus();
         });