使用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方法。

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

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
    )