Update app.py

app.py

@@ -17,12 +17,12 @@ def chat(user_input, chat_history):
     except Exception as e:
         return f"Error: {e}", chat_history
 
-# Create Gradio interface with vertical alignment and background color
+# Create Gradio interface with professional design
 with gr.Blocks(css="""
     body {
         background-color: #121212;
         color: #f1f1f1;
-        font-family: Arial, sans-serif;
+        font-family: 'Roboto', sans-serif;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -31,16 +31,18 @@ with gr.Blocks(css="""
     }
     .gradio-container {
         width: 100%;
-        max-width: 600px;
+        max-width: 700px;
         background-color: #1e1e1e;
-        padding: 20px;
-        border-radius: 10px;
+        padding: 25px;
+        border-radius: 12px;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
     }
     .gradio-container .textbox, .gradio-container .button {
         background-color: #333;
         color: #f1f1f1;
         border: 1px solid #444;
         border-radius: 8px;
+        font-size: 16px;
     }
     .gradio-container .textbox:focus, .gradio-container .button:focus {
         border-color: #007bff;
@@ -61,9 +63,22 @@ with gr.Blocks(css="""
         background-color: #2a2a2a;
         color: #f1f1f1;
         margin-bottom: 20px;
+        font-size: 14px;
+        line-height: 1.5;
+    }
+    .button-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .clear-button {
+        background-color: #ff5c5c;
+    }
+    .clear-button:hover {
+        background-color: #e60000;
     }
 """) as demo:
-    gr.Markdown("## 🤖 Professional Groq Chatbot")
+    gr.Markdown("## 🤖 **Professional Groq Chatbot**")
     gr.Markdown("Type your message below to chat with the AI!")
 
     # Define layout with vertical alignment
@@ -75,7 +90,7 @@ with gr.Blocks(css="""
             interactive=True,
         )
         submit_button = gr.Button("Send")
-        clear_button = gr.Button("Clear Chat")
+        clear_button = gr.Button("Clear Chat", elem_classes=["clear-button"])
 
         chatbot_output = gr.Textbox(
             label="Chat History",