Gradio_UI.py

#!/usr/bin/env python
# coding=utf-8
# Copyright 2024 The HuggingFace Inc. team. All rights reserved.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
import mimetypes
import os
import re
import shutil
from typing import Optional

from smolagents.agent_types import AgentAudio, AgentImage, AgentText, handle_agent_output_types
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,
):
    """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 ""
        yield gr.ChatMessage(role="assistant", content=f"**{step_number}**")

        # First yield the thought/reasoning from the LLM
        if hasattr(step_log, "model_output") and step_log.model_output is not None:
            # Clean up the LLM output
            model_output = step_log.model_output.strip()
            # Remove any trailing <end_code> and extra backticks, handling multiple possible formats
            model_output = re.sub(r"```\s*<end_code>", "```", model_output)  # handles ```<end_code>
            model_output = re.sub(r"<end_code>\s*```", "```", model_output)  # handles <end_code>```
            model_output = re.sub(r"```\s*\n\s*<end_code>", "```", model_output)  # handles ```\n<end_code>
            model_output = model_output.strip()
            yield gr.ChatMessage(role="assistant", content=model_output)

        # For tool calls, create a parent message
        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)}"

            # Tool call becomes the parent message with timing info
            # First we will handle arguments based on type
            args = first_tool_call.arguments
            if isinstance(args, dict):
                content = str(args.get("answer", str(args)))
            else:
                content = str(args).strip()

            if used_code:
                # Clean up the content by removing any end code tags
                content = re.sub(r"```.*?\n", "", content)  # Remove existing code blocks
                content = re.sub(r"\s*<end_code>\s*", "", content)  # Remove end_code tags
                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

            # Nesting execution logs under the tool call if they exist
            if hasattr(step_log, "observations") and (
                step_log.observations is not None and step_log.observations.strip()
            ):  # Only yield execution logs if there's actual content
                log_content = step_log.observations.strip()
                if log_content:
                    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"},
                    )

            # Nesting any errors under the tool call
            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"},
                )

            # Update parent message metadata to done status without yielding a new message
            parent_message_tool.metadata["status"] = "done"

        # Handle standalone errors but not from tool calls
        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"})

        # Calculate duration and token information
        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,
):
    """Runs an agent with the given task and streams the messages from the agent as gradio ChatMessages."""
    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):
        # Track tokens if model provides them
        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  # Last log is the run's final_answer
    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)}")


class GradioUI:
    """A one-line interface to launch your agent in Gradio"""

    def __init__(self, agent: MultiStepAgent, file_upload_folder: str | None = None):
        if not _is_package_available("gradio"):
            raise ModuleNotFoundError(
                "Please install 'gradio' extra to use the GradioUI: `pip install 'smolagents[gradio]'`"
            )
        self.agent = agent
        self.file_upload_folder = file_upload_folder
        if self.file_upload_folder is not None:
            if 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

    def upload_file(
        self,
        file,
        file_uploads_log,
        allowed_file_types=[
            "application/pdf",
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
            "text/plain",
        ],
    ):
        """
        Handle file uploads, default allowed types are .pdf, .docx, and .txt
        """
        import gradio as gr

        if file is None:
            return gr.Textbox("No file uploaded", visible=True), file_uploads_log

        try:
            mime_type, _ = mimetypes.guess_type(file.name)
        except Exception as e:
            return gr.Textbox(f"Error: {e}", visible=True), file_uploads_log

        if mime_type not in allowed_file_types:
            return gr.Textbox("File type disallowed", visible=True), file_uploads_log

        # Sanitize file name
        original_name = os.path.basename(file.name)
        sanitized_name = re.sub(
            r"[^\w\-.]", "_", original_name
        )  # Replace any non-alphanumeric, non-dash, or non-dot characters with underscores

        type_to_ext = {}
        for ext, t in mimetypes.types_map.items():
            if t not in type_to_ext:
                type_to_ext[t] = ext

        # Ensure the extension correlates to the mime type
        sanitized_name = sanitized_name.split(".")[:-1]
        sanitized_name.append("" + type_to_ext[mime_type])
        sanitized_name = "".join(sanitized_name)

        # Save the uploaded file to the specified folder
        file_path = os.path.join(self.file_upload_folder, os.path.basename(sanitized_name))
        shutil.copy(file.name, file_path)

        return gr.Textbox(f"File uploaded: {file_path}", visible=True), file_uploads_log + [file_path]

    def log_user_message(self, text_input, file_uploads_log):
        return (
            text_input
            + (
                f"\nYou have been provided with these files, which might be helpful or not: {file_uploads_log}"
                if len(file_uploads_log) > 0
                else ""
            ),
            "",
        )

    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="💬 Chat Window",
                type="messages",
                avatar_images=(
                    None,
                    "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
                ),
                scale=5,  # Expands chat window
                show_copy_button=True
            )

            # 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],
                )

            # ====== Chat Input with Placeholder Text & Enter Key Submission ====== #
            text_input = gr.Textbox(
                lines=1,
                label="💬 Chat Message",
                placeholder="Type your message and press Enter to send...",
                interactive=True,
            )

            # Submit text when "Enter" is pressed
            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])

            # ====== Sample Prompt Buttons Inside the Chat Window ====== #
            with gr.Column(visible=True) as startup_buttons:
                gr.Markdown("### 🤖 Get Started with a Quick Prompt")
                with gr.Row():
                    btn1 = gr.Button("✈️ Plan a Trip")
                    btn2 = gr.Button("🍽️ Find a Restaurant")
                    btn3 = gr.Button("💱 Convert Currency")

            # When a button is clicked, fill input box and hide buttons
            def set_prompt(prompt):
                return prompt, gr.update(visible=False)  # Hide buttons

            btn1.click(lambda: set_prompt("I want to plan a trip from Toronto to Paris in May 2025. Can you find flights and suggest an itinerary?"), 
                       inputs=[], outputs=[text_input, startup_buttons])
            btn2.click(lambda: set_prompt("I'm visiting New York next weekend. Can you recommend some top-rated restaurants for dinner?"), 
                       inputs=[], outputs=[text_input, startup_buttons])
            btn3.click(lambda: set_prompt("Convert 500 USD to EUR and show me the exchange rate."), 
                       inputs=[], outputs=[text_input, startup_buttons])

            # ====== Additional Sample Prompts (Dropdown or Grid) ====== #
            with gr.Accordion("📌 Default Prompts", open=False):
                with gr.Row():
                    pbtn1 = gr.Button("🏨 Find Hotels in Tokyo")
                    pbtn2 = gr.Button("🌦️ Check Weather in Paris")
                    pbtn3 = gr.Button("🚗 Find Car Rentals")
                    pbtn4 = gr.Button("🎟️ Get Event Info")

                # Button Clicks - Additional Prompts
                pbtn1.click(lambda: "I need budget-friendly hotels in Tokyo for 5 nights. My budget is $100 per night.", inputs=[], outputs=text_input)
                pbtn2.click(lambda: "What is the weather forecast for Paris next week?", inputs=[], outputs=text_input)
                pbtn3.click(lambda: "Find me a car rental in Los Angeles for 3 days.", inputs=[], outputs=text_input)
                pbtn4.click(lambda: "What major events are happening in Berlin this month?", inputs=[], outputs=text_input)

            # ====== Toggle Checkboxes for Extra Info ====== #
            with gr.Row():
                show_smolagents_info = gr.Checkbox(label="What is SmolAgents?", value=False)
                show_agent_capabilities = gr.Checkbox(label="Capabilities & Limitations", value=False)

            # Expanding sections based on checkbox state
            smolagents_info = gr.Markdown("""
                ## 🌍 **What is SmolAgents?**
                Unlike a basic chat AI that provides single-step answers, **SmolAgents** enable dynamic, multi-step **reasoning and decision-making**.  

                - 🛠 **Modular & Flexible:** SmolAgents **call different tools** when needed, giving you **step-by-step insights** rather than just final answers.
                - 🤖 **Real-time Adaptability:** The AI **adjusts its approach based on intermediate results**, making it **more powerful than standard chatbots**.
                - 🚀 **Build Quickly & Expand Easily:** SmolAgents provide a foundation for building **custom AI-powered workflows**, making it easy to **scale and adapt**.

                🔹 *Use this space to explore what’s possible! This AI isn't just answering—you can see how it reasons between steps and improves results.*  
            """, visible=False)

            agent_capabilities = gr.Markdown("""
                ## 🤖 **Capabilities & Limitations**
                
                | **Tool Name**                         | **Function & API Used**                                         | **Limitations** | **Possible Improvements** |
                |--------------------------------------|----------------------------------------------------------------|----------------|---------------------------|
                | `search_flights(departure, destination, date)` ✈️ | **Finds flights** using DuckDuckGo. Queries available flights from departure to destination on a given date. | May not have real-time pricing | Integrate a flight API like Skyscanner |
                | `web_search(query)` 🔍               | **Searches the web** using DuckDuckGo. Retrieves live data including news, events, and real-time updates. | Limited search results | Expand to use multiple search engines |
                | `visit_webpage(url)` 🌐              | **Scrapes web content**. Extracts ingredients and instructions from a recipe URL. | May not work on all websites | Add more scraping logic for better accuracy |
                | `convert_currency(amount, from_currency, to_currency)` 💱 | **Converts currency** via FreeCurrencyAPI. Fetches exchange rates and calculates conversions. | Requires API key, may have rate limits | Use a backup API in case of failures |
                | `get_current_time_in_timezone(timezone)` ⏰ | **Gets local time** in a specified timezone using the `pytz` library. | No offline functionality | Allow local fallback for time retrieval |
                | `chat_with_ai(message)` 💬           | **Maintains conversation memory**. Stores and retrieves chat history to provide context-aware responses. | Limited to 16,000 tokens | Implement memory chunking for longer conversations |
            """, visible=False)

            # Show/Hide sections based on checkbox state
            show_smolagents_info.change(lambda x: gr.update(visible=x), show_smolagents_info, smolagents_info)
            show_agent_capabilities.change(lambda x: gr.update(visible=x), show_agent_capabilities, agent_capabilities)

        demo.launch(debug=True, share=False, **kwargs)



__all__ = ["stream_to_gradio", "GradioUI"]