前言

本系列文章主要介绍WEB界面工具Gradio。Gradio是Hugging Face发布的简易WebUI开发框架，它基于FastAPI和svelte，可以使用机器学习模型、python函数或API开发多功能界面，并可部署人工智能模型，是当前热门的非常易于展示机器学习大语言模型LLM及扩散模型DM的WebUI框架。
本系列文章分为五部分：Gradio介绍、HuggingFace资源与工具库、Gradio基础功能实战、Gradio与大模型融合实战和Gradio高级功能实战。第一部分Gradio介绍，包括三章内容：第一章先介绍Gradio的概念，包括详细技术架构、历史、应用场景、与其他框架Gradio/NiceGui/StreamLit/Dash/PyWebIO的区别，然后详细介绍了Gradio的安装与运行，安装包括Linux/Win/Mac三类系统安装，运行包括普通方式和热重载方式；第二章介绍Gradio的4种部署方式，包括本地部署launch()、huggingface托管、FastAPI挂载和Gradio-Lite浏览器集成；第三章介绍Gradio的三种Client，包括python客户端、javascript客户端和curl客户端，方便读者对Gradio整体把握。第二部分介绍著名网站Hugging Face的各类资源和工具库，因为Gradio演示中经常用到Hugging Face的models及某些场景需要部署在spaces，包括两章内容：第四章详解三类资源models/datasets/spaces的使用，第五章实战六类工具库transformers/diffusers/datasets/PEFT/accelerate/optimum实战。第三部分是Gradio基础功能实战，进入本系列文章的核心，包括四章内容：第六章讲解Gradio库的模块架构和环境变量，第七章讲解Gradio高级抽象界面类Interface，第八章讲解Gradio底层区块类Blocks，第九章讲解补充特性Additional Features。第四部分是Gradio与大模型融合的实战，包括三章内容：第十章讲解融合大模型的多模态聊天机器人组件Chatbot，第十一章讲解使用Agents和Tools智能代理工具构建UI，第十二章讲述将Gradio用于LLM Agents的Gradio Tools。第五部分详解Gradio高级功能，包括三章内容：第十三章讲述Discord Bot/Slack Bot/Website Widget部署，第十四章讲述数据科学与绘图Data Science And Plots，第十五章讲述数据流Streaming。
本系列文章讲解细致，涵盖Gradio大部分组件和功能，代码均可运行并附有大量运行截图，方便读者理解并应用到开发中，Gradio一定会成为每个技术人员实现各种奇思妙想的最称手工具。

本系列文章目录如下：

1. 《Gradio全解1——Gradio简介》
2. 《Gradio全解1——Gradio的安装与运行》
3. 《Gradio全解2——Gradio的3+1种部署方式实践》
4. 《Gradio全解2——浏览器集成Gradio-Lite》
5. 《Gradio全解3——Gradio Client：python客户端》
6. 《Gradio全解3——Gradio Client：javascript客户端》
7. 《Gradio全解3——Gradio Client：curl客户端》
8. 《Gradio全解4——剖析Hugging Face：详解三类资源models/datasets/spaces》
9. 《Gradio全解5——剖析Hugging Face：实战六类工具库transformers/diffusers/datasets/PEFT/accelerate/optimum》
10. 《Gradio全解6——Gradio库的模块架构和环境变量》
11. 《Gradio全解7——Interface：高级抽象界面类（上）》
12. 《Gradio全解7——Interface：高级抽象界面类（下）》
13. 《Gradio全解8——Blocks：底层区块类（上）》
14. 《Gradio全解8——Blocks：底层区块类（下）》
15. 《Gradio全解9——Additional Features：补充特性（上）》
16. 《Gradio全解9——Additional Features：补充特性（下）》
17. 《Gradio全解10——Chatbot：融合大模型的多模态聊天机器人（1）》
18. 《Gradio全解10——Chatbot：融合大模型的多模态聊天机器人（2）》
19. 《Gradio全解10——Chatbot：融合大模型的多模态聊天机器人（3）》
20. 《Gradio全解10——Chatbot：融合大模型的多模态聊天机器人（4）》
21. 《Gradio全解10——Chatbot：融合大模型的多模态聊天机器人（5）》
22. 《Gradio全解11——使用Agents和Tools智能代理工具构建UI（1）》
23. 《Gradio全解11——使用Agents和Tools智能代理工具构建UI（2）》
24. 《Gradio全解11——使用Agents和Tools智能代理工具构建UI（3）》
25. 《Gradio全解11——使用Agents和Tools智能代理工具构建UI（4）》
26. 《Gradio全解12——Gradio Tools：将Gradio用于LLM Agents》
27. 《Gradio全解系列13——Discord Bot/Slack Bot/Website Widget部署》
28. 《Gradio全解系列14——Data Science And Plots：数据科学与绘图》
29. 《Gradio全解15——Streaming：数据流（上）》
30. 《Gradio全解15——Streaming：数据流（下）》

本篇摘要

Gradio的组件Chatbot原生支持显示中间思考过程和工具使用情况（参考其参数metadata用法），这使得它非常适合为LLM Agent、思维链（Chain-of-Thought, CoT）或推理演示创建用户界面，本章将展示如何使用gr.Chatbot和gr.ChatInterface来显示思考过程和工具使用情况。
本章开始讲解四种代理和工具方式构建用户界面，其中前三种为代理方式，包括transformers.agents、langchain agents和langgraph，第四种使用显示思考的思维链工具Gemini 2.0 Flash Thinking API构建UI。因为Agents作为连接各大模型和工具的桥梁，是打通人工通用智能（AGI）的最后一公里，对从业者和人工智能行业都是至关重要的一环，所以本章将重点放在Agents智能体的原理及应用步骤拆解，然后才是通过Gradio构建UI。作者为此阅读了大量文献，以尽量阐述清楚智能代理，请读者不吝三连和评论，共同进步变强。

11. 使用transformers.agents构建Gradio UI

本章讲述如何使用transformers.agents构建Gradio UI，内容包括代理概念类型和构建、定义大模型引擎Engines、创建和使用Tools、系统提示、其它设置和使用transformers.agents构建Gradio UI。关于库transformers的介绍请参考Hugging Face章节中的六大工具库实战。

11.3 创建和使用工具Tools

工具是代理使用的原子函数，包括各种属性和执行方法。例如PythonInterpreterTool：它有一个名称、描述、输入描述、输出类型，以及一个执行操作的 call 方法。当代理初始化时，工具属性会被用来生成工具描述，并将其嵌入到代理的系统提示中，这让代理知道它可以使用哪些工具以及为什么使用这些工具。工具是代理的核心部分，工具的好坏和数量决定了代理能力的大小。本节将从默认工具箱、创建新工具、管理工具箱及使用工具集等方面讲解如何使用工具。

11.3.1 默认工具箱与load_tool

Transformers附带了一个默认工具箱，用于增强代理的功能。构建Agent时需要一个tools参数，它接受一个工具列表（List[Tools]）——这个列表可以是空的，但可以在代理初始化时，通过定义可选参数add_base_tools=True，将默认工具箱添加到工具列表。默认工具箱中工具如下：

• 文档问答：给定一个图像格式的文档（如PDF），回答关于该文档的问题（Donut）；
• 图像问答：给定一张图像，回答关于该图像的问题（VILT）；
• 语音转文本：给定一段人声录音，将语音转录为文本（Whisper）；
• 文本转语音：将文本转换为语音（SpeechT5）；
• 翻译：将给定的句子从源语言翻译为目标语言；
• DuckDuckGo搜索*：使用DuckDuckGo浏览器执行网络搜索；
• Python代码解释器：在安全环境中运行由LLM生成的Python代码。此工具仅在初始化 ReactJsonAgent时通过add_base_tools=True添加，因为基于代码的代理已经可以原生执行Python代码。

我们还可以通过调用load_tool()函数并指定要执行的任务来手动使用工具，示例代码如下：

from transformers import load_tool

tool = load_tool("text-to-speech")
audio = tool("This is a text to speech tool")

11.3.2 创建新工具

我们可以为Hugging Face默认工具未涵盖的用例创建自己的工具。以返回HF Hub上某个任务下载量最多的模型为例创建一个工具，步骤如下：

1. 创建核心功能代码：

from huggingface_hub import list_models

task = "text-classification"

model = next(iter(list_models(filter=task, sort="downloads", direction=-1)))
print(model.id)

2. 然后将核心代码封装为工具函数以快速将其转换为工具，操作时只需将其包装在一个函数中并添加工具装饰器@tool即可：

from transformers import tool

@tool
def model_download_tool(task: str) -> str:
    """
    This is a tool that returns the most downloaded model of a given task on the Hugging Face Hub.
    It returns the name of the checkpoint.

    Args:
        task: The task for which
    """
    model = next(iter(list_models(filter="text-classification", sort="downloads", direction=-1)))
    return model.id

此函数需要：

• 清晰的函数名：名称通常描述工具的功能，由于代码返回某个任务下载量最多的模型，我们可以命名为model_download_tool；
• 输入和输出的类型提示：输入的类型提示为函数的入参，输出类型提示为符号->后的类型，方便大模型调用；
• 函数描述：描述函数的作用和返回说明，其中包括一个“Args:”部分，描述每个参数的作用（注意这里不需要类型指示，因为会从类型提示中提取）。所有这些将在初始化时自动嵌入到代理的系统提示中，因此请尽量使它们清晰易懂！

3. 最后将工具直接添加到初始化代理的参数tools中。现在，我们可以创建一个代理，比如CodeAgent，并使用创建的工具model_download_tool，示例代码如下：

from transformers import CodeAgent, HfApiEngine

llm_engine = HfApiEngine(model="meta-llama/Meta-Llama-3-70B-Instruct")
agent = CodeAgent(tools=[model_download_tool], llm_engine=llm_engine)
agent.run(
    "Can you give me the name of the model that has the most downloads in the 'text-to-video' task on the Hugging Face Hub?"
)

运行后得到以下输出：

======== New task ========
Can you give me the name of the model that has the most downloads in the 'text-to-video' task on the Hugging Face Hub?
==== Agent is executing the code below:
most_downloaded_model = model_download_tool(task="text-to-video")
print(f"The most downloaded model for the 'text-to-video' task is {most_downloaded_model}.")
==== The output: 
"The most downloaded model for the 'text-to-video' task is ByteDance/AnimateDiff-Lightning."

11.3.3 管理代理的工具箱toolbox

当我们已经初始化了一个带有工具箱的代理时，从头开始重新初始化以添加想使用的工具会很不方便。此时可以使用Transformers代理，通过toolbox中函数add_tool()和update_tool()来添加或替换工具来管理代理的工具箱。

让我们将上面定义的model_download_tool添加到一个仅使用默认工具箱初始化的现有代理中，代码如下：

from transformers import CodeAgent

agent = CodeAgent(tools=[], llm_engine=llm_engine, add_base_tools=True)
agent.toolbox.add_tool(model_download_tool)

现在我们可以同时利用新工具和之前的文本转语音工具：

agent.run(
    "Can you read out loud the name of the model that has the most downloads in the 'text-to-video' task on the Hugging Face Hub and return the audio?"
)

在为已经运行良好的代理添加工具时要小心，因为它可能会偏向选择你定义的工具，或者选择与原工具不同的工具。

我们还可以使用方法agent.toolbox.update_tool()替换代理工具箱中的现有工具，尤其是新工具一对一替换现有工具时将非常有用，因为代理已经知道如何执行该特定任务。替换时只需确保新工具遵循与被替换工具相同的API，或者调整系统提示模板以确保更新所有使用被替换工具的示例。

11.3.4 使用工具集合ToolCollection

我们还可以通过使用transformers中的对象ToolCollection来利用工具集合，并通过参数collection_slug指定想要使用的集合片，它们将作为列表传递给代理进行初始化，示例代码如下：

from transformers import ToolCollection, ReactCodeAgent

image_tool_collection = ToolCollection(collection_slug="huggingface-tools/diffusion-tools-6630bb19a942c2306a2cdb6f")
agent = ReactCodeAgent(tools=[*image_tool_collection.tools], add_base_tools=True)

agent.run("Please draw me a picture of rivers and lakes.")

为了加快启动速度，工具只有在被代理调用时才会加载。另外，实际运行时可能会报错：ImportError: cannot import name ‘cached_download’ from ‘huggingface_hub’. Did you mean: ‘hf_hub_download’?。原因可能是工具内部调用有问题，只能等官方更新。运行正常时，上面代码将会产生以下类似图片：

参考文献

1. Gradio - guides - Chatbots
2. License to Call: Introducing Transformers Agents 2.0
3. Hugging Face - Transformers - Agents and tools