Update app.py

app.py

@@ -17,47 +17,57 @@ def chat(user_input, chat_history):
     except Exception as e:
         return f"Error: {e}", chat_history
 
-# Create Gradio interface with custom dark theme
+# Create Gradio interface with vertical alignment and background color
 with gr.Blocks(css="""
     body {
         background-color: #121212;
         color: #f1f1f1;
         font-family: Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
     }
-    #chatbox {
-        height: 400px;
-        overflow-y: auto;
-        border: 2px solid #444;
-        padding: 15px;
-        border-radius: 8px;
-        background-color: #2a2a2a;
-        color: #f1f1f1;
+    .gradio-container {
+        width: 100%;
+        max-width: 600px;
+        background-color: #1e1e1e;
+        padding: 20px;
+        border-radius: 10px;
     }
-    .textbox, .button {
+    .gradio-container .textbox, .gradio-container .button {
         background-color: #333;
         color: #f1f1f1;
         border: 1px solid #444;
+        border-radius: 8px;
     }
-    .textbox:focus, .button:focus {
+    .gradio-container .textbox:focus, .gradio-container .button:focus {
         border-color: #007bff;
     }
-    .button {
-        padding: 10px;
-        border-radius: 6px;
-    }
-    .button:hover {
+    .gradio-container .button:hover {
         background-color: #007bff;
         cursor: pointer;
     }
-    .gradio-container {
-        max-width: 800px;
-        margin: 0 auto;
+    .textbox {
+        margin-bottom: 15px;
+    }
+    #chatbox {
+        height: 400px;
+        overflow-y: auto;
+        border: 2px solid #444;
+        padding: 15px;
+        border-radius: 8px;
+        background-color: #2a2a2a;
+        color: #f1f1f1;
+        margin-bottom: 20px;
     }
 """) as demo:
     gr.Markdown("## 🤖 Professional Groq Chatbot")
     gr.Markdown("Type your message below to chat with the AI!")
 
-    with gr.Row():
+    # Define layout with vertical alignment
+    with gr.Column():
         user_input = gr.Textbox(
             label="Your Message",
             placeholder="Ask me anything!",
@@ -67,13 +77,13 @@ with gr.Blocks(css="""
         submit_button = gr.Button("Send")
         clear_button = gr.Button("Clear Chat")
 
-    chatbot_output = gr.Textbox(
-        label="Chat History",
-        placeholder="AI's responses will appear here.",
-        lines=15,
-        interactive=False,
-        elem_id="chatbox",
-    )
+        chatbot_output = gr.Textbox(
+            label="Chat History",
+            placeholder="AI's responses will appear here.",
+            lines=15,
+            interactive=False,
+            elem_id="chatbox",
+        )
 
     # State to hold chat history
     chat_history = gr.State([])