Add Image Generation from Prompts: Implement new functionality to generate images from prompts, including backend processing, API integration, and frontend handling with progress modal. Update settings and registry for new AI function.

frontend/src/config/pages/images.config.tsx

@@ -49,6 +49,7 @@ export const createImagesPageConfig = (
     setStatusFilter: (value: string) => void;
     setCurrentPage: (page: number) => void;
     maxInArticleImages?: number; // Optional: max in-article images to display
+    onGenerateImages?: (contentId: number) => void; // Handler for generate images button
   }
 ): ImagesPageConfig => {
   const maxImages = handlers.maxInArticleImages || 5; // Default to 5 in-article images
@@ -99,13 +100,13 @@ export const createImagesPageConfig = (
     });
   }
 
-  // Add overall status column
+  // Add overall status column with Generate Images button
   columns.push({
     key: 'overall_status',
     label: 'Status',
     sortable: false,
-    width: '120px',
-    render: (value: string) => {
+    width: '180px',
+    render: (value: string, row: ContentImagesGroup) => {
       const statusColors: Record<string, 'success' | 'warning' | 'error' | 'info'> = {
         'complete': 'success',
         'partial': 'info',
@@ -118,13 +119,34 @@ export const createImagesPageConfig = (
         'pending': 'Pending',
         'failed': 'Failed',
       };
+      
+      // Check if there are any pending images with prompts
+      const hasPendingImages = 
+        (row.featured_image?.status === 'pending' && row.featured_image?.prompt) ||
+        row.in_article_images.some(img => img.status === 'pending' && img.prompt);
+      
       return (
-        <Badge
-          color={statusColors[value] || 'warning'}
-          size="sm"
-        >
-          {labels[value] || value}
-        </Badge>
+        <div className="flex items-center gap-2">
+          <Badge
+            color={statusColors[value] || 'warning'}
+            size="sm"
+          >
+            {labels[value] || value}
+          </Badge>
+          {hasPendingImages && handlers.onGenerateImages && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                handlers.onGenerateImages!(row.content_id);
+              }}
+              className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-brand-500 hover:bg-brand-600 rounded transition-colors"
+              title="Generate Images"
+            >
+              <BoltIcon className="w-3 h-3" />
+              Generate
+            </button>
+          )}
+        </div>
       );
     },
   });