@adminforth/bulk-ai-flow 2.0.4 → 2.1.0

package/dist/custom/ImageCompare.vue

@@ -1,185 +0,0 @@
-<template>
-  <!-- Popup Overlay -->
-  <div class="fixed inset-0 z-40 flex items-center justify-center bg-lightScrim dark:bg-darkScrim" @click.self="closePopup">
-    <div class="image-compare-container shadow-sm p-4 border-white dark:border-black max-w-4xl max-h-[90vh] overflow-y-auto rounded-lg bg-white dark:bg-gray-800">
-      <!-- Close Button -->
-      <div class="flex justify-end mb-4">
-        <button type="button" 
-            @click="closePopup"
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
-            <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">{{ $t('Close modal') }}</span>
-        </button>
-      </div>
-      <div class="flex gap-4 items-start justify-between">
-        <h3 class="text-sm font-medium text-gray-700 dark:text-white mb-2">{{ $t('Old Image') }}</h3>
-        <h3 class="text-sm font-medium text-gray-700 dark:text-white mb-2">{{ $t('New Image') }}</h3>
-      </div>
-      <div class="flex gap-4 items-center">
-        <!-- Old Image -->
-        <div class="flex-1">
-          <div class="relative">
-            <img
-              v-if="isValidUrl(compiledOldImage)"
-              ref="oldImg"
-              :src="compiledOldImage"
-              alt="Old image"
-              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">{{ $t('No old image') }}</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Comparison Arrow -->
-        <div class="flex items-center justify-center">
-          <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center dark:bg-gray-500">
-            <svg class="w-4 h-4 text-blue-600 dark:text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
-          </div>
-        </div>
-
-        <!-- New Image -->
-        <div class="flex-1">
-          <div class="relative">
-            <img
-              v-if="isValidUrl(newImage)"
-              ref="newImg"
-              :src="newImage"
-              alt="New image"
-              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">{{ $t('No new image') }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from 'vue'
-import mediumZoom from 'medium-zoom'
-import { callAdminForthApi } from '@/utils';
-
-const props = defineProps<{
-  oldImage: string
-  newImage: string
-  meta: any
-  columnName: string
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const oldImg = ref<HTMLImageElement | null>(null)
-const newImg = ref<HTMLImageElement | null>(null)
-const oldZoom = ref<any>(null)
-const newZoom = ref<any>(null)
-const compiledOldImage = ref<string>('')
-
-async function compileOldImage() {
-  try {
-    const res = await callAdminForthApi({
-      path: `/plugin/${props.meta.pluginInstanceId}/compile_old_image_link`,
-      method: 'POST',
-      body: {
-        image: props.oldImage,
-        columnName: props.columnName,
-      },
-    });
-    compiledOldImage.value = res.previewUrl;
-  } catch (e) {
-    console.error("Error compiling old image:", e)
-    return;
-  }
-}
-
-function closePopup() {
-  emit('close')
-}
-
-function isValidUrl(str: string): boolean {
-  if (!str) return false
-  try {
-    new URL(str)
-    return true
-  } catch {
-    return false
-  }
-}
-
-function initializeZoom() {
-  // Clean up existing zoom instances
-  if (oldZoom.value) {
-    oldZoom.value.detach()
-  }
-  if (newZoom.value) {
-    newZoom.value.detach()
-  }
-
-  // Initialize zoom for old image
-  if (oldImg.value && isValidUrl(compiledOldImage.value)) {
-    oldZoom.value = mediumZoom(oldImg.value, {
-      margin: 24,
-      background: 'rgba(0, 0, 0, 0.8)',
-      scrollOffset: 150
-    })
-  }
-
-  // Initialize zoom for new image
-  if (newImg.value && isValidUrl(props.newImage)) {
-    newZoom.value = mediumZoom(newImg.value, {
-      margin: 24,
-      background: 'rgba(0, 0, 0, 0.8)',
-      scrollOffset: 150
-    })
-  }
-}
-
-onMounted(async () => {
-  await compileOldImage()
-  await nextTick()
-  initializeZoom()
-})
-
-// Re-initialize zoom when images change
-watch([() => props.oldImage, () => props.newImage, () => compiledOldImage.value], async () => {
-  await nextTick()
-  initializeZoom()
-})
-</script>
-
-<style scoped>
-.medium-zoom-image {
-  z-index: 999999;
-  background: rgba(0, 0, 0, 0.8);
-  border: none;
-  border-radius: 0;
-}
-.medium-zoom-overlay {
-  z-index: 99999;
-  background: rgba(0, 0, 0, 0.8);
-}
-html.dark .medium-zoom-overlay {
-  background: rgba(17, 24, 39, 0.8);
-}
-body.medium-zoom--opened aside {
-  filter: grayscale(1);
-}
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-</style>

package/dist/custom/ImageGenerationCarousel.vue

@@ -1,327 +0,0 @@
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :header="$t('Generate image with AI')"
-    class="w-full lg:w-[1100px]"
-    :beforeCancelFunction="async () => { emit('close'); return true; }"
-    :buttons="dialogButtons"
-    :close-by-click-outside="false"
-  >
-    <div class="flex flex-col gap-4">
-      <Textarea
-        v-model="prompt"
-        :placeholder="$t('Prompt which will be passed to AI network')"
-        class="w-full text-sm leading-relaxed border border-gray-200 bg-gray-50/30 dark:border-gray-700 dark:bg-gray-800/40 dark:text-gray-100 rounded-xl focus:outline-none focus:border-gray-300 resize-none"
-      />
-
-      <div class="grid grid-cols-2 gap-4">
-        <div class="flex flex-col gap-2">
-          <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-            {{ $t('Source Image') }}
-          </p>
-          <div class="h-96 rounded-default border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-hidden flex items-center justify-center">
-            <img
-              v-if="attachmentFiles[0]"
-              :src="attachmentFiles[0]"
-              class="w-full h-full object-cover"
-            />
-            <div v-else class="flex flex-col items-center justify-center gap-2 text-gray-400">
-              <svg class="w-12 h-12 text-gray-300 stroke-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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 class="text-xs font-medium">{{ $t('No source image') }}</p>
-            </div>
-          </div>
-          <div v-if="attachmentFiles.length > 1" class="flex flex-wrap gap-1.5">
-            <img
-              v-for="(img, idx) in attachmentFiles"
-              :key="idx"
-              :src="img"
-              class="w-10 h-10 object-cover rounded border border-gray-200"
-            />
-          </div>
-        </div>
-
-        <div class="flex flex-col gap-2">
-          <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-            {{ $t('Generated Image') }}
-          </p>
-          <div class="relative h-96 rounded-default border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-hidden">
-            <div v-if="loading || loadingTimer" class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/80 dark:bg-gray-900/80">
-              <Spinner v-if="loading" class="w-8 h-8" />
-              <div v-if="loadingTimer" class="mt-3">
-                <div v-if="!historicalAverage" class="text-gray-800 dark:text-gray-100 text-sm font-semibold">
-                  {{ formatTime(loadingTimer) }} {{ $t('passed...') }}
-                </div>
-                <div v-else class="w-40">
-                  <ProgressBar
-                    :currentValue="loadingTimer < historicalAverage ? loadingTimer : historicalAverage"
-                    :minValue="0"
-                    :maxValue="historicalAverage"
-                    :showValues="false"
-                    :progressFormatter="(_value: number, _percentage: number) => `${ formatTime(loadingTimer) } ( ~ ${ Math.floor( (
-                      loadingTimer < historicalAverage ? loadingTimer : historicalAverage
-                    ) / historicalAverage * 100) }% )`"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div v-if="errorMessage" class="absolute inset-0 z-10 flex items-center justify-center bg-white/80 dark:bg-gray-900/80">
-              <p class="text-red-500 dark:text-red-400 text-sm font-semibold px-4 text-center">{{ errorMessage }}</p>
-            </div>
-
-            <Skeleton v-if="!images.length && !loading && !loadingTimer && !errorMessage" type="image" class="w-full h-full" />
-            <Swiper v-else ref="sliderRef" :images="images" class="h-full" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </Dialog>
-
-</template>
-
-<script setup lang="ts">
-
-import { ref, onMounted, nextTick, Ref, computed } from 'vue'
-import { callAdminForthApi } from '@/utils';
-import { useI18n } from 'vue-i18n';
-import adminforth from '@/adminforth';
-import { ProgressBar, Dialog, Textarea, Spinner, Skeleton } from '@/afcl';
-import Swiper from './Swiper.vue';
-
-const { t } = useI18n();
-const dialogRef = ref(null)
-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', 'imageGenerationPrompts']);
-const images = ref([]);
-const loading = ref(false);
-const attachmentFiles = ref<string[]>([])
-
-onMounted(async () => {
-  for (const img of props.images || []) {
-    images.value.push(img);
-  }
-  const temp = await getGenerationPrompt() || '';
-  attachmentFiles.value = props.sourceImage || [];
-  prompt.value = Object.keys(JSON.parse(temp))[0];
-  await nextTick();
-
-  const currentIndex = props.carouselImageIndex || 0;
-  sliderRef.value?.slideTo(currentIndex);
-
-
-  let template = '';
-  if (prompt.value) {
-    template = prompt.value;
-  } else {
-    template = 'Generate image for field {{field}} in {{resource}}. No text should be on image.';
-  }
-  prompt.value = template;
-  dialogRef.value?.open();
-});
-
-const dialogButtons = computed(() => [
-  {
-    label: t('Cancel'),
-    options: {
-      class: 'afcl-button',
-      variant: 'secondary',
-    },
-    onclick: () => emit('close'),
-  },
-  {
-    label: t('Use image'),
-    options: {
-      class: 'afcl-button',
-      disabled: loading.value || images.value.length === 0,
-      loader: loading.value,
-    },
-    onclick: () => confirmImage(),
-  },
-  {
-    label: t('Regenerate'),
-    options: {
-      class: 'afcl-button',
-    },
-    onclick: () => generateImages(),
-  },
-]);
-
-async function confirmImage() {
-  loading.value = true;
-
-  const currentIndex = sliderRef.value?.getActiveIndex() || 0;
-  const img = images.value[currentIndex];
-
-  props.images.splice(0, props.images.length);
-  for (const i of images.value) {
-    props.images.push(i);
-  }
-
-  emit('updateCarouselIndex', currentIndex, props.recordId, props.fieldName);
-  emit('selectImage', img, props.recordId, props.fieldName);
-  emit('close');
-
-  loading.value = false;
-}
-
-const loadingTimer: Ref<number | null> = ref(null);
-
-
-const errorMessage: Ref<string | null> = ref(null);
-
-const historicalAverage: Ref<number | null> = ref(null);
-
-
-function formatTime(seconds: number): string {
-  const minutes = Math.floor(seconds / 60);
-  return `${minutes % 60}m ${Math.floor(seconds % 60)}s`;
-}
-
-
-async function getHistoricalAverage() {
-  const resp = await callAdminForthApi({
-    path: `/plugin/${props.meta.pluginInstanceId}/averageDuration`,
-    method: 'GET',
-  });
-  historicalAverage.value = resp?.averageDuration || null;
-}
-
-async function getGenerationPrompt() {
-  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_image_generation_prompts`,
-      method: 'POST',
-      body: {
-        recordId: props.recordId,
-        customPrompt: JSON.stringify(json) || {},
-      },
-    });
-    if(!resp) {
-      emit('error', {
-        isError: true,
-        errorMessage: "Error getting generation prompts."
-    });
-    }
-    return resp?.prompt || null;
-  } catch (e) {
-    emit('error', {
-      isError: true,
-      errorMessage: e.message
-    });
-  }
-}
-
-async function generateImages() {
-  errorMessage.value = null;
-  loading.value = true;
-  loadingTimer.value = 0;
-  const start = Date.now();
-  const ticker = setInterval(() => {
-    const elapsed = (Date.now() - start) / 1000;
-    loadingTimer.value = elapsed;
-  }, 100);
-
-  await getHistoricalAverage();
-  let resp = null;
-  let error = null;
-  try {
-    resp = await callAdminForthApi({
-      path: `/plugin/${props.meta.pluginInstanceId}/create-job`,
-      method: 'POST',
-      body: {
-        actionType: 'regenerate_images',
-        recordId: props.recordId,
-        prompt: prompt.value,
-        fieldName: props.fieldName
-      },
-    });
-  } catch (e) {
-    console.error(e);
-  }
-
-  if (resp?.error) {
-    error = resp.error;
-  }
-  if (!resp) {
-    error = t('Error creating image generation job');
-  }
-
-  if (error) {
-    if (images.value.length === 0) {
-      errorMessage.value = error;
-    } else {
-      adminforth.alert({
-        message: error,
-        variant: 'danger',
-        timeout: 'unlimited',
-      });
-    }
-    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',
-      });
-    clearInterval(ticker);
-    loadingTimer.value = null;
-    loading.value = false;
-    return;
-  }
-
-  const respImages = jobResponse?.job?.result[props.fieldName] || [];
-
-  images.value = [
-    ...images.value,
-    ...respImages,
-  ];
-
-  clearInterval(ticker);
-  loadingTimer.value = null;
-  loading.value = false;
-
-  await nextTick();
-
-  sliderRef.value?.slideTo(images.value.length-1);
-
-  await nextTick();
-
-  loading.value = false;
-}
-
-</script>

package/dist/custom/Swiper.vue

@@ -1,76 +0,0 @@
-<template>
-  <swiper-container class="flex items-center justify-center w-full h-full">
-    <swiper-slide v-for="(image, index) in images" :key="index">
-        <img :src="image" class="object-cover w-full h-full" />
-    </swiper-slide>
-  </swiper-container>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import { register } from 'swiper/element/bundle'
-import { SwiperOptions } from 'swiper/types';
-
-const props = defineProps<{images: string[]}>()
-let swiperEl: any;
-
-function getActiveIndex() {
-  if (swiperEl && swiperEl.swiper) {
-    return swiperEl.swiper.activeIndex;
-  }
-  return 0;
-}
-
-function slideTo(index) {
-  
-  if (!swiperEl || !swiperEl.swiper) {
-    setTimeout(() => slideTo(index), 50);
-    return;
-  }
-  
-  if (index >= 0 && index < props.images.length) {
-    swiperEl.swiper.update();
-    setTimeout(() => {
-      swiperEl.swiper.slideTo(index, 300);
-    }, 10);
-  }
-}
-
-defineExpose({
-  getActiveIndex,
-  slideTo
-})
-
-register()
-onMounted(() => {
-  swiperEl = document.querySelector('swiper-container')
-
-  const swiperParams: SwiperOptions = {
-    slidesPerView: 1,
-    navigation: true,
-    pagination: {
-        type: 'fraction',
-    },
-    allowTouchMove: true,
-  }
-
-  Object.assign(swiperEl, swiperParams)
-  swiperEl.initialize()
-})
-</script>
-
-<style>
-.swiper {
-  width: 100%;
-  height: 100%;
-}
-
-.swiper-slide {
-  text-align: center;
-  font-size: 18px;
-  background: #444;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>