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 ที่แตกต่างออกไป อย่างไรก็ตาม การดำเนินการจะเร็วขึ้นเพื่อช่วยตอบสนองข้อกำหนดทางเทคนิคและประสิทธิภาพ
กลับมาที่การใช้งานของ 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 Face Detector สำหรับเว็บ
หากสนใจขยายความสามารถของเว็บแอปของคุณเองด้วย ML ในอุปกรณ์ โปรดดูแหล่งข้อมูลต่อไปนี้