چگونه یک حذفکننده پسزمینه سمت مرورگر ساختم
من ۳۰۰ عکس محصول برای پردازش داشتم. برای یک فروشگاه Shopify نیاز داشتم پسزمینه آنها را حذف کنم.
نمیخواستم این عکسهای منتشر نشده را در یک سرور تصادفی آپلود کنم. من به دنبال راه حلی بودم که به صورت محلی در مرورگر اجرا شود.
من دو روش مختلف را آزمایش کردم تا ببینم کدام یک بهتر عمل میکند.
روش ۱: Canvas API
این روش از دستکاری پیکسلها استفاده میکند. شما یک رنگ را از گوشه انتخاب میکنید و تمام پیکسلهای مشابه را به حالت شفاف (transparent) تغییر میدهید.
• مزایا: بسیار سریع. بدون نیاز به دانلود فایلهای اضافی. تقریباً هیچ حافظهای مصرف نمیکند. • معایب: اگر پسزمینه دارای سایه، گرادینت یا بافت باشد، شکست میخورد. لبههای دندانهدار ایجاد میکند.
روش ۲: WebAssembly (WASM) + Machine Learning
این روش از یک مدل ML از طریق ONNX Runtime Web استفاده میکند تا تشخیص دهد چه چیزی یک شخص یا شیء است.
• مزایا: مو، خز و لبههای پیچیده را مدیریت میکند. روی تقریباً هر پسزمینهای کار میکند. • معایب: باید یک مدل ۸ مگابایتی را دانلود کنید. از CPU و حافظه بسیار بیشتری استفاده میکند.
نتایج
من ۵۰۰ تصویر را روی یک MacBook Pro آزمایش کردم. مقایسه آنها به این صورت است:
- سرعت Canvas: ۱۲-۱۸ میلیثانیه برای هر تصویر.
- سرعت WASM: ۱۸۰-۲۲۰ میلیثانیه برای هر تصویر.
- دقت Canvas: ۱۸۷ از ۵۰۰ تصویر.
- دقت WASM: ۴۱۲ از ۵۰۰ تصویر.
راه حل من: رویکرد ترکیبی (Hybrid Approach)
من ابزاری ساختم که از هر دو استفاده میکند. ابتدا روش Canvas را امتحان میکند. اگر پسزمینه خیلی پیچیده باشد، به مدل ML سوئیچ میکند. این کار میانگین ۴۰ میلیثانیه برای هر تصویر را به همراه دارد.
نکات فنی برای شما:
- متد
getImageData()باعث ایجاد تأخیر میشود زیرا دادهها را از GPU به CPU منتقل میکند. برای صرفهجویی در زمان، عملیات خود را به صورت دستهای (Batch) انجام دهید. - برای سرعت ۳ تا ۵ برابر بیشتر، از بکاِند WebGL در ONNX Runtime استفاده کنید.
- برای مدلها از اندازه ورودی ۲۵۶x۲۵۶ استفاده کنید. اندازههای بزرگتر بدون سود کافی برای عکسهای محصول، فرآیند را ۴ برابر کندتر میکنند.
اگر برای عکسهای ساده به یک راه حل سریع نیاز دارید، از Canvas استفاده کنید. اگر کیفیت میخواهید، از Machine Learning استفاده کنید.
انجمن یادگیری اختیاری: https://t.me/GyaanSetuAi