Update app.py

app.py

@@ -1,5 +1,4 @@
 import gradio as gr
-import speech_recognition as sr
 from huggingface_hub import InferenceClient
 
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
@@ -36,29 +35,6 @@ def respond(
         response += token
         yield response
 
-# Voice recognition function with error handling
-def recognize_speech():
-    recognizer = sr.Recognizer()
-    with sr.Microphone() as source:
-        print("Listening...")
-        try:
-            audio = recognizer.listen(source, timeout=5)
-            print("Recognizing...")
-            text = recognizer.recognize_google(audio)
-            print(f"Recognized: {text}")
-            return text
-        except sr.WaitTimeoutError:
-            return "Error: Listening timed out."
-        except sr.UnknownValueError:
-            return "Error: Could not understand the audio."
-        except sr.RequestError:
-            return "Error: Could not request results from Google Speech Recognition service."
-
-# Gradio interface with a button to trigger voice recognition
-def get_voice_input():
-    voice_input = recognize_speech()
-    return voice_input
-
 # Define custom CSS
 custom_css = """
 /* Add your custom CSS styles here */
@@ -93,35 +69,47 @@ body {
 }
 """
 
-# Create a Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("## Voice Recognition Chatbot")
-    
-    # Voice recognition button
-    voice_button = gr.Button("🎤 Speak").click(fn=get_voice_input)
+# JavaScript for voice recognition
+custom_js = """
+<script>
+function startRecognition() {
+    var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+    recognition.lang = 'en-US';
     
-    # Text input and Chat Interface
-    text_input = gr.Textbox(label="Your Message")
-    chatbot = gr.ChatInterface(
-        fn=respond,
-        inputs=[text_input],
-        additional_inputs=[
-            gr.Textbox(value="You are a Chatbot.Your name is Evy.Your are Developed By Joe.", label="System message"),
-            gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-            gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-            gr.Slider(
-                minimum=0.1,
-                maximum=1.0,
-                value=0.95,
-                step=0.05,
-                label="Top-p (nucleus sampling)",
-            ),
-        ],
-        css=custom_css
-    )
-    
-    # Link voice input to text input
-    voice_button.click(fn=get_voice_input, outputs=text_input)
+    recognition.onresult = function(event) {
+        var speechResult = event.results[0][0].transcript;
+        document.getElementById('input_message').value = speechResult;
+    };
+
+    recognition.start();
+}
+</script>
+"""
+
+# Create a Gradio chat interface with custom CSS and JS
+demo = gr.ChatInterface(
+    fn=respond,
+    additional_inputs=[
+        gr.Textbox(value="You are a Chatbot.Your name is Evy.Your are Developed By Joe.", label="System message"),
+        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
+        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
+        gr.Slider(
+            minimum=0.1,
+            maximum=1.0,
+            value=0.95,
+            step=0.05,
+            label="Top-p (nucleus sampling)",
+        ),
+    ],
+    css=custom_css,
+    javascript=custom_js
+)
+
+# Add a button to start voice recognition
+def add_voice_button():
+    return gr.Button("🎤 Speak").onclick(startRecognition)
+
+demo.add_component(add_voice_button(), "left", component_id="input_message")
 
 if __name__ == "__main__":
     demo.launch()