salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated iamge prompt flow adn frotnend backend

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-11 18:10:18 +00:00
parent fa696064e2
commit a1b21f39f6
10 changed files with 611 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
frontend/src/components/common/ContentImageCell.tsx Normal file
View File

@@ -0,0 +1,150 @@
/**
* ContentImageCell Component
* Displays image prompt, placeholder, or actual image based on status
*/
import React, { useState } from 'react';
import Badge from '../ui/badge/Badge';
export interface ContentImageData {
id?: number;
image_type?: string;
image_url?: string | null;
image_path?: string | null;
prompt?: string | null;
status: string;
position?: number;
created_at?: string;
updated_at?: string;
}
interface ContentImageCellProps {
image: ContentImageData | null;
maxPromptLength?: number;
}
export default function ContentImageCell({ image, maxPromptLength = 100 }: ContentImageCellProps) {
const [showFullPrompt, setShowFullPrompt] = useState(false);
if (!image) {
return (
<div className="text-gray-400 dark:text-gray-500 text-sm">-</div>
);
}
const prompt = image.prompt || '';
const shouldTruncate = prompt.length > maxPromptLength;
const displayPrompt = showFullPrompt || !shouldTruncate ? prompt : `${prompt.substring(0, maxPromptLength)}...`;
return (
<div className="space-y-2">
{/* Prompt Text */}
{prompt && (
<div className="text-sm">
<p className="text-gray-700 dark:text-gray-300">
{displayPrompt}
{shouldTruncate && (
<button
onClick={() => setShowFullPrompt(!showFullPrompt)}
className="ml-1 text-brand-500 hover:text-brand-600 text-xs"
>
{showFullPrompt ? 'Show less' : 'Show more'}
</button>
)}
</p>
</div>
)}
{/* Image Display */}
<div className="relative">
{image.status === 'pending' && (
<div className="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
<div className="text-center">
<svg
className="w-8 h-8 mx-auto text-gray-400 dark:text-gray-500 mb-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<p className="text-xs text-gray-500 dark:text-gray-400">Pending</p>
</div>
</div>
)}
{image.status === 'generated' && image.image_url && (
<a
href={image.image_url}
target="_blank"
rel="noopener noreferrer"
className="block group"
>
<img
src={image.image_url}
alt={prompt || 'Generated image'}
className="w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600 group-hover:opacity-80 transition-opacity"
onError={(e) => {
// Fallback to placeholder if image fails to load
const target = e.target as HTMLImageElement;
target.style.display = 'none';
target.parentElement!.innerHTML = `
<div class="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
<p class="text-xs text-gray-500 dark:text-gray-400">Image not available</p>
</div>
`;
}}
/>
</a>
)}
{image.status === 'generated' && !image.image_url && (
<div className="w-full h-24 bg-yellow-100 dark:bg-yellow-900/20 rounded border border-yellow-300 dark:border-yellow-700 flex items-center justify-center">
<p className="text-xs text-yellow-700 dark:text-yellow-400">No URL available</p>
</div>
)}
{image.status === 'failed' && (
<div className="w-full h-24 bg-red-100 dark:bg-red-900/20 rounded border border-red-300 dark:border-red-700 flex items-center justify-center">
<div className="text-center">
<svg
className="w-6 h-6 mx-auto text-red-500 mb-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p className="text-xs text-red-700 dark:text-red-400">Failed</p>
</div>
</div>
)}
{/* Status Badge */}
<div className="absolute top-1 right-1">
<Badge
color={
image.status === 'generated' ? 'success' :
image.status === 'failed' ? 'error' :
'warning'
}
size="xs"
variant="light"
>
{image.status}
</Badge>
</div>
</div>
</div>
);
}

212
frontend/src/config/pages/images.config.tsx
View File

