Photo Editing

Overview

AI Studio’s photo editing feature uses advanced AI models to transform real estate photos with intelligent style transfers, virtual staging, and automated enhancements. The system preserves architectural elements while applying sophisticated design transformations.

Creating a Project

Every photo editing workflow starts with creating a project. Projects group related images together and apply consistent styling across all photos.

Start a New Project

From the dashboard, click the New Project button. You’ll be prompted to configure your project settings.

// Dashboard renders project creation dialog
// Source: app/dashboard/page.tsx
const projects = await getProjects(data.workspace.id);
const stats = await getProjectStats(data.workspace.id);

return (
  <DashboardContent projects={projects} stats={stats} />
);

Select a Style Template

Choose from available style templates. Each template includes:

Style Category: Staging, lighting, exterior, or atmosphere
AI Prompt: Carefully crafted prompts that preserve architectural integrity
Preview Thumbnail: Visual representation of the style

// Source: lib/style-templates.ts
export const STYLE_TEMPLATES: StyleTemplate[] = [
  {
    id: "scandinavian",
    name: "Scandinavian",
    description: "Light, airy spaces with natural wood and minimal decor",
    category: "staging",
    prompt: "Transform into a Scandinavian-style interior. Add light wooden furniture..."
  }
];

Upload Photos

Upload up to 10 images per project. Supported formats:

JPEG (.jpg, .jpeg)
PNG (.png)
Maximum 10 images per project

Images are stored securely in Supabase Storage with workspace-level isolation:

// Source: lib/supabase.ts
export function getImagePath(
  workspaceId: string,
  projectId: string,
  fileName: string,
  type: "original" | "result"
): string {
  return `${workspaceId}/${projectId}/${type}/${fileName}`;
}

Assign Room Types

Before processing, assign a room type to each image. This provides context to the AI model:

Available Room Types
Bulk Assignment

Living Room
Bedroom
Kitchen
Bathroom
Dining Room
Office
And more…

// Source: lib/style-templates.ts
export const ROOM_TYPES: RoomTypeOption[] = [
  {
    id: "living-room",
    label: "Living Room",
    icon: "IconSofa",
    description: "Living spaces, family rooms, lounges"
  },
  // ... more room types
];

Select multiple images and assign the same room type to all selected images at once.

// Source: lib/actions.ts
const result = await bulkUpdateImageRoomTypes(
  imageIds,
  roomType
);

Start Processing

Once all images have room types assigned, click Start Processing to begin AI enhancement.The system will:

Validate payment status (if required)
Trigger background processing for each image
Update project status to “processing”

AI Processing Pipeline

When you start processing, each image goes through a multi-stage AI pipeline powered by Trigger.dev for orchestration.

Processing Stages

Stage 1: Fetching
Stage 2: Uploading
Stage 3: Processing
Stage 4: Saving

// Source: trigger/process-image.ts
metadata.set("status", {
  step: "fetching",
  label: "Loading image…",
  progress: 10,
});

const image = await getImageGenerationById(imageId);
await updateImageGeneration(imageId, { status: "processing" });

The system retrieves the image record from the database and updates its status.

metadata.set("status", {
  step: "uploading",
  label: "Preparing for AI…",
  progress: 25,
});

const imageResponse = await fetch(image.originalImageUrl);
const imageBlob = await imageResponse.blob();
const falImageUrl = await fal.storage.upload(
  new File([imageBlob], "input.jpg", { type: imageBlob.type })
);

Images are uploaded to Fal.ai’s temporary storage for AI processing.

metadata.set("status", {
  step: "processing",
  label: "Enhancing image…",
  progress: 50,
});

const result = await fal.subscribe(NANO_BANANA_PRO_EDIT, {
  input: {
    prompt: image.prompt,
    image_urls: [falImageUrl],
    num_images: 1,
    output_format: "jpeg",
  },
});

The AI model processes the image using:

Model: Nano Banana Pro (Fal.ai)
Custom Prompt: Combines style template + room type + architectural preservation rules

metadata.set("status", {
  step: "saving",
  label: "Saving result…",
  progress: 80,
});

const resultImageResponse = await fetch(resultImageUrl);
const resultImageBuffer = await resultImageResponse.arrayBuffer();

const storedResultUrl = await uploadImage(
  new Uint8Array(resultImageBuffer),
  resultPath,
  contentType
);

await updateImageGeneration(imageId, {
  status: "completed",
  resultImageUrl: storedResultUrl,
});

Results are saved to permanent storage and the database is updated.

Real-Time Progress Tracking

The UI displays live progress updates using Trigger.dev’s real-time hooks:

// Source: components/dashboard/project-detail-content.tsx
const { run } = useRealtimeRun(runId, {
  accessToken: accessToken,
  enabled: !!runId && !!accessToken,
});

const status = run?.metadata?.status;
const label = status?.label || "Enhancing…";

Processing typically takes 30-90 seconds per image depending on complexity and model load.

Prompt Engineering

AI Studio uses sophisticated prompt generation to ensure high-quality results:

// Source: lib/style-templates.ts
export function generatePrompt(
  template: StyleTemplate,
  roomType: string | null
): string {
  const preserveStructure =
    "Do not move, remove, or modify windows, walls, doors, or any architectural elements. " +
    "Keep the room layout exactly as shown.";

  let prompt = template.prompt;

  if (roomType) {
    const roomLabel = roomType.replace(/-/g, " ");
    prompt = `This is a ${roomLabel}. ${prompt}`;
  }

  return `${prompt} ${preserveStructure}`;
}

Why Architectural Preservation Matters

The system explicitly instructs the AI to preserve:

Window positions and sizes
Wall structures and layouts
Door locations
Ceiling heights
Overall room dimensions

This ensures the edited photos remain accurate representations of the actual property.

Image Viewing & Management

Comparison View

Compare original and enhanced images side-by-side with an interactive slider:

// Source: components/dashboard/project-detail-content.tsx
function ComparisonView({ originalUrl, enhancedUrl, onClose }) {
  const [sliderPosition, setSliderPosition] = React.useState(50);
  
  return (
    <div className="relative" onMouseMove={handleMouseMove}>
      {/* Enhanced image (full width) */}
      <Image src={enhancedUrl} />
      
      {/* Original image (clipped) */}
      <div style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}>
        <Image src={originalUrl} />
      </div>
    </div>
  );
}

Keyboard Shortcuts:

C - Open comparison view
E - Edit selected image
D - Download images
A - Select all
Esc - Clear selection

Full-screen gallery with keyboard navigation:

← / → - Navigate between images
Esc - Close lightbox
Film strip thumbnails for quick navigation

Advanced Editing

Inpainting (Touch-ups)

For precise edits, use the inpainting tool to modify specific areas:

Open Editor

Click the Edit button on any completed image to launch the mask editor.

Draw Mask

Use the brush tool to paint over areas you want to modify. Adjust brush size with the slider.

// Source: components/dashboard/image-mask-editor.tsx
const [brushSize, setBrushSize] = useState(40);
const [isDrawing, setIsDrawing] = useState(false);

Describe Changes

Enter a text description of how you want the masked area to change.Example: “Replace with a modern gray sectional sofa”

Generate

The system creates a new version of the image with your changes applied.

Version History

Each edit creates a new version while preserving the original:

// Source: lib/db/schema.ts
export const imageGeneration = pgTable("image_generation", {
  id: text("id").primaryKey(),
  version: integer("version").notNull().default(1), // v1, v2, v3...
  parentId: text("parent_id"), // Links to original image
  originalImageUrl: text("original_image_url").notNull(),
  resultImageUrl: text("result_image_url"),
  // ...
});

View and compare all versions:

Click the version badge (e.g., “v2/3”) on any image
Browse thumbnail grid of all versions
Select any version to compare or edit further

Version chains are tracked by parentId. The root image has parentId: null, and subsequent edits reference the original image’s ID.

Downloading Results

Single Image Download

Click the download icon on any image to save it:

const metadata = image.metadata as { originalFileName?: string } | null;
const originalName = metadata?.originalFileName || `image-${image.id}`;
const versionSuffix = (image.version || 1) > 1 ? `-v${image.version}` : "";
const filename = `${baseName}${versionSuffix}.${extension}`;

Filenames preserve the original name and append version numbers for edited images.

Bulk Download

Download All
Download Selected

Click Download All to get a ZIP file containing all completed images in the project.

// API endpoint: /api/download/[projectId]
const url = `/api/download/${project.id}`;
window.location.href = url;

Select multiple images by clicking them
Click Download to download only selected images

const url = `/api/download/${project.id}?imageIds=${imageIds.join(",")}`;

Project Status Flow

Projects move through several states:

// Source: lib/db/schema.ts
export type ProjectStatus = "pending" | "processing" | "completed" | "failed";

Pending

Initial state after project creation. Images uploaded but not yet processed.Actions Available:

Add more images (up to 10)
Assign room types
Start processing

Processing

At least one image is currently being enhanced by AI.Actions Available:

View real-time progress
Compare completed images
Download completed images

Completed

All images successfully processed.Actions Available:

View and compare all images
Edit images (creates new versions)
Download all results

Failed

Processing failed for one or more images.Actions Available:

View error messages
Retry failed images
Download successful results

Best Practices

Photo Quality Guidelines

For best results:

Use well-lit photos (avoid extreme shadows)
Shoot from room corners to show maximum space
Keep camera level (avoid tilted angles)
Minimum resolution: 1280x720px
Avoid heavily compressed images

Room Type Selection

Accurate room types improve AI results:

Be specific (e.g., “Master Bedroom” vs generic “Bedroom”)
Use consistent naming within a project
For ambiguous spaces, choose the primary function

Style Template Selection

Choose templates that match the property:

Scandinavian: Modern, minimalist properties
Lighting: Enhance existing staged photos
Exterior: Curb appeal improvements
Atmosphere: Mood and ambiance adjustments

Troubleshooting

Processing is stuck

If an image remains in “Processing” for over 5 minutes:

Check your internet connection
Refresh the page (progress is preserved)
If still stuck, contact support with the image ID

The system includes automatic retry logic:

// Source: trigger/process-image.ts
export const processImageTask = task({
  id: "process-image",
  maxDuration: 300, // 5 minutes
  retry: {
    maxAttempts: 3,
    minTimeoutInMs: 1000,
    maxTimeoutInMs: 10_000,
    factor: 2,
  },
});

Results don't look right

If AI results are unsatisfactory:

Try inpainting: Use the edit tool for targeted fixes
Check room type: Incorrect room type can affect results
Create new version: Start fresh with different settings
Retry processing: Click retry to regenerate with different random seed

Can't add more images

Projects are limited to 10 root images (excluding versions).

const rootImageCount = imageGroups.length;
const canAddMore = rootImageCount < 10;

To add more photos:

Create a new project
Or delete unused images from the current project

Get Started

Core Features

Platform

Integrations

Overview

Creating a Project

AI Processing Pipeline

Processing Stages

Real-Time Progress Tracking

Prompt Engineering

Image Viewing & Management

Comparison View

Advanced Editing

Inpainting (Touch-ups)

Version History

Downloading Results

Single Image Download

Bulk Download

Project Status Flow

Best Practices

Troubleshooting

Build docs developers (and LLMs) love

Get Started

Core Features

Platform

Integrations

​Overview

​Creating a Project

​AI Processing Pipeline

​Processing Stages

​Real-Time Progress Tracking

​Prompt Engineering

​Image Viewing & Management

​Comparison View

​Image Lightbox

​Advanced Editing

​Inpainting (Touch-ups)

​Version History

​Downloading Results

​Single Image Download

​Bulk Download

​Project Status Flow

​Best Practices

​Troubleshooting

Build docs developers (and LLMs) love

Overview

Creating a Project

AI Processing Pipeline

Processing Stages

Real-Time Progress Tracking

Prompt Engineering

Image Viewing & Management

Comparison View

Image Lightbox

Advanced Editing

Inpainting (Touch-ups)

Version History

Downloading Results

Single Image Download

Bulk Download

Project Status Flow

Best Practices

Troubleshooting