在 Web 端使用 MediaPipe ML 的七大注意事项

十月 05, 2023

Jen Person Developer Relations Engineer

如果您是一名 Web 开发者，并希望为 Web 应用引入机器学习 (ML) 的强大功能，请选择 MediaPipe Solutions！借助 MediaPipe Solutions，您可以部署自定义任务，并且只需几行代码即可解决常见的 ML 问题。查看文档中的指南，在 Codepen 上试用 Web 演示，了解入门有多简单。虽然 MediaPipe Solutions 能够解决大量复杂的 Web 端 ML 问题，但仍需牢记，有些事情超出了常规 JavaScript 最佳实践的范围。我在这里列出了七个注意事项。请继续阅读，以获取有益建议！

❌ 请勿在应用中捆绑您的模型

作为 Web 开发者，您习惯于尽可能简化应用，以确保最佳的用户体验。要加载大项目时，您知道自己希望以一种全面的方式下载这些项目，以便用户能够快速与内容交互，而不必等待长时间的下载。像量化这样的策略使 ML 模型变得更小，并且可以被边缘设备访问，但它们仍然足够大，以至于您不想将其捆绑在 Web 应用中，所以您选择将模型存储在云存储解决方案中。然后，您将任务初始化后，系统将下载并初始化模型和 WebAssembly 二进制文件。初次加载页面后，使用本地存储或 IndexedDB 缓存模型和二进制文件，以便未来的页面加载速度会更快。如需查看相关示例，请点击 GitHub 中的非接触式 ATM 示例应用。

✅ 请尽早初始化您的任务

任务初始化可能需要一些时间，具体取决于模型大小、连接速度和设备类型。因此，在用户交互之前初始化解决方案是一种不错的方法。在 Codepen 上的大多数代码示例中，初始化发生在页面加载时。请记住，这些示例需要尽可能简单，以便您可以理解代码并将其应用到您自己的用例。虽然您可能不清楚在页面加载时将模型初始化的意义，但只需专注于找到合适的地方来启动任务，以便对用户隐藏处理过程。

初始化后，您应该通过在模型中传递占位符图像进行任务预热。此示例显示了通过 Pose Landmarker 任务运行 1x1 像素画布的函数：

function dummyDetection(poseLandmarker: PoseLandmarker) {
  const width = 1;
  const height = 1;
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
 
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.fillRect(0, 0, width, height);
  poseLandmarker.detect(canvas);
}

✅ 清理资源

自动垃圾回收是我最喜欢的其中一项 JavaScript 功能。事实上，我不记得上次内存管理浮现在我脑海中的时间。希望您已经在自己的记忆中缓存了一些关于内存的信息，因为您只需要稍加记忆就可以充分利用 MediaPipe 任务。Web 版 MediaPipe Solutions 使用 WebAssembly (WASM) 在浏览器中运行 C++ 代码。您不需要了解 C++，只需要了解 C++ 可以帮助您清理垃圾即可。如果不释放未使用的内存，您会发现随着时间的推移，网页会占用越来越多的内存，这可能会导致性能问题甚至崩溃。

用完解决方案后，请使用 .close() 方法释放资源。

例如，我可以使用以下代码创建手势识别器：

const createGestureRecognizer = async () => {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task",
      delegate: "GPU"
    },
  });
};
createGestureRecognizer();

识别完手势后，我使用 .close() 方法处理手势识别器：

gestureRecognizer.close();

每个任务都有对应的 close 方法，因此请务必在适用的情况下使用！某些任务还有返回结果的 close() 方法，请参阅 API 文档获取详细信息。

✅ 尝试在 MediaPipe Studio 中完成任务

在决定或自定义解决方案时，最好先在 MediaPipe Studio 中试用，然后再编写自己的代码。MediaPipe Studio 是一款基于 Web 的应用，用于为您的应用评估和定制设备端 ML 模型和管道。利用该应用，您可以根据自己的数据及定制的 ML 模型，在浏览器中快速测试 MediaPipe 解决方案。通过每次的解决方案演示，您可以对总结果数、报告结果的最小置信度阈值等的模型设置进行实验。在自定义解决方案时，这将特别有用，因为您无需创建测试网页即可查看模型的性能。

✅ 在不同设备上进行测试

有一点一直十分重要：在各种设备和浏览器上测试 Web 应用，以确保它们按预期运行，但我别特想提醒的是，尽早在各种平台上经常性地进行测试。您也可以使用 MediaPipe Studio 测试设备，以便立即知道解决方案是否适用于用户的设备。

❌ 不要默认使用最大的模型

我们会为每个任务列出一个或多个推荐模型。例如，针对“目标检测”任务，我们列出了三种不同的模型以及每种模型在速度、大小和准确性方面的优缺点。人们很容易认为，最重要的是选择准确性最高的模型，如果是这样，那么您可能就需要牺牲速度并增加模型大小了。根据您的用例，您的用户可能需要的是更快的速度，而不是更高的准确性。比较模型选项的最佳方式是利用 MediaPipe Studio。我意识到，这听起来像是在为 MediaPipe Studio 打广告，但它确实在这方面能派上用场！

✅ 联系我们！

就在 Web 端使用 ML 的注意事项而言，您认为我是否有任何遗漏？您对如何开始有疑问吗？还是您想分享一个很棒的项目？请在 LinkedIn 上联系我并告知我您的一切想法！