@imgly/plugin-ai-text-generation-web 0.1.10 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 ## [Unreleased]
 
+## [0.2.0] - 2025-07-15
+
+### Breaking Changes
+
+-   [all] **Provider Initialization**: `initProvider` is replaced with `initializeProviders` and `initializeProvider` with a different signature
+-   [all] **Quick Actions Structure**: `provider.input.quickctions.actions` replaced with `provider.input.quickActions.supported`
+-   [all] **History Asset Sources**: Combined history asset source is now not added to the default asset libraries anymore. Add the following sources to any library entry (default or not):
+    -   Image Generation History: `ly.img.ai.image-generation.history`
+    -   Video Generation History: `ly.img.ai.video-generation.history`
+    -   Audio Generation History: `ly.img.ai.audio-generation.history`
+    -   Sticker Generation History: `ly.img.ai.sticker-generation.history`
+-   [all] **ID Format Standardization**: All `ly.img.ai/` prefixed IDs changed to use dot notation `ly.img.ai.` for consistency
+    -   Panel IDs: `ly.img.ai/apps` → `ly.img.ai.apps`, `ly.img.ai/image-generation` → `ly.img.ai.image-generation`
+    -   Dock IDs: `ly.img.ai/apps.dock` → `ly.img.ai.apps.dock`
+
+### New Features
+
+-   [all] **Multiple Providers Support**: All plugin packages now support arrays of providers with automatic selection UI
+-   [image-generation] **Recraft20b Provider**: Added new Recraft20b (v2) provider via fal.ai with support for icon styles including `broken_line`, `colored_outline`, `colored_shapes`, and more
+-   [sticker-generation] **New Sticker Generation Plugin**: Added `@imgly/plugin-ai-sticker-generation-web` plugin for AI-powered sticker generation with support for text-to-sticker generation using Recraft20b provider with icon styles
+-   [image-generation] **Flux Pro Kontext Provider**: Added Flux Pro Kontext provider for image editing with style transfer and artist style options
+-   [image-generation] **Flux Pro Kontext Max Provider**: Added Flux Pro Kontext Max provider for enhanced image editing capabilities
+-   [video-generation] **Veo3 Provider**: Added Veo3 text-to-video provider via fal.ai with support for 16:9, 9:16, and 1:1 aspect ratios and 8-second duration
+-   [video-generation] **Kling Video V2.1 Master Providers**: Added Kling Video V2.1 Master providers for both text-to-video and image-to-video generation with configurable duration (5s/10s) and aspect ratios
+-   [text-generation] **Model Selection**: OpenAI and Anthropic providers now support configurable model selection through the `model` parameter
+
+### Deprecated Features
+
+-   [all] **Middleware Configuration**: The `middleware` property in provider configurations is deprecated. Use `middlewares` instead. The old property will continue to work for now.
+
 ## [0.1.10] - 2025-06-20
 
 -   [all] Fix issue with GPT provider when using text provider

package/README.md

@@ -29,7 +29,9 @@ npm install @imgly/plugin-ai-text-generation-web
 
 ### Basic Configuration
 
-To use the plugin, import it and configure it with your preferred provider:
+To use the plugin, import it and configure it with your preferred provider(s):
+
+#### Single Provider
 
 ```typescript
 import CreativeEditorSDK from '@cesdk/cesdk-js';
@@ -45,7 +47,12 @@ CreativeEditorSDK.create(domElement, {
     cesdk.addPlugin(
         TextGeneration({
             provider: Anthropic.AnthropicProvider({
-                proxyUrl: 'https://your-anthropic-proxy.example.com'
+                proxyUrl: 'http://your-proxy-server.com/api/proxy',
+                model: 'claude-3-7-sonnet-20250219', // Optional model selection (this is also the default)
+                headers: {
+                    'x-custom-header': 'value',
+                    'x-client-version': '1.0.0'
+                }
             }),
 
             // Optional configuration
@@ -61,9 +68,58 @@ CreativeEditorSDK.create(domElement, {
 });
 ```
 