@@ -1,17 +1,13 @@
/**
* Images Page Configuration
* Centralized config for Images page table, filters, and actions
* Centralized config for Content Images page table, filters, and actions
* Shows one row per content with featured and in-article images
*/
import React from 'react';
import {
titleColumn,
statusColumn,
createdColumn,
} from '../snippets/columns.snippets';
import Badge from '../../components/ui/badge/Badge';
import { formatRelativeDate } from '../../utils/date';
import { TaskImage } from '../../services/api';
import ContentImageCell, { ContentImageData } from '../../components/common/ContentImageCell';
import { ContentImagesGroup } from '../../services/api';
export interface ColumnConfig {
key: string;
@@ -35,121 +31,112 @@ export interface HeaderMetricConfig {
label: string;
value: number;
accentColor: 'blue' | 'green' | 'amber' | 'purple';
calculate: (data: { images: any[]; totalCount: number }) => number;
calculate: (data: { images: ContentImagesGroup[]; totalCount: number }) => number;
}
export interface ImagesPageConfig {
columns: ColumnConfig[];
filters: FilterConfig[];
headerMetrics: HeaderMetricConfig[];
maxInArticleImages: number; // Maximum number of in-article image columns to show
}
export const createImagesPageConfig = (
handlers: {
searchTerm: string;
setSearchTerm: (value: string) => void;
imageTypeFilter: string;
setImageTypeFilter: (value: string) => void;
statusFilter: string;
setStatusFilter: (value: string) => void;
setCurrentPage: (page: number) => void;
maxInArticleImages?: number; // Optional: max in-article images to display
}
): ImagesPageConfig => {
const maxImages = handlers.maxInArticleImages || 5; // Default to 5 in-article images
// Build columns dynamically based on max in-article images
const columns: ColumnConfig[] = [
{
key: 'content_title',
label: 'Content Title',
sortable: false,
width: '250px',
render: (_value: string, row: ContentImagesGroup) => (
<div>
<a
href={`/writer/content/${row.content_id}`}
className="font-medium text-brand-500 hover:text-brand-600 dark:text-brand-400"
>
{row.content_title}
</a>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
ID: {row.content_id}
</div>
</div>
),
},
{
key: 'featured_image',
label: 'Featured Image',
sortable: false,
width: '200px',
render: (_value: any, row: ContentImagesGroup) => (
<ContentImageCell image={row.featured_image} />
),
},
];
// Add in-article image columns dynamically
for (let i = 1; i <= maxImages; i++) {
columns.push({
key: `in_article_${i}`,
label: `In-Article ${i}`,
sortable: false,
width: '200px',
render: (_value: any, row: ContentImagesGroup) => {
const image = row.in_article_images.find(img => img.position === i);
return <ContentImageCell image={image || null} />;
},
});
}
// Add overall status column
columns.push({
key: 'overall_status',
label: 'Status',
sortable: false,
width: '120px',
render: (value: string) => {
const statusColors: Record<string, 'success' | 'warning' | 'error' | 'info'> = {
'complete': 'success',
'partial': 'info',
'pending': 'warning',
'failed': 'error',
};
const labels: Record<string, string> = {
'complete': 'Complete',
'partial': 'Partial',
'pending': 'Pending',
'failed': 'Failed',
};
return (
<Badge
color={statusColors[value] || 'warning'}
size="sm"
>
{labels[value] || value}
</Badge>
);
},
});
return {
columns: [
{
key: 'task_title',
label: 'Task',
sortable: false,
width: '250px',
render: (_value: string, row: TaskImage) => (
<span className="font-medium text-gray-800 dark:text-white/90">
{row.task_title || '-'}
</span>
),
},
{
key: 'image_type',
label: 'Image Type',
sortable: false,
width: '150px',
render: (value: string) => (
<Badge color="info" size="sm" variant="light">
{value?.replace('_', ' ') || '-'}
</Badge>
),
},
{
key: 'image_url',
label: 'Image',
sortable: false,
width: '200px',
render: (value: string) => {
if (!value) return <span className="text-gray-400">-</span>;
return (
<a
href={value}
target="_blank"
rel="noopener noreferrer"
className="text-brand-500 hover:text-brand-600 text-sm truncate block max-w-[200px]"
>
View Image
</a>
);
},
},
{
...statusColumn,
sortable: true,
sortField: 'status',
render: (value: string) => {
const statusColors: Record<string, 'success' | 'warning' | 'error'> = {
'pending': 'warning',
'generated': 'success',
'failed': 'error',
};
return (
<Badge
color={statusColors[value] || 'warning'}
size="sm"
>
{value}
</Badge>
);
},
},
{
key: 'position',
label: 'Position',
sortable: false,
width: '100px',
render: (value: number) => value || 0,
},
{
...createdColumn,
sortable: true,
sortField: 'created_at',
render: (value: string) => formatRelativeDate(value),
},
],
columns,
filters: [
{
key: 'search',
label: 'Search',
type: 'text',
placeholder: 'Search by task title...',
},
{
key: 'image_type',
label: 'Image Type',
type: 'select',
options: [
{ value: '', label: 'All Types' },
{ value: 'featured', label: 'Featured Image' },
{ value: 'desktop', label: 'Desktop Image' },
{ value: 'mobile', label: 'Mobile Image' },
{ value: 'in_article', label: 'In-Article Image' },
],
placeholder: 'Search by content title...',
},
{
key: 'status',
@@ -157,38 +144,39 @@ export const createImagesPageConfig = (
type: 'select',
options: [
{ value: '', label: 'All Status' },
{ value: 'complete', label: 'Complete' },
{ value: 'partial', label: 'Partial' },
{ value: 'pending', label: 'Pending' },
{ value: 'generated', label: 'Generated' },
{ value: 'failed', label: 'Failed' },
],
},
],
headerMetrics: [
{
label: 'Total Images',
label: 'Total Content',
value: 0,
accentColor: 'blue' as const,
calculate: (data) => data.totalCount || 0,
},
{
label: 'Generated',
label: 'Complete',
value: 0,
accentColor: 'green' as const,
calculate: (data) => data.images.filter((i: TaskImage) => i.status === 'generated').length,
calculate: (data) => data.images.filter((i: ContentImagesGroup) => i.overall_status === 'complete').length,
},
{
label: 'Partial',
value: 0,
accentColor: 'info' as const,
calculate: (data) => data.images.filter((i: ContentImagesGroup) => i.overall_status === 'partial').length,
},
{
label: 'Pending',
value: 0,
accentColor: 'amber' as const,
calculate: (data) => data.images.filter((i: TaskImage) => i.status === 'pending').length,
},
{
label: 'Failed',
value: 0,
accentColor: 'error' as const,
calculate: (data) => data.images.filter((i: TaskImage) => i.status === 'failed').length,
calculate: (data) => data.images.filter((i: ContentImagesGroup) => i.overall_status === 'pending').length,
},
],
maxInArticleImages: maxImages,
};
};

43
frontend/src/pages/Writer/Content.tsx
View File

@@ -3,7 +3,7 @@
* Displays content from Content table with filters and pagination
*/
import { useState, useEffect, useMemo, useCallback } from 'react';
import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import TablePageTemplate from '../../templates/TablePageTemplate';
import {
fetchContent,
@@ -16,6 +16,8 @@ import { FileIcon } from '../../icons';
import { createContentPageConfig } from '../../config/pages/content.config';
import { useSectorStore } from '../../store/sectorStore';
import { usePageSizeStore } from '../../store/pageSizeStore';
import ProgressModal from '../../components/common/ProgressModal';
import { useProgressModal } from '../../hooks/useProgressModal';
export default function Content() {
const toast = useToast();
@@ -41,6 +43,10 @@ export default function Content() {
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
const [showContent, setShowContent] = useState(false);
// Progress modal for AI functions
const progressModal = useProgressModal();
const hasReloadedRef = useRef(false);
// Load content - wrapped in useCallback
const loadContent = useCallback(async () => {
setLoading(true);
@@ -152,9 +158,16 @@ export default function Content() {
const result = await generateImagePrompts([row.id]);
if (result.success) {
if (result.task_id) {
toast.success('Image prompts generation started');
// Open progress modal for async task
progressModal.openModal(
result.task_id,
'Generate Image Prompts',
'ai-generate-image-prompts-01-desktop'
);
} else {
// Synchronous completion
toast.success(`Image prompts generated: ${result.prompts_created || 0} prompt${(result.prompts_created || 0) === 1 ? '' : 's'} created`);
loadContent(); // Reload to show new prompts
}
} else {
toast.error(result.error || 'Failed to generate image prompts');
@@ -163,7 +176,7 @@ export default function Content() {
toast.error(`Failed to generate prompts: ${error.message}`);
}
}
}, [toast]);
}, [toast, progressModal, loadContent]);
return (
<>
@@ -207,6 +220,30 @@ export default function Content() {
onRowAction={handleRowAction}
getItemDisplayName={(row: ContentType) => row.meta_title || row.title || `Content #${row.id}`}
/>
{/* Progress Modal for AI Functions */}
<ProgressModal
isOpen={progressModal.isOpen}
title={progressModal.title}
percentage={progressModal.progress.percentage}
status={progressModal.progress.status}
message={progressModal.progress.message}
details={progressModal.progress.details}
taskId={progressModal.taskId || undefined}
functionId={progressModal.functionId}
onClose={() => {
const wasCompleted = progressModal.progress.status === 'completed';
progressModal.closeModal();
// Reload data after modal closes (if completed)
if (wasCompleted && !hasReloadedRef.current) {
hasReloadedRef.current = true;
loadContent();
setTimeout(() => {
hasReloadedRef.current = false;
}, 1000);
}
}}
/>
</>
);
}

127
frontend/src/pages/Writer/Images.tsx
View File

@@ -1,17 +1,14 @@
/**
* Images Page - Built with TablePageTemplate
* Consistent with Keywords page layout, structure and design
* Shows content images grouped by content - one row per content
*/
import { useState, useEffect, useMemo, useCallback } from 'react';
import TablePageTemplate from '../../templates/TablePageTemplate';
import {
fetchTaskImages,
deleteTaskImage,
bulkDeleteTaskImages,
autoGenerateImages,
TaskImage,
TaskImageFilters,
fetchContentImages,
ContentImagesGroup,
ContentImagesResponse,
} from '../../services/api';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { FileIcon, DownloadIcon } from '../../icons';
@@ -21,23 +18,23 @@ export default function Images() {
const toast = useToast();
// Data state
const [images, setImages] = useState<TaskImage[]>([]);
const [images, setImages] = useState<ContentImagesGroup[]>([]);
const [loading, setLoading] = useState(true);
// Filter state
const [searchTerm, setSearchTerm] = useState('');
const [imageTypeFilter, setImageTypeFilter] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [selectedIds, setSelectedIds] = useState<string[]>([]);
// Pagination state
// Pagination state (client-side for now)
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [totalCount, setTotalCount] = useState(0);
const pageSize = 10;
// Sorting state
const [sortBy, setSortBy] = useState<string>('created_at');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
const [sortBy, setSortBy] = useState<string>('content_title');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
const [showContent, setShowContent] = useState(false);
// Load images - wrapped in useCallback
@@ -45,30 +42,46 @@ export default function Images() {
setLoading(true);
setShowContent(false);
try {
const ordering = sortBy ? `${sortDirection === 'desc' ? '-' : ''}${sortBy}` : '-created_at';
const filters: TaskImageFilters = {
...(imageTypeFilter && { image_type: imageTypeFilter }),
...(statusFilter && { status: statusFilter }),
page: currentPage,
ordering,
};
// Note: TaskImages API doesn't support search by task title yet
// We'll filter client-side for now
const data = await fetchTaskImages(filters);
const data: ContentImagesResponse = await fetchContentImages();
let filteredResults = data.results || [];
// Client-side search filter
if (searchTerm) {
filteredResults = filteredResults.filter(img =>
img.task_title?.toLowerCase().includes(searchTerm.toLowerCase())
filteredResults = filteredResults.filter(group =>
group.content_title?.toLowerCase().includes(searchTerm.toLowerCase())
);
}
setImages(filteredResults);
// Client-side status filter
if (statusFilter) {
filteredResults = filteredResults.filter(group =>
group.overall_status === statusFilter
);
}
// Client-side sorting
filteredResults.sort((a, b) => {
let aVal: any = a.content_title;
let bVal: any = b.content_title;
if (sortBy === 'overall_status') {
aVal = a.overall_status;
bVal = b.overall_status;
}
if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
return 0;
});
// Client-side pagination
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedResults = filteredResults.slice(startIndex, endIndex);
setImages(paginatedResults);
setTotalCount(filteredResults.length);
setTotalPages(Math.ceil(filteredResults.length / 10));
setTotalPages(Math.ceil(filteredResults.length / pageSize));
setTimeout(() => {
setShowContent(true);
@@ -80,7 +93,7 @@ export default function Images() {
setShowContent(true);
setLoading(false);
}
}, [currentPage, imageTypeFilter, statusFilter, sortBy, sortDirection, searchTerm]);
}, [currentPage, statusFilter, sortBy, sortDirection, searchTerm, toast]);
useEffect(() => {
loadImages();
@@ -101,7 +114,7 @@ export default function Images() {
// Handle sorting
const handleSort = (field: string, direction: 'asc' | 'desc') => {
setSortBy(field || 'created_at');
setSortBy(field || 'content_title');
setSortDirection(direction);
setCurrentPage(1);
};
@@ -116,37 +129,31 @@ export default function Images() {
} catch (error: any) {
throw error;
}
}, []);
}, [toast]);
// Bulk action handler
const handleBulkAction = useCallback(async (action: string, ids: string[]) => {
if (action === 'generate_images') {
try {
const numIds = ids.map(id => parseInt(id));
// Note: autoGenerateImages expects task_ids, not image_ids
// This would need to be adjusted based on API design
toast.info(`Generate images for ${ids.length} items`);
// await autoGenerateImages(numIds);
} catch (error: any) {
toast.error(`Failed to generate images: ${error.message}`);
}
} else {
toast.info(`Bulk action "${action}" for ${ids.length} items`);
}
}, []);
toast.info(`Bulk action "${action}" for ${ids.length} items`);
}, [toast]);
// Get max in-article images from the data (to determine column count)
const maxInArticleImages = useMemo(() => {
if (images.length === 0) return 5; // Default
const max = Math.max(...images.map(group => group.in_article_images.length));
return Math.max(max, 5); // At least 5 columns
}, [images]);
// Create page config
const pageConfig = useMemo(() => {
return createImagesPageConfig({
searchTerm,
setSearchTerm,
imageTypeFilter,
setImageTypeFilter,
statusFilter,
setStatusFilter,
setCurrentPage,
maxInArticleImages,
});
}, [searchTerm, imageTypeFilter, statusFilter]);
}, [searchTerm, statusFilter, maxInArticleImages]);
// Calculate header metrics
const headerMetrics = useMemo(() => {
@@ -160,9 +167,9 @@ export default function Images() {
return (
<TablePageTemplate
title="Task Images"
title="Content Images"
titleIcon={<FileIcon className="text-purple-500 size-5" />}
subtitle="Manage images for content tasks"
subtitle="Manage images for content articles"
columns={pageConfig.columns}
data={images}
loading={loading}
@@ -170,40 +177,25 @@ export default function Images() {
filters={pageConfig.filters}
filterValues={{
search: searchTerm,
image_type: imageTypeFilter,
status: statusFilter,
}}
onFilterChange={(key, value) => {
const stringValue = value === null || value === undefined ? '' : String(value);
if (key === 'search') {
setSearchTerm(stringValue);
} else if (key === 'image_type') {
setImageTypeFilter(stringValue);
} else if (key === 'status') {
setStatusFilter(stringValue);
}
setCurrentPage(1);
}}
onDelete={async (id: number) => {
await deleteTaskImage(id);
loadImages();
}}
onBulkDelete={async (ids: number[]) => {
// Note: bulkDeleteTaskImages doesn't exist yet, using individual deletes
for (const id of ids) {
await deleteTaskImage(id);
}
loadImages();
return { deleted_count: ids.length };
}}
onBulkExport={handleBulkExport}
onBulkAction={handleBulkAction}
getItemDisplayName={(row: TaskImage) => row.task_title || `Image ${row.id}`}
getItemDisplayName={(row: ContentImagesGroup) => row.content_title || `Content #${row.content_id}`}
onExport={async () => {
toast.info('Export functionality coming soon');
}}
onExportIcon={<DownloadIcon />}
selectionLabel="image"
selectionLabel="content"
pagination={{
currentPage,
totalPages,
@@ -222,7 +214,6 @@ export default function Images() {
headerMetrics={headerMetrics}
onFilterReset={() => {
setSearchTerm('');
setImageTypeFilter('');
setStatusFilter('');
setCurrentPage(1);
}}

30
frontend/src/services/api.ts
View File

@@ -1002,6 +1002,36 @@ export async function fetchTaskImages(filters: TaskImageFilters = {}): Promise<T
return fetchAPI(endpoint);
}
// Content Images (grouped by content)
export interface ContentImage {
id: number;
image_type: string;
image_url?: string | null;
image_path?: string | null;
prompt?: string | null;
status: string;
position: number;
created_at: string;
updated_at: string;
}
export interface ContentImagesGroup {
content_id: number;
content_title: string;
featured_image: ContentImage | null;
in_article_images: ContentImage[];
overall_status: 'pending' | 'partial' | 'complete' | 'failed';
}
export interface ContentImagesResponse {
count: number;
results: ContentImagesGroup[];
}
export async function fetchContentImages(): Promise<ContentImagesResponse> {
return fetchAPI('/v1/writer/images/content_images/');
}
export async function deleteTaskImage(id: number): Promise<void> {
return fetchAPI(`/v1/writer/images/${id}/`, {
method: 'DELETE',