Tokopedia konnte durch die Verbesserung seiner Webanwendung für Verkäufer mithilfe von maschinellem Lernen die Betriebskosten senken.

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

Tokopedia ist ein indonesisches Technologieunternehmen mit einer der größten E-Commerce-Marktplätze mit über 40 digitalen Produkten und mehr als 14 Millionen registrierte Verkäufer auf der Plattform.

Mitra Tokopedia, Teil des Unternehmens von Tokopedia ist eine Webanwendung, mit der Kleinunternehmer digitale Produkte wie Kredit- und Spielegutscheine, Datenpakete, Strom Token, Gesundheitsrechnungen usw. Die Website ist eine der primären Kanäle für Mitra Tokopedia-Verkäufer in mehr als 700 Städten. Daher ist es wichtig, um eine reibungslose User Experience zu gewährleisten.

Ein wichtiger Schritt im Onboarding-Prozess besteht darin, dass diese Verkäufer ihre Identität. Der Verkäufer muss seine Identifikationsnummer sowie ein Selfie ID, um die Bestätigung des Verkäufers abzuschließen. Dies wird als KYC-Prozess (Know-Your-Customer)

Durch die Ergänzung dieses wichtigen KYC-Prozesses innerhalb konnte Mitra Tokopedia die Nutzererfahrung mit die Zahl der Bestätigungsfehler um mehr als 20 %. Das Unternehmen machte Kosteneinsparungen erzielen, da manuelle Genehmigungen um fast 70 % reduziert werden.

Herausforderung

Die meisten KYC-Daten wurden abgelehnt, wodurch pro Woche Tausende von Tickets entstanden sind zur manuellen Überprüfung an das Operations-Team. Dies führte nicht nur zu einer hohen Betriebskosten verursacht, aber auch zu einer schlechten Nutzererfahrung für Verkäufer führten, verzögert sich. Der Hauptgrund für die Ablehnung war, Verkäufer haben Selfies mit Ausweisen nicht richtig hochgeladen. Mitra Tokopedia waren möchten dieses Problem mithilfe moderner Webfunktionen skalierbar lösen.

Lösung

Das Team bei Tokopedia entschied sich, ML mit TensorFlow.js zu verwenden, um dieses Problem zu lösen. beim allerersten Schritt des KYC-Prozesses – wenn der Nutzer die Bilder hochlädt. Sie verwendet MediaPipe und TensorFlow Gesichtserkennungsbibliothek das Gesicht des Verkäufers mit sechs wichtigen Punkten zu erkennen, wenn der Verkäufer die ID hochlädt. Karten- und Selfies. Die Modellausgabe wird dann Akzeptanzkriterien. Nach erfolgreicher Bestätigung werden die Informationen an das Back-End. Wenn die Bestätigung fehlschlägt, wird dem Verkäufer eine Fehlermeldung angezeigt. und eine Option zum Wiederholen. Dabei wurde ein hybrider Ansatz verwendet, bei dem das Modell entweder auf dem Gerät oder auf der Serverseite, Spezifikationen. Ein Low-End-Gerät würde die Inferenz auf dem Server ausführen.

Die Verwendung eines ML-Modells zu Beginn des KYC-Prozesses ermöglicht ihnen Folgendes:

  • Verbessern Sie die Ablehnungsrate im KYC-Prozess.
  • Nutzer vor einer möglichen Ablehnung ihrer Bilder auf Grundlage der Qualität warnen die durch das Modell bewertet werden.

Warum sollten Sie sich für ML im Gegensatz zu anderen Lösungen entscheiden?

ML kann wiederkehrende Aufgaben automatisieren, die ansonsten zeitaufwendig oder manuell nicht praktikabel. Im Fall von Tokopedia wird die aktuelle Nicht-ML- keine signifikanten Ergebnisse liefern, während eine ML-Lösung das Betriebsteam erheblich entlasten, das manuell Tausende Genehmigungen wöchentlich. Mit einer ML-Lösung können die Bilder überprüft werden, Nahezu sofort, was eine bessere User Experience und einen besseren operativen Betrieb bietet Effizienz. Weitere Informationen zu Problem beim Framing um zu ermitteln, ob ML eine geeignete Lösung für Ihr Problem ist.

Überlegungen bei der Auswahl eines Modells

Die folgenden Faktoren wurden bei der Auswahl des ML-Modells berücksichtigt.

Kosten

Es bewertete die Gesamtkosten für die Nutzung des Modells. Da TensorFlow.js ein das von Google gut gepflegt wird, sparen wir bei der Lizenzierung und Wartungskosten. Eine weitere Überlegung sind die Kosten für die Inferenz. Das Inferenz auf Clientseite ausführen kann, spart viel Geld im Vergleich zu um sie serverseitig mit teuren GPUs zu verarbeiten, als ungültig und unbrauchbar.

