Web 图片分类指南

借助 MediaPipe Image Classifier 任务，您可以对图片进行分类。您可以使用此任务以确定图片所代表的一组类别，学习到的知识。这些说明介绍了如何使用图像分类器适用于 Node 和 Web 应用。

要了解此任务的实际运行情况，请查看演示。如需详细了解功能、模型和配置选项部分，请参阅概览。

代码示例

图像分类器的示例代码提供了该分类器的完整实现，供您参考。此代码可帮助您测试此任务开始构建您自己的图像分类应用。您可以查看、运行修改图片分类器示例代码只需使用网络浏览器即可。

设置

本部分介绍了设置开发环境和专门用于使用图像分类器的代码项目。有关设置开发环境以使用 MediaPipe 任务，包括平台版本要求，请参阅适用于网站的设置指南。

JavaScript 软件包

图像分类器代码可通过 MediaPipe @mediapipe/tasks-vision 获取 NPM 软件包。您可以通过平台中提供的链接查找并下载这些库设置指南。

您可以使用以下代码安装本地暂存所需的软件包创建 Deployment

npm install @mediapipe/tasks-vision

如果您想通过内容分发网络 (CDN) 导入任务代码服务，请在 HTML 文件的标记中添加以下代码：

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

型号

MediaPipe 图像分类器任务需要一个与此分类兼容的经过训练的模型任务。如需详细了解适用于图片分类器的经过训练的模型，请参阅任务概览的“模型”部分。

选择并下载模型，然后将其存储在项目目录中：

<dev-project-root>/app/shared/models/

创建任务

使用其中一个图片分类器 createFrom...() 函数为运行推理准备任务。使用 createFromModelPath() 函数。如果模型已加载到内存中，您可以使用 createFromModelBuffer() 方法结合使用。

以下代码示例演示了如何使用 createFromOptions() 函数来设置任务。借助 createFromOptions 函数，您可以自定义具有配置选项的图片分类器。如需详细了解配置选项，请参阅配置选项。

以下代码演示了如何使用自定义的选项：

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

配置选项

此任务具有以下适用于 Web 应用的配置选项：

选项名称	说明	值范围	默认值
`runningMode`	设置任务的运行模式。有两个模式： IMAGE：单图输入的模式。视频：已解码的帧的模式。视频或对输入数据（例如来自摄像头的直播数据）进行直播。	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	设置要用于任务模型的元数据（如果有）。默认值为 `en`，英语。您可以向自定义模型的元数据中添加本地化标签使用 TensorFlow Lite Metadata Writer API	语言区域代码	en
`maxResults`	将评分最高的分类结果的可选数量上限设置为 return。如果 <0，则返回所有可用的结果。	任何正数	`-1`
`scoreThreshold`	设置预测分数阈值，以替换模型元数据（如果有）。低于此值的结果将被拒绝。	任意浮点数	未设置
`categoryAllowlist`	设置允许的类别名称的可选列表。如果不为空，类别名称未包含在此集合中的分类结果已滤除。重复或未知的类别名称会被忽略。此选项与 `categoryDenylist` 互斥，使用都会导致错误。	任何字符串	未设置
`categoryDenylist`	设置不允许使用的类别名称的可选列表。如果非空，类别名称在此集中的分类结果将被滤除。重复或未知的类别名称会被忽略。这个选项 `categoryAllowlist` 不包含，同时使用这两个元素会导致错误。	任何字符串	未设置
`resultListener`	设置结果监听器以接收分类结果当图像分类器在直播中时异步执行模式。仅在跑步模式设为“`LIVE_STREAM`”时才能使用	不适用	未设置

准备数据

图片分类器可以采用托管浏览器该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。

运行对图片分类器的 classify() 和 classifyForVideo() 方法的调用同时阻塞界面线程。如果将对象分类为视频帧，每个分类都会屏蔽主视频线程。为防止这种情况发生，您可以设置 Web Worker 另一个线程上的 classify() 和 classifyForVideo()。

运行任务

图片分类器将 classify() 方法与图片模式和以 video 模式触发的 classifyForVideo() 方法推理。Image Classifier API 将返回可能的类别输入图片中的对象。

以下代码演示了如何使用任务模型执行处理：

映像

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

视频

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

有关运行图像分类器任务的更完整实现，请参阅代码示例）。

处理和显示结果

运行推理时，图像分类器任务会返回 ImageClassifierResult 对象，该对象包含可能的类别列表输入图片或帧中的对象。

以下示例展示了此任务的输出数据：

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

此结果是通过运行 Bird Classifier 获得的日期：

图像分类器示例代码演示了如何显示分类结果，请参阅代码示例了解详情。