Как вырезать фон из картинки прямо в браузере без серверов и подписок

Каждый раз, когда нужно быстро вырезать фон у фотографии для пет-проекта, карточки товара или аватарки, начинается один и тот же квест. Популярные онлайн-сервисы вроде Remove.bg просят платную подписку после трёх скачиваний, сжимают картинку до размера почтовой марки или требуют авторизацию через Google. К тому же отправлять личные снимки или рабочие макеты на сторонние серверы хочется далеко не всегда.

Недавно я наткнулся на репозиторий cut-it-out от разработчика Suvink. Это опенсорсный инструмент, который делает всё то же самое, но прямо в браузере на машине пользователя. Никаких бэкендов, никаких очередей и нулевые затраты на чужую инфраструктуру.

Что под капотом

Главная фишка проекта заключается в том, что все вычисления происходят на клиенте. В репозитории используется библиотека @imgly/background-removal, которая загружает нейросетевую модель U2-Net через ONNX Runtime в WebAssembly (WASM).

Если раньше для инференса сегментационных сетей обязательно требовался сервер с Python, PyTorch и хотя бы скромной видеокартой, то сейчас стек WASM + WebGL/WebGPU справляется с этим прямо во вкладке Chrome или Firefox.

При первом открытии страницы браузер скачивает веса модели, кэширует их и дальше обрабатывает входящие файлы локально. Данные никуда не улетают. Вы можете отключить интернет на ноутбуке, перетащить в окно картинку, и маска всё равно сгенерируется за пару секунд.

Инструменты для ручной доводки

Нейросети часто ошибаются на сложных границах. Тонкие волосы, прозрачное стекло или полуразмытый фон часто превращаются в рваные края. Создатели CutItOut не стали ограничиваться одной кнопкой «Удалить фон» и добавили несколько полезных инструментов для ручной коррекции:

• Magic Brush (волшебная кисть). Выделяет соседние пиксели по сходству оттенков, что помогает быстро стереть неудачно оставленный кусок заднего плана.
• Режим восстановления с полупрозрачным слоем (Ghost overlay). Когда нейросеть отрезает лишнее, тяжело вернуть нужный фрагмент вслепую. Здесь исходник подсвечивается мягким контуром, поэтому видно, где именно провести кистью.
• Навигация по холсту. Есть зум и панорамирование, чтобы аккуратно подчищать мелкие детали на высоком разрешении.
• Экспорт без сжатия. Готовый результат отдается в PNG с прозрачным альфа-каналом в исходном разрешении, без водяных знаков и таймеров ожидания.

Как развернуть проект у себя

Кодовая база написана на TypeScript и собирается стандартным тулингом фронтенда. Чтобы запустить проект локально или использовать как основу для собственного сервиса, понадобятся Node.js 18+ и npm 9+.

Клонируем репозиторий и переходим в папку:

git clone https://github.com/Suvink/cut-it-out.git
cd cut-it-out

Ставим зависимости:

npm install

Запускаем локальный сервер разработки:

npm run dev

Vite поднимет приложение на http://localhost:5173.

Если хотите задеплоить приложение себе, проект собирается в статику одной командой:

npm run build

Все готовые файлы упадут в директорию dist. Так как бэкенд проекту вообще не нужен, эти файлы можно залить на любой бесплатный хостинг статики вроде Vercel, Netlify или GitHub Pages. Никаких контейнеров с Docker, переменных окружения с API-ключами или настроек очередей Celery поднимать не придется.

Зачем этот проект разработчикам

Код CutItOut интересен сразу с двух сторон.

Во-первых, это удобная готовая утилита для личного пользования. Её можно запустить на домашнем сервере или держать в закладках, чтобы не платить за коммерческие аналоги, когда нужно подготовить пару десятков картинок.

Во-вторых, проект отлично иллюстрирует подход edge-вычислений во фронтенде. Если вы строите приложение, где пользователи загружают аватарки или фотографии товаров, перенос сегментации на клиент экономит приличные деньги. Вместо того чтобы оплачивать инстансы с GPU в облаке, вы перекладываете работу на процессор пользователя. В репозитории можно посмотреть, как автор организовал работу с канвасом, масштабированием и интеграцией WASM-библиотеки в интерфейс.

CutItOut — аккуратный и честный проект под лицензией Apache 2.0. Он решает конкретную бытовую проблему и наглядно показывает, до какого уровня доросли возможности браузерного машинного обучения. Звёзд у проекта пока не так много, но код чистый, понятный и легко адаптируется под собственные задачи.