# WP Agentic Writer: Recommended Best Flow for Images (Cost-Optimized)

## The Challenge You Asked About

**Your question:**
> "After article generation, how do we get image placement with alt by writing agent, then generate recommended images? Need to be cost-efficient with image prompts."

**The answer:** Use the **writing agent itself** to analyze placement + generate prompts (tiny cost), then show user a preview before spending on image generation.

---

## Table of Contents

1. [Recommended Best Flow (Option A - SAFEST)](#recommended-best-flow-option-a---safest)
2. [Alternative Flows (B & C)](#alternative-flows-b--c)
3. [Your Configuration (from screenshot)](#your-configuration-from-screenshot)
4. [Cost Breakdown](#cost-breakdown)
5. [Implementation Priority](#implementation-priority)

---

## Recommended Best Flow (Option A - SAFEST)

This is the flow I recommend for **maximum cost control + quality** based on your plugin's design.

### Step-by-Step

```
┌──────────────────────────────────────────────────────────┐
│ USER ACTION: Generate Article                            │
│ (Using Writing Model: Claude 3.5 Sonnet from preset)    │
└─────────────────┬────────────────────────────────────────┘
                  ↓
┌──────────────────────────────────────────────────────────┐
│ PLUGIN AUTOMATIC (Backend)                               │
├──────────────────────────────────────────────────────────┤
│ Step 1: ANALYZE PLACEMENT                                │
│ • Model: Same Writing Model (Claude 3.5 Sonnet)         │
│ • Input: Full article markdown                           │
│ • Output: JSON with placement points                     │
│ • Cost: $0.0008 (tiny token call)                        │
│                                                          │
│ Step 2: GENERATE IMAGE PROMPTS                           │
│ • Model: Same Writing Model                              │
│ • Input: Article + placement points                      │
│ • Output: 3 image specs (prompt + alt + placement)       │
│ • Cost: $0.0015 (tiny token call)                        │
│                                                          │
│ Status: "Analyzing images..." → "Ready to review"        │
└─────────────────┬────────────────────────────────────────┘
                  ↓
┌──────────────────────────────────────────────────────────┐
│ MODAL: IMAGE PREVIEW (User Review - $0 cost)            │
├──────────────────────────────────────────────────────────┤
│                                                          │
│ "3 images planned for your article"                     │
│                                                          │
│ ╔════════════════════════════════════════════════════╗  │
│ ║ IMAGE 1: HERO (After Introduction)                 ║  │
│ ║                                                     ║  │
│ ║ Placement: After intro, before "Getting Started"   ║  │
│ ║ Type: Hero/Dashboard                               ║  │
│ ║                                                     ║  │
│ ║ Prompt (EDITABLE):                                 ║  │
│ ║ "N8n workflow automation dashboard screenshot,     ║  │
│ ║  showing colorful nodes on blue background,        ║  │
│ ║  modern minimalist SaaS interface"                 ║  │
│ ║                                                     ║  │
│ ║ Alt Text: "N8n automation dashboard with nodes"    ║  │
│ ║                                                     ║  │
│ ║ [Edit Prompt ✎] [Generate $0.03] [Skip]           ║  │
│ ╚════════════════════════════════════════════════════╝  │
│                                                          │
│ ╔════════════════════════════════════════════════════╗  │
│ ║ IMAGE 2: DIAGRAM (After Section 1)                 ║  │
│ ║                                                     ║  │
│ ║ Placement: After "Understanding Workflows"         ║  │
│ ║ Type: Technical Diagram                             ║  │
│ ║                                                     ║  │
│ ║ Prompt (EDITABLE):                                 ║  │
│ ║ "Workflow architecture diagram showing trigger,    ║  │
│ ║  condition, action components with arrows,         ║  │
│ ║  technical line-art style, blue palette"           ║  │
│ ║                                                     ║  │
│ ║ Alt Text: "Workflow trigger-condition-action flow" ║  │
│ ║                                                     ║  │
│ ║ [Edit Prompt ✎] [Generate $0.03] [Skip]           ║  │
│ ╚════════════════════════════════════════════════════╝  │
│                                                          │
│ ╔════════════════════════════════════════════════════╗  │
│ ║ IMAGE 3: SCREENSHOT (Before Conclusion)            ║  │
│ ║                                                     ║  │
│ ║ Placement: Before "Conclusion"                      ║  │
│ ║ Type: Product Screenshot                            ║  │
│ ║                                                     ║  │
│ ║ Prompt (EDITABLE):                                 ║  │
│ ║ "N8n real-time monitoring dashboard showing        ║  │
│ ║  workflow execution logs, status indicators,       ║  │
│ ║  professional SaaS product design"                 ║  │
│ ║                                                     ║  │
│ ║ Alt Text: "N8n real-time monitoring interface"     ║  │
│ ║                                                     ║  │
│ ║ [Edit Prompt ✎] [Generate $0.03] [Skip]           ║  │
│ ╚════════════════════════════════════════════════════╝  │
│                                                          │
│ ─────────────────────────────────────────────────────  │
│ Cost Estimate: Individual generation                    │
│ • Generate all 3: $0.09–0.21 (based on image tier)     │
│ • Generate 2: $0.06–0.14                               │
│ • Generate 1: $0.03–0.07                               │
│                                                          │
│ [Generate All 3] [Generate Selected] [Skip Images]     │
│ [Cancel]                                                │
└──────────────────┬───────────────────────────────────────┘
                  ↓
    USER CHOOSES (examples):
    • Click [Generate All 3] → All images generated now
    • Click [Generate] on Image 1 only → Hero only
    • Edit Image 1 prompt, then [Generate] → Custom prompt
    • Click [Skip Images] → No images, save cost
                  ↓
┌──────────────────────────────────────────────────────────┐
│ AUTOMATIC IMAGE INSERTION                                │
├──────────────────────────────────────────────────────────┤
│ For each generated image:                                │
│ 1. Download image from FLUX.2/image model                │
│ 2. Upload to WordPress media library                     │
│ 3. Insert into article at placement point               │
│ 4. Add alt text automatically                            │
│                                                          │
│ Status: "Inserting images..." → "Done!"                 │
└─────────────────┬────────────────────────────────────────┘
                  ↓
┌──────────────────────────────────────────────────────────┐
│ FINAL RESULT: Article with Images                        │
├──────────────────────────────────────────────────────────┤
│                                                          │
│ # Getting Started with N8n Automation                   │
│                                                          │
│ Introduction paragraph...                               │
│                                                          │
│ ![N8n automation dashboard with nodes](image1.jpg)      │
│                                                          │
│ ## Getting Started                                       │
│ Content...                                               │
│                                                          │
│ ## Understanding Workflows                               │
│ Content...                                               │
│                                                          │
│ ![Workflow trigger-condition-action flow](image2.jpg)   │
│                                                          │
│ ## Advanced Monitoring                                   │
│ Content...                                               │
│                                                          │
│ ![N8n real-time monitoring interface](image3.jpg)       │
│                                                          │
│ [Preview in Gutenberg] [Publish] [Download MD]          │
└──────────────────────────────────────────────────────────┘
```

### Key Features of Option A

✅ **Cost control:** User sees cost before spending  
✅ **Quality control:** Can edit prompts before generation  
✅ **Flexibility:** Generate 0, 1, 2, or 3 images  
✅ **User review:** Know exactly what images they'll get  
✅ **Selective generation:** Generate only what matters  
✅ **Smart placement:** Analyzed by writing agent (best understanding)  
✅ **Efficient prompts:** Precise, contextual, no trial-and-error  

### Costs with Option A

| Scenario | Analysis | Prompts | Images | Total |
|----------|----------|---------|--------|-------|
| User generates all 3 | $0.0008 | $0.0015 | $0.09–0.21 | $0.092–0.212 |
| User generates 2 | $0.0008 | $0.0015 | $0.06–0.14 | $0.063–0.142 |
| User generates 1 (hero) | $0.0008 | $0.0015 | $0.03–0.07 | $0.032–0.072 |
| User skips images | $0.0008 | $0.0015 | $0 | $0.0023 |

**Best case:** User generates 1 hero = **$0.032–0.072/article** (vs $0.21–0.70 with trial-and-error)

---

## Alternative Flows (B & C)

### Option B: Automatic Full Generation (FASTEST)

```
Article generated
    ↓
Plugin automatically generates ALL images without review
    ↓
"Article + images ready!" (1-2 minutes total)
```

**Pros:** One-click, minimal user interaction  
**Cons:** Always costs full image budget (no user control)  
**Cost:** Full $0.12–0.35 (analysis + all images always generated)

**Use when:** User has unlimited budget OR you offer it as "premium fast mode"

---

### Option C: Smart Selective with Recommendations (BALANCED)

```
Similar to Option A, but plugin recommends:
- "Hero image has best impact/cost ratio" [Generate hero]
- "Diagrams help understanding" [Generate diagram?]
- "Screenshot is optional" [Generate?]
```

**Pros:** Guides user toward cost-effective choices  
**Cons:** Slightly more UI complexity  
**Cost:** User-controlled (guided)

**Use when:** You want to educate users about cost-benefit tradeoffs

---

## Your Configuration (from screenshot)

Based on your current model configuration:

```
Chat Model: Google: Gemini 2.5 Flash
Clarity Model: Google: Gemini 2.5 Flash  
Planning Model: Google: Gemini 2.5 Flash
Writing Model: Anthropic: Claude 3.5 Sonnet
Refinement Model: Anthropic: Claude 3.5 Sonnet
Image Model: Gpt 4o (or FLUX.2 from preset)
```

### Recommended Implementation

```php
// Option A implementation (safest, recommended)

// 1. After article generation, automatically:
$placement_data = analyze_article_for_images(
    $article,
    'anthropic/claude-3.5-sonnet'  // Use same writing model
);

// 2. Generate prompts
$image_specs = generate_image_prompts(
    $article,
    $placement_data,
    'anthropic/claude-3.5-sonnet'  // Same model
);

// 3. Show UI (don't generate images yet)
show_image_review_modal($image_specs);

// 4. User clicks [Generate All] or individual [Generate]
// 5. Only then call image generation

// Cost so far: $0.0023 (tiny)
// User controls image generation cost: $0.03–0.21
```

---

## Cost Breakdown

### Analysis + Prompt Generation (Automatic, Non-Optional)

| Task | Tokens In | Tokens Out | Cost |
|------|-----------|------------|------|
| Placement analysis | 2,000 | 800 | $0.0008 |
| Prompt generation | 3,000 | 1,000 | $0.0015 |
| **Total** | **5,000** | **1,800** | **$0.0023** |

**This is already paid by article generation (uses writing model already called).**

### Image Generation (User-Controlled)

**Per image (based on model tier):**

| Image Model | Cost/Image | 3 Images |
|------------|-----------|----------|
| FLUX.2 klein (Budget) | $0.03–0.05 | $0.09–0.15 |
| Riverflow/FLUX.2 Pro (Balanced) | $0.06–0.10 | $0.18–0.30 |
| FLUX.2 max (Premium) | $0.07–0.21 | $0.21–0.63 |

### Total Article Cost

| Scenario | Text | Analysis | Prompts | Images | Total |
|----------|------|----------|---------|--------|-------|
| Article only | $0.03–0.07 | $0.0008 | $0.0015 | $0 | **$0.032–0.072** |
| Article + 1 hero | $0.03–0.07 | $0.0008 | $0.0015 | $0.03–0.21 | **$0.062–0.292** |
| Article + 2 images | $0.03–0.07 | $0.0008 | $0.0015 | $0.06–0.42 | **$0.092–0.492** |
| Article + 3 images | $0.03–0.07 | $0.0008 | $0.0015 | $0.09–0.63 | **$0.122–0.702** |

---

## Implementation Priority

### Phase 1: Core Logic (3-4 hours)

```php
✓ analyze_article_for_images()        // Identify placements
✓ generate_image_prompts()             // Create specs
✓ generate_image_from_prompt()         // Call image model
✓ insert_images_into_article()         // Embed in markdown
```

### Phase 2: User Interface (4-5 hours)

```php
✓ Image review modal UI                // Show 3 specs
✓ [Generate] button per image          // Individual generation
✓ [Generate All] button                // Batch generation
✓ [Edit Prompt] capability             // Let users customize
✓ Cost calculator display              // Show estimated cost
```

### Phase 3: Polish (2-3 hours)

```php
✓ Image preview before insertion       // Show user the image
✓ Error handling + retry logic         // Handle failures
✓ Success notifications                // Feedback
✓ Progress indicators                  // "Generating image 2/3..."
```

---

## Why Option A is Best for Your Plugin

1. **User controls costs** → They see preview before spending
2. **Respects budgets** → Budget tier users generate 1 image
3. **Quality focus** → Users can edit prompts if needed
4. **Flexible** → Some users skip images entirely (saves costs)
5. **Educational** → Users learn what good prompts look like
6. **Smart prompts** → Using writing agent (best context understanding)

---

## Summary: Recommended Best Flow

```
AUTOMATIC (Backend):
1. Analyze article for placement    → $0.0008
2. Generate image specs/prompts     → $0.0015
3. Show user preview modal           → $0 (free review)

MANUAL (User Selects):
4. User clicks [Generate] on images → User controls cost
5. Plugin inserts into article       → Automatic

RESULT:
- Article + images ready for Gutenberg
- User spent only what they wanted
- Total cost: $0.032–0.702 (user-controlled)
- Quality: High (smart placement + customizable prompts)
```

---

**Document version:** 1.0  
**Date:** January 27, 2026  
**Status:** Ready for Implementation
