Update app.py

app.py

@@ -11,191 +11,124 @@ Answer questions about your background professionally but engagingly (2-3 senten
 
 def chat_with_openai(user_input, history, api_key):
     if not 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:
             messages.append({"role": "user", "content": entry[0]})
             messages.append({"role": "assistant", "content": entry[1]})
         messages.append({"role": "user", "content": user_input})
-
-        # Get response from OpenAI
         response = client.chat.completions.create(
             model="gpt-4o",
             messages=messages,
             temperature=0.7
         )
-
         bot_reply = response.choices[0].message.content
         history.append((user_input, bot_reply))
-        return history, "" # Clear the input text box after processing
+        return history, ""
     except Exception as 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>
-        #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;
-        }
+        #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>
     """)
 
     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) # Added height for better display
+    chatbot = gr.Chatbot(elem_id="chatBox", type="messages", height=400)
     state = gr.State([])
 
-    # 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)
-
+    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")
 
-    # Event handlers
-    # 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.
+    # Backend trigger
     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
+        [chatbot, state, text_input_for_voice]
     )
 
+    # 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;
 
-    # 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) {
+        // 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 [gr.Button.update(interactive=true)]; // Keep button enabled if no key
+                return;
             }
+
             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
+            micButton.disabled = true;
 
-            recognition.onresult = function(event) {
+            recognition.onresult = (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 }));
+                if (voiceInput) {
+                    voiceInput.value = transcript;
+                    voiceInput.dispatchEvent(new Event('input', { bubbles: true }));
                 }
             };
 
-            recognition.onend = function() {
+            recognition.onerror = (event) => {
+                console.error("Speech recognition error:", event.error);
+                alert("Speech recognition error: " + event.error);
                 micButton.textContent = "🎤 Click & Speak";
-                micButton.disabled = false; // Re-enable after listening ends
+                micButton.disabled = false;
             };
 
-            recognition.onerror = function(event) {
-                console.error("Speech recognition error", event.error);
+            recognition.onend = () => {
                 micButton.textContent = "🎤 Click & Speak";
-                micButton.disabled = false; // Re-enable on error
-                alert("Speech recognition error: " + event.error);
+                micButton.disabled = false;
             };
 
             recognition.start();
-            return [gr.Button.update(interactive=false)]; // Disable button visually when started
-        }
-        """
-    )
-
-
-    # JavaScript for API key input and status
-    gr.HTML("""
-    <script>
-        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;
-            } else {
-                keyStatus.innerHTML = '<div class="key-status error">Please enter a valid API key</div>';
-                micButton.disabled = true;
-            }
         });
 
-        // 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();
+        // Auto-focus on API key input
+        apiInput.focus();
     </script>
     """)
 
-    clear_btn.click(lambda: ([], []), None, [chatbot, state])
-
-demo.launch()
+demo.launch()