大模型WebUI:Gradio全解11——Chatbot:融合大模型的多模态聊天机器人(6)

大模型WebUI:Gradio全解11——Chatbot:融合大模型的多模态聊天机器人(6)

  • 前言
  • 本篇摘要
  • 11. Chatbot:融合大模型的多模态聊天机器人
    • 11.6 为LLM Agent构建UI
      • 11.5.1 使用代理构建
        • 1. 使用transformers.agents的实际示例
        • 2. 使用Langchain agents的实际示例
      • 11.5.2 使用显式思考的LLM构建UI
        • 1. 使用Gemini 2.0 Flash Thinking API构建
    • 参考文献

前言

本系列文章主要介绍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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/3215.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【React】插槽渲染机制

目录 通过 children 属性结合条件渲染通过 children 和 slot 属性实现具名插槽通过 props 实现具名插槽 在 React 中,并没有直接类似于 Vue 中的“插槽”机制(slot)。但是,React 可以通过 props和 children 来实现类似插槽的功能…

LoadBalancer负载均衡服务调用

LoadBalancer LoadBalancer(负载均衡器)是Spring Cloud中的一个关键组件,用于在微服务架构中实现服务请求的负载均衡。它的主要作用是将客户端的请求分发到多个服务实例上,以提高系统的可用性、性能和容错能力。通过LoadBalancer&…

Linux操作命令之云计算基础命令

一、图形化界面/文本模式 ctrlaltF2-6 图形切换到文本 ctrlalt 鼠标跳出虚拟机 ctrlaltF1 文本切换到图形 shift ctrl "" 扩大 ctrl "-" 缩小 shift ctrl "n" 新终端 shift ctrl "t" 新标签 alt 1,…

简历_使用优化的Redis自增ID策略生成分布式环境下全局唯一ID,用于用户上传数据的命名以及多种ID的生成

系列博客目录 文章目录 系列博客目录WhyRedis自增ID策略 Why 我们需要设置全局唯一ID。原因:当用户抢购时,就会生成订单并保存到tb_voucher_order这张表中,而订单表如果使用数据库自增ID就存在一些问题。 问题:id的规律性太明显、…

企业邮箱iRedMail搭建

