Hybrid Infographic

Generate beautiful infographics by combining AI-generated backgrounds with pixel-perfect HTML text overlays.

Why Hybrid?

AI models (Playground, Flux, SDXL) create stunning visual aesthetics but struggle with readable text
HTML/Playwright renders perfect typography, numbers, and data
Combining both gives the best of both worlds

Workflow

Generate background — Use Playground for abstract data visualization aesthetics
Generate hero elements (optional) — Characters, icons, illustrations related to the topic
Remove backgrounds — Use rembg to make hero elements transparent
Review generated images — Read images to verify quality
Create HTML composite — Layer background + transparent elements + text with CSS
Screenshot — Use Playwright to capture final composite

Background Removal

Use rembg (installed in sdxl-env) to remove backgrounds from hero elements:

source ~/ai-tools/sdxl-env/bin/activate
python -c "
from rembg import remove
from PIL import Image
input_img = Image.open('input.png')
output_img = remove(input_img)
output_img.save('output_transparent.png')
"

This ensures clean compositing without white boxes around elements.

Step 1: Generate Background

~/bin/sdxl "abstract infographic background, [THEME KEYWORDS], flowing lines, charts, graphs, icons, gradient [COLORS], professional business style, no text, minimal" -o /tmp/infographic_bg.png --model playground --steps 25

Theme keyword examples:

Data viz: “data visualization elements, network nodes, analytics”
Tech: “circuit patterns, digital grid, technology abstract”
Finance: “upward trends, growth charts, business metrics”
Clean: “geometric shapes, minimal design, whitespace”

Step 2: Create HTML Overlay

Template structure (save to /tmp/infographic.html):

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1024px;
      height: 1024px;
      font-family: 'Inter', sans-serif;
      background: url('/tmp/infographic_bg.png') center/cover;
      color: white;
    }
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.3); /* Adjust opacity for readability */
      display: flex;
      flex-direction: column;
      padding: 60px;
    }
    .title { font-size: 48px; font-weight: 900; text-transform: uppercase; }
    .stat-number {
      font-size: 96px;
      font-weight: 900;
      background: linear-gradient(135deg, #00d4ff, #a855f7);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .stat-label { font-size: 28px; font-weight: 600; }
  </style>
</head>
<body>
  <div class="overlay">
    <!-- Title, stats, content here -->
  </div>
</body>
</html>

Customization tips:

Adjust .overlay background opacity based on background complexity
Use gradient text for big numbers (eye-catching, matches AI aesthetic)
Keep font sizes large for impact
Use Inter font (clean, professional, great for data)

Step 3: Screenshot with Playwright

# Run in sdxl-env (has Playwright installed)
source ~/ai-tools/sdxl-env/bin/activate
python -c "
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={'width': 1024, 'height': 1024})
    page.goto('file:///tmp/infographic.html')
    page.wait_for_timeout(1000)  # Let fonts load
    page.screenshot(path='/tmp/infographic_final.png')
    browser.close()
"

Quick Reference

Component	Tool	Notes
Background	`~/bin/sdxl --model playground`	Abstract, no text
Hero elements	`~/bin/sdxl --model playground`	Characters, icons, use “transparent background style”
Text overlay	HTML + CSS	Use Inter font, gradient numbers, glass-morphism cards
Emoji	Twemoji or Segoe UI Emoji	Visual interest without extra image gen
Screenshot	Playwright (in sdxl-env)	1024x1024 viewport

Emoji Integration

Use emoji for quick visual accents in stats or labels:

Twemoji (cross-platform, consistent):

<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js"></script>
<script>twemoji.parse(document.body)</script>

Segoe UI Emoji (Windows Fluent style):

.emoji { font-family: 'Segoe UI Emoji', sans-serif; }

Example usage:

<div class="stat">
  <span class="emoji">🚀</span>
  <span class="stat-number">67%</span>
  <span class="stat-label">adoption rate</span>
</div>

Good emoji for infographics: 📈 💰 ⚡ 🎯 🔥 🚀 💡 ✨ 🤖 📊 💼 🏆

Hero Element Prompts

For generating composable elements with clean edges:

# Character/mascot
~/bin/sdxl "friendly AI robot assistant, cute robot character, glowing eyes, transparent background style, minimal, clean illustration" --model playground

# Icons  
~/bin/sdxl "3D icon of [SUBJECT], glossy, minimal, transparent background, clean" --model playground

# Abstract shapes
~/bin/sdxl "abstract glowing orb, energy sphere, transparent background, minimal" --model playground

HTML Composition Pattern

Use CSS to layer multiple AI-generated elements:

<body style="background: url('background.png') center/cover;">
  <img src="robot.png" class="hero-element" />
  <div class="text-overlay">
    <!-- Stats and text here -->
  </div>
</body>

Glass-morphism stat cards:

.stat-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);
}

Color Palettes

Tech/Data (blue-purple):

Background gradient: #1a1a2e → #4a1a6b
Accent: #00d4ff, #a855f7

Business (blue-teal):

Background: #0f172a → #134e4a
Accent: #38bdf8, #2dd4bf

Bold (orange-pink):

Background: #1f1f1f → #3d1a1a
Accent: #f97316, #ec4899