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

使用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有明显的区别。

代码示例：

# 创建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两种方式的区别。

1. 布局控制：

   • Interface：自动排列输入输出，无需手动控制布局
   • Blocks：通过 gr.Row()、gr.Column() 等手动控制组件布局

2. 事件处理：

   • Interface：自动关联输入输出和处理函数
   • Blocks：需要显式通过 .click() 等方法绑定事件

3. 灵活性：

   • Interface：适合简单场景，代码量少
   • Blocks：适合复杂界面，支持条件显示、多步骤交互等高级功能

4. 结构组织：

   • 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，以下是我用的提示词，仅供参考：

在当前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
)