Update app.py

app.py

@@ -28,6 +28,8 @@ 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
 
 # ✅ 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):
@@ -89,7 +91,7 @@ def get_response(system_message, chat_history, user_text, max_new_tokens=800):
 # ✅ Streamlit UI
 st.title("🚀 HAL - NASA AI Assistant")
 
-# ✅ Justify all chatbot responses
+# ✅ Add styles and speech recognition JavaScript
 st.markdown("""
     <style>
     .user-msg, .assistant-msg {
@@ -103,26 +105,187 @@ 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;
+        color: white;
+        padding: 5px 10px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 12px;
+        margin: 2px 2px;
+        cursor: pointer;
+        border-radius: 12px;
+    }
     @media (max-width: 600px) { .user-msg, .assistant-msg { font-size: 16px; max-width: 100%; } }
     </style>
+    
+    <script>
+    // Speech Recognition Setup
+    let recognition;
+    let isListening = false;
+    
+    function setupSpeechRecognition() {
+        try {
+            window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            recognition = new SpeechRecognition();
+            recognition.lang = 'en-US';
+            recognition.interimResults = false;
+            recognition.maxAlternatives = 1;
+            
+            recognition.onresult = function(event) {
+                const speechResult = event.results[0][0].transcript;
+                document.getElementById('speech-result').value = speechResult;
+                document.getElementById('submit-speech').click();
+            };
+            
+            recognition.onerror = function(event) {
+                console.error('Speech recognition error:', event.error);
+                isListening = false;
+                updateMicButton();
+            };
+            
+            recognition.onend = function() {
+                isListening = false;
+                updateMicButton();
+            };
+            
+            return true;
+        } catch (error) {
+            console.error('Speech recognition not supported:', error);
+            return false;
+        }
+    }
+    
+    function toggleSpeechRecognition() {
+        if (!recognition) {
+            if (!setupSpeechRecognition()) {
+                alert('Speech recognition is not supported in your browser.');
+                return;
+            }
+        }
+        
+        if (isListening) {
+            recognition.stop();
+            isListening = false;
+        } else {
+            recognition.start();
+            isListening = true;
+        }
+        
+        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';
+        }
+    }
+    
+    // Text-to-Speech functionality
+    function speakText(text) {
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.lang = 'en-US';
+        utterance.pitch = 1;
+        utterance.rate = 1;
+        window.speechSynthesis.speak(utterance);
+    }
+    
+    // Initialize after the page loads
+    document.addEventListener('DOMContentLoaded', function() {
+        setupSpeechRecognition();
+    });
+    </script>
 """, unsafe_allow_html=True)
 
-# ✅ Chat UI
-user_input = st.chat_input("Type your message here...")
+# 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.",
+        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 (ONLY display from history, not separately)
+# ✅ Display chat history with speak buttons
 st.markdown("<div class='container'>", unsafe_allow_html=True)
-for message in st.session_state.chat_history:
+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:
-        st.markdown(f"<div class='assistant-msg'><strong>HAL:</strong> {message['content']}</div>", unsafe_allow_html=True)
-st.markdown("</div>", unsafe_allow_html=True)
+        speak_button = f"""
+        <button onclick="speakText(`{message['content'].replace('`', '\'').replace('"', '\'')}`)" class="speak-button">
+            🔊 Speak
+        </button>
+        """
+        st.markdown(
+            f"<div class='assistant-msg'><strong>HAL:</strong> {message['content']} {speak_button}</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;
+                    }
+                }
+            }, 100);
+        }
+    }
+});
+</script>
+"""
+st.components.v1.html(components_js, height=0)