Come Tokopedia ha ridotto i costi operativi migliorando l'app web per venditori tramite il machine learning

Dendi Sunardi
Dendi Sunardi
Geoffrey Prasetyo
Geoffrey Prasetyo
Swetha Gopalakrishnan
Swetha Gopalakrishnan

Tokopedia è una società di tecnologia indonesiana con uno dei più grandi marketplace di e-commerce, che ospita oltre 40 prodotti digitali e più di 14 milioni di venditori registrati sulla propria piattaforma.

Mitra Tokopedia, parte dei verticali aziendali di Tokopedia, è un'applicazione web che aiuta i proprietari di piccole imprese a vendere prodotti digitali come carte di credito e coupon per giochi, pacchetti di dati, token per l'elettricità, fatture per la sanità nazionale e altri. Il sito web è uno dei canali principali per i venditori Mitra Tokopedia in più di 700 città, pertanto è fondamentale garantire un'esperienza utente fluida.

Un passaggio chiave della procedura di onboarding richiede a questi venditori di verificare la propria identità. Per completare la verifica del venditore, il venditore deve caricare il proprio documento di identità nazionale e un selfie con il documento. Questa procedura è nota come la procedura KYC (Knowledge-Your-Customer).

Aggiungendo funzionalità di machine learning a questa procedura di verifica dell'identità fondamentale all'interno della propria app web, Mitra Tokopedia è riuscita a ottenere un'esperienza utente migliore con una riduzione di oltre il 20% degli errori di verifica. Inoltre, ha ridotto i costi operativi riducendo le approvazioni manuali di quasi il 70%.

Sfida

La maggior parte dei dati relativi alla verifica dell'identità veniva rifiutata, generando migliaia di richieste settimanali per il team operativo per la verifica manuale. Ciò non solo ha comportato costi operativi elevati, ma ha anche generato un'esperienza utente negativa per i venditori, la cui procedura di verifica viene ritardata. Il motivo principale del rifiuto è che i venditori non hanno caricato correttamente i selfie con i documenti di identità. Mitra Tokopedia era molto interessata a risolvere questo problema in modo scalabile utilizzando le funzionalità web moderne.

Soluzione

Il team di Tokopedia ha deciso di utilizzare l'IA con TensorFlow.js per risolvere questo problema nel primo passaggio della procedura di verifica dell'identità, quando l'utente carica le immagini. Hanno utilizzato MediaPipe e la libreria di rilevamento dei volti di TensorFlow per rilevare il volto del venditore con sei punti chiave quando il venditore carica la carta di identità e le immagini del selfie. L'output del modello viene poi utilizzato per verificare la conformità ai criteri di accettazione. Se la verifica ha esito positivo, le informazioni vengono inviate al backend. Se la verifica non va a buon fine, il venditore riceve un messaggio di errore e la possibilità di riprovare. È stato utilizzato un approccio ibrido in cui il modello esegue l'inferenza sul dispositivo o lato server, a seconda delle specifiche dello smartphone. Un dispositivo di fascia inferiore eseguirà l'inferenza sul server.

L'utilizzo di un modello di ML nelle prime fasi della procedura di verifica dell'identità consente di:

  • Migliora il tasso di rifiuto nella procedura di verifica dell'identità.
  • Avvisare gli utenti di un possibile rifiuto delle loro immagini, in base alla qualità valutata dal modello.

Perché scegliere l'IA rispetto ad altre soluzioni?

L'IA può automatizzare le attività ripetitive che altrimenti richiederebbero molto tempo o non sarebbero pratiche da svolgere manualmente. Nel caso di Tokopedia, l'ottimizzazione dell'attuale soluzione non basata sul machine learning non ha prodotto risultati significativi, mentre una soluzione di ML poteva ridurre notevolmente il carico sul team operativo che doveva elaborare manualmente migliaia di approvazioni settimanali. Con una soluzione ML, i controlli delle immagini possono essere eseguiti quasi all'istante, fornendo una migliore esperienza utente e migliorando l'efficienza operativa. Scopri di più sulla definizione del problema per determinare se l'AI è una soluzione adatta al tuo problema.

Considerazioni per la scelta di un modello

I seguenti fattori sono stati presi in considerazione per la scelta del modello ML.

Costo

Hanno valutato il costo complessivo di utilizzo del modello. Poiché TensorFlow.js è un pacchetto open source ben gestito da Google, risparmiamo sui costi di licenza e manutenzione. Un'altra considerazione riguarda il costo dell'inferenza. Essere in grado di eseguire l'inferenza lato client consente di risparmiare molto rispetto all'elaborazione lato server con GPU costose, soprattutto se i dati risultano non validi e inutilizzabili.

Scalabilità

Hanno considerato la scalabilità del modello e della tecnologia. È in grado di gestire la crescita della complessità dei dati e dei modelli man mano che il progetto si evolve? Può essere esteso per soddisfare altri progetti o casi d'uso? L'elaborazione sul dispositivo è utile perché il modello può essere ospitato su una CDN e pubblicato sul lato client, il che è molto scalabile.

Prestazioni

Ha considerato le dimensioni della libreria (in kB) e la latenza del processo di runtime. La maggior parte della base utenti di Mitra Tokopedia utilizza dispositivi di fascia media e bassa con velocità e connettività internet moderate. Pertanto, le prestazioni in termini di download e tempo di esecuzione (ovvero la velocità con cui il modello può produrre un output) sono una priorità assoluta per soddisfare le loro esigenze specifiche e garantire un'esperienza utente ottimale.

Altre considerazioni

Conformità alle normative: dovevano assicurarsi che la libreria scelta fosse conforme alle normative pertinenti sulla protezione dei dati e sulla privacy.

Competenze: hanno valutato le competenze e le competenze del proprio team. Alcuni framework e librerie di ML possono richiedere competenze o linguaggi di programmazione specifici in un determinato ambito. Prendendo in considerazione questi fattori, ha preso una decisione consapevole quando ha scelto il modello giusto per il suo progetto di machine learning.

Tecnologia scelta

TensorFlow.js ha soddisfatto le sue esigenze, dopo aver preso in considerazione questi fattori. È in grado di funzionare completamente sul dispositivo utilizzando il proprio backend WebGL per usare la GPU del dispositivo. L'esecuzione di un modello sul dispositivo consente di fornire un feedback più rapido all'utente grazie alla latenza ridotta del server e riduce il costo di calcolo del server. Scopri di più sul machine learning on-device nell'articolo Vantaggi e limiti del machine learning on-device.

"TensorFlow.js è una libreria di machine learning open source di Google rivolta agli sviluppatori JavaScript ed è in grado di eseguire il codice lato client nel browser. È l'opzione più matura per l'IA web con un supporto completo degli operatori di backend WebGL, WebAssembly e WebGPU che può essere utilizzato all'interno del browser con prestazioni rapide." - In che modo Adobe ha utilizzato Web ML con TensorFlow.js per migliorare Photoshop per il web

Implementazione tecnica

Mitra Tokopedia ha utilizzato MediaPipe e la libreria di rilevamento dei volti di TensorFlow, un pacchetto che fornisce modelli per l'esecuzione del rilevamento dei volti in tempo reale. In particolare, per questa soluzione è stato utilizzato il modello MediaPipeFaceDetector-TFJS fornito in questa libreria, che implementa il runtime tfjs.

Prima di passare all'implementazione, ecco un breve riepilogo di MediaPipe. MediaPipe ti consente di creare e implementare soluzioni di ML on-device su dispositivi mobili (Android, iOS), web, desktop, edge e IoT.

Al momento della stesura di questo post, MediaPipe offre 14 diverse soluzioni. Puoi utilizzare un runtime mediapipe o tfjs. Il runtime tfjs è realizzato in JavaScript e fornisce un pacchetto JavaScript che può essere scaricato dall'applicazione web. È diverso da un runtime mediapipe, che viene creato con C++ e compilato in un modulo WebAssembly. Le differenze principali sono prestazioni, debugbilità e raggruppamento. Il pacchetto JavaScript può essere abbinato a bundle classici come webpack. Al contrario, il modulo Wasm è una risorsa binaria più grande e separata (che è mitigata dal non essere una dipendenza dal tempo di caricamento) e richiede un flusso di lavoro di debug Wasm diverso. Tuttavia, è più veloce per soddisfare i requisiti tecnici e di prestazioni.

Diagramma del funzionamento dei modelli MediaPipe e TensorFlow per i diversi runtime, utilizzando FaceDetection come esempio.
Un'illustrazione generale sul funzionamento dei modelli MediaPipe e TensorFlow per i diversi runtime, usando FaceDetection come esempio

Tornando all'implementazione di Tokopedia, il primo passaggio consiste nell'inizializzare il modello come segue. Quando l'utente carica una foto, viene passato un HTMLImageElement come input al rilevatore.

// 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);

Il risultato dell'elenco dei volti contiene i volti rilevati per ogni volto nell'immagine. Se il modello non riesce a rilevare nessun volto, l'elenco sarà vuoto. Per ogni volto, contiene un riquadro di delimitazione del volto rilevato, nonché un array di sei punti chiave per il volto rilevato. Sono inclusi elementi come occhi, naso e bocca. Ogni punto chiave contiene x e y, oltre a un nome.

[
  {
    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 rappresenta il riquadro di delimitazione del volto nello spazio dei pixel dell'immagine, con xMin, xMax che indicano i limiti x, yMin, yMax che indicano i limiti y e width, height che sono le dimensioni del riquadro di delimitazione. Per keypoints, x e y, la posizione effettiva del punto di riferimento nello spazio in pixel dell'immagine. name fornisce un'etichetta per il punto chiave, ovvero 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' e 'leftEarTragion'. Come menzionato all'inizio di questo post, per completare la verifica del venditore il venditore deve caricare il proprio documento di identità e un selfie con il documento di identità. L'output del modello viene poi utilizzato per verificare la conformità ai criteri di accettazione, ovvero la corrispondenza dei sei punti chiave menzionati in precedenza per essere considerata una carta di identità e un'immagine selfie valide.

Al termine della verifica, le informazioni pertinenti sul venditore vengono trasmesse al backend. Se la verifica non va a buon fine, al venditore viene mostrato un messaggio di errore e viene offerta la possibilità di riprovare. Non verrà inviata alcuna informazione al backend.

Diagramma della pagina KYC Mitra, del modello TensorFlow.js e del server che interagiscono tra loro.
In che modo la pagina Mitra KYC, il modello TensorFlow.js e il server interagiscono tra loro

Considerazioni sulle prestazioni per i dispositivi di fascia bassa

Questo pacchetto ha solo 24,8 KB (minimizzato e compresso con gzip), il che non influisce in modo significativo sul tempo di download. Tuttavia, per i dispositivi di fascia molto bassa, l'elaborazione in fase di esecuzione richiede molto tempo. È stata aggiunta una logica aggiuntiva per verificare la RAM e la CPU del dispositivo prima di passare le due immagini al modello di rilevamento dei volti di machine learning.

Se il dispositivo ha più di 4 GB di RAM, una connessione di rete superiore al 4G e una CPU con più di 6 core, le immagini vengono passate al modello on-device per la verifica del volto. Se questi requisiti non vengono soddisfatti, il modello on-device viene ignorato e le immagini vengono inviate direttamente al server per la verifica utilizzando un approccio ibrido per soddisfare questi dispositivi. Con il tempo, un numero maggiore di dispositivi potrà scaricare il calcolo dal server man mano che l'hardware continuerà a evolversi.

Impatto

Grazie all'integrazione ML, Tokopedia è riuscita a risolvere l'elevato tasso di rifiuto e ha ottenuto i seguenti risultati:

  • Il tasso di rifiuto è diminuito di oltre il 20%.
  • Il numero di approvazioni manuali è diminuito di quasi il 70%.

Questo non solo ha creato un'esperienza utente più fluida per i venditori, ma ha anche ridotto i costi operativi per il team di Tokopedia.

Conclusione

Nel complesso, i risultati di questo case study hanno dimostrato che, per i casi d'uso giusti, le soluzioni di ML on-device sul web possono essere preziose per migliorare l'esperienza utente e l'efficacia delle funzionalità, nonché per creare risparmi sui costi e altri vantaggi aziendali.

Prova la funzionalità di rilevamento dei volti di MediaPipe utilizzando MediaPipe Studio e il codice di esempio per MediaPipe Face Detector per il web.

Se ti interessa estendere le funzionalità della tua app web con l'ML on-device, consulta le seguenti risorse: