วิธีที่ผมสร้างเครื่องมือลบพื้นหลังบนเบราว์เซอร์
ผมมีรูปภาพสินค้า 300 รูปที่ต้องจัดการ ผมจำเป็นต้องลบพื้นหลังออกเพื่อนำไปใช้ในร้านค้า Shopify
ผมไม่อยากอัปโหลดรูปภาพที่ยังไม่ได้เผยแพร่เหล่านี้ไปยังเซิร์ฟเวอร์ที่ไม่รู้จัก ผมต้องการโซลูชันที่ทำงานแบบ Local ภายในเบราว์เซอร์
ผมได้ทดสอบสองวิธีที่แตกต่างกันเพื่อดูว่าวิธีไหนทำงานได้ดีที่สุด
วิธีที่ 1: Canvas API วิธีนี้ใช้การจัดการพิกเซล (pixel manipulation) โดยคุณเลือกสีจากมุมหนึ่งแล้วตั้งค่าพิกเซลที่มีสีคล้ายกันทั้งหมดให้เป็นแบบโปร่งใส
• ข้อดี: เร็วมาก ไม่ต้องดาวน์โหลดไฟล์เพิ่มเติม แทบไม่ใช้หน่วยความจำเลย • ข้อเสีย: จะล้มเหลวหากพื้นหลังมีเงา ไล่เฉดสี (gradients) หรือมีพื้นผิว (textures) และทำให้ขอบภาพดูหยัก
วิธีที่ 2: WebAssembly (WASM) + Machine Learning วิธีนี้ใช้โมเดล ML ผ่าน ONNX Runtime Web เพื่อทำความเข้าใจว่าอะไรคือบุคคลหรือวัตถุ
• ข้อดี: จัดการกับเส้นผม ขนสัตว์ และขอบที่ซับซ้อนได้ดี ทำงานได้กับพื้นหลังเกือบทุกรูปแบบ • ข้อเสีย: คุณต้องดาวน์โหลดโมเดลขนาด 8MB และใช้ CPU กับหน่วยความจำมากกว่ามาก
ผลลัพธ์ ผมได้ทดสอบรูปภาพ 500 รูปบน MacBook Pro และนี่คือการเปรียบเทียบ:
- ความเร็วของ Canvas: 12-18 ms ต่อรูป
- ความเร็วของ WASM: 180-220 ms ต่อรูป
- ความแม่นยำของ Canvas: 187 จาก 500 รูป
- ความแม่นยำของ WASM: 412 จาก 500 รูป
โซลูชันของผม: วิธีแบบไฮบริด (Hybrid Approach) ผมสร้างเครื่องมือที่ใช้ทั้งสองวิธี โดยจะลองใช้วิธี Canvas ก่อน หากพื้นหลังซับซ้อนเกินไป ระบบจะสลับไปใช้โมเดล ML ซึ่งทำให้ค่าเฉลี่ยอยู่ที่ 40 ms ต่อรูป
เคล็ดลับทางเทคนิคสำหรับคุณ:
getImageData()ทำให้เกิดความล่าช้าเนื่องจากต้องย้ายข้อมูลจาก GPU ไปยัง CPU ควรทำ Batch operations เพื่อประหยัดเวลา- ใช้ WebGL backend ใน ONNX Runtime เพื่อความเร็วที่เพิ่มขึ้น 3-5 เท่า
- ใช้ขนาด Input สำหรับโมเดลที่ 256x256 ขนาดที่ใหญ่กว่าจะทำให้กระบวนการช้าลง 4 เท่า โดยที่ไม่ได้ให้ประโยชน์เพิ่มขึ้นมากนักสำหรับรูปภาพสินค้า
หากคุณต้องการวิธีแก้ปัญหาที่รวดเร็วสำหรับรูปภาพที่เรียบง่าย ให้ใช้ Canvas แต่หากคุณต้องการคุณภาพ ให้ใช้ Machine Learning
ชุมชนแห่งการเรียนรู้เพิ่มเติม: https://t.me/GyaanSetuAi