在Web端实现机器学习（ML）的潜力正在迅速增长，而图像分割是其中一个引人注目的应用领域。通过MediaPipe，开发者可以轻松地将先进的图像分割技术集成到Web应用程序中。图像分割是一种计算机视觉技术，它将图像划分为多个区域或段，每个区域代表图像中的一个对象或部分。这种技术在很多应用中都非常有用，例如背景虚化、对象识别和图像编辑。 本篇博客将深入探讨如何使用MediaPipe和WebAssembly在Web上进行图像分割。我们将介绍可用的模型、安装步骤、配置选项以及实际用例，帮助读者快速上手并构建自己的图像分割应用。无论您是机器学习新手还是经验丰富的开发者，本文都将为您提供有价值的指导。
核心要点
MediaPipe图像分割任务可以将图像分割成基于预定义类别的区域。
可用于识别特定对象或纹理，并应用视觉效果（例如背景模糊）。
提供Android、Python和Web的API。
可用的Selfie Segmentation模型可以分割人像，并用于替换或修改图像的背景。
Hair Segmentation模型可用于识别和分割人像中的头发。
Multi-class Selfie Segmentation模型可以识别和分割头发、面部皮肤、身体皮肤和服装等多个类别。
DeepLab-v3模型可以识别背景、人、猫、狗和盆栽植物等。
MediaPipe for Web使用WebAssembly (WASM)，允许非Web代码在Web上运行。
为了获得最佳用户体验，请将模型存储在服务器端，并在初始化图像分割器时提供链接。
MediaPipe图像分割基础
什么是MediaPipe图像分割？
mediapipe图像分割是一项强大的功能，可以将图像分解为有意义的区域，从而实现各种应用。这项技术通过将图像划分为与预定义类别相对应的不同区域来实现，使开发者能够识别和操作图像中的特定元素。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
例如，您可以利用图像分割来识别图像中的人物，并有选择地应用效果，例如模糊背景以突出主体。此功能不仅限于人物；它还可以用于识别纹理和物体，为各种创造性应用打开了大门。
MediaPipe图像分割任务可以将图像划分为多个区域，每个区域都代表图像中的不同对象或部分。这种技术通过将图像分解成更易于管理和理解的片段，极大地简化了图像分析。
图像分割的应用非常广泛，包括：
- 背景虚化：突出显示图像中的主体，使背景模糊，从而创造出更具吸引力和专业性的外观。
- 对象识别：识别图像中的特定对象，例如人、动物或物体。
- 图像编辑：允许用户修改图像的特定部分，例如更改背景或突出显示特定对象。
总而言之，MediaPipe图像分割为Web开发者提供了一套强大的工具，使他们能够在Web应用程序中轻松集成高级图像处理功能。无论是创建引人入胜的用户体验还是构建复杂的图像分析系统，MediaPipe都为开发人员提供了他们所需的工具。
支持的平台和API
MediaPipe的强大之处在于其跨平台兼容性。它提供了多种API，以适应不同的开发环境：
- Android：针对移动应用的优化实现。
- Python：用于快速原型设计和服务器端处理。
-
Web：使Web应用程序能够直接在浏览器中利用机器学习能力。
随着技术的发展，MediaPipe不断扩展其对新平台的API支持，为开发者提供了更多选择和灵活性。
优化WebAssembly性能
利用GPU加速
要充分利用WebAssembly的性能潜力，请考虑利用GPU加速。
通过将计算密集型任务卸载到GPU，您可以显著提高图像分割任务的性能。MediaPipe允许您指定在初始化图像分割器时使用的委托（GPU 或 CPU）。
使用GPU委托的代码示例：
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter/float16/latest/selfie_segmenter.tflite",
delegate: "GPU"
},
outputCategoryMask: true
});
此代码将delegate选项设置为GPU，指示MediaPipe使用GPU进行图像分割。 通过利用GPU加速，您可以显著提高Web应用程序中图像分割任务的性能。
异步操作
在Web应用程序中执行图像分割时，避免阻塞主线程至关重要。 MediaPipe提供异步操作，允许您在后台执行图像分割任务，而不会影响UI的响应能力。 使用回调方法的代码示例：
imageSegmenter.segment(image, (result) => {
// 处理结果
});
此代码使用回调方法异步执行图像分割。回调方法在分割完成后调用，并接收分割结果作为输入。 通过使用异步操作，您可以确保您的Web应用程序保持响应，即使在执行计算密集型图像分割任务时也是如此。
内存管理
正确管理内存对于Web应用程序的性能至关重要。 使用完图像分割器结果后，请务必调用close() 方法进行清理。如果不关闭图像分割器结果，可能会导致内存泄漏。 以下是如何关闭图像分割器结果的代码示例：
result.close();
通过仔细管理内存，您可以防止内存泄漏，并确保您的Web应用程序保持高效。
如何在Web应用中使用MediaPipe图像分割
安装 MediaPipe Tasks Vision Package
要开始使用MediaPipe图像分割，您需要安装@mediapipe/tasks-vision包。
您可以使用npm或CDN安装此包。
使用 npm 安装:
npm install @mediapipe/tasks-vision
使用 CDN 导入:
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js" crossorigin="anonymous"></script>
安装完成后，您可以在您的Web应用程序中使用MediaPipe图像分割任务。
初始化图像分割器
初始化图像分割器需要配置WASM二进制加载并创建图像分割器实例。
请务必将ML资产存储在您的应用程序之外，以获得更好的用户体验。
以下是在您的Web应用程序中初始化图像分割器的代码示例：
async function createImageSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm");
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter/float16/latest/selfie_segmenter.tflite",
delegate: "GPU"
},
outputCategoryMask: true
});
}
此代码首先配置WASM二进制加载，然后使用ImageSegmenter.createFromOptions方法创建图像分割器实例。modelAssetPath选项指定要使用的模型的路径，delegate选项指定要使用的委托 (GPU 或 CPU)。
运行图像分割
初始化图像分割器后，您可以使用它来分割图像。
您可以使用imageSegmenter.segment() 方法来完成此操作。此方法接受图像源作为输入，并返回分割结果。 以下是如何对图像运行分割的代码示例：
const result = imageSegmenter.segment(image);
图像源可以是以下任何一种：
- HTMLCanvasElement
- HTMLVideoElement
- HTMLImageElement
- ImageData
- ImageBitmap
segment() 方法是同步的，这意味着它会阻塞主线程，直到分割完成。这可能会导致UI出现性能问题。要避免这种情况，您可以使用 segment() 方法的回调版本。
使用回调运行图像分割： 以下是如何使用回调对图像运行分割的代码示例：
imageSegmenter.segment(image, (result) => {
// 处理结果
});
回调方法在分割完成后调用。此方法接受分割结果作为输入。分段结果包含分段的类别掩码和置信度掩码。 使用回调方法可以避免阻塞主线程，从而提高Web应用程序的性能。
使用分割结果
分割结果包含分段的类别掩码和置信度掩码。类别掩码是一个图像，其中每个像素都着色为该像素的最佳拟合类别。置信度掩码是一组图像，每个类别一个图像，其中每个像素的值告诉您该像素对应于该特定类别的程度。
您可以使用这些掩码来创建各种效果，例如背景模糊和对象突出显示。 以下是如何访问分割结果的代码示例：
const categoryMask = result.categoryMask; const confidenceMasks = result.confidenceMasks;
然后，您可以使用类别掩码和置信度掩码创建各种效果。例如，您可以使用类别掩码来模糊图像的背景。您可以使用置信度掩码来突出显示图像中的特定对象。
清理
使用完图像分割器结果后，请务必调用close() 方法进行清理。 如果您使用回调方法进行分割，则会自动为您进行清理。
以下是如何关闭图像分割器结果的代码示例：
result.close();
如果不关闭图像分割器结果，可能会导致内存泄漏。
分割视频
除了分割图像，您还可以使用MediaPipe图像分割来分割视频。 要做到这一点，您需要使用segmentForVideo() 方法。此方法接受视频元素和当前时间作为输入，并返回分割结果。 以下是如何分割视频的代码示例：
const startTimeMs = performance.now(); const result = imageSegmenter.segmentForVideo(video, startTimeMs);
segmentForVideo() 方法与segment() 方法类似，但它不是同步的。这意味着它不会阻塞主线程，直到分割完成。相反，它会异步执行分割，并在分割完成后调用回调方法。
MediaPipe图像分割的优缺点
? Pros易于使用
高性能
跨平台兼容
多种预训练模型
灵活的配置选项
? Cons某些模型可能需要大量计算资源
模型大小可能会影响初始加载时间
自定义选项有限
非所有设备兼容
MediaPipe图像分割的核心功能
多种预训练模型
MediaPipe 提供了多种预训练模型，专门用于分割人像和他们的特征。
这些模型包括：
- SelfieSegmentation (Square & Landscape)：用于分割图像中的人像，可以替换或修改背景。
- Hair Segmentation：用于分割人像中的头发。
- Multi-class selfie Segmentation：能够识别和分割人像的多个部分，包括头发、皮肤、服装和配饰。
- DeepLab-v3：一个更通用的模型，可以分割各种对象，例如人、猫、狗和盆栽植物。
这些模型可以在MediaPipe Studio中进行测试，以确定最适合您的用例的模型。
| 模型名称 | 输入形状 | 量化类型 | 模型卡 | 版本 |
|---|---|---|---|---|
| SelfieSegmenter（方形） | 256 x 256 | float 16 | 信息 | 最新 |
| SelfieSegmenter（横向） | 144 x 256 | float 16 | 信息 | 最新 |
| HairSegmenter | 512 x 512 | None（float32） | 信息 | 最新 |
| SelfieMulticlass（256x256） | 256 x 256 | None（float32） | 信息 | 最新 |
| DeepLab-V3 | 257 x 257 | None（float32） | 最新 |
Selfie Segmentation模型能够识别图像中的人像，并将其与背景分离，这为各种视觉效果和应用打开了大门。
Hair Segmentation模型能够精确地分割人像中的头发，这对于需要精确头发分割的应用程序非常有用。
Multi-class Selfie Segmentation模型可以将人像分割成多个类别，例如头发、面部皮肤、身体皮肤、衣服和其他配饰。这种精细的分割非常适合需要精确识别和操作人像各个部分的应用程序。
DeepLab-v3模型提供了一种更通用的分割解决方案，能够识别各种对象，例如人、猫、狗和盆栽植物。这使得它适用于范围广泛的应用，从图像分析到增强现实。
WebAssembly (WASM) 支持
MediaPipe for Web利用WebAssembly (WASM)，这是一种在现代Web浏览器中以接近原生速度运行代码的二进制指令格式。WASM支持允许MediaPipe在Web上执行计算密集型ML任务，而不会影响性能。
开发者无需深入了解WASM即可使用MediaPipe；只需要知道WASM使得在Web上运行非Web代码成为可能。
灵活的配置选项
MediaPipe 提供了多种配置选项，使您可以自定义图像分割任务以满足您的特定需求。
这些选项包括：
- 模型选择：选择最适合您的用例的预训练模型。
- 运行模式：指定任务是应处理单个图像还是视频流。
- 输出掩码：配置任务以输出类别掩码和/或置信度掩码。
通过利用这些配置选项，您可以优化图像分割任务的性能和准确性，从而在您的Web应用程序中获得最佳结果。
MediaPipe图像分割的实际应用
增强现实
在增强现实（AR）中，图像分割允许应用程序理解和修改现实世界场景。
例如，一个AR应用程序可以使用图像分割来识别一个人，并将虚拟帽子放置在他们的头上。 通过精确地检测和描绘图像中的对象，图像分割为AR体验添加了沉浸感。
照片和视频编辑
图像分割在照片和视频编辑应用程序中非常有用，可以实现诸如背景替换之类的功能。使用分割来识别图像中的主体，您可以轻松地将他们放置在完全不同的背景中，从而打开了创意可能性的世界。 分割辅助编辑应用程序简化了复杂的操作，并为用户提供了创建引人入胜的视觉内容的强大工具。
人像模式
许多智能手机相机应用程序都具有人像模式，它可以模糊照片中的背景，以创建类似于单反相机的浅景深效果。
图像分割是实现此效果的关键，它允许应用程序准确识别图像中的主体，并有选择地模糊背景。 人像模式可以增强照片的视觉吸引力，使主体更加突出。
常见问题解答
MediaPipe图像分割可以用于商业用途吗？
MediaPipe 遵循 Apache 2.0 许可，允许在商业应用程序中使用，但请确保您符合许可要求。
图像分割的准确性如何？
准确性取决于所使用的模型和图像质量。MediaPipe 提供了各种模型，允许您根据您的用例权衡速度和准确性。
有没有针对特定对象或纹理的模型？
有专门用于对人及其特征进行分割的模型，还提供了一个更通用的模型，可以分割人、猫、狗、盆栽植物、背景等。
相关问题
MediaPipe与其他ML框架（例如TensorFlow.js）相比如何？
MediaPipe提供了一种更高级别的API，针对特定任务（例如图像分割）进行了优化，而TensorFlow.js提供了更大的灵活性，但需要更多的手动配置。 与其他机器学习框架（如 TensorFlow.js）相比，MediaPipe 具有独特的优势和局限性。以下是一些关键区别： 易用性：MediaPipe 提供了一种更高级别的 API，使开发者可以更轻松地集成 ML 功能，而无需深入了解底层实现细节。 针对性任务：MediaPipe 针对特定任务（如人脸检测、手部跟踪和图像分割）进行了优化，从而提供了开箱即用的高性能。 灵活性：TensorFlow.js 提供更大的灵活性，允许开发者构建自定义模型和算法。但是，这需要更多的专业知识和手动配置。 总而言之，MediaPipe 非常适合需要快速集成和高性能的开发者，而 TensorFlow.js 更适合需要更大灵活性和自定义功能的开发者。
WebAssembly如何提高Web端ML性能？
WebAssembly 允许以接近原生速度执行，从而使计算密集型任务在浏览器中可行。它通过提供一种低级、高效的字节码格式来实现这一点，这种格式可以被现代Web浏览器优化和执行。
使用不同的Delegate（GPU、CPU）时，有哪些需要考虑的因素？
GPU提供更快的计算速度，但并非在所有设备上都可用。CPU是更兼容的选择，但速度可能较慢。选择取决于目标用户及其设备功能。 在选择使用 GPU 还是 CPU 时，需要考虑几个因素： 设备兼容性：GPU 加速并非在所有设备上都可用。旧设备或低端设备可能没有支持 GPU 加速的 GPU。 性能：GPU 通常比 CPU 快，尤其是在处理计算密集型任务时。但是，GPU 的加速效果取决于任务的具体性质和 GPU 的功能。 功耗：GPU 通常比 CPU 消耗更多的功率。这对于电池供电设备可能是一个问题。 通常，如果目标设备支持 GPU 加速并且性能至关重要，则应选择使用 GPU。如果目标设备可能不支持 GPU 加速或功耗是一个问题，则应选择使用 CPU。
