@imgly/plugin-ai-image-generation-web 0.2.4 → 0.2.5

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+## [0.2.5] - 2025-09-03
+
+### New Features
+
+-   [image-generation] **NanoBanana Provider**: Added NanoBanana text-to-image provider via fal.ai with fast generation times, 1024×1024 resolution, support for multiple output formats (JPEG, PNG), configurable number of images (1-4), and remixPageWithPrompt quick action
+-   [image-generation] **NanoBananaEdit Provider**: Added NanoBananaEdit image-to-image provider via fal.ai for editing existing images with text prompts, supporting all standard quick actions (editImage, swapBackground, styleTransfer, artistTransfer, createVariant, combineImages with up to 10 images, remixPage, remixPageWithPrompt)
+
+### Bug Fixes
+
+-   [all] **fal.ai Provider Configuration**: Fixed singleton configuration conflict when using multiple fal.ai providers with different proxy URLs. Each provider now maintains its own client instance instead of overwriting a global configuration
+-   [video-generation] **Missing Dependency**: Added missing `@fal-ai/client` dependency to plugin-ai-video-generation-web package.json to ensure the package works correctly when installed independently
+
 ## [0.2.4] - 2025-08-07
 
 ### New Features

package/README.md

@@ -106,6 +106,13 @@ CreativeEditorSDK.create(domElement, {
             'x-client-version': '1.0.0'
           }
         }),
