Building an AI powered Kitchen Designer

The Kitchen Designer web app combines multiple AI models to create an interactive design and appliance discovery platform. Developed as an alternative marketing approach for Appliance World, it provides a different way for users to discover the business beyond traditional advertising methods. The key difference to other generative models is the appliance detection showing user’s relevant models based on their chosen inputs.

Multi-Model AI Architecture

The app uses three distinct AI models, each optimised for specific tasks:

Flux Schnell uses a modular prompt building approach where style components (Modern, Traditional, Farmhouse, Industrial, Scandinavian) are programmatically combined with cabinet colours and countertop materials. This prevents the inconsistencies that come from freeform prompting. Custom instructions are allowed but are sanitised server-side to keep it on kitchens.

Flux Kontext Pro handles image editing, preserving original layout while applying modifications. The edit prompts are constructed to maintain spatial composition.

Gemini 2.0 Flash performs appliance detection using structured prompts that distinguish between appliance types (refrigerator vs fridge freezer vs American fridge freezer) and detect integration status and colours from visual analysis. Rough sized based estimations are used to infer the type of appliance.

Interactive Appliance Detection

The appliance detection system is the app’s most interesting user interaction, and it presented technical challenges. Modern kitchens contain integrated appliances that blend seamlessly with cabinetry, making detection more difficult for the AI model. Nonetheless Gemini did a great job of predicting broad appliance types that are heavily filtered down to match the product feed. A simple appliance scoring algorithm attempts to provide a different set of matching appliances when user’s generate similar styles.

Gemini returns bounding box coordinates in a normalised 0-1000 range, formatted as [ymin, xmin, ymax, xmax]. These coordinates are then converted to precise overlay positions for the interactive interface elements:

const centerX = ((xmin + xmax) / 2) / 10;
const centerY = ((ymin + ymax) / 2) / 10;

Each dot is positioned using transform: translate(-50%, -50%) to ensure (somewhat accurate) centring regardless of the dot size. The dots are colour-coded by appliance category and include staggered pulse animations.

Real-Time Product Matching

The appliance matching system processes Gemini’s natural language descriptions to extract actionable product attributes:

const detectedColors = appliance.colors || 
  extractColorsFromDescription(appliance.description);
const features = extractFeaturesFromDescription(appliance.description);

This parsed data drives semantic matching against a 6,000+ product database, with scoring that considers colour compatibility, feature alignment, and integration requirements.

Credit System and Abuse Prevention

The credit system uses a multi-layered approach:

Anonymous users get 10 generation credits and 3 edit credits tracked via both IP address and browser cookies. This dual tracking prevents simple workarounds while maintaining user experience.

Registered users receive 10 additional generation credits and 3 edit credits upon signup. The signup bonus is tracked in the database to prevent duplicate awards.

Social verification allows users to earn 5 additional credits by sharing designs on Instagram or Facebook and tagging @applianceworldonline. The verification system checks for proper tagging and prevents duplicate rewards for the same content again using Gemini’s vision.

Modular Prompt Engineering

Rather than only allowing prompts, the system builds queries from components:

function buildModularPrompt(styleId, cupboardColor, countertopMaterial, kitchenLayout, customPrompt, styleData) {
  const components = kitchenStyleComponents[styleData.name.toLowerCase()];
  let promptParts = [
    components.base,
    components.cabinet_options[cupboardColor] || components.cabinet_default,
    components.countertop_pairings[countertopMaterial],
    components.mood
  ];
  return promptParts.join(', ');
}

Performance Considerations

Gemini analysis runs asynchronously after image generation, with visual feedback keeping users engaged. The appliance dots appear with staggered animations as detection completes, turning wait time into anticipation.

Image processing handles multiple formats (WebP, JPEG, PNG) with automatic optimisation for Flux’s requirements (max 1920×1920 pixels). When uploading the image is checked and compressed before being shared with the model.

Business Model Integration

Every technical decision supports the lead generation objective. The appliance detection creates natural transition points to product discovery. UTM parameters track attribution through the entire funnel from inspiration to product consideration. User’s registering agree to share their email with Appliance World further increasing the customer marketing database.

The social verification system amplifies reach while providing users with tangible value. Credit earning through social sharing creates a viral loop that costs nothing beyond manual verification overhead.

The multi-model approach was cool to work on passing information from one model to another. The modular prompt system provides control over output quality while the credit system encourages sharing.

Check it out kitchendesigner.applianceworldonline.com