Build an AI Photo Restoration App with AI Pass SDK — Complete Tutorial

Eiliya · March 21, 2026 · 6 min read · tutorial

Build an AI Photo Restoration App with AI Pass SDK — Complete Tutorial

In the world of creative technology, few things are as emotionally resonant as photo restoration. Whether it’s a genealogy app helping users uncover their heritage or a memorial app preserving legacies, the ability to turn a torn, faded photograph into a crisp digital memory is a "magic moment" for users.

However, building professional-grade AI image restoration from scratch is notoriously difficult. It requires managing GPU clusters, fine-tuning GANs (Generative Adversarial Networks), and handling complex billing.

In this tutorial, we will build a professional-grade AI Photo Restoration App using the AI Pass SDK. By the end, you’ll have a functional web application that repairs scratches, removes blur, and restores color, all while earning a 50% commission on every transaction your users make.

What We’re Building

We are building "Reflections AI," a single-page application (SPA) that allows users to:

Upload a damaged physical photo (scanned or photographed).
Select the specific type of damage (General, Scratches, Fading, or Blur).
Process the image using the AiPass.editImage() engine.
Compare the "Before" and "After" results side-by-side.

Step 1: Get Your API Credentials

To interact with the AI Pass ecosystem, you need a Client ID.

Visit the AI Pass Developer Panel.
Create a new project.
Copy your Client ID.

Keep this ID safe; you will use it as the YOUR_CLIENT_ID placeholder in the code below.

Step 2: The Project Structure

We will use a clean HTML5/CSS3 interface and vanilla JavaScript. This ensures the app is lightweight and easy to integrate into existing platforms like WordPress, Shopify, or custom React/Vue apps.

The HTML Foundation

Create an index.html file and include the AI Pass SDK in the <head>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reflections AI - Professional Photo Restoration</title>
    <!-- The AI Pass SDK -->
    <script src="https://aipass.one/aipass-sdk.js"></script>
    <style>
        :root { --primary: #6366f1; --bg: #f8fafc; }
        body { font-family: sans-serif; background: var(--bg); display: flex; justify-content: center; padding: 2rem; }
        .container { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; max-width: 800px; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
        .controls { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
        img { width: 100%; border-radius: 8px; border: 1px solid #ddd; }
        button { background: var(--primary); color: white; border: none; padding: 12px; border-radius: 6px; cursor: pointer; font-weight: bold; }
        button:disabled { opacity: 0.5; }
        select { padding: 8px; border-radius: 4px; border: 1px solid #ccc; }
        .label { font-weight: bold; margin-bottom: 5px; }
    </style>
</head>
<body>

<div class="container">
    <h1>Reflections AI</h1>
    <p>Professional restoration for genealogy and memorials.</p>

    <div class="controls">
        <label class="label">Step 1: Upload Photo</label>
        <input type="file" id="fileInput" accept="image/*">

        <label class="label">Step 2: Select Damage Type</label>
        <select id="damageType">
            <option value="restore the overall quality and details">General Restoration</option>
            <option value="remove all scratches, cracks, and physical tears">Scratch/Tear Removal</option>
            <option value="restore natural colors and contrast to this faded photo">Fading/Color Correction</option>
            <option value="sharpen the image and remove motion blur">Unblur & Sharpen</option>
        </select>

        <button id="processBtn">Restore Photo</button>
    </div>

    <div class="grid">
        <div>
            <p>Original</p>
            <img id="previewOriginal" src="https://via.placeholder.com/400x300?text=Original+Preview" alt="Original">
        </div>
        <div>
            <p>Restored</p>
            <img id="previewRestored" src="https://via.placeholder.com/400x300?text=Restored+Result" alt="Restored">
        </div>
    </div>
</div>

<script>
    // Logic will go here
</script>
</body>
</html>

Step 3: Implementing the Restoration Logic

Now, let’s write the JavaScript to handle the AI processing. We must initialize the SDK with requireLogin: true. This is crucial because it offloads the payment and authentication handling to AI Pass, allowing you to focus purely on the feature.

Add this code inside the <script> tag of your index.html:

// 1. Initialize the SDK
AiPass.initialize({ 
    clientId: 'YOUR_CLIENT_ID', 
    requireLogin: true 
});

const fileInput = document.getElementById('fileInput');
const processBtn = document.getElementById('processBtn');
const damageType = document.getElementById('damageType');
const previewOriginal = document.getElementById('previewOriginal');
const previewRestored = document.getElementById('previewRestored');

let selectedFile = null;

// Handle image preview
fileInput.addEventListener('change', (e) => {
    selectedFile = e.target.files[0];
    if (selectedFile) {
        const reader = new FileReader();
        reader.onload = (f) => previewOriginal.src = f.target.result;
        reader.readAsDataURL(selectedFile);
    }
});

// 2. The Restoration Function
async function restorePhoto() {
    if (!selectedFile) return alert("Please upload a photo first.");

    try {
        processBtn.disabled = true;
        processBtn.innerText = "Restoring... Please wait.";

        // Prepare the prompt based on the damage selector
        const promptInstruction = damageType.value;

        // Call the AI Pass editImage engine
        const result = await AiPass.editImage({
            image: selectedFile,
            prompt: `Professional high-end photo restoration: ${promptInstruction}. Preserve historical accuracy and facial features.`,
            temperature: 1, // Required configuration
            max_tokens: 16000 // Required configuration
        });

        // 3. Extract the result URL
        if (result && result.data && result.data[0].url) {
            const restoredUrl = result.data[0].url;
            previewRestored.src = restoredUrl;
            console.log("Restoration Complete:", restoredUrl);
        }

    } catch (error) {
        console.error("Restoration Failed:", error);
        alert("There was an error processing the image. Check console for details.");
    } finally {
        processBtn.disabled = false;
        processBtn.innerText = "Restore Photo";
    }
}

processBtn.addEventListener('click', restorePhoto);

Key SDK Concepts Explained

`AiPass.initialize`

By setting requireLogin: true, your app doesn't need its own database or user management system. When editImage is called, the SDK automatically checks if the user has a valid session. If not, it opens a secure login/signup modal. This ensures that only users with credits can use the AI, protecting you from high server costs.

`AiPass.editImage`

This is the workhorse of the SDK. Unlike standard generative tools, editImage takes an existing file and applies transformations based on your prompt.

Prompting: We dynamically inject the "Damage Type" into the prompt. This gives the AI specific instructions (e.g., "remove scratches") while maintaining the context of "photo restoration."
Parameters: We use temperature: 1 to allow the AI enough creative freedom to reconstruct missing pixels, and max_tokens: 16000 to ensure the highest possible resolution output.

Step 4: Monetization and the Catalog

One of the most powerful features of the AI Pass SDK for creative developers is the Product Catalog.

When you deploy this app, you aren't just paying for API calls—you are building a business.

The 50% Commission: Every time a user purchases credits through your application's interface to process a photo, AI Pass splits the revenue. You receive 50% of the transaction value directly into your developer account.
The Catalog: In the Developer Panel, you can see the "Catalog." You can add your app to the AI Pass ecosystem, allowing their existing user base to discover your restoration tool.

Deployment Tips

Hosting: Since this is a static HTML/JS app, you can host it for free on GitHub Pages, Vercel, or Netlify.
Mobile First: Many users will want to take a photo of an old physical print using their smartphone. Ensure your CSS is responsive (the grid should stack on small screens).

Conclusion

You have just built a sophisticated AI restoration tool in under 100 lines of code. By leveraging the AI Pass SDK, you've bypassed months of R&D in image processing and avoided the headache of building a custom billing system.

For developers in the genealogy and memorial sectors, this tool adds immense value. You can now offer your users a way to breathe new life into their ancestors' photos, creating a deeper emotional connection to your platform—all while generating a passive revenue stream through the 50% commission model.

Next Steps:

Experiment with the prompt to include "Colorization" for black-and-white photos.
Visit the AI Pass Developer Panel to monitor your earnings and app usage.
Share your tool with the community and start restoring history!

Build an AI Photo Restoration App with AI Pass SDK — Complete Tutorial

Build an AI Photo Restoration App with AI Pass SDK — Complete Tutorial

What We’re Building

Step 1: Get Your API Credentials

Step 2: The Project Structure

The HTML Foundation

Step 3: Implementing the Restoration Logic

Key SDK Concepts Explained

AiPass.initialize

AiPass.editImage

Step 4: Monetization and the Catalog

Deployment Tips

Conclusion

Related Apps

`AiPass.initialize`

`AiPass.editImage`