Skalierbarkeit

Er berücksichtigte die Skalierbarkeit des Modells und der Technologie. Kann es die wachsende Daten- und Modellkomplexität im Laufe des Projekts zu bewältigen? Kann es sein um andere Projekte oder Anwendungsfälle abzudecken? Die Verarbeitung direkt auf dem Gerät weil das Modell auf einem CDN gehostet und auf Clientseite ausgeliefert werden könnte, das sehr skalierbar ist.

Leistung

Dabei wurden die Größe der Bibliothek (in KB) und die Latenz der Laufzeit berücksichtigt. . Die Mehrheit der Nutzer von Mitra Tokopedia hat Geräte des mittleren bis unteren Endes. mit mäßiger Internetgeschwindigkeit und Konnektivität. Die Leistung in Bezug auf Download und Laufzeit (d. h. wie schnell das Modell eine Ausgabe erzeugen kann) sind um ihre spezifischen Anforderungen zu erfüllen und eine gute User Experience zu gewährleisten.

Weitere Hinweise

Einhaltung gesetzlicher Vorschriften:Die Bibliothek musste sicherstellen, relevante Datenschutz- und Datenschutzbestimmungen.

Kompetenzen:Das Team bewertete das Fachwissen und die Fähigkeiten seines Teams. ML Frameworks und Bibliotheken erfordern möglicherweise bestimmte Programmiersprachen oder spezielle Fachkenntnisse. in einem bestimmten Gebiet. Durch die Berücksichtigung dieser Faktoren konnte das Unternehmen Entscheidungsfindung bei der Auswahl des richtigen Modells für ihr ML-Projekt.

Ausgewählte Technologie

TensorFlow.js erfüllte seine Anforderungen, nachdem er diese Faktoren zu berücksichtigen. Sie kann über das WebGL-Back-End vollständig auf dem Gerät ausgeführt werden, die GPU des Geräts nutzen. Das Ausführen eines Modells auf dem Gerät ermöglicht schnelleres Feedback für den Nutzer, da die Serverlatenz und die Computing-Kosten des Servers reduziert werden. Gelesen Weitere Informationen zu On-Device-ML finden Sie in diesem Artikel. Vorteile und Einschränkungen von On-Device-ML

„TensorFlow.js ist eine Open-Source-Bibliothek für maschinelles Lernen von Google, die JavaScript-Entwickler, die clientseitig im Browser ausführen können. Es ist die ausgereifteste Option für Web AI mit umfassenden WebGL, WebAssembly und WebGPU Back-End-Operator-Unterstützung, die im Browser mit schnellen Performance.“Wie Adobe Web ML mit TensorFlow.js verwendet hat, um Photoshop für das Web zu verbessern

Technische Implementierung

Mitra Tokopedia nutzte MediaPipe und die Gesichtserkennungsbibliothek ein Paket, das Modelle für die Echtzeit-Gesichtserkennung bereitstellt. Konkret bedeutet das MediaPipeFaceDetector-TFJS in dieser Bibliothek bereitgestelltes Modell, das die tfjs-Laufzeit implementiert, die für für diese Lösung.

Bevor wir mit der Implementierung beginnen, möchte ich kurz zusammenfassen, was MediaPipe ist. Mit MediaPipe können Sie On-Device-ML-Lösungen für Mobilgeräte (Android, iOS), Web, Computer, Edge-Geräte und IoT.

Es gibt 14 verschiedene Lösungen zum Zeitpunkt der Erstellung dieses Beitrags von MediaPipe angeboten. Sie können entweder mediapipe- oder tfjs-Laufzeit. Die tfjs-Laufzeit wird mit JavaScript und stellt ein JavaScript-Paket bereit, das extern über das Web heruntergeladen werden kann. . Dies unterscheidet sich von einer mediapipe-Laufzeit, die mit C++ und wird zu einem WebAssembly-Modul kompiliert. Die Hauptunterschiede sind Leistung, Debug-Fähigkeit und Bündelung. Das JavaScript-Paket kann mit Bundler wie Webpack. Im Gegensatz dazu ist das Wasm-Modul ein größerer Binärressource (was abgemildert wird, da sie keine Abhängigkeit von der Ladezeit ist) und erfordert eine andere Wasm-Debugging-Workflow. Sie können jedoch die Ausführung erfolgt schneller, damit die technischen Anforderungen und Leistungsanforderungen erfüllt werden.

