В рамках проєкту розроблено веб-інструмент для точного виділення об'єктів на зображеннях з подальшим видаленням та видаленням зі сцени. Рішення орієнтоване на практичні завдання: підготовка зображень, автоматизація контенту та використання інших систем (конфігуратори, каталоги, генерація).
Користувач виконує одну дію – виділяє область навколо об'єкта. Виділення може бути як прямокутним, і довільної форми (через точки).
Вся подальша обробка – сегментація, очищення маски, вилучення об'єкта та відновлення фону – відбувається автоматично на backend.
Завдання проєкту
Потрібно було реалізувати не просто вирізання об'єкта, а повний цикл роботи зі сценою:
- точна сегментація без ручної розмітки
- отримання pixel-level маски
- вилучення об'єкта без втрати геометрії
- видалення об'єкта з відновленням фону
- повернення готових результатів без додаткової обробки
Ключова вимога – мінімальний UX (без пензлів, без ручної корекції) за збереження точності результату.
Практичне застосування та реальні кейси
- На практиці цей інструмент використовується не як окремий редактор, а як частина робочих процесів – там, де важливо швидко та точно працювати із зображеннями.
- E-commerce (товари та каталоги)
Фото товару → виділення → система автоматично вирізує об'єкт та прибирає фон.
👉 На виході – готове зображення для картки без ручної обробки. - Інтер'єри та нерухомість
Видалення меблів, предметів чи візуального шуму зі сцени.
👉 Дозволяє показувати “чистий простір” та готувати зображення до продажу чи візуалізації. - Вилучення людей з фото
З фотографій автоматично забираються перехожі, клієнти, співробітники чи випадкові люди у кадрі.
👉 Використовується для:
— очищення інтер'єрів та вітрин
— підготовки фото для сайтів та каталогів
— маркетингових матеріалів без "шуму" - Конфігуратори (двері, меблі, товари)
Об'єкт виділяється як один шар → далі можна змінювати колір, матеріали, текстури.
👉 Це основа для інтерактивних конфігураторів. - Контент та маркетинг
Об'єкт видобувається та використовується у різних креативах, банерах, лендингах.
👉 Швидке виробництво візуалу без фотосесій. - Масова обробка зображень
Робота з каталогами та великими обсягами контенту.
👉 Суттєве скорочення часу та витрат.
UX / сценарій користувача
Flow максимально спрощений:
- Користувач завантажує зображення
- Виділяє об'єкт:
— або прямокутником (bounding box)
— або довільною формою через точки - Натискає «Обробити»
- Отримує результат
Чому такий підхід
- можна швидко виділити об'єкт через bbox
- при необхідності – точно задати межі через точки
- підходить для запуску SAM
- знижує поріг входу та дає гнучкість для складних випадків
Як працює система
Коли користувач завантажує зображення та виділяє об'єкт прямокутником, на backend йде дві речі:
- саме зображення
- координати виділеної області
Технічно це виглядає так:
{
"image": file,
"bbox": [x1, y1, x2, y2]
}
Тобто система отримує не «готовий об'єкт», а просто підказку – де його шукати приблизно
Що відбувається далі (pipeline)
Далі запускається послідовне оброблення зображення. Важливо: це не один крок, а кілька етапів, кожен із яких вирішує своє завдання.
1. Підготовка зображення
Спочатку backend наводить дані у нормальний вигляд:
- зображення декодується
- наводиться до потрібного формату та розміру
- перевіряється, що виділення користувача коректне
Це потрібно, щоб модель далі працювала стабільно і без помилок.
2. Визначення об'єкта (сегментація)
Далі підключається модель SAM2.
Що вона робить за фактом:
- дивиться на область, яку виділив користувач
- «розуміє», де в ній реальний об'єкт
- відокремлює об'єкт від фону
На виході виходить точна маска, де:
- біле – це об'єкт
- чорне – це все інше
Важливо:
це не просто прямокутник, а точне виділення за формою – з урахуванням усіх згинів, деталей та контурів.
3. Очищення маски
Після моделі маска не ідеальна, тому її допрацьовують:
- забираються дрібні «сміттєві» пікселі
- згладжуються краї
- перевіряється, щоб об'єкт був цілісним
Навіщо це потрібно?
якщо цього не зробити, об'єкт буде з рваними краями або зайвими шматками фону.
4. Вирізання об'єкта
Тепер, коли є точна маска, об'єкт акуратно відокремлюється від зображення.
Технічно це робиться так:
object = image * mask
На практиці це означає:
- залишається лише сам об'єкт
- фон стає прозорим
Що важливо:
- розмір об'єкта не змінюється
- пропорції зберігаються
- становище не «з'їжджає»
На виході виходить готовий PNG, який можна використовувати.
5. Видалення об'єкта зі сцени
Паралельно система робить другу операцію – прибирає об'єкт із вихідного зображення.
Створюється "порожнє місце" там, де був об'єкт:
hole = image - mask
Але просто видалити – замало. Потрібно відновити тло.
6. Відновлення тла (inpainting)
Для цього використовується модель LaMa.
Що вона робить:
- аналізує, що знаходиться навколо віддаленого об'єкту
- «Домальовує» недостатню ділянку
- відновлює текстуру
Найкраще це працює на:
- стінах
- підлозі
- однотипних текстурах
В результаті не залишається "дірки" – зображення виглядає цілісним.
7. Що отримує користувач
У результаті система повертає відразу два результати:
{
"original": "...",
"object": "...",
"clean": "..."
}
Де:
- object – вирізаний об'єкт без фону
- clean – зображення без цього об'єкту
І це вже готові файли, які можна використати далі без доопрацювання.
Як це влаштовано технічно
Frontend
- Vue 3
- Canvas
Canvas використовується не як основний рендеринг, а як допоміжний інструмент:
- для виділення області на зображенні
- для фіксації координат (точок), вибраних користувачем
- для спрощення передачі цих даних у обробку
У цьому випадку Canvas не працює із самим зображенням безпосередньо, а служить шаром взаємодії – збирає точки, якими визначається область інтересу.
Як це працює
- Користувач виділяє область на зображенні
- Через Canvas фіксуються координати обраної зони
- Ці дані передаються в модель сегментації ( SAM2 )
- Модель повертає маску об'єкту
- Маска накладається поверх оригінального зображення другим шаром
- В результаті, користувач бачить контур/область, яку визначила модель
Backend
- Python
- відповідає за весь pipeline
- обробляє зображення
- викликає AI-моделі
AI-частина
- SAM 2 – виділяє об'єкт
- LaMa – відновлює фон
Весь процес розбитий на етапи:
- сегментація
- вилучення
- відновлення
Це важливо, тому що:
- можна міняти моделі
- можна масштабувати систему
- можна покращувати окремі частини
Що важливо у реалізації
- Це не просто "вирізати картинку"
Система реально розуміє де об'єкт, а не просто обрізає прямокутник. - Об'єкт зберігає геометрію
Його можна вставити або використовувати далі без спотворень. - Мінімум дій від користувача
Не потрібно обводити контур – достатньо виділити область. - Працює без навчання під завдання
Не потрібно збирати датасет під кожен тип товару.
Продуктивність
Залежить від:
- розміру зображення
- складності об'єкта
- завантаженості сервера
Як це виглядає насправді:
- прості об'єкти – швидко
- складні сцени – трохи довше, але стабільно
Обмеження
Є ситуації, де результат може бути гіршим:
- об'єкт зливається з фоном (низький контраст)
- кілька об'єктів перетинаються
- дуже складні текстури (дрібні деталі)
Як можна використовувати інструмент
Поточна версія вирішує базове завдання – точне виділення, вилучення та очищення сцени. Але архітектура спочатку закладена те щоб цей інструмент був кінцевим продуктом, а ядром інших рішень.
Практичне використання
- Підготовка контенту для e-commerce
— Автоматична вирізка товару з фото
— Підготовка зображень для карток
— Очищення фону без дизайнера - Генерація каталогу
— Один вихідник → різні варіанти подачі
— Перенесення об'єкта на інші фони
— Складання візуалів без фотосесій - Очищення сцен
— Видалення зайвих об'єктів (меблі, предмети)
— Підготовка «чистих» інтер'єрів
— робота з real-life фото - Основа для конфігураторів
- Виділений об'єкт можна використовувати як шар
- далі – міняти колір, матеріали, текстури
- Інтеграція з 2D/3D конфігураторами - Підготовка даних для AI
— Сегментовані об'єкти → вхід для генеративних моделей
— Навчання / fine-tuning
— Створення датасетів
Як можна доопрацьовувати
Архітектура дозволяє збільшувати функціональність без переписування системи.
Auto-detection (без bbox)
Наразі користувач задає область вручну.
Наступний крок – автоматичне визначення об'єктів на сцені:
- список об'єктів
- вибір кліком
- робота як із «розумною сценою»
Batch processing
Обробка не одного зображення, а пачки:
- завантаження каталогу
- масова сегментація
- автоматичне вивантаження
Актуально для e-commerce та production.
Інтеграція з генеративними моделями
Після сегментації можна:
- міняти матеріали та кольори
- генерувати варіації
- створювати нові сцени
Тобто перетворювати інструмент на повноцінний AI-конфігуратор.
Робота з 3D/depth
Додавання depth-аналізу:
- розуміння глибини сцени
- коректна вставка об'єктів
- перехід до 3D-конфігурації
Інтеграція у бізнес-процеси
— CRM (передача зображень)
— CMS (керування контентом)
— e-commerce (картки товарів)
Інструмент стає частиною pipeline, а не окремим сервісом.
Поліпшення точності
— Дообробка масок
— Гібридні моделі сегментації
— Адаптація під конкретні категорії (меблі, одяг і т.д.)
Результат
Реалізовано інструмент, який:
- точно виділяє об'єкт без ручної розмітки
- витягує його без втрати геометрії
- видаляє об'єкт із коректним відновленням фону
- повертає готові дані для подальшого використання
По суті, це базовий шар для будь-яких систем, де потрібно працювати із зображенням як із структурованою сценою, а не як із «картинкою».
Бажаєте впровадити такий інструмент?
Розробимо рішення під ваші завдання: від базової сегментації до повної інтеграції до сайту, CRM або e-commerce.
Покажемо, як це працюватиме саме у вашому кейсі та які завдання закриє.
👉 Залишіть заявку – розберемо завдання та запропонуємо реалізацію під ваш бізнес
