میں نے براؤزر پر کام کرنے والا بیک گراؤنڈ ریموور کیسے بنایا

میرے پاس پروسیس کرنے کے لیے 300 پروڈکٹ فوٹوز تھیں۔ مجھے ایک Shopify اسٹور کے لیے ان کے بیک گراؤنڈز ہٹانے کی ضرورت تھی۔

میں ان غیر ریلیز شدہ تصاویر کو کسی بھی غیر معروف سرور پر اپ لوڈ نہیں کرنا چاہتا تھا۔ مجھے ایک ایسا حل چاہیے تھا جو مقامی طور پر براؤزر میں چلے۔

میں نے یہ دیکھنے کے لیے دو مختلف طریقوں کا تجربہ کیا کہ کون سا بہترین کام کرتا ہے۔

طریقہ نمبر 1: Canvas API

یہ طریقہ پکسل مینیپولیشن (pixel manipulation) کا استعمال کرتا ہے۔ آپ کونے سے ایک رنگ منتخب کرتے ہیں اور تمام ملتے جلتے پکسلز کو ٹرانسپیرنٹ (transparent) کر دیتے ہیں۔

• فوائد: انتہائی تیز۔ ڈاؤن لوڈ کرنے کے لیے کوئی اضافی فائلیں نہیں۔ تقریباً کوئی میموری استعمال نہیں کرتا۔ • نقصانات: اگر بیک گراؤنڈ میں سائے (shadows)، گریڈینٹس (gradients) یا ٹیکسچر (textures) ہوں تو یہ ناکام ہو جاتا ہے۔ یہ کٹے پھٹے کنارے (jagged edges) پیدا کرتا ہے۔

طریقہ نمبر 2: WebAssembly (WASM) + Machine Learning

یہ طریقہ کسی شخص یا چیز کو سمجھنے کے لیے ONNX Runtime Web کے ذریعے ایک ML ماڈل کا استعمال کرتا ہے۔

• فوائد: بالوں، فر (fur) اور پیچیدہ کناروں کو سنبھال لیتا ہے۔ تقریباً کسی بھی بیک گراؤنڈ پر کام کرتا ہے۔ • نقصانات: آپ کو 8MB کا ماڈل ڈاؤن لوڈ کرنا ہوگا۔ یہ بہت زیادہ CPU اور میموری استعمال کرتا ہے۔

نتائج

میں نے MacBook Pro پر 500 تصاویر کا تجربہ کیا۔ ان کا موازنہ کچھ یوں ہے:

  • Canvas کی رفتار: 12-18 ms فی تصویر۔
  • WASM کی رفتار: 180-220 ms فی تصویر۔
  • Canvas کی درستگی: 500 میں سے 187 تصاویر۔
  • WASM کی درستگی: 500 میں سے 412 تصاویر۔

میرا حل: ہائبرڈ اپروچ (Hybrid Approach)

میں نے ایک ایسا ٹول بنایا ہے جو دونوں کا استعمال کرتا ہے۔ یہ پہلے Canvas کا طریقہ آزماتا ہے۔ اگر بیک گراؤنڈ بہت پیچیدہ ہو، تو یہ ML ماڈل پر سوئچ کر جاتا ہے۔ اس سے فی تصویر اوسطاً 40 ms لگتے ہیں۔

آپ کے لیے تکنیکی مشورے:

  • getImageData() تاخیر کا باعث بنتا ہے کیونکہ یہ ڈیٹا کو GPU سے CPU میں منتقل کرتا ہے۔ وقت بچانے کے لیے اپنے آپریشنز کو بیچ (batch) میں کریں۔
  • 3-5 گنا تیز رفتار کے لیے ONNX Runtime میں WebGL بیک اینڈ استعمال کریں۔
  • ماڈلز کے لیے 256x256 ان پٹ سائز تک محدود رہیں۔ بڑے سائز پروڈکٹ فوٹوز کے لیے زیادہ فائدہ پہنچائے بغیر عمل کو 4 گنا سست کر دیتے ہیں۔

اگر آپ کو سادہ تصاویر کے لیے فوری حل چاہیے، تو Canvas استعمال کریں۔ اگر آپ کو کوالٹی چاہیے، تو Machine Learning استعمال کریں۔

ماخذ: https://dev.to/saba_khan_50d6d6e112c484f/how-i-built-a-browser-side-background-remover-and-benchmarked-canvas-vs-webassembly-5bf2

اختیاری لرننگ کمیونٹی: https://t.me/GyaanSetuAi