此页面由 Cloud Translation API 翻译。

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

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

代码示例

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

初始设置

本部分介绍了专门针对使用交互式图像分割器来设置开发环境和代码项目的关键步骤。如需了解如何为使用 MediaPipe 任务设置开发环境的一般信息（包括平台版本要求），请参阅网页设置指南。

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 任务需要使用与此任务兼容的经过训练的模型。如需详细了解交互式图片分割器可用的经过训练的模型，请参阅任务概览“模型”部分。

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

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

创建任务

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

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

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

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 segment() 和 segmentForVideo() 方法的调用会同步运行，并阻塞界面线程。如果您从设备的相机分割视频帧中的对象，则每个分割任务都会阻塞主线程。为防止出现这种情况，您可以实现 Web 工作器以在另一个线程上运行 segment() 和 segmentForVideo()。

运行任务

交互式图像分割器使用 segment() 方法触发推断。交互式图像分割器将检测到的片段以图像数据的形式返回到您在运行任务推断时设置的回调函数。

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

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 任务会将片段图片数据返回给回调函数。输出的内容是图片数据，并且可能包含类别掩码和/或置信度掩码，具体取决于您在配置任务时进行设置。

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

类别掩码

下图显示了类别值掩码的任务输出的可视化结果，其中指示了地图注点区域。每个像素都是一个 uint8 值，用于指示该像素是否属于位于相关区域的对象的一部分。第二张图片上的黑白圆圈表示感兴趣的选定区域。

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

置信度掩码

对于每个图片输入通道，置信度掩码的输出包含介于 [0, 1] 之间的浮点值。值越高，表示图片像素是位于相关区域的对象的一部分的置信度越高。

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