71 lines
4.5 KiB
Markdown
71 lines
4.5 KiB
Markdown
# Image Editor Page (Images List & Generation)
|
|
|
|
## Purpose
|
|
Manage generated images linked to writer content: list images grouped by content, filter/search, trigger generation, update statuses, and download/view images. Uses table template patterns similar to content/tasks.
|
|
|
|
## Code Locations (exact paths)
|
|
- Page: `frontend/src/pages/Writer/Images.tsx`
|
|
- API: `frontend/src/services/api` (`fetchContentImages`, `fetchImageGenerationSettings`, `generateImages`, `bulkUpdateImagesStatus`, `deleteContent`, `bulkDeleteContent`)
|
|
- Config: `frontend/src/config/pages/images.config` (columns/filters)
|
|
- UI components: `frontend/src/components/common/ImageQueueModal`, `frontend/src/components/common/SingleRecordStatusUpdateModal`, `frontend/src/components/common/PageHeader`, `frontend/src/components/navigation/ModuleNavigationTabs`, `frontend/src/components/ui/modal`
|
|
- Hooks: `frontend/src/hooks/useResourceDebug` (AI logs toggle), `frontend/src/hooks/useProgressModal` (via modal usage pattern)
|
|
|
|
## High-Level Responsibilities
|
|
- Fetch and render content-image groups with client-side filtering/search/sorting/pagination.
|
|
- Trigger image generation for selected content with queue modal and provider/model selection.
|
|
- Update image status in bulk and delete images/content.
|
|
- Provide AI function log visibility when resource debug is enabled.
|
|
|
|
## Detailed Behavior
|
|
- Data load: `loadImages` calls `fetchContentImages({})`, applies client-side search (`content_title`) and status filter (`overall_status`), sorts (default `content_title`), paginates client-side (page size 10), and adds `id` field mirroring `content_id` for selection.
|
|
- Filters: search text; status dropdown; sort controls; pagination tracked in local state.
|
|
- Actions:
|
|
- Generate images: opens `ImageQueueModal`, builds queue items, calls `generateImages` with provider/model; tracks taskId/model/provider state; shows AI logs when resource debug enabled.
|
|
- Bulk status update: `bulkUpdateImagesStatus` on selected ids.
|
|
- Delete (single/bulk): uses `deleteContent`/`bulkDeleteContent`.
|
|
- Download/view: handled by row actions in config (template-driven).
|
|
- Navigation: writer tabs rendered via `ModuleNavigationTabs` (Queue/Drafts/Images/Review/Published).
|
|
- Resource debug: AI logs captured only when `useResourceDebug` returns true; `addAiLog` appends logs for visibility.
|
|
- Loading UX: `loading` + `showContent` gating; debounced search resets page as needed.
|
|
|
|
## Data Structures / Models Involved (no code)
|
|
- `ContentImagesGroup`: content_id, content_title, overall_status, images[].
|
|
- `ContentImage`: individual image entries with URL/status/prompt (from API).
|
|
- Generation settings: provider/model options from `fetchImageGenerationSettings`.
|
|
|
|
## Execution Flow
|
|
- `useEffect` → `loadImages`.
|
|
- Filters/sort/page changes → recompute client-side subsets.
|
|
- Generate action → open modal → call `generateImages` → optionally log steps → reload images.
|
|
- Status update/delete actions → call API → reload.
|
|
|
|
## Cross-Module Interactions
|
|
- Tied to writer content records; delete actions use writer content endpoints.
|
|
- AI generation leverages shared API endpoints that consume credits server-side.
|
|
|
|
## State Transitions
|
|
- `loading`/`showContent` manage render timing; modal open states for queue/status/image viewer.
|
|
- `aiLogs` maintained only when debug is enabled.
|
|
|
|
## Error Handling
|
|
- Toast errors for load/generate/update/delete; generation errors also recorded in AI logs when enabled.
|
|
- Debounced search handles errors gracefully by keeping prior data until reload.
|
|
|
|
## Tenancy Rules
|
|
- Backend enforces account/site/sector; client passes no explicit tenant fields beyond any default filters in API layer.
|
|
|
|
## Billing Rules (if applicable)
|
|
- Image generation consumes credits on backend; page performs no credit gating.
|
|
|
|
## Background Tasks / Schedulers (if applicable)
|
|
- None; generation is user-triggered, and polling is not used here.
|
|
|
|
## Key Design Considerations
|
|
- Client-side pagination used because API returns grouped images; keeps UI responsive without extra endpoints.
|
|
- Resource debug toggle avoids unnecessary log storage unless explicitly enabled.
|
|
|
|
## How Developers Should Work With This Module
|
|
- If server adds server-side pagination/filtering, remove client-side slicing and pass filters to API.
|
|
- Extend row actions by updating `images.config` with handlers wired to new behaviors.
|
|
- Keep generation flow in sync with backend provider/model options; surface credit estimates if backend exposes them.
|