Build an AI Watermark Remover App with AI Pass SDK

Complete tutorial on building a watermark removal application using the AI Pass platform. From signup to deployment.

EiliyaMarch 2, 20264 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

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

Step 2: Get Your Client ID

Navigate to the Developer Dashboard
Go to OAuth2 Clients section
Click "Create New Client"
Give your app a name (e.g., "My Watermark Remover")
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:

In the Developer Dashboard, go to My Apps
Click "Publish to Catalog"
Set your pricing (per-use or subscription)
Submit for review
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

Open your app in a browser
Sign in with your AI Pass account (or create one)
Upload an image with a watermark
Verify the watermark is removed cleanly
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! 🚀

Related apps

watermark remover