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

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

代码示例

Interactive Image Segmenter 的示例代码提供了此任务在 JavaScript 中的完整实现，供您参考。此代码可帮助您测试此任务，并开始构建自己的 Interactive Image Segmenter 示例代码。您只需使用网络浏览器即可查看、运行和修改 Interactive Image Segmenter 示例代码。您还可以在 GitHub 上查看此示例的代码。

设置

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

JavaScript 软件包

可通过 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.js"
    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 Metadata Writer 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 示例代码演示了如何显示任务返回的分类结果，如需了解详情，请参阅代码示例。