Update app.py

app.py

@@ -5,7 +5,6 @@ import datetime
 import streamlit.components.v1 as components
 
 # --- CONFIG ---
-# Place your API keys here
 GROQ_API_KEY = st.secrets.get('GROQ_API_KEY', 'YOUR_GROQ_API_KEY')
 BLACKBOX_API_KEY = st.secrets.get('BLACKBOX_API_KEY', 'YOUR_BLACKBOX_API_KEY')
 
@@ -22,9 +21,8 @@ EXAMPLE_QUESTIONS = [
     "How can I make this code more readable?"
 ]
 
-# --- API STUBS ---
+# --- API CALLS ---
 def call_groq_api(prompt, model="llama3-70b-8192"):
-    # Replace with actual Groq API call
     headers = {"Authorization": f"Bearer {GROQ_API_KEY}", "Content-Type": "application/json"}
     data = {"model": model, "messages": [{"role": "user", "content": prompt}]}
     response = requests.post("https://api.groq.com/openai/v1/chat/completions", json=data, headers=headers)
@@ -47,18 +45,15 @@ def call_blackbox_agent(messages):
     if response.status_code == 200:
         return response.json()["choices"][0]["message"]["content"]
     else:
-        # fallback to Groq if Blackbox fails
         return call_groq_api(messages[-1]["content"])
 
 # --- UTILS ---
 def code_matches_language(code, language):
-    # Simple heuristic, can be improved
     if language.lower() in code.lower():
         return True
-    return True  # For demo, always True
+    return True
 
 def calculate_code_complexity(code):
-    # Dummy complexity metric
     lines = code.count('\n') + 1
     return f"{lines} lines"
 
@@ -73,10 +68,6 @@ def get_inline_diff(original, modified):
     return '\n'.join(diff)
 
 def is_coding_question(question):
-    """
-    Uses Blackbox AI agent to check if the question is about programming/code.
-    Returns True if yes, False otherwise.
-    """
     messages = [
         {"role": "system", "content": "You are a helpful coding assistant."},
         {"role": "user", "content": f"Is the following question about programming or code? Answer only 'yes' or 'no'. Question: {question}"}
@@ -127,7 +118,6 @@ elif page == "AI Workflow":
             st.error(f"Language mismatch. Please check your code and language selection.")
         else:
             with st.spinner("Running AI Workflow..."):
-                # Simulate workflow steps
                 steps = [
                     ("Explain", call_groq_api(f"Explain this {programming_language} code for a {skill_level} {user_role} in {explanation_language}:\n{code_input}")),
                     ("Refactor", call_blackbox_agent([
@@ -145,11 +135,9 @@ elif page == "AI Workflow":
                 for t in timeline:
                     st.subheader(t["step"])
                     st.write(t["output"])
-                # Show code diff (Original vs Refactored)
                 st.subheader("Code Diff (Original vs Refactored)")
-                refactored_code = steps[1][1]  # Blackbox agent output
+                refactored_code = steps[1][1]
                 st.code(get_inline_diff(code_input, refactored_code), language=programming_language.lower())
-                # Download report
                 report = f"AI Workflow Report\nGenerated on: {datetime.datetime.now()}\nLanguage: {programming_language}\nSkill Level: {skill_level}\nRole: {user_role}\n\n"
                 for t in timeline:
                     report += f"## {t['step']}\n{t['output']}\n\n---\n\n"
@@ -175,72 +163,99 @@ elif page == "Semantic Search":
     st.caption("Example questions:")
     st.write(", ".join(EXAMPLE_QUESTIONS))
 
-    # Session state for question and trigger
     if 'voice_question' not in st.session_state:
         st.session_state['voice_question'] = ''
     if 'run_semantic_search' not in st.session_state:
         st.session_state['run_semantic_search'] = False
 
-    # Voice input widget (Web Speech API)
-    components.html('''
-    <button id="voice-btn" style="margin-bottom:8px;">🎤 Speak your question</button>
-    <span id="voice-status" style="margin-left:8px;"></span>
+    # Custom input with mic button (HTML/JS)
+    question_html = """
+    <style>
+    .input-mic-container {
+        position: relative;
+        width: 100%;
+        max-width: 500px;
+    }
+    .input-mic {
+        width: 100%;
+        padding-right: 40px;
+        height: 38px;
+        font-size: 16px;
+        box-sizing: border-box;
+    }
+    .mic-btn {
+        position: absolute;
+        right: 5px;
+        top: 4px;
+        border: none;
+        background: none;
+        font-size: 22px;
+        cursor: pointer;
+        outline: none;
+    }
+    </style>
+    <div class="input-mic-container">
+        <input id="questionInput" class="input-mic" type="text" placeholder="Ask a question about your code" value="{value}" />
+        <button class="mic-btn" id="micBtn" title="Speak your question">🎤</button>
+    </div>
     <script>
-    const btn = document.getElementById('voice-btn');
-    const status = document.getElementById('voice-status');
+    const input = document.getElementById('questionInput');
+    const micBtn = document.getElementById('micBtn');
     let recognition;
     if ('webkitSpeechRecognition' in window) {
         recognition = new webkitSpeechRecognition();
         recognition.lang = 'en-US';
         recognition.continuous = false;
         recognition.interimResults = false;
-        btn.onclick = function() {
+        micBtn.onclick = function(e) {
+            e.preventDefault();
             recognition.start();
-            status.textContent = 'Listening...';
+            micBtn.textContent = '🎙️';
         };
         recognition.onresult = function(event) {
             const transcript = event.results[0][0].transcript;
+            input.value = transcript;
             window.parent.postMessage({isStreamlitMessage: true, type: 'streamlit:setComponentValue', value: transcript}, '*');
-            status.textContent = 'Heard: ' + transcript;
+            micBtn.textContent = '🎤';
         };
         recognition.onerror = function() {
-            status.textContent = 'Voice error';
+            micBtn.textContent = '🎤';
         };
         recognition.onend = function() {
-            if (status.textContent === 'Listening...') status.textContent = '';
+            micBtn.textContent = '🎤';
         };
     } else {
-        btn.disabled = true;
-        status.textContent = 'Voice not supported';
+        micBtn.disabled = true;
+        micBtn.title = 'Voice not supported';
+    }
+    // Send value on input change
+    input.onchange = function() {
+        window.parent.postMessage({isStreamlitMessage: true, type: 'streamlit:setComponentValue', value: input.value}, '*');
     }
     </script>
-    ''', height=60)
+    """.replace("{value}", st.session_state.get('voice_question', ''))
 
-    # --- Main question input ---
-    question = st.text_input("Ask a question about your code", value=st.session_state.get('voice_question', ''), key="sem_question")
+    # Render the custom input+mic
+    question_value = components.html(question_html, height=60)
 
-    # If voice input is received, validate and set question
-    # NOTE: Streamlit's JS->Python communication for custom components is limited.
-    # For a production app, use a robust Streamlit component for voice input.
-    # Here, we simulate the process using session_state for demonstration.
-    # You may need to use streamlit_js_eval or a similar package for real-time JS->Python value passing.
+    # Fallback for Streamlit's JS->Python communication
+    # For demo, use a text_input to allow manual typing as well
+    question = st.text_input("Ask a question about your code", value=st.session_state.get('voice_question', ''), key="sem_question")
 
-    # Simulate voice input: check if the question was updated by voice
-    if st.session_state.get('voice_question', '') and not st.session_state.get('run_semantic_search', False):
-        voice_input = st.session_state['voice_question']
-        if is_coding_question(voice_input):
+    # If the value is updated, validate and set
+    if question and question != st.session_state.get('voice_question', ''):
+        if is_coding_question(question):
+            st.session_state['voice_question'] = question
             st.session_state['run_semantic_search'] = True
-            st.success(f"Question recognized: {voice_input}")
+            st.success(f"Question recognized: {question}")
         else:
             st.warning("Please ask a relevant question.")
-            st.session_state['voice_question'] = ''  # reset
+            st.session_state['voice_question'] = ''
 
-    # Run Semantic Search button
     run_btn = st.button("Run Semantic Search")
-    # If triggered by voice or button
     run_search = run_btn or st.session_state.get('run_semantic_search', False)
     if run_search:
-        st.session_state['run_semantic_search'] = False  # reset trigger
+        st.session_state['run_semantic_search'] = False
         if not code_input.strip() or not question.strip():
             st.error("Both code and question are required.")
         elif not code_matches_language(code_input, programming_language):