Update app.py

app.py

@@ -40,9 +40,67 @@ def respond(
         yield response
 
 
+# Define custom CSS for Flat Design
+flat_design_css = """
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Helvetica', sans-serif;
+}
+
+.gradio-container {
+    background-color: #f4f4f9;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+.gradio-button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.gradio-button:hover {
+    background-color: #45a049;
+}
+
+.gradio-slider {
+    background-color: #e1e1e1;
+    border-radius: 8px;
+}
+
+.gradio-textbox {
+    background-color: #ffffff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    font-size: 14px;
+    width: 100%;
+    transition: border-color 0.3s ease;
+}
+
+.gradio-textbox:focus {
+    border-color: #4CAF50;
+}
+
+.gradio-label {
+    font-size: 14px;
+    font-weight: bold;
+    color: #333;
+}
+
+.gradio-interface .gradio-input-container {
+    margin-bottom: 20px;
+}
 """
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
+
+# Launch the Gradio app with custom CSS
 demo = gr.ChatInterface(
     respond,
     additional_inputs=[
@@ -57,6 +115,7 @@ demo = gr.ChatInterface(
             label="Top-p (nucleus sampling)",
         ),
     ],
+    css=flat_design_css,  # Applying the custom CSS
 )