Course ES
← back to chapter

Text to image

A prompt in, a square image out, rendered inline. The whole craft is prompt

Showcase — Text to image

A prompt in, a square image out, rendered inline. The whole craft is prompt specificity — subject, style, lighting, composition. The backend returns the image as a data URI; the page renders it.

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.pyimages.generate, returns a base64 PNG data URI.
  • backend/ai_gemini.py — Gemini's image model via generate_content, bytes base64-encoded.
  • frontend/app/page.tsx — prompt box; renders the returned data URI as an image.

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 text-to-image.zip

unzip text-to-image.zip
cd text-to-image
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

Type some input, pick a provider, and run the same code shown in Source against the live API. Sign-in required.


  

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

backend/ai_openai.py

"""Showcase 1 (OpenAI): text to image.

A prompt in, a square image out, returned as a data URI the page renders inline.
The whole craft is in how specific the prompt is — subject, style, lighting,
composition.
"""
from openai import OpenAI

_client = OpenAI()

_MODEL = "gpt-image-1"


def run(prompt: str) -> str:
    p = prompt.strip()
    if not p:
        return "Enter a prompt describing the image you want."
    response = _client.images.generate(model=_MODEL, prompt=p, size="1024x1024")
    return f"data:image/png;base64,{response.data[0].b64_json}"

backend/ai_gemini.py

"""Showcase 1 (Gemini): text to image.

Gemini's image model via generate_content (the standalone Imagen endpoint is
deprecated). The image comes back as an inline data part; we base64 it into a
data URI for the page.
"""
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"


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 rephrasing the prompt."


def run(prompt: str) -> str:
    p = prompt.strip()
    if not p:
        return "Enter a prompt describing the image you want."
    return _generate(p)

Project files

  • .gitignore
  • README.es.md
  • README.md
  • backend/Dockerfile
  • backend/ai_gemini.py
  • backend/ai_openai.py
  • backend/main.py
  • backend/requirements.txt
  • bootstrap-secrets.sh
  • docker-compose.yml
  • frontend/Dockerfile
  • frontend/app/layout.tsx
  • frontend/app/page.tsx
  • frontend/next.config.ts
  • frontend/package.json
  • frontend/tsconfig.json