Add Image Generation Settings Endpoint and Update Frontend Modal: Implement a new API endpoint to fetch image generation settings, enhance the ImageQueueModal to display progress and status, and integrate the settings into the image generation workflow.
This commit is contained in:
Desktop
240
docs/IMAGE_GENERATION_CHANGELOG.md
Normal file
240
docs/IMAGE_GENERATION_CHANGELOG.md
Normal file
@@ -0,0 +1,240 @@
|
||||
# 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"
|
||||
- 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`
|
||||
|
||||
---
|
||||
|
||||
**End of Stage 1 Changelog**
|
||||
|
||||
Reference in New Issue
Block a user