RAG 实战：基于 Gradio 构建本地文件上传与对话 UI 界面

前言

在上一节中，我们实现了 RAG（检索增强生成）的基本流程，包括文档解析、向量化存储和检索。本节将在此基础上增加一个 Web 用户界面（UI），利用浏览器打开，实现上传本地文件、解析文档，并利用大模型实现与该文档的对话。这实际上是一个简化版的 ChatPDF 或企业知识库对话系统。

技术选型

界面采用 Python 的 Gradio 库。该库在机器学习和大模型领域非常流行，运行后会启动一个本地 Web 服务器，并在默认浏览器中打开一个新页面，显示交互界面。其优势在于开发效率极高，适合快速原型验证。

环境准备

在开始之前，请确保已安装以下依赖：

Python 3.8+
Gradio 库
前文实现的 RAG 核心模块（如 rag.py）

安装 Gradio 命令如下（建议使用国内镜像源以提高速度）：

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple gradio

第一步：创建基础文件上传界面

首先，我们需要一个能够接收用户上传文件的界面。即使不熟悉 Gradio，也可以通过简单的几行代码实现。

基本代码如下：

import gradio as gr

def upload_file(input_file):
    # input_file 是上传的文件对象
    return f"你上传的文件内容是：\n{input_file}"

gr.Interface(
    fn=upload_file,
    inputs="file",
    outputs="text",
    title="文件上传器",
    description="请点击按钮上传文件。",
    allow_flagging=False
).launch()

运行后，点击界面上的'选择文件'按钮，选择本地文件并提交，右侧输出框会显示文件路径信息。

第二步：集成 RAG 后端逻辑

接下来，我们将上传的文件处理逻辑与 RAG 系统结合。当用户上传图片时，我们需要调用 RAG 类的接口来创建向量数据库。

假设我们已经有一个封装好的 RAG_Bot 类，它包含 createVectorDB 方法用于初始化向量库，以及 chat 方法用于问答。

修改后的处理函数如下：

from rag import RAG_Bot

chat_bot = RAG_Bot()

def upload_file(input_file):
    if input_file:
        # 创建向量库，灌入数据
        chat_bot.createVectorDB(input_file)
        return f"文件已上传并建立索引：\n{input_file.name}"
    return "未检测到文件"

注意：在实际项目中，createVectorDB 内部应包含文本提取、分块、嵌入和存储到向量数据库的全过程。

第三步：添加聊天交互窗口

为了提供完整的对话体验，我们需要在同一个界面上添加一个文本输入框，用于发送查询。

定义处理函数，同时接收文件和聊天输入：

import gradio as gr
from rag import RAG_Bot

chat_bot = RAG_Bot()

def process_inputs(input_file, chat_input):
    outputs = ["", ""]
    
    # 处理文件上传
    if input_file is not None:
        chat_bot.createVectorDB(input_file)
        outputs[0] = f"文件处理完成：\n{str(input_file)}"
    
    # 处理聊天输入
    if chat_input != "":
        # 将聊天输入当作 query，进行对话
        outputs[1] = chat_bot.chat(chat_input)
        
    return tuple(outputs)

# 定义输入输出组件
inputs = [gr.File(), gr.Textbox(label="聊天输入")]
outputs = [gr.Textbox(label="文件状态"), gr.Textbox(label="对话结果")]

iface = gr.Interface(
    fn=process_inputs,
    inputs=inputs,
    outputs=outputs,
    title="RAG 知识库对话",
    description="上传文档后，即可在此提问。",
    allow_flagging=False
)
iface.launch()

第四步：运行与调试

运行上述脚本后，终端会显示访问地址（通常是 http://127.0.0.1:7860）。在浏览器中打开该地址即可看到界面。

常见调试问题：

端口占用：如果 7860 端口被占用，可以在 launch() 中添加 server_port=8080 指定其他端口。
文件编码：确保上传的文档编码格式（如 utf-8）能被 RAG 模块正确读取。
向量库初始化：首次上传文件时，向量库构建可能需要一定时间，建议在 UI 上增加进度条提示。

进阶优化建议

流式输出：对于大模型的回复，可以使用 stream_output=True 参数实现打字机效果，提升用户体验。
多文件支持：当前版本仅支持单文件上传，可改为 gr.Files() 支持批量上传。
会话历史：目前的实现是无状态的，若需保留上下文记忆，需引入 Session State 管理。
部署上线：生产环境建议使用 Gunicorn 配合 Nginx 部署 Gradio 应用，而非直接使用 launch()。

总结

通过本教程，我们成功将 RAG 后端与 Gradio 前端结合，实现了本地文件上传与智能对话的功能。虽然这是一个 Demo 版本，但它展示了 LLM 应用开发中前后端分离的基本模式。掌握 Gradio 可以快速验证想法，后续可根据需求迁移至 Streamlit 或 React 等更复杂的前端框架。

RAG 实战：基于 Gradio 构建本地文件上传与对话 UI 界面