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:

1. Frontend SPA application
2. 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
• email
• 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:

1. connecting to PostgreSQL
2. AI API
3. 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

1. The user uploads a photo
2. Selects the number of floors
3. Selects materials
4. Starts generation
5. Receives the result
6. 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

Related projects: AiFront mobile app