Update app.py

app.py

@@ -27,9 +27,9 @@ st.set_page_config(page_title="HAL - NASA ChatBot", page_icon="🚀")
 
 # ✅ Initialize Session State Variables (Ensuring Chat History Persists)
 if "chat_history" not in st.session_state:
-    st.session_state.chat_history = [{"role": "assistant", "content": "Hello! How can I assist you today?"}]
-if "listening" not in st.session_state:
-    st.session_state.listening = False
+    st.session_state.chat_history = [{"role": "assistant", "content": "Hello! I'm HAL, your NASA AI Assistant. You can speak to me directly or type your questions. How can I help you today?"}]
+if "auto_speak" not in st.session_state:
+    st.session_state.auto_speak = True
 
 # ✅ Initialize Hugging Face Model (Explicitly Set to CPU/GPU)
 def get_llm_hf_inference(model_id="meta-llama/Llama-2-7b-chat-hf", max_new_tokens=800, temperature=0.3):
@@ -105,19 +105,6 @@ st.markdown("""
     .user-msg { background-color: #696969; color: white; }
     .assistant-msg { background-color: #333333; color: white; }
     .container { display: flex; flex-direction: column; align-items: flex-start; }
-    .speech-button {
-        background-color: #4CAF50;
-        border: none;
-        color: white;
-        padding: 10px 15px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 16px;
-        margin: 4px 2px;
-        cursor: pointer;
-        border-radius: 12px;
-    }
     .speak-button {
         background-color: #2196F3;
         border: none;
@@ -131,50 +118,127 @@ st.markdown("""
         cursor: pointer;
         border-radius: 12px;
     }
+    .voice-indicator {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin-left: 8px;
+        vertical-align: middle;
+        background-color: #ccc;
+    }
+    .voice-indicator.active {
+        background-color: #4CAF50;
+        animation: pulse 1.5s infinite;
+    }
+    .status-bar {
+        padding: 6px 12px;
+        border-radius: 5px;
+        background-color: #f1f1f1;
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        font-size: 14px;
+    }
+    @keyframes pulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.5; }
+        100% { opacity: 1; }
+    }
     @media (max-width: 600px) { .user-msg, .assistant-msg { font-size: 16px; max-width: 100%; } }
     </style>
     
     <script>
-    // Speech Recognition Setup
+    // Speech Recognition Setup with continuous mode
     let recognition;
     let isListening = false;
+    let silenceTimer;
+    let lastSpeechTime = Date.now();
+    let lastTranscript = '';
+    const SILENCE_THRESHOLD = 3000; // Submit after 3 seconds of silence
     
     function setupSpeechRecognition() {
         try {
             window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
             recognition = new SpeechRecognition();
             recognition.lang = 'en-US';
-            recognition.interimResults = false;
-            recognition.maxAlternatives = 1;
+            recognition.interimResults = true;
+            recognition.continuous = true;
+            
+            recognition.onstart = function() {
+                isListening = true;
+                document.getElementById('voice-indicator').classList.add('active');
+                document.getElementById('voice-status').textContent = 'Listening...';
+            };
             
             recognition.onresult = function(event) {
-                const speechResult = event.results[0][0].transcript;
-                document.getElementById('speech-result').value = speechResult;
-                document.getElementById('submit-speech').click();
+                lastSpeechTime = Date.now();
+                clearTimeout(silenceTimer);
+                
+                // Get the latest transcript
+                let interimTranscript = '';
+                let finalTranscript = '';
+                
+                for (let i = event.resultIndex; i < event.results.length; i++) {
+                    const transcript = event.results[i][0].transcript;
+                    if (event.results[i].isFinal) {
+                        finalTranscript += transcript + ' ';
+                    } else {
+                        interimTranscript += transcript;
+                    }
+                }
+                
+                // Update the hidden input with the latest transcript
+                const speechResult = (finalTranscript || interimTranscript).trim();
+                if (speechResult && speechResult !== lastTranscript) {
+                    document.getElementById('speech-result').value = speechResult;
+                    document.getElementById('voice-status').textContent = 'I heard: ' + speechResult;
+                    lastTranscript = speechResult;
+                    
+                    // Set a timer to submit after silence
+                    silenceTimer = setTimeout(() => {
+                        if (speechResult) {
+                            document.getElementById('submit-speech').click();
+                            lastTranscript = '';
+                            document.getElementById('speech-result').value = '';
+                        }
+                    }, SILENCE_THRESHOLD);
+                }
             };
             
             recognition.onerror = function(event) {
                 console.error('Speech recognition error:', event.error);
-                isListening = false;
-                updateMicButton();
+                if (event.error === 'no-speech') {
+                    // Just restart listening if there was no speech detected
+                    restartRecognition();
+                } else {
+                    isListening = false;
+                    document.getElementById('voice-indicator').classList.remove('active');
+                    document.getElementById('voice-status').textContent = 'Voice recognition paused. Click to restart.';
+                }
             };
             
             recognition.onend = function() {
-                isListening = false;
-                updateMicButton();
+                // Auto restart if it ends unintentionally
+                if (isListening) {
+                    restartRecognition();
+                } else {
+                    document.getElementById('voice-indicator').classList.remove('active');
+                    document.getElementById('voice-status').textContent = 'Voice recognition disabled.';
+                }
             };
             
             return true;
         } catch (error) {
             console.error('Speech recognition not supported:', error);
+            document.getElementById('voice-status').textContent = 'Voice recognition not supported in this browser.';
             return false;
         }
     }
     
-    function toggleSpeechRecognition() {
+    function toggleVoiceRecognition() {
         if (!recognition) {
             if (!setupSpeechRecognition()) {
-                alert('Speech recognition is not supported in your browser.');
                 return;
             }
         }
@@ -182,22 +246,31 @@ st.markdown("""
         if (isListening) {
             recognition.stop();
             isListening = false;
+            document.getElementById('voice-indicator').classList.remove('active');
+            document.getElementById('voice-status').textContent = 'Voice recognition paused. Click to restart.';
         } else {
-            recognition.start();
-            isListening = true;
+            startRecognition();
         }
-        
-        updateMicButton();
     }
     
-    function updateMicButton() {
-        const micButton = document.getElementById('mic-button');
-        if (micButton) {
-            micButton.textContent = isListening ? '🛑 Stop Listening' : '🎤 Start Voice Input';
-            micButton.style.backgroundColor = isListening ? '#f44336' : '#4CAF50';
+    function startRecognition() {
+        try {
+            recognition.start();
+            document.getElementById('voice-status').textContent = 'Listening...';
+        } catch (e) {
+            console.error('Error starting recognition:', e);
+            setTimeout(startRecognition, 200);
         }
     }
     
+    function restartRecognition() {
+        try {
+            recognition.stop();
+        } catch (e) {}
+        
+        setTimeout(startRecognition, 200);
+    }
+    
     // Text-to-Speech functionality
     function speakText(text) {
         const utterance = new SpeechSynthesisUtterance(text);
@@ -207,88 +280,71 @@ st.markdown("""
         window.speechSynthesis.speak(utterance);
     }
     
+    // Auto speak the latest response
+    function autoSpeakLatest() {
+        const messages = document.querySelectorAll('.assistant-msg');
+        if (messages.length > 0) {
+            const latestMessage = messages[messages.length - 1];
+            const messageId = latestMessage.querySelector('span[id^="msg-"]').id;
+            speakText(document.getElementById(messageId).textContent);
+        }
+    }
+    
     // Initialize after the page loads
     document.addEventListener('DOMContentLoaded', function() {
         setupSpeechRecognition();
+        // Start listening automatically
+        setTimeout(startRecognition, 1000);
     });
-    </script>
-""", unsafe_allow_html=True)
-
-# Add voice control components
-col1, col2 = st.columns([4, 1])
-with col1:
-    user_input = st.chat_input("Type your message here...")
-
-with col2:
-    st.markdown("""
-        <button id="mic-button" onclick="toggleSpeechRecognition()" class="speech-button">
-            🎤 Start Voice Input
-        </button>
-        <input type="hidden" id="speech-result">
-        <button id="submit-speech" style="display:none;"></button>
-    """, unsafe_allow_html=True)
-
-# Handle form for speech input (hidden)
-speech_result = st.text_input("Speech Result", key="speech_input", label_visibility="collapsed")
-if speech_result:
-    user_input = speech_result
-    # Reset the speech input
-    st.session_state.speech_input = ""
-
-if user_input:
-    # Get response and update chat history
-    response, st.session_state.chat_history = get_response(
-        system_message="You are a helpful AI assistant specializing in NASA and space information.",
-        user_text=user_input,
-        chat_history=st.session_state.chat_history
-    )
-
-# ✅ Display chat history with speak buttons
-st.markdown("<div class='container'>", unsafe_allow_html=True)
-for i, message in enumerate(st.session_state.chat_history):
-    if message["role"] == "user":
-        st.markdown(f"<div class='user-msg'><strong>You:</strong> {message['content']}</div>", unsafe_allow_html=True)
-    else:
-        # Fix: Use JavaScript data attribute instead of trying to escape in f-string
-        content_for_id = f"msg-{i}"
-        st.markdown(
-            f"""<div class='assistant-msg'>
-                <strong>HAL:</strong> {message['content']}
-                <button onclick="speakText(document.getElementById('{content_for_id}').textContent)" class="speak-button">
-                    🔊 Speak
-                </button>
-                <span id="{content_for_id}" style="display:none">{message['content']}</span>
-            </div>""", 
-            unsafe_allow_html=True
-        )
-st.markdown("</div>", unsafe_allow_html=True)
-
-# Add JavaScript event listener for the submit button
-components_js = """
-<script>
-document.getElementById('submit-speech').addEventListener('click', function() {
-    const speechResult = document.getElementById('speech-result').value;
-    if (speechResult) {
-        // Update the Streamlit text input with the speech result
-        const textInputs = document.querySelectorAll('input[type="text"]');
-        if (textInputs.length > 0) {
-            const lastInput = textInputs[0];
-            lastInput.value = speechResult;
-            lastInput.dispatchEvent(new Event('input', { bubbles: true }));
-            
-            // Find and click the submit button
-            setTimeout(() => {
-                const buttons = document.querySelectorAll('button[kind="primaryForm"]');
-                for (const button of buttons) {
-                    if (button.textContent.includes('Submit')) {
-                        button.click();
-                        break;
+    
+    // Handle speech input submission
+    document.getElementById('submit-speech').addEventListener('click', function() {
+        const speechResult = document.getElementById('speech-result').value;
+        if (speechResult) {
+            // Update the Streamlit text input with the speech result
+            const textInputs = document.querySelectorAll('input[type="text"]');
+            if (textInputs.length > 0) {
+                const lastInput = textInputs[0];
+                lastInput.value = speechResult;
+                lastInput.dispatchEvent(new Event('input', { bubbles: true }));
+                
+                // Find and click the submit button
+                setTimeout(() => {
+                    const buttons = document.querySelectorAll('button[kind="primaryForm"]');
+                    for (const button of buttons) {
+                        if (button.textContent.includes('Submit')) {
+                            button.click();
+                            break;
+                        }
                     }
+                }, 100);
+            }
+        }
+    });
+    
+    // Auto-speak for newest message if enabled
+    function checkForNewMessages() {
+        const autoSpeakEnabled = document.querySelector('input[type="checkbox"][aria-label="Auto-speak responses"]').checked;
+        if (autoSpeakEnabled) {
+            const messages = document.querySelectorAll('.assistant-msg');
+            if (messages.length > 0) {
+                const latestMessage = messages[messages.length - 1];
+                const messageId = latestMessage.querySelector('span[id^="msg-"]').id;
+                
+                // Only speak if this is a new message
+                if (!latestMessage.hasAttribute('data-spoken')) {
+                    speakText(document.getElementById(messageId).textContent);
+                    latestMessage.setAttribute('data-spoken', 'true');
                 }
-            }, 100);
+            }
         }
     }
-});
-</script>
-"""
-st.components.v1.html(components_js, height=0)
+    
+    // Check for new messages every second
+    setInterval(checkForNewMessages, 1000);
+    </script>
+""", unsafe_allow_html=True)
+
+# Add voice status indicator
+st.markdown("""
+    <div class="status