大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（6）

前言

本系列文章主要介绍WEB界面工具Gradio。Gradio是Hugging Face发布的简易webui开发框架，它基于FastAPI和svelte，可以使用机器学习模型、python函数或API开发多功能界面和部署人工智能模型，是当前热门的非常易于展示机器学习大语言模型LLM及扩散模型DM的WebUI框架。
本系列文章分为前置概念、安装运行与部署、Gradio高级特性、基础功能实战和高级功能实战五部分。第一部分前置概念：先介绍Gradio的详细技术架构、历史、应用场景、与其他框架Gradio/NiceGui/StreamLit/Dash/PyWebIO的区别，然后详细介绍了著名的资源网站Hugging Face，因为Gradio演示中经常用到Hugging Face的models及某些场景需要部署在spaces，这里主要包括三类资源models/datasets/spaces的使用以及六类工具库transformers/diffusers/datasets/PEFT/accelerate/optimum实战。第二部分安装运行与部署：讲解多种不同的安装、运行和部署方式，安装包括Linux/Win/Mac三类系统安装，运行包括普通方式和热重载方式，部署包括本地部署、HuggingFace托管、FastAPI挂载和Gradio-Lite浏览器集成。第三部分Gradio高级特性：按照先整体再细节的逻辑，讲解Gradio的多种高级特性，包括三种Gradio Clients（python/javascript/curl）、Gradio Tools、Gradio的模块架构和环境变量等，方便读者对Gradio整体把握。第四部分基础功能实战：深入细节，也是本系列文章的核心，实践基础功能Interface、Blocks和Additional Features。第五部分高级功能实战：详解高级功能Chatbots、Data Science And Plots和Streaming。
本系列文章讲解细致，涵盖Gradio大部分组件和功能，代码均可运行并附有大量运行截图，方便读者理解并应用到开发中，Gradio一定会成为每个技术人员实现各种奇思妙想的最称手工具。

本系列文章目录如下：

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

本篇摘要

本篇介绍如何使用Gradio创建聊天机器人，主要内容包括gr.ChatInterface快速创建Chatbot、与流行LLM库及API结合、组件Chatbot及消息格式ChatMessage、使用Blocks创建Chatbot、Chatbot的特殊Events、使用Agents和Tools智能代理工具、通过Gradio应用创建Discord Bot/Slack Bot/Website Widget。

11. Chatbot：融合大模型的多模态聊天机器人

本章介绍如何使用Gradio创建聊天机器人。聊天机器人是大型语言模型（LLMs）的一个流行应用，通过Gradio，我们可以轻松构建LLM演示并与其它用户分享，或者自己使用直观的聊天机器人界面进行开发尝试。本章主要内容包括gr.ChatInterface快速创建Chatbot、与流行LLM库及API结合、组件Chatbot及消息格式ChatMessage、使用Blocks创建Chatbot、Chatbot的特殊Events、使用Agents和Tools智能代理工具、通过Gradio应用创建Discord Bot/Slack Bot/Website Widget。

11.6 为LLM Agent构建UI

Gradio的Chatbot组件可以原生显示中间思考和工具使用情况（参考metadata用法），这使得它非常适合为LLM Agent和思维链（Chain-of-Thought, CoT）演示创建UI用户界面，本节将向你展示如何实现这一点。

11.5.1 使用代理构建

本小节使用两种代理来构建UI，一种使用transformers.agents，另一种使用Langchain agents。

1. 使用transformers.agents的实际示例

我们将创建一个简单的Gradio应用程序代理，该代理可以使用文本生成图像的工具。提示：请确保你先阅读了transformers代理文档，地址：https://huggingface.co/docs/transformers/en/agents。

我们将从导入transformers和gradio中的必要类开始，代码如下：

import gradio as gr
from dataclasses import asdict
from transformers import Tool, ReactCodeAgent  # type: ignore
from transformers.agents import stream_to_gradio, HfApiEngine  # type: ignore# Import tool from Hub
image_generation_tool = Tool.from_space(  # type: ignorespace_id="black-forest-labs/FLUX.1-schnell",name="image_generator",description="Generates an image following your prompt. Returns a PIL Image.",api_name="/infer",
)llm_engine = HfApiEngine("Qwen/Qwen2.5-Coder-32B-Instruct")
# Initialize the agent with both tools and engine
agent = ReactCodeAgent(tools=[image_generation_tool], llm_engine=llm_engine)# Building UI
def interact_with_agent(prompt, history):messages = []yield messagesfor msg in stream_to_gradio(agent, prompt):messages.append(asdict(msg))  # type: ignoreyield messagesyield messagesdemo = gr.ChatInterface(interact_with_agent,chatbot= gr.Chatbot(label="Agent",type="messages",avatar_images=(None,"https://em-content.zobj.net/source/twitter/53/robot-face_1f916.png",),),examples=[["Generate an image of an astronaut riding an alligator"],["I am writing a children's book for my daughter. Can you help me with some illustrations?"],],type="messages",
)if __name__ == "__main__":demo.launch()

运行截图如下：

作者在本地运行时会报JSON解析错误：JSONDecodeError: Expecting value: line 1 column 1 (char 0)，解决办法无从查找，请读者使用Hugging Face的演示：https://huggingface.co/spaces/gradio/agent_chatbot。
从输出可以看到思考、工具调用和最终结果的调用过程，正是ReactCodeAgent代理的推理执行过程。

2. 使用Langchain agents的实际示例

我们将为一个可以访问搜索引擎的Langchain agents创建一个用户界面，将从导入库和设置Langchain agents开始。请注意，你需要一个包含以下环境变量的.env文件或将它们设置到运行环境中：SERPAPI_API_KEY=“”、HF_TOKEN=““和OPENAI_API_KEY=””。
演示代码如下：

from langchain import hub
from langchain.agents import AgentExecutor, create_openai_tools_agent, load_tools
from langchain_openai import ChatOpenAI
from gradio import ChatMessage
import gradio as gr
from dotenv import load_dotenvload_dotenv()model = ChatOpenAI(temperature=0, streaming=True)tools = load_tools(["serpapi"])# Get the prompt to use - you can modify this!
prompt = hub.pull("hwchase17/openai-tools-agent")
# print(prompt.messages) -- to see the prompt
agent = create_openai_tools_agent(model.with_config({"tags": ["agent_llm"]}), tools, prompt
)
agent_executor = AgentExecutor(agent=agent, tools=tools).with_config({"run_name": "Agent"}
)

然后创建Gradio UI：

async def interact_with_langchain_agent(prompt, messages):messages.append(ChatMessage(role="user", content=prompt))yield messagesasync for chunk in agent_executor.astream({"input": prompt}):if "steps" in chunk:for step in chunk["steps"]:messages.append(ChatMessage(role="assistant", content=step.action.log,metadata={"title": f"🛠️ Used tool {step.action.tool}"}))yield messagesif "output" in chunk:messages.append(ChatMessage(role="assistant", content=chunk["output"]))yield messageswith gr.Blocks() as demo:gr.Markdown("# Chat with a LangChain Agent 🦜⛓️ and see its thoughts 💭")chatbot = gr.Chatbot(type="messages",label="Agent",avatar_images=(None,"https://em-content.zobj.net/source/twitter/141/parrot_1f99c.png",),)input = gr.Textbox(lines=1, label="Chat Message")input.submit(interact_with_langchain_agent, [input_2, chatbot_2], [chatbot_2])demo.launch()

运行界面如下：

不能运行的读者可以在Hugging Face上查看完整演示：https://huggingface.co/spaces/gradio/langchain-agent。

11.5.2 使用显式思考的LLM构建UI

Gradio的Chatbot组件借助metadata可以原生显示一个思考型LLM的中间思考过程，这使得它非常适合创建展示AI模型在生成响应时如何“思考”的用户界面。以下将向你展示如何构建一个实时显示Gemini AI思考过程的聊天机器人。

1. 使用Gemini 2.0 Flash Thinking API构建

让我们创建一个完整的聊天机器人，实时显示其思考和响应。我们将使用Google的Gemini API来访问 Gemini 2.0 Flash Thinking LLM，并使用Gradio构建用户界面。

我们将从导入库和设置 Gemini 客户端开始。当然需要先获取一个 Google Gemini API密钥，代码如下：

import gradio as gr
from gradio import ChatMessage
from typing import Iterator
import google.generativeai as genaigenai.configure(api_key="your-gemini-api-key")
model = genai.GenerativeModel("gemini-2.0-flash-thinking-exp-1219")

First, let’s set up our streaming function that handles the model’s output:

def stream_gemini_response(user_message: str, messages: list) -> Iterator[list]:"""Streams both thoughts and responses from the Gemini model."""# Initialize response from Geminiresponse = model.generate_content(user_message, stream=True)# Initialize buffersthought_buffer = ""response_buffer = ""thinking_complete = False# Add initial thinking messagemessages.append(ChatMessage(role="assistant",content="",metadata={"title": "⏳Thinking: *The thoughts produced by the Gemini2.0 Flash model are experimental"}))for chunk in response:parts = chunk.candidates[0].content.partscurrent_chunk = parts[0].textif len(parts) == 2 and not thinking_complete:# Complete thought and start responsethought_buffer += current_chunkmessages[-1] = ChatMessage(role="assistant",content=thought_buffer,metadata={"title": "⏳Thinking: *The thoughts produced by the Gemini2.0 Flash model are experimental"})# Add response messagemessages.append(ChatMessage(role="assistant",content=parts[1].text))thinking_complete = Trueelif thinking_complete:# Continue streaming responseresponse_buffer += current_chunkmessages[-1] = ChatMessage(role="assistant",content=response_buffer)else:# Continue streaming thoughtsthought_buffer += current_chunkmessages[-1] = ChatMessage(role="assistant",content=thought_buffer,metadata={"title": "⏳Thinking: *The thoughts produced by the Gemini2.0 Flash model are experimental"})yield messages

然后创建Gradio界面：

with gr.Blocks() as demo:gr.Markdown("# Chat with Gemini 2.0 Flash and See its Thoughts 💭")chatbot = gr.Chatbot(type="messages",label="Gemini2.0 'Thinking' Chatbot",render_markdown=True,)input_box = gr.Textbox(lines=1,label="Chat Message",placeholder="Type your message here and press Enter...")# Set up event handlersmsg_store = gr.State("")  # Store for preserving user messageinput_box.submit(lambda msg: (msg, msg, ""),  # Store message and clear inputinputs=[input_box],outputs=[msg_store, input_box, input_box],queue=False).then(user_message,  # Add user message to chatinputs=[msg_store, chatbot],outputs=[input_box, chatbot],queue=False).then(stream_gemini_response,  # Generate and stream responseinputs=[msg_store, chatbot],outputs=chatbot)demo.launch()

这将创建一个具有以下功能的聊天机器人：

• 在可折叠部分中显示模型的思考过程；
• 实时流式传输思考过程和最终响应；
• 保持清晰的聊天记录。

完成！现在我们拥有了一个不仅能实时响应用户，还能展示其思考过程的聊天机器人，从而创建更加透明和引人入胜的交互体验。查看完整的Gemini 2.0 Flash Thinking演示地址：https://huggingface.co/spaces/ysharma/Gemini2-Flash-Thinking。

参考文献

1. Gradio - guides - Chatbots