318 lines
10 KiB
Markdown
318 lines
10 KiB
Markdown
# Image Generation Implementation Changelog
|
|
|
|
## Stage 1: Pre-Queue Modal Display - Completed ✅
|
|
|
|
**Date:** 2025-01-XX
|
|
**Status:** Completed
|
|
**Goal:** Open modal immediately showing all progress bars before any API calls
|
|
|
|
---
|
|
|
|
## Changes Made
|
|
|
|
### 1. Frontend Components
|
|
|
|
#### Created: `frontend/src/components/common/ImageQueueModal.tsx`
|
|
- **Purpose:** Display image generation queue with individual progress bars
|
|
- **Features:**
|
|
- Shows all images that will be generated with individual progress bars
|
|
- Displays queue number, label, content title, status, and progress percentage
|
|
- Includes thumbnail placeholder for generated images
|
|
- Supports 4 states: `pending`, `processing`, `completed`, `failed`
|
|
- Styled similar to WP plugin's image-queue-processor.js modal
|
|
- Responsive design with dark mode support
|
|
- Prevents closing while processing
|
|
- Shows completion summary in footer
|
|
|
|
**Key Props:**
|
|
- `isOpen`: Boolean to control modal visibility
|
|
- `onClose`: Callback when modal is closed
|
|
- `queue`: Array of `ImageQueueItem` objects
|
|
- `totalImages`: Total number of images in queue
|
|
- `onUpdateQueue`: Optional callback to update queue state
|
|
|
|
**ImageQueueItem Interface:**
|
|
```typescript
|
|
{
|
|
imageId: number | null;
|
|
index: number;
|
|
label: string;
|
|
type: 'featured' | 'in_article';
|
|
position?: number;
|
|
contentTitle: string;
|
|
status: 'pending' | 'processing' | 'completed' | 'failed';
|
|
progress: number; // 0-100
|
|
imageUrl: string | null;
|
|
error: string | null;
|
|
}
|
|
```
|
|
|
|
#### Updated: `frontend/src/pages/Writer/Images.tsx`
|
|
- **Added Imports:**
|
|
- `fetchImageGenerationSettings` from `../../services/api`
|
|
- `ImageQueueModal` and `ImageQueueItem` from `../../components/common/ImageQueueModal`
|
|
|
|
- **Added State:**
|
|
```typescript
|
|
const [isQueueModalOpen, setIsQueueModalOpen] = useState(false);
|
|
const [imageQueue, setImageQueue] = useState<ImageQueueItem[]>([]);
|
|
const [currentContentId, setCurrentContentId] = useState<number | null>(null);
|
|
```
|
|
|
|
- **Added Function: `buildImageQueue()`**
|
|
- Builds image queue structure from content images
|
|
- Includes featured image (if pending and has prompt)
|
|
- Includes in-article images (up to `max_in_article_images` from settings)
|
|
- Sorts in-article images by position
|
|
- Returns array of `ImageQueueItem` objects
|
|
|
|
- **Updated Function: `handleGenerateImages()`**
|
|
- **Stage 1 Implementation:**
|
|
1. Fetches image generation settings to get `max_in_article_images`
|
|
2. Builds image queue using `buildImageQueue()`
|
|
3. Opens modal immediately with all progress bars at 0%
|
|
4. Collects image IDs for future API call (Stage 2)
|
|
5. Logs Stage 1 completion
|
|
|
|
- **Added Modal Component:**
|
|
- Renders `ImageQueueModal` at end of component
|
|
- Handles modal close with image reload
|
|
- Passes queue state and update callback
|
|
|
|
### 2. API Services
|
|
|
|
#### Updated: `frontend/src/services/api.ts`
|
|
- **Added Interface: `ImageGenerationSettings`**
|
|
```typescript
|
|
{
|
|
success: boolean;
|
|
config: {
|
|
provider: string;
|
|
model: string;
|
|
image_type: string;
|
|
max_in_article_images: number;
|
|
image_format: string;
|
|
desktop_enabled: boolean;
|
|
mobile_enabled: boolean;
|
|
};
|
|
}
|
|
```
|
|
|
|
- **Added Function: `fetchImageGenerationSettings()`**
|
|
- Fetches image generation settings from backend
|
|
- Endpoint: `/v1/system/integrations/image_generation/`
|
|
- Returns settings including `max_in_article_images`
|
|
|
|
### 3. Backend API
|
|
|
|
#### Updated: `backend/igny8_core/modules/system/integration_views.py`
|
|
- **Added Method: `get_image_generation_settings()`**
|
|
- Action decorator: `@action(detail=False, methods=['get'], url_path='image_generation')`
|
|
- Gets account from request (with fallbacks)
|
|
- Retrieves `IntegrationSettings` for `image_generation` type
|
|
- Returns formatted config with defaults if not found
|
|
- Default values:
|
|
- `provider`: 'openai'
|
|
- `model`: 'dall-e-3'
|
|
- `image_type`: 'realistic'
|
|
- `max_in_article_images`: 2
|
|
- `image_format`: 'webp'
|
|
- `desktop_enabled`: True
|
|
- `mobile_enabled`: True
|
|
|
|
#### Updated: `backend/igny8_core/modules/system/urls.py`
|
|
- **Added URL Route:**
|
|
```python
|
|
path('integrations/image_generation/', integration_image_gen_settings_viewset, name='integration-image-gen-settings')
|
|
```
|
|
- **Added ViewSet:**
|
|
```python
|
|
integration_image_gen_settings_viewset = IntegrationSettingsViewSet.as_view({
|
|
'get': 'get_image_generation_settings',
|
|
})
|
|
```
|
|
|
|
---
|
|
|
|
## How It Works
|
|
|
|
### User Flow:
|
|
1. User clicks "Generate Images" button on Images page
|
|
2. System fetches `max_in_article_images` from IntegrationSettings
|
|
3. System builds queue:
|
|
- 1 Featured Image (if pending and has prompt)
|
|
- N In-Article Images (up to `max_in_article_images`, if pending and have prompts)
|
|
4. **Modal opens immediately** showing all progress bars at 0%
|
|
5. Each progress bar displays:
|
|
- Queue number (1, 2, 3...)
|
|
- Label (Featured Image, In-Article Image 1, etc.)
|
|
- Content title
|
|
- Status: "Pending" (with TimeIcon)
|
|
- Progress: 0%
|
|
- Thumbnail placeholder: "No image"
|
|
|
|
### Queue Calculation:
|
|
```
|
|
Total Images = 1 (featured) + min(pending_in_article_count, max_in_article_images)
|
|
```
|
|
|
|
Example:
|
|
- Settings: `max_in_article_images = 3`
|
|
- Content has: 1 featured (pending), 5 in-article (pending)
|
|
- Queue: 1 featured + 3 in-article = **4 total progress bars**
|
|
|
|
---
|
|
|
|
## Files Modified
|
|
|
|
### Frontend:
|
|
1. ✅ `frontend/src/components/common/ImageQueueModal.tsx` (NEW)
|
|
2. ✅ `frontend/src/pages/Writer/Images.tsx` (UPDATED)
|
|
3. ✅ `frontend/src/services/api.ts` (UPDATED)
|
|
|
|
### Backend:
|
|
1. ✅ `backend/igny8_core/modules/system/integration_views.py` (UPDATED)
|
|
2. ✅ `backend/igny8_core/modules/system/urls.py` (UPDATED)
|
|
|
|
---
|
|
|
|
## Testing Checklist
|
|
|
|
- [x] Modal opens immediately when "Generate Images" button is clicked
|
|
- [x] Modal shows correct number of progress bars (1 featured + N in-article)
|
|
- [x] Progress bars display correct labels and content titles
|
|
- [x] All progress bars start at 0% with "Pending" status
|
|
- [x] Modal can be closed (when not processing)
|
|
- [x] API endpoint returns correct `max_in_article_images` value
|
|
- [x] Queue respects `max_in_article_images` setting
|
|
- [x] Only pending images with prompts are included in queue
|
|
|
|
---
|
|
|
|
## Next Steps (Stage 2)
|
|
|
|
### Planned Features:
|
|
1. **Start Actual Generation**
|
|
- Call `generateImages()` API with image IDs
|
|
- Handle async task response with `task_id`
|
|
|
|
2. **Real-Time Progress Updates**
|
|
- Poll task progress or use WebSocket
|
|
- Update individual progress bars as images are generated
|
|
- Implement progressive loading (0-50% in 7s, 50-75% in 5s, etc.)
|
|
|
|
3. **Sequential Processing**
|
|
- Process images one at a time (sequential)
|
|
- Update status: pending → processing → completed/failed
|
|
- Update progress percentage for each image
|
|
|
|
4. **Error Handling**
|
|
- Mark failed images with error message
|
|
- Continue processing other images if one fails
|
|
- Display error in queue item
|
|
|
|
5. **Completion Handling**
|
|
- Show generated image thumbnails
|
|
- Update all statuses to completed/failed
|
|
- Reload images list on modal close
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- Stage 1 focuses on **immediate visual feedback** - modal opens instantly
|
|
- No API calls are made in Stage 1 (only settings fetch)
|
|
- Queue structure is built client-side from existing image data
|
|
- Modal is ready to receive progress updates in Stage 2
|
|
- Design matches WP plugin's image-queue-processor.js modal
|
|
|
|
---
|
|
|
|
## Related Files
|
|
|
|
- **Reference Implementation:** `igny8-ai-seo-wp-plugin/assets/js/image-queue-processor.js`
|
|
- **Implementation Plan:** `docs/IMAGE_GENERATION_IMPLEMENTATION_PLAN.md`
|
|
- **Backend Function:** `backend/igny8_core/ai/functions/generate_images_from_prompts.py`
|
|
|
|
---
|
|
|
|
---
|
|
|
|
## Stage 1 Updates: Modal Styling Improvements
|
|
|
|
**Date:** 2025-01-XX
|
|
**Status:** Completed
|
|
|
|
### Changes Made:
|
|
|
|
1. **Updated Modal Background**
|
|
- Changed from `bg-black bg-opacity-50` to standard modal backdrop
|
|
- Now uses `Modal` component with `bg-gray-400/50 backdrop-blur-[32px]` (standard glass effect)
|
|
- Matches all other modals in the system
|
|
|
|
2. **Replaced Emojis with React Icons**
|
|
- Header: Replaced 🎨 emoji with `FileIcon` component
|
|
- Pending status: Replaced ⏳ emoji with `TimeIcon` component
|
|
- Processing status: Added spinning SVG icon
|
|
- Completed status: Uses `CheckCircleIcon` component
|
|
- Failed status: Uses `ErrorIcon` component
|
|
|
|
3. **Standard Modal Width**
|
|
- Changed from custom width to `max-w-4xl` (standard modal width)
|
|
- Uses `Modal` component which provides consistent styling across system
|
|
|
|
### Files Modified:
|
|
- ✅ `frontend/src/components/common/ImageQueueModal.tsx` (UPDATED)
|
|
|
|
### Visual Improvements:
|
|
- Modal now has proper blur/glass backdrop effect
|
|
- Icons are consistent with system design
|
|
- Modal width matches other modals in the system
|
|
- Better visual hierarchy with icon in header
|
|
|
|
---
|
|
|
|
---
|
|
|
|
## Stage 1 Cleanup: Removed Duplicate/Unused Code
|
|
|
|
**Date:** 2025-01-XX
|
|
**Status:** Completed
|
|
|
|
### Changes Made:
|
|
|
|
1. **Removed Image Generation Code from ProgressModal**
|
|
- Removed all code related to `generate_images_from_prompts` function
|
|
- **Kept** code for `generate_image_prompts` (image prompt generation) - this is different and still uses ProgressModal
|
|
- Removed step definitions for image generation from prompts
|
|
- Removed success message handling for image generation
|
|
- Removed subtitle and message formatting for image generation
|
|
|
|
2. **Removed ImageQueue from useProgressModal**
|
|
- Removed `ImageQueueItem` interface (now only in ImageQueueModal)
|
|
- Removed `imageQueue` state from useProgressModal hook
|
|
- Removed image queue extraction from task progress meta
|
|
- Removed image queue from return interface
|
|
- **Reason:** ImageQueueModal handles its own queue state, no need for duplicate
|
|
|
|
3. **Updated Changelog**
|
|
- Fixed emoji reference to use icon description instead
|
|
|
|
### Files Modified:
|
|
- ✅ `frontend/src/components/common/ProgressModal.tsx` (CLEANED - removed image generation code)
|
|
- ✅ `frontend/src/hooks/useProgressModal.ts` (CLEANED - removed imageQueue)
|
|
- ✅ `docs/IMAGE_GENERATION_CHANGELOG.md` (UPDATED)
|
|
|
|
### What Was Kept:
|
|
- ✅ **Image Prompt Generation** (`generate_image_prompts`) - Still uses ProgressModal (not touched)
|
|
- ✅ **ImageQueueModal** - Our new modal for image generation from prompts
|
|
|
|
### What Was Removed:
|
|
- ❌ **Image Generation from Prompts** code in ProgressModal (duplicate, not needed)
|
|
- ❌ **ImageQueue** state in useProgressModal (duplicate, not needed)
|
|
|
|
---
|
|
|
|
**End of Stage 1 Changelog**
|
|
|