Update app.py

app.py

@@ -3,122 +3,121 @@ import gradio as gr
 from groq import Groq
 
 # 1. Setup API Client
+# Ensure GROQ_API_KEY is set in your Space Settings > Secrets
 api_key = os.environ.get("GROQ_API_KEY")
 client = Groq(api_key=api_key)
 
-# 2. UI Styling for Sidebar Layout
+# 2. Responsive UI Styling
 custom_css = """
-.gradio-container { max-width: 1200px; margin: auto; }
-#chatbot-window { height: 500px !important; border-radius: 12px; border: 1px solid #e0e0e0; }
-.sidebar-column { 
-    background-color: rgba(128, 128, 128, 0.05); 
-    padding: 20px !important; 
-    border-radius: 12px;
-    min-height: 500px;
-}
-.linkedin-icon:hover { transform: scale(1.1); transition: transform 0.3s ease; }
-.sidebar-footer { 
-    margin-top: 30px; 
-    text-align: center; 
-    border-top: 1px solid #ddd; 
-    padding-top: 20px; 
+.gradio-container { max-height: 100vh !important; overflow: hidden !important; }
+#chatbot-window { 
+     height: 50vh !important; 
+     border-radius: 12px; 
+     border: 1px solid #e0e0e0; 
+     background: white; 
 }
 """
 
 # 3. Secure Chat Logic
 def chat_with_groq(message, history, model, temperature, system_prompt):
+    """
+    Cleans history to remove Gradio-specific metadata that causes 400 errors.
+    """
+    # Initialize with System Prompt
     cleaned_messages = [{"role": "system", "content": system_prompt}]
+        
+    # Scrub history for clean role/content pairs
     for msg in history:
-        cleaned_messages.append({"role": msg["role"], "content": msg["content"]})
+        cleaned_messages.append({
+            "role": msg["role"],
+            "content": msg["content"]
+        })
+        
+    # Add current user prompt
     cleaned_messages.append({"role": "user", "content": message})
-
+    
     try:
+        # High-speed inference via Groq
         response = client.chat.completions.create(
             model=model, 
             messages=cleaned_messages, 
             temperature=temperature, 
             stream=True
         )
+                
         partial_message = ""
         for chunk in response:
             if chunk.choices[0].delta.content:
                 partial_message += chunk.choices[0].delta.content
                 yield partial_message
+                    
     except Exception as e:
         yield f"⚠️ API Error: {str(e)}"
 
-# 4. Define Event Functions
-def user_turn(msg, hist):
-    if not msg:
-        return "", hist
-    hist.append({"role": "user", "content": msg})
-    return "", hist
-
-def bot_turn(hist, m, t, s):
-    if not hist or hist[-1]["role"] != "user":
-        return hist
-    user_msg = hist[-1]["content"]
-    gen = chat_with_groq(user_msg, hist[:-1], m, t, s)
-    hist.append({"role": "assistant", "content": ""})
-    for chunk in gen:
-        hist[-1]["content"] = chunk
-        yield hist
-
-# 5. Build the Interface
+# 4. Build the Interface
 with gr.Blocks() as demo:
     gr.Markdown("# ⚡ Groq Professional Studio")
-    
+    gr.Markdown("Everything is running smoothly on my end. Please let me know if you encounter any errors!")
+        
     with gr.Row():
-        # LEFT COLUMN: Main Chat Interface
+        # Main Interaction Area
         with gr.Column(scale=4):
-            chatbot = gr.Chatbot(elem_id="chatbot-window", height=500) 
+            chatbot = gr.Chatbot(elem_id="chatbot-window") 
             with gr.Row():
-                msg_input = gr.Textbox(placeholder="Ask me anything...", container=False, scale=9)
+                msg_input = gr.Textbox(
+                    placeholder="Ask me anything...", 
+                    container=False, 
+                    scale=9
+                )
                 submit_btn = gr.Button("Send", variant="primary", scale=1)
         
-        # RIGHT COLUMN: The Sidebar (All Settings & Support moved here)
-        with gr.Column(scale=1, elem_classes="sidebar-column"):
+        # Settings Sidebar
+        with gr.Column(scale=1):
             gr.Markdown("### ⚙️ Settings")
-            
             model_choice = gr.Dropdown(
                 choices=["llama-3.3-70b-versatile", "llama-3.1-8b-instant"],
                 value="llama-3.3-70b-versatile", 
                 label="Select Model"
             )
-            
             temp = gr.Slider(0.0, 1.0, 0.7, label="Temperature")
-            
             sys_msg = gr.Textbox(
                 value="You are a professional assistant.", 
                 label="System Prompt", 
-                lines=4
+                lines=3
             )
-            
-            # Moved from below input bar to here
-            clear = gr.Button("Clear Chat", variant="secondary")
+            clear = gr.Button("Clear Chat", variant="stop")
 
-            # LinkedIn Support correctly placed at the bottom of the sidebar
-            gr.HTML("""
-                <div class="sidebar-footer">
-                    <p style="font-size: 0.9em; margin-bottom: 12px; color: #555;"><b>Developer Support</b></p>
-                    <a href="https://www.linkedin.com/in/YOUR_LINKEDIN_USERNAME" target="_blank" style="text-decoration: none;">
-                        <svg class="linkedin-icon" xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24" fill="#0077b5">
-                            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
-                        </svg>
-                    </a>
-                    <p style="font-size: 0.8em; color: #777; margin-top: 10px;">Hassan Naseer<br>NUTECH BSCS-24</p>
-                </div>
-            """)
+    # --- UI Event Flow ---
+    def user_turn(msg, hist):
+        # Update UI state with user message
+        hist.append({"role": "user", "content": msg})
+        return "", hist
+
+    def bot_turn(hist, m, t, s):
+        # Get response for the last user message
+        user_msg = hist[-1]["content"]
+        gen = chat_with_groq(user_msg, hist[:-1], m, t, s)
+                
+        hist.append({"role": "assistant", "content": ""})
+        for chunk in gen:
+            hist[-1]["content"] = chunk
+            yield hist
 
-    # --- Event Handling ---
+    # Link Input Actions
     msg_input.submit(user_turn, [msg_input, chatbot], [msg_input, chatbot], queue=False).then(
         bot_turn, [chatbot, model_choice, temp, sys_msg], chatbot
     )
     submit_btn.click(user_turn, [msg_input, chatbot], [msg_input, chatbot], queue=False).then(
         bot_turn, [chatbot, model_choice, temp, sys_msg], chatbot
     )
+        
+    # Clear Workspace
     clear.click(lambda: [], None, chatbot, queue=False)
 
+# 5. Production Launch
 if __name__ == "__main__":
     # Settings moved to launch() for Gradio 6 compatibility
-    demo.launch(theme=gr.themes.Soft(primary_hue="blue"), css=custom_css)
+    demo.launch(
+        theme=gr.themes.Soft(primary_hue="blue"), 
+        css=custom_css
+    )