Tokopedia 是一家印度尼西亚科技公司，拥有印度尼西亚最大的电子商务购物平台之一，其平台上有超过 40 种数字产品，注册卖家超过 1,400 万。
Mitra Tokopedia 是 Tokopedia 业务领域的一部分，是一款 Web 应用，可帮助小型企业主销售数字产品，例如信用和游戏代金券、流量套餐、电费代金券、国家医疗保健账单等。该网站是 700 多个城市的 Mitra Tokopedia 卖家的主要销售渠道之一，因此确保顺畅的用户体验至关重要。
在初始配置流程中，这些卖家需要完成一项关键步骤，即验证其身份。卖家必须上传其国民身份证以及带有身份证件的自拍照，才能完成卖家验证。这称为了解客户 (KYC) 流程。
通过在其 Web 应用中为这项关键的 KYC 流程添加机器学习功能，Mitra Tokopedia 不仅改善了用户体验，还将验证失败率降低了 20% 以上。他们还将人工审批工作量减少了近 70%，从而节省了运营成本。
挑战
大多数 KYC 数据被拒绝，导致运营团队每周需要处理数千个工单，以进行人工验证。这不仅导致运营成本高昂，还导致验证流程延迟，给卖家带来了糟糕的用户体验。被拒的主要原因是卖家未正确上传持身份证件自拍照。Mitra Tokopedia 希望使用现代 Web 功能以可伸缩的方式解决此问题。
解决方案
Tokopedia 团队决定在 KYC 流程的第一步（用户上传图片时）使用 TensorFlow.js 与机器学习技术相结合来解决此问题。他们使用 MediaPipe 和 TensorFlow 的人脸检测库，在卖家上传身份证件和自拍照图片时，通过六个关键点检测卖家的面部。然后，使用模型的输出结果来检查其接受条件。验证成功后，系统会将信息发送到后端。如果验证失败，系统会向卖家提供错误消息和重试选项。我们采用了混合方法，模型会根据手机的规格在设备端或服务器端执行推理。低端设备会在服务器上执行推理。
在 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 ML 和 TensorFlow.js 增强适用于 Web 的 Photoshop
技术实现
Mitra Tokopedia 使用了 MediaPipe 和 TensorFlow 的人脸检测库，该库提供了用于运行实时人脸检测的模型。具体来说，此解决方案使用了该库中提供的 MediaPipeFaceDetector-TFJS 模型，该模型实现了 tfjs 运行时。
在深入了解实现之前，我们先简要回顾一下 MediaPipe 是什么。借助 MediaPipe，您可以跨移动设备（Android、iOS）、网页、桌面设备、边缘设备和 IoT 构建和部署设备端机器学习解决方案。
在撰写这篇博文时，MediaPipe 提供了 14 种不同的解决方案。您可以使用 mediapipe 或 tfjs 运行时。tfjs 运行时是使用 JavaScript 构建的，并提供一个 JavaScript 软件包，可供 Web 应用从外部下载。这与 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'。如本文开头所述，卖家必须上传其国民身份证件和一张包含该证件的自拍照，才能完成卖家验证。然后，系统会使用模型的输出来检查是否符合接受条件，即是否与前面提到的 6 个关键点相符，以便确定身份证件和自拍照是否有效。
验证成功后，系统会将相关卖家信息传递给后端。如果验证失败，系统会向卖家显示失败消息和重试选项。系统不会向后端发送任何信息。
针对低端设备的性能注意事项
此软件包只有 24.8 KB（经过缩减和 GZIP 压缩），不会显著影响下载时间。不过，对于极低端设备，运行时处理需要很长时间。添加了额外的逻辑，以便在将两张图片传递给机器学习人脸检测模型之前检查设备 RAM 和 CPU。
如果设备的 RAM 超过 4GB、网络连接速度高于 4G，并且 CPU 核心数超过 6 个，系统会将图片传递到设备端模型进行人脸验证。如果不满足这些要求，系统会跳过设备端模型，并使用混合方法将图片直接发送到服务器进行验证，以适应这些旧款设备。随着时间的推移，随着硬件的不断发展，越来越多的设备能够从服务器中分流出计算负载。
影响
得益于机器学习技术的集成，Tokopedia 成功解决了高拒批率问题，并取得了以下成效：
- 拒批率降低了 20% 以上。
- 人工批准的次数减少了将近 70%。
这不仅为销售人员带来了更顺畅的用户体验，还降低了 Tokopedia 团队的运营成本。
总结
总体而言，这项案例研究的结果表明，对于合适的使用场景，Web 设备端机器学习解决方案在改善用户体验和功能效果、降低成本以及带来其他业务优势方面具有重要价值。
使用 MediaPipe Studio 和 MediaPipe Face Detector for Web 的代码示例自行试用 MediaPipe 人脸检测功能。
如果您有兴趣使用设备端机器学习功能扩展您自己的 Web 应用的功能，请参阅以下资源：