Разработка сайта для дизайна интерьера: кейс по успешной интеграции ИИ

В январе 2023 года к нам пришла строительная компания ООО «Топстрой». Они запустили новое направление — разработка искусственного интеллекта для генерации дизайна интерьеров —FlyFlat. Этот интересный проект заинтересовал экспертов Технопарка «Сколково» и он получил их грантовую поддержку. Мы в WebCanape уже 5 лет работаем с резидентами этого фонда, поэтому знаем особенности разработки сайтов для инновационных продуктов.

Для реализации проекта перед командой Web Canape были поставлены следующие задачи:

1. Создать лендинг для презентации продукта: разработать дизайн и структуру, которые легко объяснят пользователям возможности нейросети.

2. Разработать личный кабинет: интегрировать нейросети в интерфейс, обеспечить сохранение и управление результатами генераций.

3. Оптимизировать работу с изображениями: решить проблему CORS для корректной загрузки и отображения генерируемых изображений.

4. Интегрировать нейросети в личный кабинет пользователя для генерации интерьеров по запросу, распознавания мебели и предоставления ссылок на покупку в российских интернет-магазинах, редактирования изображений в режиме реального времени.

5. Разработать мультиязычный сайт для международного рынка: создать отдельную версию сайта для Германии с учетом локализации, интегрировать нейросети и обеспечить корректную работу переводчика.

6. Подготовить проект к выходу на рынок b2c и b2b: разработать виджет для интеграции с интернет-магазинами.

• Для презентации продукта мы разработали лаконичный лендинг, который помогает пользователям с первого взгляда понять преимущества сервиса FlyFlat. Для этого мы использовали визуально понятные блоки и акценты.

• Во время проработки дизайна сервиса мы предложили несколько вариантов дизайна в фирменной цветовой гамме клиента, учли пожелания заказчика и несколько раз переработали дизайн, пока не достигли идеального результата.

• Разработали личный кабинет: интегрировали все три нейросети в интерфейс личного кабинета, обеспечив простую регистрацию и интуитивно понятный доступ к функциям сервиса.

• Оптимизировали процесс работы с изображениями: решили проблему CORS, перенаправляя запросы через API сервера, что позволило корректно отображать изображения, настроили эффективное хранение и обработку изображений, обеспечив высокое качество финальных изображений.

• Интегрировали в личный кабинет нейросети: мы обучили и внедрили нейросеть для создания интерьеров, которая работает с запросами пользователей и предлагает реалистичные варианты, реализовали систему распознавания мебели с выдачей релевантных предложений из российских интернет-магазинов, добавили редактор изображений, позволяющий пользователям менять цвета, удалять или добавлять элементы с минимальными усилиями.

• Создали отдельную версию сайта для немецкоязычной аудитории с полной локализацией контента.

• Подключили международную платежную систему Revolut.

• Разработали виджет для интернет-магазинов, который позволяет посетителям создавать интерьеры и сразу подбирать мебель из ассортимента магазина с указанием цены и доступности товаров, настроили платформу для интеграции с крупными строительными компаниями.

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

Ценность FlyFlat для дизайнеров интерьеров в том, что нейросетки клиента ускоряют процесс создания дизайн-проектов и позволяют отказаться от специализированного ПО.

На первом этапе нам нужно было создать лендинг для презентации этих нейросеток. Его задача — на пальцах рассказать пользователям о новых возможностях этого сервиса.

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

Мы переделывали блоки и их расположение, меняли фоны, наполнение. И через несколько итераций удалось получить именно то, что ждал клиент.

Теперь нам совместно с заказчиком предстоял более сложный и амбициозный этап. С его стороны — обучение ИИ, а с нашей — разработка личного кабинета и интеграция в него нейросетей.

После простой регистрации клиент получает доступ к нейросетям, а также возможность сохранять сгенерированные интерьеры. Пользователь вводит промпт-запрос, описывающий, какой интерьер ему нужен. Например, «гостиная в светлых тонах, с серым угловым диваном и квадратным журнальным столиком на колесах». Нейросеть его обрабатывает и генерирует несколько вариантов картинок.

Мы сделали интерфейс сервиса нативно понятным и информативным для пользователя. Спойлер: внешний вид меняли несколько раз. Не всегда то, что казалось нам логичным и стройным, находило отклик у реальных пользователей.

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

Из пользовательских изображений формируется галерея «Лучшие работы». Прямо на главной, даже не регистрируясь, можно оценить качество дизайнов, которые создают на платформе FlyFlat.

Возможность сразу увидеть результат привлекает потенциального клиента, показывает ему профит от использования сервиса.

У наших программистов уже был опыт работы с нейронками, но только в рамках внутренних проектов. А хотелось попробовать ИИ в связке с разработкой сайта, и вот такой случай нам представился.

Одна из сложностей, с которой они столкнулись — сохранение нагенеренных картинок. Обычно мы используем облачное хранилище через набор команд — API — для управления ресурсами. Для сокращения времени выполнения кода, мы сделали их публично доступными, чтобы они были видны как обычные картинки на сайте.

Однако при попытке загрузить готовое изображение возникла ошибка CORS или Cross-Origin Resource Sharing. CORS защищает сайт от несанкционированного доступа, определяя, какие межсайтовые запросы безопасны. Попытки обойти его не давали результатов, даже настройки сервера не помогли.

Чтобы решить эту проблему, мы изменили способ получения изображений. Вместо прямого обращения к ресурсу с сайта, запросы отправлялись через API на стороне сервера, а затем ресурс передавался для отображения пользователю. Таким образом, запросы выглядели как исходящие с того же сайта, и ошибка CORS не возникала.

Но личный кабинет — это лишь верхушка айсберга, то есть только то, что видит пользователь. «Под капотом» — нейросети, которые и воплощают в жизнь пользовательские запросы.

А зачем вообще клиент решил создавать свой ИИ, если нагенерить детскую комнату или спальню можно в той же Midjourney? Вопрос логичный, но есть нюансы.

Специфика ИИ FlyfFat — генерация интерьеров. Поэтому и обучали его на контенте для дизайнеров. Получается, что ответы на запросы пользователей будут точнее, чем при работе с Миджорни или другой универсальной нейросеткой.

Чтобы новый сервис максимально закрывал все потребности дизайнеров интерьеров, клиент разработал три разных нейросети:

• генерация интерьера по описанию или картинке;

• распознавание мебели и других предметов интерьера по фото;

• «редактор» — нейронка, которая корректирует изображение, т.е. меняет цвет предметов, убирает их совсем и т.д.

Когда мы приступали к разработке сайта, нейросети у заказчика были обучены примерно на 30%. Нашим программистам надо было интегрировать каждую из сетей на сайт.

Механика работы первой нейросети аналогична наиболее распространенным и популярным — Dall-e-2 или Stablediffusion. Вы составляете промпт — описание того, что хотите видеть, и нейросеть генерирует ответ.

Выбрать можно все: от планировки и назначения комнаты до желаемого размера готового изображения.

Вы буквально создаете интерьеры комнат мечты. Хотите бабочек и единорогов? Легко. Не знаете, как вписать вольтеровское кресло в спальню? Нейросеть поможет.

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

В чем основная трудность? ИИ долго обучался распознавать то, что изображено. Самый запоминающийся случай — стол с вазой почему-то показался сетке мадагаскарским тараканом.

Были проблемы также с выведением ссылок товаров, которые ИИ находит. Нейросеть искала по всему интернету, то есть в выдачу попадали и зарубежные магазины, например, Ikea или Amazon.

В процессе обучения нейронки и совместной работы с программистами клиента мы прошли путь от тараканов, нерелевантных магазинов и неверных цен до адекватной отработки запроса.

Тот же Амазон в ответах до сих пор проскакивает, но мы настроили фильтр так, что он не выводится. Сейчас пользователь получает корректный список российских площадок, на которых можно купить мебель и предметы интерьера.

Наш клиент нашел зарубежный сайт с искусственным интеллектом, на котором в режиме реального времени можно быстро править любое изображение: менять цвета предметов, что-то убирать или добавлять.

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

Надо было реализовать корректную обработку изображения, которое выводится в личном кабинете. Нейросетка в процессе работы его «ужимает», а нам надо ее снова увеличить и вывести в высоком качестве для пользователя. Наши программисты кропотливо изучили разные библиотеки, чтобы решить эту проблему.

В итоге с помощью различных интерактивных инструментов — кисточки, выделение областей и т.п., пользователь может быстро отметить, что именно и в какой части картинки нужно изменить и получить желаемое в хорошем качестве.

В России популярность ИИ в контексте бизнеса пока еще только набирает обороты. В Европе же разработка таких продуктов — уже не редкость. Поэтому логичным шагом для нашего клиента стал выход на международный уровень.

Анализ рынка показал, что интерес к такого типа сервисам велик. Но важно, что прямых аналогов платформ именно для дизайнеров — нет.

"Мы смотрели на те рынки, где применение искусственного интеллекта в реальном бизнесе высокое, где знают и понимают, как с ним работать. Так же у нас коллега живет в Германии и работает в нашей сфере — нам было немного проще найти точки касания с нашей аудиторией".

© Павел, Генеральный директор

Для Германии мы запустили отдельный сайт, который по функционалу повторяет российский. Настроили интеграцию с европейской платежной системой — Revolute. В дальнейших планах — масштабирование на другие страны Европы.

Очередной вызов — мультиязычность проекта. Как работает нейросеть? Она распознает пользовательский запрос и его интерпретирует.

"Для дальнейшего поиска и уточнения запросов нам был нужен переводчик, который бы без проблем мог «переварить» перевод текста введенного пользователем, соединенного с текстом, полученным от нейросети, и сверху приправленный текстом уточняющих шаблонов. Но как оказалось, далеко не все переводчики пока на это способны". 

© Владлен, backend-программист

Сначала наши специалисты использовали бесплатный Google-переводчик. В обычной жизни мы все им пользуемся, именно он переводит все на сайте или в браузере Google Chrome. Но он не справился, и даже платная версия не работала, как надо.

Перепробовав разные варианты, остановились на переводчике, который сам использовал нейросеть для уточнения перевода — DeepL. Но в ходе работы выяснилось, что на английский язык он переводит хорошо, а вот на немецкий — не совсем корректно, допускает ошибки. А ведь у клиента один из серверов как раз и находится в Германии, и там люди тоже будут вводить запросы.

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

Наш заказчик получил второй этап финансирования от фонда «Сколково» на развитие проекта. И сейчас мы совместно с клиентом работаем над виджетом FlyFlat для интернет-магазинов.

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

Мы сотрудничаем с клиентом уже 2 года и не прекращаем развивать и дорабатывать проект. Все начиналось с разработки лендинга для полуобученной нейросетки. А на сегодняшний день у WebCanape совместно с клиентом получился уникальный, не имеющий аналогов на рынке продукт, который можно успешно использовать в b2c- и b2b-нишах. Более 6 000 зарегистрированных пользователей и запущенный процесс интеграции виджета на сайт компании-застройщика — это подтверждают.

Постоянное тестирование, проверка гипотез помогают оставить только то, что реально находит отклик у пользователей платформы.

Конечно, практически с любой нейронкой можно выстроить работу. Но FlyFlat обучена именно под дизайнеров и конкретно под эту нишу. Любая другая сетка будет искать ответы на запросы пользователя по всему интернету, а эта пойдет только по релевантным источникам.

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

У вас тоже есть нейросеть и вы хотите с ее помощью масштабировать бизнес? Мы знаем, как подружить нейронку и сайт, чтобы получить полезный, приносящий реальную прибыль продукт.