@adminforth/bulk-ai-flow 1.14.5 → 1.15.0

package/build.log

@@ -13,5 +13,5 @@ custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 74,113 bytes  received 172 bytes  148,570.00 bytes/sec
-total size is 73,472  speedup is 0.99
+sent 80,944 bytes  received 172 bytes  162,232.00 bytes/sec
+total size is 80,312  speedup is 0.99

package/custom/ImageCompare.vue

@@ -10,12 +10,12 @@
             <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
             </svg>
-            <span class="sr-only">Close modal</span>
+            <span class="sr-only">{{ $t('Close modal') }}</span>
         </button>
       </div>
       <div class="flex gap-4 items-start justify-between">
-        <h3 class="text-sm font-medium text-gray-700 mb-2">Old Image</h3>
-        <h3 class="text-sm font-medium text-gray-700 mb-2">New Image</h3>
+        <h3 class="text-sm font-medium text-gray-700 mb-2">{{ $t('Old Image') }}</h3>
+        <h3 class="text-sm font-medium text-gray-700 mb-2">{{ $t('New Image') }}</h3>
       </div>
       <div class="flex gap-4 items-center">
         <!-- Old Image -->
@@ -29,7 +29,7 @@
               class="w-full max-w-sm h-auto object-cover rounded-lg cursor-pointer border hover:border-blue-500 transition-colors duration-200"
             />
             <div v-else class="w-full max-w-sm h-48 bg-gray-100 rounded-lg flex items-center justify-center">
-              <p class="text-gray-500">No old image</p>
+              <p class="text-gray-500">{{ $t('No old image') }}</p>
             </div>
           </div>
         </div>
@@ -54,7 +54,7 @@
               class="w-full max-w-sm h-auto object-cover rounded-lg cursor-pointer border hover:border-blue-500 transition-colors duration-200"
             />
             <div v-else class="w-full max-w-sm h-48 bg-gray-100 rounded-lg flex items-center justify-center">
-              <p class="text-gray-500">No new image</p>
+              <p class="text-gray-500">{{ $t('No new image') }}</p>
             </div>
           </div>
         </div>

package/custom/ImageGenerationCarousel.vue

@@ -143,7 +143,7 @@ const sliderRef = ref(null)
 
 const prompt = ref('');
 const emit = defineEmits(['close', 'selectImage', 'error', 'updateCarouselIndex']);
-const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex', 'regenerateImagesRefreshRate','sourceImage']);
+const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex', 'regenerateImagesRefreshRate','sourceImage', 'imageGenerationPrompts']);
 const images = ref([]);
 const loading = ref(false);
 const attachmentFiles = ref<string[]>([])
