Update app.py

app.py

@@ -28,10 +28,17 @@ def respond(message, history, system_message, max_tokens, temperature, top_p):
         yield response
 
 # Enhanced UI with ChatGPT-like design
-with gr.Blocks(theme=gr.themes.Default()) as demo:
+with gr.Blocks(css="""
+    body {background-color: #212121; color: #EAEAEA; font-family: Arial, sans-serif;}
+    .chat-container { max-width: 800px; margin: auto; padding: 20px; }
+    .chat-message { border-radius: 10px; padding: 10px 15px; margin: 5px 0; max-width: 80%; }
+    .user-message { background: #007AFF; color: white; align-self: flex-end; }
+    .bot-message { background: #333333; color: white; align-self: flex-start; }
+    .gradio-container { max-width: 900px; margin: auto; }
+""") as demo:
     gr.Markdown("""
-    <h1 style='text-align: center;'>💬 AI Chat Assistant</h1>
-    <p style='text-align: center;'>A sleek and interactive chatbot experience powered by AI.</p>
+    <h1 style='text-align: center; color: #FFFFFF;'>💬 AI Chat Assistant</h1>
+    <p style='text-align: center;'>An interactive chatbot experience with a modern UI.</p>
     """)
     
     with gr.Row():
@@ -40,7 +47,6 @@ with gr.Blocks(theme=gr.themes.Default()) as demo:
             label="System Message",
             interactive=True,
             show_label=False,
-            elem_id="system-message",
         )
     
     with gr.Row():
@@ -54,30 +60,11 @@ with gr.Blocks(theme=gr.themes.Default()) as demo:
             minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p"
         )
     
-    with gr.Box():
-        chatbot = gr.ChatInterface(
-            respond,
-            additional_inputs=[system_message, max_tokens, temperature, top_p],
-            bubble_colors=("#007AFF", "#E5E5EA"),
-            show_copy_button=True,
-            elem_id="chat-container"
-        )
-    
-    gr.Markdown("""
-    <style>
-        #chat-container { 
-            max-width: 800px; 
-            margin: auto; 
-            border-radius: 10px; 
-            background: #f7f7f8; 
-            padding: 20px; 
-        }
-        
-        #system-message input {
-            font-size: 16px;
-            border-radius: 8px;
-        }
-    </style>
-    """)
+    chatbot = gr.ChatInterface(
+        respond,
+        additional_inputs=[system_message, max_tokens, temperature, top_p],
+        bubble_colors=("#007AFF", "#444444"),
+        show_copy_button=True,
+    )
 
 demo.launch()