隆重推出 Google AI Edge Portal：大规模对边缘 AI 进行基准测试。注册以在非公开预览期间申请访问权限。

Web 图片分类指南

借助 MediaPipe Image Classifier 任务，您可以对图片执行分类。您可以使用此任务，在训练时定义的一组类别中识别图片所代表的内容。以下说明介绍了如何将 Image Classifier 用于 Node 和 Web 应用。

您可以观看演示来了解此任务的实际效果。如需详细了解此任务的功能、模型和配置选项，请参阅概览。

代码示例

Image Classifier 的示例代码提供了此任务在 JavaScript 中的完整实现，供您参考。此代码可帮助您测试此任务，并开始构建自己的图片分类应用。您只需使用 Web 浏览器，即可查看、运行和修改 Image Classifier 示例。

设置

本部分介绍了设置开发环境和代码项目以专门使用 Image Classifier 的关键步骤。如需了解有关设置开发环境以使用 MediaPipe 任务的一般信息（包括平台版本要求），请参阅 Web 设置指南。

JavaScript 软件包

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

您可以使用以下代码安装所需的软件包，以便使用以下命令进行本地暂存：

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.mjs"
    crossorigin="anonymous"></script>
</head>

模型

MediaPipe Image Classifier 任务需要与此任务兼容的已训练模型。如需详细了解 Image Classifier 的可用已训练模型，请参阅任务概览的模型部分。

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

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

创建任务

使用 Image Classifier createFrom...() 函数之一来准备运行推理的任务。使用 createFromModelPath() 函数以及已训练模型文件的相对或绝对路径。如果您的模型已加载到内存中，则可以使用 createFromModelBuffer() 方法。

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

以下代码演示了如何使用自定义选项构建和配置任务：

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：用于单张图片输入的模式。 VIDEO：用于视频的解码帧或输入数据（例如来自摄像头）的直播的模式。	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	设置标签的语言，以用于任务模型的元数据中提供的显示名称（如果可用）。默认值为 `en`（英语）。您可以使用 TensorFlow Lite 元数据写入器 API 将本地化标签添加到自定义模型的元数据中	语言区域代码	en
`maxResults`	设置要返回的得分最高的分类结果的可选数量上限。如果 < 0，则会返回所有可用的结果。	任意正数	`-1`
`scoreThreshold`	设置预测得分阈值，以替换模型元数据中提供的阈值（如果有）。低于此值的结果将被拒绝。	任意浮点数	未设置
`categoryAllowlist`	设置允许的类别名称的可选列表。如果此列表不为空，则会过滤掉类别名称不在该列表中的分类结果。系统会忽略重复或未知的类别名称。此选项与 `categoryDenylist` 互斥，同时使用这两个选项会导致错误。	任意字符串	未设置
`categoryDenylist`	设置不允许的类别名称的可选列表。如果此列表不为空，则会过滤掉类别名称在该列表中的分类结果。系统会忽略重复或未知的类别名称。此选项与 `categoryAllowlist` 互斥，同时使用这两个选项会导致错误。	任意字符串	未设置
`resultListener`	设置结果监听器，以便在 Image Classifier 处于直播模式时异步接收分类结果。只能在运行模式设置为 `LIVE_STREAM` 时使用	不适用	未设置

准备数据

Image Classifier 可以对主机浏览器支持的任何格式的图片中的对象进行分类。此任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。

对 Image Classifier classify() 和 classifyForVideo() 方法的调用会同步运行并阻止用户界面线程。如果您对设备摄像头中的视频帧中的对象进行分类，则每次分类都会阻止主线程。您可以通过实现 Web Worker 在另一个线程上运行 classify() 和 classifyForVideo() 来避免这种情况。

运行任务

Image Classifier 使用 classify() 方法（图片模式）和 classifyForVideo() 方法（video 模式）来触发推理。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
  );

如需更完整地了解如何运行 Image Classifier 任务，请参阅示例。

处理和显示结果

运行推理后，Image Classifier 任务会返回一个 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 获得的：

家麻雀的特写照片

Image Classifier 示例代码演示了如何显示从任务返回的分类结果，如需了解详情，请参阅示例。