@adminforth/bulk-ai-flow 1.0.1

package/dist/custom/visionAction.vue

@@ -0,0 +1,254 @@
+<template>
+  <div @click="openDialog">
+      <p class="">{{ props.meta.actionName }}</p>
+  </div>
+  <Dialog ref="confirmDialog">
+    <div
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      @click="closeDialog"
+    >
+      <div
+        class="relative max-w-[95vw] max-h-[90vh] bg-white dark:bg-gray-900 rounded-md shadow-2xl overflow-hidden"
+        @click.stop
+      >
+        <div class="flex flex-col items-end justify-evenly gap-4 w-full h-full p-6 overflow-y-auto">
+          <VisionTable
+            v-if="records && props.checkboxes.length"
+            :checkbox="props.checkboxes"
+            :records="records"
+            :index="0"
+            :meta="props.meta"
+            :images="images"
+            :tableHeaders="tableHeaders"
+            :tableColumns="tableColumns"
+            :customFieldNames="customFieldNames"
+            :tableColumnsIndexes="tableColumnsIndexes"
+            :selected="selected"
+            :isAiResponseReceived="isAiResponseReceived"
+          />
+          <Button 
+            class="w-64"
+            @click="saveData"
+          >
+          {{ props.checkboxes.length > 1 ? 'Save fields' : 'Save field' }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { callAdminForthApi } from '@/utils';
+import { ref, watch } from 'vue'
+import { Dialog, Button } from '@/afcl';
+import VisionTable from './visionTable.vue'
+
+const props = defineProps<{
+  checkboxes: any,
+  meta: any,
+  resource: any,
+  adminUser: any,
+  updateList: {
+    type: Function,
+    required: true
+  },
+  clearCheckboxes: {
+    type: Function
+  }
+}>();
+
+const confirmDialog = ref(null);
+const records = ref<any[]>([]);
+const images = ref<any[]>([]);
+const tableHeaders = ref([]);
+const tableColumns = ref([]);
+const tableColumnsIndexes = ref([]);
+const customFieldNames = ref([]);
+const selected = ref<any[]>([]);
+const isAiResponseReceived = ref([]);
+
+const openDialog = async () => {
+  confirmDialog.value.open();
+  await getRecords();
+  await getImages();
+  tableHeaders.value = generateTableHeaders(props.meta.outputFields);
+  const result = generateTableColumns();
+  tableColumns.value = result.tableData;
+  tableColumnsIndexes.value = result.indexes;
+  
+  customFieldNames.value = tableHeaders.value.slice(3).map(h => h.fieldName);
+  setSelected();
+  analyzeFields();
+}
+ 
+// watch(selected, (val) => {
+//   console.log('Selected changed:', val);
+// }, { deep: true });
+
+const closeDialog = () => {
+  confirmDialog.value.close();
+  isAiResponseReceived.value = [];
+}
+
+function formatLabel(str) {
+  return str
+    .split('_')                   
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');      
+}
+
+function generateTableHeaders(outputFields) {
+  const headers = [];
+
+  headers.push({ label: 'Checkboxes', fieldName: 'checkboxes' });
+  headers.push({ label: 'Field name', fieldName: 'label' });
+  headers.push({ label: 'Source Images', fieldName: 'images' });
+
+  if (outputFields.length > 0) {
+    const sampleField = outputFields[0];
+    for (const key in sampleField) {
+      headers.push({
+        label: formatLabel(key),
+        fieldName: key,
+      });
+    }
+  }
+  return headers;
+}
+
+function generateTableColumns() {
+  const fields = [];
+  const tableData = [];
+  const indexes = [];
+  for (const field of tableHeaders.value) {
+    fields.push( field.fieldName );
+  }
+  for (const [index, checkbox] of props.checkboxes.entries()) {
+    const record = records.value[index];
+    let reqFields: any = {};
+    for (const field of fields) {
+      reqFields[field] = record[field] || '';
+    }
+    reqFields.label = record._label;
+    reqFields.images = images.value[index];
+    reqFields.id = record.id;
+    indexes.push({
+      id: record.id,
+      label: record._label,
+    });
+    tableData.push(reqFields);
+  }
+  return { tableData, indexes };
+}
+
+function setSelected() {
+  selected.value = records.value.map(() => ({}));
+  
+  records.value.forEach((record, index) => {
+    props.meta.outputFields.forEach((fieldObj, i) => {
+      for (const key in fieldObj) {
+        if(isInColumnEnum(key)){
+          const colEnum = props.meta.columnEnums.find(c => c.name === key);
+          const object = colEnum.enum.find(item => item.value === record[key]);
+          selected.value[index][key] = object ? record[key] : null;
+        } else {
+          selected.value[index][key] = record[key];
+        }
+      }
+      selected.value[index].isChecked = true;
+      selected.value[index].id = record.id;
+      isAiResponseReceived.value[index] = true;
+    });
+  });
+}
+
+function isInColumnEnum(key: string): boolean {
+  const colEnum = props.meta.columnEnums?.find(c => c.name === key);
+  if (!colEnum) {
+    return false;
+  }
+  return true;
+}
+
+async function getRecords() {
+  const res = await callAdminForthApi({
+    path: `/plugin/${props.meta.pluginInstanceId}/get_records`,
+    method: 'POST',
+    body: {
+      record: props.checkboxes,
+    },
+  });
+  records.value = res.records;
+}
+
+async function getImages() {
+  const res = await callAdminForthApi({
+    path: `/plugin/${props.meta.pluginInstanceId}/get_images`,
+    method: 'POST',
+    body: {
+      record: records.value,
+    },
+  });
+
+  images.value = res.images;
+}
+
+function prepareDataForSave() {
+  const checkedItems = selected.value
+    .filter(item => item.isChecked === true)
+    .map(item => {
+      const { isChecked, id, ...itemWithoutIsCheckedAndId } = item;
+      return itemWithoutIsCheckedAndId;
+    });
+  const checkedItemsIDs = selected.value
+    .filter(item => item.isChecked === true)
+    .map(item => item.id);
+  return [checkedItemsIDs, checkedItems];
+}
+
+async function analyzeFields() {
+  isAiResponseReceived.value = props.checkboxes.map(() => false);
+
+  const res = await callAdminForthApi({
+    path: `/plugin/${props.meta.pluginInstanceId}/analyze`,
+    method: 'POST',
+    body: {
+      selectedIds: props.checkboxes,
+    },
+  });
+
+  isAiResponseReceived.value = props.checkboxes.map(() => true);
+
+  selected.value.splice(
+    0,
+    selected.value.length,
+    ...res.result.map((item, idx) => ({
+      ...item,
+      isChecked: true,
+      id: selected.value[idx]?.id,
+    }))
+  )
+}
+
+async function saveData() {
+  const [checkedItemsIDs, reqData] = prepareDataForSave();
+
+  const res = await callAdminForthApi({
+    path: `/plugin/${props.meta.pluginInstanceId}/update_fields`,
+    method: 'POST',
+    body: {
+      selectedIds: checkedItemsIDs,
+      fields: reqData,
+    },
+  });
+
+  if(res.ok) {
+    confirmDialog.value.close();
+    props.updateList();
+    props.clearCheckboxes();
+  } else {
+    console.error('Error saving data:', res);
+  }
+}
+</script>

package/dist/custom/visionTable.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <Table
+      :columns="tableHeaders"
+      :data="tableColumns"
+      :pageSize="8"
+      >
+      <!-- HEADER TEMPLATE -->
+      <template #header:checkboxes="{ item }">
+        MARK FOR SAVE
+      </template>
+      <!-- CHECKBOX CELL TEMPLATE -->
+      <template #cell:checkboxes="{ item }">
+        <div class="flex items-center justify-center">
+          <Checkbox
+            v-model="selected[tableColumnsIndexes.findIndex(el => el.label === item.label)].isChecked"
+          />
+        </div>
+      </template>
+      <!-- IMAGE CELL TEMPLATE -->
+      <template #cell:images="{item}">
+        <div class="flex flex-shrink-0 gap-2">
+          <div v-for="image in item.images" :key="image">
+            <div class="mt-2 flex items-center justify-center gap-2">
+              <img 
+                  :src="image"  
+                  class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition" 
+                  @click="zoomImage(image)"
+              />
+            </div>
+            <div
+              v-if="zoomedImage"
+              class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+              @click.self="closeZoom"
+            >
+              <img
+                :src="zoomedImage"
+                ref="zoomedImg"
+                class="max-w-full max-h-full rounded-lg object-contain cursor-grab z-75"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+      <!-- CUSTOM FIELD TEMPLATES -->
+      <template v-for="n in customFieldNames" :key="n" #[`cell:${n}`]="{ item, column }">
+        <div v-if="isAiResponseReceived[tableColumnsIndexes.findIndex(el => el.id === item.id)]">
+          <div v-if="isInColumnEnum(n)">
+            <Select
+              :options="convertColumnEnumToSelectOptions(props.meta.columnEnums, n)"
+              v-model="selected[tableColumnsIndexes.findIndex(el => el.id === item.id)][n]"
+            >
+            </Select>
+          </div>
+          <div v-else-if="typeof selected[tableColumnsIndexes.findIndex(el => el.id === item.id)][n] === 'string' || typeof selected[tableColumnsIndexes.findIndex(el => el.id === item.id)][n] === 'object'">
+            <Textarea
+              class="w-full h-full"
+              type="text"
+              v-model="selected[tableColumnsIndexes.findIndex(el => el.id === item.id)][n]"
+            >
+            </Textarea>
+          </div>
+          <div v-else-if="typeof selected[tableColumnsIndexes.findIndex(el => el.id === item.id)][n] === 'boolean'">
+            <Toggle
+              v-model="selected[tableColumnsIndexes.findIndex(el => el.id === item.id)][n]"
+            >
+            </Toggle>
+          </div>
+          <div v-else>
+            <Input
+              type="number"
+              v-model="selected[tableColumnsIndexes.findIndex(el => el.id === item.id)][n]"
+              class="w-full "
+              :fullWidth="true"
+            />
+          </div>
+        </div>
+        <div v-else>
+          <Skeleton class="w-full h-6" />
+        </div>
+      </template>
+    </Table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, watch } from 'vue'
+import mediumZoom from 'medium-zoom'
+import { Select, Input, Textarea, Table, Checkbox, Skeleton, Toggle } from '@/afcl'
+
+const props = defineProps<{
+  meta: any,
+  tableHeaders: any,
+  tableColumns: any,
+  customFieldNames: any,
+  tableColumnsIndexes: any,
+  selected: any,
+  isAiResponseReceived: boolean[]
+}>();
+
+const zoomedImage = ref(null)
+const zoomedImg = ref(null)
+
+function zoomImage(img) {
+  zoomedImage.value = img
+}
+
+function closeZoom() {
+  zoomedImage.value = null
+}
+
+watch(zoomedImage, async (val) => {
+  await nextTick()
+  if (val && zoomedImg.value) {
+    mediumZoom(zoomedImg.value, {
+      margin: 24,
+      background: 'rgba(0, 0, 0, 0.9)',
+      scrollOffset: 150
+    }).show()
+  }
+})
+
+function isInColumnEnum(key: string): boolean {
+  const colEnum = props.meta.columnEnums?.find(c => c.name === key);
+  if (!colEnum) {
+    return false;
+  }
+  return true;
+}
+
+function convertColumnEnumToSelectOptions(columnEnumArray: any[], key: string) {
+  const col = columnEnumArray.find(c => c.name === key);
+  if (!col) return [];
+  return col.enum.map(item => ({
+    label: item.label,
+    value: item.value
+  }));
+}
+
+</script>

