arisingmedia-web-sops/image-gen-workflow/00-workflow-overview.md

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

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

.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

<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

<!-- 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:

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.