Update app.py

app.py

@@ -62,35 +62,149 @@ def chatbot(input_text, image, openai_api_key, reasoning_effort, model_choice, h
 def clear_history():
     return "", []
 
+# Custom CSS styles with animations
+custom_css = """
+    /* General body styles */
+    .gradio-container {
+        font-family: 'Arial', sans-serif;
+        background-color: #f8f9fa;
+        color: #333;
+    }
+
+    /* Header styles */
+    .gradio-header {
+        background-color: #007bff;
+        color: white;
+        padding: 20px;
+        text-align: center;
+        border-radius: 8px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        animation: fadeIn 1s ease-out;
+    }
+
+    .gradio-header h1 {
+        font-size: 2.5rem;
+    }
+
+    .gradio-header h3 {
+        font-size: 1.2rem;
+        margin-top: 10px;
+    }
+
+    /* Chatbot container styles */
+    .gradio-chatbot {
+        background-color: #fff;
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        max-height: 500px;
+        overflow-y: auto;
+        animation: fadeIn 2s ease-out;
+    }
+
+    /* Input field styles */
+    .gradio-textbox, .gradio-dropdown, .gradio-image {
+        border-radius: 8px;
+        border: 2px solid #ccc;
+        padding: 10px;
+        margin-bottom: 10px;
+        width: 100%;
+        font-size: 1rem;
+        transition: all 0.3s ease;
+    }
+
+    .gradio-textbox:focus, .gradio-dropdown:focus, .gradio-image:focus {
+        border-color: #007bff;
+    }
+
+    /* Button styles */
+    .gradio-button {
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 12px 20px;
+        font-size: 1.1rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .gradio-button:hover {
+        background-color: #0056b3;
+    }
+
+    .gradio-button:active {
+        transform: scale(0.95);
+    }
+
+    /* Chat history styles */
+    .gradio-chatbot .message {
+        margin-bottom: 10px;
+    }
+
+    .gradio-chatbot .user {
+        background-color: #007bff;
+        color: white;
+        padding: 10px;
+        border-radius: 12px;
+        max-width: 70%;
+        animation: slideInUser 0.5s ease-out;
+    }
+
+    .gradio-chatbot .assistant {
+        background-color: #f1f1f1;
+        color: #333;
+        padding: 10px;
+        border-radius: 12px;
+        max-width: 70%;
+        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; }
+        100% { opacity: 1; }
+    }
+
+    @keyframes slideInUser {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(0); }
+    }
+
+    @keyframes slideInAssistant {
+        0% { transform: translateX(100%); }
+        100% { transform: translateX(0); }
+    }
+"""
+
 # Gradio interface setup
 def create_interface():
-    with gr.Blocks() as demo:
-        gr.Markdown("# Multimodal Chatbot (Text + Image)")
-
-        # Add a description after the title
+    with gr.Blocks(css=custom_css) as demo:
         gr.Markdown("""
-        ### Description:
-        This is a multimodal chatbot that can handle both text and image inputs. 
-        - You can ask questions or provide text, and the assistant will respond.
-        - You can also upload an image, and the assistant will process it and answer questions about the image.
-        - Enter your OpenAI API key to start interacting with the model.
-        - You can use the 'Clear History' button to remove the conversation history.
-        - "o1" is for image chat and "o3-mini" is for text chat.
-
-        ### Reasoning Effort:
-        The reasoning effort controls how complex or detailed the assistant's answers should be. 
-        - **Low**: Provides quick, concise answers with minimal reasoning or details.
-        - **Medium**: Offers a balanced response with a reasonable level of detail and thought.
-        - **High**: Produces more detailed, analytical, or thoughtful responses, requiring deeper reasoning.
+            <div class="gradio-header">
+                <h1>Multimodal Chatbot (Text + Image)</h1>
+                <h3>Interact with a chatbot using text or image inputs</h3>
+            </div>
         """)
 
         with gr.Row():
             openai_api_key = gr.Textbox(label="Enter OpenAI API Key", type="password", placeholder="sk-...", interactive=True)
-        
+
         with gr.Row():
             image_input = gr.Image(label="Upload an Image", type="pil")  # Image upload input
             input_text = gr.Textbox(label="Enter Text Question", placeholder="Ask a question or provide text", lines=2)
-        
+
         with gr.Row():
             reasoning_effort = gr.Dropdown(
                 label="Reasoning Effort",
@@ -103,7 +217,7 @@ def create_interface():
                 value="o1"  # Default to 'o1' for image-related tasks
             )
             submit_btn = gr.Button("Send")
-            clear_btn = gr.Button("Clear History")
+            clear_btn = gr.Button("Clear History", class_name="clear-history")
 
         chat_history = gr.Chatbot()