feat: implement old data and image comparison feature

Author: yaroslav8765

custom/ImageCompare.vue

@@ -0,0 +1,196 @@
+<template>
+  <!-- Popup Overlay -->
+  <div class="fixed inset-0 z-40 flex items-center justify-center bg-black/50" @click.self="closePopup">
+    <div class="image-compare-container max-w-4xl max-h-[90vh] overflow-y-auto">
+      <!-- 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">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>
+      </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">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">
+            <svg class="w-4 h-4 text-blue-600" 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">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>
+.medium-zoom-image {
+  z-index: 999999 !important;
+  background: rgba(0, 0, 0, 0.8);
+  border: none !important;
+  border-radius: 0 !important;
+}
+.medium-zoom-overlay {
+  z-index: 99999 !important;
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+html.dark .medium-zoom-overlay {
+  background: rgba(17, 24, 39, 0.8) !important;
+}
+body.medium-zoom--opened aside {
+  filter: grayscale(1);
+}
+</style>
+
+<style scoped>
+.image-compare-container {
+  padding: 1rem;
+  background-color: white;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  border: 1px solid #e5e7eb;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+</style>

custom/VisionAction.vue

@@ -28,10 +28,12 @@
           :customFieldNames="customFieldNames"
           :tableColumnsIndexes="tableColumnsIndexes"
           :selected="selected"
+          :oldData="oldData"
           :isAiResponseReceivedAnalize="isAiResponseReceivedAnalize"
           :isAiResponseReceivedImage="isAiResponseReceivedImage"
           :primaryKey="primaryKey"
           :openGenerationCarousel="openGenerationCarousel"
+          :openImageCompare="openImageCompare"
           @error="handleTableError"
           :carouselSaveImages="carouselSaveImages"
           :carouselImageIndex="carouselImageIndex"
@@ -41,6 +43,7 @@
           :isAiImageGenerationError="isAiImageGenerationError"
           :imageGenerationErrorMessage="imageGenerationErrorMessage"
           @regenerate-images="regenerateImages"
+          :isImageHasPreviewUrl="isImageHasPreviewUrl"
         />
       </div>
       <div class="text-red-600 flex items-center w-full">
@@ -83,12 +86,14 @@ const tableColumns = ref([]);
 const tableColumnsIndexes = ref([]);
 const customFieldNames = ref([]);
 const selected = ref<any[]>([]);
+const oldData = ref<any[]>([]);
 const carouselSaveImages = ref<any[]>([]);
 const carouselImageIndex = ref<any[]>([]);
 const isAiResponseReceivedAnalize = ref([]);
 const isAiResponseReceivedImage = ref([]);
 const primaryKey = props.meta.primaryKey;
 const openGenerationCarousel = ref([]);
+const openImageCompare = ref([]);
 const isLoading = ref(false);
 const isFetchingRecords = ref(false);
 const isError = ref(false);
@@ -104,6 +109,7 @@ const isAiGenerationError = ref<boolean[]>([false]);
 const aiGenerationErrorMessage = ref<string[]>([]);
 const isAiImageGenerationError = ref<boolean[]>([false]);
 const imageGenerationErrorMessage = ref<string[]>([]);
+const isImageHasPreviewUrl = ref<Record<string, boolean>>({});
 
 const openDialog = async () => {
   isDialogOpen.value = true;
@@ -113,6 +119,7 @@ const openDialog = async () => {
   if (props.meta.isAttachFiles) {
     await getImages();
   }
+  await findPreviewURLForImages();
   tableHeaders.value = generateTableHeaders(props.meta.outputFields);
   const result = generateTableColumns();
   tableColumns.value = result.tableData;
@@ -127,6 +134,10 @@ const openDialog = async () => {
       acc[key] = false;
       return acc;
     },{[primaryKey]: records.value[i][primaryKey]} as Record<string, boolean>);
+    openImageCompare.value[i] = props.meta.outputImageFields?.reduce((acc,key) =>{
+      acc[key] = false;
+      return acc;
+    },{[primaryKey]: records.value[i][primaryKey]} as Record<string, boolean>);
   }
   isFetchingRecords.value = false;
   
@@ -257,7 +268,7 @@ function setSelected() {
     }
     selected.value[index].isChecked = true;
     selected.value[index][primaryKey] = record[primaryKey];
-    isAiResponseReceivedAnalize.value[index] = true;
+    oldData.value[index] = { ...selected.value[index] };
   });
 }
 
@@ -710,4 +721,28 @@ function regenerateImages(recordInfo: any) {
   });
 }
 
+async function findPreviewURLForImages() {
+  if (props.meta.outputImageFields){
+    for (const fieldName of props.meta.outputImageFields) {
+      try {
+        const res = await callAdminForthApi({
+          path: `/plugin/${props.meta.pluginInstanceId}/compile_old_image_link`,
+          method: 'POST',
+          body: {
+          image: "test",
+          columnName: fieldName,
+          },
+        });
+        if (res?.ok) {
+          isImageHasPreviewUrl.value[fieldName] = true;
+        } else {
+          isImageHasPreviewUrl.value[fieldName] = false;
+        }
+      } catch (e) {
+        console.error("Error finding preview URL for field", fieldName, e);
+      }
+    }
+  }
+}
+
 </script>