gradio - 技术栈

一、简介

Gradio 是一个 Python 开源库 ，用几行代码就能快速把机器学习模型、大模型应用包装成可交互的 Web 界面，无需写前端 HTML/CSS/JS。

定位很明确：原型、演示、内部调试，几乎不用在正式生产对外服务。

一句话总结：Gradio 是 AI 开发者的 "快速出页面" 工具，写大模型 Demo 的标配。

核心特点

零前端代码：纯 Python 写界面，内置文本框、聊天窗、文件上传、滑块、图片等组件
开箱即用 ：gr.ChatInterface(fn) 一行代码出聊天界面
快速分享 ：launch(share=True) 生成临时公网链接，方便给别人演示
AI 生态友好：与 LangChain、HuggingFace、PyTorch 等无缝集成，大模型 Demo 首选工具

典型使用场景

大模型聊天 Demo（你前面写的 RAG 就是用它）
算法模型效果演示，给产品 / 测试看
本地调试 Agent、RAG、微调模型
快速做内部工具，不想写前端

开发阶段：大量用 Gradio

写 RAG、Agent、微调模型，不想写前端，十几行 Python 代码直接出来聊天界面，本地调试、给同事演示效果，效率极高。

测试 PDF 上传、切片、向量检索、大模型回答效果，直接页面上传文件，调整 top_k、temperature 参数，立刻看效果。

项目	说明
主要使用人群	算法工程师、大模型应用开发、学生、做Demo演示
使用场景	快速搭建可视化WebUI；本地调试Agent/RAG；给产品/测试看原型效果；做简单的模型体验Demo
不适合场景	线上公网生产业务、高并发、多用户、权限管控、对外提供正式产品
优点	Python几行代码就出网页；支持聊天框、文件上传、滑块参数调整；无需写前端JS；支持接口暴露；可一键生成公开临时链接分享
缺点	原生性能差，并发弱；没有完善用户鉴权、会话管理；生产部署需要套Nginx，很多坑；长连接容易断；不适合高流量
同类竞品	Streamlit、Gradio、Chainlit、Gradio‑oai‑chatbot

上线生产：抛弃 Gradio

Java 后端 (Spring AI Alibaba) + Vue/React 前端，正式业务；
如果想快速对外体验，会用 Chainlit / Open‑WebUI；

Gradio vs Streamlit 简单对比

工具	侧重点	聊天体验
Gradio	组件灵活，聊天组件成熟，适合大模型对话	⭐⭐⭐⭐⭐
Streamlit	数据展示、报表，做聊天界面比较繁琐	⭐⭐⭐

3. 企业项目经验总结

做内部原型、演示、调试 RAG/Agent：Gradio 是首选工具，用的极多
产品正式上线交付：不会直接用 Gradio，后端服务独立开发，自己做前端。
补充：很多开源大模型项目 (LlamaFactory、Qwen 推理 Demo) 默认的 WebUI 就是 Gradio。

4. API

python 复制代码

import gradio as gr

# 灵活布局，可自定义多组件、多标签页，适合复杂应用
gr.Blocks(title="最简RAG")
gr.Row()
gr.Column(scale=1):

# 文件上传（PDF/TXT/ 图片等）
file = gr.File(label="上传 PDF/TXT", file_types=[".pdf", ".txt"])
btn = gr.Button("加载到向量库", variant="primary")
status = gr.Textbox(label="状态", interactive=False)
btn.click(load_file, file, status)

# 通用输入输出界面，适合单功能 Demo
gr.Interface
# 开箱即用的聊天界面，自动维护历史对话
demo = gr.ChatInterface(chat, title="基于文件问答")
demo.launch(server_name="127.0.0.1", server_port=7860)

二、示例

HelloWorld

shell 复制代码

pip install gradio

python 复制代码

import gradio as gr

def greet(name):
    return f"Hello, {name}!"

demo = gr.Interface(
    fn=greet,
    inputs="text",
    outputs="text"
)

demo.launch()

启动一个web ui(http://127.0.0.1:7860)，机会只写后端代码，就可以提供一个页面供调试、演示、验证功能。

聊天示例

shell 复制代码

pip install gradio dashscope

python 复制代码

import os
import gradio as gr
from dashscope import Generation

os.environ["DASHSCOPE_API_KEY"] = "sk-xxxx"  # 替换你的key


def chat(message, history):
    """大模型聊天，history是历史对话列表"""
    # 1. 组装消息：历史 + 当前问题
    messages = []
    for user, assistant in history:
        messages.append({"role": "user", "content": user})
        messages.append({"role": "assistant", "content": assistant})
    messages.append({"role": "user", "content": message})

    # 2. 调用通义千问
    response = Generation.call(
        model="qwen-plus",
        messages=messages,
        result_format="message"
    )

    # 3. 返回回答
    return response.output.choices[0].message.content


# 3. 启动聊天界面
gr.ChatInterface(chat, title="大模型聊天 Demo").launch(server_name="127.0.0.1", server_port=7860)

RAG示例

shell 复制代码

pip install gradio chromadb langchain langchain-community dashscope pypdf

python 复制代码

import os
import gradio as gr
from langchain_community.document_loaders import PyPDFLoader, TextLoader
from langchain_text_splitters import RecursiveCharacterTextSplitter
from langchain_community.vectorstores import Chroma
from langchain_community.embeddings import DashScopeEmbeddings
from langchain_community.chat_models import ChatTongyi
from langchain_classic.chains import RetrievalQA

os.environ["DASHSCOPE_API_KEY"] = "sk-xxx"  # 替换通义API key

vector_store = None  # 全局向量库


def load_file(file_path):
    """上传文件 → 切片 → 写入Chroma"""
    global vector_store
    if not file_path:
        return "请先选择文件"

    # 1. 加载文件
    ext = os.path.splitext(file_path)[1].lower()
    loader = PyPDFLoader(file_path) if ext == ".pdf" else TextLoader(file_path, encoding="utf-8")
    docs = loader.load()

    # 2. 切片
    split_docs = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=80).split_documents(docs)

    # 3. 写入Chroma（自动调用通义embedding）
    embeddings = DashScopeEmbeddings(model="text-embedding-v3")
    if vector_store is None:
        vector_store = Chroma.from_documents(split_docs, embeddings, persist_directory="./chroma_db")
    else:
        vector_store.add_documents(split_docs)

    return f"✅ 加载完成，切片 {len(split_docs)} 块，可以开始提问了。"


def chat(message, history):
    """RAG问答：检索 + 通义千问生成"""
    if vector_store is None:
        return "请先上传文件。"

    llm = ChatTongyi(model="qwen-plus", temperature=0.3)
    qa = RetrievalQA.from_chain_type(llm, retriever=vector_store.as_retriever(search_kwargs={"k": 3}))
    return qa.run(message)


# Gradio界面：左侧上传文件，右侧聊天
with gr.Blocks(title="最简RAG") as demo:
    with gr.Row():
        with gr.Column(scale=1):
            file = gr.File(label="上传 PDF/TXT", file_types=[".pdf", ".txt"])
            btn = gr.Button("加载到向量库", variant="primary")
            status = gr.Textbox(label="状态", interactive=False)
            btn.click(load_file, file, status)
        with gr.Column(scale=2):
            gr.ChatInterface(chat, title="基于文件问答")

demo.launch(server_name="127.0.0.1", server_port=7860)