Build an AI Product Photo Generator App - Complete SDK Tutorial

Eiliya · March 9, 2026 · 5 min read · Development

Build an AI Product Photo Generator App - Complete SDK Tutorial

Learn how to build your own AI product photo generator using the AI Pass SDK. This tutorial covers everything from OAuth2 setup to generating professional e-commerce product images.

What You'll Build

An AI-powered product photo generator that can:

Generate realistic product images from descriptions
Create products in various backgrounds (studio, lifestyle, custom)
Generate multiple product angles and variations
Support different lighting styles and aesthetics
Produce high-resolution images suitable for print

Prerequisites

Basic JavaScript/HTML knowledge
A web server or hosting platform
AI Pass account (free signup)

Step 1: Sign Up for AI Pass

Go to AI Pass and create a free account
Verify your email address
You'll get $1 free credit on signup - enough to test the full functionality

Step 2: Get Your Client ID from Developer Dashboard

Navigate to the Developer Dashboard at /panel/developer.html
Click on OAuth2 Clients in the sidebar
Click "Create New Client" and name it (e.g., "My Product Photo Gen")
Copy your Client ID - it looks like client_ODyf...

Important: The Client ID comes from the OAuth2 Clients page, NOT from your app slug.

Step 3: Initialize the SDK

<script src="https://aipass.one/aipass-sdk.js"></script>

const aipass = new AIPass({
  clientId: 'YOUR_CLIENT_ID',
  requireLogin: true
});

Step 4: Generate a Product Photo

async function generateProductPhoto(productDescription, backgroundStyle, lighting) {
  const prompt = `Professional product photography: ${productDescription}. Background: ${backgroundStyle}. Lighting: ${lighting}. High-resolution, studio quality, commercial product photography style. Sharp focus on the product, professional color grading, e-commerce ready.`;

  const response = await aipass.generateImage({
    model: 'flux-pro/v1.1',
    prompt: prompt,
    n: 1,
    size: '1024x1024'
  });

  return response.data[0].url;
}

// Example
generateProductPhoto(
  'organic coffee beans in a matte brown paper bag with gold lettering',
  'clean white studio background',
  'soft studio lighting from the left side'
).then(url => console.log('Product photo:', url));

Step 5: Generate Multiple Angles

async function generateProductAngles(productDescription, background, angles) {
  const photos = [];
  const angleDescriptions = {
    'front': 'front view, facing directly at camera',
    'side': 'side profile view, 90 degree angle',
    'top': 'top-down overhead view',
    'angled': 'three-quarter angle view, slightly elevated perspective'
  };
  
  for (const angle of angles) {
    const prompt = `Professional product photography: ${productDescription}. ${angleDescriptions[angle]}. Background: ${background}. Soft studio lighting. High-resolution, sharp focus, e-commerce ready.`;
    
    const response = await aipass.generateImage({
      model: 'flux-pro/v1.1',
      prompt: prompt,
      n: 1,
      size: '1024x1024'
    });
    
    photos.push({
      angle: angle,
      url: response.data[0].url
    });
  }
  
  return photos;
}

Step 6: Build Complete UI

<!DOCTYPE html>
<html>
<head>
  <title>AI Product Photo Generator</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: Arial, sans-serif; max-width: 1000px; margin: 50px auto; padding: 20px; }
    .form-section { background: #f8f9fa; padding: 30px; border-radius: 10px; margin-bottom: 30px; }
    label { display: block; margin: 10px 0 5px; font-weight: bold; }
    input, select, textarea { width: 100%; padding: 12px; margin: 5px 0 20px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
    button { background: #2563eb; color: white; padding: 15px 30px; border: none; cursor: pointer; font-size: 18px; border-radius: 5px; width: 100%; }
    button:hover { background: #1d4ed8; }
    button:disabled { background: #9ca3af; cursor: not-allowed; }
    .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 30px; }
    .photo-card { border: 1px solid #ddd; border-radius: 10px; overflow: hidden; }
    .photo-card img { width: 100%; height: auto; }
    .photo-info { padding: 15px; text-align: center; }
    .loading { text-align: center; padding: 40px; }
    .spinner { border: 4px solid #e5e7eb; border-top: 4px solid #2563eb; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <h1>📸 AI Product Photo Generator</h1>
  <p>Create professional product photos for e-commerce, marketing, and more.</p>
  
  <div class="form-section">
    <label>Product Description</label>
    <textarea id="product" rows="3" placeholder="e.g., A sleek matte black wireless earbud case with blue LED indicator, minimalist design"></textarea>
    
    <label>Background Style</label>
    <select id="background">
      <option value="clean white studio background">Studio White</option>
      <option value="light gray gradient background">Light Gray Gradient</option>
      <option value="natural wooden table surface">Natural Wood</option>
      <option value="marble surface background">Marble</option>
      <option value="modern minimalist office desk">Office Desk</option>
      <option value="outdoor natural lighting setting">Outdoor Lifestyle</option>
      <option value="solid black background">Solid Black</option>
    </select>
    
    <label>Lighting Style</label>
    <select id="lighting">
      <option value="soft studio lighting">Soft Studio</option>
      <option value="dramatic side lighting">Dramatic Side</option>
      <option value="natural daylight">Natural Daylight</option>
      <option value="bright overhead lighting">Bright Overhead</option>
      <option value="warm ambient lighting">Warm Ambient</option>
    </select>
    
    <label>Generate Multiple Angles</label>
    <select id="angles">
      <option value="front">Front view only</option>
      <option value="front,side">Front + Side</option>
      <option value="front,side,top" selected>Front + Side + Top</option>
      <option value="front,side,top,angled">All angles</option>
    </select>
    
    <button onclick="generatePhotos()" id="generateBtn">Generate Product Photos ✨</button>
  </div>
  
  <div id="output"></div>
  
  <script>
    const aipass = new AIPass({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });
    
    async function generatePhotos() {
      const product = document.getElementById('product').value;
      const background = document.getElementById('background').value;
      const lighting = document.getElementById('lighting').value;
      const angleList = document.getElementById('angles').value.split(',').map(a => a.trim());
      const output = document.getElementById('output');
      const btn = document.getElementById('generateBtn');
      
      if (!product) {
        alert('Please describe your product!');
        return;
      }
      
      btn.disabled = true;
      btn.textContent = 'Generating...';
      output.innerHTML = '<div class="loading"><div class="spinner"></div><p>Creating your product photos...</p></div>';
      
      try {
        const photos = [];
        const angleDescriptions = {
          'front': 'front view, facing directly at camera',
          'side': 'side profile view, 90 degree angle',
          'top': 'top-down overhead view',
          'angled': 'three-quarter angle view, slightly elevated perspective'
        };
        
        let progress = 0;
        for (const angle of angleList) {
          const prompt = `Professional product photography: ${product}. ${angleDescriptions[angle]}. Background: ${background}. Lighting: ${lighting}. High-resolution, studio quality, sharp focus, commercial product photography, e-commerce ready.`;
          
          const response = await aipass.generateImage({
            model: 'flux-pro/v1.1',
            prompt: prompt,
            n: 1,
            size: '1024x1024'
          });
          
          photos.push({
            angle: angle,
            url: response.data[0].url
          });
          
          progress++;
          output.innerHTML = `<div class="loading"><div class="spinner"></div><p>Generating photo ${progress} of ${angleList.length}...</p></div>`;
        }
        
        let html = '<div class="results">';
        photos.forEach(photo => {
          html += `
            <div class="photo-card">
              <img src="${photo.url}" alt="Product - ${photo.angle} view">
              <div class="photo-info">
                <strong>${photo.angle.charAt(0).toUpperCase() + photo.angle.slice(1)} View</strong>
                <p><a href="${photo.url}" target="_blank" download>Download High-Res</a></p>
              </div>
            </div>
          `;
        });
        html += '</div>';
        html += '<p style="margin-top: 30px; text-align: center;">Click Download to save the high-resolution image.</p>';
        
        output.innerHTML = html;
      } catch (error) {
        output.innerHTML = `<p style="color: red; text-align: center;">Error: ${error.message}</p>`;
      } finally {
        btn.disabled = false;
        btn.textContent = 'Generate More Photos ✨';
      }
    }
  </script>
</body>
</html>

Step 7: Embed and Monetize

After testing, use the </> button to get iframe code. Embed on your website and earn 50% commission on every API call.

Next Steps

Replace YOUR_CLIENT_ID with your actual Client ID
Test your app on AI Pass
Add features like background editing, resolution options
Share and start earning commission

Resources

Developer Dashboard: /panel/developer.html
SDK: https://aipass.one/aipass-sdk.js
Live Example: Product Photo Generator

Start building your AI product photo generator today!

Build an AI Product Photo Generator App - Complete SDK Tutorial

Build an AI Product Photo Generator App - Complete SDK Tutorial

What You'll Build

Prerequisites

Step 1: Sign Up for AI Pass

Step 2: Get Your Client ID from Developer Dashboard

Step 3: Initialize the SDK

Step 4: Generate a Product Photo

Step 5: Generate Multiple Angles

Step 6: Build Complete UI

Step 7: Embed and Monetize

Next Steps

Resources

Related Apps