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

MediaPipe Interactive Image Segmenter 任务会获取图片中的一个位置，然后以图片形式返回该对象的分割数据。这些说明介绍了如何使用适用于节点和 Web 的交互式图像分割器。如需详细了解功能、模型和配置选项，请参阅概览。

代码示例

交互式图像分割器的示例代码提供了此分割工具的完整实现，供您参考。此代码可帮助您测试此任务开始构建您自己的交互式图像分割应用。您可以查看、运行和编辑交互式图像分割器示例代码只需使用网络浏览器即可。您也可以在 GitHub

设置

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

JavaScript 软件包

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

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

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/

创建任务

使用其中一个交互式图像分割器 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

准备数据

交互式图像分割器能够以托管浏览器该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。

系统会运行对互动式图片分割工具 segment() 和 segmentForVideo() 方法的调用同时阻塞界面线程。如果您将对象细分为视频帧，每个分割任务都会阻止主要的线程。为防止这种情况发生，您可以设置 Web Worker 另一个线程上的 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);