用自己的域名作为邮箱的后缀,好看、有面子!只要域名不过期,那么,你的邮箱就永远存在! 邮件系统很多,宝塔自带的邮局更是简单,但是若想邮箱可靠(丢邮件、发送邮件进入对方垃圾箱等&a…

在 Fluent 网格划分中使用薄网格特征

薄体模型的网格划分策略 薄体网格划分对于有效模拟薄壁结构或厚度明显小于其他尺寸的几何形状非常有利。当使用此类几何结构时,传统的体积网格划分技术可能会导致单元数量增加,因为它们试图捕获具有许多不必要单元的薄尺寸。薄体网格划分通过专门沿薄方…

Windows重装后NI板卡LabVIEW恢复正常

在重新安装Windows系统后,NI(National Instruments)板卡能够恢复正常工作,通常是由于操作系统的重新配置解决了之前存在的硬件驱动、兼容性或配置问题。操作系统重装后,系统重新加载驱动程序、清理了潜在的冲突或损坏的…

Html5 video标签学习

<video> 标签的属性 autoplay布尔属性声明该属性后&#xff0c;视频会尽快自动开始播放&#xff0c;不会停下来等待数据全部加载完成。controls布尔属性如果存在该属性&#xff0c;浏览器会在视频底部提供一个控制面板&#xff0c;允许用户控制视频的播放。controlslist…

OpenAI推出首个AI Agent!日常事项自动化处理!

2025 年1月15日&#xff0c;OpenAI 正式宣布推出一项名为Tasks的测试版功能 。 该功能可以根据你的需求内容和时间实现自动化处理。比方说&#xff0c;你可以设置每天早晨 7 点获取天气预报&#xff0c;或定时提醒遛狗等日常事项。 看到这里&#xff0c;有没有一种熟悉的感觉&a…

【Linux】Socket编程-TCP构建自己的C++服务器

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 一&#xff1a;&#x1f525; Socket 编程 TCP &#x1f98b; TCP socket API 详解&#x1f98b; 多线程远程命令执行&#x1f98b; 网络版计算器&#xff08;应用层自定义协议与序列化…

web开发工具之:三、JWT的理论知识,java的支持,封装的工具类可以直接使用

文章目录 前言一、JWT的理论知识1. 什么是 JWT&#xff08;JSON Web Token&#xff09;&#xff1f;2. **JWT 的组成**3. **JWT 的特点**4. **JWT 的使用场景**5. **JWT 的生命周期**6. **JWT 的优点**7. **JWT 的注意事项**5. **JWT 示例**总结 二、java的springboot支持1. po…

Jira中bug的流转流程

Jira中bug的状态 1. 处理Bug的流程2. bug状态流转详述bug的状态通常包括 1. 处理Bug的流程 2. bug状态流转详述 bug的状态通常包括 未解决 1. 测试人员创建一个bug&#xff0c;填写bug的详细信息&#xff0c;如概要、bug级别、复现步骤、现状、预期结果等 2. 定位bug&#x…

ChatGPT结合Excel辅助学术数据分析详细步骤分享!

目录 一.Excel在学术论文中的作用✔ 二.Excel的提示词✔ 三. 编写 Excel 命令 四. 编写宏 五. 执行复杂的任务 六. 将 ChatGPT 变成有用的 Excel 助手 一.Excel在学术论文中的作用✔ Excel作为一种广泛使用的电子表格软件&#xff0c;在学术论文中可以发挥多种重要作用&a…

Vue篇-07

Vue UI组件库 一、移动端常用的UI组件库 1.1、Vant 1.2、Cube UI 1.3、Mint UI 二、PC端常用的UI组件库 2.1、Element UI Element - The worlds most popular Vue UI framework 安装&#xff1a; 按需引入&#xff1a; 135_尚硅谷Vue技术_element-ui按需引入_哔哩哔哩_b…

LabVIEW实现油浸式变压器自主监测与实时报告

油浸式变压器广泛应用于电力系统中&#xff0c;尤其是在电力传输和分配领域。为了确保变压器的安全、稳定运行&#xff0c;及时监测其工作状态至关重要。传统的变压器监测方法通常依赖人工巡检和定期检查&#xff0c;但这不能及时发现潜在的故障隐患&#xff0c;且效率较低。随…

测试工程师的linux 命令学习(持续更新中)

1.ls """1.ls""" ls -l 除文件名称外&#xff0c;亦将文件型态、权限、拥有者、文件大小等资讯详细列出 ls -l等同于 ll第一列共10位&#xff0c;第1位表示文档类型&#xff0c;d表示目录&#xff0c;-表示普通文件&#xff0c;l表示链接文件。…

如何使用Ultralytics训练自己的yolo5 yolo8 yolo10 yolo11等目标检测模型

Ultralytics正在以惊人的速度吸收优秀的CV算法&#xff0c;之前Ultralytics定位于YOLOV8&#xff0c;但逐渐地扩展到支持其他版本的YOLO&#xff0c;最新版本的ultralytics全面支持yolo5 yolo7 yolo8 yolo9 yolo10 yolo11&#xff0c;包含模型的训练、验证、预测、部署等。毫无…

使用 Java 实现基于 DFA 算法的敏感词检测

使用 Java 实现基于 DFA 算法的敏感词检测 1. 引言 敏感词检测在内容审核、信息过滤等领域有着广泛的应用。本文将介绍如何使用 DFA&#xff08;Deterministic Finite Automaton&#xff0c;确定有限状态自动机&#xff09; 算法&#xff0c;在 Java 中实现高效的敏感词检测。…

Digital Document System (DDS)

Digital Document System (DDS&#xff09; 数字档案平台 信息注入

将图像输入批次扁平化为CNN

将图像输入批次扁平化为CNN 欢迎回到这个神经网络编程系列。在这篇文章中&#xff0c;我们将可视化一个单一灰度图像的张量扁平化操作&#xff0c;并且我们将展示如何扁平化特定的张量轴&#xff0c;这在使用CNN时通常是必需的&#xff0c;因为我们处理的是输入批次&#xff0…