AI-визуализатор фасадов домов

Целевая аудитория

• Домовладельцы, планирующие ремонт или реконструкцию фасада
• Архитекторы и дизайнеры экстерьеров
• Строительные компании
• Производители и дилеры фасадных материалов

Архитектура решения

AiFront состоит из двух ключевых компонентов:

1. Frontend SPA-приложение
2. Backend REST API + CLI-инструмент

Frontend архитектура

Технологический стек

• React + TypeScript
• React Router (Data Mode Pattern)
• Tailwind CSS v4
• Lucide React
• Motion (Framer Motion)
• SPA-архитектура

Структура приложения

Основные разделы:

• Лендинг
• Визуальный редактор
• Личный кабинет
• Галерея проектов

Двухколоночная архитектура редактора

ControlPanel (левая панель)

• Загрузка изображения (drag-and-drop)
• Редактируемое название проекта с автосохранением
• Настройка этажности
• Инструменты разметки зон
• Каталог материалов
• Запуск AI-генерации

PreviewArea (правая область)

• Предпросмотр изображения
• Отрисовка зон
• Финальный AI-результат

AI-логика генерации Процесс генерации включает:

• Подготовку изображения
• Обработку зон
• Отправку запроса в AI API
• Получение результата
• Превью + сохранение

Поддержка двух провайдеров:

• Gemini API
• OpenAI Images API (опционально)

Backend архитектура

Назначение REST API для:

• регистрации / авторизации
• управления проектами
• генерации изображений
• хранения истории

Отдельно реализована CLI-версия без базы данных.

Технологический стек backend

• Go 1.23
• Chi Router
• PostgreSQL
• JWT
• Gemini API
• OpenAI Images API (опционально)

Два режима работы

HTTP API (cmd/server)

Переменные окружения:

• GEMINI_API_KEY
• DATABASE_URL
• JWT_SECRET
• OPENAI_API_KEY (опционально)

CLI (main.go)

Флаги: -api-key -prompt -images -output -format -combine -layout

CLI позволяет использовать AI-генерацию автономно.

API структура

Публичные маршруты

• POST /api/auth/register
• POST /api/auth/login

Защищённые маршруты

• GET /api/me
• POST /api/generate
• CRUD /api/projects
• GET /api/projects/{id}/result
• GET /api/projects/{id}/history
• POST /api/projects/{id}/reset

POST /api/generate

Формат: multipart/form-data Поля:

• изображение
• prompt
• provider (gemini / openai)
• параметры генерации

Поддержка:

• контроль пропорций
• retry-логика
• превью результата
• лимиты размера файлов
• контроль типов изображений

Модель данных

User

• UUID
• email
• password hash
• created_at

Project

• UUID
• user_uuid
• name
• status
• original_image
• generated_image
• created_at
• updated_at

Статусы проекта:

• draft
• processing
• completed
• failed

Инфраструктура

Docker

Конфигурация расположена в .docker/dev/. Передаются переменные окружения для:

1. подключения к PostgreSQL
2. AI API
3. JWT

Технические преимущества

Производительность

• оптимизация загрузки изображений
• lazy loading
• минимизация перерендеров
• эффективное управление состоянием

Семантика и SEO

• HTML5 семантика
• доступность (ARIA)
• оптимизированная структура DOM

Масштабируемость

• чистая модульная архитектура
• разделение логики и UI
• возможность горизонтального масштабирования API
• поддержка нескольких AI-провайдеров

Дизайн-система Tech Indigo

• Основные цвета: Indigo / Violet
• Градиентные CTA
• Rounded corners
• Глубина через shadow
• Плавные анимации

Соответствие принципам accessibility и высокой читаемости.

UX-сценарий

1. Пользователь загружает фото
2. Выбирает Этажность
3. Выбирает материалы
4. Запускает генерацию
5. Получает результат
6. Сохраняет проект

Процесс интуитивен и не требует обучения.

Будущее развитие

• Реальная интеграция продвинутых AI-моделей
• 3D-визуализация
• Экспорт в high-resolution
• Калькулятор стоимости
• Облачное хранение
• Социальный функционал

Связанные проекты: AiFront мобильное приложение