Build an AI Age Filter App - Complete Tutorial

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

Build an AI Age Filter App - Complete Tutorial

Learn how to build an AI-powered age filter app that applies age transformation effects to photos. This comprehensive guide covers setup, implementation, and deployment using AI Pass platform.

Prerequisites

Node.js 18+ installed
Basic JavaScript knowledge
AI Pass account (signup with $1 free credit)

Step 1: Sign Up and Get Your Client ID

Go to AI Pass Developer Dashboard
Sign up for an account ($1 free credit on signup)
Navigate to OAuth2 Clients section
Click Create New Client
Name your app (e.g., "AI Age Filter")
Copy your Client ID - you'll need this for SDK

Step 2: Initialize the SDK

Include the AI Pass SDK in your HTML:

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

Initialize with OAuth2 and requireLogin:

const aipass = new AIPassSDK({
  clientId: 'YOUR_CLIENT_ID', // Replace with your actual Client ID
  requireLogin: true,
  onSuccess: (token) => {
    console.log('User authenticated:', token);
  }
});

Step 3: Create the Age Filter App

Here's the complete implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI Age Filter</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; max-width: 1100px; margin: 50px auto; padding: 20px; background: #fafafa; }
    .container { background: white; padding: 50px; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
    h1 { text-align: center; color: #1a1a1a; margin-bottom: 10px; font-size: 2.5em; }
    .subtitle { text-align: center; color: #666; margin-bottom: 40px; font-size: 1.1em; }
    .upload-section { border: 3px dashed #ddd; border-radius: 15px; padding: 40px; text-align: center; margin-bottom: 30px; cursor: pointer; transition: all 0.3s; }
    .upload-section:hover { border-color: #667eea; background: #f8f9ff; }
    .upload-icon { font-size: 48px; color: #667eea; margin-bottom: 15px; }
    .upload-text { color: #555; font-size: 16px; }
    .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; }
    .control-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; font-size: 14px; }
    select, input[type="range"] { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; }
    select:focus { border-color: #667eea; outline: none; }
    .range-value { text-align: center; font-weight: bold; color: #667eea; margin-top: 5px; }
    button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 18px 40px; border: none; border-radius: 10px; cursor: pointer; font-size: 18px; font-weight: bold; width: 100%; transition: all 0.3s; }
    button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
    button:disabled { background: #ccc; cursor: not-allowed; transform: none; }
    #output { margin-top: 40px; padding: 30px; background: #f8f9fa; border-radius: 15px; min-height: 200px; }
    .result-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .image-box { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
    .image-title { text-align: center; font-weight: bold; margin-bottom: 15px; color: #333; }
    .image-preview { width: 100%; border-radius: 10px; }
    .download-btn { background: #4CAF50; color: white; padding: 10px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; margin-top: 15px; width: 100%; }
    .download-btn:hover { background: #45a049; }
    .loading { text-align: center; color: #666; font-size: 18px; }
    .error { color: #d32f2f; text-align: center; }
  </style>
</head>
<body>
  <div class="container">
    <h1>AI Age Filter</h1>
    <p class="subtitle">Transform photos to any age using advanced AI</p>
    
    <div class="upload-section" id="uploadSection" onclick="document.getElementById('fileInput').click()">
      <div class="upload-icon">📸</div>
      <div class="upload-text">Click or drag and drop a photo here</div>
      <input type="file" id="fileInput" accept="image/*" style="display: none;" onchange="handleFileUpload(event)">
    </div>
    
    <div class="controls">
      <div class="control-group">
        <label>Age Direction:</label>
        <select id="ageDirection">
          <option value="younger">Make Younger (De-Age)</option>
          <option value="older">Make Older (Age)</option>
        </select>
      </div>
      
      <div class="control-group">
        <label>Target Age:</label>
        <select id="targetAge">
          <option value="child">Child (5-10 years)</option>
          <option value="teen">Teen (15-20 years)</option>
          <option value="adult">Adult (25-40 years)</option>
          <option value="senior">Senior (50-80 years)</option>
        </select>
      </div>
      
      <div class="control-group">
        <label>Transformation Intensity:</label>
        <input type="range" id="intensity" min="1" max="100" value="70" oninput="updateIntensityValue()">
        <div class="range-value" id="intensityValue">70%</div>
      </div>
      
      <div class="control-group">
        <label>Output Quality:</label>
        <select id="quality">
          <option value="standard">Standard</option>
          <option value="high" selected>High</option>
          <option value="ultra">Ultra HD</option>
        </select>
      </div>
    </div>
    
    <button onclick="applyAgeFilter()" id="filterBtn" disabled>Apply Age Filter</button>
    
    <div id="output"></div>
  </div>

  <script>
    const aipass = new AIPassSDK({
      clientId: 'YOUR_CLIENT_ID', // Replace with your actual Client ID
      requireLogin: true,
      onSuccess: (token) => {
        console.log('Ready to apply age filters!');
      }
    });

    let uploadedImage = null;

    function handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          uploadedImage = e.target.result;
          document.getElementById('uploadSection').innerHTML = `
            <img src="${uploadedImage}" style="max-width: 100%; max-height: 300px; border-radius: 10px;">
            <div class="upload-text" style="margin-top: 15px;">Click to change photo</div>
          `;
          document.getElementById('filterBtn').disabled = false;
        };
        reader.readAsDataURL(file);
      }
    }

    function updateIntensityValue() {
      const value = document.getElementById('intensity').value;
      document.getElementById('intensityValue').textContent = value + '%';
    }

    async function applyAgeFilter() {
      if (!uploadedImage) {
        alert('Please upload a photo first');
        return;
      }

      const ageDirection = document.getElementById('ageDirection').value;
      const targetAge = document.getElementById('targetAge').value;
      const intensity = document.getElementById('intensity').value;
      const quality = document.getElementById('quality').value;
      
      const btn = document.getElementById('filterBtn');
      const output = document.getElementById('output');
      
      btn.disabled = true;
      btn.textContent = 'Applying age filter...';
      output.innerHTML = '<div class="loading">Processing your image with AI. This may take a moment...</div>';

      try {
        // Generate age transformation prompt using GPT-5
        const prompt = `Create a detailed image editing prompt for age transformation:

Direction: ${ageDirection}
Target Age: ${targetAge}
Intensity: ${intensity}%
Quality: ${quality}

Provide detailed specifications for:
- Age-appropriate facial feature adjustments
- Skin texture and aging effects
- Wrinkles, smile lines, or skin smoothing as needed
- Hair color and texture changes
- Eye and expression modifications
- Overall facial structure changes appropriate for target age`;

        const promptResult = await aipass.generateText({
          model: 'gpt-5-mini',
          prompt: prompt,
          temperature: 1,
          max_tokens: 16000
        });

        // Apply age transformation using AI image editing API
        const editResult = await aipass.editImage({
          model: 'gemini/gemini-3-pro-image-preview',
          image: uploadedImage,
          prompt: promptResult.text,
          intensity: intensity
        });

        // Display results
        output.innerHTML = `
          <div class="result-container">
            <div class="image-box">
              <div class="image-title">Original</div>
              <img src="${uploadedImage}" class="image-preview" alt="Original">
            </div>
            <div class="image-box">
              <div class="image-title">Age-Transformed</div>
              <img src="${editResult.url}" class="image-preview" alt="Transformed">
              <button class="download-btn" onclick="downloadImage('${editResult.url}')">Download</button>
            </div>
          </div>
          <div style="margin-top: 20px; text-align: center;">
            <p><strong>Transformation:</strong> ${ageDirection} → ${targetAge}</p>
            <p><strong>Intensity:</strong> ${intensity}%</p>
          </div>
        `;

      } catch (error) {
        console.error('Error:', error);
        output.innerHTML = `<div class="error">Error: ${error.message}</div>`;
      } finally {
        btn.disabled = false;
        btn.textContent = 'Apply Age Filter';
      }
    }

    async function downloadImage(url) {
      try {
        const response = await fetch(url);
        const blob = await response.blob();
        const downloadUrl = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = downloadUrl;
        a.download = 'age-transformed-image.png';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(downloadUrl);
      } catch (error) {
        alert('Download failed. Please right-click and save image.');
      }
    }
  </script>
</body>
</html>

Step 4: Deploy Your App

You have two deployment options:

Option A: Self-Host Anywhere

Vercel: Drag and drop your HTML file
Netlify: Connect your GitHub repo
Any web server: Upload to nginx, Apache, or any hosting
Local testing: Just open HTML file in a browser

Option B: Publish on AI Pass Catalog

Go to AI Pass Apps Dashboard
Click Create New App
Fill in app details:
- Name: "AI Age Filter"
- Description: "Apply age transformation filters to photos with AI"
- Category: Photo Editing
- Content: Paste your HTML code
Click Publish
Your app is now live on AI Pass catalog!

Earn 50% commission on every transaction when users interact with your published app.

Key Features Explained

temperature:1

Maximum creativity for natural age transformations
Ensures unique, realistic results
Prevents repetitive outputs

max_tokens:16000

Comprehensive prompt generation for precise transformations
Detailed age effect specifications
No truncation needed

requireLogin:true

Authenticated users only
Usage tracking per user
Personalized experience enabled

Advanced Features

Batch Processing

// Process multiple images
async function batchAgeFilter(images) {
  const results = await Promise.all(
    images.map(img => applyAgeFilter(img))
  );
  return results;
}

Age Progression Series

// Generate multiple age versions
const ages = ['child', 'teen', 'adult', 'senior'];
const progression = await Promise.all(
  ages.map(age => generateAgedImage(baseImage, age))
);

Comparison Mode

// Side-by-side comparison
function createComparison(original, transformed) {
  return `
    <div class="comparison">
      <img src="${original}" class="before">
      <img src="${transformed}" class="after">
    </div>
  `;
}

Next Steps

Add face detection for multiple subjects
Implement custom age range input
Create preset age transformations
Add social media sharing
Build age progression timeline

Get Started Today

Need help? Check out the SDK documentation and developer guides.

Build an AI Age Filter App - Complete Tutorial

Build an AI Age Filter App - Complete Tutorial

Prerequisites

Step 1: Sign Up and Get Your Client ID

Step 2: Initialize the SDK

Step 3: Create the Age Filter App

Step 4: Deploy Your App

Option A: Self-Host Anywhere

Option B: Publish on AI Pass Catalog

Key Features Explained

temperature:1

max_tokens:16000

requireLogin:true

Advanced Features

Batch Processing

Age Progression Series

Comparison Mode

Next Steps

Get Started Today

Related Apps