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.py—images.generate, returns a base64 PNG data URI.backend/ai_gemini.py— Gemini's image model viagenerate_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.
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
.gitignoreREADME.es.mdREADME.mdbackend/Dockerfilebackend/ai_gemini.pybackend/ai_openai.pybackend/main.pybackend/requirements.txtbootstrap-secrets.shdocker-compose.ymlfrontend/Dockerfilefrontend/app/layout.tsxfrontend/app/page.tsxfrontend/next.config.tsfrontend/package.jsonfrontend/tsconfig.json