Comment Tokopedia a réduit ses coûts opérationnels en améliorant son application Web de vente grâce au machine learning

Dendi Sunardi
Dendi Sunardi
Geoffrey Prasetyo
Geoffrey Prasetyo
Swetha Gopalakrishnan
Swetha Gopalakrishnan

Tokopedia est une entreprise technologique indonésienne qui gère l'une des plus grandes places de marché d'e-commerce. Elle héberge plus de 40 produits numériques et plus de 14 millions de vendeurs enregistrés sur sa plate-forme.

Mitra Tokopedia, qui fait partie du secteur d'activité de Tokopedia, est une application Web qui aide les propriétaires de petites entreprises à vendre des produits numériques tels que des crédits et des coupons de jeu, des packages de données, des jetons d'électricité, des factures de santé nationale, etc. Le site Web est l'un des principaux canaux des vendeurs de Mitra Tokopedia dans plus de 700 villes. Il est donc essentiel pour garantir une expérience utilisateur fluide.

Une étape clé du processus d'intégration nécessite que ces vendeurs valident leur identité. Le vendeur doit importer sa pièce d'identité, ainsi qu'un selfie avec cette pièce d'identité afin de finaliser la validation du vendeur. C'est ce qu'on appelle le processus de connaissance du client (KYC).

En ajoutant des fonctionnalités de machine learning à ce processus KYC essentiel au sein de son application Web, Mitra Tokopedia a pu améliorer l'expérience utilisateur en réduisant de plus de 20% les échecs de validation. Elle a également réduit ses coûts opérationnels en diminuant les approbations manuelles de près de 70%.

Défi

La plupart des données KYC étaient refusées, créant ainsi des milliers de demandes par semaine adressées à l'équipe chargée des opérations en vue d'une vérification manuelle. Cela a non seulement entraîné des coûts opérationnels élevés, mais également une expérience utilisateur médiocre pour les vendeurs, dont la procédure de validation est retardée. La raison principale du refus était que les vendeurs n'avaient pas importé correctement les selfies avec des cartes d'identité. Mitra Tokopedia souhaitait résoudre ce problème de manière évolutive à l'aide de fonctionnalités Web modernes.

Solution

L'équipe de Tokopedia a décidé d'utiliser le ML avec TensorFlow.js pour résoudre ce problème lors de la toute première étape du processus KYC, lorsque l'utilisateur importe les images. Elle a utilisé la bibliothèque de détection de visages de MediaPipe et de TensorFlow pour détecter le visage du vendeur avec six points clés lorsqu'il importe la carte d'identité et les selfies. La sortie du modèle est ensuite utilisée pour vérifier ses critères d'acceptation. Une fois la validation effectuée, les informations sont envoyées au backend. Si la validation échoue, le vendeur reçoit un message d'erreur et une option pour réessayer. Une approche hybride a été utilisée dans laquelle le modèle effectue l'inférence sur l'appareil ou côté serveur, en fonction des caractéristiques du téléphone. Un appareil bas de gamme effectuerait l'inférence sur le serveur.

L'utilisation d'un modèle de ML au début du processus KYC leur permet:

  • Améliorez le taux de refus lors du processus KYC.
  • Avertissez les utilisateurs d'un possible refus de leurs images, en fonction de la qualité évaluée par le modèle.

Pourquoi choisir le ML plutôt que d'autres solutions ?

Le ML peut automatiser les tâches répétitives qui prennent du temps ou sont difficiles à effectuer manuellement. Dans le cas de Tokopedia, l'optimisation de la solution non-ML actuelle ne pouvait pas donner de résultats significatifs, tandis qu'une solution de ML pouvait réduire considérablement la charge de l'équipe chargée des opérations, qui devait traiter manuellement des milliers d'approbations chaque semaine. Avec une solution de ML, les vérifications d'image peuvent être effectuées presque instantanément, ce qui améliore l'expérience utilisateur et l'efficacité opérationnelle. Apprenez-en plus sur la structure du problème pour déterminer si le ML est une solution adaptée à votre problème.

Éléments à prendre en compte lors du choix d'un modèle

Les facteurs suivants ont été pris en compte lors du choix du modèle de ML.

Coût

Elle a évalué le coût global d'utilisation du modèle. Comme TensorFlow.js est un package Open Source bien géré par Google, nous réalisons des économies sur les coûts de licence et de maintenance. Autre considération à prendre en compte : le coût de l'inférence. La possibilité d'exécuter des inférences côté client permet d'économiser beaucoup d'argent par rapport au traitement côté serveur avec des GPU coûteux, en particulier si les données s'avèrent non valides et inutilisables.

Évolutivité

Elle a tenu compte de l'évolutivité du modèle et de la technologie. Est-il capable de gérer l'augmentation de la complexité des données et des modèles à mesure que le projet évolue ? Peut-il être étendu à d'autres projets ou cas d'utilisation ? Le traitement sur l'appareil est utile, car le modèle peut être hébergé sur un CDN et livré côté client, ce qui est très évolutif.

Performances

Ils ont tenu compte de la taille de la bibliothèque (en Ko) et de la latence du processus d'exécution. La majorité de la base d'utilisateurs de Mitra Tokopedia possède des appareils de milieu à bas de gamme qui disposent d'un débit Internet et d'une connectivité modérés. Ainsi, les performances en termes de téléchargement et d'exécution (c'est-à-dire la vitesse à laquelle le modèle peut produire une sortie) constituent une priorité absolue pour répondre à leurs besoins spécifiques et garantir une expérience utilisateur optimale.

Autres points à prendre en compte

Conformité réglementaire:l'entreprise a dû s'assurer que la bibliothèque choisie respectait les réglementations pertinentes sur la protection des données et la confidentialité.

Compétences:l'équipe a évalué l'expertise et les compétences de son équipe. Certains frameworks et bibliothèques de ML peuvent nécessiter des langages de programmation spécifiques ou une expertise dans un domaine particulier. En tenant compte de ces facteurs, l'équipe a pris des décisions éclairées au moment de choisir le modèle adapté à son projet de machine learning.

Technologie choisie

Après avoir pris en compte ces facteurs, TensorFlow.js a répondu à ses besoins. Il peut s'exécuter entièrement sur l'appareil à l'aide de son backend WebGL afin d'utiliser le GPU de l'appareil. L'exécution d'un modèle sur l'appareil permet d'accélérer les retours de l'utilisateur en raison de la réduction de la latence du serveur et des coûts de calcul du serveur. Pour en savoir plus sur le ML sur l'appareil, consultez l'article Avantages et limites du ML sur l'appareil.

"TensorFlow.js est une bibliothèque de machine learning Open Source de Google, destinée aux développeurs JavaScript qui peuvent exécuter côté client dans le navigateur. Il s'agit de l'option la plus aboutie pour l'IA Web, qui offre une compatibilité complète avec les opérateurs backend WebGL, WebAssembly et WebGPU, et peut être utilisée dans le navigateur avec des performances rapides."Comment Adobe a utilisé Web ML avec TensorFlow.js pour améliorer Photoshop pour le Web

Implémentation technique

Mitra Tokopedia a utilisé la bibliothèque de détection de visages de MediaPipe et TensorFlow, un package qui fournit des modèles pour l'exécution de la détection de visages en temps réel. Plus précisément, le modèle MediaPipeFaceDetector-TFJS fourni dans cette bibliothèque, qui met en œuvre l'environnement d'exécution tfjs, a été utilisé pour cette solution.

Avant d'aborder l'implémentation, faites un bref récapitulatif de MediaPipe. MediaPipe vous permet de créer et de déployer des solutions de ML sur l'appareil pour les mobiles (Android et iOS), le Web, les ordinateurs, les appareils de périphérie et l'IoT.

