AI visualiser for building facades
About the project
AiFront is an AI platform for visualising building facades, allowing users to upload a photo of a house and receive a realistic visualisation of the future finish using artificial intelligence.
The project was developed as a SaaS solution for the construction and finishing materials market. The main goal is to reduce decision-making time and increase conversion to the purchase of facade materials.
Target audience
- Homeowners planning to renovate or reconstruct their facades
- Architects and exterior designers
- Construction companies
- Manufacturers and dealers of facade materials
Solution architecture
AiFront consists of two key components:
- Frontend SPA application
- Backend REST API + CLI tool
Frontend architecture
Technology stack
- React + TypeScript
- React Router (Data Mode Pattern)
- Tailwind CSS v4
- Lucide React
- Motion (Framer Motion)
- SPA architecture
Application structure
Main sections:
- Landing page
- Visual editor
- Personal account
- Project gallery
Two-column editor architecture
ControlPanel (left panel)
- Image upload (drag-and-drop)
- Editable project name with auto-save
- Floor configuration
- Zone marking tools
- Materials catalogue
- AI generation launch
PreviewArea (right area)
- Image preview
- Zone rendering
- Final AI result
AI generation logic The generation process includes:
- Image preparation
- Area processing
- Sending a request to the AI API
- Receiving the result
- Preview + saving
Support for two providers:
- Gemini API
- OpenAI Images API (optional)
Backend architecture
Purpose REST API for:
- Registration/authorisation
- Project management
- Image generation
- History storage
A separate CLI version without a database has been implemented.
Backend technology stack
- Go 1.23
- Chi Router
- PostgreSQL
- JWT
- Gemini API
- OpenAI Images API (optional)
Two operating modes
HTTP API (cmd/server)
Environment variables:
- GEMINI_API_KEY
- DATABASE_URL
- JWT_SECRET
- OPENAI_API_KEY (optional)
CLI (main.go)
Flags: -api-key -prompt -images -output -format -combine -layout
CLI allows you to use AI generation autonomously.
API structure
Public routes
- POST /api/auth/register
- POST /api/auth/login
Protected routes
- 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
Format: multipart/form-data Fields:
- image
- prompt
- provider (gemini / openai)
- generation parameters
Support:
- aspect ratio control
- retry logic
- preview of results
- file size limits
- image type control
Data model
User
- UUID
- password hash
- created_at
Project
- UUID
- user_uuid
- name
- status
- original_image
- generated_image
- created_at
- updated_at
Project statuses:
- draft
- processing
- completed
- failed
Infrastructure
Docker
The configuration is located in .docker/dev/. Environment variables are passed for:
- connecting to PostgreSQL
- AI API
- JWT
Technical advantages
Performance
- Image loading optimisation
- Lazy loading
- Minimisation of re-rendering
- Effective state management
Semantics and SEO
- HTML5 semantics
- Accessibility (ARIA)
- Optimised DOM structure
Scalability
- Clean modular architecture
- Separation of logic and UI
- Horizontal API scaling capability
- Support for multiple AI providers
Tech Indigo design system
- Main colours: Indigo / Violet
- Gradient CTAs
- Rounded corners
- Depth through shadow
- Smooth animations
Compliance with accessibility and high readability principles.
UX scenario
- The user uploads a photo
- Selects the number of floors
- Selects materials
- Starts generation
- Receives the result
- Saves the project
The process is intuitive and requires no training.
Future development
- Real integration of advanced AI models
- 3D visualisation
- Export to high resolution
- Cost calculator
- Cloud storage
- Social functionality
Result
AiFront is a fully functional AI platform that demonstrates:
- modern frontend architecture
- high-performance Go backend
- flexible AI integration
- well-thought-out UX logic
- readiness for SaaS scaling
The project confirms Piplos Media's expertise in developing full-cycle AI products.
