วิธีที่ Tokopedia ลดต้นทุนการดำเนินงานด้วยการปรับปรุงเว็บแอปของผู้ขายโดยใช้แมชชีนเลิร์นนิง

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

Tokopedia เป็นบริษัทเทคโนโลยีในอินโดนีเซียที่มีแพลตฟอร์มอีคอมเมิร์ซที่ใหญ่ที่สุดแห่งหนึ่ง ซึ่งโฮสต์ผลิตภัณฑ์ดิจิทัลกว่า 40 รายการและผู้ขายที่ลงทะเบียนแล้วกว่า 14 ล้านราย

Mitra Tokopedia ซึ่งเป็นส่วนหนึ่งของธุรกิจแนวตั้งของ Tokopedia เป็นเว็บแอปพลิเคชันที่ช่วยให้เจ้าของธุรกิจขนาดเล็กขายผลิตภัณฑ์ดิจิทัลได้ เช่น เครดิตและบัตรกำนัลเกม แพ็กเกจอินเทอร์เน็ต บัตรค่าไฟ ค่ารักษาพยาบาลของรัฐ และอื่นๆ เว็บไซต์เป็นหนึ่งในช่องทางหลักสำหรับผู้ขาย Mitra Tokopedia ในกว่า 700 เมือง จึงจำเป็นต้องมอบประสบการณ์การใช้งานที่ราบรื่นให้แก่ผู้ใช้

ขั้นตอนสำคัญในกระบวนการเริ่มต้นใช้งานกำหนดให้ผู้ขายเหล่านี้ต้องยืนยันตัวตน ผู้ขายต้องอัปโหลดบัตรประจำตัวประชาชนและเซลฟีที่มีบัตรดังกล่าวเพื่อทำการยืนยันตัวตนผู้ขายให้เสร็จสมบูรณ์ กระบวนการนี้เรียกว่ากระบวนการ "รู้จักลูกค้า" (KYC)

การเพิ่มความสามารถของแมชชีนเลิร์นนิงในกระบวนการ KYC ที่สำคัญนี้ภายในเว็บแอปทำให้ Mitra Tokopedia มอบประสบการณ์การใช้งานที่ดีขึ้นให้แก่ผู้ใช้ และลดจำนวนครั้งที่ยืนยันไม่สำเร็จได้มากกว่า 20% นอกจากนี้ ยังประหยัดต้นทุนการดําเนินการด้วยการลดการอนุมัติด้วยตนเองลงเกือบ 70%

ความท้าทาย

ข้อมูล KYC ส่วนใหญ่ถูกปฏิเสธ ซึ่งส่งผลให้มีคำขอแจ้งปัญหาหลายพันรายการต่อสัปดาห์ส่งไปยังทีมปฏิบัติการเพื่อรับการยืนยันโดยเจ้าหน้าที่ การดำเนินการนี้ไม่เพียงทําให้ต้นทุนการดําเนินการสูงเท่านั้น แต่ยังทําให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดีเนื่องจากกระบวนการยืนยันล่าช้า สาเหตุหลักที่ทำให้เกิดการปฏิเสธคือผู้ขายไม่ได้อัปโหลดรูปเซลฟีที่มีบัตรประจำตัวอย่างถูกต้อง Mitra Tokopedia ต้องการแก้ไขปัญหานี้อย่างยืดหยุ่นโดยใช้ความสามารถของเว็บสมัยใหม่

โซลูชัน

ทีมของ Tokopedia จึงตัดสินใจใช้ ML กับ TensorFlow.js เพื่อแก้ปัญหานี้ตั้งแต่ขั้นตอนแรกของกระบวนการ KYC เมื่อผู้ใช้อัปโหลดรูปภาพ โดยได้ใช้ MediaPipe และคลังการตรวจจับใบหน้าของ TensorFlow เพื่อตรวจจับใบหน้าของผู้ขายด้วยจุดสำคัญ 6 จุดเมื่อผู้ขายอัปโหลดบัตรประจำตัวและรูปภาพเซลฟี จากนั้นระบบจะใช้เอาต์พุตของโมเดลเพื่อตรวจสอบกับเกณฑ์การยอมรับ เมื่อยืนยันสำเร็จ ระบบจะส่งข้อมูลไปยังแบ็กเอนด์ หากยืนยันไม่สำเร็จ ผู้ขายจะได้รับข้อความแสดงข้อผิดพลาดและตัวเลือกให้ลองอีกครั้ง ระบบใช้แนวทางแบบผสมผสานโดยโมเดลจะทำการอนุมานในอุปกรณ์หรือฝั่งเซิร์ฟเวอร์ ทั้งนี้ขึ้นอยู่กับข้อกําหนดของโทรศัพท์ อุปกรณ์ระดับล่างจะทำการอนุมานในเซิร์ฟเวอร์