+#### Multiple Providers
+
+You can configure multiple providers, and users will see a selection box to choose between them:
+
+```typescript
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import TextGeneration from '@imgly/plugin-ai-text-generation-web';
+import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';
+
+// Initialize CreativeEditor SDK
+CreativeEditorSDK.create(domElement, {
+    license: 'your-license-key'
+    // Other configuration options...
+}).then(async (cesdk) => {
+    // Add the text generation plugin with multiple providers
+    cesdk.addPlugin(
+        TextGeneration({
+            provider: [
+                Anthropic.AnthropicProvider({
+                    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+                    model: 'claude-3-7-sonnet-20250219', // Optional model selection (this is also the default)
+                    headers: {
+                        'x-custom-header': 'value',
+                        'x-client-version': '1.0.0'
+                    }
+                }),
+                // Add more providers here as they become available
+                // OtherProvider.SomeModel({
+                //     proxyUrl: 'http://your-proxy-server.com/api/proxy',
+                //     headers: {
+                //         'x-api-key': 'your-key',
+                //         'x-source': 'cesdk'
+                //     }
+                // })
+            ],
+
+            // Optional configuration
+            debug: false
+        })
+    );
+
+    // Set canvas menu order to display AI text actions
+    cesdk.ui.setCanvasMenuOrder([
+        'ly.img.ai.text.canvasMenu',
+        ...cesdk.ui.getCanvasMenuOrder()
+    ]);
+});
+```
+
 ### Providers
 
-The plugin currently includes the following provider:
+The plugin currently includes the following providers:
 
 #### Anthropic Claude
 
@@ -71,28 +127,79 @@ A versatile text generation model that handles various text transformations:
 
 ```typescript
 provider: Anthropic.AnthropicProvider({
-    proxyUrl: 'https://your-anthropic-proxy.example.com',
+    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+    
+    // Optional model selection (this is also the default)
+    model: 'claude-3-7-sonnet-20250219',
+    
+    // Optional custom headers for API requests
+    headers: {
+        'x-custom-header': 'value',
+        'x-client-version': '1.0.0',
+        'x-request-source': 'cesdk-plugin'
+    },
+    
     // Optional debug mode
     debug: false
 });
 ```
 
+**Default Model**: If no model is specified, the provider uses `'claude-3-7-sonnet-20250219'` by default.
+
 Key features:
 
 -   High-quality text transformations
 -   Multiple transformation types
 -   Supports various languages
 -   Natural, human-like outputs
+-   Custom headers support for API requests
+-   Configurable model selection (Claude 3.5 Sonnet, Claude 3.7 Sonnet, etc.)
+-   Default model: Claude 3.7 Sonnet (2025-02-19)
+
+#### OpenAI GPT
+
+A powerful text generation model that handles various text transformations:
+
+```typescript
+provider: OpenAIText.OpenAIProvider({
+    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+    
+    // Optional model selection (this is also the default)
+    model: 'gpt-4o-mini',
+    
+    // Optional custom headers for API requests
+    headers: {
+        'x-custom-header': 'value',
+        'x-client-version': '1.0.0',
+        'x-request-source': 'cesdk-plugin'
+    },
+    
+    // Optional debug mode
+    debug: false
+});
+```
+
+**Default Model**: If no model is specified, the provider uses `'gpt-4o-mini'` by default.
+
+Key features:
+
+-   High-quality text transformations
+-   Multiple transformation types
+-   Supports various languages
+-   Natural, human-like outputs
+-   Custom headers support for API requests
+-   Configurable model selection (GPT-4o, GPT-4o-mini, GPT-3.5-turbo, etc.)
+-   Default model: GPT-4o-mini
 
 ### Configuration Options
 
 The plugin accepts the following configuration options:
 
-| Option       | Type       | Description                                     | Default  |
-| ------------ | ---------- | ----------------------------------------------- | -------- |
-| `provider`   | Provider   | Provider for text generation and transformation | required |
-| `debug`      | boolean    | Enable debug logging                            | false    |
-| `middleware` | Function[] | Array of middleware functions for the generation| undefined|
+| Option       | Type                 | Description                                     | Default  |
+| ------------ | -------------------- | ----------------------------------------------- | -------- |
+| `provider`   | Provider \| Provider[] | Provider(s) for text generation and transformation. When multiple providers are provided, users can select between them | required |
+| `debug`      | boolean              | Enable debug logging                            | false    |
+| `middleware` | Function[]           | Array of middleware functions for the generation| undefined|
 
 ### Middleware Configuration
 
@@ -101,6 +208,7 @@ The `middleware` option allows you to add pre-processing and post-processing cap
 ```typescript
 import TextGeneration from '@imgly/plugin-ai-text-generation-web';
 import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';
+import OpenAIText from '@imgly/plugin-ai-text-generation-web/open-ai';
 import { loggingMiddleware, rateLimitMiddleware } from '@imgly/plugin-ai-generation-web';
 
 // Create middleware functions
@@ -137,7 +245,7 @@ const customMiddleware = async (input, options, next) => {
 cesdk.addPlugin(
   TextGeneration({
     provider: Anthropic.AnthropicProvider({
-      proxyUrl: 'https://your-anthropic-proxy.example.com'
+      proxyUrl: 'http://your-proxy-server.com/api/proxy'
     }),
     middleware: [logging, rateLimit, customMiddleware] // Apply middleware in order
   })
@@ -157,7 +265,11 @@ For security reasons, you must use a proxy server to handle API requests to Anth
 
 ```typescript
 provider: Anthropic.AnthropicProvider({
-    proxyUrl: 'https://your-anthropic-proxy.example.com'
+    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+    headers: {
+        'x-custom-header': 'value',
+        'x-client-version': '1.0.0'
+    }
 });
 ```
 
@@ -165,10 +277,16 @@ Your proxy server should:
 
 1. Receive requests from the client
 2. Add the necessary authentication (API key) to the requests
-3. Forward requests to the Anthropic API
+3. Forward requests to the AI provider API (Anthropic, OpenAI, etc.)
 4. Return responses to the client
 
-Never expose your Anthropic API key in client-side code.
+The `headers` option allows you to include custom HTTP headers in all API requests. This is useful for:
+- Adding custom client identification headers
+- Including version information
+- Passing through metadata required by your API
+- Adding correlation IDs for request tracing
+
+Never expose your API keys in client-side code.
 
 ## API Reference
 
@@ -184,10 +302,10 @@ Creates and returns a plugin that can be added to CreativeEditor SDK.
 
 ```typescript
 interface PluginConfiguration {
-    // Provider for text generation and transformation
+    // Provider(s) for text generation and transformation
     provider: (context: {
         cesdk: CreativeEditorSDK;
-    }) => Promise<Provider<'text', any, any>>;
+    }) => Promise<Provider<'text', any, any> | Provider<'text', any, any>[]>;
 
     // Enable debug logging
     debug?: boolean;
@@ -199,6 +317,19 @@ interface PluginConfiguration {
 ```typescript
 Anthropic.AnthropicProvider(config: {
   proxyUrl: string;
+  model?: string;
+  headers?: Record<string, string>;
+  debug?: boolean;
+})
+```
+
+### OpenAI Provider Configuration
+
+```typescript
+OpenAIText.OpenAIProvider(config: {
+  proxyUrl: string;
+  model?: string;
+  headers?: Record<string, string>;
   debug?: boolean;
 })
 ```
@@ -211,16 +342,64 @@ The plugin automatically registers the following UI components:
 
 ### Canvas Menu Integration
 
-The plugin adds a "Magic Menu" to the canvas context menu for text blocks with the following transformation options:
+The plugin automatically registers quick actions for text transformation. Here are the available quick actions:
+
+#### Available Quick Actions
+
+- **`ly.img.improve`**: Improve writing quality
+  - Input: `{ prompt: string }`
+
+- **`ly.img.fix`**: Fix spelling and grammar
+  - Input: `{ prompt: string }`
+
+- **`ly.img.shorter`**: Make text shorter
+  - Input: `{ prompt: string }`
+
+- **`ly.img.longer`**: Make text longer
+  - Input: `{ prompt: string }`
 
--   **Improve Writing**: Enhance the quality and clarity of text
--   **Fix Spelling & Grammar**: Correct language errors in text
--   **Make Shorter**: Create a more concise version of the text
--   **Make Longer**: Expand text with additional details
--   **Generate Speech Text**: Format text for speech or presentations
--   **Change Tone**: Modify the tone of text to professional, casual, friendly, serious, humorous, or optimistic
--   **Translate**: Translate text to various languages
--   **Change Text to...**: Completely rewrite text based on a custom prompt
+- **`ly.img.changeTone`**: Change the tone of the text
+  - Input: `{ prompt: string, type: string }`
+
+- **`ly.img.translate`**: Translate text to different languages
+  - Input: `{ prompt: string, language: string }`
+
+- **`ly.img.changeTextTo`**: Change text to a different format or style
+  - Input: `{ prompt: string, customPrompt: string }`
+
+#### Provider Quick Action Support
+
+Providers declare which quick actions they support through their configuration:
+
+```typescript
+const myTextProvider = {
+    // ... other provider config
+    input: {
+        // ... panel config
+        quickActions: {
+            supported: {
+                'ly.img.improve': {
+                    mapInput: (quickActionInput) => ({
+                        prompt: quickActionInput.prompt
+                    })
+                },
+                'ly.img.fix': {
+                    mapInput: (quickActionInput) => ({
+                        prompt: quickActionInput.prompt
+                    })
+                },
+                'ly.img.changeTone': {
+                    mapInput: (quickActionInput) => ({
+                        prompt: quickActionInput.prompt,
+                        tone: quickActionInput.type
+                    })
+                }
+                // Add more supported quick actions as needed
+            }
+        }
+    }
+};
+```
 
 To add the AI text menu to your canvas menu, use:
 
@@ -233,10 +412,10 @@ cesdk.ui.setCanvasMenuOrder([
 
 ## Related Packages
 
--   [@imgly/plugin-ai-generation-web](https://github.com/imgly/plugin-ai-generation-web) - Core utilities for AI generation
--   [@imgly/plugin-ai-image-generation-web](https://github.com/imgly/plugin-ai-image-generation-web) - AI image generation
--   [@imgly/plugin-ai-video-generation-web](https://github.com/imgly/plugin-ai-video-generation-web) - AI video generation
--   [@imgly/plugin-ai-audio-generation-web](https://github.com/imgly/plugin-ai-audio-generation-web) - AI audio generation
+-   [@imgly/plugin-ai-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-generation-web) - Core utilities for AI generation
+-   [@imgly/plugin-ai-image-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-image-generation-web) - AI image generation
+-   [@imgly/plugin-ai-video-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-video-generation-web) - AI video generation
+-   [@imgly/plugin-ai-audio-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-audio-generation-web) - AI audio generation
 
 ## License
 

package/dist/anthropic/AnthropicProvider.d.ts

@@ -1,5 +1,6 @@
 import CreativeEditorSDK from '@cesdk/cesdk-js';
-import { Provider, type CommonProviderConfiguration } from '@imgly/plugin-ai-generation-web';
+import { type CommonProviderConfiguration } from '@imgly/plugin-ai-generation-web';
+import { TextProvider } from '../types';
 type AnthropicInput = {
     prompt: string;
     temperature?: number;
@@ -11,7 +12,10 @@ type AnthropicOutput = {
     kind: 'text';
     text: string;
 };
-export declare function AnthropicProvider(config: CommonProviderConfiguration<AnthropicInput, AnthropicOutput>): (context: {
+export interface AnthropicProviderConfig extends CommonProviderConfiguration<AnthropicInput, AnthropicOutput> {
+    model?: string;
+}
+export declare function AnthropicProvider(config: AnthropicProviderConfig): (context: {
     cesdk: CreativeEditorSDK;
-}) => Promise<Provider<'text', AnthropicInput, AnthropicOutput>>;
+}) => Promise<TextProvider<AnthropicInput>>;
 export {};