How to Create an AI-Powered Before/After Image Generator

An ai before after image generator for transformation visuals creates the comparison graphics that stop scrollers. I build these for businesses where transformation is the product: fitness, home renovation, marketing results, software implementations. The AI generates matching pairs that tell the story at a glance.

Before/after is one of the most effective ad formats across every industry. This system produces them at scale.

What You Need Before Starting

• Transformation concepts (what changes from before to after)
• Python 3.8+ with an image generation API and Pillow
• Brand guidelines for consistent styling
• Layout templates for split-screen comparison

Step 1: Define the Transformation Concept

def create_before_after_concept(category, before_state, after_state):
    return {
        "category": category,
        "before": {
            "description": before_state,
            "mood": "negative",
            "colors": "muted, grey, dull"
        },
        "after": {
            "description": after_state,
            "mood": "positive",
            "colors": "vibrant, bright, clean"
        }
    }

# Example concepts
concepts = [
    create_before_after_concept(
        "operations",
        "Messy desk with scattered papers, post-it notes, stressed person",
        "Clean desk with single laptop showing dashboard, organized, calm"
    ),
    create_before_after_concept(
        "reporting",
        "Cluttered spreadsheet with red numbers, confusing charts",
        "Clean dashboard with green metrics, clear graphs, key numbers highlighted"
    ),
]

Step 2: Generate Matching Pairs

from openai import OpenAI

client = OpenAI()

def generate_before_image(concept):
    prompt = f"""Create a 'before' state image for a transformation comparison.
Scene: {concept['before']['description']}
Mood: {concept['before']['mood']}
Colors: {concept['before']['colors']}
Style: Realistic, relatable. The viewer should feel the pain of this state.
No text overlays. No labels."""

    response = client.images.generate(model="gpt-image-1", prompt=prompt, size="1024x1024", quality="high")
    return response.data[0].url

def generate_after_image(concept):
    prompt = f"""Create an 'after' state image for a transformation comparison.
Scene: {concept['after']['description']}
Mood: {concept['after']['mood']}
Colors: {concept['after']['colors']}
Style: Realistic, aspirational. The viewer should want this outcome.
Same general setting as the 'before' image but transformed.
No text overlays. No labels."""

    response = client.images.generate(model="gpt-image-1", prompt=prompt, size="1024x1024", quality="high")
    return response.data[0].url

Step 3: Create the Comparison Layout

from PIL import Image, ImageDraw, ImageFont
import requests
from io import BytesIO

def create_comparison(before_url, after_url, output_path, labels=True):
    before = Image.open(BytesIO(requests.get(before_url).content))
    after = Image.open(BytesIO(requests.get(after_url).content))

    width = before.width
    height = before.height
    divider_width = 4
    canvas = Image.new("RGB", (width * 2 + divider_width, height), "white")

    canvas.paste(before, (0, 0))
    canvas.paste(after, (width + divider_width, 0))

    if labels:
        draw = ImageDraw.Draw(canvas)
        try:
            font = ImageFont.truetype("arial.ttf", 36)
        except OSError:
            font = ImageFont.load_default()
        draw.text((20, height - 60), "BEFORE", fill="white", font=font)
        draw.text((width + divider_width + 20, height - 60), "AFTER", fill="white", font=font)

    canvas.save(output_path)
    return output_path

Step 4: Batch Generate Comparisons

def batch_before_after(concepts, output_folder):
    import os
    os.makedirs(output_folder, exist_ok=True)
    results = []

    for i, concept in enumerate(concepts):
        before_url = generate_before_image(concept)
        after_url = generate_after_image(concept)
        output_path = os.path.join(output_folder, f"comparison_{concept['category']}_{i:02d}.png")
        create_comparison(before_url, after_url, output_path)
        results.append({"concept": concept["category"], "path": output_path})

    return results

Step 5: Export for Different Platforms

def export_comparison_sizes(comparison_path, prefix):
    img = Image.open(comparison_path)
    sizes = {
        "feed": (1080, 1080),
        "story": (1080, 1350),
        "landscape": (1200, 628),
    }

    exports = {}
    for name, size in sizes.items():
        resized = img.resize(size, Image.LANCZOS)
        path = f"output/{prefix}_{name}.png"
        resized.save(path)
        exports[name] = path
    return exports

What to Build Next

Add slider comparisons for web. Instead of side-by-side, build an interactive slider where users drag to reveal the transformation. More engaging on landing pages and dramatically increases time on page.

Related Reading

• AI for Creative Strategy and Testing - before/after as a proven ad creative pattern
• AI in Paid Advertising: The Complete Overview - transformation narratives in paid campaigns
• Audience Research with AI - understanding which transformations resonate with your audience