Build an AI Watermark Remover App with the AI Pass SDK
Build an AI Watermark Remover App with the AI Pass SDK
Watermark removal is one of the most searched image editing tasks on the internet. Building a clean, fast watermark remover with AI is straightforward using the AI Pass SDK — and there's consistent demand for it.
Prerequisites
- HTML/JavaScript basics
- AI Pass account (sign up at aipass.one)
- Client ID from Developer Dashboard
Step 1: Get Your Client ID
- Log in at aipass.one
- Go to Developer Dashboard → OAuth2 Clients
- Create a new client called "Watermark Remover"
- Copy your
client_XXXX...ID
Step 2: Build the App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Watermark Remover</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; }
body {
font-family: 'Segoe UI', sans-serif;
max-width: 840px;
margin: 0 auto;
padding: 2rem;
background: #fafafa;
}
h1 { color: #1f2937; }
.upload-zone {
border: 2px dashed #d1d5db;
border-radius: 12px;
padding: 3rem;
text-align: center;
cursor: pointer;
background: white;
transition: border-color 0.2s;
margin: 1.5rem 0;
}
.upload-zone:hover { border-color: #6366f1; }
.upload-zone.drag-over { border-color: #6366f1; background: #eef2ff; }
.preview-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
.preview-box {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1rem;
}
.preview-box h3 { font-size: 0.875rem; color: #6b7280; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; }
img { width: 100%; border-radius: 8px; }
.placeholder { height: 200px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
button {
background: #6366f1;
color: white;
border: none;
padding: 0.875rem 2.5rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
display: block;
margin: 1rem 0;
width: 100%;
}
button:disabled { background: #a5b4fc; cursor: not-allowed; }
#downloadBtn { background: #059669; display: none; }
#status { color: #6b7280; text-align: center; margin: 0.5rem 0; }
</style>
</head>
<body>
<h1>✨ AI Watermark Remover</h1>
<p style="color:#6b7280">Upload a photo to remove watermarks, stamps, text overlays, and logos.</p>
<div class="upload-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
<input type="file" id="fileInput" accept="image/*" style="display:none">
<p style="font-size:2rem;margin:0">📁</p>
<p>Click to upload or drag & drop your image</p>
<p style="color:#9ca3af;font-size:0.875rem">JPEG, PNG, WebP supported</p>
</div>
<button id="removeBtn" style="display:none" onclick="removeWatermark()">🪄 Remove Watermark</button>
<p id="status"></p>
<button id="downloadBtn" onclick="downloadResult()">⬇️ Download Clean Image</button>
<div class="preview-row" id="previewRow" style="display:none">
<div class="preview-box">
<h3>Original</h3>
<img id="originalImg">
</div>
<div class="preview-box">
<h3>Cleaned</h3>
<img id="resultImg" style="display:none">
<div class="placeholder" id="resultPlaceholder">Result will appear here</div>
</div>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: false
});
let selectedFile = null;
let resultDataUrl = null;
// Drag and drop
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-over');
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('image/')) loadFile(file);
});
document.getElementById('fileInput').addEventListener('change', (e) => {
if (e.target.files[0]) loadFile(e.target.files[0]);
});
function loadFile(file) {
selectedFile = file;
const reader = new FileReader();
reader.onload = (ev) => {
document.getElementById('originalImg').src = ev.target.result;
document.getElementById('previewRow').style.display = 'grid';
document.getElementById('removeBtn').style.display = 'block';
document.getElementById('resultImg').style.display = 'none';
document.getElementById('resultPlaceholder').style.display = 'flex';
document.getElementById('downloadBtn').style.display = 'none';
};
reader.readAsDataURL(file);
}
async function removeWatermark() {
if (!selectedFile) return;
const btn = document.getElementById('removeBtn');
const status = document.getElementById('status');
btn.disabled = true;
status.textContent = '⏳ Removing watermark... (15-30 seconds)';
try {
const base64 = await fileToBase64(selectedFile);
const mimeType = selectedFile.type || 'image/jpeg';
const result = await AiPass.generateCompletion({
model: 'gemini/gemini-3-pro-image-preview',
temperature: 1,
max_tokens: 16000,
messages: [{
role: 'user',
content: [
{
type: 'text',
text: 'Remove all watermarks, text overlays, stamps, date/time stamps, and logo overlays from this image. Reconstruct the background beneath the watermark seamlessly using the surrounding context. The result should look like the image was never watermarked. Return only the clean, watermark-free image.'
},
{
type: 'image_url',
image_url: { url: `data:${mimeType};base64,${base64}` }
}
]
}]
});
const content = result.choices[0].message.content;
// Extract image from response
const urlMatch = content.match(/!\[.*?\]\((https?:\/\/[^)]+)\)/) ||
content.match(/(https?:\/\/[^\s]+\.(?:png|jpg|jpeg|webp))/i);
if (urlMatch) {
const imgUrl = urlMatch[1];
resultDataUrl = imgUrl;
document.getElementById('resultImg').src = imgUrl;
document.getElementById('resultImg').style.display = 'block';
document.getElementById('resultPlaceholder').style.display = 'none';
document.getElementById('downloadBtn').style.display = 'block';
status.textContent = '✅ Watermark removed successfully!';
} else {
status.textContent = '✅ Done — check the console for output details';
console.log('AI response:', content);
}
} catch (err) {
status.textContent = '❌ Error: ' + err.message;
}
btn.disabled = false;
}
function downloadResult() {
if (!resultDataUrl) return;
const a = document.createElement('a');
a.href = resultDataUrl;
a.download = 'watermark-removed.jpg';
a.click();
}
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => resolve(e.target.result.split(',')[1]);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
</script>
</body>
</html>
SDK Notes
Watermark removal uses the image editing path via generateCompletion with Gemini's image model:
await AiPass.generateCompletion({
model: 'gemini/gemini-3-pro-image-preview',
temperature: 1, // Required
max_tokens: 16000, // Required
messages: [...]
})
The response content includes the transformed image URL in markdown image format.
Deploy
Self-host: Any static hosting platform. Single HTML file, no build needed.
Publish on AI Pass: Submit to the catalog at Developer Dashboard → Apps. Earn 50% commission on every removal your users process.