Au moment de la rédaction de cet article, MediaPipe propose 14 solutions différentes. Vous pouvez utiliser un environnement d'exécution mediapipe ou tfjs. L'environnement d'exécution tfjs est conçu avec JavaScript et fournit un package JavaScript que l'application Web peut télécharger en externe. Ceci est différent d'un environnement d'exécution mediapipe, qui est compilé en C++ et compilé dans un module WebAssembly. Les principales différences sont les performances, le débogage et le regroupement. Le package JavaScript peut être associé à des bundles classiques comme webpack. En revanche, le module Wasm est une ressource binaire distincte plus grande (qui est atténuée par l'absence de dépendance au temps de chargement) et nécessite un workflow de débogage Wasm différent. Cependant, il s'exécute plus rapidement pour répondre aux exigences techniques et de performances.

Schéma illustrant le fonctionnement des modèles MediaPipe et TensorFlow pour les différents environnements d'exécution, à l'aide de FaceDetection.
Illustration générale du fonctionnement des modèles MediaPipe et TensorFlow dans les différents environnements d'exécution, à l'aide de FaceDetection

Revenons à l'implémentation de Tokopedia. La première étape consiste à initialiser le modèle comme suit. Lorsque l'utilisateur importe une photo, une HTMLImageElement est transmise en tant qu'entrée au détecteur.

// 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);

Le résultat de la liste de visages contient les visages détectés pour chaque visage figurant sur l'image. Si le modèle ne peut détecter aucun visage, la liste sera vide. Pour chaque visage, il contient un cadre de délimitation du visage détecté, ainsi qu'un tableau de six points clés correspondant au visage détecté. Cela inclut les caractéristiques telles que les yeux, le nez et la bouche. Chaque point clé contient x et y, ainsi qu'un nom.

[
  {
    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 représente le cadre de délimitation du visage dans l'espace de pixels de l'image. xMin, xMax désigne les limites x, yMin, yMax les limites y, et width, height sont les dimensions du cadre de délimitation. Pour keypoints, x et y représentent la position réelle du point-clé dans l'espace de pixels de l'image. name fournit un libellé pour le point de clé, à savoir 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' et 'leftEarTragion' respectivement. Comme indiqué au début de cet article, le vendeur doit importer sa pièce d'identité nationale et un selfie avec cette pièce d'identité afin de finaliser la validation du vendeur. La sortie du modèle est ensuite utilisée pour vérifier par rapport aux critères d'acceptation, c'est-à-dire qu'une correspondance des six points clés mentionnés précédemment doit être considérée comme une carte d'identité et une image de selfie valides.

Une fois la validation effectuée, les informations pertinentes sur le vendeur sont transmises au backend. Si la validation échoue, le vendeur reçoit un message d'échec et lui offre la possibilité de réessayer. Aucune information ne sera envoyée au backend.

Schéma de la page KYC de Mitra, du modèle TensorFlow.js et du serveur interagissant l'un avec l'autre.
Comment la page KYC de Mitra, le modèle TensorFlow.js et le serveur interagissent entre eux

Considérations sur les performances des appareils bas de gamme

Ce package ne fait que 24,8 Ko (taille réduite et compressée avec gzip), ce qui n'a pas d'impact significatif sur le temps de téléchargement. Cependant, pour les appareils très bas de gamme, le traitement d'exécution prend beaucoup de temps. Une logique supplémentaire a été ajoutée pour vérifier la RAM et le processeur de l'appareil avant de transmettre les deux images au modèle de détection de visages par machine learning.

Si l'appareil dispose de plus de 4 Go de RAM, d'une connexion réseau supérieure à 4G et d'un processeur de plus de six cœurs, les images sont transmises au modèle sur l'appareil pour validation faciale. Si ces exigences ne sont pas remplies, le modèle sur l'appareil est ignoré et les images sont envoyées directement au serveur pour validation à l'aide d'une approche hybride adaptée à ces appareils plus anciens. Avec le temps, davantage d'appareils seront en mesure de décharger les calculs du serveur à mesure que le matériel évolue.

Impact

Grâce à l'intégration du ML, Tokopedia a réussi à résoudre le taux de refus élevé et a obtenu les résultats suivants:

  • Le taux de refus a diminué de plus de 20 %.
  • Le nombre d'approbations manuelles a diminué de près de 70 %.

Cela a non seulement facilité l'expérience utilisateur pour les vendeurs, mais a également permis de réduire les coûts opérationnels pour l'équipe de Tokopedia.

Conclusion

Dans l'ensemble, les résultats de cette étude de cas ont montré que, pour les cas d'utilisation appropriés, les solutions de ML sur l'appareil sur le Web peuvent être utiles pour améliorer l'expérience utilisateur et l'efficacité des fonctionnalités, ainsi que pour réaliser des économies et profiter d'autres avantages métier.

Testez la fonctionnalité de détection de visages MediaPipe à l'aide de MediaPipe Studio et de l'exemple de code du détecteur de visages MediaPipe pour le Web.

Si vous souhaitez étendre les fonctionnalités de votre propre application Web avec le ML sur l'appareil, consultez les ressources suivantes: