Update Gradio_UI.py

Gradio_UI.py

@@ -1,3 +1,4 @@
+import gradio as gr
 import mimetypes
 import os
 import re
@@ -9,103 +10,7 @@ from smolagents.agents import ActionStep, MultiStepAgent
 from smolagents.memory import MemoryStep
 from smolagents.utils import _is_package_available
 
-def pull_messages_from_step(step_log: MemoryStep):
-    import gradio as gr
-
-    if isinstance(step_log, ActionStep):
-        step_number = f"Step {step_log.step_number}" if step_log.step_number is not None else ""
-        yield gr.ChatMessage(role="assistant", content=f"**{step_number}**")
-
-        if hasattr(step_log, "model_output") and step_log.model_output is not None:
-            model_output = step_log.model_output.strip()
-            model_output = re.sub(r"```\s*<end_code>", "```", model_output)
-            model_output = re.sub(r"<end_code>\s*```", "```", model_output)
-            model_output = re.sub(r"```\s*\n\s*<end_code>", "```", model_output)
-            model_output = model_output.strip()
-            yield gr.ChatMessage(role="assistant", content=model_output)
-
-        if hasattr(step_log, "tool_calls") and step_log.tool_calls is not None:
-            first_tool_call = step_log.tool_calls[0]
-            used_code = first_tool_call.name == "python_interpreter"
-            parent_id = f"call_{len(step_log.tool_calls)}"
-            args = first_tool_call.arguments
-            content = str(args.get("answer", str(args))) if isinstance(args, dict) else str(args).strip()
-            if used_code:
-                content = re.sub(r"```.*?\n", "", content)
-                content = re.sub(r"\s*<end_code>\s*", "", content)
-                content = content.strip()
-                if not content.startswith("```python"):
-                    content = f"```python\n{content}\n```"
-
-            parent_message_tool = gr.ChatMessage(
-                role="assistant",
-                content=content,
-                metadata={"title": f"🛠️ Used tool {first_tool_call.name}", "id": parent_id, "status": "pending"},
-            )
-            yield parent_message_tool
-
-            if hasattr(step_log, "observations") and step_log.observations and step_log.observations.strip():
-                log_content = step_log.observations.strip()
-                log_content = re.sub(r"^Execution logs:\s*", "", log_content)
-                yield gr.ChatMessage(
-                    role="assistant",
-                    content=f"{log_content}",
-                    metadata={"title": "📝 Execution Logs", "parent_id": parent_id, "status": "done"},
-                )
-
-            if hasattr(step_log, "error") and step_log.error is not None:
-                yield gr.ChatMessage(
-                    role="assistant",
-                    content=str(step_log.error),
-                    metadata={"title": "💥 Error", "parent_id": parent_id, "status": "done"},
-                )
-
-            parent_message_tool.metadata["status"] = "done"
-
-        elif hasattr(step_log, "error") and step_log.error is not None:
-            yield gr.ChatMessage(role="assistant", content=str(step_log.error), metadata={"title": "💥 Error"})
-
-        step_footnote = f"{step_number}"
-        if hasattr(step_log, "input_token_count") and hasattr(step_log, "output_token_count"):
-            token_str = f" | Input-tokens:{step_log.input_token_count:,} | Output-tokens:{step_log.output_token_count:,}"
-            step_footnote += token_str
-        if hasattr(step_log, "duration"):
-            step_duration = f" | Duration: {round(float(step_log.duration), 2)}" if step_log.duration else None
-            step_footnote += step_duration
-        step_footnote = f"""<span style=\"color: #bbbbc2; font-size: 12px;\">{step_footnote}</span> """
-        yield gr.ChatMessage(role="assistant", content=f"{step_footnote}")
-        yield gr.ChatMessage(role="assistant", content="-----")
-
-def stream_to_gradio(agent, task: str, reset_agent_memory: bool = False, additional_args: Optional[dict] = None):
-    if not _is_package_available("gradio"):
-        raise ModuleNotFoundError("Please install 'gradio' extra to use the GradioUI: `pip install 'smolagents[gradio]'`")
-    import gradio as gr
-
-    total_input_tokens = 0
-    total_output_tokens = 0
-
-    for step_log in agent.run(task, stream=True, reset=reset_agent_memory, additional_args=additional_args):
-        if hasattr(agent.model, "last_input_token_count"):
-            total_input_tokens += agent.model.last_input_token_count
-            total_output_tokens += agent.model.last_output_token_count
-            if isinstance(step_log, ActionStep):
-                step_log.input_token_count = agent.model.last_input_token_count
-                step_log.output_token_count = agent.model.last_output_token_count
-
-        for message in pull_messages_from_step(step_log):
-            yield message
-
-    final_answer = step_log
-    final_answer = handle_agent_output_types(final_answer)
-
-    if isinstance(final_answer, AgentText):
-        yield gr.ChatMessage(role="assistant", content=f"**Final answer:**\n{final_answer.to_string()}\n")
-    elif isinstance(final_answer, AgentImage):
-        yield gr.ChatMessage(role="assistant", content={"path": final_answer.to_string(), "mime_type": "image/png"})
-    elif isinstance(final_answer, AgentAudio):
-        yield gr.ChatMessage(role="assistant", content={"path": final_answer.to_string(), "mime_type": "audio/wav"})
-    else:
-        yield gr.ChatMessage(role="assistant", content=f"**Final answer:** {str(final_answer)}")
+# ... (keep your existing pull_messages_from_step and stream_to_gradio functions as they are)
 
 class GradioUI:
     def __init__(self, agent: MultiStepAgent, file_upload_folder: str | None = None):
