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à tecnologica indonesiana, uno dei più grandi marketplace di e-commerce, che ospita oltre 40 prodotti digitali e oltre 14 milioni di venditori registrati sulla sua piattaforma.

Mitra Tokopedia, parte dei verticali aziendali di Tokopedia, è un'applicazione web che aiuta i proprietari di piccole imprese a vendere prodotti digitali come coupon di credito e per giochi, pacchetti di dati, token per l'elettricità, bollette sanitarie nazionali e altro ancora. Il sito web è uno dei canali principali per i venditori di Mitra Tokopedia in più di 700 città ed è quindi fondamentale per garantire un'esperienza utente fluida.

Un passaggio fondamentale del processo di onboarding richiede che questi venditori verifichino la propria identità. Per completare la verifica del venditore, il venditore deve caricare la carta d'identità e un selfie con il documento di identità. È detta procedura Conosci il tuo cliente (KYC).

Grazie all'aggiunta di funzionalità di machine learning a questo processo KYC critico all'interno dell'app web, Mitra Tokopedia è riuscita a offrire un'esperienza utente migliore con una riduzione degli errori di verifica di oltre il 20%. Inoltre, ha permesso di risparmiare sui costi operativi riducendo le approvazioni manuali di quasi il 70%.

Sfida

La maggior parte dei dati KYC veniva rifiutata, creando migliaia di ticket ogni settimana per il team operativo per la verifica manuale. Ciò non solo ha causato costi operativi elevati, ma ha anche causato un'esperienza utente negativa per i venditori, il cui processo di verifica viene ritardato. Il motivo principale del rifiuto è che i venditori non hanno caricato correttamente selfie con carte d'identità. Mitra Tokopedia voleva risolvere questo problema in modo scalabile usando le moderne funzionalità web.

Soluzione

Il team di Tokopedia ha deciso di utilizzare il machine learning con TensorFlow.js per risolvere questo problema nella prima fase del processo KYC, quando l'utente carica le immagini. Ha 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 d'identità e le immagini selfie. L'output del modello viene quindi 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, al venditore viene visualizzato un messaggio di errore e la possibilità di riprovare. È stato utilizzato un approccio ibrido in cui il modello esegue l'inferenza sul lato dispositivo o server, a seconda delle specifiche del telefono. Un dispositivo di fascia inferiore eseguirà l'inferenza sul server.

L'utilizzo di un modello ML nelle prime fasi del processo KYC consente di:

  • Migliorare il tasso di rifiuto durante la procedura KYC.
  • Avvisare gli utenti di un eventuale rifiuto delle loro immagini, in base alla qualità valutata dal modello.

Perché scegliere il ML invece di altre soluzioni?

Il machine learning può automatizzare attività ripetitive, dispendiose in termini di tempo o difficili da eseguire manualmente. Nel caso di Tokopedia, l'ottimizzazione dell'attuale soluzione non ML non ha potuto produrre risultati significativi, mentre una soluzione ML potrebbe ridurre notevolmente il carico sul team operativo che doveva elaborare manualmente migliaia di approvazioni ogni settimana. Con una soluzione ML, i controlli delle immagini possono essere eseguiti quasi istantaneamente, offrendo una migliore esperienza utente e migliorando l'efficienza operativa. Scopri di più sull'inquadratura dei problemi per determinare se il machine learning è una soluzione adatta al tuo problema.

Considerazioni sulla scelta di un modello

Nella scelta del modello ML sono stati presi in considerazione i seguenti fattori.

Costo

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

Scalabilità

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

Rendimento

Hanno preso in considerazione le dimensioni della libreria (in kB) e la latenza del processo di runtime. La maggior parte della base utenti di Mitra Tokopedia dispone di dispositivi di fascia media e bassa con velocità e connettività internet moderate. Pertanto, le prestazioni in termini di download e runtime (ovvero la velocità con cui il modello può produrre un output) è una priorità fondamentale per soddisfare esigenze specifiche e garantire un'ottima esperienza utente.

Altre considerazioni

Conformità normativa: l'azienda doveva garantire che la libreria scelta rispettasse le normative pertinenti in materia di protezione dei dati e privacy.

Competenze: hanno valutato le competenze e le competenze del team. Alcuni framework e librerie ML possono richiedere linguaggi di programmazione o competenze specifiche in un'area specifica. Prendendo in considerazione questi fattori, ha preso decisioni consapevoli nella scelta del modello giusto per il suo progetto di machine learning.

Tecnologia scelta

TensorFlow.js ha soddisfatto le loro esigenze, dopo aver considerato questi fattori. Può essere eseguito completamente sul dispositivo usando il backend WebGL per utilizzare la GPU del dispositivo. L'esecuzione di un modello sul dispositivo consente un feedback più rapido all'utente grazie alla minore latenza del server e riduce i costi di elaborazione del server. Scopri di più sul machine learning on-device nell'articolo Vantaggi e limitazioni del machine learning on-device.

"TensorFlow.js è una libreria di machine learning open source di Google rivolta agli sviluppatori JavaScript in grado di eseguire il lato client nel browser. È l'opzione più avanzata per l'IA per il Web con supporto completo per gli operatori di backend WebGL, WebAssembly e WebGPU, che può essere utilizzato all'interno del browser con prestazioni rapide." - Come 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 approfondire l'implementazione, fai un breve riepilogo di MediaPipe. MediaPipe consente di creare ed eseguire il deployment di soluzioni ML on-device per dispositivi mobili (Android, iOS), web, desktop, dispositivi periferici e IoT.

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

Diagramma di come i modelli MediaPipe e TensorFlow funzionano per i diversi runtime, utilizzando FaceDetection come esempio.
Un'illustrazione generale su come i modelli MediaPipe e TensorFlow funzionano per i diversi runtime, utilizzando FaceDetection come esempio

Tornando all'implementazione di Tokopedia, il primo passaggio consiste nell'inizializzare il modello come segue. Quando l'utente carica una foto, HTMLImageElement viene trasmesso 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 ciascun volto nell'immagine. Se il modello non riesce a rilevare alcun volto, l'elenco sarà vuoto. Per ciascun volto, contiene un riquadro di selezione del volto rilevato, nonché un array di sei punti chiave per il volto rilevato. Ciò include funzionalità come occhi, naso e bocca. Ciascun punto chiave contiene x e y, nonché 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 di pixel dell'immagine, dove xMin, xMax indicano i limiti x, yMin, yMax indicano i limiti y e width height sono le dimensioni del riquadro di delimitazione. Per keypoints, x e y rappresentano la posizione effettiva del punto chiave nello spazio in pixel dell'immagine. name fornisce un'etichetta per il punto chiave, che sono rispettivamente 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' e 'leftEarTragion'. Come indicato all'inizio di questo post, per completare la verifica del venditore, il venditore deve caricare la propria carta di identità nazionale e un selfie con il documento di identità. L'output del modello viene quindi utilizzato per verificare in base ai criteri di accettazione, ovvero far corrispondere i sei punti chiave menzionati in precedenza come carta d'identità e immagine selfie validi.

Se la verifica ha esito positivo, le informazioni pertinenti sul venditore vengono trasmesse al backend. Se la verifica non va a buon fine, il venditore riceve un messaggio di errore e la possibilità di riprovare. Nessuna informazione verrà inviata al backend.

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

Considerazioni sulle prestazioni per i dispositivi di fascia bassa

Le dimensioni di questo pacchetto sono di soli 24,8 kB (minimo e gzip), il che non influisce in modo significativo sul tempo di download. Tuttavia, per i dispositivi di fascia molto bassa, l'elaborazione del runtime richiede molto tempo. È stata aggiunta una logica aggiuntiva per controllare la RAM e la CPU del dispositivo prima di passare le due immagini al modello di rilevamento dei volti per il machine learning.

Se il dispositivo ha più di 4 GB di RAM, una connessione di rete superiore a 4G e una CPU con più di sei core, le immagini vengono passate al modello sul dispositivo per la verifica del volto. Se questi requisiti non sono soddisfatti, il modello on-device viene ignorato e le immagini vengono inviate direttamente al server per la verifica con un approccio ibrido per soddisfare questi dispositivi meno recenti. Con il passare del tempo, sempre più dispositivi saranno in grado di trasferire le risorse di calcolo dal server man mano che l'hardware continua ad 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%.

Ciò 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 mostrato che, per i casi d'uso giusti, le soluzioni ML on-device sul web possono essere preziose per migliorare l'esperienza utente e l'efficacia delle funzionalità, oltre a generare risparmi sui costi e altri vantaggi aziendali.

Prova autonomamente la funzionalità di rilevamento facciale di MediaPipe utilizzando MediaPipe Studio e l'esempio di codice per MediaPipe Face Detector per il web.

Se vuoi estendere le funzionalità della tua applicazione web con il machine learning on-device, consulta le seguenti risorse: