ഞാൻ എങ്ങനെയാണ് ഒരു ബ്രൗസർ-സൈഡ് ബാക്ഗ്രൗണ്ട് റിമൂവർ നിർമ്മിച്ചത്

എനിക്ക് പ്രോസസ്സ് ചെയ്യാൻ 300 ഉൽപ്പന്ന ഫോട്ടോകൾ ഉണ്ടായിരുന്നു. ഒരു Shopify സ്റ്റോറിനായി അവയുടെ ബാക്ഗ്രൗണ്ട് മാറ്റേണ്ടതുണ്ടായിരുന്നു.

പുറത്തിറങ്ങാത്ത ഈ ഫോട്ടോകൾ ഏതെങ്കിലും ഒരു സെർവറിലേക്ക് അപ്‌ലോഡ് ചെയ്യാൻ ഞാൻ ആഗ്രഹിച്ചില്ല. ബ്രൗസറിൽ ലോക്കലായി പ്രവർത്തിക്കുന്ന ഒരു പരിഹാരമാണ് ഞാൻ ആഗ്രഹിച്ചത്.

ഏതാണ് ഏറ്റവും മികച്ചതെന്ന് അറിയാൻ ഞാൻ രണ്ട് വ്യത്യസ്ത രീതികൾ പരീക്ഷിച്ചു.

രീതി 1: Canvas API

ഈ രീതി പിക്സൽ മാനിപുലേഷൻ (pixel manipulation) ഉപയോഗിക്കുന്നു. നിങ്ങൾ ഒരു കോണിൽ നിന്ന് ഒരു നിറം തിരഞ്ഞെടുക്കുന്നു, തുടർന്ന് സമാനമായ എല്ലാ പിക്സലുകളെയും സുതാര്യമാക്കുന്നു (transparent).

• ഗുണങ്ങൾ: അതിവേഗത്തിൽ പ്രവർത്തിക്കുന്നു. ഡൗൺലോഡ് ചെയ്യാൻ അധിക ഫയലുകൾ ആവശ്യമില്ല. മെമ്മറി വളരെ കുറച്ച് മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ. • ദോഷങ്ങൾ: ബാക്ഗ്രൗണ്ടിൽ നിഴലുകളോ (shadows), ഗ്രേഡിയന്റുകളോ (gradients), ടെക്സ്ചറുകളോ ഉണ്ടെങ്കിൽ ഇത് പരാജയപ്പെടും. ഇത് പരുക്കൻ വശങ്ങൾ (jagged edges) ഉണ്ടാക്കുന്നു.

രീതി 2: WebAssembly (WASM) + Machine Learning

ഒരു വ്യക്തിയോ വസ്തുവോ എന്താണെന്ന് മനസ്സിലാക്കാൻ ഈ രീതി ONNX Runtime Web വഴിയുള്ള ഒരു ML മോഡൽ ഉപയോഗിക്കുന്നു.

• ഗുണങ്ങൾ: മുടി, രോമം, സങ്കീർണ്ണമായ വശങ്ങൾ എന്നിവ കൃത്യമായി കൈകാര്യം ചെയ്യുന്നു. ഏത് ബാക്ഗ്രൗണ്ടിലും പ്രവർത്തിക്കും. • ദോഷങ്ങൾ: നിങ്ങൾക്ക് 8MB വലിപ്പമുള്ള ഒരു മോഡൽ ഡൗൺലോഡ് ചെയ്യേണ്ടി വരും. ഇത് കൂടുതൽ CPU-യും മെമ്മറിയും ഉപയോഗിക്കുന്നു.

ഫലങ്ങൾ

ഞാൻ ഒരു MacBook Pro-യിൽ 500 ചിത്രങ്ങൾ പരീക്ഷിച്ചു. അവയുടെ താരതമ്യം താഴെ നൽകുന്നു:

  • Canvas വേഗത: ഓരോ ചിത്രത്തിനും 12-18 ms.
  • WASM വേഗത: ഓരോ ചിത്രത്തിനും 180-220 ms.
  • Canvas കൃത്യത: 500 ചിത്രങ്ങളിൽ 187 എണ്ണം.
  • WASM കൃത്യത: 500 ചിത്രങ്ങളിൽ 412 എണ്ണം.

എന്റെ പരിഹാരം: ഹൈബ്രിഡ് സമീപനം (The Hybrid Approach)

ഇവ രണ്ടും ഉപയോഗിക്കുന്ന ഒരു ടൂൾ ഞാൻ നിർമ്മിച്ചു. ഇത് ആദ്യം Canvas രീതി പരീക്ഷിക്കുന്നു. ബാക്ഗ്രൗണ്ട് വളരെ സങ്കീർണ്ണമാണെങ്കിൽ, ഇത് ML മോഡലിലേക്ക് മാറുന്നു. ഇത് ശരാശരി ഓരോ ചിത്രത്തിനും 40 ms എടുക്കുന്നു.

നിങ്ങൾക്കായുള്ള സാങ്കേതിക ടിപ്പുകൾ:

  • getImageData() ഡാറ്റ GPU-വിൽ നിന്ന് CPU-വിലേക്ക് മാറ്റുന്നതിനാൽ ഇത് കാലതാമസം ഉണ്ടാക്കുന്നു. സമയം ലാഭിക്കാൻ നിങ്ങളുടെ ഓപ്പറേഷനുകൾ ബച്ച് (batch) ചെയ്യുക.
  • 3-5 മടങ്ങ് വേഗത ലഭിക്കാൻ ONNX Runtime-ൽ WebGL ബാക്കെൻഡ് ഉപയോഗിക്കുക.
  • മോഡലുകൾക്കായി 256x256 ഇൻപുട്ട് സൈസ് ഉപയോഗിക്കുക. വലിയ സൈസുകൾ ഉപയോഗിക്കുന്നത് ഉൽപ്പന്ന ഫോട്ടോകൾക്ക് വലിയ ഗുണവും ഇല്ലാതെ പ്രക്രിയ 4 മടങ്ങ് സാവധാനത്തിലാക്കും.

ലളിതമായ ഫോട്ടോകൾക്ക് വേഗത്തിലുള്ള പരിഹാരം വേണമെങ്കിൽ Canvas ഉപയോഗിക്കുക. ഗുണമേന്മയാണ് വേണ്ടതെങ്കിൽ Machine Learning ഉപയോഗിക്കുക.

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

Optional learning community: https://t.me/GyaanSetuAi