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 L'une des plus grandes places de marché d'e-commerce, avec plus de 40 produits numériques et elle compte plus de 14 millions de vendeurs enregistrés.

Mitra Tokopedia, filiale de Tokopedia est une application Web qui aide les propriétaires de petites entreprises à vendre les produits numériques tels que les coupons de crédit et de jeu, les packages de données, l'électricité, les jetons, les factures de santé nationale, etc. Le site Web est l’un des principaux pour les vendeurs de Mitra Tokopedia dans plus de 700 villes. pour garantir une expérience utilisateur fluide.

Une étape clé du processus d'intégration exige de ces vendeurs qu'ils valident leur l'identité. Le vendeur doit importer sa carte nationale d'identité ainsi qu'un selfie avec cet identifiant pour terminer la vérification du vendeur. C'est ce que l'on appelle Processus de connaissance du client (KYC).

En ajoutant des fonctionnalités de machine learning à ce processus KYC essentiel dans son application Web, Mitra Tokopedia a pu améliorer l'expérience utilisateur de plus de 20% d'échecs de validation. L'équipe a aussi mis en place d'économies grâce à une réduction des approbations manuelles de près de 70%.

Défi

La plupart des données KYC étaient refusées, ce qui générait des milliers de tickets par semaine. à l'équipe chargée des opérations pour une vérification manuelle. Cela n'a pas seulement entraîné coûts opérationnels, mais aussi une mauvaise expérience utilisateur pour les vendeurs, dont processus de validation est retardé. La principale raison de ce refus était que Les vendeurs n'ont pas importé correctement des selfies avec des pièces d'identité. Mitra Tokopedia était désireux de résoudre ce problème de façon é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. à la toute première étape du processus KYC, lorsque l'utilisateur importe les images. Ils utilisé MediaPipe et TensorFlow Bibliothèque de détection de visages pour détecter le visage du vendeur grâce à six points clés lorsque celui-ci importe l'ID de cartes et de selfies. La sortie du modèle est ensuite utilisée pour comparer d'acceptation. Une fois la validation effectuée, les informations sont envoyées à le 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 pour exécuter inférence sur l'appareil ou côté serveur en fonction caractéristiques techniques. Un appareil bas de gamme effectue l'inférence sur le serveur.

En utilisant un modèle de ML dès le début du processus KYC, ils peuvent:

  • Améliorez le taux de refus lors du processus KYC.
  • Avertir les utilisateurs en cas de refus éventuel de leurs images, en fonction de la qualité évaluées par le modèle.

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

Le ML peut automatiser des tâches répétitives qui prennent du temps ou il est difficile de le faire manuellement. Dans le cas de Tokopedia, optimiser l'infrastructure actuelle ne donnait pas de résultats significatifs, alors qu'une solution de ML de réduire considérablement la charge qui pèse sur l'équipe chargée des opérations, qui a dû traiter manuellement des milliers d'approbations chaque semaine. Une solution de ML permet de vérifier l'image presque instantanément, ce qui améliore l'expérience utilisateur et améliore l'efficacité. En savoir plus sur cadrage du problème pour déterminer si le ML est une solution adaptée à votre problème.

Éléments à prendre en considération au moment de choisir un modèle

Les facteurs suivants ont été pris en compte dans le 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 Open Source bien géré par Google, nous économisons sur les licences les coûts de maintenance. Autre considération à prendre en compte : le coût de l'inférence. Être d'exécuter des inférences côté client vous permet de réaliser des économies et les traiter côté serveur avec des GPU coûteux, surtout si les données s'avère non valide et inutilisable.

Évolutivité

