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 de technologie indonésienne qui gère l'une des plus grandes places de marché d'e-commerce, avec plus de 40 produits numériques et plus de 14 millions de vendeurs enregistrés sur sa plate-forme.

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

Une étape clé du processus d'intégration exige que ces vendeurs valident leur identité. Le vendeur doit importer sa pièce d'identité nationale ainsi qu'un selfie avec la pièce d'identité pour valider son identité. Il s'agit du processus de connaissance du client (KYC, Know Your Customer).

En ajoutant des fonctionnalités de machine learning à ce processus de vérification d'identité essentiel dans 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éalisé des économies de coûts opérationnels en réduisant les approbations manuelles de près de 70%.

Défi

La plupart des données de vérification de l'identité étaient rejetées, ce qui générait des milliers de demandes par semaine à l'équipe d'exploitation pour une vérification manuelle. Cela a non seulement entraîné des coûts opérationnels élevés, mais aussi une mauvaise expérience utilisateur pour les vendeurs, dont le processus de validation est retardé. La principale raison du refus est que les vendeurs n'ont pas correctement importé de selfies avec leur pièce d'identité. Mitra Tokopedia souhaitait résoudre ce problème de manière évolutive à l'aide des 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 dès la première étape du processus de vérification de l'identité, lorsque l'utilisateur importe les images. Ils ont utilisé MediaPipe et la bibliothèque de détection des visages de TensorFlow pour détecter le visage du vendeur à l'aide de six points clés lorsque le vendeur importe la pièce d'identité et les images de selfie. La sortie du modèle est ensuite utilisée pour vérifier ses critères d'acceptation. Une fois la validation réussie, les informations sont envoyées au backend. Si la validation échoue, un message d'erreur s'affiche et le vendeur a la possibilité de 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 spécifications du téléphone. Un appareil d'entrée de gamme effectue l'inférence sur le serveur.

L'utilisation d'un modèle de ML dès le début du processus de vérification d'identité leur permet de:

  • Améliorer le taux de refus lors du processus de vérification de l'identité
  • Avertissez les utilisateurs de la possibilité de 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 seraient autrement longues ou difficiles à effectuer manuellement. Dans le cas de Tokopedia, l'optimisation de la solution actuelle sans ML n'a pas donné de résultats significatifs, tandis qu'une solution de ML pourrait réduire considérablement la charge de l'équipe d'exploitation, qui devait traiter manuellement des milliers d'approbations chaque semaine. Avec une solution de ML, les vérifications des images peuvent être effectuées presque instantanément, ce qui offre une meilleure expérience utilisateur et améliore l'efficacité opérationnelle. Découvrez comment formuler un 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

Il a évalué le coût global de l'utilisation du modèle. Comme TensorFlow.js est un package Open Source bien géré par Google, nous économisons sur les coûts de licence et de maintenance. Un autre élément à prendre en compte est le coût de l'inférence. La possibilité d'exécuter l'inférence 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é

Il a pris en compte l'évolutivité du modèle et de la technologie. Est-il capable de gérer la croissance de la complexité des données et des modèles à mesure que notre projet évolue ? Peut-il être étendu pour répondre à 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 diffusé côté client, ce qui est très évolutif.

Performances

Il a pris en compte la taille de la bibliothèque (en Ko) et la latence du processus d'exécution. La majorité de la base d'utilisateurs de Mitra Tokopedia dispose d'appareils de milieu de gamme ou d'entrée de gamme, avec une vitesse et une connectivité Internet modérées. Par conséquent, les performances en termes de téléchargement et d'exécution (c'est-à-dire la rapidité avec laquelle le modèle peut produire une sortie) sont une priorité absolue pour répondre à leurs besoins spécifiques et garantir une expérience utilisateur de qualité.

Autres points à noter

Conformité réglementaire:il devait s'assurer que la bibliothèque choisie respectait les réglementations en vigueur sur la protection des données et la confidentialité.

Compétences:il 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 ou une expertise spécifiques dans un domaine donné. En tenant compte de ces facteurs, il a pris une décision éclairée lorsqu'il a choisi le bon modèle pour son projet de machine learning.

Technologie choisie

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

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

Implémentation technique

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

Avant de vous lancer dans l'implémentation, voici un bref récapitulatif de ce qu'est MediaPipe. MediaPipe vous permet de créer et de déployer des solutions de ML sur l'appareil pour les mobiles (Android, 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 créé avec JavaScript et fournit un package JavaScript pouvant être téléchargé en externe par l'application Web. Il s'agit d'un environnement d'exécution différent de celui de mediapipe, qui est compilé avec C++ et compilé en module WebAssembly. Les principales différences concernent les performances, la débogabilité et le regroupement. Le package JavaScript peut être regroupé avec des outils de regroupement classiques tels que webpack. En revanche, le module Wasm est une ressource binaire plus importante et distincte (ce qui est atténué par le fait qu'il ne s'agit pas d'une dépendance au moment du chargement) et nécessite un workflow de débogage Wasm différent. Toutefois, il s'exécute plus rapidement pour répondre aux exigences techniques et de performances.

Diagramme illustrant le fonctionnement des modèles MediaPipe et TensorFlow pour les différents environnements d'exécution, en utilisant FaceDetection comme exemple.
Illustration générale du fonctionnement des modèles MediaPipe et TensorFlow pour les différents environnements d'exécution, en utilisant FaceDetection comme exemple

Pour revenir à l'implémentation de Tokopedia, la première étape consiste à initialiser le modèle comme suit. Lorsque l'utilisateur importe une photo, un HTMLImageElement est transmis en 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 des visages contient les visages détectés pour chaque visage de l'image. Si le modèle ne détecte aucun visage, la liste est vide. Pour chaque visage, il contient un cadre de délimitation du visage détecté, ainsi qu'un tableau de six points clés pour le visage détecté. Cela inclut 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, avec xMin et xMax qui indiquent les limites x, yMin et yMax qui indiquent les limites y, et width et height qui représentent les dimensions du cadre de délimitation. Pour keypoints, x et y, la position du point clé réel est représentée dans l'espace de pixels de l'image. name fournit un libellé pour le point clé, qui est '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 la pièce d'identité pour finaliser la validation du vendeur. La sortie du modèle est ensuite utilisée pour vérifier les critères d'acceptation, c'est-à-dire que les six points clés mentionnés précédemment doivent correspondre pour être considérés comme une carte d'identité et une image de selfie valides.

Une fois la validation réussie, les informations sur le vendeur pertinentes sont transmises au backend. Si la validation échoue, un message d'échec s'affiche et le vendeur a la possibilité de réessayer. Aucune information ne sera envoyée au backend.

Schéma illustrant l'interaction entre la page de vérification de l'identité Mitra, le modèle TensorFlow.js et le serveur.
Interaction entre la page de vérification de l'identité Mitra, le modèle TensorFlow.js et le serveur

Considérations sur les performances pour les appareils d'entrée de gamme

Ce package ne fait que 24,8 ko (minimisé et compressé avec gzip), ce qui n'a pas d'incidence significative sur le temps de téléchargement. Toutefois, 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 des visages de 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 avec plus de 6 cœurs, les images sont transmises au modèle sur l'appareil pour la vérification du visage. 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. Au fil du temps, davantage d'appareils pourront décharger le calcul du serveur à mesure que le matériel continuera d'évoluer.

Impact

Grâce à l'intégration du ML, Tokopedia a pu résoudre le problème de 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 amélioré l'expérience utilisateur pour les vendeurs, mais aussi réduit les coûts opérationnels pour l'équipe Tokopedia.

Conclusion

Globalement, les résultats de cette étude de cas ont montré que, pour les bons cas d'utilisation, 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 générer des économies de coûts et d'autres avantages commerciaux.

Essayez vous-même la fonctionnalité de détection des visages MediaPipe à l'aide de MediaPipe Studio et de l'exemple de code pour le détecteur de visage 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: