Update app.py

app.py

@@ -2,21 +2,28 @@ import os
 import gradio as gr
 from groq import Groq
 
-# Load API key from Hugging Face secrets
+# ---------------------------
+# Load API Key from Hugging Face Secrets
+# ---------------------------
 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.")
 
 client = Groq(api_key=GROQ_API_KEY)
 
+# ---------------------------
 # Chat function
+# ---------------------------
 def chat_with_groq(message, history):
+    # Filter out None or empty messages for Groq
     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)})
+
+    # Add current user message
     messages.append({"role": "user", "content": str(message)})
 
     try:
@@ -25,17 +32,21 @@ def chat_with_groq(message, history):
             messages=messages,
         )
         reply = response.choices[0].message.content
+        # Append to history as tuple
         history.append((message, reply))
         return "", history
     except Exception as e:
         history.append((message, f"Error: {str(e)}"))
         return "", history
 
-# CSS for Gen-Z look
+# ---------------------------
+# Gen-Z CSS
+# ---------------------------
 custom_css = """
 body {
     background: linear-gradient(135deg, #667eea, #764ba2, #ff6ec4);
 }
+
 #chatbox {
     backdrop-filter: blur(20px);
     background: rgba(255, 255, 255, 0.12);
@@ -43,6 +54,7 @@ body {
     padding: 15px;
     box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3);
 }
+
 button {
     background: linear-gradient(90deg, #ff6ec4, #7873f5);
     color: white;
@@ -50,19 +62,29 @@ button {
     border: none;
     font-weight: bold;
 }
+
 button:hover {
     opacity: 0.85;
 }
 """
 
-# Gradio UI for Gradio 6+
+# ---------------------------
+# Gradio UI
+# ---------------------------
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("<h1 style='text-align:center;color:white;'>🤖 Groq Gen-Z Chatbot</h1>")
+    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>"
+    )
+
     chatbot = gr.Chatbot(elem_id="chatbox", height=450)
     msg = gr.Textbox(placeholder="Type something cool...")
     clear = gr.Button("✨ Clear Chat")
 
+    # Submit user message
     msg.submit(chat_with_groq, [msg, chatbot], [msg, chatbot])
+
+    # Clear chat
     clear.click(lambda: ([], ""), None, [chatbot, msg], queue=False)
 
 demo.launch(theme=gr.themes.Soft(), css=custom_css)