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), เว็บ, เดสก์ท็อป, อุปกรณ์ Edge และ IoT
มี
โซลูชัน 14 แบบที่แตกต่างกัน
เสนอโดย MediaPipe ในขณะที่เขียนโพสต์นี้ คุณสามารถใช้
รันไทม์ mediapipe หรือ tfjs รันไทม์ tfjs สร้างด้วย JavaScript และ
มีแพ็กเกจ JavaScript ที่เว็บดาวน์โหลดจากภายนอกได้
แอปพลิเคชัน ซึ่งแตกต่างจากรันไทม์ mediapipe ซึ่งสร้างขึ้นด้วย
C++ และคอมไพล์เป็นโมดูล WebAssembly ความแตกต่างที่สำคัญคือประสิทธิภาพ
ความสามารถในการแก้ไขข้อบกพร่อง และการรวมกลุ่มอีเมล แพ็กเกจ JavaScript สามารถมาพร้อมกับแบบคลาสสิก
Bundler เช่น Webpack ในทางกลับกัน โมดูล Wasm นั้นใหญ่กว่า
ทรัพยากรไบนารี (ซึ่งลดลงเนื่องจากไม่ได้เป็นทรัพยากร Dependency ของเวลาที่ใช้ในการโหลด) และ
ต้องการ
กำลังแก้ไขข้อบกพร่องเวิร์กโฟลว์ อย่างไรก็ตาม
โมเดลจะทำงานได้เร็วขึ้นเพื่อให้เป็นไปตามข้อกำหนดทางเทคนิคและประสิทธิภาพ
กลับมาที่หน้าการติดตั้งใช้งาน 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 จะแสดงตำแหน่งคีย์พอยท์จริงในรูปภาพ
Pixel Space
name จะมีป้ายกำกับสำหรับคีย์พอยท์ซึ่งก็คือ 'rightEye', 'leftEye',
'noseTip', 'mouthCenter', 'rightEarTragion' และ 'leftEarTragion' ตามลำดับ
ตามที่กล่าวไว้ในตอนต้นของโพสต์นี้ ผู้ขายจะต้องอัปโหลด
บัตรประจำตัวประชาชนและรูปเซลฟีพร้อมบัตรประจำตัวเพื่อกรอกข้อมูลของผู้ขายให้เสร็จสมบูรณ์
การยืนยันของคุณ
จากนั้นเอาต์พุตของโมเดลจะถูกใช้ในการตรวจสอบเกณฑ์การยอมรับ กล่าวคือ
ต้องตรงกับ 6 ประเด็นสำคัญ 6 ประการที่กล่าวถึงก่อนหน้านี้ จะถือว่าเป็นการจับคู่ที่ถูกต้อง
บัตรประจำตัวและรูปภาพเซลฟี
เมื่อยืนยันแล้ว ข้อมูลผู้ขายที่เกี่ยวข้องจะถูกส่งไปยัง แบ็กเอนด์ หากการยืนยันล้มเหลว ผู้ขายจะได้รับข้อความแจ้งความล้มเหลว ตัวเลือกเพื่อลองอีกครั้ง ระบบจะไม่ส่งข้อมูลไปยังแบ็กเอนด์
ข้อควรพิจารณาด้านประสิทธิภาพสำหรับอุปกรณ์ระดับโลว์เอนด์
แพ็กเกจนี้มีขนาดเพียง 24.8 KB (ลดขนาดลงและ gzip) ขนาด ส่งผลต่อเวลาในการดาวน์โหลดอย่างมาก แต่สำหรับอุปกรณ์ระดับต่ำมาก การประมวลผลรันไทม์จะใช้เวลานาน มีการเพิ่มตรรกะเพิ่มเติมเพื่อตรวจหา RAM และ CPU ของอุปกรณ์ก่อนที่จะส่งรูปภาพ 2 รูปไปยังแมชชีนเลิร์นนิง โมเดลการตรวจจับ
หากอุปกรณ์มี RAM มากกว่า 4 GB แสดงว่าการเชื่อมต่อเครือข่ายมีมากกว่า 4G และ CPU ที่มีแกนมากกว่า 6 แกน ระบบจะส่งรูปภาพไปยังรุ่นในอุปกรณ์ สำหรับการยืนยันใบหน้า หากไม่ปฏิบัติตามข้อกำหนดเหล่านี้ บนอุปกรณ์ ข้ามโมเดลและระบบจะส่งรูปภาพไปยังเซิร์ฟเวอร์โดยตรงเพื่อยืนยัน โดยใช้แนวทางแบบผสมเพื่อรองรับอุปกรณ์รุ่นเก่าเหล่านี้ เมื่อเวลาผ่านไป จะยิ่งเพิ่มขึ้น อุปกรณ์จะสามารถถ่ายโอนการประมวลผลจากเซิร์ฟเวอร์เมื่อฮาร์ดแวร์ยังคง วิวัฒนาการ
ผลกระทบ
จากการผสานรวม ML ทำให้ Tokopedia สามารถแก้ปัญหา อัตราการปฏิเสธและเห็นผลลัพธ์ต่อไปนี้
- อัตราการปฏิเสธลดลงมากกว่า 20%
- จํานวนการอนุมัติด้วยตนเองลดลงเกือบ 70%
วิธีนี้ไม่เพียงสร้างประสบการณ์ของผู้ใช้ที่ราบรื่นขึ้นสำหรับผู้ขาย ต้นทุนในการดำเนินการสำหรับทีม Tokopedia
บทสรุป
โดยรวมแล้ว ผลลัพธ์ของกรณีศึกษานี้แสดงให้เห็นว่าสำหรับ Use Case ที่เหมาะสม โซลูชัน ML ในอุปกรณ์บนเว็บอาจเป็นประโยชน์ต่อการปรับปรุงผู้ใช้ ประสบการณ์และประสิทธิภาพของฟีเจอร์ต่างๆ รวมถึงสร้างการประหยัดต้นทุน ผลประโยชน์อื่นๆ ทางธุรกิจ
ลองใช้ฟีเจอร์การตรวจจับใบหน้าของ MediaPipe ด้วยตัวเองโดยใช้ MediaPipe Studio และตัวอย่างโค้ดสำหรับ อุปกรณ์ตรวจจับใบหน้าของ MediaPipe สำหรับเว็บ
หากคุณสนใจที่จะขยายขอบเขตความสามารถของเว็บแอปของคุณด้วย ML ในอุปกรณ์ โปรดดูแหล่งข้อมูลต่อไปนี้