Web 图片嵌入指南

借助 MediaPipe Image Embedder 任务，您可以将图片数据转换为数值表示形式，从而完成与机器学习相关的图片处理任务，例如比较两张图片的相似度。这些说明将介绍如何使用图片嵌入器 适用于 Node 和 Web 应用。

如需详细了解功能、模型和配置选项 部分，请参阅概览。

代码示例

图片嵌入器的示例代码提供了该嵌入的完整实现。 供您参考。此代码可帮助您测试此任务 开始构建您自己的图像嵌入应用。您可以查看、运行 并修改 图片嵌入器示例代码 只需使用网络浏览器即可。

设置

本部分介绍了设置开发环境和 专门用于使用 Image Embedder 的代码项目。有关 设置开发环境以使用 MediaPipe 任务，包括 平台版本要求，请参阅 适用于网站的设置指南。

JavaScript 软件包

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

<ph type="x-smartling-placeholder">

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

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 Image Embedder 任务使用 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：单图输入的模式。

视频：已解码的帧的模式。 视频或对输入数据（例如来自摄像头的直播数据）进行直播。		 {IMAGE, VIDEO} IMAGE
l2Normalize 是否使用 L2 范数对返回的特征向量进行归一化。 仅当模型尚未包含原生 L2_NORMALIZATION TFLite 操作大多数情况下已经如此 因此，L2 归一化通过 TFLite 推理实现，无需 。 Boolean False
quantize 是否应通过 标量量化。嵌套被隐式假定为单位范数， 因此任何维度的值都必须在 [-1.0, 1.0] 范围内。使用 则使用 l2Normalize 选项。 Boolean False

准备数据

图片嵌入器可以嵌入 托管浏览器该任务还会处理数据输入预处理，包括 调整大小、旋转和值归一化。

运行对图片嵌入器 embed() 和 embedForVideo() 方法的调用 同时阻塞界面线程。如果您想提取 特征向量，每个嵌入都会阻塞主线程。 您可以通过实现 Web Worker 来运行 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);

处理和显示结果

运行推理时，Image Embedder 任务会返回一个 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]);

图片嵌入器示例代码演示了如何显示嵌入器 结果，请参阅 代码示例 了解详情。