@@ -116,14 +21,35 @@ class GradioUI:
         if self.file_upload_folder is not None and not os.path.exists(file_upload_folder):
             os.mkdir(file_upload_folder)
 
-    def interact_with_agent(self, prompt, messages):
-        import gradio as gr
-        messages.append(gr.ChatMessage(role="user", content=prompt))
-        yield messages
-        for msg in stream_to_gradio(self.agent, task=prompt, reset_agent_memory=False):
-            messages.append(msg)
-            yield messages
-        yield messages
+    # Your existing interact_with_agent, upload_file, and log_user_message methods remain the same
+    def interact_with_agent(self, prompt, chat_history): # Renamed 'messages' to 'chat_history' for clarity with ChatInterface
+        # The chat_history from ChatInterface is a list of [user_message, agent_response] tuples
+        # You'll need to adapt your processing slightly
+        yield chat_history # Yield initial history to show user message
+
+        # The prompt here will already be the user's input, so no need to append it to messages again
+        # For demonstration, I'll assume stream_to_gradio directly yields content for the chatbot
+        # You might need to adjust stream_to_gradio if it yields gr.ChatMessage objects directly,
+        # as gr.ChatInterface expects tuples.
+
+        # Example adaptation (might need further refinement based on stream_to_gradio's exact output)
+        full_response_content = ""
+        for msg_obj in stream_to_gradio(self.agent, task=prompt, reset_agent_memory=False):
+            if isinstance(msg_obj, gr.ChatMessage):
+                # For simplicity, concatenate text content. For images/audio, you'd need more complex handling
+                if isinstance(msg_obj.content, str):
+                    full_response_content += msg_obj.content + "\n"
+                elif isinstance(msg_obj.content, dict) and 'path' in msg_obj.content:
+                    # Handle image/audio paths
+                    full_response_content += f"[{msg_obj.content['mime_type']} at {msg_obj.content['path']}]\n"
+
+            # Update the last assistant message in the chat history
+            if chat_history and chat_history[-1][1] is None: # If the last assistant message is empty
+                chat_history[-1][1] = full_response_content
+            else:
+                chat_history.append([prompt, full_response_content]) # Append new turn
+            yield chat_history
+
 
     def upload_file(self, file, file_uploads_log, allowed_file_types=None):
         import gradio as gr
@@ -144,8 +70,11 @@ class GradioUI:
         original_name = os.path.basename(file.name)
         sanitized_name = re.sub(r"[^\w\-.]", "_", original_name)
         ext_map = {v: k for k, v in mimetypes.types_map.items()}
-        sanitized_name = sanitized_name.split(".")[:-1] + [ext_map.get(mime_type, "txt")]
-        sanitized_name = "".join(sanitized_name)
+        # Fix for sanitized_name generation
+        base_name, ext = os.path.splitext(original_name)
+        if not ext: # No extension, use 'txt' as default if mime_type is not specific
+             ext = "." + ext_map.get(mime_type, "txt")
+        sanitized_name = re.sub(r"[^\w\-.]", "_", base_name) + ext
 
         file_path = os.path.join(self.file_upload_folder, sanitized_name)
         shutil.copy(file.name, file_path)
@@ -158,31 +87,41 @@ class GradioUI:
             context += f"\nAttached files: {file_uploads_log}"
         return context, ""
 
+
     def launch(self, **kwargs):
         import gradio as gr
 
         with gr.Blocks(fill_height=True) as demo:
-            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",
+
+            # Use gr.ChatInterface directly for the main chat
+            # This function will be called with the user's message and the current chat history
+            gr.ChatInterface(
+                fn=self.interact_with_agent,
+                chatbot=gr.Chatbot(
+                    label="Agent",
+                    avatar_images=(
+                        None,
+                        "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
+                    ),
+                    resizeable=True,
+                    scale=1,
                 ),
-                resizeable=True,
-                scale=1,
+                textbox=gr.Textbox(lines=1, label="Chat Message"),
+                title="Agent Chat", # You can set a title for your app
+                # Additional components can be added here using `gr.Row`, `gr.Column`, etc.
             )
-            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])
+            # Add file upload outside ChatInterface if desired, and link it
+            if self.file_upload_folder is not None:
+                with gr.Row():
+                    upload_file = gr.File(label="Upload a file", file_count="multiple") # Allow multiple files
+                    upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
+                upload_file.upload(self.upload_file, [upload_file, file_uploads_log], [upload_status, file_uploads_log])
+                # You'll need to figure out how to pass file_uploads_log to interact_with_agent
+                # One way is to modify interact_with_agent to accept it, or use a global/class variable if appropriate.
+                # For now, I'm just showing how to add it to the UI.
 
         demo.launch(debug=True, share=True, **kwargs)
 
-__all__ = ["stream_to_gradio", "GradioUI"]
+__all__ = ["stream_to_gradio", "GradioUI"]