image generation function implementation

frontend/src/components/common/ImageQueueModal.tsx

@@ -26,6 +26,7 @@ interface ImageQueueModalProps {
   onClose: () => void;
   queue: ImageQueueItem[];
   totalImages: number;
+  taskId?: string | null;
   onUpdateQueue?: (queue: ImageQueueItem[]) => void;
 }
 
@@ -34,6 +35,7 @@ export default function ImageQueueModal({
   onClose,
   queue,
   totalImages,
+  taskId,
   onUpdateQueue,
 }: ImageQueueModalProps) {
   const [localQueue, setLocalQueue] = useState<ImageQueueItem[]>(queue);
@@ -48,6 +50,101 @@ export default function ImageQueueModal({
     }
   }, [localQueue, onUpdateQueue]);
 
+  // Polling for task status updates
+  useEffect(() => {
+    if (!isOpen || !taskId) return;
+
+    const pollInterval = setInterval(async () => {
+      try {
+        const response = await fetch(`/api/v1/system/settings/task_progress/${taskId}/`);
+        if (!response.ok) {
+          console.error('Failed to fetch task status');
+          return;
+        }
+        const data = await response.json();
+
+        // Check state (task_progress returns 'state', not 'status')
+        const taskState = data.state || data.status;
+        
+        if (taskState === 'SUCCESS' || taskState === 'FAILURE') {
+          clearInterval(pollInterval);
+          // Update final state
+          if (taskState === 'SUCCESS' && data.result) {
+            updateQueueFromTaskResult(data.result);
+          } else if (taskState === 'SUCCESS' && data.meta && data.meta.result) {
+            // Some responses have result in meta
+            updateQueueFromTaskResult(data.meta.result);
+          }
+          return;
+        }
+
+        // Update progress from task meta
+        if (data.meta) {
+          updateQueueFromTaskMeta(data.meta);
+        }
+      } catch (error) {
+        console.error('Error polling task status:', error);
+      }
+    }, 1000); // Poll every second
+
+    return () => clearInterval(pollInterval);
+  }, [isOpen, taskId]);
+
+  const updateQueueFromTaskMeta = (meta: any) => {
+    const { current_image, total_images, completed, failed, results } = meta;
+
+    setLocalQueue(prevQueue => {
+      return prevQueue.map((item, index) => {
+        const result = results?.find((r: any) => r.image_id === item.imageId);
+
+        if (result) {
+          return {
+            ...item,
+            status: result.status === 'completed' ? 'completed' :
+                    result.status === 'failed' ? 'failed' : 'processing',
+            progress: result.status === 'completed' ? 100 :
+                     result.status === 'failed' ? 0 :
+                     index + 1 < current_image ? 100 :
+                     index + 1 === current_image ? 50 : 0,
+            imageUrl: result.image_url || item.imageUrl,
+            error: result.error || null
+          };
+        }
+
+        // Update based on current_image index
+        if (index + 1 < current_image) {
+          return { ...item, status: 'completed', progress: 100 };
+        } else if (index + 1 === current_image) {
+          return { ...item, status: 'processing', progress: 50 };
+        }
+
+        return item;
+      });
+    });
+  };
+
+  const updateQueueFromTaskResult = (result: any) => {
+    const { results } = result;
+
+    setLocalQueue(prevQueue => {
+      return prevQueue.map((item) => {
+        const taskResult = results?.find((r: any) => r.image_id === item.imageId);
+
+        if (taskResult) {
+          return {
+            ...item,
+            status: taskResult.status === 'completed' ? 'completed' : 'failed',
+            progress: taskResult.status === 'completed' ? 100 : 0,
+            imageUrl: taskResult.image_url || item.imageUrl,
+            error: taskResult.error || null
+          };
+        }
+
+        return item;
+      });
+    });
+  };
+
   if (!isOpen) return null;
 
   const getStatusIcon = (status: string) => {