Update app.py

app.py

@@ -3,7 +3,7 @@ import gradio as gr
 from groq import Groq
 
 # =====================================================
-# Groq Client Initialization
+# Groq Client Initialization (GLOBAL)
 # =====================================================
 def get_groq_client():
     api_key = os.getenv("GROQ_API_KEY")
@@ -51,22 +51,18 @@ def chat_with_groq(user_message, history):
 def clear_chat():
     return [], ""
 
-# =====================================================
-# SAFE CSS (Fixes Vertical Text Bug)
-# =====================================================
-custom_css = """
-/* RESET ONLY INSIDE CHATBOT */
+/* -------- RESET ONLY CHAT AREA -------- */
 .chatbot * {
   all: unset;
 }
 
-/* RESTORE MESSAGE STRUCTURE */
+/* -------- RESTORE DEFAULT BLOCKS -------- */
 .chatbot .message,
 .chatbot .message * {
   all: revert;
 }
 
-/* COLOR SYSTEM */
+/* -------- COLOR SYSTEM -------- */
 :root {
   --bg: #0b0f19;
   --surface: #111827;
@@ -89,7 +85,7 @@ body {
   font-family: system-ui, sans-serif;
 }
 
-/* CHAT WINDOW */
+/* -------- CHAT WINDOW -------- */
 .chatbot {
   background: var(--surface);
   border-radius: 16px;
@@ -100,7 +96,7 @@ body {
   overflow-y: auto;
 }
 
-/* MESSAGES */
+/* -------- MESSAGES -------- */
 .chatbot .message {
   display: block !important;
   max-width: 72%;
@@ -125,7 +121,7 @@ body {
   margin-right: auto;
 }
 
-/* INPUT */
+/* -------- INPUT -------- */
 textarea {
   background: var(--surface) !important;
   color: var(--text) !important;
@@ -135,7 +131,7 @@ textarea {
   font-size: 15px;
 }
 
-/* BUTTONS */
+/* -------- BUTTONS -------- */
 button {
   background: var(--user) !important;
   color: white !important;
@@ -144,7 +140,7 @@ button {
   font-weight: 600 !important;
 }
 
-/* REMOVE FLOATING ICONS */
+/* -------- REMOVE FLOATING ICONS -------- */
 .chatbot-toolbar,
 .chatbot-actions,
 button[aria-label="Copy"],
@@ -152,14 +148,16 @@ button[aria-label="Share"],
 button[aria-label="Clear"] {
   display: none !important;
 }
-"""
+
 
 # =====================================================
 # Gradio UI
 # =====================================================
 with gr.Blocks(title="GROQ AI CHATBOT") as demo:
     gr.Markdown("# 🤖 GROQ AI CHATBOT")
-    gr.Markdown("<div class='subtitle'>Fast, reliable AI powered by Groq</div>")
+    gr.Markdown(
+        "<div class='subtitle'>Fast, reliable AI powered by Groq & LLaMA-3.3</div>"
+    )
 
     chatbot = gr.Chatbot(elem_classes="chatbot")
     state = gr.State([])
@@ -178,8 +176,7 @@ with gr.Blocks(title="GROQ AI CHATBOT") as demo:
     clear.click(clear_chat, outputs=[chatbot, txt], show_progress=False)
 
 # =====================================================
-# Launch
+# Launch (Gradio 6)
 # =====================================================
 if __name__ == "__main__":
     demo.launch(css=custom_css)
-