Update app.py

app.py

@@ -43,24 +43,49 @@ def respond(
 # CSS for styling the interface
 css = """
 body {
-    background-color: #06688E; /* Dark background */
-    color: white; /* Text color for better visibility */
+    background-color: #1e2a38; /* Dark blue background */
+    color: #ffffff; /* White text for readability */
+    font-family: 'Arial', sans-serif; /* Clean and modern font */
 }
-
 .gr-button {
-    background-color: #42B3CE !important; /* White button color */
-    color: black !important; /* Black text for contrast */
+    background-color: #42B3CE !important; /* Light blue button */
+    color: #2e3b4e !important; /* Dark text for contrast */
     border: none !important;
-    padding: 8px 16px !important;
-    border-radius: 5px !important;
+    padding: 10px 20px !important;
+    border-radius: 8px !important;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background-color 0.3s ease, transform 0.2s ease;
 }
-
 .gr-button:hover {
-    background-color: #e0e0e0 !important; /* Slightly lighter button on hover */
+    background-color: #3189A2 !important; /* Darker blue on hover */
+    transform: scale(1.05);
+}
+.gr-button:active {
+    background-color: #267b88 !important; /* Even darker when clicked */
 }
-
 .gr-slider-container {
-    color: white !important; /* Slider labels in white */
+    color: white !important; /* White slider labels */
+    font-size: 14px;
+}
+.gr-slider {
+    background-color: #0b2545 !important; /* Slider track color */
+    border-radius: 8px;
+}
+.gr-slider .gr-slider-active {
+    background-color: #42B3CE !important; /* Active slider color */
+}
+.gr-textbox input {
+    background-color: #2f3b4d;
+    color: white;
+    border: 2px solid #42B3CE;
+    padding: 12px;
+    border-radius: 8px;
+    font-size: 16px;
+    transition: border 0.3s ease;
+}
+.gr-textbox input:focus {
+    border-color: #3189A2;
 }
 """
 
@@ -78,7 +103,7 @@ demo = gr.ChatInterface(
             maximum=1.0,
             value=0.95,
             step=0.05,
-            label="Top-p (nucleus sampling)",visible=False
+            label="Top-p (nucleus sampling)", visible=False
         ),
     ],
     css=css,  # Pass the custom CSS here