A product photo and a background reference look simple enough as inputs. Turning them into a coherent scene introduces a more interesting problem: deciding what should stay fixed, what can change, and how much control the interface should expose.
I'm building Tancky AI, a browser-based AI photo workspace. Its image combiner lets you upload up to four reference images and describe the composition you want to create. This post shares the workflow and a few implementation choices behind the product.
An example from the product website. Generated results vary with the source images and instructions.
1. Give every reference image a job
A useful composition brief answers three questions:
- Which image contains the subject to preserve?
- Which image defines the setting?
- What relationship should the final image show?
For a product scene, a starting prompt might be:
Use the bottle in image 1 as the main subject. Place it on the surface in image 2, slightly right of center. Keep the bottle shape and label layout. Match the scene's soft light and add a subtle contact shadow. Leave empty space on the left for a headline. Do not add text or extra products.
This is a prompt to experiment with, not a guarantee of exact preservation. Small labels, logos, reflections, and object proportions still need close inspection.
The same structure works for furniture staging: identify the furniture reference, identify the room, specify placement, and list the room details that should remain unchanged.
2. Make the first interaction concrete
The combiner puts image uploads and the prompt together in the main workspace. It accepts JPG, PNG, and WebP files, with up to four images and a 16 MB limit per image.
It also offers presets for group portraits, portrait backgrounds, and furniture staging. These give users an initial composition to work from when a blank prompt field would leave too many decisions open.
A practical review loop is:
- Choose clear references with compatible camera angles.
- Describe one composition and the details to preserve.
- Generate and inspect the result at full size.
- Change one instruction before trying another variation.
For product work, I would check label text and shape before using an output publicly. For portraits, I would check facial details, hands, and the relative scale of each person.
3. Keep related tools on a shared foundation
Tancky AI uses React, TypeScript, and TanStack Start. Its tool pages share a rendering template, while each page supplies its own configuration, content, and FAQs.
The page configuration describes its route, workspace type, available models, credit costs, and listing information. Shared code uses that information for navigation, metadata, and the generation options shown to users.
This matters as the product grows. A couple-photo workflow and an image extender need different instructions and controls, while still benefiting from consistent page structure and result handling.
The project also runs a page validation step before builds. It checks details such as duplicate slugs, missing assets, missing translations, and incomplete pricing configuration. These are small checks, but they give changes a concrete set of requirements to satisfy.
4. Make cost visible before generation
The workspace displays the credit total beside the Generate action. The server checks submitted options against the page's pricing configuration.
That boundary matters for any paid AI workflow: users need to understand the cost before starting, and the backend needs to enforce the available options and their price.
Try the workflow
You can explore the AI image combiner in Tancky AI with your own reference images. Start with one subject, one setting, and a short description of how they should fit together.
I'd especially welcome feedback from developers building creative tools: which part of a multi-image workflow needs the most control in the interface: reference roles, subject placement, or detail preservation?
Top comments (0)