Files

Desktop c47d18c18d icon

2025-11-12 03:59:34 +05:00

8.7 KiB

Raw Blame History

Image Generation Implementation Changelog

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:

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

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

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

path('integrations/image_generation/', integration_image_gen_settings_viewset, name='integration-image-gen-settings')

Added ViewSet:

integration_image_gen_settings_viewset = IntegrationSettingsViewSet.as_view({
    'get': 'get_image_generation_settings',
})

How It Works

User Flow:

User clicks "Generate Images" button on Images page
System fetches max_in_article_images from IntegrationSettings
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)
Modal opens immediately showing all progress bars at 0%
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:

✅ frontend/src/components/common/ImageQueueModal.tsx (NEW)
✅ frontend/src/pages/Writer/Images.tsx (UPDATED)
✅ frontend/src/services/api.ts (UPDATED)

Backend:

✅ backend/igny8_core/modules/system/integration_views.py (UPDATED)
✅ backend/igny8_core/modules/system/urls.py (UPDATED)

Testing Checklist

Modal opens immediately when "Generate Images" button is clicked
Modal shows correct number of progress bars (1 featured + N in-article)
Progress bars display correct labels and content titles
All progress bars start at 0% with "Pending" status
Modal can be closed (when not processing)
API endpoint returns correct max_in_article_images value
Queue respects max_in_article_images setting
Only pending images with prompts are included in queue

Next Steps (Stage 2)

Planned Features:

Start Actual Generation
- Call generateImages() API with image IDs
- Handle async task response with task_id
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.)
Sequential Processing
- Process images one at a time (sequential)
- Update status: pending → processing → completed/failed
- Update progress percentage for each image
Error Handling
- Mark failed images with error message
- Continue processing other images if one fails
- Display error in queue item
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

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

Date: 2025-01-XX
Status: Completed

Changes Made:

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

End of Stage 1 Changelog

8.7 KiB Raw Blame History