<ph type="x-smartling-placeholder">
</ph> Diagramm zur Funktionsweise von MediaPipe- und TensorFlow-Modellen für die verschiedenen Laufzeiten am Beispiel FaceDetection.
Eine allgemeine Darstellung der Funktionsweise von MediaPipe- und TensorFlow-Modellen für die verschiedenen Laufzeiten am Beispiel FaceDetection

Zurück zur Tokopedia-Implementierung. Im ersten Schritt initialisieren Sie wie im Folgenden dargestellt. Wenn der Nutzer ein Foto hochlädt, wird ein HTMLImageElement übergeben. als Eingabe für den Detektor.

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

Das Ergebnis der Gesichterliste enthält die erkannten Gesichter für jedes Gesicht im Bild. Wenn das Modell keine Gesichter erkennen kann, ist die Liste leer. Sie enthält für jedes Gesicht einen Begrenzungsrahmen des erkannten Gesichts sowie einen Array mit sechs Keypoints für das erkannte Gesicht. Dazu gehören Funktionen wie Augen, Nase und Mund. Jeder Keypoint enthält x und y sowie einen Namen.

[
  {
    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äsentiert den Begrenzungsrahmen des Gesichts im Pixelbereich des Bildes, wobei xMin, xMax für die x-Grenzen, yMin, yMax für die y-Grenzen und width und height sind die Abmessungen des Begrenzungsrahmens. Für keypoints stellen x und y die tatsächliche Keypoint-Position im Bild dar. Pixelbereich. name stellt ein Label für den Schlüsselpunkt bereit, nämlich 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' und 'leftEarTragion'. Wie bereits zu Beginn dieses Posts erwähnt, muss der Verkäufer seine Personalausweis und Selfie mit dem Ausweis, um den Verkäufer fertigzustellen Überprüfung. Die Ausgabe des Modells wird dann zur Überprüfung anhand der Akzeptanzkriterien verwendet, d. h. eine Übereinstimmung der sechs zuvor genannten Punkte, die als gültige Personalausweis und Selfie

Nach erfolgreicher Bestätigung werden die relevanten Verkäuferinformationen an die Back-End. Wenn die Bestätigung fehlschlägt, erhält der Verkäufer eine Fehlermeldung und eine um es noch einmal zu versuchen. Es werden keine Informationen an das Backend gesendet.

<ph type="x-smartling-placeholder">
</ph> Diagramm der Mitra KYC-Seite, des TensorFlow.js-Modells und des Servers, die miteinander interagieren.
Wie die Mitra KYC-Seite, das TensorFlow.js-Modell und der Server interagieren

Leistungsaspekte für Low-End-Geräte

Dieses Paket hat nur eine Größe von 24,8 KB (minified und gzip), die Download-Zeit erheblich beeinträchtigen. Für sehr Low-End-Geräte dauert die Verarbeitung der Laufzeit sehr lange. Es wurde eine zusätzliche Logik hinzugefügt, um zu prüfen, Geräte-RAM und CPU, bevor die beiden Bilder an das maschinelle Lernen übergeben werden Erkennungsmodell.

Wenn das Gerät mehr als 4 GB RAM hat, eine Netzwerkverbindung mit mehr als 4G besteht, und einer CPU mit mehr als 6 Kernen haben, werden die Bilder an das On-Device-Modell zur Bestätigung per Gesichtserkennung. Wenn diese Anforderungen nicht erfüllt sind, wird übersprungen und die Bilder werden zur Überprüfung direkt an den Server gesendet. für diese älteren Geräte einen hybriden Ansatz. Mit der Zeit, mehr Geräte können Rechenleistung vom Server entlasten, während die Hardware immer mehr entwickeln können.

Auswirkungen

Dank der ML-Einbindung konnte Tokopedia die hohen Ablehnungsrate und folgende Ergebnisse:

  • Die Ablehnungsrate ist um mehr als 20 % gesunken.
  • Die Anzahl der manuellen Genehmigungen ist um fast 70 % gesunken.

Dies schuf nicht nur eine reibungslosere Nutzererfahrung für Verkäufer, die Betriebskosten für das Tokopedia-Team.

Fazit

Insgesamt haben die Ergebnisse dieser Fallstudie gezeigt, dass für die richtigen Anwendungsfälle können mit On-Device-ML-Lösungen im Web die Nutzerfreundlichkeit die Nutzung und Effektivität von Funktionen sowie Kosteneinsparungen und weitere Vorteile für Unternehmen zu bieten.

Testen Sie die MediaPipe-Gesichtserkennungsfunktion mit dem MediaPipe Studio und das Codebeispiel für MediaPipe Face Detector for Web

Wenn Sie die Funktionen Ihrer eigenen Webanwendung mit können Sie sich die folgenden Ressourcen ansehen: