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 gehostet.
Mitra Tokopedia, ein Geschäftsbereich von Tokopedia, ist eine Webanwendung, mit der Kleinunternehmer digitale Produkte wie Guthaben- und Spielgutscheine, Datenpakete, Strom-Tokens, nationale Gesundheitsrechnungen und mehr 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 wichtig, eine reibungslose Nutzererfahrung zu bieten.
Ein wichtiger Schritt im Onboarding-Prozess ist die Bestätigung der Identität dieser Verkäufer. Der Verkäufer muss seinen Personalausweis sowie ein Selfie mit dem Ausweis hochladen, um die Verkäuferbestätigung abzuschließen. Dies wird als „Know Your Customer“-Prozess (KYC) bezeichnet.
Durch die Integration von Machine Learning-Funktionen in diesen wichtigen KYC-Prozess in der Web-App konnte Mitra Tokopedia die Nutzerfreundlichkeit verbessern und die Anzahl der fehlgeschlagenen Überprüfungen um mehr als 20 % reduzieren. Außerdem konnten die Betriebskosten gesenkt werden, da die Anzahl der manuellen Genehmigungen um fast 70 % reduziert wurde.
Herausforderung
Die meisten KYC-Daten wurden abgelehnt, was zu Tausenden von Tickets pro Woche für das Betriebsteam zur manuellen Überprüfung führte. Dies führte nicht nur zu hohen Betriebskosten, sondern auch zu einer schlechten Nutzererfahrung für Verkäufer, deren Überprüfung sich verzögerte. Der Hauptgrund für die Ablehnung war, dass Verkäufer Selfies mit Personalausweisen nicht korrekt hochgeladen haben. Mitra Tokopedia wollte dieses Problem mit modernen Webfunktionen skalierbar 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 verwendeten MediaPipe und die Gesichtserkennungsbibliothek von TensorFlow, um das Gesicht des Verkäufers mit sechs Schlüsselpunkten zu erkennen, wenn der Verkäufer den Personalausweis und Selfie-Bilder 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 Überprüfung 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. Auf einem weniger leistungsstarken Gerät würde die Inferenz auf dem Server ausgeführt werden.
Durch den Einsatz eines ML-Modells in einer frühen Phase des KYC-Prozesses können sie:
- Die Ablehnungsrate im KYC-Prozess verbessern.
- 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?
ML kann sich wiederholende Aufgaben automatisieren, die sonst zeitaufwendig oder unpraktisch 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 Arbeitslast des Betriebsteams, das wöchentlich Tausende von Genehmigungen manuell verarbeiten musste, erheblich reduzieren konnte. Mit einer ML-Lösung können die Bildprüfungen fast sofort durchgeführt werden, was die Nutzerfreundlichkeit verbessert und die betriebliche Effizienz steigert. 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 Aspekt sind die Kosten für die Inferenz. Die Möglichkeit, Inferenzen auf der 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 haben die Skalierbarkeit des Modells und der Technologie berücksichtigt. Kann es mit dem Wachstum der Daten und der Modellkomplexität im Laufe des Projekts umgehen? Kann es erweitert werden, um andere Projekte oder Anwendungsfälle zu unterstützen? Die Verarbeitung auf dem Gerät ist hilfreich, da das Modell auf einem CDN gehostet und an die Clientseite geliefert werden kann, was sehr skalierbar ist.
Leistung
Sie berücksichtigten die Größe der Bibliothek (in KB) und die Latenz des Laufzeitprozesses. Die meisten Nutzer von Mitra Tokopedia haben Mittelklasse- bis Einsteigergerä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 erzeugen kann) oberste Priorität, um den spezifischen Anforderungen gerecht zu werden und eine gute Nutzererfahrung zu bieten.
Weitere Hinweise
Einhaltung regulatorischer Anforderungen: Sie mussten sicherstellen, dass die ausgewählte Bibliothek den relevanten Datenschutzbestimmungen entspricht.
Fähigkeiten: Sie haben die Fachkenntnisse und Fähigkeiten ihres Teams bewertet. Einige ML-Frameworks und -Bibliotheken erfordern möglicherweise bestimmte Programmiersprachen oder Fachkenntnisse in einem bestimmten Bereich. Durch die Berücksichtigung dieser Faktoren konnten sie eine fundierte Entscheidung treffen und das richtige Modell für ihr Machine-Learning-Projekt auswählen.
Technologie ausgewählt
TensorFlow.js erfüllte ihre Anforderungen, nachdem sie diese Faktoren berücksichtigt hatten. Es kann vollständig auf dem Gerät ausgeführt werden und verwendet das WebGL-Backend, um die GPU des Geräts zu nutzen. Wenn ein Modell auf dem Gerät ausgeführt wird, erhält der Nutzer aufgrund der geringeren Serverlatenz schneller Feedback und die Server-Computing-Kosten werden reduziert. 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 von Backend-Operatoren für WebGL, WebAssembly und WebGPU, die im Browser mit hoher Leistung verwendet werden kann.“—How Adobe used Web ML with TensorFlow.js to enhance Photoshop for web
Technische Implementierung
Mitra Tokopedia verwendete MediaPipe und die Gesichtserkennungsbibliothek von TensorFlow, ein Paket, das Modelle für die Echtzeit-Gesichtserkennung bereitstellt.
Konkret wurde für diese Lösung das Modell MediaPipeFaceDetector-TFJS verwendet, das in dieser Bibliothek bereitgestellt wird und die tfjs-Laufzeit implementiert.
Bevor wir uns mit der Implementierung befassen, möchten wir kurz zusammenfassen, was MediaPipe ist. Mit MediaPipe können Sie On-Device-ML-Lösungen für Mobilgeräte (Android, iOS), das Web, Computer, Edge-Geräte und das IoT erstellen und bereitstellen.
Zum Zeitpunkt der Veröffentlichung dieses Beitrags bietet MediaPipe 14 verschiedene Lösungen an. Sie können entweder eine mediapipe- oder eine tfjs-Laufzeit verwenden. Die tfjs-Laufzeit wird mit JavaScript erstellt und stellt ein JavaScript-Paket bereit, das von der Webanwendung extern heruntergeladen werden kann. Dies unterscheidet sich von einer mediapipe-Laufzeit, die mit C++ erstellt und in ein WebAssembly-Modul kompiliert wird. Die Hauptunterschiede sind Leistung, Debugging 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äre Ressource (was dadurch abgemildert wird, dass es keine Abhängigkeit zur Ladezeit ist) und erfordert einen anderen Wasm-Debugging-Workflow. Sie wird jedoch schneller ausgeführt, um technische und Leistungsanforderungen zu erfüllen.
Kommen wir 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 Schlüsselpunkt 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 Bild-Pixelbereich dar, wobei xMin, xMax die x-Grenzen, yMin, yMax die y-Grenzen und width, height die Abmessungen des Begrenzungsrahmens sind.
Für keypoints stellen x und y die tatsächliche Position des Schlüsselpunkts im Bild-Pixelbereich dar.
Der name stellt ein Label für den Schlüsselpunkt bereit, die 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' bzw. 'leftEarTragion' sind.
Wie am Anfang dieses Beitrags erwähnt, muss der Verkäufer seinen Personalausweis und ein Selfie mit dem Ausweis hochladen, um die Verkäuferbestätigung abzuschließen.
Die Ausgabe des Modells wird dann mit den Akzeptanzkriterien abgeglichen. Das heißt, die sechs zuvor genannten Schlüsselpunkte müssen übereinstimmen, damit das Bild als gültiger Ausweis und Selfie eingestuft wird.
Nach erfolgreicher Überprüfung werden die relevanten 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.
Leistungsaspekte für Low-End-Geräte
Dieses Paket ist nur 24,8 KB groß (minimiert und mit gzip komprimiert), was die Downloadzeit nicht wesentlich beeinflusst. Bei Low-End-Geräten dauert die Verarbeitung zur Laufzeit jedoch sehr lange. Es wurde zusätzliche Logik hinzugefügt, um den RAM und die CPU des Geräts zu prüfen, bevor die beiden Bilder an das Machine-Learning-Modell zur Gesichtserkennung übergeben werden.
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 Gesichtsbestätigung 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 sie mithilfe eines hybriden Ansatzes für diese älteren Geräte zu prüfen. Mit der Zeit werden immer mehr Geräte in der Lage sein, Rechenleistung vom Server auszulagern, da sich die Hardware weiterentwickelt.
Auswirkungen
Dank der ML-Integration konnte Tokopedia die hohe Ablehnungsrate erfolgreich senken und die folgenden Ergebnisse erzielen:
- Die Ablehnungsrate ist um mehr als 20 % gesunken.
- Die Anzahl der manuellen Genehmigungen ist um fast 70 % gesunken.
Dies sorgte nicht nur für eine reibungslosere Nutzererfahrung für Verkäufer, sondern reduzierte 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 den MediaPipe-Gesichtsdetektor 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: