Tokopedia ist ein indonesisches Technologieunternehmen mit einem der größten E-Commerce-Marktplätze. Auf seiner Plattform werden über 40 digitale Produkte und mehr als 14 Millionen registrierte Verkäufer angeboten.
Mitra Tokopedia ist eine Web-Anwendung, die Kleinunternehmen dabei hilft, digitale Produkte wie Gutscheine für Guthaben und Spiele, Datenpakete, Stromtokens, Rechnungen für die nationale Gesundheitsversorgung und mehr zu verkaufen. Sie gehört zu den Geschäftsbereichen von Tokopedia. 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 gewährleisten.
Im Rahmen des Onboarding-Prozesses müssen diese Verkäufer ihre Identität bestätigen. Der Verkäufer muss seinen Personalausweis sowie ein Selfie mit dem Ausweis hochladen, um die Verkäuferbestätigung abzuschließen. Dies wird als KYC-Verfahren (Know Your Customer) bezeichnet.
Durch die Einbindung von Machine-Learning-Funktionen in diesen wichtigen KYC-Prozess in ihrer Webanwendung konnte Mitra Tokopedia die Nutzerfreundlichkeit verbessern und die Anzahl der Überprüfungsfehler um mehr als 20% reduzieren. Außerdem konnte das Unternehmen Betriebskosten sparen, da manuelle Genehmigungen um fast 70 % reduziert wurden.
Herausforderung
Die meisten KYC-Daten wurden abgelehnt, was wöchentlich Tausende von Tickets für die manuelle Überprüfung durch das Operationsteam zur Folge hatte. 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 Ausweisen nicht richtig hochgeladen haben. Mitra Tokopedia wollte dieses Problem mithilfe moderner Webfunktionen skalierbar lösen.
Lösung
Das Team von Tokopedia entschied sich, maschinelles Lernen mit TensorFlow.js zu verwenden, um dieses Problem bereits im ersten Schritt des KYC-Prozesses zu lösen, wenn der Nutzer die Bilder hochlädt. Sie nutzten MediaPipe und die Bibliothek zur Gesichtserkennung von TensorFlow, um das Gesicht des Verkäufers anhand von sechs Schlüsselpunkten zu erkennen, wenn er seinen Ausweis und Selfies hochlädt. Die Ausgabe des Modells wird dann anhand der Akzeptanzkriterien überprüft. Nach erfolgreicher Bestätigung werden die Informationen an das Backend gesendet. Wenn die Bestätigung fehlschlägt, wird dem Verkäufer eine Fehlermeldung und die Möglichkeit zum erneuten Versuch angezeigt. Es wurde ein Hybridansatz verwendet, bei dem das Modell die Inferenz je nach den Spezifikationen des Smartphones entweder auf dem Gerät oder serverseitig ausführt. Auf einem Gerät mit niedrigerer Leistung würde die Inferenz auf dem Server ausgeführt.
Durch die Verwendung eines ML-Modells zu Beginn des KYC-Prozesses können sie:
- Die Ablehnungsrate beim KYC-Prozess verbessern.
- Nutzer werden aufgrund der vom Modell bewerteten Qualität vor einer möglichen Ablehnung ihrer Bilder gewarnt.
Warum sollten Sie KI statt anderer Lösungen verwenden?
Mithilfe von ML lassen sich sich wiederholende Aufgaben automatisieren, die andernfalls zeitaufwendig oder unpraktisch manuell ausgeführt werden müssten. Im Fall von Tokopedia konnte die Optimierung der aktuellen Lösung ohne ML keine nennenswerten Ergebnisse erzielen. Eine ML-Lösung hingegen konnte die Arbeitsbelastung des Operationsteams, das wöchentlich Tausende von Genehmigungen manuell verarbeiten musste, erheblich reduzieren. Mit einer ML-Lösung können die Bildprüfungen nahezu sofort durchgeführt werden, was die Nutzerfreundlichkeit und die Betriebseffizienz verbessert. Weitere Informationen zum Problem-Framing, um festzustellen, ob KI 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 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 Faktor sind die Kosten der Inferenz. Wenn Sie die Inferenz auf der Clientseite ausführen können, sparen Sie 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 haben die Skalierbarkeit des Modells und der Technologie berücksichtigt. Kann es mit der wachsenden Datenmenge und der zunehmenden Komplexität des Modells mithalten, wenn sich das Projekt weiterentwickelt? Kann es erweitert werden, um auch anderen Projekten oder Anwendungsfällen gerecht zu werden? Die Verarbeitung auf dem Gerät ist hilfreich, da das Modell auf einem CDN gehostet und an die Clientseite gesendet werden kann, 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 verwendet Mittel- bis Einsteigergeräte mit durchschnittlicher Internetgeschwindigkeit und -verbindung. Daher hat die Leistung in Bezug auf Download und Laufzeit (d. h. wie schnell das Modell eine Ausgabe liefern kann) oberste Priorität, um den spezifischen Anforderungen gerecht zu werden und eine hervorragende Nutzererfahrung zu ermöglichen.
Weitere Hinweise
Einhaltung der gesetzlichen Bestimmungen: Sie musste dafür sorgen, dass die ausgewählte Bibliothek die relevanten Datenschutzbestimmungen einhält.
Kompetenzen: Sie haben das Fachwissen und die Kompetenzen ihres Teams bewertet. Für einige ML-Frameworks und ‑Bibliotheken sind möglicherweise bestimmte Programmiersprachen oder Kenntnisse in einem bestimmten Bereich erforderlich. Durch die Berücksichtigung dieser Faktoren konnte er eine fundierte Entscheidung bei der Auswahl des richtigen Modells für sein Machine-Learning-Projekt treffen.
Ausgewählte Technologie
TensorFlow.js erfüllte ihre Anforderungen, nachdem sie diese Faktoren berücksichtigt hatten. Es kann vollständig auf dem Gerät ausgeführt werden, wobei das WebGL-Back-End die GPU des Geräts nutzt. Wenn ein Modell auf dem Gerät ausgeführt wird, kann der Nutzer aufgrund der geringeren Serverlatenz schneller Feedback erhalten. Außerdem werden die Server-Rechenkosten 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 auf JavaScript-Entwickler ausgerichtet ist und clientseitig im Browser ausgeführt werden kann. Es ist die ausgereifteste Option für Web-KI mit umfassender Unterstützung von WebGL-, WebAssembly- und WebGPU-Backend-Operatoren, die im Browser mit hoher Leistung verwendet werden kann.“ – So hat Adobe Web ML mit TensorFlow.js verwendet, um Photoshop für das Web zu verbessern
Technische Implementierung
Mitra Tokopedia nutzte MediaPipe und die Bibliothek für die Gesichtserkennung 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 noch eine kurze Zusammenfassung von MediaPipe. Mit MediaPipe können Sie On-Device-ML-Lösungen für Mobilgeräte (Android, iOS), Web, Desktop, Edge-Geräte und IoT entwickeln und bereitstellen.
Zum Zeitpunkt der Erstellung dieses Artikels bietet MediaPipe 14 verschiedene Lösungen an. Sie können entweder eine mediapipe- oder tfjs-Laufzeit verwenden. Die tfjs-Laufzeit ist in JavaScript geschrieben und bietet ein JavaScript-Paket, 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 wichtigsten Unterschiede sind Leistung, Fehlerbehebung 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ärressource, die nicht von der Ladezeit abhängt. Für das Debuggen ist ein anderer Wasm-Debugging-Workflow erforderlich. Die Ausführung ist jedoch schneller, um die technischen und Leistungsanforderungen zu erfüllen.
Zurück zur Implementierung von Tokopedia: Im ersten Schritt wird das Modell wie unten beschrieben initialisiert. Wenn der Nutzer ein Foto hochlädt, wird ein HTMLImageElement als Eingabe an den Detector ü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 erkennt, ist die Liste leer. Für jedes Gesicht enthält sie 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 Referenzpunkt 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 steht für den Begrenzungsrahmen des Gesichts im Pixelbereich des Bildes. xMin und xMax geben die X-Begrenzungen an, yMin und yMax die Y-Begrenzungen und width und height die Abmessungen des Begrenzungsrahmens.
Bei keypoints, x und y handelt es sich um die tatsächliche Position des Referenzpunkts im Pixelbereich des Bilds.
name ist ein Label für den Referenzpunkt. Die möglichen Werte sind 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' und 'leftEarTragion'.
Wie bereits zu Beginn dieses Beitrags erwähnt, muss der Verkäufer seine nationale ID und ein Selfie mit der ID hochladen, um die Verkäuferüberprüfung abzuschließen.
Die Ausgabe des Modells wird dann anhand der Akzeptanzkriterien überprüft. Das bedeutet, dass die sechs zuvor genannten Schlüsselpunkte übereinstimmen müssen, damit der Ausweis und das Selfie als gültig eingestuft werden.
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 hat nur eine Größe von 24,8 KB (minimiert und gezippt), was sich nicht wesentlich auf die Downloadzeit auswirkt. Bei sehr einfachen Geräten dauert die Laufzeitverarbeitung 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 Modell für die Gesichtserkennung mit maschinellem Lernen ü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 Gesichtserkennung an das On-Device-Modell übergeben. Wenn diese Anforderungen nicht erfüllt sind, wird das On-Device-Modell übersprungen und die Bilder werden mit einem Hybridansatz direkt zur Überprüfung an den Server gesendet. Mit der Zeit werden immer mehr Geräte in der Lage sein, Rechenleistung vom Server zu verlagern, da sich die Hardware weiter entwickelt.
Auswirkungen
Durch die ML-Integration konnte Tokopedia das Problem mit der hohen Ablehnungsrate beheben und erzielte folgende Ergebnisse:
- 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 Nutzerfreundlichkeit für Verkäufer, sondern auch zu geringeren 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-Gesichtserkennungs-Webclient ausprobieren.
Wenn Sie die Funktionen Ihrer eigenen Webanwendung mit On-Device-ML erweitern möchten, sehen Sie sich die folgenden Ressourcen an: