AI学习——Gradio快速界面

Gradio 快速做网页界面

• [一、Gradio 是什么？](#一、Gradio 是什么？)
• • 最常用组件
• 二、我们要做的最终功能
• 三、安装依赖
• [四、完整代码：文档问答 RAG + Gradio 界面](#四、完整代码：文档问答 RAG + Gradio 界面)
• 五、界面功能说明
• • [1. 上传区域](#1. 上传区域)
  • [2. 聊天区域](#2. 聊天区域)
  • [3. 运行后你会得到](#3. 运行后你会得到)
• [六、Gradio 核心知识点](#六、Gradio 核心知识点)
• • [1. Blocks = 页面布局](#1. Blocks = 页面布局)
  • [2. ChatInterface = 快速聊天界面](#2. ChatInterface = 快速聊天界面)
  • [3. File = 文件上传](#3. File = 文件上传)
  • [4. Button.click = 按钮点击事件](#4. Button.click = 按钮点击事件)

---

一、Gradio 是什么？

Gradio = 5分钟把Python代码变成漂亮网页界面

• 不用写 HTML/CSS/JS
• 支持：上传文件、文本框、按钮、聊天框、多页面
• 最适合 AI 项目演示、本科答辩展示

最常用组件

• gr.Textbox() 文本输入
• gr.Button() 按钮
• gr.File() 文件上传
• gr.Chatbot() 聊天界面
• gr.Markdown() 格式化输出

---

二、我们要做的最终功能

✅ 上传 TXT/PDF/MD 文档

✅ 自动分块 + 存入向量库

✅ 聊天式问答（带记忆）

✅ 基于 RAG 检索回答

✅ 漂亮网页界面

---

三、安装依赖

pip install gradio langchain chromadb langchain-community pypdf

---

四、完整代码：文档问答 RAG + Gradio 界面

import gradio as gr
from langchain_community.document_loaders import TextLoader, PyPDFLoader
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain_community.vectorstores import Chroma
from langchain_community.embeddings import HuggingFaceEmbeddings
from langchain_openai import ChatOpenAI
from langchain.chains import RetrievalQA
import os

# ======================
# 1. 初始化模型
# ======================
llm = ChatOpenAI(
    model="gpt-3.5-turbo",
    temperature=0.1,
    api_key="你的API_KEY",
    base_url="https://api.chatanywhere.tech/v1"
)

embeddings = HuggingFaceEmbeddings(model_name="BAAI/bge-small-zh")
vector_store = None

# ======================
# 2. 上传文件 → 构建知识库
# ======================
def upload_files(files):
    global vector_store
    docs = []

    for file in files:
        try:
            if file.name.endswith(".pdf"):
                loader = PyPDFLoader(file.name)
            elif file.name.endswith(".txt") or file.name.endswith(".md"):
                loader = TextLoader(file.name, encoding="utf-8")
            else:
                continue
            docs.extend(loader.load())
        except:
            pass

    # 分块
    splitter = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=50)
    chunks = splitter.split_documents(docs)

    # 存入向量库
    vector_store = Chroma.from_documents(chunks, embeddings)
    return f"✅ 上传成功！共 {len(chunks)} 段文本，可开始提问"

# ======================
# 3. 问答功能（RAG 检索）
# ======================
def chat(question, history):
    if not vector_store:
        return "❌ 请先上传文档！", history

    qa_chain = RetrievalQA.from_chain_type(
        llm=llm,
        retriever=vector_store.as_retriever(search_kwargs={"k": 3}),
        return_source_documents=False
    )

    answer = qa_chain.run(question)
    return answer

# ======================
# 4. Gradio 界面（核心）
# ======================
with gr.Blocks(title="文档问答RAG系统") as demo:
    gr.Markdown("# 📄 文档智能问答工具（RAG）")

    # 上传区
    file_upload = gr.File(
        file_count="multiple",
        label="上传文档（TXT/PDF/MD）"
    )
    upload_btn = gr.Button("✅ 上传并构建知识库", variant="primary")
    status = gr.Textbox(label="状态", interactive=False)

    upload_btn.click(upload_files, inputs=file_upload, outputs=status)

    # 聊天区
    gr.Markdown("## 💬 开始提问")
    gr.ChatInterface(
        fn=chat,
        title="AI 问答助手",
        retry_btn=None,
        undo_btn=None
    )

# ======================
# 5. 启动网页
# ======================
if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", server_port=7860, share=True)

---

五、界面功能说明

1. 上传区域

• 支持上传 多个 TXT / PDF / MD
• 点击按钮 → 自动构建知识库

2. 聊天区域

• 直接提问
• AI 只根据你上传的文档回答
• 带上下文记忆

3. 运行后你会得到

• 本地地址：http://localhost:7860
• 公网地址（可发给别人）

---

六、Gradio 核心知识点

1. Blocks = 页面布局

with gr.Blocks() as demo:
    # 放组件

2. ChatInterface = 快速聊天界面

gr.ChatInterface(fn=你的函数)

3. File = 文件上传

gr.File(file_count="multiple")

4. Button.click = 按钮点击事件

btn.click(函数, 输入, 输出)

---