feat: implement job-based architecture for generation

Author: yaroslav8765

custom/ImageGenerationCarousel.vue

@@ -190,7 +190,7 @@ const { t: $t } = useI18n();
 
 const prompt = ref('');
 const emit = defineEmits(['close', 'selectImage', 'error', 'updateCarouselIndex']);
-const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex']);
+const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex', 'regenerateImagesRefreshRate']);
 const images = ref([]);
 const loading = ref(false);
 const attachmentFiles = ref<string[]>([])
@@ -370,26 +370,24 @@ async function generateImages() {
   let error = null;
   try {
     resp = await callAdminForthApi({
-      path: `/plugin/${props.meta.pluginInstanceId}/regenerate_images`,
+      path: `/plugin/${props.meta.pluginInstanceId}/create-job`,
       method: 'POST',
       body: {
-        prompt: prompt.value,
+        actionType: 'regenerate_images',
         recordId: props.recordId,
-        fieldName: props.fieldName,
+        prompt: prompt.value,
+        fieldName: props.fieldName
       },
     });
   } catch (e) {
     console.error(e);
-  } finally {
-    clearInterval(ticker);
-    loadingTimer.value = null;
-    loading.value = false;
   }
+
   if (resp?.error) {
     error = resp.error;
   }
   if (!resp) {
-    error = $t('Error generating images, something went wrong');
+    error = $t('Error creating image generation job');
   }
 
   if (error) {
@@ -401,19 +399,50 @@ async function generateImages() {
         variant: 'danger',
         timeout: 'unlimited',
       });
-    emit('error', {
-      isError: true,
-      errorMessage: "Error re-generating images"
+    }
+    return;
+  }
+
+  const jobId = resp.jobId;
+  let jobStatus = null;
+  let jobResponse = null;
+  while (jobStatus !== 'completed' && jobStatus !== 'failed') {
+    jobResponse = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get-job-status`,
+      method: 'POST',
+      body: { jobId },
     });
+    if (jobResponse?.error) {
+      error = jobResponse.error;
+      break;
+    };
+    jobStatus = jobResponse?.job?.status;
+    if (jobStatus === 'failed') {
+      error = jobResponse?.job?.error || $t('Image generation job failed');
     }
+    await new Promise((resolve) => setTimeout(resolve, props.regenerateImagesRefreshRate));
+  }
+
+  if (error) {
+      adminforth.alert({
+        message: error,
+        variant: 'danger',
+        timeout: 'unlimited',
+      });
     return;
   }
 
+  const respImages = jobResponse?.job?.result[props.fieldName] || [];
+
   images.value = [
     ...images.value,
-    ...resp.images,
+    ...respImages,
   ];
 
+  clearInterval(ticker);
+  loadingTimer.value = null;
+  loading.value = false;
+
   await nextTick();
 
 

custom/VisionAction.vue

@@ -10,7 +10,7 @@
     header="Bulk AI Flow"
     class="!max-w-full w-full lg:w-[1600px] !lg:max-w-[1600px]"
     :buttons="[
-      { label: checkedCount > 1 ? 'Save fields' : 'Save field', options: { disabled: isLoading || checkedCount < 1 || isCriticalError || isFetchingRecords, loader: isLoading, class: 'w-fit sm:w-40' }, onclick: (dialog) => { saveData(); dialog.hide(); } },
+      { label: checkedCount > 1 ? 'Save fields' : 'Save field', options: { disabled: isLoading || checkedCount < 1 || isCriticalError || isFetchingRecords || isGeneratingImages || isAnalizingFields || isAnalizingImages, loader: isLoading, class: 'w-fit sm:w-40' }, onclick: (dialog) => { saveData(); dialog.hide(); } },
       { label: 'Cancel', onclick: (dialog) => dialog.hide() },
     ]"
   >
@@ -33,6 +33,7 @@
           @error="handleTableError"
           :carouselSaveImages="carouselSaveImages"
           :carouselImageIndex="carouselImageIndex"
+          :regenerateImagesRefreshRate="props.meta.refreshRates?.regenerateImages"
         />
       </div>
       <div class="text-red-600 flex items-center w-full">
@@ -88,9 +89,14 @@ const isCriticalError = ref(false);
 const isImageGenerationError = ref(false);
 const errorMessage = ref('');
 const checkedCount = ref(0);
+const isGeneratingImages = ref(false);
+const isAnalizingFields = ref(false);
+const isAnalizingImages = ref(false);
+
 
 const openDialog = async () => {
   confirmDialog.value.open();
+  isFetchingRecords.value = true;
   await getRecords();
   if (props.meta.isAttachFiles) {
     await getImages();
@@ -110,42 +116,39 @@ const openDialog = async () => {
       return acc;
     },{[primaryKey]: records.value[i][primaryKey]} as Record<string, boolean>);
   }
-  isFetchingRecords.value = true;
+  isFetchingRecords.value = false;
   
   if (props.meta.isImageGeneration) {
+    isGeneratingImages.value = true;
     runAiAction({
       endpoint: 'initial_image_generate',
       actionType: 'generate_images',
       responseFlag: isAiResponseReceivedImage,
     });
   }
   if (props.meta.isFieldsForAnalizeFromImages) {
+    isAnalizingImages.value = true;
     runAiAction({
       endpoint: 'analyze',
       actionType: 'analyze',
       responseFlag: isAiResponseReceivedAnalize,
     });
   }
   if (props.meta.isFieldsForAnalizePlain) {
+    isAnalizingFields.value = true;
     runAiAction({
       endpoint: 'analyze_no_images',
       actionType: 'analyze_no_images',
       responseFlag: isAiResponseReceivedAnalize,
     });
   }
-  
-  isFetchingRecords.value = false;
 }
  
 watch(selected, (val) => {
-  console.log('Selected changed:', val);
+  //console.log('Selected changed:', val);
   checkedCount.value = val.filter(item => item.isChecked === true).length;
 }, { deep: true });
 
-watch(carouselSaveImages, (val) => {
-  console.log('carouselSaveImages changed:', val);
-}, { deep: true });
-
 function fillCarouselSaveImages() {
   for (const item of selected.value) {
     const tempItem: any = {};
@@ -400,19 +403,20 @@ async function runAiAction({
   responseFlag: Ref<boolean[]>;
   updateOnSuccess?: boolean;
 }) {
-  const results: any[] = new Array(props.checkboxes.length);
   let hasError = false;
   let errorMessage = '';
-  
+  const jobsIds: { jobId: any; recordId: any; }[] = [];
   responseFlag.value = props.checkboxes.map(() => false);
 
+  //creating jobs
   const tasks = props.checkboxes.map(async (checkbox, i) => {
     try {
       const res = await callAdminForthApi({
-        path: `/plugin/${props.meta.pluginInstanceId}/${endpoint}`,
+        path: `/plugin/${props.meta.pluginInstanceId}/create-job`,
         method: 'POST',
         body: {
-          selectedId: checkbox,
+          actionType: actionType,
+          recordId: checkbox,
         },
       });
 
@@ -424,41 +428,96 @@ async function runAiAction({
         throw new Error(`${actionType} request returned empty response.`);
       }
 
-      results[i] = res;
-      
-      if (actionType !== 'analyze_no_images' || !props.meta.isFieldsForAnalizeFromImages) {
-        responseFlag.value[i] = true;
-      }
+      jobsIds.push({ jobId: res.jobId, recordId: checkbox });
+    } catch (e) {
+      console.error(`Error during ${actionType} for item ${i}:`, e);
+      hasError = true;
+      errorMessage = `Failed to ${actionType.replace('_', ' ')}. Please, try to re-run the action.`;
+      return { success: false, index: i, error: e };
+    }
+  });
+  await Promise.all(tasks);
 
-      if (res.result) {
+  //polling jobs
+  let isInProgress = true;
+  //if no jobs were created, skip polling
+  while (isInProgress) {
+    //check if at least one job is still in progress
+    let isAtLeastOneInProgress = false;
+    //checking status of each job
+    for (const { jobId, recordId } of jobsIds) {
+      //check job status
+      const jobResponse = await callAdminForthApi({
+        path: `/plugin/${props.meta.pluginInstanceId}/get-job-status`,
+        method: 'POST',
+        body: { jobId },
+      });
+      //check for errors
+      if (jobResponse?.error) {
+        console.error(`Error during ${actionType}:`, jobResponse.error);
+        break;
+      };
+      // extract job status
+      let jobStatus = jobResponse?.job?.status;
+      // check if job is still in progress. If in progress - skip to next job
+      if (jobStatus === 'in_progress') {
+        isAtLeastOneInProgress = true;
+      //if job is completed - update record data
+      } else if (jobStatus === 'completed') {
+        // finding index of the record in selected array
+        const index = selected.value.findIndex(item => String(item[primaryKey]) === String(recordId));
+        //if we are generating images - update carouselSaveImages with new image
         if (actionType === 'generate_images') {
-          for (const [key, value] of Object.entries(carouselSaveImages.value[i])) {
+          for (const [key, value] of Object.entries(carouselSaveImages.value[index])) {
             if (props.meta.outputImageFields?.includes(key)) {
-              carouselSaveImages.value[i][key] = [res.result[key]];
+              carouselSaveImages.value[index][key] = [jobResponse.job.result[key]];
             }
           }
         }
-
-        const pk = selected.value[i]?.[primaryKey];
+        //marking that we received response for this record
+        if (actionType !== 'analyze_no_images' || !props.meta.isFieldsForAnalizeFromImages) {
+          responseFlag.value[index] = true;
+        }
+        //updating selected with new data from AI
+        const pk = selected.value[index]?.[primaryKey];
         if (pk) {
-          selected.value[i] = {
-            ...selected.value[i],
-            ...res.result,
+          selected.value[index] = {
+            ...selected.value[index],
+            ...jobResponse.job.result,
             isChecked: true,
             [primaryKey]: pk,
           };
         }
+        //removing job from jobsIds
+        if (index !== -1) {
+          jobsIds.splice(jobsIds.findIndex(j => j.jobId === jobId), 1);
+        }
+        // checking one more time if we have in progress jobs
+        isAtLeastOneInProgress = true;
+        // if job is failed - set error
+      } else if (jobStatus === 'failed') {
+        adminforth.alert({
+          message: `Generation action "${actionType.replace('_', ' ')}" failed for record: ${recordId}. Error: ${jobResponse.job?.error || 'Unknown error'}`,
+          variant: 'danger',
+          timeout: 'unlimited',
+        });
       }
-      return { success: true, index: i, data: res };
-    } catch (e) {
-      console.error(`Error during ${actionType} for item ${i}:`, e);
-      hasError = true;
-      errorMessage = `Failed to ${actionType.replace('_', ' ')}. Please, try to re-run the action.`;
-      return { success: false, index: i, error: e };
     }
-  });
-
-  await Promise.all(tasks);
+    if (!isAtLeastOneInProgress) {
+      isInProgress = false;
+    }
+    if (jobsIds.length > 0) {
+      if (actionType === 'generate_images') {
+        await new Promise(resolve => setTimeout(resolve, props.meta.refreshRates?.generateImages));
+      } else if (actionType === 'analyze') {
+        await new Promise(resolve => setTimeout(resolve, props.meta.refreshRates?.fillFieldsFromImages));
+      } else if (actionType === 'analyze_no_images') {
+        await new Promise(resolve => setTimeout(resolve, props.meta.refreshRates?.fillPlainFields));
+      } else {
+        await new Promise(resolve => setTimeout(resolve, 2000));
+      }
+    }
+  }
 
   if (hasError) {
     adminforth.alert({
@@ -473,6 +532,14 @@ async function runAiAction({
     this.errorMessage.value = errorMessage;
     return;
   }
+
+  if (actionType === 'generate_images') {
+    isGeneratingImages.value = false;
+  } else if (actionType === 'analyze') {
+    isAnalizingImages.value = false;
+  } else if (actionType === 'analyze_no_images') {
+    isAnalizingFields.value = false;
+  }
 }
 
 async function uploadImage(imgBlob, id, fieldName) {

custom/VisionTable.vue

@@ -99,6 +99,7 @@
                 :meta="props.meta"
                 :fieldName="n"
                 :carouselImageIndex="carouselImageIndex[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n]"
+                :regenerateImagesRefreshRate="regenerateImagesRefreshRate"
                 @error="handleError"
                 @close="openGenerationCarousel[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] = false"
                 @selectImage="updateSelectedImage"
@@ -139,6 +140,7 @@ const props = defineProps<{
   errorMessage: string
   carouselSaveImages: any[]
   carouselImageIndex: any[]
+  regenerateImagesRefreshRate: number
 }>();
 const emit = defineEmits(['error']);