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 ราคาแพง โดยเฉพาะอย่างยิ่งหากข้อมูลไม่ถูกต้องและใช้งานไม่ได้
ความสามารถในการปรับขนาด
โดยพิจารณาจากความสามารถในการปรับขนาดของโมเดลและเทคโนโลยี สามารถรองรับการเติบโตของข้อมูลและความซับซ้อนของโมเดลเมื่อโปรเจ็กต์ของเราพัฒนาขึ้นได้ไหม สามารถขยายเพื่อรองรับโปรเจ็กต์หรือ Use Case อื่นๆ ได้ไหม การประมวลผลในอุปกรณ์ช่วยได้เนื่องจากโมเดลสามารถโฮสต์ใน 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), เว็บ, เดสก์ท็อป, อุปกรณ์ Edge และ IoT
MediaPipe มีโซลูชันที่แตกต่างกัน 14 รายการในขณะที่เขียนโพสต์นี้ คุณสามารถใช้รันไทม์ mediapipe หรือ tfjs ก็ได้ รันไทม์ tfjs สร้างขึ้นด้วย JavaScript และมีแพ็กเกจ JavaScript ที่เว็บแอปพลิเคชันดาวน์โหลดจากภายนอกได้ ซึ่งแตกต่างจากรันไทม์ mediapipe ที่สร้างด้วย C++ และคอมไพล์เป็นโมดูล WebAssembly ความแตกต่างที่สำคัญคือประสิทธิภาพ ความสามารถในการแก้ไขข้อบกพร่อง และการรวมกลุ่ม แพ็กเกจ JavaScript สามารถรวมเข้ากับ Bundler แบบคลาสสิก เช่น webpack ได้ ในทางตรงกันข้าม โมดูล Wasm เป็นทรัพยากรไบนารีที่ใหญ่กว่าและแยกต่างหาก (ซึ่งลดลงได้โดยไม่เป็นทรัพยากร Dependency ของเวลาในการโหลด) และต้องใช้เวิร์กโฟลว์การแก้ไขข้อบกพร่อง 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 ในอุปกรณ์ โปรดดูแหล่งข้อมูลต่อไปนี้