Cara Tokopedia mengurangi biaya operasional dengan meningkatkan kualitas aplikasi web penjual mereka menggunakan Machine Learning

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

Tokopedia adalah perusahaan teknologi Indonesia dengan salah satu marketplace e-commerce terbesar, yang menghosting lebih dari 40 produk digital dan lebih dari 14 juta penjual terdaftar di platformnya.

Partner Tokopedia, yang merupakan bagian dari kategori bisnis Tokopedia, adalah aplikasi web yang membantu pemilik bisnis kecil menjual produk digital seperti voucher game dan kredit, paket data, token listrik, tagihan layanan kesehatan nasional, dan lainnya. Situs ini adalah salah satu saluran utama bagi penjual Mitra Tokopedia di lebih dari 700 kota, sehingga penting untuk memastikan pengalaman pengguna yang lancar.

Salah satu langkah penting dalam proses orientasi mengharuskan penjual ini memverifikasi identitas mereka. Penjual harus mengupload Kartu Identitas Nasional serta selfie dengan tanda pengenal tersebut untuk menyelesaikan verifikasi penjual. Hal ini disebut sebagai proses Kenali Pelanggan Anda (KYC).

Dengan menambahkan kemampuan Machine Learning ke proses KYC penting ini dalam aplikasi web mereka, Mitra Tokopedia dapat memperoleh pengalaman pengguna yang lebih baik dengan penurunan kegagalan verifikasi lebih dari 20%. Mereka juga menghemat biaya operasional dengan mengurangi persetujuan manual hampir 70%.

Tantangan

Sebagian besar data KYC ditolak, sehingga menghasilkan ribuan tiket per minggu untuk tim operasi untuk verifikasi manual. Hal ini tidak hanya menimbulkan biaya operasional yang tinggi, tetapi juga mengakibatkan pengalaman pengguna yang buruk bagi penjual, yang proses verifikasinya tertunda. Alasan terbesar penolakan adalah bahwa penjual tidak mengupload selfie dengan kartu tanda pengenal dengan benar. Mitra Tokopedia ingin menyelesaikan masalah ini secara skalabel menggunakan kemampuan web modern.

Solusi

Tim di Tokopedia memutuskan untuk menggunakan ML dengan TensorFlow.js untuk mengatasi masalah ini pada langkah pertama proses KYC—saat pengguna mengupload gambar. Mereka menggunakan library Deteksi Wajah MediaPipe dan TensorFlow untuk mendeteksi wajah penjual dengan enam poin utama saat penjual mengupload kartu ID dan gambar selfie. Output model kemudian digunakan untuk memeriksa kriteria penerimaannya. Setelah verifikasi berhasil, informasi akan dikirim ke backend. Jika verifikasi gagal, penjual akan diberi pesan error dan opsi untuk mencoba lagi. Pendekatan hybrid digunakan saat model melakukan inferensi, baik di perangkat maupun di sisi server, bergantung pada spesifikasi ponsel. Perangkat kelas bawah akan melakukan inferensi di server.

Menggunakan model ML di awal proses KYC memungkinkan mereka untuk:

  • Meningkatkan tingkat penolakan dalam proses KYC.
  • Peringatkan pengguna tentang kemungkinan penolakan gambar mereka, berdasarkan kualitas yang dinilai oleh model.

Mengapa memilih ML dibandingkan solusi lain?

ML dapat mengotomatiskan tugas berulang yang akan memakan waktu atau tidak praktis untuk dilakukan secara manual. Dalam kasus Tokopedia, pengoptimalan solusi non-ML saat ini tidak dapat memberikan hasil yang signifikan, sedangkan solusi ML dapat mengurangi secara signifikan beban pada tim operasi yang harus memproses ribuan persetujuan secara manual setiap minggu. Dengan solusi ML, pemeriksaan image dapat dilakukan hampir secara instan, sehingga memberikan pengalaman pengguna yang lebih baik dan meningkatkan efisiensi operasional. Baca selengkapnya tentang framing masalah untuk menentukan apakah ML adalah solusi yang cocok untuk masalah Anda atau tidak.

Pertimbangan saat memilih model

Faktor-faktor berikut dipertimbangkan saat memilih model ML.

Biaya

Mereka mengevaluasi biaya keseluruhan penggunaan model. Karena TensorFlow.js adalah paket open source yang dikelola dengan baik oleh Google, kami menghemat biaya lisensi dan pemeliharaan. Pertimbangan tambahan adalah biaya inferensi. Dapat menjalankan inferensi di sisi klien menghemat banyak uang dibandingkan dengan memprosesnya di sisi server dengan GPU mahal, terutama jika data tersebut ternyata tidak valid dan tidak dapat digunakan.

Skalabilitas

Mereka mempertimbangkan skalabilitas model dan teknologi. Apakah project ini mampu menangani pertumbuhan data dan kompleksitas model seiring perkembangan project kita? Apakah AI generatif dapat diperluas untuk mengakomodasi proyek atau kasus penggunaan lainnya? Pemrosesan di perangkat dapat membantu karena model dapat dihosting di CDN dan dikirim ke sisi klien, yang sangat skalabel.

Performa

Mereka mempertimbangkan ukuran library (dalam KB) dan latensi proses runtime. Sebagian besar basis pengguna Mitra Tokopedia memiliki perangkat kelas menengah hingga rendah dengan kecepatan dan konektivitas internet yang sedang. Oleh karena itu, performa dalam hal download dan runtime (yaitu seberapa cepat model dapat menghasilkan output) merupakan prioritas utama untuk memenuhi kebutuhan spesifik mereka dan memastikan pengalaman pengguna yang luar biasa.

Pertimbangan lainnya

Kepatuhan terhadap peraturan: Mereka harus memastikan bahwa library yang dipilih mematuhi peraturan privasi dan perlindungan data yang relevan.

Keterampilan: Mereka mengevaluasi keahlian dan keahlian tim mereka. Beberapa framework dan library ML mungkin memerlukan bahasa pemrograman atau keahlian tertentu di bidang tertentu. Dengan mempertimbangkan faktor-faktor ini, mereka membuat keputusan yang tepat saat memilih model yang tepat untuk project machine learning mereka.

Teknologi dipilih

TensorFlow.js memenuhi kebutuhan mereka, setelah mempertimbangkan faktor-faktor ini. Aplikasi ini dapat berjalan sepenuhnya di perangkat menggunakan backend WebGL-nya untuk menggunakan GPU perangkat. Menjalankan model di perangkat memungkinkan pemberian respons yang lebih cepat kepada pengguna karena latensi server yang lebih rendah dan biaya komputasi server. Baca lebih lanjut tentang ML di perangkat dalam artikel Manfaat dan batasan ML di perangkat.

"TensorFlow.js adalah library machine learning open source dari Google yang ditujukan untuk developer JavaScript yang dapat menjalankan sisi klien di browser. Ini adalah opsi paling matang untuk Web AI dengan dukungan operator backend WebGL, WebAssembly, dan WebGPU yang komprehensif yang dapat digunakan di dalam browser dengan performa yang cepat."Cara Adobe menggunakan Web ML dengan TensorFlow.js untuk meningkatkan Photoshop untuk web

Implementasi teknis

Mitra Tokopedia menggunakan library Deteksi Wajah dari MediaPipe dan TensorFlow, yakni paket yang menyediakan model untuk menjalankan deteksi wajah real-time. Secara khusus, model MediaPipeFaceDetector-TFJS yang disediakan dalam library ini, yang menerapkan runtime tfjs digunakan untuk solusi ini.

Sebelum mulai melakukan implementasi, baca rangkuman singkat tentang MediaPipe. MediaPipe memungkinkan Anda membangun dan men-deploy solusi ML di perangkat di seluruh perangkat seluler (Android, iOS), web, desktop, perangkat edge, dan IoT.

Ada 14 solusi berbeda yang ditawarkan oleh MediaPipe pada saat postingan ini ditulis. Anda dapat menggunakan runtime mediapipe atau tfjs. Runtime tfjs dibuat dengan JavaScript dan menyediakan paket JavaScript yang dapat didownload secara eksternal oleh aplikasi web. Ini berbeda dengan runtime mediapipe, yang dibuat dengan C++ dan dikompilasi ke modul WebAssembly. Perbedaan utamanya adalah performa, kemampuan debug, dan pemaketan. Paket JavaScript dapat dipaketkan dengan pemaket klasik, seperti webpack. Sebaliknya, modul Wasm adalah resource biner yang lebih besar dan terpisah (yang dimitigasi dengan tidak menjadi dependensi waktu pemuatan) dan memerlukan alur kerja Proses debug wasm yang berbeda. Namun, API ini dijalankan lebih cepat untuk membantu memenuhi persyaratan teknis dan performa.

