Update app.py

app.py

@@ -3,7 +3,6 @@ from openai import OpenAI
 
 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 in data pipelines, automation, and scalable solutions
     - Currently working as a Data Engineer at Wishkarma in Hyderabad, where you've optimized ETL pipelines processing 10K+ records daily and developed an image-based product similarity search engine using CLIP-ViT-L/14
     - Previously worked as a Data Engineer Intern at DeepThought Growth Management System, where you processed 700+ data records and mentored 400+ students
@@ -11,22 +10,22 @@ system_prompt = """
     - Experienced in building GenAI products including conversational AI chatbots, RAG pipelines, and AI-powered tools
     - A Computer Science graduate from Neil Gogte Institute of Technology with a CGPA of 7.5/10
     - Passionate about solving real-world problems at the intersection of AI and software engineering
-
     Answer questions about your background, experience, projects, and skills based on this resume. Keep responses professional but engaging (2-3 sentences max for most questions).
     """
 
 def chat_with_openai(user_input, history, api_key):
     if not api_key:
-        return history, "❌ Please enter your OpenAI API key."
-    
+        # When type='messages', history is a list of dictionaries.
+        # Append error message in the expected format.
+        return history + [{"role": "assistant", "content": "❌ Please enter your OpenAI API key."}], "❌ 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]})
+
+        # Build messages for OpenAI API.
+        # The 'history' parameter from Gradio's chatbot (with type='messages')
+        # is already in the correct format for OpenAI's messages list.
+        messages = [{"role": "system", "content": system_prompt}] + history
         messages.append({"role": "user", "content": user_input})
 
         # Get response from OpenAI
@@ -35,67 +34,71 @@ 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
-        
+
+        bot_reply = response.choices.message.content
+        # Append user and bot messages to the history in the 'messages' format
+        history.append({"role": "user", "content": user_input})
+        history.append({"role": "assistant", "content": bot_reply})
+        return history, history # Return updated history for chatbot and state
     except Exception as e:
-        return history, f"❌ Error: {str(e)}"
+        # Append error message in the 'messages' format
+        return history + [{"role": "assistant", "content": f"❌ Error: {str(e)}"}], f"❌ Error: {str(e)}"
+
+# Define the JavaScript function that will be called by the mic_btn.
+# This script will be injected into the Gradio Blocks using the 'js' parameter.
+js_script = """
+function startListening() {
+    console.log("startListening JS function called!");
+    // This is a placeholder. In a real application, you would integrate with
+    // browser's Web Speech API or another microphone input library here.
+    // For example, you might trigger a browser's speech recognition.
+    alert("Microphone listening started! (Placeholder)");
 
-with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma", js="./custom.js") as demo:
+    // If you want to send recognized speech back to Python, you would update
+    // the 'voice_input' Textbox and dispatch an 'input' event, like this:
+    // const voiceInput = document.getElementById('voiceInput');
+    // if (voiceInput) {
+    //     voiceInput.value = "Simulated voice input from JS"; // Replace with actual speech-to-text result
+    //     voiceInput.dispatchEvent(new Event('input', { bubbles: true }));
+    // }
+}
+"""
+
+# The 'js' parameter in gr.Blocks() is used to inject global JavaScript.
+with gr.Blocks(title="Voice Bot: Krishnavamshi Thumma", js=js_script) 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;
-        }
-        .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;
-        }
-    </style>
-    """)
-    
+
     api_key = gr.Textbox(label="🔐 OpenAI API Key", type="password", elem_id="apiKeyInput")
+    # Corrected: Set type='messages' as recommended by the UserWarning.
+    # This configures the chatbot to expect and display messages as a list of dictionaries
+    # with 'role' and 'content' keys, aligning with OpenAI's message format.
     chatbot = gr.Chatbot(elem_id="chatBox", type="messages")
-    state = gr.State([])
-    
+    # The state will now store the chat history as a list of dictionaries.
+    state = gr.State()
+
     with gr.Row():
+        # Corrected: Changed '_js' to 'js'. The 'js' parameter is the correct way
+        # to specify a frontend JavaScript function to run before the Python 'fn'.
         mic_btn = gr.Button("🎤 Speak", elem_id="micButton")
         clear_btn = gr.Button("🗑️ Clear Chat")
-    
-    # Hidden components for JS communication
+
+    # Hidden components for JS communication.
+    # 'voice_input' is intended to be updated by the JavaScript function,
+    # which then triggers the 'chat_with_openai' Python function.
     voice_input = gr.Textbox(visible=False, elem_id="voiceInput")
-    
+    js_trigger = gr.Textbox(visible=False, elem_id="jsTrigger") # This component is not used in the provided logic
+
     # Event handlers
+    # This will be triggered when the 'voice_input' Textbox's value changes (e.g., updated by JS).
     voice_input.change(
-        chat_with_openai, 
-        [voice_input, state, api_key], 
+        chat_with_openai,
+        [voice_input, state, api_key],
         [chatbot, state]
     )
-    
-    # Corrected JS trigger syntax
-    mic_btn.click(None, [], [], js="startListening")
-    clear_btn.click(lambda: ([], []), None, [chatbot, state])
+    # This button now correctly calls the 'startListening' JavaScript function directly in the browser.
+    # Since 'startListening' is a pure frontend action, 'fn', 'inputs', and 'outputs' can be None.
+    mic_btn.click(None, None, None, js="startListening")
+    # Clear button correctly resets chatbot and state to empty lists, compatible with 'messages' type.
+    clear_btn.click(lambda: (,), None, [chatbot, state])
 
 demo.launch()