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

Web 图像分割指南

借助 MediaPipe Image Segmenter 任务，您可以根据预定义的类别将图片划分为多个区域，以便应用背景模糊等视觉效果。以下说明介绍了如何将 Image Segmenter 用于 Node 和 Web 应用。如需详细了解此任务的功能、模型和配置选项，请参阅概览。

代码示例

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

设置

本部分介绍了设置开发环境和代码项目以专门使用 Image Segmenter 的关键步骤。如需了解有关设置开发环境以使用 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.mjs"
    crossorigin="anonymous"></script>
</head>

模型

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

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

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

创建任务

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

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

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

如需更完整地了解如何实现创建 Image Segmenter 任务，请参阅代码示例。

配置选项

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

选项名称	说明	值范围	默认值
`outputCategoryMask`	如果设置为 `True`，则输出会包含一个分割掩码（以 uint8 图像的形式），其中每个像素值都表示获胜的类别值。	{`True, False`}	`False`
`outputConfidenceMasks`	如果设置为 `True`，则输出包含一个分割掩码（以浮点值图像的形式），其中每个浮点值都表示相应类别的置信度得分图。	{`True, False`}	`True`
`displayNamesLocale`	设置用于显示任务模型元数据中提供的显示名称的标签语言（如果可用）。对于英语，默认值为 `en`。您可以使用 TensorFlow Lite Metadata Writer API 向自定义模型的元数据添加本地化标签	语言区域代码	en
`resultListener`	设置结果监听器，以便在图片分割器处于 `LIVE_STREAM` 模式时异步接收分割结果。仅在运行模式设置为 `LIVE_STREAM` 时才能使用	不适用	不适用

准备数据

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

对图片分割器 segment() 和 segmentForVideo() 方法的调用会同步运行并阻塞界面线程。如果您对来自设备相机的视频帧中的对象进行分割，则每个分割任务都会阻塞主线程。您可以通过实现 Web Worker 在另一个线程上运行 segment() 和 segmentForVideo() 来防止这种情况。

运行任务

图片分割器使用 segment() 方法（采用图片模式）和 segmentForVideo() 方法（采用 video 模式）来触发推理。在为任务运行推理时，图像分割器会将检测到的分割结果作为图像数据返回到您设置的回调函数。

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

图片

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

视频

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

如需查看运行 Image Segmenter 任务的更完整实现，请参阅示例。

处理和显示结果

运行推理后，图像分割器任务会将分割图像数据返回给回调函数。输出的内容取决于您在配置任务时设置的 outputType。

以下部分展示了此任务的输出数据示例：

类别置信度

以下图片展示了类别置信度掩码的任务输出的可视化效果。置信度掩码输出包含介于 [0, 1] 之间的浮点值。

两名女孩骑在一匹马上，一名女孩走在马旁边图片遮罩，用于勾勒出上一张照片中女孩和马的轮廓。系统会捕获图片轮廓的左半部分，但不会捕获图片的右半部分

原始图片和类别置信度蒙版输出。来自 Pascal VOC 2012 数据集的源图片。

类别价值

以下图片显示了类别值掩码的任务输出的可视化效果。类别掩码范围为 [0, 255]，每个像素值表示模型输出的获胜类别指数。获胜类别指数是模型可识别的类别中得分最高的指数。

两名女孩骑在一匹马上，一名女孩走在马旁边用于勾勒出上一张图片中女孩和马匹轮廓的图片遮罩。三位女孩和马的轮廓均已准确遮盖

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

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