Update Gradio_UI with examples

Gradio_UI.py

@@ -31,9 +31,12 @@ def pull_messages_from_step(
     """Extract ChatMessage objects from agent steps with proper nesting"""
     import gradio as gr
 
+    
     if isinstance(step_log, ActionStep):
         # Output the step number
         step_number = f"Step {step_log.step_number}" if step_log.step_number is not None else ""
+        if step_log.step_number == 1:
+            yield gr.ChatMessage(role="assistant", content=f"***Thinking***")
         yield gr.ChatMessage(role="assistant", content=f"**{step_number}**")
 
         # First yield the thought/reasoning from the LLM
@@ -172,7 +175,7 @@ def stream_to_gradio(
             content={"path": final_answer.to_string(), "mime_type": "audio/wav"},
         )
     else:
-        yield gr.ChatMessage(role="assistant", content=f"**Final answer:** {str(final_answer)}")
+        yield gr.ChatMessage(role="assistant", content=f"***Final answer:*** {str(final_answer)}")
 
 
 class GradioUI:
@@ -192,11 +195,30 @@ class GradioUI:
     def interact_with_agent(self, prompt, messages):
         import gradio as gr
 
+        # Add user message
         messages.append(gr.ChatMessage(role="user", content=prompt))
         yield messages
+
+        # Add loading message
+        loading_msg = gr.ChatMessage(
+            role="assistant",
+            content="😴 Thinking...",
+            metadata={"class": "loading-message"}
+        )
+        messages.append(loading_msg)
+        yield messages
+
+        # Process agent response
         for msg in stream_to_gradio(self.agent, task=prompt, reset_agent_memory=False):
+            # Remove loading message before adding real responses
+            if len(messages) > 0 and messages[-1].metadata.get("class") == "loading-message":
+                messages.pop()
             messages.append(msg)
             yield messages
+
+        # Ensure loading message is removed at the end
+        if len(messages) > 0 and messages[-1].metadata.get("class") == "loading-message":
+            messages.pop()
         yield messages
 
     def upload_file(
@@ -261,7 +283,25 @@ class GradioUI:
     def launch(self, **kwargs):
         import gradio as gr
 
-        with gr.Blocks(fill_height=True) as demo:
+        with gr.Blocks(
+            title="Draw me...",
+            fill_height=True,
+            css="""
+                .loading-message {
+                    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
+                }
+                @keyframes pulse {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.5; }
+                }
+            """
+        ) as demo:
+            gr.Markdown(
+                """
+                #'Draw me ...' agent
+                I will enhance your basic prompt to make it perfect for Flux image generation.
+                """
+            )
             stored_messages = gr.State([])
             file_uploads_log = gr.State([])
             chatbot = gr.Chatbot(
@@ -269,27 +309,38 @@ class GradioUI:
                 type="messages",
                 avatar_images=(
                     None,
-                    "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
+                    "https://drive.google.com/file/d/1WIvyckpHHR8ctxYRhcvKEOFAAeP5nHKR/view?usp=sharing",
                 ),
                 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 = gr.Textbox(
+                label="Draw me [write what you want to bi in the generated picture]",
+                placeholder="Type your question here...",
+            )
+            submit_button = gr.Button("Send")
+            gr.Examples(
+                examples=[
+                    "Draw me a pair of curious giraffe in front of Mona Lisa in Louvre",
+                    "Draw me a portrait of a beautiful hipster woman, expressive lips, almond shaped eyes, bright sunny day",
+                    "Draw me abstract style waterfalls with wildlife inside the silhouette of a man’s head",
+                    "Draw me a polaroid family photo of a husband wife and kids in the 1980ies with dog on a summer everning"
+                ],
+                inputs=text_input,
+                label="Example prompts"
+            )
             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])
 
+            submit_button.click(
+                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)