借助 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]);
图片嵌入器示例代码演示了如何显示从任务返回的嵌入器结果。如需了解详情，请参阅代码示例。