Update app.py

app.py

@@ -36,39 +36,103 @@ def respond(
         yield response
 
 
-# JavaScript for speech-to-text functionality
-speech_recognition_js = """
+# Custom HTML for mic button and input box
+mic_html = """
+<div class="mic-container">
+  <button id="mic_button" title="Click to speak">
+    <span class="material-symbols-outlined">mic</span>
+  </button>
+  <input id="user_input" type="text" placeholder="Type your message here..." />
+</div>
+<div id="status" class="status"></div>
+<style>
+.mic-container {
+  display: flex;
+  align-items: center;
+  max-width: 500px;
+  margin: 20px auto;
+  padding: 10px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+#mic_button {
+  font-family: 'Material Symbols Outlined';
+  font-size: 24px;
+  color: #555;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 4px;
+  margin-right: 8px;
+}
+#user_input {
+  width: 100%;
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+.status {
+  margin-top: 20px;
+  text-align: center;
+  color: #666;
+}
+</style>
 <script>
-    let micButton = document.getElementById('mic_button');
-    let userInputBox = document.getElementById('user_input');
-    let recognition = null;
+let micButton = document.getElementById('mic_button');
+let userInputBox = document.getElementById('user_input');
+let statusDiv = document.getElementById('status');
+let recognition = null;
 
-    if ('webkitSpeechRecognition' in window) {
-        recognition = new webkitSpeechRecognition();
-        recognition.continuous = false;
-        recognition.interimResults = false;
+if ('webkitSpeechRecognition' in window) {
+    recognition = new webkitSpeechRecognition();
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.lang = 'en-US';
 
-        recognition.onresult = function(event) {
-            const transcript = event.results[0][0].transcript;
-            userInputBox.value = transcript;
-        };
+    recognition.onstart = function() {
+        statusDiv.textContent = "Listening...";
+        micButton.style.color = '#4CAF50';
+    };
 
-        recognition.onspeechend = function() {
-            recognition.stop();
-        };
+    recognition.onresult = function(event) {
+        const transcript = event.results[0][0].transcript;
+        userInputBox.value = transcript;
+        statusDiv.textContent = "Done listening.";
+        micButton.style.color = '#555';
+    };
+
+    recognition.onerror = function(event) {
+        console.error('Speech recognition error:', event.error);
+        statusDiv.textContent = "Error: " + event.error;
+        micButton.style.color = '#555';
+    };
+
+    recognition.onspeechend = function() {
+        recognition.stop();
+        statusDiv.textContent = "Stopped listening.";
+        micButton.style.color = '#555';
+    };
 
-        micButton.onclick = function() {
+    micButton.onclick = function() {
+        try {
             recognition.start();
-        };
-    } else {
-        micButton.onclick = function() {
-            alert("Speech recognition is not supported in this browser.");
-        };
-    }
+        } catch(err) {
+            console.error('Recognition already started:', err);
+            recognition.stop();
+        }
+    };
+} else {
+    micButton.onclick = function() {
+        alert("Speech recognition is not supported in this browser.");
+        statusDiv.textContent = "Speech recognition not supported";
+    };
+    statusDiv.textContent = "Speech recognition not available";
+}
 </script>
 """
 
-# Chat Interface with Additional Inputs
+# Gradio Chat Interface with Mic Button
 demo = gr.ChatInterface(
     fn=respond,
     additional_inputs=[
@@ -84,35 +148,7 @@ demo = gr.ChatInterface(
         ),
     ],
 )
+demo.load(_js=mic_html)
 
-# Add Mic Button to the Interface
-with gr.Blocks() as ui:
-    with gr.Row():
-        gr.HTML(
-            """
-            <style>
-                #mic_button {
-                    font-family: 'Material Symbols Outlined';
-                    font-size: 24px;
-                    color: #555;
-                    border: none;
-                    background: none;
-                    cursor: pointer;
-                    padding: 4px;
-                    margin-right: 8px;
-                }
-                #user_input {
-                    width: 100%;
-                }
-            </style>
-            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
-            <div style="display: flex; align-items: center;">
-                <button id="mic_button" title="Click to speak">🎤</button>
-                <input id="user_input" type="text" placeholder="Type your message here..." />
-            </div>
-            """
-        )
-        gr.HTML(speech_recognition_js)  # Include JS for mic button functionality
-
+if __name__ == "__main__":
     demo.launch()
-