@imgly/plugin-ai-video-generation-web 0.1.9 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 ## [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
+
 ## [0.1.9] - 2025-06-05
 
 -   [all] Add support for custom headers

package/README.md

@@ -27,6 +27,8 @@ npm install @imgly/plugin-ai-video-generation-web
 
 To use the plugin, import it and configure it with your preferred providers:
 
+#### Single Provider Configuration
+
 ```typescript
 import CreativeEditorSDK from '@cesdk/cesdk-js';
 import VideoGeneration from '@imgly/plugin-ai-video-generation-web';
@@ -42,12 +44,72 @@ CreativeEditorSDK.create(domElement, {
         VideoGeneration({
             // Text-to-video provider
             text2video: FalAiVideo.MinimaxVideo01Live({
-                proxyUrl: 'https://your-fal-ai-proxy.example.com'
+                proxyUrl: 'http://your-proxy-server.com/api/proxy',
+                headers: {
+                    'x-custom-header': 'value',
+                    'x-client-version': '1.0.0'
+                }
+            }),
+
+            // Image-to-video provider (optional)
+            image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({
+                proxyUrl: 'http://your-proxy-server.com/api/proxy',
+                headers: {
+                    'x-custom-header': 'value',
+                    'x-client-version': '1.0.0'
+                }
             }),
 
+            // Optional configuration
+            debug: false,
+            dryRun: false
+        })
+    );
+});
+```
+
+#### Multiple Providers Configuration
+
+You can configure multiple providers for each generation type, and users will see a selection box to choose between them:
+
+```typescript
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import VideoGeneration from '@imgly/plugin-ai-video-generation-web';
+import FalAiVideo from '@imgly/plugin-ai-video-generation-web/fal-ai';
+
+// Initialize CreativeEditor SDK
+CreativeEditorSDK.create(domElement, {
+    license: 'your-license-key'
+    // Other configuration options...
+}).then(async (cesdk) => {
+    // Add the video generation plugin with multiple providers
+    cesdk.addPlugin(
+        VideoGeneration({
+            // Multiple text-to-video providers
+            text2video: [
+                FalAiVideo.MinimaxVideo01Live({
+                    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+                    headers: {
+                        'x-custom-header': 'value',
+                        'x-client-version': '1.0.0'
+                    }
+                }),
+                FalAiVideo.PixverseV35TextToVideo({
+                    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+                    headers: {
+                        'x-custom-header': 'value',
+                        'x-client-version': '1.0.0'
+                    }
+                })
+            ],
+
             // Image-to-video provider (optional)
             image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({
-                proxyUrl: 'https://your-fal-ai-proxy.example.com'
+                proxyUrl: 'http://your-proxy-server.com/api/proxy',
+                headers: {
+                    'x-custom-header': 'value',
+                    'x-client-version': '1.0.0'
+                }
             }),
 
             // Optional configuration
@@ -68,7 +130,11 @@ A model that generates videos based on text prompts:
 
 ```typescript
 text2video: FalAiVideo.MinimaxVideo01Live({
-    proxyUrl: 'https://your-fal-ai-proxy.example.com'
+    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+    headers: {
+        'x-custom-header': 'value',
+        'x-client-version': '1.0.0'
+    }
 });
 ```
 
@@ -77,6 +143,7 @@ Key features:
 -   Generate videos from text descriptions
 -   Fixed output dimensions (1280×720)
 -   5-second video duration
+-   Custom headers support for API requests
 
 #### 2. MinimaxVideo01LiveImageToVideo (Image-to-Video)
 
@@ -84,7 +151,11 @@ A model that transforms still images into videos:
 
 ```typescript
 image2video: FalAiVideo.MinimaxVideo01LiveImageToVideo({
-    proxyUrl: 'https://your-fal-ai-proxy.example.com'
+    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+    headers: {
+        'x-custom-header': 'value',
+        'x-client-version': '1.0.0'
+    }
 });
 ```
 
@@ -93,6 +164,7 @@ Key features:
 -   Transform existing images into videos
 -   Available through canvas quick actions
 -   Maintains original image aspect ratio
+-   Custom headers support for API requests
 
 #### 3. PixverseV35TextToVideo (Text-to-Video)
 
@@ -100,21 +172,81 @@ An alternative text-to-video model:
 
 ```typescript
 text2video: FalAiVideo.PixverseV35TextToVideo({
-    proxyUrl: 'https://your-fal-ai-proxy.example.com'
+    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+    headers: {
+        'x-custom-header': 'value',
+        'x-client-version': '1.0.0'
+    }
 });
 ```
 
+Key features:
+
+-   Alternative text-to-video generation
+-   Custom headers support for API requests
+
+#### 4. KlingVideoV21MasterTextToVideo (Text-to-Video)
+
+A model based on KlingVideo V2.1 that generates videos from text prompts:
+
+```typescript
+text2video: FalAiVideo.KlingVideoV21MasterTextToVideo({
+    proxyUrl: 'http://your-proxy-server.com/api/proxy'
+});
+```
+
+Key features:
+
+-   Generate videos from text descriptions
+-   Adjustable aspect ratios (16:9, 9:16, 1:1)
+-   Selectable durations (5 s or 10 s)
+-   Adaptive resolution (height fixed at 720 px, width is calculated)
+
+#### 5. KlingVideoV21MasterImageToVideo (Image-to-Video)
+
+A model that converts still images into videos using KlingVideo V2.1:
+
+```typescript
+image2video: FalAiVideo.KlingVideoV21MasterImageToVideo({
+    proxyUrl: 'http://your-proxy-server.com/api/proxy'
+});
+```
+
+Key features:
+
+-   Transform existing images into videos
+-   Maintains original image aspect ratio (fallback to 1280 × 720)
+-   Canvas quick-action integration
+-   Selectable durations (5 s or 10 s)
+
+#### 6. Veo3TextToVideo (Text-to-Video)
+
+An advanced text-to-video model:
+
+```typescript
+text2video: FalAiVideo.Veo3TextToVideo({
+    proxyUrl: 'http://your-proxy-server.com/api/proxy'
+});
+```
+
+Key features:
+
+-   Generate videos from text descriptions
+-   Supports aspect ratios 16:9, 9:16 and 1:1 (defaults to 16:9)
+-   Fixed duration of 8 seconds
+-   Optional audio generation via `generate_audio`
+
 ### Configuration Options
 
 The plugin accepts the following configuration options:
 
-| Option        | Type      | Description                                     | Default   |
-| ------------- | --------- | ----------------------------------------------- | --------- |
-| `text2video`  | Provider  | Provider for text-to-video generation           | undefined |
-| `image2video` | Provider  | Provider for image-to-video transformation      | undefined |
-| `debug`       | boolean   | Enable debug logging                            | false     |
-| `dryRun`      | boolean   | Simulate generation without API calls           | false     |
-| `middleware`  | Function[] | Array of middleware functions for the generation | undefined |
+| Option        | Type                 | Description                                     | Default   |
+| ------------- | -------------------- | ----------------------------------------------- | --------- |
+| `text2video`  | Provider \| Provider[] | Provider(s) for text-to-video generation. When multiple providers are provided, users can select between them | undefined |
+| `image2video` | Provider \| Provider[] | Provider(s) for image-to-video transformation. When multiple providers are provided, users can select between them | undefined |
+| `debug`       | boolean              | Enable debug logging                            | false     |
+| `dryRun`      | boolean              | Simulate generation without API calls           | false     |
+| `middleware`  | Function[]           | Array of middleware functions for the generation | undefined |
 
 ### Middleware Configuration
 
@@ -159,7 +291,7 @@ const customMiddleware = async (input, options, next) => {
 cesdk.addPlugin(
   VideoGeneration({
     text2video: FalAiVideo.MinimaxVideo01Live({
-      proxyUrl: 'https://your-fal-ai-proxy.example.com'
+      proxyUrl: 'http://your-proxy-server.com/api/proxy'
     }),
     middleware: [logging, rateLimit, customMiddleware] // Apply middleware in order
   })
@@ -179,10 +311,20 @@ For security reasons, it's recommended to use a proxy server to handle API reque
 
 ```typescript
 text2video: FalAiVideo.MinimaxVideo01Live({
-    proxyUrl: 'https://your-fal-ai-proxy.example.com'
+    proxyUrl: 'http://your-proxy-server.com/api/proxy',
+    headers: {
+        'x-custom-header': 'value',
+        'x-client-version': '1.0.0'
+    }
 });
 ```
 
+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
+
 You'll need to implement a proxy server that forwards requests to fal.ai and handles authentication.
 
 ## API Reference
@@ -199,11 +341,11 @@ Creates and returns a plugin that can be added to CreativeEditor SDK.
 
 ```typescript
 interface PluginConfiguration {
-    // Provider for text-to-video generation
-    text2video?: AiVideoProvider;
+    // Provider(s) for text-to-video generation
+    text2video?: AiVideoProvider | AiVideoProvider[];
 
-    // Provider for image-to-video generation
-    image2video?: AiVideoProvider;
+    // Provider(s) for image-to-video generation
+    image2video?: AiVideoProvider | AiVideoProvider[];
 
     // Enable debug logging
     debug?: boolean;
@@ -223,6 +365,7 @@ interface PluginConfiguration {
 ```typescript
 FalAiVideo.MinimaxVideo01Live(config: {
   proxyUrl: string;
+  headers?: Record<string, string>;
   debug?: boolean;
 }): AiVideoProvider
 ```
@@ -232,6 +375,7 @@ FalAiVideo.MinimaxVideo01Live(config: {
 ```typescript
 FalAiVideo.MinimaxVideo01LiveImageToVideo(config: {
   proxyUrl: string;
+  headers?: Record<string, string>;
   debug?: boolean;
 }): AiVideoProvider
 ```
@@ -240,6 +384,34 @@ FalAiVideo.MinimaxVideo01LiveImageToVideo(config: {
 
 ```typescript
 FalAiVideo.PixverseV35TextToVideo(config: {
+  proxyUrl: string;
+  headers?: Record<string, string>;
+  debug?: boolean;
+}): AiVideoProvider
+```
+
+#### KlingVideoV21MasterTextToVideo
+
+```typescript
+FalAiVideo.KlingVideoV21MasterTextToVideo(config: {
+  proxyUrl: string;
+  debug?: boolean;
+}): AiVideoProvider
+```
+
+#### KlingVideoV21MasterImageToVideo
+
+```typescript
+FalAiVideo.KlingVideoV21MasterImageToVideo(config: {
+  proxyUrl: string;
+  debug?: boolean;
+}): AiVideoProvider
+```
+
+#### Veo3TextToVideo
+
+```typescript
+FalAiVideo.Veo3TextToVideo(config: {
   proxyUrl: string;
   debug?: boolean;
 }): AiVideoProvider
@@ -256,12 +428,15 @@ The plugin automatically registers the following UI components:
 
 ### Panel IDs
 
--   Main panel: `ly.img.ai/video-generation`
+-   Main panel: `ly.img.ai.video-generation`
 -   Canvas quick actions: `ly.img.ai.video.canvasMenu`
 -   Provider-specific panels:
-    -   MinimaxVideo01Live: `ly.img.ai/fal-ai/minimax/video-01-live`
-    -   MinimaxVideo01LiveImageToVideo: `ly.img.ai/fal-ai/minimax/video-01-live/image-to-video`
-    -   PixverseV35TextToVideo: `ly.img.ai/fal-ai/pixverse/v3.5/text-to-video`
+    -   MinimaxVideo01Live: `ly.img.ai.fal-ai/minimax/video-01-live`
+    -   MinimaxVideo01LiveImageToVideo: `ly.img.ai.fal-ai/minimax/video-01-live/image-to-video`
+    -   PixverseV35TextToVideo: `ly.img.ai.fal-ai/pixverse/v3.5/text-to-video`
+    -   KlingVideoV21MasterTextToVideo: `ly.img.ai.fal-ai/kling-video/v2.1/master/text-to-video`
+    -   KlingVideoV21MasterImageToVideo: `ly.img.ai.fal-ai/kling-video/v2.1/master/image-to-video`
+    -   Veo3TextToVideo: `ly.img.ai.fal-ai/veo3`
 
 ### Asset History
 
@@ -270,6 +445,9 @@ Generated videos are automatically stored in asset sources with the following ID
 -   MinimaxVideo01Live: `fal-ai/minimax/video-01-live.history`
 -   MinimaxVideo01LiveImageToVideo: `fal-ai/minimax/video-01-live/image-to-video.history`
 -   PixverseV35TextToVideo: `fal-ai/pixverse/v3.5/text-to-video.history`
+-   KlingVideoV21MasterTextToVideo: `fal-ai/kling-video/v2.1/master/text-to-video.history`
+-   KlingVideoV21MasterImageToVideo: `fal-ai/kling-video/v2.1/master/image-to-video.history`
+-   Veo3TextToVideo: `fal-ai/veo3.history`
 
 ### Dock Integration
 
@@ -278,21 +456,21 @@ The plugin automatically registers a dock component with a sparkle icon that ope
 ```typescript
 // Add the AI Video component to the beginning of the dock
 cesdk.ui.setDockOrder([
-  'ly.img.ai/video-generation.dock',
+  'ly.img.ai.video-generation.dock',
   ...cesdk.ui.getDockOrder()
 ]);
 
 // Or add it at a specific position
 const currentOrder = cesdk.ui.getDockOrder();
-currentOrder.splice(2, 0, 'ly.img.ai/video-generation.dock');
+currentOrder.splice(2, 0, 'ly.img.ai.video-generation.dock');
 cesdk.ui.setDockOrder(currentOrder);
 ```
 
 ## 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-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-audio-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-audio-generation-web) - AI audio generation
 
 ## License
 

package/dist/constants.d.ts

@@ -1 +1,6 @@
 export declare const PLUGIN_ID = "@imgly/plugin-ai-video-generation-web";
+/**
+ * Default order for video quick actions.
+ * This is used as a fallback when children is undefined in canvas menu order.
+ */
+export declare const DEFAULT_VIDEO_QUICK_ACTION_ORDER: string[];

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

@@ -0,0 +1,19 @@
+import { VideoOutput, type Provider, CommonProviderConfiguration } from '@imgly/plugin-ai-generation-web';
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+type KlingVideoV21MasterImageToVideoInput = {
+    prompt: string;
+    image_url: string;
+    duration?: '5' | '10';
+    negative_prompt?: string;
+    cfg_scale?: number;
+};
+interface ProviderConfiguration extends CommonProviderConfiguration<KlingVideoV21MasterImageToVideoInput, VideoOutput> {
+}
+export declare function KlingVideoV21MasterImageToVideo(config: ProviderConfiguration): (context: {
+    cesdk: CreativeEditorSDK;
+}) => Promise<Provider<'video', KlingVideoV21MasterImageToVideoInput, VideoOutput>>;
+declare function getProvider(cesdk: CreativeEditorSDK, config: ProviderConfiguration): Provider<'video', KlingVideoV21MasterImageToVideoInput, {
+    kind: 'video';
+    url: string;
+}>;
+export default getProvider;

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

@@ -0,0 +1,19 @@
+import { CommonProviderConfiguration, VideoOutput, type Provider } from '@imgly/plugin-ai-generation-web';
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+interface ProviderConfiguration extends CommonProviderConfiguration<KlingVideoV21MasterTextToVideoInput, VideoOutput> {
+}
+type KlingVideoV21MasterTextToVideoInput = {
+    prompt: string;
+    duration?: '5' | '10';
+    aspect_ratio?: '16:9' | '9:16' | '1:1';
+    negative_prompt?: string;
+    cfg_scale?: number;
+};
+export declare function KlingVideoV21MasterTextToVideo(config: ProviderConfiguration): (context: {
+    cesdk: CreativeEditorSDK;
+}) => Promise<Provider<'video', KlingVideoV21MasterTextToVideoInput, VideoOutput>>;
+declare function getProvider(cesdk: CreativeEditorSDK, config: ProviderConfiguration): Provider<'video', KlingVideoV21MasterTextToVideoInput, {
+    kind: 'video';
+    url: string;
+}>;
+export default getProvider;

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

@@ -0,0 +1,18 @@
+import { CommonProviderConfiguration, VideoOutput, type Provider } from '@imgly/plugin-ai-generation-web';
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+interface ProviderConfiguration extends CommonProviderConfiguration<Veo3Input, VideoOutput> {
+}
+type Veo3Input = {
+    prompt: string;
+    aspect_ratio?: '16:9' | '9:16' | '1:1';
+    duration?: '8s';
+    generate_audio?: boolean;
+};
+export declare function Veo3TextToVideo(config: ProviderConfiguration): (context: {
+    cesdk: CreativeEditorSDK;
+}) => Promise<Provider<'video', Veo3Input, VideoOutput>>;
+declare function getProvider(cesdk: CreativeEditorSDK, config: ProviderConfiguration): Provider<'video', Veo3Input, {
+    kind: 'video';
+    url: string;
+}>;
+export default getProvider;

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

@@ -1,9 +1,15 @@
 import { type OpenAPIV3 } from 'openapi-types';
 import CreativeEditorSDK, { CreativeEngine } from '@cesdk/cesdk-js';
-import { Provider, RenderCustomProperty, VideoOutput, GetBlockInput, Middleware, QuickAction } from '@imgly/plugin-ai-generation-web';
+import { Provider, RenderCustomProperty, VideoOutput, GetBlockInput, Middleware } from '@imgly/plugin-ai-generation-web';
+import { VideoQuickActionSupportMap } from '../types';
 type VideoProviderConfiguration = {
     proxyUrl: string;
     debug?: boolean;
+    middlewares?: Middleware<any, any>[];
+    /**
+     * @deprecated Use `middlewares` instead.
+     */
+    middleware?: Middleware<any, any>[];
 };
 /**
  * Creates a base provider from schema. This should work out of the box
@@ -11,6 +17,7 @@ type VideoProviderConfiguration = {
  */
 declare function createVideoProvider<I extends Record<string, any>>(options: {
     modelKey: string;
+    name?: string;
     schema: OpenAPIV3.Document;
     inputReference: string;
     useFlow?: 'placeholder' | 'generation-only';
@@ -20,7 +27,7 @@ declare function createVideoProvider<I extends Record<string, any>>(options: {
     }) => void;
     renderCustomProperty?: RenderCustomProperty;
     getBlockInput: GetBlockInput<'video', I>;
-    quickActions?: QuickAction<I, VideoOutput>[];
+    supportedQuickActions?: VideoQuickActionSupportMap<I>;
     middleware?: Middleware<I, VideoOutput>[];
     headers?: Record<string, string>;
     cesdk?: CreativeEditorSDK;

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

@@ -1,9 +1,15 @@
 import { MinimaxVideo01Live } from './MinimaxVideo01Live';
 import { MinimaxVideo01LiveImageToVideo } from './MinimaxVideo01LiveImageToVideo';
+import { KlingVideoV21MasterImageToVideo } from './KlingVideoV21MasterImageToVideo';
 import { PixverseV35TextToVideo } from './PixverseV35TextToVideo';
+import { KlingVideoV21MasterTextToVideo } from './KlingVideoV21MasterTextToVideo';
+import { Veo3TextToVideo } from './Veo3TextToVideo';
 declare const FalAi: {
     MinimaxVideo01Live: typeof MinimaxVideo01Live;
     MinimaxVideo01LiveImageToVideo: typeof MinimaxVideo01LiveImageToVideo;
+    KlingVideoV21MasterImageToVideo: typeof KlingVideoV21MasterImageToVideo;
     PixverseV35TextToVideo: typeof PixverseV35TextToVideo;
+    KlingVideoV21MasterTextToVideo: typeof KlingVideoV21MasterTextToVideo;
+    Veo3TextToVideo: typeof Veo3TextToVideo;
 };
 export default FalAi;