🔥 专属服务
【关于我】
CSDN 技术分享者
专注[各种技术]分享
已帮助10000+开发者
【能帮你】
🎯 技术答疑
📚 学习规划
💼 项目指导
一、实验目的
- 理解并掌握基于 Gradio 框架的快速 Web 应用开发方法，通过构建智能门禁系统实现人机交互界面的设计与实现。
- 掌握模块化程序设计思想，理解 UI 层与业务逻辑层分离的架构设计模式。
二、实验目标
- 理解 Gradio 框架的核心组件：
- 掌握 gr.Blocks 高级布局 API 的使用
- 掌握常用输入组件（Textbox、Image）的配置方法
- 掌握常用输出组件（Textbox、Image）的数据绑定
- 掌握界面布局设计：
- 能够使用 gr.Row 和 gr.Column 实现响应式布局
- 能够使用 gr.Tabs 实现多标签页功能
- 理解组件的可见性控制（ visible 参数）
- 理解模块化架构设计：
- 掌握 UI 层与业务逻辑层分离的设计模式
- 理解回调函数的注册与绑定机制
- 掌握应用启动配置（服务器地址、端口设置）
三、代码实现
3.1 实验内容
- 使用 gr.Blocks 构建响应式 Web 界面框架
- 设计员工注册模块的表单布局（左右分栏）
- 配置图像上传组件支持本地文件和摄像头两种输入源
- 实现应用启动模块，配置服务器监听参数
3.2 实验步骤
步骤一：UI 层框架搭建（ui.py）
导入 Gradio 库，创建 Blocks 容器作为界面根元素。
import gradio as gr def create_interface(): """创建并返回 Gradio Blocks 实例。 说明: - 采用分层架构，UI 层只负责界面渲染 - 回调函数由 app.py 层注入，实现解耦 """ with gr.Blocks(title="智能门禁系统") as demo: # 系统标题 gr.Markdown( """ # 🛡️ 智能门禁系统（增强版） 基于华为云人脸识别服务 | 集成活体检测 + 尾随检测 + 语音迎宾 """ ) # TODO: 添加 Tabs 和具体功能组件 return demo步骤二：员工注册模块（👤 员工注册）
使用左右分栏布局，左侧为输入表单，右侧为结果展示。
with gr.Tabs(): with gr.Tab("👤 员工注册"): gr.Markdown("### 注册新员工") with gr.Row(): with gr.Column(): employee_id = gr.Textbox( label="员工编号", placeholder="如：EMP001", value="EMP001", ) name = gr.Textbox( label="员工姓名", placeholder="请输入姓名", value="张三", ) reg_image = gr.Image( label="人脸照片", type="pil", sources=["upload", "webcam"], # 双输入源 height=300, ) reg_btn = gr.Button( "📝 注册员工", variant="primary", size="lg" ) with gr.Column(): reg_output = gr.Textbox( label="注册结果", lines=10, interactive=False, ) reg_preview = gr.Image( label="照片预览", visible=True )步骤三：门禁验证模块（🔐 门禁验证）
核心功能模块，集成状态管理、多输入源、实时状态展示。
with gr.Tab("🔐 门禁验证"): gr.Markdown("### 人脸验证开门（已集成活体检测+尾随检测+语音迎宾）") with gr.Row(): with gr.Column(): # 状态管理：存储最新帧和输入来源 latest_frame = gr.State(value=None) latest_source = gr.State(value="unknown") # 双输入源配置 verify_webcam = gr.Image( label="摄像头画面（可直接开始验证）", type="pil", sources=["webcam"], height=350, ) verify_upload = gr.Image( label="或上传照片", type="pil", sources=["upload"], height=200, ) verify_btn = gr.Button( "🔍 开始验证", variant="primary", size="lg" ) # 实时状态显示 tailgating_status = gr.Textbox( label="尾随检测状态", value="", interactive=False, lines=1, ) with gr.Column(): # 富文本结果展示 verify_result = gr.HTML( label="验证结果", value='<div style="padding: 40px; color: #9ca3af; text-align: center; border: 2px dashed #e5e7eb; border-radius: 16px; background: #f9fafb;">等待验证...</div>', ) # 标签式状态显示 verify_status = gr.Label( label="门禁状态", value="等待验证..." ) # 语音播报组件 voice_status = gr.Textbox( label="语音播报状态", value="等待播报...", interactive=False, ) voice_audio = gr.Audio( label="语音播报", interactive=False, type="filepath", )步骤四：人脸比对模块（🔄 人脸比对）
实现 1:1 人脸相似度比对功能，双图并行展示。
with gr.Tab("🔄 人脸比对"): gr.Markdown("### 1:1人脸比对") with gr.Row(): compare_img1 = gr.Image( label="照片1", type="pil", sources=["upload", "webcam"], height=250, ) compare_img2 = gr.Image( label="照片2", type="pil", sources=["upload", "webcam"], height=250, ) compare_btn = gr.Button( "🔍 开始比对", variant="primary", size="lg" ) with gr.Row(): compare_result = gr.Textbox( label="比对结果", lines=4, interactive=False, ) # 数值仪表盘显示相似度 similarity_gauge = gr.Number( label="相似度", value=0, minimum=0, maximum=1, )页面输出：
步骤五：员工管理模块（📋 员工管理）
实现员工列表查询和删除功能。
with gr.Tab("📋 员工管理"): gr.Markdown("### 查看和管理员工") with gr.Row(): list_btn = gr.Button( "📋 列出所有员工", variant="primary" ) refresh_btn = gr.Button( "🔄 刷新", variant="secondary" ) employee_list = gr.Textbox( label="员工列表", lines=15, interactive=False, ) gr.Markdown("### 删除员工") with gr.Row(): del_id = gr.Textbox( label="员工编号", placeholder="输入要删除的员工编号" ) del_btn = gr.Button( "🗑️ 删除", variant="stop" # 危险操作使用红色样式 ) del_result = gr.Textbox( label="删除结果", interactive=False )页面输出
步骤六：应用启动层（app.py）
from ui import create_interface def create_app(): """创建应用实例，UI 与逻辑分离""" return create_interface() if __name__ == '__main__': demo = create_app() demo.launch( server_name='127.0.0.1', server_port=5001, )
