LLM应用开发与落地:使用gradio十分钟搭建聊天UI
一、背景
如果你是做LLM应用开发的,特别是做后端开发,你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中,毕竟react.js, next.js, css, html也不是每个人都那么熟练,对吧?即使你是做前端开发的,你也可以尝试一下Gradio,哪天有人给你提了一个调试界面的需求,原本要半天的工作现在只需要十分钟了,多余的时机用来学习或享受生活,多美(或者,你让后端自己用Gradio搞一个,嘿嘿)。
类似于Gradio这种低代码快速搭建web ui的方案中,比较成熟还有 Streamlit、Chainlit和dash 等。这些方案都可以快速实现 ChatGPT/Claude 类似的聊天机器人或者文档机器人,感兴趣的可以看看,找适合自己的。我个人喜欢简单直接,所以选择了Gradio。
二、Gradio介绍
我认为Gradio 是现有几个低代码web UI框架当中最简单和容易上手的一个。无论是从安装部署,还是学习使用,对新人都非常友好。Gradio 自己的价值宣传也是强调易用性,旨在让非技术用户也能与复杂模型进行交互。是的,它可不是只适用于LLM的,其他方面感兴趣的大家可以进一步去研究,我这里只聊创建用于测试和验证 LLM 应用的聊天界面。
Gradio安装起来非常简单,只需要执行:
pip install gradio
我们可以看看官网给出的hello world 例子:
import gradio as gr
def greet(name):return "Hello " + name + "!"
demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()
把上边代码保存到 gradio_hello.py 文件中,然后执行以下命令:
python gradio_hello.py
如果一切正常,没有报错的话,你打开 http://localhost:7860 可以看到以下界面:

如果你在输入框输入“前行的七哥”,你会看到输出框的输出如下:

代码中greet(name)函数的输入参数name会捕获到输入框的输入,greet(name)函数的输出会填充到输出框,就是这么简单。
三、使用Gradio搭建聊天界面
只需要以下3,4行代码就可以实现聊天界面(别看下边挺多行的,都是注释)。
import random
import gradio as gr
"""
用户输入后的回调函数 random_response
参数:
message: 用户此次输入的消息
history: 历史聊天记录,比如 [["use input 1", "assistant output 1"],["user input 2", "assistant output 2"]]
返回值:输出的内容
"""
def random_response(message, history):return random.choice(["Yes", "No"])gr.ChatInterface(random_response).launch()
生成出来的界面如下:

当然,你也可以自己通过基础组件自定义聊天界面,比如:
import gradio as gr
import random
import time
with gr.Blocks() as demo:chatbot = gr.Chatbot() # 对话框msg = gr.Textbox() # 输入文本框clear = gr.ClearButton([msg, chatbot]) # 清除按钮
"""用户输入后的回调函数 respond参数message: 用户此次输入的消息history: 历史聊天记录,比如 [["use input 1", "assistant output 1"],["user input 2", "assistant output 2"]]返回值:第一个:设置输入框的值,输入后需要重新清空,所以返回空字符串,第二个:最新的聊天记录"""def respond(message, chat_history):bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])chat_history.append((message, bot_message))time.sleep(2)return "", chat_history
# 绑定输入框内的回车键的响应函数msg.submit(respond, [msg, chatbot], [msg, chatbot])
demo.launch()
生成的界面如下:

