⚡️ 浏览器端快速目标检测 👀

使用 TensorFlow.js，直接在浏览器中检测图像中的目标！目前，在 2014 年中期的 Chrome MBP 13 英寸上，每帧分析大约需要 800 毫秒。

当前支持 Tiny YOLO。不过，截至现在，tfjs 尚不支持运行任何完整的 YOLO 模型（而且用户的电脑可能也难以胜任）。

演示

查看实时演示

（1 FPS 的速度确实有限）

安装

Yarn

yarn add tfjs-yolo-tiny

或 NPM

npm install tfjs-yolo-tiny

使用示例

import yolo, { downloadModel } from 'tfjs-yolo-tiny';

const model = await downloadModel();
const inputImage = webcam.capture();

const boxes = await yolo(inputImage, model);

// 显示检测到的边界框
boxes.forEach(box => {
  const {
    top, left, bottom, right, classProb, className,
  } = box;

  drawRect(left, top, right-left, bottom-top, `${className} ${classProb}`)
});

API 文档

yolo(input, model, options)

参数

参数	类型	默认值	描述
input	tf.Tensor	-	预期形状为 (1, 416, 416, 3) 的张量，表示输入图像（RGB 416x416）
model	tf.Model	-	Tiny YOLO tf.Model
[options]	Object	见下文	可选，附加配置

如果您使用自定义的 Tiny YOLO 模型，或者希望调整默认的过滤阈值，可以通过传递一个额外的 options 对象来实现。

示例：yolo(inputImage, model, { classProbThreshold: 0.8 });

选项	类型	默认值	描述
[options.classProbThreshold]	Number	0.4	过滤掉低于特定阈值的类别
[options.iouThreshold]	Number	0.4	过滤掉 IoU 大于该阈值的边界框（参考 tf.image.nonMaxSuppression）
[options.filterBoxesThreshold]	Number	0.01	用于过滤掉箱体置信度与类别置信度乘积低于此阈值的框
[options.maxBoxes]	Number	2048	返回的最大框数，参考 tf.image.nonMaxSuppression。注意：模型本身能返回的框数是有限的。
[options.yoloAnchors]	tf.Tensor	见 src/postprocessing.js	（高级）Yolo 锚框，仅在使用新数据集重新训练时才需要
[options.width]	Number	416	（高级）如果您的模型输入宽度不是 416，且仅在使用自定义模型时适用
[options.height]	Number	416	（高级）如果您的模型输入高度不是 416，且仅在使用自定义模型时适用
[options.numClasses]	Number	80	（高级）如果您的模型类别数量不同，且仅在使用自定义模型时适用
[options.classNames]	Array.<String>	见 src/coco_classes.js	（高级）如果您的模型使用非 MSCOCO 类别名称，且仅在使用自定义模型时适用

返回值

返回一个对象数组。

属性	类型	描述
top	Number	边界框起始位置距离图像顶部的像素数
left	Number	边界框起始位置距离图像左侧的像素数
bottom	Number	边界框结束位置距离图像顶部的像素数
right	Number	边界框结束位置距离图像左侧的像素数
classProb	Number	边界框内该类别的概率
className	String	该类别的名称。

downloadModel(url)

参数

参数	类型	默认值	描述
url	string	见 DEFAULT_MODEL_LOCATION	Tiny YOLO 模型配置路径。参阅 tf.loadModel

返回值

返回一个可以解析为 tf.Model 的 Promise。

贡献

欢迎提交 PR！性能优化和更好的测试覆盖率可能是目前最迫切的需求。如果您对扩展性也有想法，也欢迎提出问题！

安装依赖

yarn install

运行测试

如果您要运行测试，请确保安装 @tensorflow/tfjs@0.7.0，以免出现找不到 tfjs 包的错误。如果您正在开发，请务必移除 tfjs 作为依赖，这样会使用本地版本的 tfjs 而不是 peer 版本。

注意：测试覆盖率较低，不要完全依赖它们来发现错误。

yarn test

构建

yarn build

或者在开发过程中，可以使用 watch 模式，并通过 demo 应用 来测试更改。

yarn watch

tfjs-yolo-tiny 快速上手指南

tfjs-yolo-tiny 是一个基于 TensorFlow.js 的轻量级物体检测工具，允许你在浏览器中直接使用 Tiny YOLO 模型进行实时物体识别。

环境准备

• 运行环境：现代浏览器（推荐 Chrome）或 Node.js 环境。
• 前置依赖：
  • 已安装 Node.js (建议 LTS 版本)。
  • 项目需依赖 @tensorflow/tfjs。如果是开发模式，请确保安装兼容版本（如 0.7.0 或更高，具体视项目依赖而定）。
• 硬件建议：由于在浏览器端运行推理，建议在具备一定 GPU 加速能力的设备上使用以获得更佳性能（默认在 Chrome MBP 2014 上每帧约需 800ms）。

安装步骤

你可以选择使用 yarn 或 npm 进行安装。

使用 Yarn

yarn add tfjs-yolo-tiny

使用 NPM

npm install tfjs-yolo-tiny

提示：国内开发者若遇到下载缓慢问题，可配置淘宝镜像源：

yarn config set registry https://registry.npmmirror.com
# 或
npm config set registry https://registry.npmmirror.com

基本使用

以下是最简单的使用示例，展示如何加载模型并从摄像头捕获图像进行物体检测。

import yolo, { downloadModel } from 'tfjs-yolo-tiny';

// 1. 下载并加载预训练模型
const model = await downloadModel();

// 2. 获取输入图像 (例如从 webcam 组件捕获)
const inputImage = webcam.capture();

// 3. 执行物体检测
const boxes = await yolo(inputImage, model);

// 4. 处理并绘制检测结果
boxes.forEach(box => {
  const {
    top, left, bottom, right, classProb, className,
  } = box;

  // 自定义绘图函数：绘制矩形框和标签
  drawRect(left, top, right - left, bottom - top, `${className} ${classProb}`);
});

核心参数说明

• input: 形状为 (1, 416, 416, 3) 的 Tensor，代表 RGB 输入图像。
• model: 加载好的 Tiny YOLO tf.Model。
• options (可选): 可配置置信度阈值等参数，例如 { classProbThreshold: 0.8 } 以过滤低概率结果。

返回值

函数返回一个对象数组，每个对象包含：

• top, left, bottom, right: 边界框坐标（像素）。
• classProb: 类别概率。
• className: 类别名称（如 "person", "car" 等）。