Кейс ТопСтрой: внедрение ИИ на сайт компании по дизайну интерьеров

Можно ли использовать нейросети для достижения реальных бизнес-результатов?

Да! И кейс агентства WebCanape и проекта FlyFlat — отличный пример. Рассказываем, как интегрировали ИИ на сайт клиента и каких результатов достигли.

Клиент и его проект

В январе 2023 года к нам обратилась компания ООО «Топстрой» с запросом на разработку сайта для их проекта, получившего грант Технопарка «Сколково».

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

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

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

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

Как работает сервис

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

Мы разработали интерфейс так, чтобы он был максимально простым и понятным. Поэтому первоначальный внешний вид мы перерабатывали несколько раз.

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

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

Блок наглядно демонстрирует возможности сервиса и вдохновляет потенциальных клиентов на использование FlyFlat.

Этапы разработки

Лендинг

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

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

Итоговый лендинг стал простым, информативным и привлекательным.

Личный кабинет

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

Для интерфейса мы выбрали минималистичный стиль, чтобы не отвлекать пользователей обилием кнопок и деталей.

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

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

Интеграция нейросетей

Подключение нейросетей стало одним из самых сложных этапов. У клиента было три модели ИИ, обученные примерно на 30%.

Нам нужно было внедрить их на сайт и обеспечить стабильную работу. Каждая нейронка выполняет свою определенную функцию.

• Генерация интерьеров

Пользователь вводит текстовый запрос, описывающий, что он хочет видеть в комнате: «Детская в зеленых тонах, с двухъярусной кроватью и игровыми зонами для двух детей».

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

• Распознавание мебели

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

• Редактирование изображений

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

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

Одной из главных трудностей стало сохранение изображений, сгенерированных нейросетями.

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

Выход на международный рынок

Для выхода на европейский рынок мы разработали сайт для аудитории, говорящей по-немецки.

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

Google Translate и DeepL хорошо справлялись с запросами на английском языке, а с немецким возникли сложности.

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

Виджет с ИИ

В 2024 году сервис FlyFlat получил второй этап финансирования от фонда «Сколково», что позволило начать работу над виджетом для интеграции с интернет-магазинами.

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

Это увеличивает вовлеченность клиентов и стимулирует интерес, а значит и продажи.

Результаты проекта

Проект FlyFlat — успешный пример применения нейросетей для решения практических задач.

На данный момент более 6 000 пользователей зарегистрировались на платформе, что подтверждает интерес аудитории.

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

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

Этот проект — яркий пример того, как технология ИИ из игрушки постепенно превращается в эффективный бизнес-инструмент.