DEV Community

高赫阳
高赫阳

Posted on

How I Built an AI Room Design Tool That Turns One Photo Into a Before-and-After Video

AI room design tools are everywhere now, but most of them stop at one thing:

Upload a room photo → generate another room photo.

I wanted to build something slightly different.

Instead of only showing a redesigned image, I wanted users to see the transformation as a short before-and-after video.

That idea became RoomFacelift.

👉 https://roomfacelift.com

What RoomFacelift does

The workflow is simple:

  1. Upload a photo of your room
  2. Choose the room type
  3. Pick an interior design style
  4. Decide how much of the room can change
  5. Generate a redesigned version
  6. Turn the original and redesigned images into a transformation video

The goal is to make AI room design feel less like generating a random image and more like visualizing an actual renovation.

Keeping the original room recognizable

One of the hardest problems was not image generation itself.

It was preservation.

AI models often change things users do not want changed:

  • camera angle
  • windows
  • doors
  • TVs
  • wall geometry
  • visible floor area
  • room proportions

For a room redesign tool, that can make the result feel fake.

So I added two design modes.

Keep Layout

This mode tries to preserve:

  • viewpoint
  • camera height
  • framing
  • perspective
  • room geometry
  • major architectural elements

The AI mainly changes furniture, materials, lighting, decoration, and interior style.

Reimagine Space

This mode gives the model more freedom to redesign the room while still trying to keep the same camera position and overall identity.

That distinction turned out to be important because different users want very different levels of transformation.

Interior styles

RoomFacelift currently supports styles such as:

  • Modern
  • Scandinavian
  • Japandi
  • Mid-century Modern
  • Industrial
  • Bohemian
  • Luxury
  • French Country
  • Minimalist
  • Art Deco
  • Coastal
  • Farmhouse
  • Mediterranean
  • Contemporary
  • Traditional

Instead of relying only on the style name, each style is backed by a more structured design recipe.

That helps make the generated results more consistent.

The technical stack

The application is built with:

  • Next.js
  • TypeScript
  • Supabase
  • fal.ai
  • Cloud storage
  • Google Cloud Run
  • FFmpeg
  • Waffo for payments

The basic generation pipeline looks like this:


text
User photo
   ↓
Private storage
   ↓
AI redesigned image
   ↓
Before + After frames
   ↓
Image-to-video generation
   ↓
Watermark processing
   ↓
Final transformation video
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
topstar_ai profile image
Luis Cruz

It's fascinating how you tackled the challenge of preserving the original room's identity while allowing for redesign flexibility. The distinction between "Keep Layout" and "Reimagine Space" is a clever solution, as it caters to varying user preferences, which can make or break user satisfaction in design tools. Have you considered implementing user feedback loops to further refine the AI's understanding of preservation versus transformation? If you need additional support refining the video generation process or enhancing user feedback integration, I’d be happy to explore a paid collaboration.