# Image Generation Workflow: Arising Media
Last updated: 2026-06-09
---
## Purpose
Standardized process for generating, validating, and deploying AI images across all Arising Media client static sites. Every decision made in this workflow is documented so any agent or session can continue without context loss.
---
## Stack
API: Google Gemini (generativelanguage.googleapis.com)
SDK: google-genai (NOT the deprecated google-generativeai package)
Draft model: gemini-2.5-flash-image (Nano Banana: Speed Mode)
Final model: imagen-4.0-generate-001 (Imagen 4: Quality Mode)
Format: JPEG, 85% quality, max 1600px wide
---
## Phase 1: Site Analysis (before any generation)
Before generating images, read:
- index.html (home page structure)
- All CSS files (understand existing color tokens, dark/light sections)
- About, services, contact pages (identify where images add value)
Map each candidate image slot:
- What HTML section will it go in?
- Is it a CSS background-image or an inline img tag?
- What overlay/treatment is needed for text readability?
- What dimensions/aspect ratio does the slot require?
Document this in: 01-model-selection.md (image plan table)
---
## Phase 2: Prompt Engineering
### Rules
- Always reference the site color palette in the prompt (dark navy, slate blue, gold accents)
- Specify "no text" and "no logos" for background images
- Specify "photorealistic" for all marketing images
- NO PEOPLE. NO FACES. Hardware, infrastructure, and environment only across all client sites
- This applies to all slots: hero, about, services, contact, location: no exceptions
- Reason: faces introduce identity/representation risk and age poorly. Hardware stays neutral and professional.
### Prompt structure
[Subject] + [Environment] + [Lighting] + [Mood/Tone] + [Technical quality terms] + [Exclusions]
### Example (hero background)
"Professional enterprise server room, long corridor of dark rack servers with blue LED ambient lighting, deep perspective, dark navy background, cinematic shallow depth of field, no people, photorealistic, ultra detailed"
### Per-project brand prompt additions
Append brand-specific color and tone language to every prompt for a given client.
Example: "dark navy and blue ambient lighting, professional, enterprise, no text"
---
## Phase 3: Generation Script Pattern
```python
from google import genai
from google.genai import types
client = genai.Client(api_key='KEY')
response = client.models.generate_images(
model='imagen-4.0-generate-001',
prompt='PROMPT',
config=types.GenerateImagesConfig(
number_of_images=1,
aspect_ratio='16:9', # 16:9 | 4:3 | 3:2 | 1:1 | 9:16
output_mime_type='image/jpeg',
)
)
with open('output.jpg', 'wb') as f:
f.write(response.generated_images[0].image.image_bytes)
```
Validate: file must be > 10,000 bytes. Anything smaller is an API error or empty response.
CRITICAL: Vision validation is mandatory before saving any image:
The toolbox script (ai-imagen-generate.sh) automatically sends each generated image to
gemini-2.0-flash for visual inspection. It asks: "Does this image contain people, faces,
hands, silhouettes, or body parts?" If YES: the image is rejected, prompt is tightened,
and generation retries up to 3 times. Only images that pass inspection are saved.
Claude cannot visually inspect images: the vision validation step is the enforcement gate.
---
## Phase 4: Placement Patterns
### Pattern A: CSS background-image with dark overlay (hero sections)
Used when: image sits behind text on a dark section
Implementation: CSS only, no HTML change
```css
.ct-hero {
background: var(--ct-black); /* fallback */
background-image: linear-gradient(rgba(12,15,24,0.82), rgba(12,15,24,0.92)), url('/assets/images/hero-bg.jpg');
background-size: cover;
background-position: center;
}
```
Overlay opacity guide:
- 0.82/0.92 = subtle image visible, text fully readable
- 0.90/0.95 = very subtle texture only
- 0.70/0.80 = image prominent (use only if no text overlay)
### Pattern B: Inline img tag (editorial sections)
Used when: image is a standalone visual element between content sections
Implementation: add img tag + container div
```html
```
### Pattern C: Grid column image (about/story sections)
Used when: image shares a row with text content
Implementation: add img to existing grid + expand grid columns
```html
```
---
## Phase 5: CSP and nginx Updates
Any new image source domain requires a CSP update in nginx.conf.
For Google Maps tiles: add `https://*.googleapis.com https://*.gstatic.com` to `img-src`
For self-hosted images: `img-src 'self' data:` is sufficient: no change needed
---
## Phase 6: Docker Rebuild and Verify
After every image + HTML change:
```bash
cd /home/sirdrez/arisingmedia-websites/[client]
docker stop [container-name]
docker rm [container-name]
docker build -t [image-name] .
docker run -d --name [container-name] -p [port]:80 [image-name]
sleep 2
curl -s -o /dev/null -w "%{http_code}" http://localhost:[port]/
```
Verify image loads: `curl -s -o /dev/null -w "%{http_code}" http://localhost:[port]/assets/images/hero-bg.jpg`
Expected: 200 with Content-Type: image/jpeg
---
## File Naming Convention
Pattern: `{page}-{slot}.jpg`
| Slot | File name | Aspect |
|------|-----------|--------|
| Home hero background | hero-bg.jpg | 16:9 |
| Home intro visual | intro-visual.jpg | 3:2 |
| About story | about-visual.jpg | 4:3 |
| Services hub header | services-bg.jpg | 16:9 |
| Contact page | contact-bg.jpg | 16:9 |
| Location page | location-bg.jpg | 16:9 |
---
## Logging Requirement
Every generation run must produce a log entry in:
`am-webdesign-sops/image-gen-workflow/02-generation-log.md`
Log must include: date, client, model, each image file name, prompt used, file size in bytes, placement pattern used, Docker rebuild result.
