Update app.py

app.py

@@ -90,14 +90,32 @@ def reset_chat():
     
 # Gradio UI
 with gr.Blocks(css="""
-    body { background-color: #2D336B; }
+    body { background-color: #A9B5DF; }
     .gradio-container { background-color: #A9B5DF; }
-    
 
     #chat-container {
         height: 50vh !important;  
         max-height: 50vh !important;
     }
+
+    .gradio-button {
+        background-color: #7886C7 !important;
+        color: white !important;
+        border: none !important;
+        padding: 10px 15px !important;
+        font-size: 16px !important;
+        font-weight: bold !important;
+        border-radius: 5px !important;
+        cursor: pointer !important;
+    }
+
+    .gradio-button:hover {
+        background-color: #5f6bb4 !important;
+    }
+
+    .chat-text {
+        font-size: 16px !important;
+    }
 """) as demo:
     gr.Markdown("""
     # 🌍 ***FlightAI - Your Travel Assistant / Votre Assistant de Voyage*** ✈️
@@ -109,9 +127,8 @@ with gr.Blocks(css="""
     
     chatbot = gr.Chatbot(value=[("", translations["en"]["welcome"])], elem_id="chat-container")
 
-
     state = gr.State([])  # Store conversation history
-    
+
     with gr.Row():
         btn1 = gr.Button("Trip recommendations / Recommendations de Voyage", elem_classes=["gradio-button"])
         btn2 = gr.Button("Send me somewhere! / Envoyez-moi quelque part!", elem_classes=["gradio-button"])
@@ -123,7 +140,32 @@ with gr.Blocks(css="""
 
     with gr.Column(elem_classes=["centered"]):
         reset_button = gr.Button("Reset Chat")
-        
+
+    # Customization options
+    with gr.Row():
+        text_size_dropdown = gr.Dropdown(choices=["Small", "Medium", "Large"], label="Text Size", value="Medium")
+        button_color_picker = gr.ColorPicker(label="Button Color", value="#7886C7")
+
+    def update_styles(text_size, button_color):
+        """Dynamically update chat text size and button colors."""
+        text_sizes = {"Small": "12px", "Medium": "16px", "Large": "20px"}
+        return f"""
+        <style>
+            .chat-text {{ font-size: {text_sizes[text_size]} !important; }}
+            .gradio-button {{
+                background-color: {button_color} !important;
+            }}
+            .gradio-button:hover {{
+                background-color: {button_color[:-2]}AA !important;
+            }}
+        </style>
+        """
+
+    custom_styles = gr.HTML(update_styles("Medium", "#7886C7"))
+
+    text_size_dropdown.change(update_styles, inputs=[text_size_dropdown, button_color_picker], outputs=[custom_styles])
+    button_color_picker.change(update_styles, inputs=[text_size_dropdown, button_color_picker], outputs=[custom_styles])
+
     def submit_msg(message, history):
         if not message.strip():
             return chat_with_bot("", history)
@@ -135,8 +177,6 @@ with gr.Blocks(css="""
     
         return gr.update(value=updated_history), ""
 
-
-
     def button_click(btn_text, history):
         updated_history, _ = chat_with_bot(btn_text, history)
         return updated_history, ""