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

适用于 Web 的交互式图像分割指南

MediaPipe Interactive Image Segmenter 任务会获取图片中的某个位置，估算该位置处对象的边界，并以图片数据的形式返回对象的分割结果。这些说明介绍了如何将 Interactive Image Segmenter 用于 Node 和 Web 应用。如需详细了解此任务的功能、模型和配置选项，请参阅概览。

代码示例

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

设置

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

JavaScript 软件包

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

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

npm install --save @mediapipe/tasks-vision

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

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

模型

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

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

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

创建任务

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

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

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

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

配置选项

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

选项名称	说明	值范围	默认值
`outputCategoryMask`	如果设置为 `True`，则输出会包含一个分割掩码作为 uint8 图片，其中每个像素值表示像素是否属于位于感兴趣区域的对象。	{`True, False`}	`False`
`outputConfidenceMasks`	如果设置为 `True`，则输出会包含一个分割掩码作为浮点值图片，其中每个浮点值表示像素属于位于感兴趣区域的对象的置信度。	{`True, False`}	`True`
`displayNamesLocale`	设置用于任务模型元数据中提供的显示名称的标签语言（如果可用）。默认值为 `en`（英语）。您可以使用 TensorFlow Lite 元数据写入器 API 将本地化标签添加到自定义模型的元数据中	语言区域代码	en

准备数据

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

对 Interactive Image Segmenter segment() 和 segmentForVideo() 方法的调用会同步运行并阻塞界面线程。如果您分割设备摄像头中的视频帧中的对象，则每个分割任务都会阻塞主线程。您可以通过实现 Web Worker 在另一个线程上运行 segment() 和 segmentForVideo() 来避免这种情况。

运行任务

Interactive Image Segmenter 使用 segment() 方法来触发推理。Interactive Image Segmenter 会将检测到的分割结果作为图片数据返回给您在为任务运行推理时设置的回调函数。

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

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

处理和显示结果

运行推理后，Interactive Image Segmenter 任务会将分割图片数据返回给回调函数。输出的内容是图片数据，可能包含类别掩码、置信度掩码或两者都包含，具体取决于您在配置任务时设置的内容。

以下部分进一步介绍了此任务的输出数据：

类别掩码

以下图片显示了类别值掩码的任务输出的可视化效果，并指出了感兴趣的点区域。每个像素都是一个 uint8 值，表示像素是否属于位于感兴趣区域的对象。第二张图片上的黑白圆圈表示选定的感兴趣区域。

一只狗站在一堆树叶中上张图片中狗狗的轮廓形状

原始图片和类别掩码输出。源图片来自 Pascal VOC 2012 数据集。

置信度掩码

置信度掩码的输出包含每个图片输入通道的 [0, 1] 之间的浮点值。值越高，表示图片像素属于位于感兴趣区域的对象的置信度越高。

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