The demo has two rooms. Scandi starts empty: tap a spot to add a sofa, table, plant or rug, then change its style, colour, size and shadow. Sage is a finished photo, which is where most real products start, and it shows the AI step that turns one picture into pieces you can edit. Live AI calls are switched off in this public version.
Where this pattern fits
A room visualizer is one case of a wider product: a visual customizer that places a real catalogue into a real scene and lets the buyer change one thing at a time. The same structure serves:
- furniture and decor retailers showing a sofa in the buyer's own living room
- interior design and renovation apps comparing styles side by side
- real estate platforms staging empty listings
- kitchen, flooring, wallpaper and paint brands swapping one surface at a time
Each of these is a scene, a set of spots in it, and a library of items that fit those spots. Polotno handles the canvas. The library and the scene are your data.
Your catalogue drives the library
Businesses that want a visualizer usually own the content already: catalogue photos, supplier packshots, 3D renders. The library grows from that material with no code changes. For each item, the pipeline:
- cuts the product out of its photo with background removal
- records the spot it belongs to and its size there, so it lands at the right scale
- builds a colour mask once, marking the parts that take a colour (fabric) and the parts that keep their own (legs, piping, throw pillows)
- stores it as a row in your database
The visualizer reads rooms and items as data, so 50 pieces and 50,000 run on the same code. New items can arrive from a product feed, from your team, or from an image model.
Colour runs in the browser without AI. The item keeps its own folds, creases and sheen and only the hue changes, so one photo covers a whole palette. Each sofa in the demo has nine colours from a single image, and switching takes under a second.
Layer separation – from a photo to editable pieces
Most scenes start as one flat photo: a listing shot, a customer's own room, an AI render. To edit it piece by piece, the photo has to become layers. Three kinds of model do that work:
- Layer decomposition splits an image into a background plus one layer per object. The demo used ByteDance Seedream 5 Pro, which returned the empty room, both sofas, the table, the rug and the plant from one call in about 90 seconds. Asking for the rug and the plant by name mattered: a generic request left them in the background.
- Segmentation finds the exact pixels of a named object, such as "pillow" or "blanket". Grounded SAM produced the colour masks here.
- Inpainting paints in what was hidden behind an object, so removing a sofa leaves a believable wall and floor.
The same steps let users bring their own background: upload a photo of their room, separate it, then place catalogue items into it. That is the step behind the Separate layers button in the Sage room.
How the demo was made
- The room was generated with Flux 1.1 Pro Ultra in raw mode, then split with Seedream 5 Pro layer decomposition.
- The extra styles came from an edit model working on the room photo itself: "replace this sofa with a grey loveseat on black metal legs". We ran the same instruction through six models (Flux Fill Pro, Flux Kontext Max, GPT Image, Qwen Image Edit, Seedream and Nano Banana Pro). Nano Banana Pro kept the original camera angle and daylight best and made all eight variants. Each one was cut out with background removal, so it already matches the room's perspective.
- Colour masks combine Grounded SAM (pillows, throws) with a shape rule for legs: the narrow rows under the seat.
- Shadows are Polotno's built-in drop shadow, set per piece.
All models ran through Replicate. In production they sit behind your own backend, with your own keys and your own spending limits.
Known limits
- A photo fits one spot. A photographed sofa matches the camera angle and distance it was shot at. Swapping, recolouring and resizing in place look right. Dragging it across the floor does not, because the real object would turn and shrink as it moved. Free placement needs 3D models of the room and the items, or an AI re-render of the area after each move.
- Each room needs its own renders. An item photographed for one room looks pasted in a room shot from a different angle. Assets multiply with rooms: 8 rooms × 8 spots × 10 models is 640 images before materials.
- AI variants drift. An edit model redraws the whole object, so "the same sofa in yellow" loses details like a throw or the colour of the legs. Exact catalogue items should come from product photos. AI works for exploration and for filling gaps.
- Separation removes contact shadows. The shadows furniture casts on the floor go with the object. Recovering them as movable layers looked wrong once a piece moved, so the demo uses soft drop shadows instead.
- Tinting has a range. Light, matte fabrics recolour well. Dark wood can't become light wood, and glossy or patterned materials need their own photo.
What Polotno does here
The canvas, layers, selection and resize handles, undo and redo, zoom and export all come from Polotno SDK. A room is one JSON document, so it can be saved, shared, and rendered to an image on your server. The panels, cards and markers around the canvas are plain React, styled to fit the product. The editor runs in a WebView, so the same build ships inside iOS and Android apps.
