Build an AI Interior Redesign App with AI Pass SDK — Complete Tutorial
Build an AI Interior Redesign App with AI Pass SDK — Complete Tutorial
The intersection of Real Estate and Artificial Intelligence—often called PropTech—is currently one of the most lucrative sectors for developers. From virtual staging to automated renovations, the ability to visualize potential is a high-value feature.
In this tutorial, we will build a fully functional AI Interior Redesign App. Users will upload a photo of a messy or empty room, select a design style, and watch as the AI transforms the space into a professional architectural render.
We will use the AI Pass SDK, a powerful toolkit that abstracts complex diffusion models into a few lines of JavaScript, allowing you to focus on the UI while earning a 50% commission on the compute credits your users purchase.
What We’re Building
A single-page web application where users can:
- Upload an image of a current room.
- Select a design aesthetic (e.g., Scandinavian, Industrial).
- Generate a photorealistic redesign using
AiPass.editImage(). - Compare the before-and-after results in real-time.
Phase 1: Setup and API Keys
Before writing code, you need to register your application to get a Client ID.
- Get Your ID: Visit the AI Pass Developer Panel.
- Create an App: Register a new project name.
- Copy your
YOUR_CLIENT_ID: This is your bridge to the AI models and the payment gateway. - Monetization: AI Pass handles the billing. When users run out of free credits, they pay through the SDK, and you receive 50% of the revenue automatically.
Phase 2: Project Structure
We will create a standard index.html file. We will pull the SDK directly from their CDN to ensure we always have the latest model optimizations.
The SDK Script:
<script src="https://aipass.one/aipass-sdk.js"></script>
Phase 3: The Full Application Code
Copy the following code into your index.html. We are using a clean, modern CSS layout to ensure the app looks professional.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Interior Redesign Studio</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
:root { --primary: #2563eb; --bg: #f8fafc; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: #1e293b; line-height: 1.6; margin: 0; padding: 20px; }
.container { max-width: 1000px; margin: 0 auto; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.header { text-align: center; margin-bottom: 40px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.control-panel { background: #f1f5f9; padding: 20px; border-radius: 8px; margin-bottom: 30px; }
.upload-area { border: 2px dashed #cbd5e1; padding: 40px; text-align: center; cursor: pointer; border-radius: 8px; transition: 0.3s; }
.upload-area:hover { border-color: var(--primary); background: #eff6ff; }
select, button { width: 100%; padding: 12px; margin-top: 10px; border-radius: 6px; border: 1px solid #cbd5e1; font-size: 16px; }
button { background: var(--primary); color: white; font-weight: bold; border: none; cursor: pointer; transition: opacity 0.2s; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.preview-img { width: 100%; border-radius: 8px; display: block; min-height: 300px; object-fit: cover; background: #e2e8f0; }
.loader { display: none; text-align: center; font-weight: bold; color: var(--primary); margin: 10px 0; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>AI Interior Redesign Studio</h1>
<p>Upload a photo of your room and let AI do the renovation.</p>
</div>
<div class="control-panel">
<label>1. Upload Room Photo</label>
<div class="upload-area" id="dropZone">
<span id="uploadStatus">Click or Drag to Upload Image</span>
<input type="file" id="imageInput" accept="image/*" style="display: none;">
</div>
<label style="display:block; margin-top:20px;">2. Choose Your Style</label>
<select id="styleSelect">
<option value="Modern Professional">Modern</option>
<option value="Minimalist Zen">Minimalist</option>
<option value="Scandinavian Hygge">Scandinavian</option>
<option value="Industrial Urban">Industrial</option>
<option value="Bohemian Chic">Bohemian</option>
</select>
<button id="generateBtn">Transform Room</button>
<div id="loader" class="loader">Architecting your new space... (approx 15s)</div>
</div>
<div class="grid">
<div>
<h3>Original Room</h3>
<img id="originalPreview" class="preview-img" src="https://via.placeholder.com/500x400?text=Original+Photo" alt="Original">
</div>
<div>
<h3>AI Transformation</h3>
<img id="resultPreview" class="preview-img" src="https://via.placeholder.com/500x400?text=Result+Appears+Here" alt="Result">
</div>
</div>
</div>
<script>
// 1. Initialize SDK
// IMPORTANT: Replace 'YOUR_CLIENT_ID' with the ID from aipass.one
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true
});
const imageInput = document.getElementById('imageInput');
const dropZone = document.getElementById('dropZone');
const generateBtn = document.getElementById('generateBtn');
const originalPreview = document.getElementById('originalPreview');
const resultPreview = document.getElementById('resultPreview');
const styleSelect = document.getElementById('styleSelect');
const loader = document.getElementById('loader');
let base64Image = null;
// Handle Image Uploads
dropZone.onclick = () => imageInput.click();
imageInput.onchange = (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
base64Image = event.target.result;
originalPreview.src = base64Image;
document.getElementById('uploadStatus').innerText = "Image Loaded: " + file.name;
};
reader.readAsDataURL(file);
}
};
// 2. The Transformation Logic
generateBtn.onclick = async () => {
if (!base64Image) {
alert("Please upload an image first!");
return;
}
try {
generateBtn.disabled = true;
loader.style.display = 'block';
const selectedStyle = styleSelect.value;
// Construct the prompt for the AI
const prompt = `A professional interior design photo of this room, reimagined in a ${selectedStyle} style. High-end furniture, realistic lighting, 8k resolution, architectural photography.`;
// 3. Call the AiPass.editImage method
const result = await AiPass.editImage({
image: base64Image,
prompt: prompt,
negative_prompt: "blurry, distorted, low quality, messy, dark",
// Critical parameters for high-quality architectural renders
temperature: 1,
max_tokens: 16000
});
if (result && result.data && result.data[0].url) {
// 4. Display the result
resultPreview.src = result.data[0].url;
} else {
throw new Error("Failed to generate image.");
}
} catch (error) {
console.error("AI Error:", error);
alert("Error: " + error.message);
} finally {
generateBtn.disabled = false;
loader.style.display = 'none';
}
};
</script>
</body>
</html>
Phase 4: Key Technical Breakdown
AiPass.initialize
Setting requireLogin: true is crucial. It triggers a seamless OAuth popup if the user isn't logged in. This ensures that the user uses their own credits (or buys more) rather than draining your developer balance.
AiPass.editImage()
This is the core function. Unlike standard text-to-image, editImage takes the image parameter as a reference. The AI analyzes the geometry (walls, windows, floors) of your photo and applies the prompt context to fill that geometry with new aesthetics.
Critical Parameters:
temperature: 1: Ensures the AI has enough creative freedom to replace old furniture with new, stylish pieces while respecting the room's layout.max_tokens: 16000: Allows for high-detail processing. In the context of image generation via the SDK, this ensures the model uses its maximum capacity for resolution and detail.
Phase 5: Deployment & Monetization
Once your app is ready, you can host it anywhere (Netlify, Vercel, or even GitHub Pages).
The Catalog and 50% Commission: AI Pass functions as more than just an API; it's a marketplace.
- Submit to Catalog: Once your app is live, you can submit it to the AI Pass App Catalog.
- Revenue Share: When users discover your app and need more credits to generate designs, they pay through the built-in SDK interface.
- Automatic Payouts: You don't need to set up Stripe or handle taxes. AI Pass takes the payment, handles the GPU costs, and splits the profit 50/50 with you.
Conclusion
You have just built a sophisticated PropTech tool in under 100 lines of code. By leveraging the AI Pass SDK, you've bypassed the nightmare of managing GPU clusters, image storage, and payment processing.
Next Steps:
- Add a "Download" button for the generated image.
- Add a "Before/After" slider using a library like
img-comparison-slider. - Expand the styles dropdown to include "Office Modernization" or "Garden Landscaping."
Happy building!