AI
Pass

Build an AI Ghibli Filter App with AI Pass SDK

Eiliya · March 2, 2026 · 4 min read

Build an AI Ghibli Filter App with AI Pass SDK

Learn how to build a Studio Ghibli-style image transformation app using the AI Pass platform. This tutorial covers everything from signup to deployment.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript
  • A code editor (VS Code, Sublime Text, etc.)
  • A modern web browser

Step 1: Sign Up for AI Pass

  1. Go to AI Pass
  2. Click "Sign Up" and create your account
  3. You'll receive $1 free credit on signup to test the platform

Step 2: Get Your Client ID

  1. Navigate to the Developer Dashboard
  2. Go to OAuth2 Clients section
  3. Click "Create New Client"
  4. Give your app a name (e.g., "My Ghibli Filter")
  5. Copy your Client ID — you'll need this for the SDK

Important: Keep your Client ID secure. In production, use environment variables.

Step 3: Include the AI Pass SDK

Add the AI Pass SDK to your HTML file:

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

Step 4: Initialize the SDK

Initialize the SDK with your Client ID and enable user authentication:

// Initialize AI Pass SDK
const client = new AiPass({
  clientId: 'YOUR_CLIENT_ID',
  requireLogin: true  // Requires users to log in to use your app
});

// Check if user is authenticated
client.on('ready', () => {
  console.log('SDK ready, user authenticated:', client.isAuthenticated());
});

Step 5: Create the Ghibli Filter Function

Use the AI Pass API to transform photos into Ghibli-style artwork:

async function applyGhibliFilter(imageFile, style) {
  try {
    // Check user credits before processing
    const credits = await client.getUserCredits();
    if (credits.available < 1) {
      alert('Not enough credits. Please upgrade your plan.');
      return null;
    }

    // Convert image to base64
    const reader = new FileReader();
    const base64Image = await new Promise((resolve) => {
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(imageFile);
    });

    // Call the Ghibli transformation model via AI Pass
    const result = await client.generateCompletion({
      model: 'gpt-5-mini',
      temperature: 1,
      max_tokens: 16000,
      messages: [
        {
          role: 'system',
          content: 'You are an artistic image processing assistant specializing in Studio Ghibli-style transformation. Apply the characteristic warm, painterly, hand-drawn aesthetic of Ghibli films. Styles available: spirited-away (vibrant, magical), totoro (soft, natural, countryside), mononoke (dramatic, lush, forest), ponyo (bright, colorful, oceanic), howls-moving-castle (steampunk, whimsical).'
        },
        {
          role: 'user',
          content: `Transform this photo to ${style} Ghibli style: ${base64Image}`
        }
      ]
    });

    return result;
  } catch (error) {
    console.error('Error applying Ghibli filter:', error);
    throw error;
  }
}

Critical: Always include temperature: 1 and max_tokens: 16000 when using GPT-5 models. The SDK defaults (temperature: 0.7, max_tokens: 1000) are incompatible with GPT-5's reasoning process and will result in empty responses.

Step 6: Build the User Interface

Create a simple HTML interface:

<!DOCTYPE html>
<html>
<head>
  <title>AI Ghibli Filter</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; }
    .upload-area { border: 2px dashed #ccc; padding: 40px; text-align: center; cursor: pointer; }
    .upload-area:hover { border-color: #007bff; }
    .controls { margin: 20px 0; }
    select, button { padding: 10px; margin: 5px; }
    #result { margin-top: 20px; }
    .comparison { display: flex; gap: 10px; }
    .comparison img { flex: 1; max-width: 50%; }
  </style>
</head>
<body>
  <h1>AI Ghibli Filter</h1>
  <div class="upload-area" onclick="document.getElementById('fileInput').click()">
    <p>Click to upload a photo</p>
    <input type="file" id="fileInput" accept="image/*" style="display: none" onchange="handleFileUpload(event)">
  </div>

  <div class="controls">
    <select id="ghibliStyle">
      <option value="spirited-away">Spirited Away</option>
      <option value="totoro">My Neighbor Totoro</option>
      <option value="mononoke">Princess Mononoke</option>
      <option value="ponyo">Ponyo</option>
      <option value="howls-moving-castle">Howl's Moving Castle</option>
    </select>
    <button onclick="processImage()">Apply Ghibli Filter</button>
  </div>

  <div id="result"></div>

  <script src="https://aipass.one/aipass-sdk.js"></script>
  <script>
    const client = new AiPass({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });

    let uploadedImage = null;

    function handleFileUpload(event) {
      uploadedImage = event.target.files[0];
      if (uploadedImage) {
        document.getElementById('result').innerHTML = `
          <p>Original:</p>
          <img src="${URL.createObjectURL(uploadedImage)}" alt="Original">
        `;
      }
    }

    async function processImage() {
      if (!uploadedImage) {
        alert('Please upload an image first');
        return;
      }

      const style = document.getElementById('ghibliStyle').value;
      const resultDiv = document.getElementById('result');
      resultDiv.innerHTML = '<p>Transforming to Ghibli style...</p>';

      try {
        const result = await applyGhibliFilter(uploadedImage, style);
        const styleName = document.getElementById('ghibliStyle').options[document.getElementById('ghibliStyle').selectedIndex].text;
        resultDiv.innerHTML = `
          <div class="comparison">
            <div>
              <p>Original:</p>
              <img src="${URL.createObjectURL(uploadedImage)}" alt="Original">
            </div>
            <div>
              <p>${styleName} Style:</p>
              <img src="${result.data.processedImage}" alt="Ghibli style">
            </div>
          </div>
          <br>
          <a href="${result.data.processedImage}" download="ghibli-${style}.png">Download</a>
        `;
      } catch (error) {
        resultDiv.innerHTML = `<p>Error: ${error.message}</p>`;
      }
    }

    async function applyGhibliFilter(imageFile, style) {
      // ... (function from Step 5)
    }
  </script>
</body>
</html>

Step 7: Deployment Options

Option A: Self-Host Anywhere

Deploy your app to any web hosting service:

  • Netlify - Drag and drop your HTML file
  • Vercel - Connect your Git repository
  • GitHub Pages - Free hosting for static sites
  • Your own server - Nginx, Apache, or any web server

Option B: Publish on AI Pass Catalog

Publish your app to the AI Pass marketplace and earn revenue:

  1. In the Developer Dashboard, go to My Apps
  2. Click "Publish to Catalog"
  3. Set your pricing (per-use or subscription)
  4. Submit for review
  5. Once approved, your app appears in the catalog

Earning Opportunity: You earn 50% commission on all revenue generated through the AI Pass catalog. This includes revenue from users who discover your app through the marketplace.

Step 8: Test Your App

  1. Open your app in a browser
  2. Sign in with your AI Pass account (or create one)
  3. Upload a photo (landscapes work best)
  4. Select a Ghibli style
  5. Verify the transformation works
  6. Test different styles and image types

Complete Example Code

For a complete working example, check out the AI Pass SDK documentation.

Next Steps

  • Add batch processing for multiple images
  • Implement custom style parameters
  • Add before/after comparison slider
  • Create style presets library
  • Publish to the catalog to earn revenue
  • Explore other AI Pass models and APIs

Transform your photos into magical Ghibli artwork! 🎨✨