前言

本系列文章主要介绍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.2 定义大模型引擎Engines

我们可以自由创建和使用用于代理框架的引擎Engines，但需要满足以下条件：

• 它遵循输入消息的消息格式（List[Dict[str, str]]），并返回一个字符串；
• 它在传入的参数stop_sequences指定的序列处停止生成输出。

下面就来了解下四种不同的创建引擎方法：模型函数llm_engine、TransformersEngine、HfApiEngine和HfEngine，请注意区分它们适用的场景。

11.2.1 引擎函数：llm_engine

我们可以通过定义一个接受消息列表并返回文本的函数llm_engine来构建LLM引擎，这个可调用对象还需要接受一个stop参数以指示何时停止生成。

from huggingface_hub import login, InferenceClientlogin("<YOUR_HUGGINGFACEHUB_API_TOKEN>")client = InferenceClient(model="meta-llama/Meta-Llama-3-70B-Instruct")def llm_engine(messages, stop_sequences=["Task"]) -> str:response = client.chat_completion(messages, stop=stop_sequences, max_tokens=1000)answer = response.choices[0].message.contentreturn answer

此外，llm_engine还可以接受一个grammar参数。如果在代理初始化时指定了grammar，这个参数将连同初始化时定义的grammar一起传递给llm_engine的调用，以实现受约束的生成，从而强制代理生成格式正确的输出。

11.2.2 TransformersEngine类

为了方便起见，我们可以添加一个TransformersEngine，它通过预初始化的Pipeline作为输入实现上述功能，或可选的使用model_id，以便使用transformers在本地机器上运行推理。示例代码如下：

from transformers import AutoModelForCausalLM, AutoTokenizer, pipeline, TransformersEnginemodel_name = "HuggingFaceTB/SmolLM-135M-Instruct"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(model_name)pipe = pipeline("text-generation", model=model, tokenizer=tokenizer)
engine = TransformersEngine(pipe)
engine([{"role": "user", "content": "Ok!"}], stop_sequences=["great"])
# 输出
"What a "

11.2.3 HfApiEngine类

由于代理行为通常需要更强的模型，如Llama-3.1-70B-Instruct，这些模型目前较难在本地运行，因此我们还提供了HfApiEngine类，HfApiEngine是一个封装了Hugging Face Inference API客户端的引擎，即在底层初始化了一个huggingface_hub.InferenceClient，用于执行大语言模型（LLM）的调用。

该引擎通过Hugging Face的推理API与语言模型进行通信，它可以在无服务器模式（serverless）下使用，也可以与专用端点（dedicated endpoint）一起使用，并支持诸如停止序列（stop sequences）和语法自定义（grammar customization）等功能。程序中甚至可以留空llm_engine参数，默认情况下会创建一个HfApiEngine。示例代码如下：

from transformers import HfApiEnginellm_engine = HfApiEngine(model="meta-llama/Meta-Llama-3-70B-Instruct")

11.2.4 HfEngine类

对于本地部署的具有Inference API的LLM，我们还可以直接使用包中提供的 HfEngine 类来获取一个调用我们自己的Inference API的LLM引擎，示例代码如下：

from transformers.agents import HfEnginellm_engine = HfEngine("meta-llama/Meta-Llama-3-70B-Instruct")

参考文献

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