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

代码示例：

/* by 01130.hk - online tools website : 01130.hk/zh/formatphp.html */ # 创建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，以下是我用的提示词，仅供参考：

/* by 01130.hk - online tools website : 01130.hk/zh/formatphp.html */ 在当前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"
)