การใช้โมเดล ML ตั้งแต่เนิ่นๆ ในกระบวนการ KYC จะช่วยให้สามารถดำเนินการต่อไปนี้ได้

  • ปรับปรุงอัตราการปฏิเสธในกระบวนการ KYC
  • เตือนผู้ใช้ว่ารูปภาพอาจถูกปฏิเสธ โดยอิงตามคุณภาพที่โมเดลประเมิน

เหตุผลที่ควรเลือก ML แทนโซลูชันอื่นๆ

ML สามารถทํางานซ้ำๆ ได้โดยอัตโนมัติ ซึ่งปกติแล้วจะต้องใช้เวลานานหรือทําด้วยตนเองไม่สะดวก ในกรณีของ Tokopedia การเพิ่มประสิทธิภาพโซลูชันที่ไม่ใช่ ML ในปัจจุบันไม่ได้ให้ผลลัพธ์ที่ชัดเจน แต่โซลูชัน ML สามารถลดภาระงานของทีมปฏิบัติการที่ต้องดำเนินการอนุมัติหลายพันรายการด้วยตนเองในแต่ละสัปดาห์ได้อย่างมาก โซลูชัน ML ช่วยให้คุณตรวจสอบรูปภาพได้เกือบจะทันที ซึ่งมอบประสบการณ์การใช้งานที่ดีขึ้นและปรับปรุงประสิทธิภาพการทํางาน อ่านข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดปัญหาเพื่อพิจารณาว่า ML เป็นโซลูชันที่เหมาะกับปัญหาของคุณหรือไม่

สิ่งที่ควรพิจารณาเมื่อเลือกโมเดล

ปัจจัยต่อไปนี้เป็นปัจจัยที่นำมาพิจารณาเมื่อเลือกโมเดล ML

ค่าใช้จ่าย

พวกเขาประเมินค่าใช้จ่ายโดยรวมในการใช้รูปแบบ เนื่องจาก TensorFlow.js เป็นแพ็กเกจโอเพนซอร์สที่ Google ดูแลรักษาเป็นอย่างดี เราจึงประหยัดค่าใช้จ่ายในการขอใบอนุญาตและการบำรุงรักษา ข้อควรพิจารณาเพิ่มเติมคือต้นทุนของการอนุมาน ความสามารถในการทําการอนุมานฝั่งไคลเอ็นต์จะช่วยประหยัดค่าใช้จ่ายได้มากเมื่อเทียบกับการประมวลผลฝั่งเซิร์ฟเวอร์ด้วย GPU ที่มีราคาแพง โดยเฉพาะอย่างยิ่งหากข้อมูลนั้นไม่ถูกต้องและใช้งานไม่ได้

ความสามารถในการปรับขนาด

โดยพิจารณาความสามารถในการปรับขนาดของโมเดลและเทคโนโลยี เครื่องมือจัดการข้อมูลดังกล่าวสามารถรองรับข้อมูลที่เพิ่มขึ้นและความซับซ้อนของโมเดลเมื่อโปรเจ็กต์พัฒนาไปได้ด้วยไหม ขยายการให้บริการไปยังโปรเจ็กต์หรือกรณีการใช้งานอื่นๆ ได้ไหม การประมวลผลในอุปกรณ์มีประโยชน์เนื่องจากโมเดลอาจโฮสต์ใน CDN และส่งไปยังฝั่งไคลเอ็นต์ ซึ่งปรับขนาดได้อย่างมาก

ประสิทธิภาพ

โดยพิจารณาจากขนาดของไลบรารี (เป็น KB) และเวลาในการตอบสนองของรันไทม์ ฐานผู้ใช้ส่วนใหญ่ของ Mitra Tokopedia มีอุปกรณ์ระดับกลางถึงระดับล่างที่มีความเร็วและการเชื่อมต่ออินเทอร์เน็ตปานกลาง ดังนั้น ประสิทธิภาพในแง่ของการดาวน์โหลดและรันไทม์ (ความเร็วที่โมเดลสร้างเอาต์พุตได้) จึงมีความสำคัญสูงสุดเพื่อตอบสนองความต้องการเฉพาะของผู้ใช้และมอบประสบการณ์การใช้งานที่ยอดเยี่ยม

ข้อควรพิจารณาอื่นๆ

การปฏิบัติตามข้อกำหนด: เราต้องตรวจสอบว่าคลังภาพที่เลือกเป็นไปตามกฎระเบียบด้านการคุ้มครองข้อมูลและความเป็นส่วนตัวที่เกี่ยวข้อง

ชุดทักษะ: ประเมินความเชี่ยวชาญและชุดทักษะของทีม เฟรมเวิร์กและไลบรารี ML บางรายการอาจต้องใช้ภาษาโปรแกรมหรือความเชี่ยวชาญเฉพาะด้าน การพิจารณาปัจจัยเหล่านี้ช่วยให้ทีมตัดสินใจได้อย่างมีข้อมูลเมื่อเลือกโมเดลที่เหมาะสมสำหรับโปรเจ็กต์แมชชีนเลิร์นนิง

เทคโนโลยีที่เลือก

TensorFlow.js ตอบโจทย์ความต้องการของลูกค้าได้หลังจากพิจารณาปัจจัยเหล่านี้ โดยสามารถทำงานบนอุปกรณ์ได้อย่างเต็มที่โดยใช้แบ็กเอนด์ WebGL เพื่อใช้ GPU ของอุปกรณ์ การใช้โมเดลในอุปกรณ์ช่วยให้ผู้ใช้ได้รับความคิดเห็นเร็วขึ้นเนื่องจากเวลาในการตอบสนองของเซิร์ฟเวอร์ลดลงและลดต้นทุนการประมวลผลของเซิร์ฟเวอร์ อ่านข้อมูลเพิ่มเติมเกี่ยวกับ ML ในอุปกรณ์ได้ในบทความข้อดีและข้อจํากัดของ ML ในอุปกรณ์

"TensorFlow.js เป็นไลบรารีแมชชีนเลิร์นนิงแบบโอเพนซอร์สจาก Google ที่มุ่งเป้าไปที่นักพัฒนาซอฟต์แวร์ JavaScript ซึ่งสามารถเรียกใช้ฝั่งไคลเอ็นต์ในเบราว์เซอร์ นี่เป็นตัวเลือกที่สมบูรณ์แบบที่สุดสำหรับ Web AI ที่รองรับโอเปอเรเตอร์แบ็กเอนด์ WebGL, WebAssembly และ WebGPU อย่างครอบคลุม ซึ่งใช้ในเบราว์เซอร์ได้โดยมีประสิทธิภาพที่รวดเร็ว" - วิธีที่ Adobe ใช้ Web ML กับ TensorFlow.js เพื่อปรับปรุง Photoshop สำหรับเว็บ

การติดตั้งใช้งานทางเทคนิค

Mitra Tokopedia ใช้ MediaPipe และ คลังการตรวจจับใบหน้าของ TensorFlow ซึ่งเป็นแพ็กเกจที่มีโมเดลสําหรับเรียกใช้การตรวจจับใบหน้าแบบเรียลไทม์ กล่าวโดยละเอียดคือ มีการใช้โมเดล MediaPipeFaceDetector-TFJS ที่ระบุไว้ในไลบรารีนี้ ซึ่งใช้รันไทม์ tfjs สำหรับโซลูชันนี้

ก่อนเจาะลึกการใช้งาน เราขอทบทวนสั้นๆ ว่า MediaPipe คืออะไร MediaPipe ช่วยให้คุณสร้างและติดตั้งใช้งานโซลูชัน ML ในอุปกรณ์เคลื่อนที่ (Android, iOS), เว็บ, เดสก์ท็อป, อุปกรณ์เอดจ์ และ IoT

MediaPipe มีโซลูชันที่แตกต่างกัน 14 รายการ ณ เวลาที่เขียนโพสต์นี้ คุณจะใช้รันไทม์ mediapipe หรือ tfjs ก็ได้ รันไทม์ tfjs สร้างขึ้นด้วย JavaScript และมีแพ็กเกจ JavaScript ที่เว็บแอปพลิเคชันสามารถดาวน์โหลดได้จากภายนอก ซึ่งแตกต่างจากmediapipeรันไทม์ที่สร้างขึ้นด้วย C++ และคอมไพล์เป็นโมดูล WebAssembly ความแตกต่างที่สําคัญคือประสิทธิภาพ การแก้ไขข้อบกพร่อง และการรวม แพ็กเกจ JavaScript สามารถรวมเข้ากับโปรแกรมรวบรวมข้อมูลแบบคลาสสิกได้ เช่น webpack ในทางตรงกันข้าม โมดูล Wasm เป็นทรัพยากรไบนารีที่ใหญ่กว่าและแยกต่างหาก (ซึ่งสามารถลดได้โดยไม่ใช่ทรัพยากรที่ต้องโหลดเมื่อเริ่มต้น) และต้องใช้เวิร์กโฟลว์การแก้ไขข้อบกพร่อง Wasm ที่แตกต่างออกไป อย่างไรก็ตาม การดำเนินการจะเร็วขึ้นเพื่อช่วยตอบสนองข้อกำหนดทางเทคนิคและประสิทธิภาพ

แผนภาพการทำงานของโมเดล MediaPipe และ TensorFlow สำหรับรันไทม์ต่างๆ โดยใช้ FaceDetection เป็นตัวอย่าง
ภาพทั่วไปที่แสดงวิธีที่โมเดล MediaPipe และ TensorFlow ทำงานสำหรับรันไทม์ต่างๆ โดยใช้ FaceDetection เป็นตัวอย่าง

กลับมาที่การใช้งานของ Tokopedia ขั้นตอนแรกคือต้องเริ่มต้นใช้งานรูปแบบ ดังนี้ เมื่อผู้ใช้อัปโหลดรูปภาพ ระบบจะส่ง HTMLImageElement เป็นอินพุตไปยังเครื่องตรวจจับ

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

ผลลัพธ์ของรายการใบหน้าจะมีใบหน้าที่ตรวจพบสำหรับใบหน้าแต่ละใบหน้าในรูปภาพ หากโมเดลตรวจไม่พบใบหน้าใดๆ รายการจะว่างเปล่า สำหรับใบหน้าแต่ละใบหน้า จะมีกรอบล้อมรอบของใบหน้าที่ตรวจพบ รวมถึงอาร์เรย์ของจุดสังเกต 6 จุดสำหรับใบหน้าที่ตรวจพบ ซึ่งรวมถึงลักษณะต่างๆ เช่น ตา จมูก และปาก จุดสังเกตแต่ละจุดจะมีค่า x และ y รวมถึงชื่อ

[
  {
    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 แสดงถึงกรอบขอบของใบหน้าในพื้นที่พิกเซลของรูปภาพ โดยมี xMin, xMax หมายถึงขอบเขต x, yMin, yMax หมายถึงขอบเขต y และ width, height คือมิติข้อมูลของกรอบขอบ โดย keypoints, x และ y แสดงตำแหน่งจุดสังเกตจริงในพื้นที่พิกเซลของรูปภาพ name ระบุป้ายกำกับสำหรับจุดสังเกต ซึ่งได้แก่ 'rightEye', 'leftEye', 'noseTip', 'mouthCenter', 'rightEarTragion' และ 'leftEarTragion' ตามลำดับ ดังที่ได้กล่าวไว้ในตอนต้นของโพสต์นี้ ผู้ขายต้องอัปโหลดบัตรประจำตัวประชาชนและเซลฟีที่มีบัตรประจำตัวเพื่อทำการยืนยันตัวตนผู้ขายให้เสร็จสมบูรณ์ จากนั้นระบบจะใช้เอาต์พุตของโมเดลเพื่อตรวจสอบตามเกณฑ์การยอมรับ ซึ่งก็คือต้องตรงกับจุดสำคัญ 6 จุดที่กล่าวถึงก่อนหน้านี้จึงจะถือว่าบัตรประจำตัวและรูปเซลฟีนั้นถูกต้อง

เมื่อยืนยันสำเร็จ ระบบจะส่งข้อมูลผู้ขายที่เกี่ยวข้องไปยังแบ็กเอนด์ หากการยืนยันไม่สำเร็จ ผู้ขายจะได้รับข้อความแจ้งการยืนยันไม่สำเร็จและตัวเลือกให้ลองอีกครั้ง ระบบจะไม่ส่งข้อมูลไปยังแบ็กเอนด์

แผนภาพของหน้า KYC ของ Mitra, โมเดล TensorFlow.js และเซิร์ฟเวอร์ที่โต้ตอบกัน
วิธีที่หน้า KYC ของ Mitra, โมเดล TensorFlow.js และเซิร์ฟเวอร์โต้ตอบกัน

ข้อควรพิจารณาด้านประสิทธิภาพสำหรับอุปกรณ์ระดับล่าง

แพ็กเกจนี้มีขนาดเล็กเพียง 24.8 KB (ได้รับการย่อขนาดและบีบอัดด้วย GZIP) ซึ่งจะไม่ส่งผลต่อเวลาในการดาวน์โหลดมากนัก อย่างไรก็ตาม อุปกรณ์ระดับต่ำมากจะใช้เวลานานในการประมวลผลรันไทม์ เราได้เพิ่มตรรกะเพิ่มเติมเพื่อตรวจสอบ RAM และ CPU ของอุปกรณ์ก่อนที่จะส่งรูปภาพ 2 รูปไปยังโมเดลการตรวจจับใบหน้าด้วยแมชชีนเลิร์นนิง

หากอุปกรณ์มี RAM มากกว่า 4 GB, การเชื่อมต่อเครือข่ายมากกว่า 4G และ CPU ที่มีมากกว่า 6 คอร์ ระบบจะส่งรูปภาพไปยังโมเดลในอุปกรณ์เพื่อยืนยันใบหน้า หากไม่เป็นไปตามข้อกำหนดเหล่านี้ ระบบจะข้ามโมเดลในอุปกรณ์และส่งรูปภาพไปยังเซิร์ฟเวอร์โดยตรงเพื่อทำการยืนยันโดยใช้แนวทางแบบผสมเพื่อรองรับอุปกรณ์รุ่นเก่าเหล่านี้ เมื่อเวลาผ่านไป อุปกรณ์จำนวนมากขึ้นจะสามารถประมวลผลจากเซิร์ฟเวอร์ได้ เนื่องจากฮาร์ดแวร์พัฒนาอย่างต่อเนื่อง

ผลกระทบ

การผสานรวม ML ทําให้ Tokopedia แก้ปัญหาอัตราการปฏิเสธสูงได้สําเร็จและได้ผลลัพธ์ต่อไปนี้

  • อัตราการปฏิเสธลดลงมากกว่า 20%
  • จำนวนการอนุมัติด้วยตนเองลดลงเกือบ 70%

ซึ่งไม่เพียงทำให้ผู้ขายได้รับประสบการณ์ของผู้ใช้ที่ราบรื่นขึ้นเท่านั้น แต่ยังช่วยลดต้นทุนการปฏิบัติงานของทีม Tokopedia ด้วย

บทสรุป

โดยรวมแล้ว ผลลัพธ์จากกรณีศึกษานี้แสดงให้เห็นว่าโซลูชัน ML ในอุปกรณ์บนเว็บมีประโยชน์ในการปรับปรุงประสบการณ์ของผู้ใช้และประสิทธิภาพของฟีเจอร์ รวมถึงสร้างการประหยัดต้นทุนและประโยชน์ทางธุรกิจอื่นๆ สำหรับกรณีการใช้งานที่เหมาะสม

ลองใช้ฟีเจอร์การตรวจจับใบหน้าของ MediaPipe ด้วยตัวคุณเองโดยใช้ MediaPipe Studio และตัวอย่างโค้ดสำหรับ MediaPipe Face Detector สำหรับเว็บ

หากสนใจขยายความสามารถของเว็บแอปของคุณเองด้วย ML ในอุปกรณ์ โปรดดูแหล่งข้อมูลต่อไปนี้