借助 MediaPipe Image Embedder 任务,您可以将图片数据转换为数值表示,以完成与机器学习相关的图片处理任务,例如比较两个图片的相似度。以下说明介绍了如何使用适用于 Node 应用和 Web 应用的图片嵌入器。
如需详细了解此任务的功能、模型和配置选项,请参阅概览。
代码示例
Image Embedder 的示例代码在 JavaScript 中提供了此任务的完整实现,以供您参考。此代码可帮助您测试此任务并开始构建自己的图片嵌入应用。您只需使用网络浏览器即可查看、运行和修改图片嵌入器示例代码。
初始设置
本部分介绍了专门针对使用 Image Embedder 而设置开发环境和代码项目的关键步骤。如需了解如何为使用 MediaPipe 任务设置开发环境的一般信息(包括平台版本要求),请参阅 Web 设置指南。
JavaScript 软件包
图片嵌入器代码可通过 MediaPipe @mediapipe/tasks-vision
NPM 软件包获取。您可以从平台设置指南中提供的链接查找和下载这些库。
您可以使用以下命令,通过以下代码为本地预演安装所需的软件包:
npm install @mediapipe/tasks-vision
如果您想通过内容分发网络 (CDN) 服务导入任务代码,请在 HTML 文件的标记中添加以下代码:
<!-- You can replace jsDelivr with your preferred CDN -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
模型
MediaPipe 图片嵌入器任务需要使用与此任务兼容的经过训练的模型。如需详细了解适用于 Image Embedder 的经过训练的模型,请参阅任务概览“模型”部分。
选择并下载模型,然后将其存储在项目目录中:
<dev-project-root>/app/shared/models/
创建任务
指定模型路径
您可以通过 createFromModelPath()
方法使用默认选项创建任务:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
},
});
指定模型缓冲区
如果模型已加载到内存中,您可以使用 createFromModelBuffer()
方法:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
vision,
new Uint8Array(...)
);
指定自定义选项
MediaPipe 图片嵌入器任务使用 createFromOptions
函数来设置该任务。createFromOptions
函数接受配置选项的值。如需详细了解配置选项,请参阅配置选项。
以下代码演示了如何使用自定义选项构建和配置任务:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "model.tflite"
},
quantize: true
});
配置选项
此任务具有以下 Web 应用的配置选项:
选项名称 | 说明 | 值范围 | 默认值 |
---|---|---|---|
running_mode |
设置任务的运行模式。有两种模式: IMAGE:单张图片输入的模式。 VIDEO:视频的解码帧或输入数据(例如来自摄像头)的直播数据中的解码帧的模式。 |
{IMAGE, VIDEO } |
IMAGE |
l2Normalize |
是否以 L2 范数归一化返回的特征向量。 仅当模型尚未包含原生 L2_NORMALIZATION TFLite 运算时,才可使用此选项。在大多数情况下,情况都是如此,L2 归一化是通过 TFLite 推断实现的,因此无需使用此选项。 | Boolean |
False |
quantize |
是否应通过标量量化将返回的嵌入量化为字节。嵌入被隐式假定为单位范数,因此任何维度的值都必须在 [-1.0, 1.0] 之间。如果不属于这种情况,请使用 l2Normalize 选项。 | Boolean |
False |
准备数据
图片嵌入器可以嵌入主机浏览器支持的任何格式的图片。该任务还可处理数据输入预处理,包括大小调整、旋转和值归一化。
对图片嵌入器 embed()
和 embedForVideo()
方法的调用会同步运行,并会阻塞界面线程。如果要从视频帧中提取特征向量,每次嵌入都会阻塞主线程。为防止出现这种情况,您可以实现 Web 工作器以在另一个线程上运行 embed()
和 embedForVideo()
方法。
运行任务
图片嵌入器使用 embed()
(运行模式为 image
)和 embedForVideo()
(运行模式 video
)方法触发推断。Image Embedder API 将返回输入图片的嵌入矢量。
以下代码演示了如何使用任务模型执行处理:
映像
const image = document.getElementById("image") as HTMLImageElement; const imageEmbedderResult = imageEmbedder.embed(image);
视频
const video = document.getElementById("webcam"); const startTimeMs = performance.now(); const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
处理和显示结果
运行推理后,图片嵌入器任务会返回一个 ImageEmbedderResult
对象,其中包含输入图片或帧的嵌入向量。
下面显示了此任务的输出数据示例:
ImageEmbedderResult:
Embedding #0 (sole embedding head):
float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
head_index: 0
通过嵌入以下图片获得此结果:
您可以使用 ImageEmbedder.cosineSimilarity
函数比较两个嵌入的语义相似度。如需查看示例,请参阅以下代码。
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
图片嵌入器示例代码演示了如何显示从任务返回的嵌入器结果。如需了解详情,请参阅代码示例。