@@ -154,7 +154,7 @@ onMounted(async () => {
   }
   const temp = await getGenerationPrompt() || '';
   attachmentFiles.value = props.sourceImage || [];
-  prompt.value = temp[props.fieldName];
+  prompt.value = Object.keys(JSON.parse(temp))[0];
   await nextTick();
 
   const currentIndex = props.carouselImageIndex || 0;
@@ -212,12 +212,20 @@ async function getHistoricalAverage() {
 }
 
 async function getGenerationPrompt() {
-  try{
+  const [key, ...rest] = props.imageGenerationPrompts.split(":");
+  const value = rest.join(":").trim();
+
+  const json = {
+    [key.trim()]: value
+  };
+
+  try {
     const resp = await callAdminForthApi({
-      path: `/plugin/${props.meta.pluginInstanceId}/get_generation_prompts`,
+      path: `/plugin/${props.meta.pluginInstanceId}/get_image_generation_prompts`,
       method: 'POST',
       body: {
         recordId: props.recordId,
+        customPrompt: JSON.stringify(json) || {},
       },
     });
     if(!resp) {
@@ -226,7 +234,7 @@ async function getGenerationPrompt() {
         errorMessage: "Error getting generation prompts."
     });
     }
-    return resp?.generationOptions || null;
+    return resp?.prompt || null;
   } catch (e) {
     emit('error', {
       isError: true,

package/custom/VisionAction.vue

@@ -8,16 +8,49 @@
   <Dialog 
     ref="confirmDialog"
     header="Bulk AI Flow"
-    class="[scrollbar-gutter:stable] !max-w-full w-full lg:w-[1600px] !lg:max-w-[1600px]"
+    class="[scrollbar-gutter:stable] !max-w-full w-fit h-fit"
+    :class="popupMode === 'generation' ? 'lg:w-[1600px] !lg:max-w-[1600px]' 
+      : popupMode === 'settings' ? 'lg:w-[1000px] !lg:max-w-[1000px]' 
+        : 'lg:w-[500px] !lg:max-w-[500px]'"
     :beforeCloseFunction="closeDialog"
-    :buttons="[
-      { label: checkedCount > 1 ? 'Save fields' : 'Save field', options: { disabled: isLoading || checkedCount < 1 || isCriticalError || isFetchingRecords || isGeneratingImages || isAnalizingFields || isAnalizingImages, loader: isLoading, class: 'w-fit' }, onclick: async (dialog) => { await saveData(); dialog.hide(); } },
-      { label: 'Cancel', options: {class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200'}, onclick: (dialog) => dialog.hide() },
-    ]"
+    :buttons="popupMode === 'generation' ? [
+        { 
+          label: checkedCount > 1 ? 'Save fields' : 'Save field', 
+          options: { 
+            disabled: isLoading || checkedCount < 1 || isCriticalError || isFetchingRecords || isGeneratingImages || isAnalizingFields || isAnalizingImages, 
+            loader: isLoading, class: 'w-fit' 
+          }, 
+          onclick: async (dialog) => { await saveData(); dialog.hide(); } 
+        },
+        { 
+          label: 'Cancel', 
+          options: {
+            class: 'bg-white hover:!bg-gray-100 !text-gray-900 hover:!text-gray-800 dark:!bg-gray-800 dark:!text-gray-100 dark:hover:!bg-gray-700 !border-gray-200'
+          }, 
+          onclick: (dialog) => dialog.hide() 
+        },
+      ] : popupMode === 'settings' ? [
+          {
+            label: 'Save settings',
+            options: {
+              class: 'w-fit'
+            },
+            onclick: (dialog) => { saveSettings(); }
+          },
+        ] : 
+          [
+            {
+              label: 'Edit prompts',
+              options: {
+                class: 'w-fit ml-auto'
+              },
+              onclick: (dialog) => { clickSettingsButton(); }
+            },
+          ]"
     :click-to-close-outside="false"
   >
-    <div class="[scrollbar-gutter:stable] bulk-vision-table flex flex-col items-center max-w-[1560px] md:max-h-[90vh] gap-3 md:gap-4 w-full h-full overflow-y-auto">
-      <div v-if="records && props.checkboxes.length" class="w-full overflow-x-auto">
+    <div class="[scrollbar-gutter:stable] bulk-vision-table flex flex-col items-center max-w-[1560px] md:max-h-[75vh] gap-3 md:gap-4 w-full h-full overflow-y-auto">
+      <div v-if="records && props.checkboxes.length && popupMode === 'generation'" class="w-full overflow-x-auto">
         <VisionTable
           :checkbox="props.checkboxes"
           :records="records"
@@ -44,10 +77,40 @@
           :imageGenerationErrorMessage="imageGenerationErrorMessage"
           @regenerate-images="regenerateImages"
           :isImageHasPreviewUrl="isImageHasPreviewUrl"
+          :imageGenerationPrompts="generationPrompts.generateImages"
         />
+        <div class="text-red-600 flex items-center w-full">
+          <p v-if="isError === true">{{ errorMessage }}</p>
+        </div>
       </div>
-      <div class="text-red-600 flex items-center w-full">
-        <p v-if="isError === true">{{ errorMessage }}</p>
+      <div 
+        v-else-if="popupMode === 'settings'" 
+        v-for="(promptsCategory, key) in generationPrompts" 
+        :key="key" 
+        class="w-full"
+      >
+        <div v-if="Object.keys(promptsCategory).length > 0" class="gap-4 mb-6 ml-1">
+          <p class="text-start w-full text-xl font-bold mb-2">{{
+           key === "plainFieldsPrompts" ? "Prompts for non-image fields" 
+            : key === "generateImages" ? "Prompts for image fields" 
+              : "Prompts for image analysis"
+          }}</p>
+          <div class="grid grid-cols-2 gap-4">
+            <div v-for="(prompt, promptKey) in promptsCategory" :key="promptKey">
+              {{ formatLabel(promptKey) }} prompt:
+              <Textarea 
+                v-model="generationPrompts[key][promptKey]" 
+                class="w-full h-32 p-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
+              ></Textarea>
+              <p class="text-red-500 hover:underline hover:cursor-pointer mt-2" @click="resetPromptToDefault(key, promptKey)">reset to default</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="flex flex-col gap-2">
+        <Button @click="runAiActions" class="px-5 py-2.5 my-20 bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 rounded-md text-white border-none">
+          Start generation
+        </Button>
       </div>
     </div>
   </Dialog>
@@ -56,11 +119,11 @@
 <script lang="ts" setup>
 import { callAdminForthApi } from '@/utils';
 import { Ref, ref, watch } from 'vue'
-import { Dialog, Button } from '@/afcl';
+import { Dialog, Button, Textarea } from '@/afcl';
 import VisionTable from './VisionTable.vue'
 import adminforth from '@/adminforth';
 import { useI18n } from 'vue-i18n';
-import { AdminUser, type AdminForthResourceCommon } from '@/types';
+import { AdminUser, type AdminForthResourceCommon } from '@/types/Common';
 import { run } from 'node:test';
 
 const { t } = useI18n();
@@ -114,6 +177,8 @@ const aiGenerationErrorMessage = ref<string[]>([]);
 const isAiImageGenerationError = ref<boolean[]>([false]);
 const imageGenerationErrorMessage = ref<string[]>([]);
 const isImageHasPreviewUrl = ref<Record<string, boolean>>({});
+const popupMode = ref<'generation' | 'confirmation' | 'settings'>('confirmation');
+const generationPrompts = ref<any>({});
 
 const openDialog = async () => {
   isDialogOpen.value = true;
@@ -144,8 +209,19 @@ const openDialog = async () => {
     },{[primaryKey]: records.value[i][primaryKey]} as Record<string, boolean>);
   }
   isFetchingRecords.value = false;
-  
-  if (props.meta.isImageGeneration) {
+  // Ensure prompts are loaded before any automatic AI action run
+  if (!generationPrompts.value || Object.keys(generationPrompts.value).length === 0) {
+    await getGenerationPrompts();
+  }
+  if (!props.meta.askConfirmationBeforeGenerating) {
+    runAiActions();
+  }
+}
+ 
+
+function runAiActions() {
+    popupMode.value = 'generation';
+    if (props.meta.isImageGeneration) {
     isGeneratingImages.value = true;
     runAiAction({
       endpoint: 'initial_image_generate',
@@ -170,9 +246,8 @@ const openDialog = async () => {
     });
   }
 }
- 
+
 const closeDialog = () => {
-  confirmDialog.value.close();
   isAiResponseReceivedAnalize.value = [];
   isAiResponseReceivedImage.value = [];
 
@@ -186,10 +261,10 @@ const closeDialog = () => {
   isImageGenerationError.value = false;
   errorMessage.value = '';
   isDialogOpen.value = false;
+  popupMode.value = 'confirmation';
 }
 
 watch(selected, (val) => {
-  //console.log('Selected changed:', val);
   checkedCount.value = val.filter(item => item.isChecked === true).length;
 }, { deep: true });
 
@@ -302,7 +377,7 @@ async function getRecords() {
   } catch (error) {
     console.error('Failed to get records:', error);
     isError.value = true;
-    errorMessage.value = `Failed to fetch records. Please, try to re-run the action.`;
+    errorMessage.value = t(`Failed to fetch records. Please, try to re-run the action.`);
   }
 }
 
@@ -319,7 +394,7 @@ async function getImages() {
   } catch (error) {
     console.error('Failed to get images:', error);
     isError.value = true;
-    errorMessage.value = `Failed to fetch images. Please, try to re-run the action.`;
+    errorMessage.value = t(`Failed to fetch images. Please, try to re-run the action.`);
   }
 }
 
@@ -375,7 +450,7 @@ async function convertImages(fieldName, img) {
 
 async function saveData() {
   if (!selected.value?.length) {
-    adminforth.alert({ message: 'No items selected', variant: 'warning' });
+    adminforth.alert({ message: t('No items selected'), variant: 'warning' });
     return;
   }
   try {
@@ -420,16 +495,16 @@ async function saveData() {
         timeout: 'unlimited',
       });
       isError.value = true;
-      errorMessage.value = `Failed to save data. You are not allowed to save.`;
+      errorMessage.value = t(`Failed to save data. You are not allowed to save.`);
     } else {
       console.error('Error saving data:', res);
       isError.value = true;
-      errorMessage.value = `Failed to save data. Please, try to re-run the action.`;
+      errorMessage.value = t(`Failed to save data. Please, try to re-run the action.`);
     }
   } catch (error) {
     console.error('Error saving data:', error);
     isError.value = true;
-    errorMessage.value = `Failed to save data. Please, try to re-run the action.`;
+    errorMessage.value = t(`Failed to save data. Please, try to re-run the action.`);
   } finally {
     isLoading.value = false;
   }
@@ -474,7 +549,7 @@ async function runAiAction({
       if (rateLimitRes?.error) {
         isRateLimitExceeded = true;
         adminforth.alert({
-        message: `Rate limit exceeded for "${actionType.replace('_', ' ')}" action. Please try again later.`,
+        message: t(`Rate limit exceeded for "${actionType.replace('_', ' ')}" action. Please try again later.`),
         variant: 'danger',
         timeout: 'unlimited',
       });
@@ -482,7 +557,7 @@ async function runAiAction({
       }
     } catch (e) {
       adminforth.alert({
-        message: `Error checking rate limit for "${actionType.replace('_', ' ')}" action.`,
+        message: t(`Error checking rate limit for "${actionType.replace('_', ' ')}" action.`),
         variant: 'danger',
         timeout: 'unlimited',
       });
@@ -492,6 +567,15 @@ async function runAiAction({
       return;
     };
   }
+
+  let customPrompt;
+  if (actionType === 'generate_images') {
+    customPrompt = generationPrompts.value.imageGenerationPrompts || generationPrompts.value.generateImages;
+  } else if (actionType === 'analyze') {
+    customPrompt = generationPrompts.value.imageFieldsPrompts;
+  } else if (actionType === 'analyze_no_images') {
+    customPrompt = generationPrompts.value.plainFieldsPrompts;
+  }
   //creating jobs
   const tasks = recordsIds.map(async (checkbox, i) => {
     try {
@@ -501,6 +585,7 @@ async function runAiAction({
         body: {
           actionType: actionType,
           recordId: checkbox,
+          ...(customPrompt !== undefined ? { customPrompt: JSON.stringify(customPrompt) } : {}),
         },
       });
 
@@ -516,7 +601,7 @@ async function runAiAction({
     } 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.`;
+      errorMessage = t(`Failed to ${actionType.replace('_', ' ')}. Please, try to re-run the action.`);
       return { success: false, index: i, error: e };
     }
   });
@@ -591,7 +676,7 @@ async function runAiAction({
         }
         isAtLeastOneInProgress = true;
         adminforth.alert({
-          message: `Generation action "${actionType.replace('_', ' ')}" failed for record: ${recordId}. Error: ${jobResponse.job?.error || 'Unknown error'}`,
+          message: t(`Generation action "${actionType.replace('_', ' ')}" failed for record: ${recordId}. Error: ${jobResponse.job?.error || 'Unknown error'}`),
           variant: 'danger',
           timeout: 'unlimited',
         });
@@ -753,4 +838,76 @@ function click() {
   openDialog();
 }
 
+function saveSettings() {
+  popupMode.value = 'confirmation';
+  localStorage.setItem(`bulkAiFlowGenerationPrompts_${props.meta.pluginInstanceId}`, JSON.stringify(generationPrompts.value));
+}
+
+async function getGenerationPrompts() {
+  const calculatedGenerationPrompts: any = {};
+  const savedPrompts = localStorage.getItem(`bulkAiFlowGenerationPrompts_${props.meta.pluginInstanceId}`);
+  if (props.meta.generationPrompts.plainFieldsPrompts) {
+    calculatedGenerationPrompts.plainFieldsPrompts = props.meta.generationPrompts.plainFieldsPrompts;
+  }
+  if (props.meta.generationPrompts.imageFieldsPrompts) {
+    calculatedGenerationPrompts.imageFieldsPrompts = props.meta.generationPrompts.imageFieldsPrompts;
+  }
+  if (props.meta.generationPrompts.imageGenerationPrompts) {
+    let imageFields = {};
+    for (const [key, value] of Object.entries(props.meta.generationPrompts.imageGenerationPrompts)) {
+      // value might be typed as unknown; cast to any to access prompt safely
+      imageFields[key] = (value as any).prompt;
+    }
+    calculatedGenerationPrompts.generateImages = imageFields;
+  }
+  if (savedPrompts && props.meta.askConfirmationBeforeGenerating) {
+    
+    generationPrompts.value = checkAndAddNewFieldsToPrompts(JSON.parse(savedPrompts), calculatedGenerationPrompts);
+    
+    return;
+  }
+  generationPrompts.value = calculatedGenerationPrompts;
+}
+
+function resetPromptToDefault(categoryKey, promptKey) {
+  if (categoryKey === 'generateImages') {
+    generationPrompts.value[categoryKey][promptKey] = props.meta.generationPrompts.imageGenerationPrompts[promptKey].prompt;
+    return;
+  }
+  generationPrompts.value[categoryKey][promptKey] = props.meta.generationPrompts[categoryKey][promptKey];
+}
+
+function clickSettingsButton() {
+  getGenerationPrompts();
+  popupMode.value = 'settings';
+}
+
+
+function checkAndAddNewFieldsToPrompts(savedPrompts, defaultPrompts) {
+  for (const categoryKey in defaultPrompts) {
+    if (!savedPrompts.hasOwnProperty(categoryKey)) {
+      savedPrompts[categoryKey] = defaultPrompts[categoryKey];
+    } else {
+      for (const promptKey in defaultPrompts[categoryKey]) {
+        if (!savedPrompts[categoryKey].hasOwnProperty(promptKey)) {
+          savedPrompts[categoryKey][promptKey] = defaultPrompts[categoryKey][promptKey];
+        }
+      }
+    }
+  }
+  //remove deprecated fields
+  for (const categoryKey in savedPrompts) {
+    if (!defaultPrompts.hasOwnProperty(categoryKey)) {
+      delete savedPrompts[categoryKey];
+    } else {
+      for (const promptKey in savedPrompts[categoryKey]) {
+        if (!defaultPrompts[categoryKey].hasOwnProperty(promptKey)) {
+          delete savedPrompts[categoryKey][promptKey];
+        }
+      }
+    }
+  }
+  return savedPrompts;
+}
+
 </script>

package/custom/VisionTable.vue

@@ -6,7 +6,7 @@
       >
       <!-- HEADER TEMPLATE -->
       <template #header:checkboxes="{ item }">
-        MARK FOR SAVE
+        {{ $t('MARK FOR SAVE') }}
       </template>
       <!-- CHECKBOX CELL TEMPLATE -->
       <template #cell:checkboxes="{ item }">
@@ -28,12 +28,12 @@
                   @click="zoomImage(image)"
               />
               <div v-else class="w-20 h-20">
-                <p>Invalid source image</p>
+                <p>{{ $t('Invalid source image') }}</p>
               </div>
             </div>
           </div>
           <div class="flex items-center justify-center text-center w-20 h-20" v-else>
-            <p>No images found</p>
+            <p>{{ $t('No images found') }}</p>
           </div>
           <transition name="fade">
             <div
@@ -66,7 +66,7 @@
               </Select>
               <Tooltip>
                 <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !hovers[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }">
-                  <p class="text-sm ">old value</p>
+                  <p class="text-sm ">{{ $t('old value') }}</p>
                 </div>
                 <template #tooltip>
                   {{  oldData[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }}
@@ -82,7 +82,7 @@
             </Textarea>
             <Tooltip>
                 <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !hovers[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }">
-                  <p class="text-sm ">old value</p>
+                  <p class="text-sm ">{{ $t('old value') }}</p>
                 </div>
               <template #tooltip>
                 <p class="max-w-[200px]">{{  oldData[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }}</p>
@@ -97,7 +97,7 @@
             </Toggle>
             <Tooltip>
                 <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !hovers[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }">
-                  <p class="text-sm ">old value</p>
+                  <p class="text-sm ">{{ $t('old value') }}</p>
                 </div>
               <template #tooltip>
                 {{  oldData[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }}
@@ -113,7 +113,7 @@
             />
             <Tooltip>
                 <div class="mt-2 flex items-center justify-start gap-1 hover:text-blue-500" :class="{ 'opacity-0': !hovers[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }">
-                  <p class="text-sm ">old value</p>
+                  <p class="text-sm ">{{ $t('old value') }}</p>
                 </div>
               <template #tooltip>
                 {{  oldData[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }}
@@ -137,14 +137,14 @@
                 :class="{ 'opacity-0': !hovers[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] }"
                 @click="() => {openImageCompare[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] = true}"  
               >
-                old image
+                {{ $t('old image') }}
               </p>
               </div>
               <div v-else class="flex items-center justify-center text-center w-20 h-20">
                 <Tooltip v-if="imageGenerationErrorMessage[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])] === 'No source images found'">
                   <p
                   >
-                    Can't generate image. 
+                    {{ $t("Can't generate image.") }}
                   </p>
                   <template #tooltip>
                     {{ imageGenerationErrorMessage[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])] }}
@@ -173,6 +173,7 @@
                 :carouselImageIndex="carouselImageIndex[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n]"
                 :regenerateImagesRefreshRate="regenerateImagesRefreshRate"
                 :sourceImage="item.images && item.images.length ? item.images : null"
+                :imageGenerationPrompts="imageGenerationPrompts[n]"
                 @error="handleError"
                 @close="openGenerationCarousel[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] = false"
                 @selectImage="updateSelectedImage"
@@ -231,6 +232,7 @@ const props = defineProps<{
   imageGenerationErrorMessage: string[],
   oldData: any[],
   isImageHasPreviewUrl: Record<string, boolean>
+  imageGenerationPrompts: Record<string, any>
 }>();
 const emit = defineEmits(['error', 'regenerateImages']);
 

package/custom/tsconfig.json

@@ -4,16 +4,27 @@
     "paths": {
       "@/*": [
         // "node_modules/adminforth/dist/spa/src/*"
-        "../../../spa/src/*"
+        "../../../adminforth/spa/src/*"
       ],
       "*": [
         // "node_modules/adminforth/dist/spa/node_modules/*"
-        "../../../spa/node_modules/*"
+        "../../../adminforth/spa/node_modules/*"
       ],
       "@@/*": [
         // "node_modules/adminforth/dist/spa/src/*"
         "."
       ]
     }
-  }
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "./**/*.vue",
+    "../**/*.ts",
+    "../**/*.tsx",
+    "../**/*.vue",
+    "../*.vue",
+    "../*.ts",
+    "../*.tsx"
+  ]
 }

package/dist/custom/ImageCompare.vue

@@ -10,12 +10,12 @@
             <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
             </svg>
-            <span class="sr-only">Close modal</span>
+            <span class="sr-only">{{ $t('Close modal') }}</span>
         </button>
       </div>
       <div class="flex gap-4 items-start justify-between">
-        <h3 class="text-sm font-medium text-gray-700 mb-2">Old Image</h3>
-        <h3 class="text-sm font-medium text-gray-700 mb-2">New Image</h3>
+        <h3 class="text-sm font-medium text-gray-700 mb-2">{{ $t('Old Image') }}</h3>
+        <h3 class="text-sm font-medium text-gray-700 mb-2">{{ $t('New Image') }}</h3>
       </div>
       <div class="flex gap-4 items-center">
         <!-- Old Image -->
@@ -29,7 +29,7 @@
               class="w-full max-w-sm h-auto object-cover rounded-lg cursor-pointer border hover:border-blue-500 transition-colors duration-200"
             />
             <div v-else class="w-full max-w-sm h-48 bg-gray-100 rounded-lg flex items-center justify-center">
-              <p class="text-gray-500">No old image</p>
+              <p class="text-gray-500">{{ $t('No old image') }}</p>
             </div>
           </div>
         </div>
@@ -54,7 +54,7 @@
               class="w-full max-w-sm h-auto object-cover rounded-lg cursor-pointer border hover:border-blue-500 transition-colors duration-200"
             />
             <div v-else class="w-full max-w-sm h-48 bg-gray-100 rounded-lg flex items-center justify-center">
-              <p class="text-gray-500">No new image</p>
+              <p class="text-gray-500">{{ $t('No new image') }}</p>
             </div>
           </div>
         </div>

package/dist/custom/ImageGenerationCarousel.vue

@@ -143,7 +143,7 @@ const sliderRef = ref(null)
 
 const prompt = ref('');
 const emit = defineEmits(['close', 'selectImage', 'error', 'updateCarouselIndex']);
-const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex', 'regenerateImagesRefreshRate','sourceImage']);
+const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex', 'regenerateImagesRefreshRate','sourceImage', 'imageGenerationPrompts']);
 const images = ref([]);
 const loading = ref(false);
 const attachmentFiles = ref<string[]>([])
@@ -154,7 +154,7 @@ onMounted(async () => {
   }
   const temp = await getGenerationPrompt() || '';
   attachmentFiles.value = props.sourceImage || [];
-  prompt.value = temp[props.fieldName];
+  prompt.value = Object.keys(JSON.parse(temp))[0];
   await nextTick();
 
   const currentIndex = props.carouselImageIndex || 0;
@@ -212,12 +212,20 @@ async function getHistoricalAverage() {
 }
 
 async function getGenerationPrompt() {
-  try{
+  const [key, ...rest] = props.imageGenerationPrompts.split(":");
+  const value = rest.join(":").trim();
+
+  const json = {
+    [key.trim()]: value
+  };
+
+  try {
     const resp = await callAdminForthApi({
-      path: `/plugin/${props.meta.pluginInstanceId}/get_generation_prompts`,
+      path: `/plugin/${props.meta.pluginInstanceId}/get_image_generation_prompts`,
       method: 'POST',
       body: {
         recordId: props.recordId,
+        customPrompt: JSON.stringify(json) || {},
       },
     });
     if(!resp) {
@@ -226,7 +234,7 @@ async function getGenerationPrompt() {
         errorMessage: "Error getting generation prompts."
     });
     }
-    return resp?.generationOptions || null;
+    return resp?.prompt || null;
   } catch (e) {
     emit('error', {
       isError: true,