Update app.py

app.py

@@ -7,81 +7,101 @@ from groq import Groq
 # ---------------------------
 GROQ_API_KEY = os.environ.get("GROQ_API_KEY")
 if not GROQ_API_KEY:
-    raise ValueError("GROQ_API_KEY not found. Add it in Space Settings → Variables.")
+    raise ValueError("GROQ_API_KEY not found. Add it in Space Settings → Secrets.")
 
 client = Groq(api_key=GROQ_API_KEY)
+print("Groq Client Ready 🚀")   # This will appear in the HF Space logs
 
 # ---------------------------
-# Chat function with proper validation
+# Core chat function (identical to Colab version)
 # ---------------------------
 def chat_with_groq(message, history):
-    # 1. Ignore empty messages
-    if not message or not message.strip():
-        return "", history  # do nothing
-
-    # 2. Build message list from history (skip None/empty entries)
-    messages = []
-    for user_msg, bot_msg in history:
-        if user_msg:
-            messages.append({"role": "user", "content": str(user_msg)})
-        if bot_msg:
-            messages.append({"role": "assistant", "content": str(bot_msg)})
+    try:
+        # Convert Gradio history into Groq message format
+        messages = []
+        for human, assistant in history:
+            messages.append({"role": "user", "content": human})
+            messages.append({"role": "assistant", "content": assistant})
+        messages.append({"role": "user", "content": message})
 
-    # 3. Add current user message (already non‑empty)
-    messages.append({"role": "user", "content": message.strip()})
+        # 👇 Debug: print the exact message list (check logs!)
+        print("Sending messages to Groq:", messages)
 
-    try:
-        # 4. Use a valid Groq model
-        response = client.chat.completions.create(
-            model="mixtral-8x7b-32768",  # ✅ change to a valid model
+        # Call Groq API with the same model that works in Colab
+        chat_completion = client.chat.completions.create(
             messages=messages,
+            model="openai/gpt-oss-120b",   # keep the working model
         )
-        reply = response.choices[0].message.content
-        history.append((message, reply))
-        return "", history
+
+        reply = chat_completion.choices[0].message.content
+        return reply
     except Exception as e:
-        # 5. Show the full error for debugging
-        error_msg = f"❌ Error: {str(e)}"
-        history.append((message, error_msg))
-        return "", history
+        print("Groq API error:", str(e))   # 👈 also print error
+        return f"Error: {str(e)}"
 
 # ---------------------------
-# (Your existing CSS and UI remain the same)
+# Gradio UI (mirrors Colab pattern)
 # ---------------------------
 custom_css = """
 body {
     background: linear-gradient(135deg, #667eea, #764ba2, #ff6ec4);
+    font-family: 'Poppins', sans-serif;
+}
+.gradio-container {
+    background: transparent !important;
 }
 #chatbox {
     backdrop-filter: blur(20px);
-    background: rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 15px;
     box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3);
 }
+textarea {
+    border-radius: 15px !important;
+}
 button {
-    background: linear-gradient(90deg, #ff6ec4, #7873f5);
-    color: white;
-    border-radius: 12px;
-    border: none;
-    font-weight: bold;
+    background: linear-gradient(90deg, #ff6ec4, #7873f5) !important;
+    color: white !important;
+    border-radius: 12px !important;
+    font-weight: bold !important;
+    border: none !important;
 }
 button:hover {
-    opacity: 0.85;
+    opacity: 0.85 !important;
 }
 """
 
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     gr.Markdown(
-        "<h1 style='text-align:center;color:white;'>🤖 Groq Gen-Z Chatbot</h1>"
-        "<p style='text-align:center;color:white;'>Fast. Smart. Stylish. ⚡</p>"
+        """
+        <h1 style='text-align: center; color: white;'>
+        🤖 Groq Gen-Z Chatbot
+        </h1>
+        <p style='text-align: center; color: white; font-size: 18px;'>
+        Fast. Smart. Stylish. ⚡
+        </p>
+        """
     )
 
-    chatbot = gr.Chatbot(elem_id="chatbox", height=450)
-    msg = gr.Textbox(placeholder="Type something cool...")
+    chatbot = gr.Chatbot(elem_id="chatbox", height=450, bubble_full_width=False)
+    msg = gr.Textbox(placeholder="Type something cool...", scale=8)
     clear = gr.Button("✨ Clear Chat")
 
-    msg.submit(chat_with_groq, [msg, chatbot], [msg, chatbot])
-    clear.click(lambda: ([], ""), None, [chatbot, msg], queue=False)
+    # Two-step interaction exactly as in Colab
+    def user_message(message, history):
+        return "", history + [[message, None]]
+
+    def bot_response(history):
+        user_msg = history[-1][0]
+        reply = chat_with_groq(user_msg, history[:-1])
+        history[-1][1] = reply
+        return history
+
+    msg.submit(user_message, [msg, chatbot], [msg, chatbot]).then(
+        bot_response, chatbot, chatbot
+    )
+
+    clear.click(lambda: [], None, chatbot, queue=False)
 
-demo.launch(theme=gr.themes.Soft(), css=custom_css)
+demo.launch()