package/dist/index.js

@@ -0,0 +1,166 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { AdminForthPlugin, Filters } from "adminforth";
+import Handlebars from 'handlebars';
+export default class BulkVisionPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    // Compile Handlebars templates in outputFields using record fields as context
+    compileOutputFieldsTemplates(record) {
+        return this.options.outputFields.map((fieldObj) => {
+            const compiled = {};
+            for (const [key, templateStr] of Object.entries(fieldObj)) {
+                try {
+                    const tpl = Handlebars.compile(String(templateStr));
+                    compiled[key] = tpl(record);
+                }
+                catch (_a) {
+                    compiled[key] = String(templateStr);
+                }
+            }
+            return compiled;
+        });
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        const _super = Object.create(null, {
+            modifyResourceConfig: { get: () => super.modifyResourceConfig }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            //check if options names are provided
+            const columns = this.resourceConfig.columns;
+            let columnEnums = [];
+            for (const field of this.options.outputFields) {
+                for (const [key, value] of Object.entries(field)) {
+                    const column = columns.find(c => c.name.toLowerCase() === key.toLowerCase());
+                    if (column) {
+                        if (column.enum) {
+                            field[key] = `${value} Select ${key} from the list (USE ONLY VALUE FIELD. USE ONLY VALUES FROM THIS LIST): ${JSON.stringify(column.enum)}`;
+                            columnEnums.push({
+                                name: key,
+                                enum: column.enum,
+                            });
+                        }
+                    }
+                    else {
+                        throw new Error(`⚠️ No column found for key "${key}"`);
+                    }
+                }
+            }
+            const pageInjection = {
+                file: this.componentPath('visionAction.vue'),
+                meta: {
+                    pluginInstanceId: this.pluginInstanceId,
+                    outputFields: this.options.outputFields,
+                    actionName: this.options.actionName,
+                    confirmMessage: this.options.confirmMessage,
+                    columnEnums: columnEnums,
+                }
+            };
+            if (!this.resourceConfig.options.pageInjections) {
+                this.resourceConfig.options.pageInjections = {};
+            }
+            if (!this.resourceConfig.options.pageInjections.list) {
+                this.resourceConfig.options.pageInjections.list = {};
+            }
+            this.resourceConfig.options.pageInjections.list.threeDotsDropdownItems = [pageInjection];
+        });
+    }
+    validateConfigAfterDiscover(adminforth, resourceConfig) {
+        // optional method where you can safely check field types after database discovery was performed
+    }
+    instanceUniqueRepresentation(pluginOptions) {
+        // optional method to return unique string representation of plugin instance. 
+        // Needed if plugin can have multiple instances on one resource 
+        return `single`;
+    }
+    setupEndpoints(server) {
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/analyze`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser, headers }) {
+                const selectedIds = body.selectedIds || [];
+                const tasks = selectedIds.map((ID) => __awaiter(this, void 0, void 0, function* () {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                    // Fetch the record using the provided ID
+                    const record = yield this.adminforth.resource(this.resourceConfig.resourceId).get([Filters.EQ('id', ID)]);
+                    //recieve image URLs to analyze
+                    const attachmentFiles = yield this.options.attachFiles({ record: record });
+                    //create prompt for OpenAI
+                    const compiledOutputFields = this.compileOutputFieldsTemplates(record);
+                    const prompt = `Analyze the following image(s) and return a single JSON in format like: {'param1': 'value1', 'param2': 'value2'}. 
+          Do NOT return array of objects. Do NOT include any Markdown, code blocks, explanations, or extra text. Only return valid JSON. 
+          Each object must contain the following fields: ${JSON.stringify(compiledOutputFields)} Use the exact field names. If it's number field - return only number.
+          Image URLs:`;
+                    //send prompt to OpenAI and get response
+                    const chatResponse = yield this.options.adapter.generate({ prompt, inputFileUrls: attachmentFiles });
+                    const resp = chatResponse.response;
+                    const topLevelError = chatResponse.error;
+                    if (topLevelError || (resp === null || resp === void 0 ? void 0 : resp.error)) {
+                        throw new Error(`ERROR: ${JSON.stringify(topLevelError || (resp === null || resp === void 0 ? void 0 : resp.error))}`);
+                    }
+                    const textOutput = (_f = (_e = (_d = (_c = (_b = (_a = resp === null || resp === void 0 ? void 0 : resp.output) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.text) !== null && _e !== void 0 ? _e : resp === null || resp === void 0 ? void 0 : resp.output_text) !== null && _f !== void 0 ? _f : (_j = (_h = (_g = resp === null || resp === void 0 ? void 0 : resp.choices) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.message) === null || _j === void 0 ? void 0 : _j.content;
+                    if (!textOutput || typeof textOutput !== 'string') {
+                        throw new Error('Unexpected AI response format');
+                    }
+                    //parse response and update record
+                    const resData = JSON.parse(textOutput);
+                    return resData;
+                }));
+                const result = yield Promise.all(tasks);
+                return { result };
+            })
+        });
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/get_records`,
+            handler: (body) => __awaiter(this, void 0, void 0, function* () {
+                let records = [];
+                for (const record of body.body.record) {
+                    records.push(yield this.adminforth.resource(this.resourceConfig.resourceId).get([Filters.EQ('id', record)]));
+                    records[records.length - 1]._label = this.resourceConfig.recordLabel(records[records.length - 1]);
+                }
+                return {
+                    records,
+                };
+            })
+        });
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/get_images`,
+            handler: (body) => __awaiter(this, void 0, void 0, function* () {
+                let images = [];
+                if (body.body.record) {
+                    for (const record of body.body.record) {
+                        images.push(yield this.options.attachFiles({ record: record }));
+                    }
+                }
+                return {
+                    images,
+                };
+            })
+        });
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/update_fields`,
+            handler: (body) => __awaiter(this, void 0, void 0, function* () {
+                const selectedIds = body.body.selectedIds || [];
+                const fieldsToUpdate = body.body.fields || {};
+                const updates = selectedIds.map((ID, idx) => this.adminforth
+                    .resource(this.resourceConfig.resourceId)
+                    .update(ID, fieldsToUpdate[idx]));
+                yield Promise.all(updates);
+                return { ok: true };
+            })
+        });
+    }
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};