Update app.py

app.py

@@ -62,7 +62,7 @@ def chatbot(input_text, image, openai_api_key, reasoning_effort, model_choice, h
 def clear_history():
     return "", []
 
-# Custom CSS styles with animations
+# Custom CSS styles with animations and button colors
 custom_css = """
     /* General body styles */
     .gradio-container {
@@ -111,8 +111,9 @@ custom_css = """
         border-color: #007bff;
     }
     /* Button styles */
-    .gradio-button {
-        background-color: #007bff;
+    /* Send Button: Sky Blue */
+    #submit-btn {
+        background-color: #00aaff; /* Sky blue */
         color: white;
         border: none;
         border-radius: 8px;
@@ -121,12 +122,31 @@ custom_css = """
         cursor: pointer;
         transition: all 0.3s ease;
     }
-    .gradio-button:hover {
-        background-color: #0056b3;
+    #submit-btn:hover {
+        background-color: #0099cc; /* Slightly darker blue */
     }
-    .gradio-button:active {
+    #submit-btn:active {
         transform: scale(0.95);
     }
+
+    /* Clear History Button: Light Red */
+    #clear-history {
+        background-color: #f5a4a4; /* Light red */
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 12px 20px;
+        font-size: 1.1rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+    #clear-history:hover {
+        background-color: #f04e4e; /* Slightly darker red */
+    }
+    #clear-history:active {
+        transform: scale(0.95);
+    }
+
     /* Chat history styles */
     .gradio-chatbot .message {
         margin-bottom: 10px;
@@ -148,14 +168,7 @@ custom_css = """
         margin-left: auto;
         animation: slideInAssistant 0.5s ease-out;
     }
-    /* Clear button style */
-    .gradio-button.clear-history {
-        background-color: #dc3545;
-        margin-left: 10px;
-    }
-    .gradio-button.clear-history:hover {
-        background-color: #c82333;
-    }
+
     /* Animation keyframes */
     @keyframes fadeIn {
         0% { opacity: 0; }
@@ -216,8 +229,8 @@ def create_interface():
                 choices=["o1", "o3-mini"],
                 value="o1"  # Default to 'o1' for image-related tasks
             )
-            submit_btn = gr.Button("Send")
-            clear_btn = gr.Button("Clear History")  # No class_name argument
+            submit_btn = gr.Button("Send", elem_id="submit-btn")
+            clear_btn = gr.Button("Clear History", elem_id="clear-history")
 
         chat_history = gr.Chatbot()