Diagram cara kerja model MediaPipe dan TensorFlow untuk berbagai runtime, menggunakan FaceDeteksi sebagai contoh.
Ilustrasi umum tentang cara kerja model MediaPipe dan TensorFlow untuk runtime yang berbeda, menggunakan Facedetection sebagai contoh

Kembali ke implementasi Tokopedia, langkah pertama adalah menginisialisasi model sebagai berikut. Saat pengguna mengupload foto, HTMLImageElement diteruskan sebagai input ke detektor.

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

Hasil daftar wajah berisi wajah yang terdeteksi untuk setiap wajah dalam gambar. Jika model tidak dapat mendeteksi wajah, daftar ini akan kosong. Untuk setiap wajah, tampilan berisi kotak pembatas dari wajah yang terdeteksi, serta array enam poin tombol untuk wajah yang terdeteksi. Hal ini mencakup fitur seperti mata, hidung, dan mulut. Setiap keypoint berisi x dan y, serta sebuah nama.

[
  {
    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 merepresentasikan kotak pembatas wajah dalam ruang piksel gambar, dengan xMin, xMax yang menunjukkan batas-x, yMin, yMax yang menunjukkan batas-y, dan width, height adalah dimensi kotak pembatas. Untuk keypoints, x dan y merepresentasikan posisi keypoint yang sebenarnya dalam ruang piksel gambar. name menyediakan label untuk keypoint, yang berturut-turut adalah 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion', dan 'leftEarTragion'. Seperti yang disebutkan di awal postingan ini, penjual harus mengupload Tanda Pengenal Nasional dan selfie dengan ID tersebut untuk menyelesaikan verifikasi penjual. Output model kemudian digunakan untuk memeriksa kriteria penerimaan—yaitu memiliki kecocokan dari enam poin utama yang disebutkan sebelumnya agar dianggap sebagai Kartu Identitas dan gambar selfie yang valid.

Setelah verifikasi berhasil, informasi penjual yang relevan akan diteruskan ke backend. Jika verifikasi gagal, penjual akan diberi pesan kegagalan dan opsi untuk mencoba kembali. Tidak ada informasi yang akan dikirim ke backend.

Diagram halaman KYC Mitra, model TensorFlow.js, dan server yang saling berinteraksi.
Cara halaman KYC Mitra, model TensorFlow.js, dan server berinteraksi satu sama lain

Pertimbangan performa untuk perangkat kelas bawah

Paket ini hanya berukuran 24,8 KB (diminifikasi dan di-gzip), yang tidak memengaruhi waktu download secara signifikan. Namun, untuk perangkat kelas bawah, pemrosesan runtime memerlukan waktu yang lama. Logika tambahan telah ditambahkan untuk memeriksa RAM Perangkat dan CPU sebelum meneruskan dua image ke model deteksi wajah machine learning.

Jika perangkat memiliki RAM lebih dari 4 GB, koneksi jaringan lebih besar dari 4G, dan CPU dengan lebih dari 6 core, gambar akan diteruskan ke model di perangkat untuk verifikasi wajah. Jika persyaratan ini tidak terpenuhi, model di perangkat akan dilewati dan gambar akan dikirim langsung ke server untuk diverifikasi menggunakan pendekatan campuran untuk mengakomodasi perangkat lama ini. Seiring waktu, makin banyak perangkat yang dapat mengalihkan beban komputasi dari server karena hardware terus berkembang.

Dampak

Karena integrasi ML, Tokopedia berhasil mengatasi rasio penolakan yang tinggi dan mendapatkan hasil berikut:

  • Rasio penolakan menurun lebih dari 20%.
  • Jumlah persetujuan manual menurun hampir 70%.

Solusi ini tidak hanya menciptakan pengalaman pengguna yang lebih lancar bagi penjual, tetapi juga mengurangi biaya operasional untuk tim Tokopedia.

Kesimpulan

Secara keseluruhan, hasil studi kasus ini menunjukkan bahwa untuk kasus penggunaan yang tepat, solusi ML di perangkat di web dapat bermanfaat dalam meningkatkan pengalaman pengguna dan efektivitas fitur, serta menciptakan penghematan biaya dan manfaat bisnis lainnya.

Coba sendiri fitur Deteksi Wajah MediaPipe menggunakan MediaPipe Studio dan contoh kode untuk MediaPipe Face Detector untuk web.

Jika Anda ingin memperluas kemampuan aplikasi web Anda dengan ML di perangkat, lihat referensi berikut: