Gradio项目实战：构建带思维过程展示的LLM智能体聊天界面-优快云博客

Gradio项目实战：构建带思维过程展示的LLM智能体聊天界面

gradio Gradio是一个开源库，主要用于快速搭建和分享机器学习模型的交互式演示界面，使得非技术用户也能轻松理解并测试模型的功能，广泛应用于模型展示、教育及协作场景。项目地址: https://gitcode.com/gh_mirrors/gr/gradio

引言

在现代AI应用开发中，大型语言模型(LLM)智能体的交互界面设计变得越来越重要。Gradio作为一款强大的Python库，为开发者提供了快速构建这类界面的能力。本文将深入探讨如何利用Gradio的Chatbot组件创建能够展示LLM思维过程和工具使用情况的交互界面。

Gradio Chatbot的核心特性

Gradio的Chatbot组件原生支持展示LLM的中间思考过程和工具使用情况，这些内容会以可折叠的侧边栏形式呈现在聊天消息旁边。这一特性使得它非常适合用于：

构建LLM智能体的用户界面
展示思维链(Chain-of-Thought)推理过程
可视化模型的多步决策过程

ChatMessage数据结构详解

Gradio中的每条聊天消息都是一个ChatMessage数据类（当Chatbot的type="message"时）。其结构定义如下：

@dataclass
class ChatMessage:
    content: str | Component  # 消息内容
    role: Literal["user", "assistant"]  # 发送者角色
    metadata: MetadataDict = None  # 元数据字典
    options: list[OptionDict] = None  # 选项列表

其中，metadata字典是最关键的部分，它控制着思维过程的展示方式。如果包含title字段，就会在消息旁边显示一个可折叠的思维过程面板。

基础示例：简单思维过程展示

让我们从一个基础示例开始，展示如何添加简单的思维过程：

import gradio as gr

with gr.Blocks() as demo:
    chatbot = gr.Chatbot(
        type="messages",
        value=[
            gr.ChatMessage(
                role="user", 
                content="旧金山现在的天气如何？"
            ),
            gr.ChatMessage(
                role="assistant", 
                content="我需要使用天气API工具吗？",
                metadata={"title": "🧠 思考中"}
            )
        ]
    )

demo.launch()

在这个例子中，助手的回复旁边会显示一个"🧠 思考中"的可折叠面板。

元数据字段详解

metadata字典支持多个可选字段，用于丰富思维过程的展示：

log: 在标题旁边显示辅助说明文字
duration: 显示思考/工具使用的持续时间（秒）
status: 控制初始状态（"pending"显示加载动画，"done"默认折叠）
id和parent_id: 用于创建嵌套的思维过程

实战案例一：集成Transformers智能体

下面我们构建一个实际的智能体应用，该智能体可以使用文生图工具：

import gradio as gr
from transformers import Tool, ReactCodeAgent
from transformers.agents import stream_to_gradio, HfApiEngine

# 初始化工具和智能体
image_generation_tool = Tool.from_space(
    space_id="black-forest-labs/FLUX.1-schnell",
    name="image_generator",
    description="根据提示生成图像，返回PIL图像对象",
    api_name="/infer",
)

llm_engine = HfApiEngine("Qwen/Qwen2.5-Coder-32B-Instruct")
agent = ReactCodeAgent(tools=[image_generation_tool], llm_engine=llm_engine)

# 交互函数
def interact_with_agent(prompt, history):
    messages = []
    yield messages
    for msg in stream_to_gradio(agent, prompt):
        messages.append(asdict(msg))
        yield messages
    yield messages

# 构建界面
demo = gr.ChatInterface(
    interact_with_agent,
    chatbot=gr.Chatbot(
        label="智能体",
        type="messages",
        avatar_images=(
            None,
            "https://example.com/robot.png",  # 替换为实际机器人头像URL
        ),
    ),
    examples=[
        ["生成一张宇航员骑鳄鱼的图片"],
        ["我在为女儿写儿童书，能帮我做些插图吗？"],
    ],
    type="messages",
)

实战案例二：集成LangChain智能体

下面展示如何集成LangChain智能体，并显示其使用搜索引擎的过程：

from langchain import hub
from langchain.agents import AgentExecutor, create_openai_tools_agent, load_tools
from langchain_openai import ChatOpenAI
import gradio as gr

# 初始化LangChain智能体
model = ChatOpenAI(temperature=0, streaming=True)
tools = load_tools(["serpapi"])
prompt = hub.pull("hwchase17/openai-tools-agent")
agent = create_openai_tools_agent(model, tools, prompt)
agent_executor = AgentExecutor(agent=agent, tools=tools)

# 异步交互函数
async def interact_with_langchain_agent(prompt, messages):
    messages.append(gr.ChatMessage(role="user", content=prompt))
    yield messages
    async for chunk in agent_executor.astream({"input": prompt}):
        if "steps" in chunk:
            for step in chunk["steps"]:
                messages.append(gr.ChatMessage(
                    role="assistant", 
                    content=step.action.log,
                    metadata={"title": f"🛠️ 使用工具 {step.action.tool}"}
                ))
                yield messages
        if "output" in chunk:
            messages.append(gr.ChatMessage(role="assistant", content=chunk["output"]))
            yield messages

# 构建界面
with gr.Blocks() as demo:
    gr.Markdown("# 与LangChain智能体聊天 🦜⛓️ 并查看其思考过程 💭")
    chatbot = gr.Chatbot(
        type="messages",
        label="智能体",
        avatar_images=(None, "https://example.com/parrot.png"),
    )
    input_box = gr.Textbox(lines=1, label="聊天消息")
    input_box.submit(interact_with_langchain_agent, [input_box, chatbot], [chatbot])

进阶技巧：展示模型思考过程

Gradio还可以用来展示LLM生成回答时的实时思考过程。以下是一个使用Gemini API的示例：

import gradio as gr
import google.generativeai as genai

genai.configure(api_key="your-api-key")
model = genai.GenerativeModel("gemini-pro")

def stream_gemini_response(user_message, messages):
    response = model.generate_content(user_message, stream=True)
    
    # 添加初始思考消息
    messages.append(gr.ChatMessage(
        role="assistant",
        content="",
        metadata={"title": "⏳思考中"}
    ))
    
    for chunk in response:
        # 更新思考内容
        messages[-1] = gr.ChatMessage(
            role="assistant",
            content=chunk.text,
            metadata={"title": "⏳思考中"}
        )
        yield messages
    
    # 最终响应
    messages.append(gr.ChatMessage(
        role="assistant",
        content=response.text
    ))
    yield messages