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 and button colors
+# Custom CSS styles with animations
 custom_css = """
     /* General body styles */
     .gradio-container {
@@ -111,46 +111,22 @@ custom_css = """
         border-color: #007bff;
     }
     /* Button styles */
-    /* Send Button: Sky Blue */
-    #submit-btn {
-        background-color: #00aaff; /* Sky blue */
-        color: white;
-        border: none;
-        border-radius: 8px;
-        padding: 8px 15px; /* Smaller button size */
-        font-size: 1rem; /* Smaller font size */
-        cursor: pointer;
-        transition: all 0.3s ease;
-        width: auto;
-        margin-top: 10px;
-    }
-    #submit-btn:hover {
-        background-color: #0099cc; /* Slightly darker blue */
-    }
-    #submit-btn:active {
-        transform: scale(0.95);
-    }
-
-    /* Clear History Button: Light Red */
-    #clear-history {
-        background-color: #f5a4a4; /* Light red */
+    .gradio-button {
+        background-color: #007bff;
         color: white;
         border: none;
         border-radius: 8px;
-        padding: 8px 15px; /* Smaller button size */
-        font-size: 1rem; /* Smaller font size */
+        padding: 12px 20px;
+        font-size: 1.1rem;
         cursor: pointer;
         transition: all 0.3s ease;
-        width: auto;
-        margin-top: 10px;
     }
-    #clear-history:hover {
-        background-color: #f04e4e; /* Slightly darker red */
+    .gradio-button:hover {
+        background-color: #0056b3;
     }
-    #clear-history:active {
+    .gradio-button:active {
         transform: scale(0.95);
     }
-
     /* Chat history styles */
     .gradio-chatbot .message {
         margin-bottom: 10px;
@@ -172,7 +148,14 @@ 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; }
@@ -233,8 +216,8 @@ def create_interface():
                 choices=["o1", "o3-mini"],
                 value="o1"  # Default to 'o1' for image-related tasks
             )
-            submit_btn = gr.Button("Send", elem_id="submit-btn")
-            clear_btn = gr.Button("Clear History", elem_id="clear-history")
+            submit_btn = gr.Button("Send")
+            clear_btn = gr.Button("Clear History")  # No class_name argument
 
         chat_history = gr.Chatbot()