Tokopedia ist ein indonesisches Technologieunternehmen mit einem der größten E-Commerce-Marktplätze, auf dem über 40 digitale Produkte und mehr als 14 Millionen registrierte Verkäufer zu finden sind.
Mitra Tokopedia, Teil der Unternehmensbranchen von Tokopedia, ist eine Webanwendung, die Kleinunternehmern beim Verkauf digitaler Produkte wie Guthaben- und Spielgutscheine, Datenpakete, Stromtokens, nationale Gesundheitsrechnungen und andere hilft. Die Website ist einer der wichtigsten Kanäle für Mitra Tokopedia-Verkäufer in mehr als 700 Städten, daher ist es für eine reibungslose Nutzererfahrung von entscheidender Bedeutung.
Für einen wichtigen Schritt im Onboardingprozess müssen diese Verkäufer ihre Identität bestätigen. Der Verkäufer muss seine Identifikationsnummer und ein Selfie mit dieser ID hochladen, um die Verkäuferbestätigung abzuschließen. Dies wird als Know-Your-Customer-Prozess (KYC) bezeichnet.
Durch die Ergänzung dieses wichtigen KYC-Prozesses in seiner Webanwendung um Funktionen für maschinelles Lernen konnte Mitra Tokopedia die Nutzererfahrung verbessern und die Anzahl der Fehler bei der Verifizierung um mehr als 20% reduzieren. Außerdem konnte das Unternehmen die Betriebskosten senken, indem es manuelle Genehmigungen um fast 70 % reduzierte.
Herausforderung
Die meisten KYC-Daten wurden abgelehnt, sodass pro Woche Tausende Tickets zur manuellen Überprüfung an das Operations-Team gesendet wurden. Dies verursachte nicht nur hohe Betriebskosten, sondern führte auch zu einer negativen Nutzererfahrung für Verkäufer, deren Verifizierung sich verzögert. Der Hauptgrund für die Ablehnung war, dass Verkäufer Selfies mit ihren Ausweisen nicht korrekt hochgeladen haben. Mitra Tokopedia wollte dieses Problem mithilfe moderner Webfunktionen auf skalierbare Weise lösen.
Lösung
Das Team von Tokopedia beschloss, ML mit TensorFlow.js zu verwenden, um dieses Problem im ersten Schritt des KYC-Prozesses zu lösen: beim Hochladen der Bilder durch den Nutzer. Mithilfe der Bibliothek zur Gesichtserkennung von MediaPipe und TensorFlow wurde das Gesicht des Verkäufers anhand von sechs wichtigen Punkten erkannt, wenn der Verkäufer den Ausweis und die Selfies hochlädt. Die Ausgabe des Modells wird dann zur Prüfung auf ihre Akzeptanzkriterien verwendet. Nach erfolgreicher Überprüfung werden die Informationen an das Back-End gesendet. Wenn die Bestätigung fehlschlägt, erhält der Verkäufer eine Fehlermeldung und hat die Möglichkeit, es noch einmal zu versuchen. Es wurde ein hybrider Ansatz verwendet, bei dem das Modell die Inferenz entweder auf dem Gerät oder serverseitig je nach Spezifikationen des Smartphones ausführt. Ein Low-End-Gerät würde die Inferenz auf dem Server ausführen.
Der Einsatz eines ML-Modells zu Beginn des KYC-Prozesses ermöglicht Folgendes:
- Verbessern Sie die Ablehnungsrate im KYC-Prozess.
- Warnen Sie Nutzer auf Grundlage der vom Modell bewerteten Qualität vor einer möglichen Ablehnung ihrer Bilder.
Warum sollten Sie sich für Machine Learning (ML) und andere Lösungen entscheiden?
Mit ML können wiederkehrende Aufgaben automatisiert werden, die ansonsten zeitaufwendig oder manuell nicht auszuführen sind. Im Fall von Tokopedia konnte die Optimierung der aktuellen Nicht-ML-Lösung keine nennenswerten Ergebnisse liefern, während eine ML-Lösung die Belastung für das operative Team erheblich reduzieren konnte, das Tausende von Genehmigungen wöchentlich manuell verarbeiten musste. Mit einer ML-Lösung können die Image-Prüfungen nahezu sofort durchgeführt werden, was die Nutzerfreundlichkeit verbessert und die betriebliche Effizienz verbessert. Unter Problem-Framing erfahren Sie, wie Sie herausfinden, 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 wurden die Gesamtkosten der Nutzung des Modells bewertet. Da TensorFlow.js ein Open-Source-Paket ist, das von Google gut gepflegt wird, sparen wir Lizenz- und Wartungskosten. Ein weiterer Aspekt sind die Inferenzkosten. Die Möglichkeit, Inferenzen auf Clientseite auszuführen, spart im Vergleich zur Verarbeitung auf der Serverseite mit teuren GPUs viel Geld, insbesondere wenn sich die Daten als ungültig und unbrauchbar erweisen.
Skalierbarkeit
Sie berücksichtigten die Skalierbarkeit des Modells und der Technologie. Ist es in der Lage, die wachsende Daten- und Modellkomplexität im Zuge der Projektentwicklung zu bewältigen? Kann es auf andere Projekte oder Anwendungsfälle erweitert werden? Die On-Device-Verarbeitung ist hilfreich, da das Modell auf einem CDN gehostet und an die Clientseite übertragen werden könnte, was sehr skalierbar ist.
Leistung
Dabei wurden die Größe der Bibliothek (in KB) und die Latenz des Laufzeitprozesses berücksichtigt. Die Mehrheit der Nutzer von Mitra Tokopedia hat Geräte mittlerer bis niedriger Endgeräte mit mäßiger Internetgeschwindigkeit und -verbindung. Daher hat die Leistung in Bezug auf Download und Laufzeit (d. h. wie schnell das Modell eine Ausgabe produzieren kann) höchste Priorität, um den spezifischen Anforderungen gerecht zu werden und eine hervorragende Nutzererfahrung zu bieten.
Weitere Aspekte
Einhaltung gesetzlicher Vorschriften:Es musste dafür sorgen, dass die ausgewählte Bibliothek die relevanten Datenschutz- und Datenschutzbestimmungen einhält.
Fähigkeiten:Das Team hat das Fachwissen und die Fähigkeiten seines Teams bewertet. Einige ML-Frameworks und -Bibliotheken erfordern möglicherweise bestimmte Programmiersprachen oder Fachwissen in einem bestimmten Bereich. Unter Berücksichtigung dieser Faktoren traf das Unternehmen eine fundierte Entscheidung bei der Auswahl des richtigen Modells für sein ML-Projekt.
Technologie ausgewählt
TensorFlow.js hat ihre Anforderungen unter Berücksichtigung dieser Faktoren erfüllt. Er kann über sein WebGL-Back-End vollständig auf dem Gerät ausgeführt werden, um die GPU des Geräts zu verwenden. Das Ausführen eines Modells auf dem Gerät ermöglicht ein schnelleres Feedback an den Nutzer aufgrund der geringeren Serverlatenz und der Kosten für die Serverberechnung. Weitere Informationen zu ML auf dem Gerät finden Sie im Artikel Vorteile und Einschränkungen von ML auf dem Gerät.
„TensorFlow.js ist eine Open-Source-Bibliothek für maschinelles Lernen von Google für JavaScript-Entwickler, die 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-Back-End-Operatoren, die im Browser mit hoher Leistung verwendet werden kann." – Wie Adobe Web ML mit TensorFlow.js zur Optimierung von Photoshop für das Web nutzte
Technische Implementierung
Mitra Tokopedia nutzte die Bibliothek zur Gesichtserkennung von MediaPipe und TensorFlow, ein Paket, das Modelle zur Ausführung der Gesichtserkennung in Echtzeit bereitstellt.
Für diese Lösung wurde insbesondere das in dieser Bibliothek bereitgestellte MediaPipeFaceDetector-TFJS-Modell verwendet, das die tfjs-Laufzeit implementiert.
Bevor Sie sich mit der Implementierung befassen, sollten Sie kurz wiederholen, 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 erstellen und bereitstellen.
Zum Zeitpunkt der Erstellung dieses Beitrags hat MediaPipe 14 verschiedene Lösungen angeboten. Sie können entweder eine mediapipe- oder eine tfjs-Laufzeit verwenden. Die tfjs-Laufzeit basiert auf JavaScript und stellt ein JavaScript-Paket bereit, das extern von der Webanwendung heruntergeladen werden kann. Dies unterscheidet sich von einer mediapipe-Laufzeit, die mit C++ erstellt und in ein WebAssembly-Modul kompiliert ist. Die Hauptunterschiede sind Leistung, Fehlerbehebung und Bündelung. Das JavaScript-Paket kann mit klassischen Bundlern wie Webpack gebündelt werden. Im Gegensatz dazu ist das Wasm-Modul eine größere und separate Binärressource (was abgemildert wird, weil es keine Abhängigkeit der Ladezeit ist) und erfordert einen anderen Wasm-Debugging-Workflow. Sie wird jedoch schneller ausgeführt, um die technischen Anforderungen und Leistungsanforderungen zu erfüllen.
Bei der Implementierung von Tokopedia besteht der erste Schritt 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 Gesichterliste enthält erkannte Gesichter für jedes Gesicht auf dem 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 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 stellt den Begrenzungsrahmen des Gesichts im Bildpixelraum dar, wobei xMin, xMax die x-Grenzen, yMin, yMax die y-Grenzen und width, height die Maße des Begrenzungsrahmens sind.
Bei keypoints stellen x und y die tatsächliche Keypoint-Position im Bildpixelraum dar.
name stellt ein Label für den Schlüsselpunkt bereit, also 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' bzw. 'leftEarTragion'.
Wie zu Beginn dieses Beitrags erwähnt, muss der Verkäufer seine Identifikationsnummer und ein Selfie mit dieser ID hochladen, um die Verkäuferüberprüfung abzuschließen.
Die Ausgabe des Modells wird dann zur Prüfung auf die Akzeptanzkriterien verwendet, d. h. eine Übereinstimmung mit den sechs zuvor genannten Schlüsselpunkten, um als gültiger Ausweis und ein gültiges Selfie-Bild zu gelten.
Nach erfolgreicher Verifizierung werden die relevanten Verkäuferinformationen an das Back-End übergeben. Wenn die Bestätigung fehlschlägt, erhält der Verkäufer eine Fehlermeldung und hat die Möglichkeit, es noch einmal zu versuchen. Es werden keine Informationen an das Backend gesendet.
Leistungsaspekte für Low-End-Geräte
Dieses Paket ist nur 24,8 KB groß (komprimiert und mit gzip komprimiert), was sich nicht wesentlich auf die Downloadzeit auswirkt. Bei sehr Low-End-Geräten dauert die Laufzeitverarbeitung jedoch viel Zeit. Es wurde eine zusätzliche Logik hinzugefügt, um den Geräte-RAM und die CPU zu prüfen, bevor die beiden Bilder an das Gesichtserkennungsmodell für maschinelles Lernen übergeben werden.
Wenn das Gerät mehr als 4 GB RAM, eine Netzwerkverbindung mit mehr als 4 G und eine CPU mit mehr als 6 Kernen hat, werden die Bilder zur Gesichtserkennung an das Gerätemodell übergeben. Wenn diese Anforderungen nicht erfüllt sind, wird das On-Device-Modell übersprungen und die Bilder werden mithilfe eines hybriden Ansatzes zur Prüfung direkt an den Server gesendet, um diese älteren Geräte zu berücksichtigen. Mit der Zeit werden immer mehr Geräte in der Lage sein, die Rechenleistung des Servers zu entlasten, wenn die Hardware sich ständig weiterentwickelt.
Auswirkungen
Dank der ML-Integration konnte Tokopedia die hohe Ablehnungsrate erfolgreich beseitigen und sah die folgenden Ergebnisse:
- Die Ablehnungsrate sank um mehr als 20 %.
- Die Anzahl der manuellen Genehmigungen ging um fast 70 % zurück.
Dies sorgte nicht nur für eine reibungslosere User Experience für Verkäufer, sondern reduzierte auch die Betriebskosten für das Tokopedia-Team.
Fazit
Die Ergebnisse dieser Fallstudie zeigen insgesamt, dass On-Device-ML-Lösungen im Web für die richtigen Anwendungsfälle nützlich sein können, um die Nutzerfreundlichkeit und Effektivität von Funktionen zu verbessern sowie Kosteneinsparungen und andere Geschäftsvorteile zu erzielen.
Testen Sie die Gesichtserkennung von MediaPipe mit MediaPipe Studio und dem Codebeispiel für MediaPipe Face Detector for Web selbst.
Wenn Sie die Funktionen Ihrer eigenen Webanwendung mit ML auf dem Gerät erweitern möchten, sehen Sie sich die folgenden Ressourcen an: