Як я створив інструмент для видалення фону на стороні браузера

Мені потрібно було обробити 300 фотографій товарів. Я мав видалити їхній фон для магазину на Shopify.

Я не хотів завантажувати ці ще не опубліковані фото на випадковий сервер. Мені було потрібне рішення, яке працює локально в браузері.

Я протестував два різні методи, щоб побачити, який із них працює найкраще.

Метод 1: Canvas API Цей метод використовує маніпуляцію пікселями. Ви вибираєте колір із кута і робите всі схожі пікселі прозорими.

• Плюси: Надзвичайно швидко. Не потрібно завантажувати додаткові файли. Майже не споживає пам'яті. • Мінуси: Метод не спрацьовує, якщо на фоні є тіні, градієнти або текстури. Створює зазубрені краї.

Метод 2: WebAssembly (WASM) + Machine Learning Цей метод використовує ML-модель через 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. Групуйте операції (batching), щоб заощадити час.
  • Використовуйте WebGL backend в ONNX Runtime для прискорення у 3-5 разів.
  • Використовуйте розмір вхідних даних 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