Tokopedia ist ein indonesisches Technologieunternehmen mit einem der größten E-Commerce-Marktplätze. Auf der Plattform werden über 40 digitale Produkte und mehr als 14 Millionen registrierte Verkäufer angeboten.
Mitra Tokopedia ist Teil der Geschäftsbereiche von Tokopedia und eine Webanwendung, mit der Kleinunternehmer digitale Produkte wie Kredit- und Spielegutscheine, Datenpakete, Strommarken und Rechnungen für die nationale Gesundheitsversorgung verkaufen können. Die Website ist einer der wichtigsten Kanäle für Mitra Tokopedia-Verkäufer in mehr als 700 Städten. Daher ist es entscheidend, dass sie eine reibungslose Nutzererfahrung bietet.
Ein wichtiger Schritt im Onboarding-Prozess ist die Bestätigung der Identität dieser Verkäufer. Der Verkäufer muss seinen Personalausweis und ein Selfie mit dem Ausweis hochladen, um die Verkäuferbestätigung abzuschließen. Dies wird als Know Your Customer-Prozess (KYC) bezeichnet.
Durch das Hinzufügen von Machine Learning-Funktionen zu diesem wichtigen KYC-Prozess in ihrer Web-App konnte Mitra Tokopedia die Nutzerfreundlichkeit verbessern und die Anzahl der fehlgeschlagenen Überprüfungen um mehr als 20% reduzieren. Außerdem konnten sie die Betriebskosten senken, indem sie die Anzahl der manuellen Genehmigungen um fast 70 % reduzierten.
Herausforderung
Die meisten KYC-Daten wurden abgelehnt, was zu Tausenden von Tickets pro Woche für das Operations-Team zur manuellen Überprüfung führte. Dies verursachte nicht nur hohe Betriebskosten, sondern führte auch zu einer schlechten Nutzererfahrung für Verkäufer, deren Bestätigungsprozess sich verzögerte. Der häufigste Grund für die Ablehnung war, dass Verkäufer keine Selfies mit Ausweisen hochgeladen haben. Mitra Tokopedia wollte dieses Problem skalierbar mit modernen Webfunktionen lösen.
Lösung
Das Team von Tokopedia entschied sich, ML mit TensorFlow.js zu verwenden, um dieses Problem im ersten Schritt des KYC-Prozesses zu lösen, wenn der Nutzer die Bilder hochlädt. Sie haben die Face Detection-Bibliothek von MediaPipe und TensorFlow verwendet, um das Gesicht des Verkäufers mit sechs Schlüsselpunkten zu erkennen, wenn der Verkäufer die Bilder des Ausweises und des Selfies hochlädt. Die Ausgabe des Modells wird dann mit den Akzeptanzkriterien abgeglichen. Nach erfolgreicher Bestätigung werden die Informationen an das Backend gesendet. Wenn die Bestätigung fehlschlägt, erhält der Verkäufer eine Fehlermeldung und die Möglichkeit, es noch einmal zu versuchen. Es wurde ein hybrider Ansatz verwendet, bei dem das Modell die Inferenz je nach den Spezifikationen des Smartphones entweder auf dem Gerät oder serverseitig ausführt. Bei einem weniger leistungsstarken Endgerät würde die Inferenz auf dem Server ausgeführt.
Durch den Einsatz eines ML-Modells zu Beginn des KYC-Prozesses können sie:
- Die Ablehnungsrate im KYC-Prozess senken
- Nutzer vor einer möglichen Ablehnung ihrer Bilder warnen, basierend auf der vom Modell bewerteten Qualität.
Warum sollten Sie sich für ML und nicht für andere Lösungen entscheiden?
Mit ML lassen sich sich wiederholende Aufgaben automatisieren, die sonst zeitaufwendig oder manuell nicht praktikabel wären. Im Fall von Tokopedia konnte die aktuelle Nicht-ML-Lösung nicht optimiert werden, um signifikante Ergebnisse zu erzielen. Eine ML-Lösung hingegen konnte die Belastung des Betriebsteams deutlich reduzieren, das wöchentlich Tausende von Genehmigungen manuell bearbeiten musste. Mit einer ML-Lösung können die Bildprüfungen nahezu sofort durchgeführt werden, was die Nutzerfreundlichkeit und die betriebliche Effizienz verbessert. Weitere Informationen zum Problem-Framing, um festzustellen, ob ML eine geeignete Lösung für Ihr Problem ist.
Überlegungen bei der Auswahl eines Modells
Bei der Auswahl des ML-Modells wurden die folgenden Faktoren berücksichtigt.
Kosten
Sie haben die Gesamtkosten für die Verwendung des Modells bewertet. Da TensorFlow.js ein Open-Source-Paket ist, das von Google gut gepflegt wird, sparen wir Lizenz- und Wartungskosten. Ein weiterer wichtiger Aspekt sind die Kosten für die Inferenz. Die Möglichkeit, Inferenz auf der Clientseite auszuführen, spart viel Geld im Vergleich zur Verarbeitung auf der Serverseite mit teuren GPUs, insbesondere wenn sich die Daten als ungültig und unbrauchbar erweisen.
Skalierbarkeit
Sie berücksichtigten die Skalierbarkeit des Modells und der Technologie. Kann es mit dem Wachstum der Daten und der Modellkomplexität umgehen, wenn sich unser Projekt weiterentwickelt? Kann es für andere Projekte oder Anwendungsfälle erweitert werden? Die Verarbeitung auf dem Gerät ist hilfreich, da das Modell auf einem CDN gehostet und an die Clientseite übertragen werden kann, was sehr skalierbar ist.
Leistung
Dabei wurden die Größe der Bibliothek (in KB) und die Latenz des Laufzeitprozesses berücksichtigt. Die meisten Nutzer von Mitra Tokopedia haben Geräte der Mittel- bis Einstiegsklasse mit moderater Internetgeschwindigkeit und ‑verbindung. Die Leistung in Bezug auf Download und Laufzeit (d. h. wie schnell das Modell eine Ausgabe erzeugen kann) hat daher höchste Priorität, um ihren spezifischen Anforderungen gerecht zu werden und eine optimale Nutzerfreundlichkeit zu gewährleisten.
Weitere Hinweise
Einhaltung von Vorschriften:Sie mussten dafür sorgen, dass die ausgewählte Bibliothek den relevanten Datenschutzbestimmungen entspricht.
Kompetenzen:Sie haben die Kompetenzen und Fähigkeiten ihres Teams bewertet. Für einige ML-Frameworks und ‑Bibliotheken sind möglicherweise bestimmte Programmiersprachen oder Fachkenntnisse in einem bestimmten Bereich erforderlich. Durch die Berücksichtigung dieser Faktoren konnten sie eine fundierte Entscheidung bei der Auswahl des richtigen Modells für ihr Projekt zum maschinellen Lernen treffen.
Ausgewählte Technologie
TensorFlow.js erfüllte ihre Anforderungen, nachdem diese Faktoren berücksichtigt wurden. Es kann vollständig auf dem Gerät ausgeführt werden, da das WebGL-Backend die GPU des Geräts nutzt. Wenn ein Modell auf dem Gerät ausgeführt wird, kann dem Nutzer schneller Feedback gegeben werden, da die Serverlatenz geringer ist. Außerdem werden die Server-Computing-Kosten gesenkt. Weitere Informationen zu On-Device ML finden Sie im Artikel Vorteile und Einschränkungen von On-Device ML.
„TensorFlow.js ist eine Open-Source-Bibliothek für maschinelles Lernen von Google, die sich an JavaScript-Entwickler richtet und clientseitig im Browser ausgeführt werden kann. Es ist die ausgereifteste Option für Web-KI mit umfassender Unterstützung für WebGL-, WebAssembly- und WebGPU-Backend-Operatoren, die im Browser mit hoher Leistung verwendet werden kann.“ – Wie Adobe Web-ML mit TensorFlow.js zur Verbesserung von Photoshop für das Web eingesetzt hat
Technische Implementierung
Mitra Tokopedia nutzte MediaPipe und die Face Detection-Bibliothek von TensorFlow, ein Paket mit Modellen für die Echtzeit-Gesichtserkennung.
Für diese Lösung wurde das in dieser Bibliothek bereitgestellte Modell MediaPipeFaceDetector-TFJS verwendet, das die tfjs-Laufzeit implementiert.
Bevor wir uns mit der Implementierung befassen, hier eine kurze Zusammenfassung von MediaPipe. Mit MediaPipe können Sie On-Device-ML-Lösungen für Mobilgeräte (Android, iOS), das Web, Computer, Edge-Geräte und IoT entwickeln und bereitstellen.
Zum Zeitpunkt der Erstellung dieses Beitrags bietet MediaPipe 14 verschiedene Lösungen. Sie können entweder eine mediapipe- oder eine tfjs-Laufzeit verwenden. Die tfjs-Laufzeit basiert auf JavaScript und bietet ein JavaScript-Paket, das von der Webanwendung extern heruntergeladen werden kann. Das unterscheidet sich von einer mediapipe-Laufzeit, die mit C++ erstellt und in ein WebAssembly-Modul kompiliert wird. Die wichtigsten Unterschiede sind Leistung, Debugging und Bündelung. Das JavaScript-Paket kann mit klassischen Bundlern wie Webpack gebündelt werden. Das Wasm-Modul ist dagegen eine größere und separate binäre Ressource (was dadurch gemildert wird, dass es keine Ladezeitabhängigkeit ist) und erfordert einen anderen Wasm-Debugging-Workflow. Die Ausführung erfolgt jedoch schneller, um technische und Leistungsanforderungen zu erfüllen.
Zurück zur Implementierung von Tokopedia: Der erste Schritt besteht darin, das Modell so zu initialisieren. Wenn der Nutzer ein Foto hochlädt, wird ein HTMLImageElement als Eingabe an den Detektor übergeben.
// 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 Gesichtsliste enthält erkannte Gesichter für jedes Gesicht im Bild. Wenn das Modell keine Gesichter erkennen kann, ist die Liste leer. Für jedes Gesicht enthält es einen Begrenzungsrahmen des erkannten Gesichts sowie ein Array mit sechs Schlüsselpunkten für das erkannte Gesicht. Dazu gehören Merkmale wie Augen, Nase und Mund. Jeder Keypoint enthält x- und y-Koordinaten 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 steht für den Begrenzungsrahmen des Gesichts im Bildpixelbereich. xMin und xMax bezeichnen die x-Grenzen, yMin und yMax die y-Grenzen und width und height die Abmessungen des Begrenzungsrahmens.
Für keypoints, x und y wird die tatsächliche Position des Keypoints im Bildpixelraum angegeben.
Das name enthält ein Label für den Keypoint, nämlich 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' und 'leftEarTragion'.
Wie bereits erwähnt, muss der Verkäufer seinen Personalausweis und ein Selfie mit dem Ausweis hochladen, um die Verkäuferüberprüfung abzuschließen.
Die Ausgabe des Modells wird dann mit den Akzeptanzkriterien verglichen. Das heißt, es muss eine Übereinstimmung der sechs zuvor genannten Schlüsselpunkte vorliegen, damit das Bild des Ausweises und das Selfie als gültig eingestuft werden.
Nach erfolgreicher Bestätigung werden die entsprechenden Verkäuferinformationen an das Backend übergeben. Wenn die Bestätigung fehlschlägt, erhält der Verkäufer eine Fehlermeldung und die Möglichkeit, es noch einmal zu versuchen. Es werden keine Informationen an das Backend gesendet.
Hinweise zur Leistung bei Low-End-Geräten
Dieses Paket ist nur 24,8 KB groß (minimiert und gezippt), was sich nicht wesentlich auf die Downloadzeit auswirkt. Bei sehr einfachen Geräten dauert die Laufzeitverarbeitung jedoch lange. Es wurde zusätzliche Logik hinzugefügt, um vor der Übergabe der beiden Bilder an das ML-Modell zur Gesichtserkennung den RAM und die CPU des Geräts zu prüfen.
Wenn das Gerät mehr als 4 GB RAM, eine Netzwerkverbindung mit mehr als 4G und eine CPU mit mehr als 6 Kernen hat, werden die Bilder zur Gesichtsüberprüfung an das On-Device-Modell übergeben. Wenn diese Anforderungen nicht erfüllt sind, wird das On-Device-Modell übersprungen und die Bilder werden direkt an den Server gesendet, um dort mit einem hybriden Ansatz für diese älteren Geräte überprüft zu werden. Im Laufe der Zeit werden immer mehr Geräte in der Lage sein, Rechenleistung vom Server auszulagern, da sich die Hardware ständig weiterentwickelt.
Auswirkungen
Dank der ML-Integration konnte Tokopedia die hohe Ablehnungsrate erfolgreich senken und folgende Ergebnisse erzielen:
- Die Ablehnungsrate ist um mehr als 20 % gesunken.
- Die Anzahl der manuellen Genehmigungen ist um fast 70 % gesunken.
Dies führte nicht nur zu einer besseren Nutzererfahrung für Verkäufer, sondern senkte auch die Betriebskosten für das Tokopedia-Team.
Fazit
Insgesamt haben die Ergebnisse dieser Fallstudie gezeigt, dass On-Device-ML-Lösungen im Web für die richtigen Anwendungsfälle wertvoll sein können, um die Nutzerfreundlichkeit und Effektivität von Funktionen zu verbessern sowie Kosteneinsparungen und andere geschäftliche Vorteile zu erzielen.
Sie können die MediaPipe-Gesichtserkennung selbst mit MediaPipe Studio und dem Codebeispiel für MediaPipe Face Detector für das Web ausprobieren.
Wenn Sie die Funktionen Ihrer eigenen Web-App mit On-Device ML erweitern möchten, finden Sie hier weitere Informationen: