كيف قمت ببناء أداة لإزالة الخلفية من جانب المتصفح
كان لدي 300 صورة منتج لمعالجتها. كنت بحاجة لإزالة خلفياتها من أجل متجر Shopify.
لم أرغب في رفع هذه الصور غير المنشورة إلى خادم عشوائي. أردت حلاً يعمل محلياً داخل المتصفح.
اختبرت طريقتين مختلفتين لمعرفة أيهما يعمل بشكل أفضل.
الطريقة الأولى: Canvas API
تعتمد هذه الطريقة على معالجة البكسل (pixel manipulation). تقوم باختيار لون من الزاوية وتجعل جميع البكسلات المشابهة له شفافة.
• المميزات: سريعة للغاية. لا تتطلب تحميل ملفات إضافية. لا تستهلك تقريباً أي ذاكرة. • العيوب: تفشل إذا كانت الخلفية تحتوي على ظلال أو تدرجات لونية أو أنسجة. وتنتج حوافاً متعرجة.
الطريقة الثانية: WebAssembly (WASM) + Machine Learning
تستخدم هذه الطريقة نموذج تعلم آلي (ML model) عبر ONNX Runtime Web لفهم ما إذا كان العنصر شخصاً أو جسماً.
• المميزات: تتعامل مع الشعر والفراء والحواف المعقدة. وتعمل على أي خلفية تقريباً. • العيوب: يجب عليك تحميل نموذج بحجم 8 ميجابايت. وتستهلك الكثير من وحدة المعالجة المركزية (CPU) والذاكرة.
النتائج
اختبرت 500 صورة على جهاز MacBook Pro. وإليك مقارنة بينهما:
- سرعة Canvas: من 12 إلى 18 مللي ثانية لكل صورة.
- سرعة WASM: من 180 إلى 220 مللي ثانية لكل صورة.
- دقة Canvas: 187 من أصل 500 صورة.
- دقة WASM: 412 من أصل 500 صورة.
حلي: النهج الهجين
قمت ببناء أداة تستخدم كليهما؛ حيث تجرب طريقة Canvas أولاً، وإذا كانت الخلفية معقدة للغاية، تنتقل إلى نموذج ML. هذا يحقق متوسط 40 مللي ثانية لكل صورة.
نصائح تقنية لك:
- تسبب
getImageData()تأخيراً لأنها تنقل البيانات من الـ GPU إلى الـ CPU. قم بتجميع عملياتك (Batch your operations) لتوفير الوقت. - استخدم WebGL backend في ONNX Runtime للحصول على سرعات أسرع بـ 3 إلى 5 مرات.
- التزم بحجم إدخال 256x256 للنماذج. الأحجام الأكبر تجعل العملية أبطأ بـ 4 مرات دون فائدة تذكر لصور المنتجات.
إذا كنت بحاجة إلى حل سريع للصور البسيطة، فاستخدم Canvas. أما إذا كنت بحاجة إلى الجودة، فاستخدم Machine Learning.
مجتمع تعليمي اختياري: https://t.me/GyaanSetuAi