Update app.py

app.py

@@ -27,8 +27,8 @@ def call_api(message, model, preset):
     except Exception as e:
         return f"Error: {str(e)}"
 
-# Custom CSS for clean UI
-css = """
+# Custom CSS for light mode
+light_css = """
 .gradio-container {
     background-color: #f9f9f9;
     font-family: 'Arial', sans-serif;
@@ -65,10 +65,10 @@ css = """
     border: none;
     background: none;
     cursor: pointer;
-    padding: 5px;              /* Reduced padding for a smaller button */
-    font-size: 12px;           /* Smaller font size */
-    width: 30px;               /* Set a specific width */
-    height: 30px;              /* Set a specific height */
+    padding: 2px;              /* Reduced padding for a smaller button */
+    font-size: 10px;           /* Smaller font size */
+    width: 20px;               /* Set a specific width */
+    height: 20px;              /* Set a specific height */
     color: #007BFF;            /* Text color */
     transition: opacity 0.3s;  /* Smooth transition for hover effect */
 }
@@ -82,9 +82,36 @@ css = """
 }
 """
 
+# Dark mode CSS
+dark_css = """
+.dark-mode .gradio-container {
+    background-color: #1e1e1e; /* Dark background */
+    color: white;              /* Light text color */
+}
+
+.dark-mode #chatbox {
+    background-color: #2e2e2e; /* Dark chatbox */
+    color: white;              /* Light text color */
+}
+
+.dark-mode #input-container {
+    background-color: #2e2e2e; /* Dark input container */
+    border: 1px solid #444;    /* Dark border */
+}
+
+.dark-mode #message-input {
+    background-color: #3e3e3e; /* Dark input field */
+    color: white;              /* Light text color */
+}
+
+.dark-mode #send-button {
+    color: #007BFF;            /* Button text color */
+}
+"""
+
 # Create Gradio interface
 def create_interface():
-    with gr.Blocks(css=css) as demo:
+    with gr.Blocks() as demo:
         gr.Markdown("## 💬 Chatbot")
 
         # Chat display area
@@ -104,6 +131,9 @@ def create_interface():
         # Button click event
         send_btn.click(call_api, inputs=[message, model, preset], outputs=chatbox)
 
+        # Toggle dark mode
+        dark_mode.change(lambda x: demo.css = dark_css if x else light_css, inputs=[dark_mode])
+
     return demo
 
 # Launch the interface