Haider Ali
← Back to work

Case study · AI tool

Color Visualization Web App

An AI-powered tool that lets homeowners preview paint colors on their own house photos.

Role

Full-Stack Developer

Stack

Next.js, FastAPI, Meta SAM, MongoDB

Status

Live

View live product →

The problem.

Homeowners can't visualize paint colors from a swatch card. The color looks completely different on a 2cm chip than it does across an entire exterior wall, in different lighting, next to the trim and the roof. Paint companies lose customers to indecision, and contractors spend hours on consultations that don't convert.

Existing tools were either expensive desktop software that required manual masking, or flat-fill web toys that looked fake the moment there was any texture or shadow. The client needed something that felt real, worked on any house photo, and didn't ask the user to do any technical work.

What I built.

A web app where the user uploads a photo of their house. The backend runs Meta's Segment Anything Model against it to detect surfaces automatically — walls, trim, doors, windows, roof — and returns segmentation masks for each. The frontend then lets users click a region and apply a paint color in real time, with rendering that respects the original texture and lighting.

The upload, segmentation queue, status polling, and result display all happen without blocking the UI. The user sees a loading state while SAM chews on the image, then interacts with the result directly. No page reloads, no waiting behind a full-screen spinner.

The technical decisions.

SAM as the segmentation engine because it generalizes to arbitrary surfaces without a custom training pipeline. A model trained on house exteriors would have been more accurate on that narrow case, but it would have broken on anything unusual. SAM handles the long tail.

FastAPI on the backend because Python is where the ML tooling lives, and async because image processing is the bottleneck. Next.js on the frontend because the interaction model needs to stay responsive while the backend works. The two communicate through a lightweight job queue — the frontend submits the image, polls for status, and renders the masks when they're ready.

What I learned.

That you can build genuinely useful AI products without training a single model. The interesting work is the system around the model — how it fits into a user's flow, how you handle the long tail of weird inputs, how you keep the experience fast when the underlying compute isn't. The AI part of this project took a week. The UX work took three.

Stack.

FrontendNext.js, TypeScript, Tailwind
BackendFastAPI, Python, Meta Segment Anything Model
DataMongoDB
InfraVercel (frontend), Railway (backend)