Update app.py

app.py

@@ -70,7 +70,6 @@ custom_css = """
         background-color: #f8f9fa;
         color: #333;
     }
-
     /* Header styles */
     .gradio-header {
         background-color: #007bff;
@@ -81,16 +80,13 @@ custom_css = """
         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;
@@ -101,7 +97,6 @@ custom_css = """
         overflow-y: auto;
         animation: fadeIn 2s ease-out;
     }
-
     /* Input field styles */
     .gradio-textbox, .gradio-dropdown, .gradio-image {
         border-radius: 8px;
@@ -112,11 +107,9 @@ custom_css = """
         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;
@@ -128,20 +121,16 @@ custom_css = """
         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;
@@ -150,7 +139,6 @@ custom_css = """
         max-width: 70%;
         animation: slideInUser 0.5s ease-out;
     }
-
     .gradio-chatbot .assistant {
         background-color: #f1f1f1;
         color: #333;
@@ -160,28 +148,23 @@ 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; }
         100% { opacity: 1; }
     }
-
     @keyframes slideInUser {
         0% { transform: translateX(-100%); }
         100% { transform: translateX(0); }
     }
-
     @keyframes slideInAssistant {
         0% { transform: translateX(100%); }
         100% { transform: translateX(0); }
@@ -197,6 +180,22 @@ def create_interface():
                 <h3>Interact with a chatbot using text or image inputs</h3>
             </div>
         """)
+        
+        # Add a description below the header
+        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.
+        """)
 
         with gr.Row():
             openai_api_key = gr.Textbox(label="Enter OpenAI API Key", type="password", placeholder="sk-...", interactive=True)