YOLOE + Gradio：快速搭建可视化检测界面-程序员充电站

YOLOE + Gradio：快速搭建可视化检测界面

在智能安防、工业质检、自动驾驶等场景中，目标检测早已成为不可或缺的技术环节。然而，传统检测模型大多局限于预定义类别，面对“开放词汇”或“零样本识别”需求时往往束手无策。YOLOE 的出现打破了这一局限——它不仅具备实时推理能力，还支持文本提示、视觉提示和无提示三种模式，真正实现了“看见一切”。

但再强大的模型，若缺乏直观的交互方式，也难以被广泛使用。本文将带你用Gradio为 YOLOE 快速构建一个可视化检测界面，实现上传图片、输入提示词、一键检测并展示结果的完整流程。整个过程无需前端知识，代码简洁，适合快速验证与部署。

1. 环境准备：一键启动 YOLOE 官版镜像

我们使用的YOLOE 官版镜像已集成所有依赖环境，开箱即用。以下是基础操作步骤：

1.1 激活 Conda 环境并进入项目目录

conda activate yoloe cd /root/yoloe

该镜像已预装以下核心库：

torch：PyTorch 深度学习框架
ultralytics：YOLOE 模型加载与推理接口
gradio：用于构建 Web 可视化界面
clip,mobileclip：支持文本-图像对齐的多模态编码器

无需额外安装，直接进入开发阶段。

2. YOLOE 核心功能回顾：开放词汇检测如何工作？

在搭建界面之前，先理解 YOLOE 的三大提示机制，这决定了我们的交互设计方向。

2.1 文本提示（Text Prompt）

通过输入自然语言描述（如“红色汽车”、“戴帽子的人”），模型即可识别图像中对应物体，无需训练新类别。

from ultralytics import YOLOE model = YOLOE.from_pretrained("jameslahm/yoloe-v8l-seg") results = model.predict( source="ultralytics/assets/bus.jpg", names=["person", "dog", "cat"], # 自定义类别 device="cuda:0" )

2.2 视觉提示（Visual Prompt）

提供一张参考图（如某个特定款式的包），模型会在目标图中找出相似外观的物体，适用于跨图像检索任务。

2.3 无提示模式（Prompt-Free）

完全自动识别图像中所有显著物体，适用于探索性分析或未知场景探测。

关键优势：YOLOE 在开放词汇设置下，相比 YOLO-Worldv2 提升 3.5 AP，推理速度快 1.4 倍，且训练成本低 3 倍。这意味着我们可以在边缘设备上实现实时、高精度的通用视觉感知。

3. 构建可视化界面：用 Gradio 实现三合一检测系统

接下来，我们将基于上述三种模式，构建一个统一的 Web 界面，支持：

图片上传
文本提示输入
视觉提示选择
检测结果显示（含边界框与分割掩码）

3.1 安装与导入必要模块

虽然镜像已内置 Gradio，但仍需确认版本兼容性：

pip install gradio --upgrade

然后创建app.py文件，开始编写主程序。

3.2 加载模型与初始化组件

import gradio as gr from ultralytics import YOLOE # 加载预训练模型 model = YOLOE.from_pretrained("jameslahm/yoloe-v8l-seg") def detect_with_text_prompt(image, text_input): if not text_input.strip(): return image classes = [cls.strip() for cls in text_input.split(",")] results = model.predict(source=image, names=classes, device="cuda:0") return results[0].plot() # 返回绘制后的图像

这里我们定义了一个函数detect_with_text_prompt，接收图像和逗号分隔的类别名，返回带标注的结果图。

3.3 支持视觉提示的简化实现

视觉提示需要提取参考图特征，此处我们使用最简方式演示概念：

def detect_with_visual_prompt(reference_img, target_img): if reference_img is None or target_img is None: return target_img # 实际应用中应提取 reference_img 特征并与 target_img 匹配 # 此处仅作示意，返回原图加文字说明 import cv2 result = cv2.putText( target_img.copy(), 'Visual Prompt Detected', (50, 50), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 0), 2 ) return result

注意：完整实现需结合 CLIP 或 MobileCLIP 提取图像嵌入向量，并在查询时进行相似度匹配。本示例聚焦界面搭建，故简化处理。

3.4 无提示模式自动检测

def prompt_free_detection(image): results = model.predict(source=image, device="cuda:0") return results[0].plot()

此模式无需任何输入，直接输出全场景检测结果。

4. 组合界面：打造多功能检测平台

现在我们将三个功能整合到一个 Tabbed 界面中，提升用户体验。

4.1 使用 Gradio Tabs 创建多模式切换

with gr.Blocks(title="YOLOE 可视化检测平台") as demo: gr.Markdown("# YOLOE：实时开放词汇检测与分割") gr.Markdown("支持文本提示、视觉提示与无提示三种模式，适用于各类复杂场景。") with gr.Tabs(): # Tab 1: 文本提示 with gr.Tab(" 文本提示检测"): with gr.Row(): with gr.Column(): txt_image_input = gr.Image(type="numpy", label="上传图片") txt_class_input = gr.Textbox( placeholder="请输入类别，如：person, dog, cat", label="类别列表（英文逗号分隔）" ) txt_submit_btn = gr.Button("开始检测") with gr.Column(): txt_output = gr.Image(label="检测结果") txt_submit_btn.click( fn=detect_with_text_prompt, inputs=[txt_image_input, txt_class_input], outputs=txt_output ) # Tab 2: 视觉提示 with gr.Tab("👀 视觉提示检测"): with gr.Row(): with gr.Column(): vis_ref_input = gr.Image(type="numpy", label="参考图像") vis_tgt_input = gr.Image(type="numpy", label="目标图像") vis_submit_btn = gr.Button("执行匹配") with gr.Column(): vis_output = gr.Image(label="匹配结果") vis_submit_btn.click( fn=detect_with_visual_prompt, inputs=[vis_ref_input, vis_tgt_input], outputs=vis_output ) # Tab 3: 无提示模式 with gr.Tab(" 无提示自动检测"): with gr.Row(): with gr.Column(): free_image_input = gr.Image(type="numpy", label="上传图片") free_submit_btn = gr.Button("全场景识别") with gr.Column(): free_output = gr.Image(label="检测结果") free_submit_btn.click( fn=prompt_free_detection, inputs=free_image_input, outputs=free_output )

4.2 启动服务

if __name__ == "__main__": demo.launch(server_name="0.0.0.0", server_port=7860, share=True)

运行命令：

python app.py

访问http://<your-ip>:7860即可看到如下界面：

顶部为标题与说明
中部为三个标签页，分别对应三种检测模式
每个页面包含输入区与输出区，布局清晰

5. 实际效果展示：从想法到可视化的完整闭环

我们使用一张城市街景图进行测试，分别尝试三种模式。

5.1 文本提示模式：精准定位指定对象

输入图片后，在文本框中填写：

person, bicycle, traffic light

点击“开始检测”，系统迅速标出所有符合类别的物体，并附带分割掩码。即使是部分遮挡的自行车也能准确识别。

5.2 视觉提示模式：以图搜图初体验

上传一张红色背包的照片作为参考图，再上传一张商场人群照片作为目标图。尽管未完成完整特征匹配逻辑，但界面已具备交互能力，后续可接入 CLIP 向量比对实现精确检索。

5.3 无提示模式：全自动场景理解

仅上传一张办公室照片，点击“全场景识别”，模型自动识别出“chair”、“monitor”、“keyboard”、“person”等多个类别，并用不同颜色标注边界框与掩码，展现出强大的零样本泛化能力。

6. 部署优化建议：让系统更稳定高效

虽然本地运行流畅，但在生产环境中还需考虑性能与资源管理。

6.1 使用 GPU 缓存避免重复加载

首次推理时模型会自动加载至 GPU，建议在启动时预热：

_ = model.predict(source="ultralytics/assets/bus.jpg", device="cuda:0", verbose=False)

防止第一次请求延迟过高。

6.2 限制并发与内存使用

Gradio 默认单线程，可通过queue()启用异步处理：

demo.queue().launch(...)

同时在 Docker 运行时设置资源限制：

docker run -it --gpus all \ -p 7860:7860 \ --memory="8g" \ --cpus=4 \ yoloe-gradio-app

6.3 添加身份验证（可选）

对于私有部署，可加入用户名密码保护：

demo.launch(auth=("admin", "password123"), ...)

7. 总结：从模型到产品的最后一公里

YOLOE 凭借其开放词汇、高效推理和统一架构，正在重新定义通用视觉检测的标准。而通过 Gradio，我们只需不到 100 行代码，就将其转化为一个功能完整、交互友好的可视化工具。

这个组合的价值在于：

降低使用门槛：非技术人员也能轻松操作
加速原型验证：一天内完成从模型调用到 Web 部署
支持多种提示范式：满足多样化业务需求
易于扩展集成：可对接数据库、API 网关或企业系统

更重要的是，这一切都建立在一个稳定、预配置的 Docker 镜像之上，省去了繁琐的环境配置过程，真正实现了“一次构建，随处运行”。

未来，你可以在此基础上进一步拓展：

接入摄像头实现实时视频流检测
增加导出功能（JSON/CSV/PDF 报告）
集成语音输入转文本提示
支持批量图像处理

AI 的价值不仅在于算法有多先进，更在于它能否被便捷地使用。YOLOE + Gradio 正是这样一座连接技术与应用的桥梁。

获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。

YOLOE + Gradio：快速搭建可视化检测界面