Update app.py

app.py

@@ -5,6 +5,70 @@ from streamlit.components.v1 import html
 import os
 from dotenv import load_dotenv
 
+# Speech recognition component
+def add_mic_button(target_input_key, is_select=False):
+    html(f"""
+    <script>
+    function startSpeechRecognition{target_input_key}() {{
+        const targetElem = document.querySelector('input[data-testid="stTextInput-{target_input_key}"]');
+        const statusDiv = document.getElementById('status-{target_input_key}');
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.lang = 'en-US';
+        
+        recognition.onstart = () => {{
+            statusDiv.innerHTML = '<div style="color: red; margin-left: 5px; animation: blink 1s infinite;">🎤 Listening...</div>';
+        }};
+        
+        recognition.onresult = (event) => {{
+            const transcript = event.results[0][0].transcript;
+            {"if(targetElem) targetElem.value = transcript;" if not is_select else 
+             "const selectElem = document.querySelector('select[data-testid=\"stSelectbox-{target_input_key}\"]');" +
+             "if(selectElem) { const option = Array.from(selectElem.options).find(opt => opt.text.toLowerCase().includes(transcript.toLowerCase()));" +
+             "if(option) selectElem.value = option.value; }"}
+        }};
+        
+        recognition.onerror = () => {{
+            statusDiv.innerHTML = '<div style="color: red; margin-left: 5px;">❌ Error</div>';
+        }};
+        
+        recognition.start();
+    }}
+    </script>
+    
+    <style>
+    @keyframes blink {{
+        0% {{ opacity: 1; }}
+        50% {{ opacity: 0; }}
+        100% {{ opacity: 1; }}
+    }}
+    .mic-button {{
+        background: #6C63FF !important;
+        border-radius: 50%;
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        margin-left: 8px;
+    }}
+    .input-row {{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }}
+    </style>
+    
+    <div class="input-row">
+        <div id="status-{target_input_key}" style="display: flex; align-items: center;"></div>
+        <button class="mic-button" onclick="startSpeechRecognition{target_input_key}()">
+            <svg style="width:20px;height:20px;fill:white;" viewBox="0 0 24 24">
+                <path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
+            </svg>
+        </button>
+    </div>
+    """)
+
 # Import transformers and cache the help agent for performance
 @st.cache_resource
 def get_help_agent():
@@ -18,15 +82,12 @@ def inject_custom_css():
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
         @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
-
         * {
             font-family: 'Inter', sans-serif;
         }
-
         body {
             background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
         }
-
         .title {
             font-size: 2.8rem !important;
             font-weight: 800 !important;
@@ -37,7 +98,6 @@ def inject_custom_css():
             margin: 1rem 0;
             letter-spacing: -1px;
         }
-
         .subtitle {
             font-size: 1.1rem !important;
             text-align: center;
@@ -45,7 +105,6 @@ def inject_custom_css():
             margin-bottom: 2.5rem;
             animation: fadeInSlide 1s ease;
         }
-
         .question-box {
             background: white;
             border-radius: 20px;
@@ -57,11 +116,9 @@ def inject_custom_css():
             transition: transform 0.2s ease;
             color: black;
         }
-
         .question-box:hover {
             transform: translateY(-3px);
         }
-
         .question-box::before {
             content: "🕹️";
             position: absolute;
@@ -73,7 +130,6 @@ def inject_custom_css():
             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
             font-size: 1.2rem;
         }
-
         .input-box {
             background: white;
             border-radius: 12px;
@@ -81,19 +137,16 @@ def inject_custom_css():
             margin: 1rem 0;
             box-shadow: 0 4px 6px rgba(0,0,0,0.05);
         }
-
         .stTextInput input {
             border: 2px solid #e2e8f0 !important;
             border-radius: 10px !important;
             padding: 12px 16px !important;
             transition: all 0.3s ease !important;
         }
