Tokopedia 如何利用机器学习技术改进其卖家 Web 应用，从而降低运营成本

Dendi Sunardi
Dendi Sunardi
X
Geoffrey Prasetyo
Geoffrey Prasetyo
LinkedIn
Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Thomas Steiner

Tokopedia 是印度尼西亚的一家科技公司， 最大的电子商务市场之一，托管了 40 多种数字产品 以及超过 1400 万注册卖家。

Mitra Tokopedia，属于 Tokopedia 的业务 是一款网络应用，可帮助小企业主销售 电子商品，如信用和游戏代金券、数据包、电力 令牌、国家医疗保健账单等。该网站是 Mitra Tokopedia 卖家的专属渠道，这一点非常重要。 以确保提供流畅的用户体验。

这是新手入门流程的一个关键步骤，要求这些销售人员验证自己的 身份。卖家必须上传其国民身份证以及 ID，以完成卖家验证。这称为 了解您的客户 (KYC) 流程。

通过将机器学习功能添加到这个关键的 KYC 流程， Mitra Tokopedia 通过自己的 Web 应用 验证失败率降低 20% 以上。他们还使 将人工批准量减少了近 70%，从而节省了成本。

挑战

大多数 KYC 数据都被拒绝，每周生成数千个工单 发送给运营团队进行手动验证。这不仅导致 但也给销售人员带来了糟糕的用户体验， 验证过程会出现延迟。申请被拒的最主要原因是 卖家未正确上传带有身份证的自拍照。Mitra Tokopedia 是 热衷于使用现代 Web 功能以可扩展的方式解决此问题。

解决方案

Tokopedia 的团队决定结合使用机器学习和 TensorFlow.js 来解决此问题 在 KYC 流程的第一步（当用户上传图片时）触发。他们 使用 MediaPipe 和 TensorFlow 的 人脸检测库 在卖方上传 ID 时，使用 6 个要点检测卖方的面孔 卡片和自拍照图片。然后，使用模型的输出 接受标准。验证成功后，相关信息将发送至 后端。如果验证失败，系统会向卖家显示错误消息 以及重试选项我们使用了混合方法，其中模型执行 在设备端或服务器端进行推断，具体取决于手机的 。低端设备将在服务器上进行推理。

在 KYC 流程的早期阶段使用机器学习模型可以让他们：

  • 提高 KYC 流程中的拒绝率。
  • 根据图片质量，在用户可能会拒绝图片时发出警告 模型评估结果。

为什么选择机器学习而不是其他解决方案？

机器学习可以自动执行重复性任务，而这些任务原本会耗费大量时间 不切实际。以 Tokopedia 为例，优化当前的非机器学习 解决方案无法产生显著的结果，而机器学习解决方案 显著降低了运营团队的负担，因为他们必须手动处理 每周成千上万次审批借助机器学习解决方案，你可以 从而提供更好的用户体验并提高运营效率 效率。详细了解 问题构建 以确定机器学习是否适合您的问题。

选择模型时的注意事项

选择机器学习模型时考虑了以下因素。

费用

他们评估了使用该模型的总体费用。由于 TensorFlow.js 是 开源软件包，我们节省了许可和 维护成本另一个考虑因素是推理的成本。正在 相较于在客户端执行推断时， 在服务器端使用昂贵的 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、桌面设备、边缘设备、 和物联网。

还有 14 种不同的解决方案 由 MediaPipe 提供的资源。您可以使用 mediapipe 或 tfjs 运行时。tfjs 运行时使用 JavaScript 构建， 提供了可被网络从外部下载的 JavaScript 包 应用。这与使用如下命令构建的 mediapipe 运行时不同： C++ 并编译为 WebAssembly 模块。主要区别在于性能 可调试性和捆绑JavaScript 软件包可与传统版 Webpack 等打包器相比之下，Wasm 模块是一个更大且独立的 二进制资源（由于不存在加载时间依赖项问题来缓解）和 需要不同的 Wasm 调试工作流。不过， 但其执行速度更快，有助于满足技术和性能要求。

<ph type="x-smartling-placeholder">
</ph> 以 FaceDetection 为例，显示 MediaPipe 和 TensorFlow 模型如何适用于不同运行时的示意图。
以 FaceDetection 为例，概要说明 MediaPipe 和 TensorFlow 模型在不同的运行时中的运作方式

回到 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 表示 y 边界，yMax 表示 y 边界 width 和 height 是边界框的尺寸。 对于 keypoints，x 和 y 表示图片中的实际关键点位置 像素空间。 name 为关键点提供标签，即 'rightEye'、'leftEye'、 'noseTip'、'mouthCenter'、'rightEarTragion' 和 'leftEarTragion'。 正如本博文开头所述，卖家必须上传 国民身份证和带有身份证件的自拍照，以完成卖家交易 验证。 然后，该模型的输出会用于对照验收标准进行检查，即 与前面提到的六个关键点匹配，才会被视为有效 身份证和自拍照图片。

验证成功后，相关卖家信息即会传递到 后端。如果验证失败，系统会向卖家显示失败消息和 重试选项。系统不会向后端发送任何信息。

<ph type="x-smartling-placeholder">
</ph> Mitra KYC 页面、TensorFlow.js 模型和服务器相互交互的示意图。
Mitra KYC 页面、TensorFlow.js 模型和服务器如何相互交互

低端设备的性能注意事项

该包仅 24.8 KB（经过缩减和压缩后的大小）， 会显著影响下载时间。不过，对于超低端设备 运行时处理需要很长时间。添加了额外的逻辑，以检查 将两张图片传递给机器学习人脸之前，设备 RAM 和 CPU 检测模型。

如果设备 RAM 高于 4GB，且网络连接高于 4G， 以及具有超过 6 个核心的 CPU，这些图像会传递给设备端模型， 进行人脸验证。如果不满足这些要求，设备上的 模型被跳过，图像直接发送到服务器进行验证 采用混合方法来满足这些旧设备的使用需求。随着时间的流逝， 随着硬件继续降低和运行速度， 不断演变。

影响

得益于机器学习集成，Tokopedia 成功地 拒绝率和以下结果如下：

  • 拒绝率降幅超过 20%。
  • 人工批准的次数减少了将近 70%。

这不仅为销售人员带来了更顺畅的用户体验，还减少了 Tokopedia 团队的运营成本

总结

总体而言，本案例研究的结果表明，对于合适的应用场景， Web 上的设备端机器学习解决方案在改进用户 体验和有效性，同时实现成本节约和 其他业务优势

使用 MediaPipe Studio 适用于 适用于 Web 的 MediaPipe 人脸检测器。

如果您有兴趣通过 设备端机器学习，请参阅以下资源：