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

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

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

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

Mitra Tokopedia ปรับปรุงกระบวนการทำ KYC ที่สำคัญนี้ภายในเว็บแอปให้ได้รับประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้น พร้อมกับลดความล้มเหลวในการยืนยันลงได้มากกว่า 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 สามารถรวมกับแพ็กเกจแบบคลาสสิก เช่น Webpack ได้ ในทางตรงกันข้าม โมดูล Wasm เป็นทรัพยากรไบนารีขนาดใหญ่และแยกกัน (ซึ่งลดลงจากการไม่ใช่ทรัพยากร Dependency ในการโหลด) และต้องใช้เวิร์กโฟลว์การแก้ไขข้อบกพร่อง 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 ประการที่กล่าวถึงก่อนหน้านี้เพื่อให้ถือว่าเป็นการ์ดการระบุตัวตนและรูปภาพเซลฟีที่ถูกต้อง

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

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

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

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

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

มีอิทธิพล

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

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

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

บทสรุป

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

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

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