AI
Pass

Build an AI Watermark Remover App with AI Pass SDK

Eiliya · March 2, 2026 · 4 min read

Build an AI Watermark Remover App with AI Pass SDK

Learn how to build a watermark removal application using the AI Pass platform. This tutorial walks you through creating a complete app 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 Watermark Remover")
  5. Copy your Client ID — you'll need this for the SDK

Important: Keep your Client ID secure. In production, you'll 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 Watermark Removal Function

Use the AI Pass API to remove watermarks from images:

async function removeWatermark(imageFile) {
  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 watermark removal 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 image processing assistant. Remove any watermarks, logos, or text overlays from images while preserving the original content and quality.'
        },
        {
          role: 'user',
          content: `Remove the watermark from this image: ${base64Image}`
        }
      ]
    });

    return result;
  } catch (error) {
    console.error('Error removing watermark:', 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 Watermark Remover</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; }
    #result { margin-top: 20px; }
    img { max-width: 100%; }
    button { background: #007bff; color: white; border: none; padding: 10px 20px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>AI Watermark Remover</h1>
  <div class="upload-area" onclick="document.getElementById('fileInput').click()">
    <p>Click to upload an image</p>
    <input type="file" id="fileInput" accept="image/*" style="display: none" onchange="handleFileUpload(event)">
  </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
    });

    async function handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const resultDiv = document.getElementById('result');
      resultDiv.innerHTML = '<p>Processing...</p>';

      try {
        const result = await removeWatermark(file);
        resultDiv.innerHTML = `<img src="${result.data.processedImage}" alt="Watermark removed">`;
      } catch (error) {
        resultDiv.innerHTML = `<p>Error: ${error.message}</p>`;
      }
    }

    async function removeWatermark(imageFile) {
      // ... (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 an image with a watermark
  4. Verify the watermark is removed cleanly
  5. Test error handling (e.g., insufficient credits)

Complete Example Code

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

Next Steps

  • Add more features (batch processing, multiple export formats)
  • Implement user credits tracking
  • Add analytics to understand usage
  • Publish to the catalog to earn revenue
  • Explore other AI Pass models and APIs

Happy building! 🚀