企业官网建设流程全解析

用 Gradio 与 Ultralytics YOLO26 打造交互式目标检测 Web 界面

【免费下载链接】ultralyticsUltralytics YOLO26, YOLO11, YOLOv8 — object detection, instance segmentation, semantic segmentation, image classification, pose estimation, object tracking项目地址: https://gitcode.com/GitHub_Trending/ul/ultralytics

导读

本文讲解如何基于 Gradio 与 Ultralytics YOLO26 集成指南（即本仓库docs/en/integrations/gradio.md的技术主体），在本地搭建一个无需编写前端代码即可完成图片上传、置信度与 IoU 阈值实时调节、检测结果即时可视化的交互式目标检测页面。读完本文，你将掌握从环境安装、界面构建、model.predict()核心参数调优到多任务（检测/分割/姿态/分类/旋转框等）扩展的完整落地方法，并了解其底层推理调用链，可直接复制运行。

交互式目标检测的意义：为什么选择 Gradio

Gradio 是 Hugging Face 生态中的 Python 界面库，只需把"推理函数 + 输入输出组件"声明出来，就能自动生成可交互的 Web 页面。把它与 Ultralytics YOLO26 结合，主要价值体现在三方面：

• 零代码上手：使用者无需接触任何编程，即可上传图片并可视化检测结果，非常适合做演示、教学与快速实验。
• 参数实时调节：置信度（Confidence）与 IoU 阈值以滑块形式呈现，拖动即可立即看到检测效果的反馈，便于理解阈值如何影响检测质量。
• 广泛可访问：Gradio 页面是标准的 Web 应用，可在浏览器中打开，任何人（本机、局域网甚至通过 Gradio 生成的公网链接）都能访问，非常适合分享给团队评审模型效果。

本文配套的界面主题是目标检测（Object Detection）。正如文档与仓库结构所示，该思路可平滑迁移到分类、实例分割、姿态估计、OBB 旋转框、深度估计等其他 YOLO 任务，只需替换加载的模型权重即可，详见下文"扩展到更多 YOLO 任务"一节。

环境准备：安装依赖

运行示例需要两个核心依赖：界面框架 Gradio 与推理库 Ultralytics。

pip install gradio pip install ultralytics

首次执行时，YOLO("yolo26n.pt")会自动下载对应权重到本地。文中示例用到的示例图片来自仓库的 ultralytics/assets 目录（bus.jpg与zidane.jpg），其路径常量ASSETS定义在 ultralytics/utils/init.py（ASSETS = ROOT / "assets"），并通过 ultralytics/init.py 对外导出，因此可以直接从ultralytics包顶层导入。

核心示例：可运行的完整 Gradio 界面

下面是 gradio.md 提供的完整可运行示例，其中加载的是 YOLO26 系列默认的轻量模型yolo26n.pt（在 ultralytics/engine/model.py 中，YOLO构造函数的默认模型即yolo26n.pt）。

import gradio as gr from PIL import Image from ultralytics import ASSETS, YOLO model = YOLO("yolo26n.pt") def predict_image(img, conf_threshold, iou_threshold): """Predicts objects in an image using a YOLO26 model with adjustable confidence and IoU thresholds.""" results = model.predict( source=img, conf=conf_threshold, iou=iou_threshold, show_labels=True, show_conf=True, imgsz=640, ) for r in results: im_array = r.plot() im = Image.fromarray(im_array[..., ::-1]) return im iface = gr.Interface( fn=predict_image, inputs=[ gr.Image(type="pil", label="Upload Image"), gr.Slider(minimum=0, maximum=1, value=0.25, label="Confidence threshold"), gr.Slider(minimum=0, maximum=1, value=0.45, label="IoU threshold"), ], outputs=gr.Image(type="pil", label="Result"), title="Ultralytics Gradio", description="Upload images for inference. The Ultralytics YOLO26n model is used by default.", examples=[ [ASSETS / "bus.jpg", 0.25, 0.45], [ASSETS / "zidane.jpg", 0.25, 0.45], ], ) if __name__ == "__main__": iface.launch()

界面使用三步走

1. 上传图片：点击页面上的 "Upload Image" 区域选择一张本地图片；也可以直接点击下方的examples示例卡片，自动载入仓库自带的bus.jpg或zidane.jpg（分别对应ultralytics/assets/bus.jpg与ultralytics/assets/zidane.jpg）。
2. 调节参数：拖动 "Confidence threshold"（置信度）与 "IoU threshold"（IoU）两个滑块，默认值分别为 0.25 与 0.45。
3. 查看结果：右侧 "Result" 区域实时显示带类别标签、置信度文本与边界框的标注图。

关键代码逐段拆解

• 推理函数predict_image：接收 PIL 图片与两个阈值，内部调用model.predict(...)完成前向推理，r.plot()把Results对象渲染为带标注的 BGR 数组，再通过Image.fromarray(im_array[..., ::-1])反转为 RGB 并交给 Gradio 显示。
• 输入组件：gr.Image(type="pil")保证回调拿到 PIL 对象，这也是model.predict支持的原生输入类型之一——在 engine/model.py 的predict签名中，source明确支持str | Path | PIL.Image | np.ndarray | torch.Tensor等多种来源。
• 输出组件：gr.Image直接展示标注结果图。
• examples：gr.Interface的examples参数会渲染为可一键点击的示例，复用了仓库的ASSETS资源。

调用链与底层实现

从源码调用链看，model.predict()最终会走到model.predictor（BasePredictor）的 stream_inference，内部依次完成：setup_source装载输入 →preprocess（含letterbox缩放等预处理）→ 模型前向 →postprocess（含 NMS）→write_results写结果。其中write_results在save/show场景下同样调用result.plot(line_width=..., boxes=..., conf=..., labels=...)生成标注图（见 engine/predictor.py），这与示例中手动调用r.plot()的渲染逻辑完全同源。

值得说明的是，engine/results.py 的Results.plot()支持丰富的自定义参数：conf控制是否绘制置信度、labels控制类别标签、boxes控制边界框、line_width/font_size不传时按图像尺寸自适应，此外还支持masks、probs、kpt_radius/kpt_line（关键点）、color_mode（按类或按实例配色）等，供你在不同任务中按需开启。

predict 核心参数深度解析

示例把conf、iou等以函数参数的形式暴露给 Gradio 滑块，理解它们的默认值与作用边界，是调好交互界面的前提。以下是相关参数在 ultralytics/cfg/default.yaml 中的定义与说明：

两点来自源码的补充：

1. conf 的兜底默认值：虽然default.yaml中conf为空（# (float, optional)），但 engine/predictor.py 在BasePredictor.__init__中做了兜底：if self.args.conf is None: self.args.conf = 0.25，与 Gradio 界面滑块的默认值 0.25 完全对应，保证了两端默认行为一致。
2. 任务差异：iou主要用于 NMS 去重，值越高对重叠框的抑制越宽松（容易保留更多重叠框）；conf决定"框是否保留"，两者共同作用，正是界面中让用户动态调试的意义所在。从 default.yaml 可看到预测类参数还有agnostic_nms、classes（按类别 id 过滤）、augment（测试时增强）、vid_stride（视频抽帧）等，如需扩展界面可继续引入。

界面参数与组件速查表

函数参数说明

Gradio 界面组件

扩展到更多 YOLO 任务

文档明确指出：这套示例可按需加载对应的模型权重，迁移到分类、实例分割、姿态等任务。从仓库 ultralytics/cfg/models/26 目录可以确认，YOLO26 官方配置覆盖了多种任务：

切换到其他任务时，只需替换YOLO("...pt")的权重名；由于 engine/model.py 的_smart_load会根据权重自动推断task并匹配对应的 predictor 实现（仓库中ultralytics/models/yolo/下的classify/、detect/、segment/、pose/、obb/等目录即为各类任务的模型与预测器实现），model.predict()与results.plot()的调用方式保持一致，界面代码几乎无需改动。

运行与分享

本地执行脚本后，Gradio 默认在http://127.0.0.1:7860启动 Web 界面。iface.launch()常用参数包括：

• share=True：生成一个可分享的临时公网链接，便于远程演示（由 Gradio 官方隧道服务中转）；
• server_name/server_port：自定义监听地址与端口；
• inbrowser=True：启动后自动打开默认浏览器。

说明：以上为 Gradio 框架自带能力，具体可用参数以你所安装的 Gradio 版本为准。若需将页面与他人共享或嵌入网站，可查阅你本地的gr.Interface.launch文档。

常见问题（FAQ）

如何用 Gradio 搭配 Ultralytics YOLO26 做目标检测？

三步即可：先用pip install gradio安装界面库；再按本文"核心示例"编写脚本初始化gr.Interface（将predict_image绑定到图片输入与阈值滑块）；最后运行脚本、上传图片并拖动滑块观察实时检测结果。文中提供的完整代码可直接复制运行。

这样组合有哪些收益？

• 界面友好：零代码即可上传图片、查看检测标注；
• 实时调节：动态调整conf/iou阈值并立刻看到效果差异，有助于理解这两个参数对检测精度与物体分离的影响；
• 易于传播：Web 界面可供他人直接访问，适合快速实验、课堂演示与团队评审。

可以用于教学吗？

可以。Gradio 直观的 Web 界面让师生无需高级编程即可操作 YOLO26 这类模型，非常适合演示目标检测与计算机视觉中的核心概念——例如让学生拖动置信度滑块，直观感受阈值升高时漏检（false negative）增多、阈值降低时误检（false positive）增多的权衡，从而理解conf/iou与检测表现的因果关系。

如何在界面中调节置信度与 IoU 阈值？

直接拖动界面中的两个滑块即可：

• Confidence（置信度）阈值：决定目标被保留所需的最低置信度，向右滑要求更严格；
• IoU 阈值：决定两个重叠框是否被视为同一目标（NMS 去重依据），调节它可改善密集/重叠场景下的物体分离效果。

两个参数分别对应model.predict()中的conf与iou（语义见上表），可参考本文"predict 核心参数深度解析"一节。

有哪些典型的落地场景？

• 实时目标检测演示：面向客户或课堂直观展示检测能力与阈值影响；
• 教学工具：辅助讲解目标检测与计算机视觉基础概念；
• 原型快速开发：在编写正式产品前快速验证模型在不同参数下的表现；
• 团队协作验证：生成网页链接分享给团队成员，收集关于误检/漏检案例的反馈。

小结

本文完整继承并深化了 docs/en/integrations/gradio.md 的核心内容：从 Gradio 的选型动机、安装方式、可运行的完整界面代码，到predict关键参数（conf/iou/imgsz/show_labels/show_conf等）的默认值表、Gradio 组件说明与常见 FAQ，并结合仓库源码补充了推理调用链（model.predict → BasePredictor.stream_inference → Results.plot）、conf=0.25的源码兜底逻辑、Results.plot()的渲染参数，以及 YOLO26 在多任务（检测/分割/姿态/分类/OBB/语义/深度）下的扩展路径。你只需复制核心示例并换用对应权重，就能快速搭建自己的交互式视觉推理应用。

【免费下载链接】ultralyticsUltralytics YOLO26, YOLO11, YOLOv8 — object detection, instance segmentation, semantic segmentation, image classification, pose estimation, object tracking项目地址: https://gitcode.com/GitHub_Trending/ul/ultralytics