Tokopedia 是一家印度尼西亚科技公司，拥有最大的电子商务平台之一，其平台上托管了 40 多种数字产品和超过 1, 400 万注册卖家。
Mitra Tokopedia 是 Tokopedia 的业务垂直领域之一，是一款 Web 应用，可帮助小型企业主销售数字产品，例如信用和游戏代金券、数据包、电力代币、国家医疗保健账单等。该网站是 Mitra Tokopedia 卖家在 700 多个城市的主要渠道之一，因此确保顺畅的用户体验至关重要。
在入驻流程中，这些卖家需要完成一个关键步骤，即验证其身份。卖家必须上传其国民身份证件以及手持该身份证件的自拍照，才能完成卖家验证。这称为“了解您的客户”(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 增强 Photoshop 网页版
技术实现
Mitra Tokopedia 使用了 MediaPipe 和 TensorFlow 的人脸检测库，该库提供用于运行实时人脸检测的模型。具体而言，此解决方案使用了此库中提供的 MediaPipeFaceDetector-TFJS 模型，该模型实现了 tfjs 运行时。
在深入了解实现之前，我们先简要回顾一下 MediaPipe。MediaPipe 可让您在移动设备（Android、iOS）、Web、桌面设备、边缘设备和物联网设备上构建和部署设备端机器学习解决方案。
在撰写本文时，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。
如果设备具有 4GB 以上的 RAM、4G 以上的网络连接以及 6 核以上的 CPU，则图片会传递到设备端模型进行人脸验证。如果不满足这些要求，系统会跳过设备端模型，直接将图片发送到服务器，以便使用混合方法进行验证，从而适应这些旧设备。随着时间的推移，随着硬件的不断发展，越来越多的设备将能够从服务器分流计算。
影响
由于集成了机器学习技术，Tokopedia 成功解决了高拒绝率问题，并取得了以下成果：
- 拒绝率降低了 20% 以上。
- 人工审批次数减少了近 70%。
这不仅为卖家带来了更顺畅的用户体验，还降低了 Tokopedia 团队的运营成本。
总结
总体而言，此案例研究的结果表明，对于合适的用例，Web 上的设备端机器学习解决方案有助于提升用户体验和功能效果，并节省成本和带来其他业务优势。
使用 MediaPipe Studio 和 MediaPipe Face Detector for Web 的代码示例，亲自试用 MediaPipe 人脸检测功能。
如果您有兴趣通过设备端机器学习扩展自己的 Web 应用的功能，请查看以下资源：