Update app.py

app.py

@@ -2,28 +2,31 @@ import os
 import gradio as gr
 from groq import Groq
 
-# -------- API Setup --------
+# Read API key from environment (Hugging Face Spaces secret)
 api_key = os.environ.get("GROQ_API")
+
 if not api_key:
     raise ValueError("No Groq API key found. Please add it as a secret.")
 
+# Initialize Groq client
 client = Groq(api_key=api_key)
-MODEL_NAME = "openai/gpt-oss-safeguard-20b"
 
+MODEL_NAME = "openai/gpt-oss-safeguard-20b"
 
-# -------- Chat Function --------
 def chat_groq(message, history):
     try:
         system_prompt = "You are a helpful AI assistant."
         messages = [{"role": "system", "content": system_prompt}]
 
+        # Handle history safely
         for turn in history:
-            if isinstance(turn, (list, tuple)) and len(turn) == 2:
+            if isinstance(turn, list) and len(turn) == 2:
                 user_msg, bot_msg = turn
                 messages.append({"role": "user", "content": user_msg})
                 if bot_msg:
                     messages.append({"role": "assistant", "content": bot_msg})
 
+        # Add latest user message
         messages.append({"role": "user", "content": message})
 
         completion = client.chat.completions.create(
@@ -33,69 +36,33 @@ def chat_groq(message, history):
             temperature=0.7
         )
 
-        return completion.choices[0].message.content
+        reply = completion.choices[0].message.content
+        return reply
 
     except Exception as e:
         return f"Error: {e}"
 
 
-# -------- CSS Dark Theme --------
-custom_css = """
-body {
-    background-color: #0f172a;
-    color: #e5e7eb;
-}
-.gradio-container {
-    background-color: #020617 !important;
-}
-textarea, input {
-    background-color: #020617 !important;
-    color: #e5e7eb !important;
-    border: 1px solid #1e293b !important;
-}
-.message.user {
-    background-color: #1e293b !important;
-}
-.message.bot {
-    background-color: #020617 !important;
-}
-.logo-title {
-    display: flex;
-    align-items: center;
-}
-.logo-title img {
-    height: 50px;
-    margin-right: 15px;
-}
-.logo-title h1 {
-    font-size: 28px;
-    color: #e5e7eb;
-    margin: 0;
-}
-"""
-
-# -------- UI --------
-with gr.Blocks(css=custom_css, title="Affan's GenAI App (Groq)") as demo:
-    
-    # Logo + Title
-    logo_url = "https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"  # Replace with your logo
-    gr.HTML(f"""
-    <div class="logo-title">
-        <img src="{logo_url}" alt="Logo">
-        <h1>Affan's GenAI App</h1>
-    </div>
-    """)
-
-with gr.Blocks(title="Affan's GenAI App (Groq)") as demo:
-    # Inject CSS manually
-    gr.HTML(f"<style>{custom_css}</style>")
-    
-    gr.ChatInterface(
-        fn=chat_groq,
-        title="Chat"
+# 🎨 Define a custom theme
+custom_theme = gr.themes.Base(
+    primary_hue="blue",
+    secondary_hue="violet",
+    neutral_hue="slate",
+    font=["Source Sans Pro", "Arial", "sans-serif"],
+).set(
+    body_background_fill="#0f172a",   # dark navy background
+    body_text_color="#f1f5f9",        # light text
+    button_primary_background_fill="#6366f1",  # indigo buttons
+    button_primary_text_color="#ffffff",
+    input_background_fill="#1e293b",  # dark input box
+    input_border_color="#6366f1",
 )
 
-demo.launch()
-
+# Apply theme to ChatInterface
+ui = gr.ChatInterface(
+    fn=chat_groq,
+    title="Affan ChatBot",
+    theme=custom_theme
+)
 
-demo.launch()
+ui.launch()