Tokopedia 是印度尼西亚的一家科技公司，拥有最大的电子商务购物平台之一，在其平台上托管 40 多种数字产品，拥有超过 1, 400 万注册卖家。
Mitra Tokopedia 是 Tokopedia 各行各业的一部分，是一款 Web 应用，可帮助小型企业主销售数字产品，例如信用和游戏代金券、数据包、电力令牌、国家医疗保健账单等。该网站是 700 多个城市的 Mitra Tokopedia 卖家的主要渠道之一，因此确保提供顺畅的用户体验至关重要。
新手入门流程中的关键步骤需要这些销售人员验证其身份。卖家必须上传其国民身份证和带有该身份证件的自拍照，才能完成卖家验证。这称为“了解您的客户”(KYC) 流程。
通过在其 Web 应用中的这一关键 KYC 流程中添加机器学习功能，Mitra Tokopedia 得以改善用户体验，将验证失败次数减少了 20% 以上。此外，他们还将手动审批减少了近 70%，从而节省了运营成本。
挑战
大部分 KYC 数据遭拒，每周会产生数千张工单供运营团队进行手动验证。这不仅导致了高昂的运营费用，还导致卖家的用户体验不佳，因为他们的验证流程会延迟。遭拒的最大原因是卖家未正确上传带身份证件的自拍照。Mitra Tokopedia 希望使用现代 Web 功能大规模解决这个问题。
解决方案
Tokopedia 的团队决定将机器学习与 TensorFlow.js 结合使用，在 KYC 流程的第一步（即用户上传图片时）解决这个问题。当卖家上传身份证和自拍照图片时，他们使用 MediaPipe 和 TensorFlow 的 Face Detection 库检测卖家的面孔以及六个关键点。然后，系统会使用模型的输出来对照其接受标准进行检查。验证成功后，信息将发送到后端。如果验证失败，系统会向卖方提供错误消息和重试选项。我们采用混合方法，让模型根据手机的规格在设备端或服务器端执行推断。低端设备将在服务器上执行推理。
在 KYC 流程的早期阶段使用机器学习模型，他们可以：
- 降低 KYC 流程中的拒绝率。
- 根据模型评估的质量，警告用户图片可能会遭拒。
为何选择机器学习而不是其他解决方案？
机器学习可以自动执行那些手动执行十分耗时或不切实际的重复性任务。在 Tokopedia 的案例中，优化当前的非机器学习解决方案不会产生显著的效果，而机器学习解决方案可以显著减少运营团队的负担，他们必须每周手动处理数千个审批。借助机器学习解决方案，图片检查可以近乎即时完成，从而提供更好的用户体验并提高运营效率。详细了解问题框架，以确定机器学习是否适合解决您的问题。
选择模型时的注意事项
选择机器学习模型时，请考虑以下因素。
费用
他们评估了使用该模型的总体费用。由于 TensorFlow.js 是一个由 Google 维护的开源软件包，因此我们节省了许可和维护成本。另一个需要考虑的是推断成本。与在服务器端使用昂贵的 GPU 处理推理相比，能够在客户端运行推断可以节省大量费用，尤其是在数据无效且无法使用的情况下。
可伸缩性
他们考虑了模型和技术的可伸缩性。它是否能够应对随着项目的演化而增加的数据和模型复杂性？它是否可以进行扩展以满足其他项目或用例的需求？设备端处理会有所帮助，因为模型可以托管在 CDN 上并传送到客户端，扩容能力极强。
性能
并考虑了库的大小（以 KB 为单位）以及运行时进程的延迟时间。Mitra Tokopedia 的大部分用户群都拥有网速和连接速度适中的中低端设备。因此，下载和运行时方面的性能（即模型生成输出的速度）是首要任务，以满足其特定需求并确保出色的用户体验。
其他注意事项
合规性：他们必须确保所选库符合相关的数据保护和隐私权法规。
技能水平：他们评估了所在团队的专业知识和技能。某些机器学习框架和库可能需要特定的编程语言或专业知识。考虑这些因素后，他们在为机器学习项目选择合适的模型时做出了明智的决策。
所选技术
在考虑了这些因素后，TensorFlow.js 能够满足他们的需求。它能够通过使用其 WebGL 后端使用设备的 GPU 完全在设备端运行。在设备上运行模型可以缩短服务器延迟时间，从而更快地向用户提供反馈，并降低服务器计算费用。如需详细了解设备端机器学习，请参阅设备端机器学习的优势和限制一文。
“TensorFlow.js 是 Google 的开源机器学习库，面向能够在浏览器中运行客户端的 JavaScript 开发者。这是 Web AI 中最成熟的选项，具有全面的 WebGL、WebAssembly 和 WebGPU 后端运算符支持，可在浏览器中使用并具有快速性能。”- Adobe 如何将 Web 机器学习与 TensorFlow.js 结合使用来增强 Web 版 Photoshop 的功能
技术实现
Mitra Tokopedia 使用了 MediaPipe 和 TensorFlow 的人脸检测库，这是一个提供运行实时人脸检测的模型的软件包。具体而言，此解决方案使用了此库中提供的 MediaPipeFaceDetector-TFJS 模型来实现 tfjs 运行时。
在深入了解实现之前，我们先简要回顾一下 MediaPipe 是什么。借助 MediaPipe，您可以构建和部署设备端机器学习解决方案，涵盖移动设备（Android、iOS）、Web、桌面设备、边缘设备和 IoT。
在撰写这篇博文时，MediaPipe 提供了 14 种不同的解决方案。您可以使用 mediapipe 或 tfjs 运行时。tfjs 运行时使用 JavaScript 构建，并提供可供 Web 应用从外部下载的 JavaScript 软件包。这与 mediapipe 运行时不同，后者使用 C++ 构建并编译到 WebAssembly 模块。主要区别在于性能、可调试性和捆绑式开发。JavaScript 软件包可以与 webpack 等经典捆绑器捆绑在一起。相比之下，Wasm 模块是一个更大且独立的二进制资源（可以通过不作为加载时间依赖项来减少这种情况），并且需要不同的 Wasm 调试工作流。不过，它的执行速度更快，有助于满足技术和性能要求。
回到 Tokopedia 的实现，第一步是初始化模型，如下所示。当用户上传照片时，HTMLImageElement 会作为输入传递给检测器。
// Create the detector.
const model = faceDetection.SupportedModels.MediaPipeFaceDetector;
const detectorConfig = {
runtime: 'tfjs'
};
const detector = await faceDetection.createDetector(model, detectorConfig);
// Run inference to start detecting faces.
const estimationConfig = {flipHorizontal: false};
const faces = await detector.estimateFaces(image, estimationConfig);
面孔列表的结果包含为图片中每张面孔检测到的面孔。如果模型无法检测到任何人脸，则此列表将为空。 对于每张面孔，它都包含检测到的面孔的边界框，以及检测到的面孔的六个关键点的数组。包括眼睛、鼻子和嘴巴等特征。每个关键点都包含 x、y 以及名称。
[
{
box: {
xMin: 304.6476503248806,
xMax: 502.5079975897382,
yMin: 102.16298762367356,
yMax: 349.035215984403,
width: 197.86034726485758,
height: 246.87222836072945
},
keypoints: [
{x: 446.544237446397, y: 256.8054528661723, name: "rightEye"},
{x: 406.53152857172876, y: 255.8, "leftEye },
...
],
}
]
box 表示图片像素空间中人脸的边界框，其中 xMin，xMax 表示 x 边界，yMin，yMax 表示 y 边界，width、height 表示边界框的尺寸。对于 keypoints，x 和 y 表示图片像素空间中的实际关键点位置。name 为关键点提供标签，分别为 'rightEye'、'leftEye'、'noseTip'、'mouthCenter'、'rightEarTragion' 和 'leftEarTragion'。如本文开头所述，卖家必须上传国民身份证和带有身份证件的自拍照才能完成卖家验证。然后，系统会使用模型的输出来根据验收标准进行检查，即匹配前面提到的六个关键点，以被视为有效的身份证件和自拍照图片。
验证成功后，相关卖方信息将传递给后端。如果验证失败，系统会向卖方显示一条失败消息和一个重试选项。系统不会向后端发送任何信息。
低端设备的性能注意事项
该软件包只有 24.8 KB（经过压缩和 gzip 压缩），对下载时间没有太大影响。不过，对于极低端设备，运行时处理需要很长时间。添加了额外的逻辑，用于在将两张图片传递给机器学习人脸检测模型之前检查设备 RAM 和 CPU。
如果设备 RAM 超过 4GB、网络连接大于 4G，且 CPU 拥有超过 6 个核心，则系统会将图片传递给设备端模型进行人脸验证。如果不满足这些要求，则会跳过设备端模型，并将图片直接发送到服务器进行验证，采用混合方法满足这些旧设备的需求。随着时间的推移，随着硬件的不断发展，将有更多设备能够从服务器中分流计算资源。
影响
得益于机器学习集成，Tokopedia 成功解决了高拒绝率的问题，并取得了以下结果：
- 拒绝率降幅超过 20%。
- 手动批准数量减少了近 70%。
这不仅为销售人员带来了更顺畅的用户体验，还降低了 Tokopedia 团队的运营成本。
总结
总体而言，本案例研究的结果表明，对于合适的用例，基于 Web 的设备端机器学习解决方案在改善用户体验和功能的有效性、节省费用和其他业务优势方面非常有用。
使用 MediaPipe Studio 和网页版 MediaPipe 人脸检测器的代码示例亲自试用 MediaPipe 人脸检测功能。
如果您有兴趣使用设备端机器学习扩展您自己的 Web 应用的功能，请查看以下资源：