Merge branch 'next'

Author: ivictbor

adapters/install-adapters.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-ADAPTERS="adminforth-completion-adapter-open-ai-chat-gpt adminforth-email-adapter-aws-ses adminforth-google-oauth-adapter adminforth-github-oauth-adapter adminforth-facebook-oauth-adapter adminforth-keycloak-oauth-adapter adminforth-microsoft-oauth-adapter"
+ADAPTERS="adminforth-completion-adapter-open-ai-chat-gpt adminforth-email-adapter-aws-ses adminforth-google-oauth-adapter adminforth-github-oauth-adapter adminforth-facebook-oauth-adapter adminforth-keycloak-oauth-adapter adminforth-microsoft-oauth-adapter adminforth-image-generation-adapter-openai"
 
 # for each
 install_adapter() {

adminforth/documentation/blog/2024-10-01-ai-blog/index.md

@@ -40,7 +40,7 @@ nvm use 20
 ## Step 1: Create a new AdminForth project
 
 ```bash
-npx adminforth create-app ai-blog
+npx adminforth create-app --app-name ai-blog
 ```
 
 Add modules:
@@ -440,11 +440,10 @@ export default {
         { originalFilename, originalExtension }: {originalFilename: string, originalExtension: string }
       ) => `user-avatars/${new Date().getFullYear()}/${randomUUID()}/${originalFilename}.${originalExtension}`,
       generation: {
-        provider: 'openai-dall-e',
+        provider: 'openai',
         countToGenerate: 2,
         openAiOptions: {
-          model: 'dall-e-3',
-          size: '1024x1024',
+          model: 'gpt-4o',
           apiKey: process.env.OPENAI_API_KEY,
         },
       },
@@ -562,11 +561,10 @@ export default {
         { originalFilename, originalExtension }: {originalFilename: string, originalExtension: string }
       ) => `post-previews/${new Date().getFullYear()}/${randomUUID()}/${originalFilename}.${originalExtension}`,
       generation: {
-        provider: 'openai-dall-e',
+        provider: 'openai',
         countToGenerate: 2,
         openAiOptions: {
-          model: 'dall-e-3',
-          size: '1792x1024',
+          model: 'gpt-4o',
           apiKey: process.env.OPENAI_API_KEY,
         },
         fieldsForContext: ['title'],

adminforth/documentation/blog/2025-02-19-compose-ec2-deployment-ci-registry/index.md

@@ -34,9 +34,9 @@ When I implmented this solution, I was curious whether it will be faster to buil
 First I used results form [deploying AdminForth to EC2 with Terraform without registry](/blog/compose-ec2-deployment-github-actions/) where we built images on EC2. Then I did the same test but with self-hosted registry on EC2 and compared to [deploying AdminForth to EC2 with Amazon ECR](/blog/compose-aws-ec2-ecr-terraform-github-actions/) where we built images on CI and pushed to Amazon ECR.
 
 | Feature | Without Registry (build directly on EC2) | With self-hosted registry | With Amazon ECR |
-| --- | --- | --- |
+| --- | --- | --- | --- |
 | Initial build time\* |  3m 13.541s | 2m 48.412s | 3m 54s |
-| Rebuild time (changed `index.ts`)\*|  0m 51.653s | 0m 54.120s |
+| Rebuild time (changed `index.ts`)\* | 0m 51.653s | 0m42.131s | 0m 54.120s | 
 
 <sub>\* All tests done from local machine (Intel(R) Core(TM) Ultra 9 185H, Docker Desktop/WSL2 64 GB RAM, 300Mbps up/down) up to working state</sub>
 

adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md

@@ -360,6 +360,30 @@ const coreStore = useCoreStore();
 </script>
 ```
 
+ALso if you want to disable ability to change such fields (but keep them as readonly) you can add `readonlyColumns` to the link:
+
+```html title="./resources/Dashboard.vue
+<template>
+  ...
+  <LinkButton
+    :to="{
+      name: 'resource-create',
+      params: {
+        resourceId: 'aparts',
+      },
+      query: {
+        values: encodeURIComponent(JSON.stringify({
+          realtor_id: coreStore?.adminUser.dbUser.id 
+        })),
+        //diff-add
+        readonlyColumns: encodeURIComponent(JSON.stringify(['realtor_id'])),
+      },
+    }"
+  >
+    {{$t('Create new apartment')}}
+  </LinkButton>
+  ...
+```
 
 ## Editing
 

adminforth/documentation/docs/tutorial/05-Plugins/05-upload.md

@@ -252,28 +252,32 @@ Also you will have to enable static website hosting in your bucket settings and
 
 ## Image generation
 
-Upload plugin supports AI generation for images
+Upload plugin supports AI generation for images. Yo use it you need to install image generation adapter.
+For example for OpenAI models like `gpt-image-1` (or old `DALL-E` models):
+
+```bash
+npm i @adminforth/image-generation-adapter-openai
+```
+
+
 
 ```ts title="./index.ts"
+import ImageGenerationAdapterOpenAI from '@adminforth/image-generation-adapter-openai';
 
 new UploadPlugin({
   ...
 //diff-add
   generation: {
-//diff-add
-    provider: 'openai-dall-e',
 //diff-add
     countToGenerate: 2,  // how much images generate in one shot
 //diff-add
-    openAiOptions: {
-//diff-add
-      model: 'dall-e-3',  // one of models from OpenAI docs https://platform.openai.com/docs/api-reference/images/create
-//diff-add
-      size: '1792x1024',  // make sure that size is supported by model using OpenAI docs
-//diff-add
-      apiKey: process.env.OPENAI_API_KEY as string,
-//diff-add
-    },
+    adapter: new ImageGenerationAdapterOpenAI({
+  //diff-add
+      openAiApiKey: process.env.OPENAI_API_KEY as string,
+  //diff-add
+      model: 'gpt-image-1', 
+  //diff-add
+    }),
 //diff-add
     fieldsForContext: ['title'],
 
@@ -284,6 +288,50 @@ Here is how it works:
 
 ![alt text](demoImgGen-1.gif)
 
+You can also pass additional parameters to OpenAI API call
+
+
+```ts title="./apartments.ts"
+new ImageGenerationAdapterOpenAI({
+  //diff-add
+      openAiApiKey: process.env.OPENAI_API_KEY as string,
+  //diff-add
+      model: 'gpt-image-1', 
+  //diff-add
+      extraParams: {
+  //diff-add
+        moderation: 'low',
+  //diff-add
+        quality: 'high',  
+  //diff-add
+    }),
+```
+
+
+## Images editing or post-processing
+
+You can not only generate images from text, but also edit, post-process or improve existing images. E.g. remove texts, add objects, change colors, etc.
+
+Create a new column `apartment_source` in `apartments` table, and put another instance of `UploadPlugin` in the same resource configuration.
+
+
+Now tweak the current UploadPlugin configuration in a next way:
+
+
+```ts title="./apartments.ts"
+generation: {
+  adapter: new ImageGenerationAdapterOpenAI({
+    openAiApiKey: process.env.OPENAI_API_KEY as string,
+  }),
+
+  attachFiles: ({ record, adminUser }: { record: any; adminUser: AdminUser }) => {
+    // attach apartment source image to generation, image should be public
+    return [`https://tmpbucket-adminforth.s3.eu-central-1.amazonaws.com/${record.apartment_source}`];
+  },
+  generationPrompt: "Remove text from the image",
+  countToGenerate: 3,
+}
+```
 
 ### Rate limits
 
@@ -294,11 +342,11 @@ new UploadPlugin({
   ...
   generation: {
     ...
-//diff-add
-  rateLimit: {
-    limit: '5/12h', // up to 5 times per 12 hour 
-    errorMessage: 'You exhausted your image generation limit 5 times per 12 hours, please try again later',
-  }
+  //diff-add
+    rateLimit: {
+      limit: '5/12h', // up to 5 times per 12 hour 
+      errorMessage: 'You exhausted your image generation limit 5 times per 12 hours, please try again later',
+    }
       ...
 });
 ```

adminforth/modules/restApi.ts

@@ -29,9 +29,9 @@ export async function interpretResource(
   source: ActionCheckSource, 
   adminforth: IAdminForth
 ): Promise<{allowedActions: AllowedActionsResolved}> {
-  // if (process.env.HEAVY_DEBUG) {
-  //   console.log('🪲Interpreting resource', resource.resourceId, source, 'adminUser', adminUser);
-  // }
+  if (process.env.HEAVY_DEBUG) {
+    console.log('🪲Interpreting resource', resource.resourceId, source, 'adminUser', adminUser);
+  }
   const allowedActions = {} as AllowedActionsResolved;
 
   // we need to compute only allowed actions for this source:
@@ -56,9 +56,6 @@ export async function interpretResource(
   await Promise.all(
     Object.entries(resource.options.allowedActions).map(
       async ([key, value]: [string, AllowedActionValue]) => {
-        if (process.env.HEAVY_DEBUG) {
-          console.log(`🪲🚥${resource.resourceId}: allowed ${key}: ${value}`)
-        }
         if (!neededActions.includes(key as AllowedActionsEnum)) {
           allowedActions[key] = false;
           return;

adminforth/spa/package-lock.json

@@ -6,7 +6,7 @@
     <slot name="trigger"></slot>
   </div>
   <Teleport to="body">
-    <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+    <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
       <div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="$attrs.class?.includes('w-') ? '' : 'w-full'">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">

adminforth/spa/src/afcl/Dialog.vue

@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
 import { humanifySize } from '@/utils';
-import { ref, defineExpose, type Ref } from 'vue';
+import { ref, type Ref } from 'vue';
 import { IconFileSolid } from '@iconify-prerendered/vue-flowbite';
 import { watch } from 'vue';
 import adminforth from '@/adminforth';

adminforth/spa/src/afcl/Dropzone.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex z-0">
+  <div class="flex z-0" :class="{'opacity-50' : readonly}">
     <span
         v-if="$slots.prefix || prefix"
         class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
@@ -18,6 +18,7 @@
       class="inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
       blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white translate-y-0"
       :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth}"
+      :disabled="readonly"
     >
 
 
@@ -34,13 +35,14 @@
 
 import { ref } from 'vue';
 
-const props = defineProps({
-  type: String,
-  fullWidth: Boolean,
-  modelValue: String,
-  suffix: String,
-  prefix: String,
-})
+const props = defineProps<{
+  type: string,
+  fullWidth: boolean,
+  modelValue: string,
+  suffix: string,
+  prefix: string,
+  readonly?: boolean,
+}>()
 
 const input = ref<HTMLInputElement | null>(null)