Update app.py

app.py

@@ -59,19 +59,58 @@ agent = CodeAgent(
     verbosity_level=1
 )
 
-# Add example usage instructions to the Gradio UI description
-description = """
-### Currency and Time Agent
-This app allows you to:
-1. Get the current exchange rate for a currency pair (e.g., USD to JPY).
-2. Get the current time in a specific timezone (e.g., America/New_York).
-
-#### Example Queries:
-- "What is the current exchange rate for USD to JPY?"
-- "Get the EUR to GBP rate."
-- "What is the current time in America/New_York?"
-- "Get the time in Asia/Tokyo."
+# Define example usage instructions
+example_usage = """
+### Example Usage
+1. **Currency Rate**: Ask for the exchange rate of a currency pair.
+   - Example: "What is the current exchange rate for USD to JPY?"
+   - Example: "Get the EUR to GBP rate.
 """
 
-# Launch the Gradio UI
-GradioUI(agent, description=description).launch()
+# Extend the GradioUI class to include the example usage
+class CustomGradioUI(GradioUI):
+    def __init__(self, agent, description: str = "", **kwargs):
+        super().__init__(agent, **kwargs)
+        self.description = description
+
+    def launch(self, **kwargs):
+        import gradio as gr
+
+        with gr.Blocks(fill_height=True) as demo:
+            # Add the description as a Markdown component
+            if self.description:
+                gr.Markdown(self.description)
+
+            # Add the existing chatbot and input components
+            stored_messages = gr.State([])
+            file_uploads_log = gr.State([])
+            chatbot = gr.Chatbot(
+                label="Agent",
+                type="messages",
+                avatar_images=(
+                    None,
+                    "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
+                ),
+                resizeable=True,
+                scale=1,
+            )
+            # If an upload folder is provided, enable the upload feature
+            if self.file_upload_folder is not None:
+                upload_file = gr.File(label="Upload a file")
+                upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
+                upload_file.change(
+                    self.upload_file,
+                    [upload_file, file_uploads_log],
+                    [upload_status, file_uploads_log],
+                )
+            text_input = gr.Textbox(lines=1, label="Chat Message")
+            text_input.submit(
+                self.log_user_message,
+                [text_input, file_uploads_log],
+                [stored_messages, text_input],
+            ).then(self.interact_with_agent, [stored_messages, chatbot], [chatbot])
+
+        demo.launch(debug=True, share=True, **kwargs)
+
+# Launch the Gradio UI with the example usage
+CustomGradioUI(agent, description=example_usage).launch()