@adminforth/bulk-ai-flow 2.0.3 → 2.1.0

package/dist/custom/reviewModel.ts

@@ -0,0 +1,124 @@
+export type RecordStatus = 'pending' | 'processing' | 'completed' | 'failed';
+export type GenerationAction = 'analyze' | 'analyze_no_images' | 'generate_images';
+export type PromptCategory = 'imageFieldsPrompts' | 'plainFieldsPrompts' | 'generateImages';
+export type FieldKind = 'fromImage' | 'text' | 'image';
+export type FieldChange = 'new' | 'changed' | 'same';
+
+export type RecordState = {
+  id: string | number;
+  status: RecordStatus;
+  isChecked: boolean;
+  label: string;
+  data: Record<string, any>;
+  oldData: Record<string, any>;
+  // links to the stored images of the image fields, null for an empty field
+  oldImagePreviews: Record<string, string | null>;
+  // source images returned by attachFiles
+  images: string[];
+  aiStatus: {
+    generatedImages: boolean;
+    analyzedImages: boolean;
+    analyzedNoImages: boolean;
+  };
+  imageGenerationErrorMessage: string;
+  imageGenerationFailed: boolean;
+  imageToTextErrorMessages: Record<string, string>;
+  textToTextErrorMessages: Record<string, string>;
+  regeneratingFieldsStatus: Record<string, boolean>;
+  // image fields which kept their stored image, because values are not overwritten
+  listOfImageNotGenerated: Record<string, { originalImage: string }>;
+};
+
+export const PROMPT_CATEGORY: Record<GenerationAction, PromptCategory> = {
+  analyze: 'imageFieldsPrompts',
+  analyze_no_images: 'plainFieldsPrompts',
+  generate_images: 'generateImages',
+};
+
+export const CATEGORY_KIND: Record<PromptCategory, FieldKind> = {
+  imageFieldsPrompts: 'fromImage',
+  plainFieldsPrompts: 'text',
+  generateImages: 'image',
+};
+
+export function fieldKind(meta: any, field: string): FieldKind {
+  if (meta.outputImageFields.includes(field)) {
+    return 'image';
+  }
+  return meta.outputFieldsForAnalizeFromImages.includes(field) ? 'fromImage' : 'text';
+}
+
+// keys of the plugin options may differ in case from the column names
+export function fieldLabel(meta: any, field: string): string {
+  const labels: Record<string, string> = meta.columnLabels;
+  const key = Object.keys(labels).find((name) => name.toLowerCase() === field.toLowerCase());
+  return key ? labels[key] : field;
+}
+
+export function isFieldGenerating(record: RecordState, meta: any, field: string): boolean {
+  const kind = fieldKind(meta, field);
+  if (kind === 'image') {
+    return !record.aiStatus.generatedImages;
+  }
+  const isDone = kind === 'fromImage' ? record.aiStatus.analyzedImages : record.aiStatus.analyzedNoImages;
+  return !isDone || record.regeneratingFieldsStatus[field] === true;
+}
+
+// images and single fields of a record regenerate in parallel, its status settles once all of them finished
+export function isRegenerating(record: RecordState): boolean {
+  return !record.aiStatus.generatedImages || Object.values(record.regeneratingFieldsStatus).some(Boolean);
+}
+
+export function isRecordBusy(record: RecordState): boolean {
+  return record.status === 'pending' || record.status === 'processing' || isRegenerating(record);
+}
+
+export function fieldError(record: RecordState, meta: any, field: string): string {
+  const kind = fieldKind(meta, field);
+  if (kind === 'image') {
+    return record.imageGenerationFailed ? record.imageGenerationErrorMessage : '';
+  }
+  return (kind === 'fromImage' ? record.imageToTextErrorMessages : record.textToTextErrorMessages)[field] ?? '';
+}
+
+export function recordError(record: RecordState): string {
+  return [
+    record.imageGenerationFailed ? record.imageGenerationErrorMessage : '',
+    ...Object.values(record.imageToTextErrorMessages),
+    ...Object.values(record.textToTextErrorMessages),
+  ].find(Boolean) ?? '';
+}
+
+// the image a field will have after saving: the generated one, or the stored one while nothing new was made
+export function generatedImageUrl(record: RecordState, meta: any, field: string): string | null {
+  return fieldChange(record, meta, field) === 'same' ? record.oldImagePreviews[field] ?? null : record.data[field];
+}
+
+function isEmpty(value: any): boolean {
+  return value === null || value === undefined || value === '';
+}
+
+function isSameValue(a: any, b: any): boolean {
+  if (isEmpty(a) || isEmpty(b)) {
+    return isEmpty(a) && isEmpty(b);
+  }
+  return typeof a === 'object' || typeof b === 'object'
+    ? JSON.stringify(a) === JSON.stringify(b)
+    : String(a) === String(b);
+}
+
+export function fieldChange(record: RecordState, meta: any, field: string): FieldChange {
+  const isKeptImage = fieldKind(meta, field) === 'image' && field in record.listOfImageNotGenerated;
+  if (isKeptImage || isSameValue(record.data[field], record.oldData[field])) {
+    return 'same';
+  }
+  return isEmpty(record.oldData[field]) ? 'new' : 'changed';
+}
+
+export function changedFieldsCount(record: RecordState, meta: any): number {
+  return meta.outputFields.filter((field: string) => fieldChange(record, meta, field) !== 'same').length;
+}
+
+export function isRecordChanged(record: RecordState, meta: any): boolean {
+  return record.status !== 'pending' && changedFieldsCount(record, meta) > 0;
+}

package/dist/index.d.ts

@@ -57,6 +57,11 @@ export default class BulkAiFlowPlugin extends AdminForthPlugin {
      * way the core show route drops them.
      */
     private scopeRecordForFrontend;
+    /**
+     * Links to the stored images of the generated image columns, built by the Upload plugin of each
+     * column the same way its own previews are, so the dialog shows the current image next to the new one.
+     */
+    private imagePreviewUrls;
     /**
      * The row as the caller is allowed to read it: columns which are not declared on the resource and
      * columns whose `backendOnly` resolves true for this request are dropped, exactly the way the

package/dist/index.js

@@ -48,10 +48,6 @@ const jobStatusBodySchema = z.object({
 const updateRateLimitsBodySchema = z.object({
     actionType: z.string().nullish(),
 }).strict();
-const compileOldImageLinkBodySchema = z.object({
-    image: z.string().nullish(),
-    columnName: z.string().nullish(),
-}).strict();
 const getFilteredIdsBodySchema = z.object({
     filters: z.any(),
 }).passthrough();
@@ -687,10 +683,18 @@ export default class BulkAiFlowPlugin extends AdminForthPlugin {
                     outputImagesPluginInstanceIds[key] = plugin.pluginInstanceId;
                 }
             }
-            const outputFields = Object.assign(Object.assign(Object.assign({}, this.options.fillFieldsFromImages), this.options.fillPlainFields), (this.options.generateImages || {}));
+            const outputFields = [
+                ...outputFieldsForAnalizeFromImages,
+                ...outputPlainFields,
+                ...outputImageFields,
+            ];
             const primaryKeyColumn = this.resourceConfig.columns.find((col) => col.primaryKey);
             // Map of column technical names to their display labels from resource config
             const columnLabels = Object.fromEntries((this.resourceConfig.columns || []).map((c) => [c.name, c.label || c.name]));
+            // the review dialog picks an editor for a generated value by the type of its column
+            const columnTypes = Object.fromEntries(this.resourceConfig.columns.filter((c) => outputFields.includes(c.name)).map((c) => [c.name, c.type]));
+            // only the prompts go to the browser: an entry of generateImages may hold an adapter with its API key
+            const imageGenerationPrompts = Object.fromEntries(Object.entries(this.options.generateImages || {}).map(([key, value]) => [key, value.prompt]));
             const pageInjection = {
                 file: this.componentPath('VisionAction.vue'),
                 meta: {
@@ -699,6 +703,7 @@ export default class BulkAiFlowPlugin extends AdminForthPlugin {
                     actionName: this.options.actionName,
                     columnEnums: columnEnums,
                     columnLabels: columnLabels,
+                    columnTypes: columnTypes,
                     outputImageFields: outputImageFields,
                     outputFieldsForAnalizeFromImages: outputFieldsForAnalizeFromImages,
                     outputPlainFields: outputPlainFields,
@@ -722,7 +727,7 @@ export default class BulkAiFlowPlugin extends AdminForthPlugin {
                     generationPrompts: {
                         plainFieldsPrompts: this.options.fillPlainFields || {},
                         imageFieldsPrompts: this.options.fillFieldsFromImages || {},
-                        imageGenerationPrompts: this.options.generateImages || {},
+                        imageGenerationPrompts: imageGenerationPrompts,
                     },
                     pageSize: this.options.pageSize
                 }
@@ -985,6 +990,24 @@ export default class BulkAiFlowPlugin extends AdminForthPlugin {
             return scoped;
         });
     }
+    /**
+     * Links to the stored images of the generated image columns, built by the Upload plugin of each
+     * column the same way its own previews are, so the dialog shows the current image next to the new one.
+     */
+    imagePreviewUrls(record) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const previews = {};
+            for (const key of Object.keys(this.options.generateImages || {})) {
+                const uploadPlugin = this.adminforth.activatedPlugins.find(p => p.resourceConfig.resourceId === this.resourceConfig.resourceId &&
+                    p.pluginOptions.pathColumnName === key);
+                const holder = { [key]: record[key] };
+                yield uploadPlugin.genPreviewUrl(holder);
+                previews[key] = (_a = holder[`previewUrl_${uploadPlugin.pluginInstanceId}`]) !== null && _a !== void 0 ? _a : null;
+            }
+            return previews;
+        });
+    }
     /**
      * The row as the caller is allowed to read it: columns which are not declared on the resource and
      * columns whose `backendOnly` resolves true for this request are dropped, exactly the way the
@@ -1022,7 +1045,11 @@ export default class BulkAiFlowPlugin extends AdminForthPlugin {
                 if (error) {
                     return { ok: false, error };
                 }
-                return { ok: true, record: yield this.scopeRecordForFrontend(record, ctx) };
+                return {
+                    ok: true,
+                    record: yield this.scopeRecordForFrontend(record, ctx),
+                    imagePreviews: yield this.imagePreviewUrls(record),
+                };
             })
         });
         server.endpoint({
@@ -1325,38 +1352,6 @@ export default class BulkAiFlowPlugin extends AdminForthPlugin {
                 return { ok: true, sessionId };
             })
         });
-        server.endpoint({
-            method: 'POST',
-            path: `/plugin/${this.pluginInstanceId}/compile_old_image_link`,
-            agent: { hiddenFromAgents: true },
-            request_schema: compileOldImageLinkBodySchema,
-            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser, headers, response }) {
-                var _b, _c;
-                const data = body;
-                const image = data.image;
-                const columnName = data.columnName;
-                if (!image) {
-                    return { ok: false, error: "Can't find image url" };
-                }
-                if (!columnName) {
-                    return { ok: false, error: "Can't find column name" };
-                }
-                try {
-                    if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.generateImages) {
-                        const plugin = this.adminforth.activatedPlugins.find(p => p.resourceConfig.resourceId === this.resourceConfig.resourceId &&
-                            p.pluginOptions.pathColumnName === columnName);
-                        if ((_c = plugin === null || plugin === void 0 ? void 0 : plugin.pluginOptions) === null || _c === void 0 ? void 0 : _c.preview) {
-                            const compiledPreviewUrl = plugin.pluginOptions.preview.previewUrl({ filePath: image });
-                            return { ok: true, previewUrl: compiledPreviewUrl };
-                        }
-                        return { ok: false, error: "Can't find plugin for column" };
-                    }
-                }
-                catch (e) {
-                    return { ok: false, error: "Error compiling preview url" };
-                }
-            })
-        });
         server.endpoint({
             method: 'POST',
             path: `/plugin/${this.pluginInstanceId}/get_filtered_ids`,

package/dist/types.d.ts

@@ -131,8 +131,8 @@ export interface PluginOptions extends PluginsCommonOptions {
         everyRecords: number;
     })[];
     /**
-     * Number of cards to show per page in the VisionTable component.
-     * If omitted, the component falls back to 6.
+     * Number of records per page in the list of the review dialog.
+     * If omitted, the list shows 10 records per page.
      */
     pageSize?: number;
 }

package/index.ts

@@ -50,11 +50,6 @@ const updateRateLimitsBodySchema = z.object({
   actionType: z.string().nullish(),
 }).strict();
 
-const compileOldImageLinkBodySchema = z.object({
-  image: z.string().nullish(),
-  columnName: z.string().nullish(),
-}).strict();
-
 const getFilteredIdsBodySchema = z.object({
   filters: z.any(),
 }).passthrough();
@@ -694,18 +689,26 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
       }
     }
 
-    const outputFields = {
-      ...this.options.fillFieldsFromImages,
-      ...this.options.fillPlainFields,
-      ...(this.options.generateImages || {})
-    };
+    const outputFields = [
+      ...outputFieldsForAnalizeFromImages,
+      ...outputPlainFields,
+      ...outputImageFields,
+    ];
 
     const primaryKeyColumn = this.resourceConfig.columns.find((col) => col.primaryKey);
     // Map of column technical names to their display labels from resource config
     const columnLabels: Record<string, string> = Object.fromEntries(
       (this.resourceConfig.columns || []).map((c: any) => [c.name, c.label || c.name])
     );
-    
+    // the review dialog picks an editor for a generated value by the type of its column
+    const columnTypes: Record<string, string> = Object.fromEntries(
+      this.resourceConfig.columns.filter((c) => outputFields.includes(c.name)).map((c) => [c.name, c.type])
+    );
+    // only the prompts go to the browser: an entry of generateImages may hold an adapter with its API key
+    const imageGenerationPrompts: Record<string, string> = Object.fromEntries(
+      Object.entries(this.options.generateImages || {}).map(([key, value]) => [key, value.prompt])
+    );
+
     const pageInjection = {
       file: this.componentPath('VisionAction.vue'),
       meta: {
@@ -714,6 +717,7 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
         actionName: this.options.actionName,
         columnEnums: columnEnums,
         columnLabels: columnLabels,
+        columnTypes: columnTypes,
         outputImageFields: outputImageFields,
         outputFieldsForAnalizeFromImages: outputFieldsForAnalizeFromImages,
         outputPlainFields: outputPlainFields,
@@ -737,7 +741,7 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
         generationPrompts: {
           plainFieldsPrompts: this.options.fillPlainFields || {},
           imageFieldsPrompts: this.options.fillFieldsFromImages || {},
-          imageGenerationPrompts: this.options.generateImages || {},
+          imageGenerationPrompts: imageGenerationPrompts,
         },
         pageSize: this.options.pageSize
       }
@@ -1036,6 +1040,24 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
     return scoped;
   }
 
+  /**
+   * Links to the stored images of the generated image columns, built by the Upload plugin of each
+   * column the same way its own previews are, so the dialog shows the current image next to the new one.
+   */
+  private async imagePreviewUrls(record: any): Promise<Record<string, string | null>> {
+    const previews: Record<string, string | null> = {};
+    for (const key of Object.keys(this.options.generateImages || {})) {
+      const uploadPlugin = this.adminforth.activatedPlugins.find(p =>
+        p.resourceConfig!.resourceId === this.resourceConfig.resourceId &&
+        p.pluginOptions.pathColumnName === key
+      ) as any;
+      const holder = { [key]: record[key] };
+      await uploadPlugin.genPreviewUrl(holder);
+      previews[key] = holder[`previewUrl_${uploadPlugin.pluginInstanceId}`] ?? null;
+    }
+    return previews;
+  }
+
   /**
    * The row as the caller is allowed to read it: columns which are not declared on the resource and
    * columns whose `backendOnly` resolves true for this request are dropped, exactly the way the
@@ -1072,7 +1094,11 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
         if (error) {
           return { ok: false, error };
         }
-        return { ok: true, record: await this.scopeRecordForFrontend(record, ctx) };
+        return {
+          ok: true,
+          record: await this.scopeRecordForFrontend(record, ctx),
+          imagePreviews: await this.imagePreviewUrls(record),
+        };
       }
     });
 
@@ -1402,39 +1428,6 @@ export default class  BulkAiFlowPlugin extends AdminForthPlugin {
     });
 
 
-    server.endpoint({
-      method: 'POST',
-      path: `/plugin/${this.pluginInstanceId}/compile_old_image_link`,
-      agent: { hiddenFromAgents: true },
-      request_schema: compileOldImageLinkBodySchema,
-      handler: async ({ body, adminUser, headers, response }) => {
-        const data = body as z.infer<typeof compileOldImageLinkBodySchema>;
-        const image = data.image;
-        const columnName = data.columnName;
-        if (!image) {
-          return { ok: false, error: "Can't find image url" };
-        }
-        if (!columnName) {
-          return { ok: false, error: "Can't find column name" };
-        }
-        try {
-          if (this.options?.generateImages) {
-            const plugin = this.adminforth.activatedPlugins.find(p =>
-              p.resourceConfig!.resourceId === this.resourceConfig.resourceId &&
-              p.pluginOptions.pathColumnName === columnName
-            );
-            if (plugin?.pluginOptions?.preview) {
-              const compiledPreviewUrl = plugin.pluginOptions.preview.previewUrl({ filePath: image });
-              return { ok: true, previewUrl: compiledPreviewUrl };
-            }
-            return { ok: false, error: "Can't find plugin for column" };
-          }
-        } catch (e) {
-          return { ok: false, error: "Error compiling preview url" };
-        }
-      }
-    });
-
     server.endpoint({
       method: 'POST',
       path: `/plugin/${this.pluginInstanceId}/get_filtered_ids`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/bulk-ai-flow",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -40,7 +40,7 @@
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "adminforth": "^4.1.0"
+    "adminforth": "^4.7.3"
   },
   "release": {
     "plugins": [

package/types.ts

@@ -154,8 +154,8 @@ export interface PluginOptions extends PluginsCommonOptions {
   askConfirmation?: ({ afterRecords: number } | { everyRecords: number })[]
 
   /**
-   * Number of cards to show per page in the VisionTable component.
-   * If omitted, the component falls back to 6.
+   * Number of records per page in the list of the review dialog.
+   * If omitted, the list shows 10 records per page.
    */
   pageSize?: number;
 

package/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>