Banner maker

A wide banner with deliberate negative space for a headline. Aspect ratio is a

README Try it Source

Showcase — Banner maker

A wide banner with deliberate negative space for a headline. Aspect ratio is a parameter (size for OpenAI, aspect_ratio for Imagen) and it reshapes the composition more than you'd guess — a scene built for a square is not the scene built for a 16:9 banner.

Run

bash bootstrap-secrets.sh              # reads ../../../../.env, writes secrets/
docker compose up --build              # default: PROVIDER=openai

Open http://localhost:3000. Gemini: PROVIDER=gemini docker compose up --build.

What's where

backend/ai_openai.py — wide size="1536x1024" plus a composition hint.
backend/ai_gemini.py — Imagen with aspect_ratio="16:9".
frontend/app/page.tsx — subject box; renders the banner.

Stop

docker compose down

Run locally

Download the project as a ZIP and run it with Docker. Brings up a FastAPI backend + Next.js frontend on localhost:3000.

Download banner-maker.zip

unzip banner-maker.zip
cd banner-maker
bash bootstrap-secrets.sh   # one-time: pulls API keys into ./secrets
docker compose up --build   # default provider: openai
# or:  PROVIDER=gemini docker compose up --build

The same modules the Run button hits. The whole project (frontend, Dockerfile, compose) is in the ZIP under README.

`backend/ai_openai.py`

"""Showcase 3 (OpenAI): banner maker.

Same generation, a wide aspect ratio and a composition hint that leaves room for
a headline. Aspect ratio is a parameter (`size`), and it changes the result more
than people expect — a scene composed for a square is not the same scene
composed for a banner.
"""
from openai import OpenAI

_client = OpenAI()

_MODEL = "gpt-image-1"

_STYLE = ("A wide website banner illustration: {subject}. Balanced composition "
          "with clear negative space on one side for a headline. Modern, clean, "
          "high quality.")


def run(subject: str) -> str:
    s = subject.strip()
    if not s:
        return "Describe the banner subject (e.g. 'a mountain sunrise for a travel blog')."
    response = _client.images.generate(model=_MODEL, prompt=_STYLE.format(subject=s), size="1536x1024")
    return f"data:image/png;base64,{response.data[0].b64_json}"

`backend/ai_gemini.py`

"""Showcase 3 (Gemini): banner maker via the image model.

Same wide-composition recipe; aspect ratio is expressed in the prompt (the
generate_content image path doesn't take Imagen's aspect_ratio config).
"""
import base64
import os

from google import genai
from google.genai import types

_client = genai.Client(api_key=os.environ["GEMINI_API_KEY"])

_MODEL = "gemini-2.5-flash-image"

_STYLE = ("A wide 16:9 website banner illustration: {subject}. Balanced composition "
          "with clear negative space on one side for a headline. Modern, clean, "
          "high quality.")


def _generate(prompt: str) -> str:
    response = _client.models.generate_content(
        model=_MODEL, contents=prompt,
        config=types.GenerateContentConfig(response_modalities=["TEXT", "IMAGE"]),
    )
    for part in response.candidates[0].content.parts:
        if getattr(part, "inline_data", None) and part.inline_data.data:
            b64 = base64.b64encode(part.inline_data.data).decode()
            return f"data:image/png;base64,{b64}"
    return "No image was generated — try a different subject."


def run(subject: str) -> str:
    s = subject.strip()
    if not s:
        return "Describe the banner subject (e.g. 'a mountain sunrise for a travel blog')."
    return _generate(_STYLE.format(subject=s))