Update app.py

app.py

@@ -1,5 +1,7 @@
 import gradio as gr
 from openai import OpenAI
+import speech_recognition as sr
+import tempfile
 
 system_prompt = """You are a voice bot representing Krishnavamshi Thumma. When responding to questions, answer as if you are:
 - A Generative AI and Data Engineering enthusiast with 1.5+ years of experience
@@ -9,6 +11,21 @@ system_prompt = """You are a voice bot representing Krishnavamshi Thumma. When r
 - A Computer Science graduate from Neil Gogte Institute of Technology
 Answer questions about your background professionally but engagingly (2-3 sentences max)."""
 
+def speech_to_text(audio):
+    recognizer = sr.Recognizer()
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".wav") as tmp_file:
+        tmp_file.write(audio)
+        tmp_file.flush()
+        with sr.AudioFile(tmp_file.name) as source:
+            audio_data = recognizer.record(source)
+            try:
+                text = recognizer.recognize_google(audio_data)
+                return text
+            except sr.UnknownValueError:
+                return "❌ Could not understand the audio"
+            except sr.RequestError as e:
+                return f"❌ Speech recognition error: {e}"
+
 def chat_with_openai(user_input, history, api_key):
     if not api_key:
         raise gr.Error("❌ Please enter your OpenAI API key.")
@@ -31,104 +48,27 @@ def chat_with_openai(user_input, history, api_key):
         raise gr.Error(f"❌ Error: {str(e)}")
 
 with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma") as demo:
-    gr.Markdown("## 🎙️ Krishnavamshi Thumma - Voice Assistant")
-
-    gr.HTML("""
-    <style>
-        #chatBox { height: 60vh; overflow-y: auto; padding: 20px; border-radius: 10px; background: #f9f9f9; margin-bottom: 20px; }
-        .message { margin: 10px 0; padding: 12px; border-radius: 8px; }
-        .user { background: #e3f2fd; text-align: right; }
-        .bot { background: #f5f5f5; }
-        #micButton { width: 100%; padding: 12px; font-size: 1.2em; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
-        #micButton:disabled { background: #cccccc; cursor: not-allowed; }
-        .key-status { padding: 5px; margin-top: 5px; border-radius: 4px; }
-        .success { background: #d4edda; color: #155724; }
-        .error { background: #f8d7da; color: #721c24; }
-    </style>
-    """)
+    gr.Markdown("## 🎙️ Krishnavamshi Thumma - Voice Assistant (No JavaScript)")
 
-    api_key = gr.Textbox(label="🔐 OpenAI API Key", type="password", elem_id="apiKeyInput")
-    key_status = gr.HTML("<div id='keyStatus'></div>")
-    chatbot = gr.Chatbot(elem_id="chatBox", type="messages", height=400)
+    api_key = gr.Textbox(label="🔐 OpenAI API Key", type="password")
+    chatbot = gr.Chatbot(height=400)
     state = gr.State([])
 
-    text_input_for_voice = gr.Textbox(label="Voice Input Text", visible=False, elem_id="voice_input_for_voice")
-    mic_btn = gr.Button("🎤 Click & Speak", elem_id="micButton")
-    clear_btn = gr.Button("🗑️ Clear Chat")
+    with gr.Row():
+        voice_input = gr.Audio(source="microphone", type="filepath", label="🎤 Speak here")
+        transcribed_text = gr.Textbox(label="Transcribed Text")
+
+    # When audio is submitted, convert to text
+    voice_input.change(speech_to_text, voice_input, transcribed_text)
 
-    # Backend trigger
-    text_input_for_voice.submit(
+    # When transcribed text is ready, send to OpenAI
+    transcribed_text.submit(
         chat_with_openai,
-        [text_input_for_voice, state, api_key],
-        [chatbot, state, text_input_for_voice]
+        [transcribed_text, state, api_key],
+        [chatbot, state, transcribed_text]
     )
 
-    # Clear chat
+    clear_btn = gr.Button("🗑️ Clear Chat")
     clear_btn.click(lambda: ([], []), None, [chatbot, state])
 
-    # JavaScript: mic + api key handling
-    gr.HTML("""
-    <script>
-        const micButton = document.getElementById("micButton");
-        const apiInput = document.querySelector("#apiKeyInput input");
-        const voiceInput = document.querySelector("#voice_input_for_voice input");
-        const keyStatus = document.getElementById("keyStatus");
-
-        // Disable mic button initially
-        micButton.disabled = true;
-
-        // Enable mic if API key is valid
-        apiInput.addEventListener("input", () => {
-            const apiKey = apiInput.value.trim();
-            if (apiKey) {
-                keyStatus.innerHTML = '<div class="key-status success">API Key saved successfully!</div>';
-                micButton.disabled = false;
-            } else {
-                keyStatus.innerHTML = '<div class="key-status error">Please enter a valid API key</div>';
-                micButton.disabled = true;
-            }
-        });
-
-        micButton.addEventListener("click", () => {
-            const apiKey = apiInput.value.trim();
-            if (!apiKey) {
-                alert("Please enter your OpenAI API key first!");
-                return;
-            }
-
-            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-            recognition.continuous = false;
-            recognition.lang = "en-US";
-
-            micButton.textContent = "🔴 Listening...";
-            micButton.disabled = true;
-
-            recognition.onresult = (event) => {
-                const transcript = event.results[0][0].transcript;
-                if (voiceInput) {
-                    voiceInput.value = transcript;
-                    voiceInput.dispatchEvent(new Event('input', { bubbles: true }));
-                }
-            };
-
-            recognition.onerror = (event) => {
-                console.error("Speech recognition error:", event.error);
-                alert("Speech recognition error: " + event.error);
-                micButton.textContent = "🎤 Click & Speak";
-                micButton.disabled = false;
-            };
-
-            recognition.onend = () => {
-                micButton.textContent = "🎤 Click & Speak";
-                micButton.disabled = false;
-            };
-
-            recognition.start();
-        });
-
-        // Auto-focus on API key input
-        apiInput.focus();
-    </script>
-    """)
-
 demo.launch()