Update app.py

app.py

@@ -11,7 +11,7 @@ def get_help_agent():
     # Using BlenderBot 400M Distill as the public conversational model (used elsewhere)
     return pipeline("conversational", model="facebook/blenderbot-400M-distill")
 
-# Custom CSS for professional look (fixed text color)
+# Custom CSS for professional look (fixed text color) with speech recognition
 def inject_custom_css():
     st.markdown("""
     <style>
@@ -91,7 +91,41 @@ def inject_custom_css():
             border-radius: 5px;
             margin: 10px 0;
         }
+        
+        .mic-btn {
+            margin-top: 29px;
+            border: none;
+            background: none;
+            cursor: pointer;
+            font-size: 1.5em;
+            padding: 0;
+        }
     </style>
+    <script>
+    function startSpeechRecognition(inputId) {
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 1;
+
+        recognition.onresult = function(event) {
+            const transcript = event.results[0][0].transcript.toLowerCase();
+            const inputElement = document.getElementById(inputId);
+            if (inputElement) {
+                inputElement.value = transcript;
+                // Trigger Streamlit's input change detection
+                const event = new Event('input', { bubbles: true });
+                inputElement.dispatchEvent(event);
+            }
+        };
+
+        recognition.onerror = function(event) {
+            console.error('Speech recognition error', event.error);
+        };
+
+        recognition.start();
+    }
+    </script>
     """, unsafe_allow_html=True)
 
 # Confetti animation
@@ -222,12 +256,30 @@ def main():
                 <li><strong>Place</strong> - city, country, landmark, geographical location</li>
                 <li><strong>Object</strong> - everyday item, tool, vehicle, etc.</li>
             </ul>
-            <p>Type your category below to begin:</p>
+            <p>Type or speak your category below to begin:</p>
         </div>
         """, unsafe_allow_html=True)
 
         with st.form("start_form"):
-            category_input = st.text_input("Enter category (person/place/object):").strip().lower()
+            # Create columns for input and microphone button
+            col1, col2 = st.columns([4, 1])
+            with col1:
+                category_input = st.text_input(
+                    "Enter category (person/place/object):",
+                    key="category_input"
+                ).strip().lower()
+            
+            with col2:
+                st.markdown(
+                    """
+                    <button type="button" onclick="startSpeechRecognition('text_input-category_input')" 
+                            class="mic-btn">
+                        🎤
+                    </button>
+                    """,
+                    unsafe_allow_html=True
+                )
+            
             if st.form_submit_button("Start Game"):
                 if not category_input:
                     st.error("Please enter a category!")
@@ -260,8 +312,27 @@ def main():
                     unsafe_allow_html=True)
         
         with st.form("answer_form"):
-            answer_input = st.text_input("Your answer (yes/no/both):", 
-                                       key=f"answer_{st.session_state.current_q}").strip().lower()
+            answer_key = f"answer_{st.session_state.current_q}"
+            
+            # Create columns for input and microphone button
+            col1, col2 = st.columns([4, 1])
+            with col1:
+                answer_input = st.text_input(
+                    "Your answer (yes/no/both) - speak or type:",
+                    key=answer_key
+                ).strip().lower()
+            
+            with col2:
+                st.markdown(
+                    f"""
+                    <button type="button" onclick="startSpeechRecognition('text_input-{answer_key}')" 
+                            class="mic-btn">
+                        🎤
+                    </button>
+                    """,
+                    unsafe_allow_html=True
+                )
+            
             if st.form_submit_button("Submit"):
                 if answer_input not in ["yes", "no", "both"]:
                     st.error("Please answer with 'yes', 'no', or 'both'!")
@@ -315,7 +386,25 @@ def main():
                     unsafe_allow_html=True)
         
         with st.form("confirm_form"):
-            confirm_input = st.text_input("Type your answer (yes/no/both):", key="confirm_input").strip().lower()
+            # Create columns for input and microphone button
+            col1, col2 = st.columns([4, 1])
+            with col1:
+                confirm_input = st.text_input(
+                    "Type or speak your answer (yes/no/both):",
+                    key="confirm_input"
+                ).strip().lower()
+            
+            with col2:
+                st.markdown(
+                    """
+                    <button type="button" onclick="startSpeechRecognition('text_input-confirm_input')" 
+                            class="mic-btn">
+                        🎤
+                    </button>
+                    """,
+                    unsafe_allow_html=True
+                )
+            
             if st.form_submit_button("Submit"):
                 if confirm_input not in ["yes", "no", "both"]:
                     st.error("Please answer with 'yes', 'no', or 'both'!")
@@ -370,4 +459,4 @@ def main():
             st.experimental_rerun()
 
 if __name__ == "__main__":
-    main()
+    main()