# Редактор товарной инфографики в админке inSales на Vue > Полноэкранный Vue-редактор, в котором продавцы собирают инфографику для товаров из шаблонов и с помощью AI. Им пользуются больше 3 000 активных клиентов inSales, AI-операций — 800+ в день. - Адрес: https://anu3ev.com/ru/work/product-image-editor/ - Период: Март 2025 – сентябрь 2026 - Где: inSales - Роль: Отвечал за frontend продукта, интеграцию редактора и API-контракты - Навыки: Vue 3, TypeScript, FabricJS, Complex UI, Composition API, E-Commerce Development, Frontend Architecture, SCSS, Web Application Development, API Integration, AI-Powered Image Editing, Front-End Development - Результаты: - 3 000+: активных клиентов inSales пользуются редактором (по продуктовой аналитике) - 800+: AI-операций в день в редакторе, включая удаление фона и генерацию текста - 2–3 мин: на одни и те же правки для 10 фото товара через массовый перенос вместо 5–10 мин вручную - 2: сценария в продакшене у одного компонента: карточка товара и визуальный редактор сайта ## Задача В карточке товара inSales для работы с фото был только диалог на CropperJS: картинку можно было обрезать, и всё. Инфографику с заголовком, плашками и чистым фоном продавцы делали в другом сервисе, скачивали и загружали обратно. Нужен был редактор, который открывается прямо из карточки и закрывает задачу целиком: собрать картинку, при необходимости обработать её с помощью AI, сохранить проект редактируемым и вернуть готовое изображение в каталог. ## Моя роль Frontend продукта был на мне. Спроектировал архитектуру Vue-приложения, сверстал интерфейс по готовым макетам из Figma, подключил библиотеку редактора и согласовал API-контракты с backend-разработчиком, который делал серверную часть. Ещё писал технические задания и сценарии для QA, добавил трекинг AI-действий в Mixpanel и готовил описания новых функций для поддержки. В команде были продакт, дизайнер, backend-разработчик и тестировщик. Сам canvas работает на [моей отдельной библиотеке на TypeScript и FabricJS](https://anu3ev.com/ru/work/image-editor/). Здесь речь о продукте поверх неё: панели, диалоги, серверные сценарии, лимиты, ошибки и всё, что происходит между кликом и сохранённым товаром. ## Что я сделал ### Два сохранения и два состояния проекта У сохранения две границы. Продавец жмёт «Сохранить» в редакторе, а потом должен сохранить и саму карточку товара. Если он закроет карточку без сохранения, новая картинка не применится. И её редактируемый проект не должен заменить тот, что соответствует опубликованному изображению. Вместе с backend-разработчиком договорились о модели из двух состояний. Сохранение в редакторе создаёт новую версию картинки и кладёт проект в `draft_state`. Сохранение карточки переводит черновик в `origin_state`. Редактор всегда открывает подтверждённое состояние, поэтому брошенная правка не перезапишет то, что продавец действительно опубликовал. ### Разделил корневой компонент по сценариям С новыми функциями корневой диалог разросся примерно до 3 500 строк. Я разнёс логику по 22 composables: сессия и runtime, жизненный цикл изображения, работа с canvas, шаблоны, AI и массовый перенос. Главное ограничение — одновременно живут два редактора: видимый и скрытый, который нужен для массового переноса. Поэтому composables работают с конкретной сессией редактора. Видимый редактор использует одну, массовый перенос создаёт для скрытого свою. Фоновая обработка не может изменить то, что продавец видит на экране. ### Долгие операции с понятными состояниями Сохранение — это цепочка шагов: экспорт, проверка размера, загрузка частями для файлов больше 10 МБ, серверная обработка с polling, итоговый URL и замена фото в галерее товара. На всё уходит примерно 5–10 секунд. Всё это время редактор заблокирован, чтобы продавец не менял версию, которую сервер ещё обрабатывает. ![Редактор во время AI-удаления фона: на изображении индикатор обработки, панель инструментов неактивна](https://anu3ev.com/images/work/product-image-editor/ai-processing-locked-editor.webp) AI-действия устроены так же. Vue ставит редактирование на паузу, показывает прогресс прямо на картинке, опрашивает сервер, затем подставляет результат с прежними размерами и положением и обновляет остаток запросов. Окно запроса для генерации текста сбрасывается при смене выделения: текст, написанный для одного блока, не попадёт в другой. ### Массовый перенос — до 10 изображений за раз Продавец оформляет одну фотографию и переносит композицию на другие фото товара, до 10 за раз, при желании с удалением фона. Для каждой выбранной фотографии скрытый редактор применяет размеры исходного изображения, восстанавливает композицию, сохраняет редактируемый проект и итоговую картинку и очищается перед следующей. ![Режим массового переноса: под исходной композицией выбраны три фото товара, включён переключатель «Cut out the background»](https://anu3ev.com/images/work/product-image-editor/bulk-transfer-select-targets.webp) Отмена тоже должна быть безопасной. Если фото уже в обработке, очередь остановится только после него, а необработанные снимаются сразу. Если исходная композиция изменилась, когда продавец уже выбирает фото, режим переноса закрывается, чтобы не применить устаревшее состояние. ### Один редактор в двух местах продукта Сначала редактор был завязан на медиа товара. Чтобы использовать его в визуальном редакторе сайта, я вынес товарную логику за пределы компонента. Теперь каждое место, откуда открывается редактор, передаёт тип сущности, нормализованные данные изображения, список доступных картинок, обработчик сохранения и рекомендуемые пропорции crop. В визуальном редакторе один экземпляр диалога монтируется на верхнем уровне, а набор функций зависит от контекста: генерация текста по данным товара есть только в карточке, а при правке картинки сайта создаётся новый файл, исходный остаётся как был. ![Тот же редактор, открытый из визуального редактора сайта: обрезка баннера по рекомендуемой пропорции](https://anu3ev.com/images/work/product-image-editor/site-editor-banner-crop.webp) ## Результат - Редактором пользуются больше 3 000 активных клиентов inSales — это данные продуктовой аналитики. - Через редактор проходит 800+ AI-операций в день: быстрое и точное удаление фона, улучшение качества, генерация текста. - Одни и те же правки для 10 изображений вручную занимали 5–10 минут, с массовым переносом — 2–3 минуты. Функция вышла в июле 2026 года. - С сентября 2026 года тот же компонент редактирует картинки в визуальном редакторе сайта, то есть один редактор работает в двух production-сценариях. ## Где попробовать Редактор сделан только для десктопа: проверял его в Chrome, Firefox и Safari на Windows и macOS, а на мобильных кнопка открытия скрыта. Попробовать редактор может любой: зарегистрируйте магазин на inSales, добавьте товар, загрузите фото и откройте редактор из карточки товара в браузере на компьютере. Без регистрации можно попробовать [open-source движок](https://anu3ev.com/ru/work/image-editor/), на котором он работает: открыть [живое демо](https://anu3ev.github.io/image-editor/) или посмотреть [исходный код на GitHub](https://github.com/Anu3ev/image-editor).