Ils ont tenu compte de l'évolutivité du modèle et de la technologie. Est-il capable de gérer la croissance des données et la complexité des modèles à mesure que notre projet évolue ? Est-ce possible ? étendu pour répondre à d'autres projets ou cas d'utilisation ? Le traitement sur l'appareil aide 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 tenu compte de la taille de la bibliothèque (en Ko) et de la latence de l'environnement d'exécution. processus. La majorité de la base d'utilisateurs de Mitra Tokopedia possède des appareils de milieu et bas de gamme. avec un débit Internet et une connectivité modérés. Ainsi, les performances en termes de de téléchargement et d'exécution (c'est-à-dire la vitesse à laquelle le modèle peut produire une sortie) est un pour répondre à leurs besoins spécifiques et garantir une expérience utilisateur optimale.

Autres points à prendre en compte

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

Compétences:l'équipe a évalué l'expertise et les compétences de son équipe. Quelques concepts de ML les frameworks et les bibliothèques peuvent nécessiter des langages de programmation spécifiques ou une expertise dans une zone spécifique. En tenant compte de ces facteurs, elle a pris une décision pour choisir le modèle adapté à leur projet de machine learning.

Technologie choisie

TensorFlow.js a répondu à leurs besoins après avoir envisagé ces facteurs. Il peut s'exécuter entièrement sur l'appareil grâce à son backend WebGL pour utiliser le GPU de l'appareil. Exécuter un modèle sur l'appareil permet d'obtenir des retours plus rapidement à l'utilisateur en raison de la réduction de la latence du serveur et des coûts de calcul du serveur. Lue plus d'informations sur le ML sur l'appareil Avantages et limites du machine learning sur l'appareil.

"TensorFlow.js est une bibliothèque de machine learning Open Source de Google, conçue pour qui est capable d'exécuter côté client dans le navigateur. Il s'agit option la plus mature pour l'IA Web, avec des fonctionnalités complètes WebGL, WebAssembly et WebGPU avec un opérateur de backend, qui peut être utilisée dans le navigateur avec des performance" : 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 TensorFlow Bibliothèque de détection de visages, un package qui fournit des modèles pour exécuter la détection de visages en temps réel. Plus précisément, MediaPipeFaceDetector-TFJS fourni dans cette bibliothèque, qui implémente l'environnement d'exécution tfjs, a été utilisé pour cette solution.

Avant de plonger dans l'implémentation, résumez en quoi consiste MediaPipe. MediaPipe vous permet de créer et de déployer des solutions de ML sur des appareils mobiles (Android, iOS), le Web, les ordinateurs, les appareils de périphérie, et l'IoT.

Il y a 14 solutions différentes proposé par MediaPipe au moment de la rédaction de cet article. Vous pouvez utiliser Environnement d'exécution mediapipe ou tfjs. L'environnement d'exécution tfjs est basé sur JavaScript et fournit un package JavaScript pouvant être téléchargé en externe par le Web application. Ceci est différent d'un environnement d'exécution mediapipe, qui est construit avec C++ et compilées en un module WebAssembly. Les principales différences sont les performances, le débogage et les offres groupées. Le package JavaScript peut être associé à des tags les bundlers comme webpack. À l'inverse, le module Wasm est plus grand et séparé la ressource binaire (qui est atténuée du fait qu'il ne s'agit pas d'une dépendance liée au temps de chargement). nécessite une autre Workflow de débogage Wasm. Toutefois, il s'exécute plus rapidement pour répondre aux exigences techniques et de performance.

<ph type="x-smartling-placeholder">
</ph> Schéma illustrant le fonctionnement des modèles MediaPipe et TensorFlow dans les différents environnements d&#39;exécution, avec l&#39;exemple FaceDetection.
Illustration générale du fonctionnement des modèles MediaPipe et TensorFlow dans les différents environnements d'exécution, avec l'exemple de FaceDetection
.

Pour en revenir à l'implémentation de Tokopedia, la première étape consiste à initialiser comme indiqué ci-dessous. Lorsque l'utilisateur importe une photo, une HTMLImageElement est transmise. comme entrée du 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 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'une tableau de six points clés pour le visage détecté. Cela inclut des fonctionnalités 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, avec xMin, xMax indique la limite X, yMin, yMax indique la limite Y, et width et 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'image. l'espace de pixels. name fournit un libellé pour le point clé, à savoir 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' et 'leftEarTragion' respectivement. Comme indiqué au début de cet article, le vendeur doit importer ses Pièce d'identité nationale et un selfie sur lequel figure la pièce d'identité afin de finaliser le processus du vendeur la validation. La sortie du modèle est ensuite utilisée pour vérifier par rapport aux critères d'acceptation, c'est-à-dire une correspondance avec les six points clés mentionnés précédemment pour être considérés comme valides Carte d'identité et image de selfie.

Une fois la validation effectuée, les informations pertinentes sur le vendeur sont transmises au backend. Si la vérification échoue, le vendeur reçoit un message d'échec ainsi qu'un message pour réessayer. Aucune information ne sera envoyée au backend.

<ph type="x-smartling-placeholder">
</ph> Schéma de l&#39;interaction entre la page KYC de Mitra, le modèle TensorFlow.js et le serveur
Interactions entre la page KYC de Mitra, le modèle TensorFlow.js et le serveur
.

Considérations sur les performances pour les appareils bas de gamme

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

Si l’appareil a plus de 4 Go de RAM, une connexion réseau supérieure à 4G, et un processeur de plus de 6 cœurs, les images sont transmises au modèle sur l'appareil pour la validation faciale. Si ces conditions ne sont pas remplies, l'état est ignoré, et les images sont envoyées directement au serveur pour vérification. en utilisant une approche hybride pour répondre à ces appareils plus anciens. Au fil du temps, de plus en plus peuvent décharger les ressources de calcul du serveur alors que le matériel évoluer.

Impact

Grâce à l'intégration du ML, Tokopedia a pu relever le défi 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 permis de simplifier l'expérience utilisateur pour les vendeurs, mais aussi de réduire le coût opérationnel de l'équipe Tokopedia.

Conclusion

Dans l'ensemble, 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 contribuer à améliorer l'expérience utilisateur l'expérience et l'efficacité des fonctionnalités, tout en permettant de réaliser des économies d'autres avantages pour l'entreprise.

Essayez vous-même la fonctionnalité Détection de visages MediaPipe à l'aide de l' MediaPipe Studio et l'exemple de code pour Détecteur de visages MediaPipe pour le Web

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