Update app.py

app.py

@@ -40,39 +40,42 @@ def respond(
         yield response
 
 
-# Define custom CSS for Flat Design with white background
-flat_design_css = """
+# Define custom CSS for Metro Design with a white background and red accents
+metro_design_css = """
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Helvetica', sans-serif;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .gradio-container {
     background-color: #ffffff; /* White background */
     padding: 20px;
     border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
 }
 
 .gradio-button {
-    background-color: #e53935; /* Red color */
+    background-color: #D32F2F; /* Metro red color */
     color: white;
     border: none;
     border-radius: 5px;
-    padding: 10px 20px;
+    padding: 12px 25px;
     font-size: 16px;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 
 .gradio-button:hover {
-    background-color: #d32f2f; /* Darker red */
+    background-color: #C62828; /* Darker red */
 }
 
 .gradio-slider {
-    background-color: #e1e1e1;
+    background-color: #f1f1f1;
     border-radius: 8px;
+    border: 1px solid #ddd;
+    padding: 10px;
 }
 
 .gradio-textbox {
@@ -86,7 +89,7 @@ flat_design_css = """
 }
 
 .gradio-textbox:focus {
-    border-color: #e53935; /* Red color */
+    border-color: #D32F2F; /* Red color */
 }
 
 .gradio-label {
@@ -101,6 +104,25 @@ flat_design_css = """
 
 .gradio-chat {
     background-color: #ffffff; /* White background for chat messages */
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 15px;
+}
+
+.gradio-chat .gradio-message {
+    background-color: #f1f1f1; /* Light gray for chat messages */
+    border-radius: 8px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.gradio-chat .gradio-user-message {
+    background-color: #D32F2F; /* Red color for user messages */
+    color: white;
+}
+
+.gradio-chat .gradio-assistant-message {
+    background-color: #eeeeee; /* Lighter color for assistant's messages */
 }
 """
 
@@ -119,7 +141,7 @@ demo = gr.ChatInterface(
             label="Top-p (nucleus sampling)",
         ),
     ],
-    css=flat_design_css,  # Applying the custom CSS
+    css=metro_design_css,  # Applying the custom CSS
 )