四、挂载到fastapi实现的后端
如果你的后端是基于fastapi实现的,你希望把Gradio接入到你的项目中,那也非常方便,核心代码如下:
app = FastAPI()
chat_ui = gr.ChatInterface(agent_framework_run)
app = gr.mount_gradio_app(app, chat_ui, path="/gradio_chat")
加入以上代码后,你跟之前一样启动你的fastapi后端,然后访问 http://you.domain.name/gradio_chat ,你就可以看到一个聊天机器人界面。
如果你需要多个不同的聊天界面调试不同的功能,你只需要再增加一个ui和响应函数就行,比如:
app = FastAPI()
chat_ui = gr.ChatInterface(agent_framework_run)
app = gr.mount_gradio_app(app, chat_ui, path="/gradio_chat")
tool_ui = gr.ChatInterface(agent_recommend_tool)
app = gr.mount_gradio_app(app, io, path="/gradio_tool")
访问 http://you.domain.name/gradio_tool 就可以看到新增的工具界面 tool_ui。
五、总结
Gradio是我认为这么多低代码web UI 中最简单的一个,上手非常容易,用来展示和验证应用远远足够了。我目前也是用Gradio验证智能客服机器人的一些功能。学新东西建议都从最简单的入手,不满足再去研究更复杂的。循序渐进地学习更容易持续,也会更有成就感。
Gradio 官网的文档和教程都非常清晰和易懂,还有一个在线的编辑器给你快速体验效果。如果有需要,强烈建议尝试一下。
Gradio官网地址:https://www.gradio.app/
我目前正在开发一款基于自研的LLM agent framework 的智能客服产品,它具有私有知识问答,意图引导、信息收集、情绪安抚、内部系统融合、LUI与GUI 融合、数据孤岛打通、人工接管、数据分析与洞察、异常监控等功能。
欢迎对prompt编写、LLM应用开发与落地、智能客服产品等等感兴趣的朋友加我微信,一起交流,共同前行。
下边是我最近写的用来调 agent framework 的界面代码,供大家参考:
from fastapi import FastAPI, Request
import uvicorn
from datetime import datetime, time, date
import gradio as gr
from agent import agent_framework, agent_main
CUSTOM_PATH = "/agent_bot"
app = FastAPI()
with gr.Blocks() as chat_ui:chatbot = gr.Chatbot(show_label=False, height=600, avatar_images=["https://hong.greatdk.com/_next/image?url=%2Fself.jpg&w=1920&q=75", "https://hong.greatdk.com/_next/image?url=%2Fnpc.jpg&w=1920&q=75"])with gr.Row() as input_row:msg_textbox = gr.Textbox(show_label=False, scale=15)submit_btn = gr.Button(value="发送", scale=1)
clear_btn = gr.ClearButton([msg_textbox, chatbot],value="清除会话")
def respond(message, chat_history):print(f"message:{message}, strpped:{message.strip()}")print(f"history:{chat_history}")if len(message.strip()) <= 0 :print(f"message is empty, ignore the message")return "", chat_historyinit_agent = agent_main.AgentMain()af = agent_framework.AgentFramework(init_agent=init_agent)bot_message = af.run(message.strip(), chat_history)chat_history.append((message.strip(), bot_message))return "", chat_history
msg_textbox.submit(respond, [msg_textbox, chatbot], [msg_textbox, chatbot]) # 在输入框按回车也进行发送submit_btn.click(respond, [msg_textbox, chatbot], [msg_textbox, chatbot]) # 绑定按钮点击函数app = gr.mount_gradio_app(app, chat_ui, path=CUSTOM_PATH)
@app.get("/")
def root():return {"message": "hello world!!!"}
相关文章:
LLM应用开发与落地:使用gradio十分钟搭建聊天UI
一、背景 如果你是做LLM应用开发的,特别是做后端开发,你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中,毕竟react.js, next.js, css, html也不是每个人都那么熟练,对吧?即使…...
智慧城市:打造低碳未来,引领城市数字化转型新篇章
在“万物皆可数字化”的新时代浪潮下,智慧城市作为未来城市发展的先锋方向,正在以前所未有的速度和规模重塑我们的城市面貌。 智慧城市不仅是一个技术革新的标志,更是城市治理、民生服务等领域全面升级的重要引擎。 一、智慧城市的多元应用领…...
ChatGPT之制作短视频
引言 今天带来了如何使用 ChatGPT和剪映来制作简单的短视频教程,在这其中 ChatGPT的作用主要是帮我们生成文案,剪映的功能就是根据文案自动生成视频,并配上一些图片、动画、字幕和解说。 ChatGPT生成文案 首先,我们需要使用提示…...
k8s学习(RKE+k8s+rancher2.x)成长系列之简配版环境搭建(二)
三、简配版集群,适用于demo环境 1.集群架构设计 主机名角色配置(核数,内存,磁盘)MasterRKE,controlplane,etcd,worker,rancher-master2C 8G 40GSlaver1controlplane,worker,rancher-master2C 8G 40GSlaver2controlplane,worker,rancher-mas…...
智能优化算法 | Matlab实现合作优化算法(CSA)(内含完整源码)
文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 智能优化算法 | Matlab实现合作优化算法(CSA)(内含完整源码) 源码设计 clear clc close SearchAgents_no=30; % Number of search agents Max_iteration=1000;...
mysql如何备份某些库的某些表
MySQL备份数据库 mysql如何备份某些库的某些表 要备份某个库里的部分表,该如何操作? 例如:要备份db01库里的20张表,表很多又不想备份整个库 或者要备份多个库里的不同表,又如何操作? 例如:备份…...
C++类和对象入门(三)
顾得泉:个人主页 个人专栏:《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂,年薪百万! 前言 在c中,类型分为两类,一类是内置类型,另一类是自定义类型。 1.内置类型…...
【0255】揭晓pg内核中MyBackendId的分配机制(后端进程Id,BackendId)(一)
文章目录 1. 前言2. MyBackendId分配机制2.1 全局变量MyBackendId2.2 共享缓存无效内存段(shared inval buffer)2.2.1 shmInvalBuffer缓冲区2.2.2 shmInvalBuffer初始化1. 前言 MyBackendId的数据类型是BackendId(backendid.h src/include/storage),它表示“当前活动的后…...
Python爬虫requests库详解
使用 requests 上一节中,我们了解了 urllib 的基本用法,但是其中确实有不方便的地方,比如处理网页验证和 Cookies 时,需要写 Opener 和 Handler 来处理。为了更加方便地实现这些操作,就有了更为强大的库 requests&…...
【漏洞复现】EPON上行A8-C政企网关信息泄露漏洞
Nx01 产品简介 EPON上行A8-C政企网关是一款终端产品,提供企业网络解决方案。 Nx02 漏洞描述 EPON上行A8-C政企网关敏感信息泄露漏洞,攻击者通过敏感信息泄露获取管理员密码。 Nx03 产品主页 fofa-query: "ZXECS" && title"Web…...
发送get请求并且发送请求头(header),java实现
发送get请求时,发送请求头(Header)中的内容 方便第二次调用其他url时传递参数,例如userCode或者租户编码 调用方式 Autowired private HttpServletRequest request;先注入HttpServletRequestpublic xxx xxx(){String url &quo…...
介绍docker
一:介绍docker: Docker 并没有单独的图形界面,它主要通过命令行来进行管理和操作 1、 docker ps:显示正在运行的容器。 docker images:显示本地的镜像。 docker run:创建并启动一个新容器。 docker stop&a…...
Web课程学习笔记--CSS盒模型
CSS 盒模型 盒模型 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所…...
中学一级教师是什么职称等级
在教育的世界里,每一个角色都肩负着不可或缺的使命。其中,中学一级教师这一职称,就如同武侠小说里的“隐藏高手”,不显山不露水,却拥有着举重若轻的实力。 中学一级教师究竟是个怎样的职称等级呢?今天&…...
2024年2月CCF-全国精英算法大赛题目
第一次参加这种比赛,虽然是c类赛事,但是是ccf主办的,难度还是有点的,主要是前面签到题主要是思想,后面的题目难度太高,身为力扣只刷了一百多道题目的我解决不了,这几道我只做了B,C题,E题超时了&…...
arm 汇编积累
C语言函数与汇编对应关系 一、MOV 系列指令 1、指令格式 MOV{条件}{S} 目的寄存器,源操作数 2、含义解析: (1):mov 指令传送数据 案例: MOV R0,R1 ; R0 R1; MOV PC,R14 ;PC R14; MOV R0,R…...
SpringBoot整理-安全(Spring Security)
在 Spring Boot 应用中实现安全性通常涉及到集成 Spring Security 框架。Spring Security 是一个功能强大且高度可定制的认证和访问控制框架,非常适合用于保护 Spring Boot 应用。 核心特性 认证: 认证是确认某个实体的身份,Spring Security 支持多种认证机制,如表单登录、L…...
【技能树学习】Git入门——练习题解析
前言 本篇文章给出了Git入门技能树中部分的练习题解析,包括分支管理,Git标签,在Mac和Windows上使用GitVSCode的步骤。强调了git cherry-pick不直接支持从标签中选择提交,git tag -d只能删除本地标签,Mac系统的终端可以…...
Springboot+vue的企业财务管理系统(有报告)。Javaee项目,springboot vue前后端分离项目
演示视频: Springbootvue的企业财务管理系统(有报告)。Javaee项目,springboot vue前后端分离项目 项目介绍: 本文设计了一个基于Springbootvue的前后端分离的企业财务管理系统,采用M(model&…...
手撕spring bean的加载过程
这里我们采用手撕源码的方式,开始探索spring boot源码中最有意思的部分-bean的生命周期,也可以通过其中的原理理解很多面试以及工作中偶发遇到的问题。 springboot基于约定大于配置的思想对spring进行优化,使得这个框架变得更加轻量化&#…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
