Build an AI Pet Portrait Generator App with AI Pass SDK
Build an AI Pet Portrait Generator App with AI Pass SDK
Pet portraits are one of the most emotionally resonant AI image apps you can build — people love their pets, and they love unique art of them even more. This tutorial walks you through building a pet portrait generator using the AI Pass SDK.
What You'll Build
Users upload a pet photo, choose an art style, and get a stunning AI-generated portrait back. The whole thing runs in the browser — no backend needed.
Step 1: Get Your Client ID
- Sign up at aipass.one
- Go to Developer Dashboard → OAuth2 Clients
- Create a new client → copy your
YOUR_CLIENT_ID
Step 2: Build the App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Pet Portrait Generator</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
body { font-family: sans-serif; max-width: 700px; margin: 40px auto; padding: 20px; }
select, input { width: 100%; margin: 8px 0 16px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
button { background: #e17055; color: white; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; }
#result img { width: 100%; border-radius: 12px; margin-top: 20px; }
#status { color: #666; margin-top: 10px; }
</style>
</head>
<body>
<h1>🐾 AI Pet Portrait Generator</h1>
<p>Upload your pet's photo and choose an art style to create a one-of-a-kind portrait.</p>
<label>Pet's Name</label>
<input type="text" id="petName" placeholder="e.g. Max, Luna, Bella" />
<label>Pet Type</label>
<select id="petType">
<option value="dog">Dog 🐕</option>
<option value="cat">Cat 🐱</option>
<option value="rabbit">Rabbit 🐰</option>
<option value="bird">Bird 🦜</option>
<option value="other">Other</option>
</select>
<label>Art Style</label>
<select id="artStyle">
<option value="oil painting">Oil Painting — Classic & Elegant</option>
<option value="watercolor">Watercolor — Soft & Dreamy</option>
<option value="anime art">Anime — Cute Japanese Style</option>
<option value="Renaissance portrait">Renaissance Portrait — Royal Treatment</option>
<option value="cartoon">Cartoon — Fun & Playful</option>
<option value="colored pencil sketch">Colored Pencil Sketch — Artistic</option>
<option value="pixel art">Pixel Art — Retro Gaming Style</option>
</select>
<label>Upload Pet Photo (optional — or describe your pet)</label>
<input type="file" id="photoInput" accept="image/*" />
<label>Or describe your pet</label>
<input type="text" id="petDescription" placeholder="e.g. golden retriever with floppy ears, fluffy orange tabby" />
<button onclick="generatePortrait()">Generate Portrait 🎨</button>
<div id="status"></div>
<div id="result"></div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true
});
async function generatePortrait() {
const petName = document.getElementById('petName').value || 'pet';
const petType = document.getElementById('petType').value;
const artStyle = document.getElementById('artStyle').value;
const petDesc = document.getElementById('petDescription').value;
const fileInput = document.getElementById('photoInput');
document.getElementById('status').textContent = 'Creating your pet portrait... 🎨';
document.getElementById('result').innerHTML = '';
let imageResult;
if (fileInput.files.length > 0) {
// Use image editing with uploaded photo
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = async function(e) {
const b64 = e.target.result.split(',')[1];
imageResult = await AiPass.editImage({
model: 'gemini/gemini-3-pro-image-preview',
messages: [{
role: 'user',
content: [
{ type: 'text', text: `Transform this ${petType} photo into a stunning ${artStyle} portrait. Style: ${artStyle}. Make it beautiful, artistic, and professional. Keep the pet's distinctive features.` },
{ type: 'image_url', image_url: { url: 'data:image/jpeg;base64,' + b64 } }
]
}]
});
showResult(imageResult, petName, artStyle);
};
reader.readAsDataURL(file);
} else {
// Generate from description
const description = petDesc || `a ${petType} with a friendly expression`;
imageResult = await AiPass.generateImage({
model: 'flux-pro/v1.1',
prompt: `${artStyle} portrait of ${description}. Professional artistic portrait, beautiful lighting, detailed, high quality ${artStyle} style artwork.`,
size: '1024x1024',
n: 1
});
showResult(imageResult, petName, artStyle);
}
}
function showResult(result, petName, artStyle) {
document.getElementById('status').textContent = '';
const url = result.data ? result.data[0].url : result.choices[0].message.content;
document.getElementById('result').innerHTML =
`<h3>${petName}'s ${artStyle} Portrait</h3><img src="${url}" alt="AI pet portrait" /><br><a href="${url}" download>Download Portrait</a>`;
}
</script>
</body>
</html>
How It Works
The app uses two AI Pass SDK methods:
AiPass.generateImage()→ for text-to-image portraits (when user describes their pet)AiPass.editImage()→ when user uploads a real pet photo (image editing via Gemini 3)
Both return result.data[0].url for the generated image URL.
Deploy It
Self-host: Static HTML — works on GitHub Pages, Netlify, anywhere.
AI Pass Catalog: Publish in Developer Dashboard → earn 50% commission on every portrait generated.
Use the Embed Button
The </> button at the bottom-right of your published app gives you an iframe embed code — perfect for adding to a pet accessories store, shelter website, or pet blog.
Try the live app: aipass.one/apps/pet-portrait
Related apps: