Update app.py

app.py

@@ -2,30 +2,27 @@ 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:
-    - 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
-    - Skilled in Python, SQL, JavaScript (Node.js), OpenAI GPT-4o, LangChain, MongoDB Vector Search, FAISS, Apache Airflow, AWS Lambda, and FastAPI
-    - 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).
-    """
+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).
+"""
 
 def chat_with_openai(user_input, history, api_key):
     if not 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."
-
+        return history, "❌ Please enter your OpenAI API key."
+    
     try:
         client = OpenAI(api_key=api_key)
-
-        # 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
+        
+        # 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
@@ -34,71 +31,148 @@ def chat_with_openai(user_input, history, api_key):
             messages=messages,
             temperature=0.7
         )
-
-        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
+        
+        bot_reply = response.choices[0].message.content
+        history.append((user_input, bot_reply))
+        return history, history
+        
     except Exception as 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)");
+        return history, f"❌ Error: {str(e)}"
 
-    // 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:
+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;
+        }
+    </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.
+    key_status = gr.HTML("<div id='keyStatus'></div>")
     chatbot = gr.Chatbot(elem_id="chatBox", type="messages")
-    # 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.
-    # 'voice_input' is intended to be updated by the JavaScript function,
-    # which then triggers the 'chat_with_openai' Python function.
+    state = gr.State([])
+    
+    # Voice input components
     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
-
+    mic_btn = gr.Button("🎤 Click & Speak", elem_id="micButton")
+    
+    clear_btn = gr.Button("🗑️ Clear Chat")
+    
     # 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]
     )
-    # 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])
+    
+    # JavaScript functions
+    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;
+            } else {
+                keyStatus.innerHTML = '<div class="key-status error">Please enter a valid API key</div>';
+                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;
+        }
+        
+        // Initial setup
+        document.getElementById("micButton").disabled = true;
+        document.querySelector("#apiKeyInput input").focus();
+    </script>
+    """)
+    
+    clear_btn.click(lambda: ([], []), None, [chatbot, state])
 
 demo.launch()