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 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.

In einem wichtigen Schritt im Onboarding-Prozess 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 führte auch zu einer negativen Nutzererfahrung für Verkäufer, deren Überprüfungsprozess sich verzögert. 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 hybrider Ansatz verwendet, bei dem das Modell die Inferenz abhängig von den Spezifikationen des Smartphones entweder auf dem Gerät oder auf der Serverseite ausführt. Auf einem Gerät mit niedrigerer Leistung würde die Inferenz auf dem Server ausgeführt.

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

  • Die Ablehnungsrate beim KYC-Prozess verbessern.
  • Nutzer werden auf der Grundlage 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 Bilder nahezu sofort überprüft werden, was für eine bessere Nutzererfahrung und eine höhere operative Effizienz sorgt. 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

Er hat 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

Er berücksichtigte die Skalierbarkeit des Modells und der Technologie. Kann es mit der wachsenden Datenmenge und der zunehmenden Komplexität des Modells mithalten, wenn sich das 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 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 nutzt 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 Nutzerfreundlichkeit zu gewährleisten.

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 das Unternehmen eine fundierte Entscheidung bei der Auswahl des richtigen Modells für sein ML-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. Das Ausführen eines Modells auf dem Gerät ermöglicht ein schnelleres Feedback an den Nutzer, da die Serverlatenz und die Computing-Kosten des Servers reduziert werden. 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 WebGL, WebAssembly und WebGPU für 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 verwendete

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 Beitrags 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. Im Gegensatz dazu ist das Wasm-Modul eine größere und separate binäre Ressource (was abgemildert wird, da keine Abhängigkeit von der Ladezeit besteht) und erfordert einen anderen Wasm-Debugging-Workflow. Die Ausführung ist jedoch schneller, um die technischen und Leistungsanforderungen zu erfüllen.

Diagramm zur Funktionsweise von MediaPipe- und TensorFlow-Modellen für die verschiedenen Laufzeiten am Beispiel FaceDetection.
Allgemeine Abbildung zur Funktionsweise von MediaPipe- und TensorFlow-Modellen für die verschiedenen Laufzeiten, beispielhaft anhand von FaceDetection

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 Gesichterliste enthält die erkannten Gesichter für jedes Gesicht im Bild. Wenn das Modell keine Gesichter erkennen kann, 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. Für keypoints stellen x und y die tatsächliche Schlüsselpunktposition im Pixelbereich des Bilds dar. 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.

Diagramm der Mitra KYC-Seite, des TensorFlow.js-Modells und des Servers, die miteinander interagieren.
Interaktion zwischen der Mitra KYC-Seite, dem TensorFlow.js-Modell und dem Server

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 leistungsschwachen 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 Gesichtsverifizierung 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 zur Überprüfung direkt an den Server gesendet. Im Laufe der Zeit werden mehr Geräte in der Lage sein, Rechenleistung vom Server zu entlasten, da sich die Hardware weiterentwickelt.

Auswirkungen

Durch die ML-Integration konnte Tokopedia das Problem 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.

Dadurch wurde nicht nur die Nutzererfahrung für Verkäufer verbessert, sondern auch die Betriebskosten für das Tokopedia-Team gesenkt.

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: