Tokopedia เป็นบริษัทเทคโนโลยีของอินโดนีเซียที่มีหนึ่งในมาร์เก็ตเพลสอีคอมเมิร์ซที่ใหญ่ที่สุด โดยให้บริการผลิตภัณฑ์ดิจิทัลกว่า 40 รายการและมีผู้ขายที่ลงทะเบียนมากกว่า 14 ล้านรายบนแพลตฟอร์ม
Mitra Tokopedia ซึ่งเป็นส่วนหนึ่งของประเภทธุรกิจของ Tokopedia คือเว็บแอปพลิเคชันที่ช่วยให้เจ้าของธุรกิจขนาดเล็กขายผลิตภัณฑ์ดิจิทัล เช่น บัตรกำนัลเครดิตและบัตรกำนัลเกม แพ็กเกจข้อมูล โทเค็นค่าไฟฟ้า ใบเรียกเก็บเงินค่าสุขภาพแห่งชาติ และอื่นๆ เว็บไซต์เป็นหนึ่งในช่องทางหลักสำหรับผู้ขาย Mitra Tokopedia ในกว่า 700 เมือง จึงมีความสำคัญอย่างยิ่งต่อประสบการณ์การใช้งานที่ราบรื่นของผู้ใช้
ขั้นตอนสำคัญในกระบวนการเริ่มต้นใช้งานกำหนดให้ผู้ขายเหล่านี้ต้องยืนยันตัวตน ผู้ขายต้องอัปโหลดบัตรประจำตัวประชาชนและเซลฟีที่มีบัตรประจำตัว เพื่อดำเนินการยืนยันผู้ขายให้เสร็จสมบูรณ์ เราเรียกกระบวนการนี้ว่ากระบวนการ Know-Your-Customer (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 ที่แตกต่างออกไป อย่างไรก็ตาม การดำเนินการจะเร็วขึ้นเพื่อช่วยตอบสนองข้อกำหนดทางเทคนิคและประสิทธิภาพ
กลับมาที่การใช้งานของ 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 จุดที่กล่าวถึงก่อนหน้านี้เพื่อให้บัตรประจำตัวและรูปเซลฟีถูกต้อง
เมื่อยืนยันสำเร็จ ระบบจะส่งข้อมูลผู้ขายที่เกี่ยวข้องไปยังแบ็กเอนด์ หากการยืนยันไม่สำเร็จ ผู้ขายจะได้รับข้อความแจ้งการยืนยันไม่สำเร็จและตัวเลือกให้ลองอีกครั้ง ระบบจะไม่ส่งข้อมูลไปยังแบ็กเอนด์
ข้อควรพิจารณาด้านประสิทธิภาพสำหรับอุปกรณ์ระดับล่าง
แพ็กเกจนี้มีขนาดเพียง 24.8 KB (ลดขนาดลงและ gzip) ซึ่งไม่มีผลกระทบอย่างมากต่อเวลาในการดาวน์โหลด อย่างไรก็ตาม อุปกรณ์ระดับต่ำมากจะใช้เวลาประมวลผลรันไทม์นาน เราได้เพิ่มตรรกะเพิ่มเติมเพื่อตรวจสอบ RAM และ CPU ของอุปกรณ์ก่อนที่จะส่งรูปภาพ 2 รูปไปยังโมเดลการตรวจจับใบหน้าด้วยแมชชีนเลิร์นนิง
หากอุปกรณ์มี RAM มากกว่า 4 GB มีการเชื่อมต่อเครือข่ายที่มีขนาดใหญ่กว่า 4G และ CPU ที่มีแกนมากกว่า 6 แกน ระบบจะส่งรูปภาพไปยังรุ่นในอุปกรณ์เพื่อยืนยันด้วยใบหน้า หากไม่เป็นไปตามข้อกำหนดเหล่านี้ ระบบจะข้ามโมเดลในอุปกรณ์และส่งรูปภาพไปยังเซิร์ฟเวอร์โดยตรงเพื่อทำการยืนยันโดยใช้แนวทางแบบผสมเพื่อรองรับอุปกรณ์รุ่นเก่าเหล่านี้ เมื่อเวลาผ่านไป จะมีอุปกรณ์จำนวนมากขึ้นเรื่อยๆ ที่จะสามารถนำการประมวลผลออกจากเซิร์ฟเวอร์ได้เพราะฮาร์ดแวร์มีการพัฒนาไปเรื่อยๆ
ผลกระทบ
การผสานการทำงานกับ ML ทำให้ Tokopedia ประสบผลสำเร็จในการแก้ปัญหาอัตราการปฏิเสธที่สูงและได้ผลลัพธ์ดังต่อไปนี้
- อัตราการปฏิเสธลดลงมากกว่า 20%
- จำนวนการอนุมัติด้วยตนเองลดลงเกือบ 70%
ซึ่งไม่เพียงทำให้ผู้ขายได้รับประสบการณ์ของผู้ใช้ที่ราบรื่นขึ้นเท่านั้น แต่ยังช่วยลดต้นทุนการปฏิบัติงานของทีม Tokopedia ด้วย
บทสรุป
โดยรวมแล้ว ผลลัพธ์จากกรณีศึกษานี้แสดงให้เห็นว่าโซลูชัน ML ในอุปกรณ์บนเว็บมีประโยชน์ในการปรับปรุงประสบการณ์ของผู้ใช้และประสิทธิภาพของฟีเจอร์ รวมถึงสร้างการประหยัดต้นทุนและประโยชน์ทางธุรกิจอื่นๆ สำหรับกรณีการใช้งานที่เหมาะสม
ลองใช้ฟีเจอร์การตรวจจับใบหน้าของ MediaPipe ด้วยตัวเองโดยใช้ MediaPipe Studio และตัวอย่างโค้ดสำหรับ เครื่องมือตรวจจับใบหน้าของ MediaPipe สำหรับเว็บ
หากสนใจขยายความสามารถของเว็บแอปของคุณเองด้วย ML ในอุปกรณ์ โปรดดูแหล่งข้อมูลต่อไปนี้