203 lines
6.4 KiB
Markdown
203 lines
6.4 KiB
Markdown
# Image Generation Workflow — Arising Media
|
|
|
|
Last updated: 2026-05-10
|
|
Project reference: cobhamtech.com (first full run)
|
|
|
|
---
|
|
|
|
## 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"
|
|
|
|
### cobhamtech.com brand prompt additions
|
|
Always append to prompts for this client:
|
|
"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
|
|
<div class="container" style="padding-bottom: var(--space-lg);">
|
|
<img src="assets/images/intro-visual.jpg"
|
|
alt="Descriptive alt text"
|
|
style="width:100%;display:block;max-height:400px;object-fit:cover;">
|
|
</div>
|
|
```
|
|
|
|
### 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
|
|
<!-- Expand grid to: grid-template-columns: 1fr 1fr 420px -->
|
|
<div>
|
|
<img src="assets/images/about-visual.jpg"
|
|
alt="Alt text"
|
|
style="width:100%;display:block;border-radius:4px;">
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## 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.
|
|
|
|
---
|
|
|
|
## Cobhamtech.com Run Reference
|
|
|
|
Container: cobhamtech-site
|
|
Port: 8010
|
|
Assets path: /home/sirdrez/arisingmedia-websites/cobhamtech.com/assets/images/
|
|
Color tokens: --ct-black #0c0f18 / --ct-slate #1c2d42 / --ct-blue #2d5a9e / --ct-gold #c79330
|