使用Gradio构建AI前端 - RAG的QA模块

摘要

本文将基于Gradio的Interface，继续构建RAG系统的QA前端页面，对比上一篇对召回测试前端页面的构建，来对比在Gradio下，Blocks和Interface的两种区别。

Gradio Interface简介

Gradio 是一个用于快速创建机器学习和数据科学演示界面的Python库，允许开发者通过简单代码将函数转换为交互式Web应用，无需前端开发经验。gr.Interface 是 Gradio 提供的一种快速创建界面的方式，适用于简单的输入输出场景，采用"函数驱动"模式，直接将函数与输入输出组件绑定。

核心特点：

结构简单，适合快速原型开发
输入输出组件按固定布局排列
基于函数映射，直接将输入传递给函数并展示输出

综上汇总，主要的特点就是简单，快。

Interface 与 Blocks 的区别

特性	Interface	Blocks
复杂度	简单，适合快速搭建	灵活，适合复杂界面
布局控制	自动布局，结构固定	完全自定义布局
交互逻辑	基于单一函数映射	支持多函数、事件触发
适用场景	简单输入输出场景	复杂交互、多步骤流程

相对来说，Interface的构建方式比Blocks要更简单，代码量更少。

通过下面的代码，可以看到跟Blocks有明显的区别。

代码示例：

python 复制代码

# 创建Gradio Interface
iface = gr.Interface(
    fn=run_qa,  # 核心处理函数
    inputs=[    # 输入组件列表
        gr.Textbox(
            label="问题",
            placeholder="请输入您的问题...",
            lines=3,
            info="例如: '哪些节假日应该安排休假？' 或 '什么是未成年？'"
        ),
        gr.Slider(
            label="Top-K检索数量",
            minimum=1,
            maximum=10,
            value=5,
            step=1,
            info="设置返回的最相似文档数量"
        )
    ],
    outputs=gr.Markdown(  # 输出组件
        label="回答结果"
    ),
    title="🤖 RAG问答系统",
    description="基于LangChain和Gradio构建的RAG问答系统，使用向量数据库进行知识检索",
    examples=[  # 示例问题
        ["哪些节假日应该安排休假？", 5],
        ["什么是未成年？", 3],
        ["足球比赛的基本规则是什么？", 4]
    ],
    theme=gr.themes.Soft(),
    allow_flagging="never"  # 禁用标记功能
)

下面是构建界面的样子：

通过以上代码，可以看到在gr.Interface里，首先指定捆绑的是哪一个function，然后在inputs和outputs，依次创建对应的前端组件，并且对应function里的输入参数和返回值。

这段代码调用项目里已经封装好的LC_RAG_03_QA.py里的方法。

关键区别点：

对比上一篇，这里汇总了Interface方式和Blocks两种方式的区别。

布局控制：
- Interface：自动排列输入输出，无需手动控制布局
- Blocks：通过 gr.Row()、gr.Column() 等手动控制组件布局
事件处理：
- Interface：自动关联输入输出和处理函数
- Blocks：需要显式通过 .click() 等方法绑定事件
灵活性：
- Interface：适合简单场景，代码量少
- Blocks：适合复杂界面，支持条件显示、多步骤交互等高级功能
结构组织：
- Interface：通过参数配置界面元素
- Blocks：使用上下文管理器（with 语句）组织界面结构

在本案例中，使用 gr.Interface 代码更简洁高效。如果需要更复杂的交互（如多步骤处理、条件显示组件等），则应选择 gr.Blocks。

所以如果是对模型功能的评估，建议选择gr.Interface，如果是做原型设计，建议选择gr.Blocks。

本文项目代码可以在以下仓库里找到：
https://github.com/microsoftbi/Langchain_DEMO/tree/main/RAG

此篇对应的代码是：LC_RAG_07c_Gradio.py

这里再补充一个快速的方法，就是借助AI开发工具，比如TRAE，以下是我用的提示词，仅供参考：

Prompt 复制代码

在当前python文件中，编写一个QA的前端界面，前端框架使用Gradio，不要使用blocks的方式构建页面，直接使用interface的方式来构建，使用的方法，调用LC_RAG_03_QA.py里的answer_question方法。

虽然在我使用的过程中，代码无法一次通过，但基本上通过一次反馈就可以修补成功，从而省下了这部分代码的工作量。
以下是代码的全部内容，点击展开。 ``` Python import gradio as gr from LC_RAG_03_QA import answer_question

def run_qa(question, top_k=5):

"""运行QA并返回结果"""

try:

answer, sources = answer_question(

question=question,

top_k=top_k,

vectorstore_dir="./RAG/chroma_db",

embedding_model="text-embedding-v4"

)

复制代码

    # 格式化结果
    result = f"# 🎯 答案\n\n{answer}\n"
    
    if sources:
        result += "\n# 📚 参考来源\n"
        for source in sources:
            result += f"- {source}\n"
    
    return result
except Exception as e:
    return f"❌ 错误: {str(e)}"

创建Gradio Interface

iface = gr.Interface(

fn=run_qa,

inputs=[

gr.Textbox(

label="问题",

placeholder="请输入您的问题...",

lines=3,

info="例如: '哪些节假日应该安排休假？' 或 '什么是未成年？'"

gr.Slider(

label="Top-K检索数量",

minimum=1,

maximum=10,

value=5,

step=1,

info="设置返回的最相似文档数量"

)

outputs=gr.Markdown(

label="回答结果"

title="🤖 RAG问答系统",

description="基于LangChain和Gradio构建的RAG问答系统，使用向量数据库进行知识检索",

examples=[

"哪些节假日应该安排休假？", 5\], \["什么是未成年？", 3\], \["足球比赛的基本规则是什么？", 4

theme=gr.themes.Soft(),

allow_flagging="never"

)

启动应用

if name == "main ":

iface.launch(

server_name="0.0.0.0",

server_port=7861,

share=False,

debug=False

)

复制代码