![HEADER-Google-Developers-[GD-BLOG]-7-dos-and-don'ts-of-using-ML-on-the-web-with-MediaPipe](https://storage.googleapis.com/gweb-developer-goog-blog-assets/images/HEADER-Google-Developers-GD-BLOG-7-dos-and-dont.original.png)
如果您是一名 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 是一款基于 Web 的应用，用于为您的应用评估和定制设备端 ML 模型和管道。利用该应用，您可以根据自己的数据及定制的 ML 模型，在浏览器中快速测试 MediaPipe 解决方案。通过每次的解决方案演示，您可以对总结果数、报告结果的最小置信度阈值等的模型设置进行实验。在自定义解决方案时，这将特别有用，因为您无需创建测试网页即可查看模型的性能。
有一点一直十分重要：在各种设备和浏览器上测试 Web 应用，以确保它们按预期运行，但我别特想提醒的是，尽早在各种平台上经常性地进行测试。您也可以使用 MediaPipe Studio 测试设备，以便立即知道解决方案是否适用于用户的设备。
我们会为每个任务列出一个或多个推荐模型。例如，针对“目标检测”任务，我们列出了三种不同的模型以及每种模型在速度、大小和准确性方面的优缺点。人们很容易认为，最重要的是选择准确性最高的模型，如果是这样，那么您可能就需要牺牲速度并增加模型大小了。根据您的用例，您的用户可能需要的是更快的速度，而不是更高的准确性。比较模型选项的最佳方式是利用 MediaPipe Studio。我意识到，这听起来像是在为 MediaPipe Studio 打广告，但它确实在这方面能派上用场！
就在 Web 端使用 ML 的注意事项而言，您认为我是否有任何遗漏？您对如何开始有疑问吗？还是您想分享一个很棒的项目？请在 LinkedIn 上联系我并告知我您的一切想法！