-
         .stTextInput input:focus {
             border-color: #6C63FF !important;
             box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2) !important;
         }
-
         button {
             background: linear-gradient(45deg, #6C63FF, #3B82F6) !important;
             color: white !important;
@@ -103,12 +156,10 @@ def inject_custom_css():
             font-weight: 600 !important;
             transition: all 0.3s ease !important;
         }
-
         button:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(108, 99, 255, 0.3) !important;
         }
-
         .final-reveal {
             animation: fadeInUp 1s ease;
             font-size: 2.8rem;
@@ -119,7 +170,6 @@ def inject_custom_css():
             margin: 2rem 0;
             font-weight: 800;
         }
-
         .help-chat {
             background: rgba(255,255,255,0.9);
             backdrop-filter: blur(10px);
@@ -128,17 +178,14 @@ def inject_custom_css():
             margin: 1rem 0;
             box-shadow: 0 8px 30px rgba(0,0,0,0.12);
         }
-
         @keyframes fadeInSlide {
             0% { opacity: 0; transform: translateY(20px); }
             100% { opacity: 1; transform: translateY(0); }
         }
-
         @keyframes fadeInUp {
             0% { opacity: 0; transform: translateY(30px); }
             100% { opacity: 1; transform: translateY(0); }
         }
-
         .progress-bar {
             height: 6px;
             background: #e2e8f0;
@@ -146,13 +193,11 @@ def inject_custom_css():
             margin: 1.5rem 0;
             overflow: hidden;
         }
-
         .progress-fill {
             height: 100%;
             background: linear-gradient(90deg, #6C63FF, #3B82F6);
             transition: width 0.5s ease;
         }
-
         .question-count {
             color: #6C63FF;
             font-weight: 600;
@@ -173,13 +218,11 @@ def show_confetti():
         origin: { y: 0.7 },
         zIndex: 1050
     };
-
     function fire(particleRatio, opts) {
         confetti(Object.assign({}, defaults, opts, {
             particleCount: Math.floor(count * particleRatio)
         }));
     }
-
     fire(0.25, { spread: 26, startVelocity: 55 });
     fire(0.2, { spread: 60 });
     fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
@@ -277,7 +320,6 @@ def ask_help_agent(query):
     except Exception as e:
         return f"Error in help agent: {str(e)}"
 
-
 # Main game logic with enhanced UI
 def main():
     inject_custom_css()
@@ -323,7 +365,13 @@ def main():
             """, unsafe_allow_html=True)
 
         with st.form("start_form"):
-            category_input = st.text_input("Enter category (person/place/object):").strip().lower()
+            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("<div style='height: 30px;'></div>")
+                add_mic_button("category_input")
+            
             if st.form_submit_button("Start Game"):
                 if not category_input:
                     st.error("Please enter a category!")
@@ -376,8 +424,14 @@ def main():
             st.experimental_rerun()
 
         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()
+            col1, col2 = st.columns([4, 1])
+            with col1:
+                answer_input = st.text_input("Your answer (yes/no/both):",
+                                           key=f"answer_{st.session_state.current_q}").strip().lower()
+            with col2:
+                st.markdown("<div style='height: 30px;'></div>")
+                add_mic_button(f"answer_{st.session_state.current_q}")
+                
             if st.form_submit_button("Submit"):
                 if answer_input not in ["yes", "no", "both"]:
                     st.error("Please answer with 'yes', 'no', or 'both'!")
@@ -442,7 +496,13 @@ 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()
+            col1, col2 = st.columns([4, 1])
+            with col1:
+                confirm_input = st.text_input("Type your answer (yes/no/both):", key="confirm_input").strip().lower()
+            with col2:
+                st.markdown("<div style='height: 30px;'></div>")
+                add_mic_button("confirm_input")
+                
             if st.form_submit_button("Submit"):
                 if confirm_input not in ["yes", "no", "both"]:
                     st.error("Please answer with 'yes', 'no', or 'both'!")