+        FalAiImage.NanoBanana({
+          proxyUrl: 'http://your-proxy-server.com/api/proxy',
+          headers: {
+            'x-custom-header': 'value',
+            'x-client-version': '1.0.0'
+          }
+        }),
         FalAiImage.Recraft20b({
           proxyUrl: 'http://your-proxy-server.com/api/proxy',
           headers: {
@@ -131,6 +138,13 @@ CreativeEditorSDK.create(domElement, {
             'x-client-version': '1.0.0'
           }
         }),
+        FalAiImage.NanoBananaEdit({
+          proxyUrl: 'http://your-proxy-server.com/api/proxy',
+          headers: {
+            'x-custom-header': 'value',
+            'x-client-version': '1.0.0'
+          }
+        }),
         OpenAiImage.GptImage1.Image2Image({
           proxyUrl: 'http://your-proxy-server.com/api/proxy',
           headers: {
@@ -364,6 +378,73 @@ Key features:
 - Maintains original dimensions
 - Canvas quick-action integration
 
+#### 9. NanoBanana (Text-to-Image)
+
+A fast and efficient text-to-image model from fal.ai that generates high-quality images:
+
+```typescript
+text2image: FalAiImage.NanoBanana({
+  proxyUrl: 'http://your-proxy-server.com/api/proxy',
+  headers: {
+    'x-custom-header': 'value',
+    'x-client-version': '1.0.0'
+  }
+})
+```
+
+Key features:
+- Fast generation times for quick prototyping
+- High-quality image output at 1024×1024 resolution
+- Simple prompt-based interface
+- Support for multiple output formats (JPEG, PNG)
+- Configurable number of images (1-4)
+- Supports page remixing with custom prompts
+- Custom headers support for API requests
+
+**Custom Translations:**
+```typescript
+cesdk.i18n.setTranslations({
+  en: {
+    'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana.property.prompt': 'Describe your image',
+    'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana.property.num_images': 'Number of Images',
+    'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana.property.output_format': 'Output Format'
+  }
+});
+```
+
+#### 10. NanoBananaEdit (Image-to-Image)
+
+An image editing model from fal.ai that transforms existing images using text prompts:
+
+```typescript
+image2image: FalAiImage.NanoBananaEdit({
+  proxyUrl: 'http://your-proxy-server.com/api/proxy',
+  headers: {
+    'x-custom-header': 'value',
+    'x-client-version': '1.0.0'
+  }
+})
+```
+
+Key features:
+- Edit existing images with text prompts
+- Supports combining multiple images (up to 10 images)
+- Maintains original image dimensions automatically
+- Supports all standard image editing quick actions
+- Fast processing times
+- Canvas quick-action integration
+- Custom headers support for API requests
+
+**Custom Translations:**
+```typescript
+cesdk.i18n.setTranslations({
+  en: {
+    'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana/edit.property.prompt': 'Edit instructions',
+    'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana/edit.property.image_url': 'Source Image'
+  }
+});
+```
+
 ### Customizing Labels and Translations
 
 You can customize all labels and text in the AI image generation interface using the translation system. This allows you to provide better labels for your users in any language.
@@ -401,22 +482,27 @@ cesdk.i18n.setTranslations({
 
 #### QuickAction Translations
 
-QuickActions (like "Edit Image", "Style Transfer", etc.) use their own translation keys:
+QuickActions (like "Edit Image", "Style Transfer", etc.) use their own translation keys with provider-specific overrides:
 
 ```typescript
 cesdk.i18n.setTranslations({
   en: {
-    // QuickAction button labels
+    // Provider-specific translations (highest priority)
+    'ly.img.plugin-ai-image-generation-web.fal-ai/gemini-flash-edit.quickAction.editImage': 'Edit with Gemini',
+    'ly.img.plugin-ai-image-generation-web.fal-ai/flux-pro/kontext.quickAction.styleTransfer': 'Style with Flux Pro Kontext',
+    'ly.img.plugin-ai-image-generation-web.open-ai/gpt-image-1/image2image.quickAction.editImage': 'Edit with GPT',
+
+    // Generic plugin translations
     'ly.img.plugin-ai-image-generation-web.quickAction.editImage': 'Edit Image...',
     'ly.img.plugin-ai-image-generation-web.quickAction.swapBackground': 'Swap Background...',
     'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer': 'Style Transfer...',
     'ly.img.plugin-ai-image-generation-web.quickAction.createVariant': 'Create Variant...',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer': 'Painted By...',
     
     // QuickAction input fields and buttons
     'ly.img.plugin-ai-image-generation-web.quickAction.editImage.prompt': 'Edit Image...',
     'ly.img.plugin-ai-image-generation-web.quickAction.editImage.prompt.placeholder': 'e.g. "Add a sunset"',
     'ly.img.plugin-ai-image-generation-web.quickAction.editImage.apply': 'Change',
-    
     'ly.img.plugin-ai-image-generation-web.quickAction.swapBackground.prompt': 'Swap Background...',
     'ly.img.plugin-ai-image-generation-web.quickAction.swapBackground.prompt.placeholder': 'e.g. "Beach at sunset"',
     'ly.img.plugin-ai-image-generation-web.quickAction.swapBackground.apply': 'Swap'
@@ -424,12 +510,59 @@ cesdk.i18n.setTranslations({
 });
 ```
 
-**QuickAction Translation Structure:**
+**QuickAction Translation Priority:**
+1. Provider-specific: `ly.img.plugin-ai-image-generation-web.${provider}.quickAction.${action}.${field}`
+2. Generic plugin: `ly.img.plugin-ai-image-generation-web.quickAction.${action}.${field}`
+
+**Translation Structure:**
 - Base key (e.g., `.quickAction.editImage`): Button text when QuickAction is collapsed
 - `.prompt`: Label for input field when expanded
 - `.prompt.placeholder`: Placeholder text for input field
 - `.apply`: Text for action/submit button
 
+#### QuickAction Dropdown Options
+
+Some QuickActions like Artist Transfer and Style Transfer include dropdown menus with predefined options. You can customize these dropdown labels using provider-specific translation keys:
+
+```typescript
+cesdk.i18n.setTranslations({
+  en: {
+    // Artist Transfer dropdown options (provider-specific)
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.van-gogh': 'Van Gogh',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.monet': 'Monet',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.picasso': 'Picasso',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.dali': 'Dalí',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.matisse': 'Matisse',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.warhol': 'Warhol',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.michelangelo': 'Michelangelo',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.da-vinci': 'Da Vinci',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.rembrandt': 'Rembrandt',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.mondrian': 'Mondrian',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.kahlo': 'Frida Kahlo',
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.hokusai': 'Hokusai',
+    
+    // Style Transfer dropdown options (provider-specific)  
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.water': 'Watercolor Painting',
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.oil': 'Oil Painting',
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.charcoal': 'Charcoal Sketch',
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.pencil': 'Pencil Drawing',
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.pastel': 'Pastel Artwork',
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.ink': 'Ink Wash',
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.stained-glass': 'Stained Glass Window',
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.japanese': 'Japanese Woodblock Print',
+    
+    // Generic fallback options (applies to all providers)
+    'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.property.artist.van-gogh': 'Van Gogh',
+    'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.property.style.water': 'Watercolor Painting'
+  }
+});
+```
+
+The system checks for translations in this order (highest to lowest priority):
+
+1. **Provider-specific**: `ly.img.plugin-ai-image-generation-web.quickAction.${actionName}.${providerId}.property.${field}.${option}` - Override labels for a specific AI provider
+2. **Generic**: `ly.img.plugin-ai-image-generation-web.quickAction.${actionName}.property.${field}.${option}` - Override labels for all AI plugins  
+
 ### Configuration Options
 
 The plugin accepts the following configuration options:
@@ -677,6 +810,26 @@ FalAiImage.FluxProKontextMaxEdit(config: {
 })
 ```
 
+#### NanoBanana
+
+```typescript
+FalAiImage.NanoBanana(config: {
+  proxyUrl: string;
+  headers?: Record<string, string>;
+  debug?: boolean;
+})
+```
+
+#### NanoBananaEdit
+
+```typescript
+FalAiImage.NanoBananaEdit(config: {
+  proxyUrl: string;
+  headers?: Record<string, string>;
+  debug?: boolean;
+})
+```
+
 ## UI Integration
 
 The plugin automatically registers the following UI components:
@@ -769,6 +922,8 @@ const myImageProvider = {
   - GptImage1.Image2Image: `ly.img.ai.open-ai/gpt-image-1/image2image`
   - FluxProKontextEdit: `ly.img.ai.fal-ai/flux-pro/kontext`
   - FluxProKontextMaxEdit: `ly.img.ai.fal-ai/flux-pro/kontext/max`
+  - NanoBanana: `ly.img.ai.fal-ai/nano-banana`
+  - NanoBananaEdit: `ly.img.ai.fal-ai/nano-banana/edit`
 
 ### Asset History
 
@@ -782,6 +937,8 @@ Generated images are automatically stored in asset sources with the following ID
 - GptImage1.Image2Image: `open-ai/gpt-image-1/image2image.history`
 - FluxProKontextEdit: `fal-ai/flux-pro/kontext.history`
 - FluxProKontextMaxEdit: `fal-ai/flux-pro/kontext/max.history`
+- NanoBanana: `fal-ai/nano-banana.history`
+- NanoBananaEdit: `fal-ai/nano-banana/edit.history`
 
 ### Dock Integration
 

package/dist/fal-ai/NanoBanana.d.ts

@@ -0,0 +1,13 @@
+import { ImageOutput, CommonProviderConfiguration, type Provider } from '@imgly/plugin-ai-generation-web';
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+type NanoBananaInput = {
+    prompt: string;
+    num_images?: number;
+    sync_mode?: boolean;
+    output_format?: 'jpeg' | 'png';
+};
+export declare function NanoBanana(config: CommonProviderConfiguration<NanoBananaInput, ImageOutput>): (context: {
+    cesdk: CreativeEditorSDK;
+}) => Promise<Provider<'image', NanoBananaInput, ImageOutput>>;
+declare function getProvider(cesdk: CreativeEditorSDK, config: CommonProviderConfiguration<NanoBananaInput, ImageOutput>): Provider<'image', NanoBananaInput, ImageOutput>;
+export default getProvider;

package/dist/fal-ai/NanoBananaEdit.d.ts

@@ -0,0 +1,13 @@
+import { ImageOutput, type Provider, type CommonProviderConfiguration } from '@imgly/plugin-ai-generation-web';
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+type NanoBananaEditInput = {
+    prompt: string;
+    image_url?: string;
+    image_urls?: string[];
+    exportFromBlockIds?: number[];
+};
+export declare function NanoBananaEdit(config: CommonProviderConfiguration<NanoBananaEditInput, ImageOutput>): (context: {
+    cesdk: CreativeEditorSDK;
+}) => Promise<Provider<'image', NanoBananaEditInput, ImageOutput>>;
+declare function getProvider(cesdk: CreativeEditorSDK, config: CommonProviderConfiguration<NanoBananaEditInput, ImageOutput>): Provider<'image', NanoBananaEditInput, ImageOutput>;
+export default getProvider;

package/dist/fal-ai/RecraftV3.constants.d.ts

@@ -1,9 +1,9 @@
-import { RecraftV3Input } from '@fal-ai/client/endpoints';
+import { RecraftV3TextToImageInput } from '@fal-ai/client/endpoints';
 export declare function getImageDimensions(id: string): {
     width: number;
     height: number;
 };
-export type StyleId = Extract<RecraftV3Input['style'], string>;
+export type StyleId = Extract<RecraftV3TextToImageInput['style'], string>;
 export declare const STYLES_IMAGE: {
     id: StyleId;
     label: string;

package/dist/fal-ai/RecraftV3.d.ts

@@ -1,12 +1,12 @@
 import { CommonProviderConfiguration, type Provider } from '@imgly/plugin-ai-generation-web';
-import { type RecraftV3Input } from '@fal-ai/client/endpoints';
+import { type RecraftV3TextToImageInput } from '@fal-ai/client/endpoints';
 import CreativeEditorSDK from '@cesdk/cesdk-js';
 type RecraftV3Output = {
     kind: 'image';
     url: string;
 };
-export type StyleId = Extract<RecraftV3Input['style'], string>;
-interface ProviderConfiguration extends CommonProviderConfiguration<RecraftV3Input, RecraftV3Output> {
+export type StyleId = Extract<RecraftV3TextToImageInput['style'], string>;
+interface ProviderConfiguration extends CommonProviderConfiguration<RecraftV3TextToImageInput, RecraftV3Output> {
     /**
      * Base URL used for the UI assets used in the plugin.
      *
@@ -17,6 +17,6 @@ interface ProviderConfiguration extends CommonProviderConfiguration<RecraftV3Inp
 }
 export declare function RecraftV3(config: ProviderConfiguration): (context: {
     cesdk: CreativeEditorSDK;
-}) => Promise<Provider<'image', RecraftV3Input, RecraftV3Output>>;
-declare function getProvider(cesdk: CreativeEditorSDK, config: ProviderConfiguration): Provider<'image', RecraftV3Input, RecraftV3Output>;
+}) => Promise<Provider<'image', RecraftV3TextToImageInput, RecraftV3Output>>;
+declare function getProvider(cesdk: CreativeEditorSDK, config: ProviderConfiguration): Provider<'image', RecraftV3TextToImageInput, RecraftV3Output>;
 export default getProvider;

package/dist/fal-ai/createFalClient.d.ts

@@ -0,0 +1,3 @@
+import { type FalClient as FalClientType } from '@fal-ai/client';
+export type FalClient = FalClientType;
+export declare function createFalClient(proxyUrl: string, headers?: Record<string, string>): FalClient;

package/dist/fal-ai/createImageProvider.d.ts

@@ -25,7 +25,10 @@ type ImageProviderConfiguration = {
  * Creates a base provider from schema. This should work out of the box
  * but may be rough around the edges and should/can be further customized.
  */
-declare function createImageProvider<I extends Record<string, any>>(options: {
+declare function createImageProvider<I extends Record<string, any> & {
+    image_url?: string;
+    image_urls?: string[];
+}>(options: {
     modelKey: string;
     name?: string;
     schema: OpenAPIV3.Document;

package/dist/fal-ai/index.d.ts

@@ -5,12 +5,16 @@ import { FluxProKontextEdit } from './FluxProKontextEdit';
 import { FluxProKontextMaxEdit } from './FluxProKontextMaxEdit';
 import { IdeogramV3 } from './IdeogramV3';
 import { IdeogramV3Remix } from './IdeogramV3Remix';
+import { NanoBanana } from './NanoBanana';
+import { NanoBananaEdit } from './NanoBananaEdit';
 declare const FalAi: {
     FluxProKontextEdit: typeof FluxProKontextEdit;
     FluxProKontextMaxEdit: typeof FluxProKontextMaxEdit;
     GeminiFlashEdit: typeof GeminiFlashEdit;
     IdeogramV3: typeof IdeogramV3;
     IdeogramV3Remix: typeof IdeogramV3Remix;
+    NanoBanana: typeof NanoBanana;
+    NanoBananaEdit: typeof NanoBananaEdit;
     Recraft20b: typeof Recraft20b;
     RecraftV3: typeof RecraftV3;
 };