Update app.py

app.py

@@ -1,23 +1,23 @@
 import gradio as gr
 from openai import OpenAI
 
-system_prompt = """
-You are a voice bot representing Krishnavamshi Thumma. When responding to questions, answer as if you are:
+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
 - Currently working as a Data Engineer at Wishkarma in Hyderabad
 - Previously worked as a Data Engineer Intern at DeepThought
 - Skilled in Python, SQL, JavaScript, OpenAI GPT-4o, LangChain, etc.
 - A Computer Science graduate from Neil Gogte Institute of Technology
-Answer questions about your background professionally but engagingly (2-3 sentences max).
-"""
+Answer questions about your background professionally but engagingly (2-3 sentences max)."""
 
 def chat_with_openai(user_input, history, api_key):
     if not api_key:
-        return history, "❌ Please enter your OpenAI API key."
-    
+        # Instead of returning history and an error string,
+        # Gradio handles errors better when raised as exceptions
+        raise gr.Error("❌ Please enter your OpenAI API key.")
+
     try:
         client = OpenAI(api_key=api_key)
-        
+
         # Build messages from history
         messages = [{"role": "system", "content": system_prompt}]
         for entry in history:
@@ -31,17 +31,16 @@ def chat_with_openai(user_input, history, api_key):
             messages=messages,
             temperature=0.7
         )
-        
+
         bot_reply = response.choices[0].message.content
         history.append((user_input, bot_reply))
-        return history, history
-        
+        return history, "" # Clear the input text box after processing
     except Exception as e:
-        return history, f"❌ Error: {str(e)}"
+        raise gr.Error(f"❌ Error: {str(e)}")
 
 with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma") as demo:
     gr.Markdown("## 🎙️ Krishnavamshi Thumma - Voice Assistant")
-    
+
     # Add custom CSS
     gr.HTML("""
     <style>
@@ -94,37 +93,90 @@ with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma") as demo:
         }
     </style>
     """)
-    
+
     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")
+    chatbot = gr.Chatbot(elem_id="chatBox", type="messages", height=400) # Added height for better display
     state = gr.State([])
-    
-    # Voice input components
-    voice_input = gr.Textbox(visible=False, elem_id="voiceInput")
+
+    # This textbox will be the one that takes the speech-to-text output
+    # and directly triggers the chat_with_openai function.
+    # It will remain hidden from the user.
+    text_input_for_voice = gr.Textbox(label="Voice Input Text", visible=False)
+
     mic_btn = gr.Button("🎤 Click & Speak", elem_id="micButton")
-    
+
     clear_btn = gr.Button("🗑️ Clear Chat")
-    
+
     # Event handlers
-    voice_input.change(
-        chat_with_openai, 
-        [voice_input, state, api_key], 
-        [chatbot, state]
+    # The chat_with_openai function will now be triggered by the text_input_for_voice.submit()
+    # or by its change event, which will be manually triggered by the JavaScript.
+    text_input_for_voice.submit(
+        chat_with_openai,
+        [text_input_for_voice, state, api_key],
+        [chatbot, state, text_input_for_voice] # Also clear the voice input textbox after submission
     )
-    
+
+
     # JavaScript functions
+    # Using Gradio's _js to integrate JavaScript with Python components directly
+    mic_btn.click(
+        None,
+        inputs=[api_key],
+        outputs=[mic_btn],
+        _js="""
+        (api_key) => {
+            if (!api_key) {
+                alert("Please enter your OpenAI API key first!");
+                return [gr.Button.update(interactive=true)]; // Keep button enabled if no key
+            }
+            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+            recognition.continuous = false;
+            recognition.lang = "en-US";
+            const micButton = document.getElementById("micButton");
+
+            micButton.textContent = "🔴 Listening...";
+            micButton.disabled = true; // Disable while listening
+
+            recognition.onresult = function(event) {
+                const transcript = event.results[0][0].transcript;
+                // Directly set the value of the hidden text_input_for_voice and trigger its submit event
+                // Gradio's internal JS will handle the connection to the Python backend function
+                const voiceInputTextbox = document.querySelector('#voice_input_for_voice input'); // Correctly select the hidden input field
+                if (voiceInputTextbox) {
+                    voiceInputTextbox.value = transcript;
+                    // Trigger the 'input' event which Gradio uses for its change/submit events
+                    voiceInputTextbox.dispatchEvent(new Event('input', { bubbles: true }));
+                }
+            };
+
+            recognition.onend = function() {
+                micButton.textContent = "🎤 Click & Speak";
+                micButton.disabled = false; // Re-enable after listening ends
+            };
+
+            recognition.onerror = function(event) {
+                console.error("Speech recognition error", event.error);
+                micButton.textContent = "🎤 Click & Speak";
+                micButton.disabled = false; // Re-enable on error
+                alert("Speech recognition error: " + event.error);
+            };
+
+            recognition.start();
+            return [gr.Button.update(interactive=false)]; // Disable button visually when started
+        }
+        """
+    )
+
+
+    # JavaScript for API key input and status
     gr.HTML("""
     <script>
-        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
-        recognition.continuous = false;
-        recognition.lang = "en-US";
-        
         document.getElementById("apiKeyInput").addEventListener("input", function() {
             const apiKey = this.value.trim();
             const keyStatus = document.getElementById("keyStatus");
             const micButton = document.getElementById("micButton");
-            
+
             if (apiKey) {
                 keyStatus.innerHTML = '<div class="key-status success">API Key saved successfully!</div>';
                 micButton.disabled = false;
@@ -133,46 +185,17 @@ with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma") as demo:
                 micButton.disabled = true;
             }
         });
-        
-        document.getElementById("micButton").addEventListener("click", function() {
-            const apiKey = document.querySelector("#apiKeyInput input").value.trim();
-            if (!apiKey) {
-                alert("Please enter your OpenAI API key first!");
-                return;
-            }
-            
-            this.textContent = "🔴 Listening...";
-            recognition.start();
-        });
-        
-        recognition.onresult = function(event) {
-            const transcript = event.results[0][0].transcript;
-            document.querySelector("#voiceInput input").value = transcript;
-            document.querySelector("#voiceInput input").dispatchEvent(new Event("change"));
-        };
-        
-        recognition.onend = function() {
-            document.getElementById("micButton").textContent = "🎤 Click & Speak";
-        };
-        
-        recognition.onerror = function(event) {
-            console.error("Speech recognition error", event.error);
-            document.getElementById("micButton").textContent = "🎤 Click & Speak";
-            alert("Speech recognition error: " + event.error);
-        };
-        
-        // Auto-scroll chat
-        function scrollChat() {
-            const chatBox = document.getElementById("chatBox");
-            chatBox.scrollTop = chatBox.scrollHeight;
-        }
-        
+
+        // Auto-scroll chat - this should be triggered whenever chatbot updates
+        // However, Gradio's Chatbot often handles auto-scrolling itself.
+        // If not, you might need a more sophisticated way to observe changes.
+
         // Initial setup
         document.getElementById("micButton").disabled = true;
         document.querySelector("#apiKeyInput input").focus();
     </script>
     """)
-    
+
     clear_btn.click(lambda: ([], []), None, [chatbot, state])
 
 demo.launch()