Generative AI / Full-Stack2025–2026

Artika Studio

Upload a room photo, then generate, recolour and photorealistically place framed artwork on the actual wall — with size recommendations and an exportable placement report.

Role: Architect & sole engineer

Next.js 14TypeScriptPostgreSQLpgvectorsharpReplicateOpenAI GPT-4o VisionDocker Compose

The application

Screens, captured from the running app

Captured by driving the ten-step flow end to end with no API keys configured — the room analysis is really computed, the generated pieces are the bundled fallbacks, and the app labels which is which.

Artika room analysis showing an extracted eight-colour palette with hex values, detected wall region and interior style tags. — Room analysis. The palette is genuinely computed from the photo by sharp — it runs with no API keys at all, and the UI says so rather than pretending.

Four ways to add artwork: use my own, recolour mine, from inspiration, or from an idea. — Four routes in: bring a piece, recolour a piece, or generate one.

Two generated interpretations of the same prompt, side by side. — Two interpretations rather than one. Choosing between options is a much easier judgement than approving a single result.

Placement studio with the artwork composited onto the detected wall, frame style and preview mode controls. — The placement studio. The art is a separate layer over the untouched room photo — the room is never regenerated.

The same artwork rendered on the wall at three sizes with centimetre dimensions and a recommendation. — Three sizes on the actual wall, in centimetres, with the balanced one recommended from the wall's own dimensions.

Exportable placement report showing the final composition with PNG and PDF download options. — The exportable placement report — the artifact the customer actually leaves with.

The problem

Buying art for a wall is a guess. People want to see the piece in the room, at the right size, in colours that don't fight the sofa — and every tool that promises this either pastes a rectangle onto a photo with no regard for perspective, or requires a designer.

What it does

A ten-step flow, S0 through S10, driven by a client-side state machine:

Room analysis — server-side palette and accent-colour extraction, plus wall detection.
Generation — two candidate artworks, from a prompt or a reference.
Recolouring — pulling the piece toward the room's palette without flattening it.
Placement — drag and resize on the detected wall, with size recommendations derived from the wall's dimensions.
Refinement — a chat loop for adjustments.
Report — an exportable placement summary.

The architectural decision I'd repeat

A provider abstraction that degrades instead of failing.

lib/ai.ts calls live models — FLUX 2 Pro, Kontext, Fill, Real-ESRGAN via Replicate, GPT-4o Vision via OpenAI — when API keys are present. When they aren't, it transparently falls back to bundled sample assets and flags every result as live or mocked.

The consequence: the entire ten-step pipeline runs end to end with zero credentials. Anyone can clone it and see the whole product work. Reviewers don't need a budget. Local development doesn't burn inference spend on a UI tweak. And because each result declares its own provenance, there's no risk of a demo silently passing off a sample as a generation.

The other half of that decision is that the cheap parts stay real even in fallback mode: room palette and accent extraction run server-side through sharp with dominant-colour quantization, so the colour story is genuinely computed from the user's photo whether or not any model is reachable.

Similar-piece recommendations

CLIP embeddings over a pgvector index, cosine similarity for retrieval. Postgres and pgvector run under Docker Compose alongside the app, so the vector store is part of the local environment rather than a hosted dependency.

Stack notes

Next.js 14 App Router with React 18 and TypeScript; clean POST JSON routes with explicit live/mocked flags in every response; sharp for image processing; Postgres + pgvector for embeddings; Docker Compose for local infrastructure; deployed on Vercel.