@imgly/plugin-ai-sticker-generation-web 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,49 @@
+# Changelog - AI Plugins
+
+## [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
+
+## [0.1.8] - 2025-05-26
+
+-   [ai-apps] Handle `sceneMode` change in upcoming CE.SDK version 1.52.0
+
+## [0.1.0] - 2025-04-17
+
+-   [all] Initial release

package/LICENSE.md

@@ -0,0 +1 @@
+The licensed code may be used by the customer solely in connection with an IMG.LY licensed product and for commercial purposes under the terms set forth in this agreement. Any other use of the licensed code is strictly prohibited unless otherwise agreed in writing by IMG.LY.

package/README.md

@@ -0,0 +1,308 @@
+# IMG.LY AI Sticker Generation for Web
+
+A plugin for integrating AI sticker generation capabilities into CreativeEditor SDK.
+
+## Overview
+
+The `@imgly/plugin-ai-sticker-generation-web` package enables users to generate stickers using AI directly within CreativeEditor SDK. This plugin leverages the [fal.ai](https://fal.ai) platform to provide high-quality sticker generation from text prompts using optimized icon styles.
+
+Features include:
+- Text-to-sticker generation
+- Icon-style sticker generation optimized for transparency
+- Various icon styles (broken line, colored outline, colored shapes, etc.)
+- Custom dimensions support
+- Automatic history tracking
+- Seamless integration with CreativeEditor SDK
+
+## Installation
+
+```bash
+npm install @imgly/plugin-ai-sticker-generation-web
+```
+
+## Usage
+
+### Basic Configuration
+
+To use the plugin, import it and configure it with your preferred providers:
+
+#### Single Provider Configuration
+
+```typescript
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import StickerGeneration from '@imgly/plugin-ai-sticker-generation-web';
+import FalAiSticker from '@imgly/plugin-ai-sticker-generation-web/fal-ai';
+
+// Initialize CreativeEditor SDK
+CreativeEditorSDK.create(domElement, {
+  license: 'your-license-key',
+  // Other configuration options...
+}).then(async (cesdk) => {
+  // Add the sticker generation plugin with fal.ai provider
+  cesdk.addPlugin(
+    StickerGeneration({
+      // Text-to-sticker provider
+      text2sticker: FalAiSticker.Recraft20b({
+        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 text-to-sticker generation, and users will see a selection box to choose between them:
+
+```typescript
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import StickerGeneration from '@imgly/plugin-ai-sticker-generation-web';
+import FalAiSticker from '@imgly/plugin-ai-sticker-generation-web/fal-ai';
+
+// Initialize CreativeEditor SDK
+CreativeEditorSDK.create(domElement, {
+  license: 'your-license-key',
+  // Other configuration options...
+}).then(async (cesdk) => {
+  // Add the sticker generation plugin with multiple providers
+  cesdk.addPlugin(
+    StickerGeneration({
+      // Multiple text-to-sticker providers
+      text2sticker: [
+        FalAiSticker.Recraft20b({
+          proxyUrl: 'http://your-proxy-server.com/api/proxy',
+          headers: {
+            'x-custom-header': 'value',
+            'x-client-version': '1.0.0'
+          }
+        })
+        // Add more providers as they become available
+      ],
+      
+      // Optional configuration
+      debug: false,
+      dryRun: false
+    })
+  );
+});
+```
+
+### Providers
+
+The plugin comes with pre-configured providers for fal.ai models:
+
+#### Recraft20b (Text-to-Sticker)
+
+A specialized text-to-sticker model from fal.ai with icon style support optimized for sticker generation:
+
+```typescript
+text2sticker: FalAiSticker.Recraft20b({
+  proxyUrl: 'http://your-proxy-server.com/api/proxy',
+  headers: {
+    'x-custom-header': 'value',
+    'x-client-version': '1.0.0'
+  }
+})
+```
+
+Key features:
+- **Icon styles optimized for stickers**: broken_line, colored_outline, colored_shapes, doodle_fill, and more
+- Various image size presets (square, landscape, portrait)
+- Custom dimensions support
+- Transparent background support
+- Cost-effective sticker generation
+- Custom headers support for API requests
+
+Available icon styles:
+- `broken_line`: Clean broken line style
+- `colored_outline`: Colored outline style
+- `colored_shapes`: Filled colored shapes
+- `colored_shapes_gradient`: Gradient filled shapes
+- `doodle_fill`: Doodle-style fill
+- `doodle_offset_fill`: Offset doodle fill
+- `offset_fill`: Offset fill style
+- `outline`: Simple outline style
+- `outline_gradient`: Gradient outline
+- `uneven_fill`: Uneven fill style
+
+### Configuration Options
+
+The plugin accepts the following configuration options:
+
+| Option | Type | Description | Default |
+|--------|------|-------------|---------|
+| `text2sticker` | Provider \| Provider[] | Provider(s) for text-to-sticker generation. 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 to extend the generation process | undefined |
+
+### Middleware Configuration
+
+The `middleware` option allows you to add pre-processing and post-processing capabilities to the generation process:
+
+```typescript
+import StickerGeneration from '@imgly/plugin-ai-sticker-generation-web';
+import FalAiSticker from '@imgly/plugin-ai-sticker-generation-web/fal-ai';
+import { loggingMiddleware, rateLimitMiddleware } from '@imgly/plugin-ai-generation-web';
+
+// Create middleware functions
+const logging = loggingMiddleware();
+const rateLimit = rateLimitMiddleware({
+  maxRequests: 10,
+  timeWindowMs: 60000, // 1 minute
+  onRateLimitExceeded: (input, options, info) => {
+    console.log(`Rate limit exceeded: ${info.currentCount}/${info.maxRequests}`);
+    return false; // Reject request
+  }
+});
+
+// Apply middleware to plugin
+cesdk.addPlugin(
+  StickerGeneration({
+    text2sticker: FalAiSticker.Recraft20b({
+      proxyUrl: 'http://your-proxy-server.com/api/proxy'
+    }),
+    middleware: [logging, rateLimit] // Apply middleware in order
+  })
+);
+```
+
+### Using a Proxy
+
+For security reasons, it's recommended to use a proxy server to handle API requests to fal.ai. The proxy URL is required when configuring providers:
+
+```typescript
+text2sticker: FalAiSticker.Recraft20b({
+  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
+
+### Main Plugin
+
+```typescript
+StickerGeneration(options: PluginConfiguration): EditorPlugin
+```
+
+Creates and returns a plugin that can be added to CreativeEditor SDK.
+
+### Plugin Configuration
+
+```typescript
+interface PluginConfiguration {
+  // Provider(s) for text-to-sticker generation
+  text2sticker?: AiStickerProvider | AiStickerProvider[];
+  
+  // Enable debug logging
+  debug?: boolean;
+  
+  // Skip actual API calls for testing
+  dryRun?: boolean;
+  
+  // Extend the generation process
+  middleware?: GenerationMiddleware;
+}
+```
+
+### Fal.ai Providers
+
+#### Recraft20b
+
+```typescript
+FalAiSticker.Recraft20b(config: {
+  proxyUrl: string;
+  headers?: Record<string, string>;
+  debug?: boolean;
+})
+```
+
+## UI Integration
+
+The plugin automatically registers the following UI components:
+
+1. **Generation Panel**: A sidebar panel for text-to-sticker generation
+2. **History Library**: Displays previously generated stickers
+3. **Dock Component**: A button in the dock area to open the sticker generation panel
+
+### Panel IDs
+
+- Main panel: `ly.img.ai.sticker-generation`
+- Provider-specific panels:
+  - Recraft20b: `ly.img.ai.fal-ai/recraft/v2/text-to-sticker`
+
+### Asset History
+
+Generated stickers are automatically stored in asset sources with the following IDs:
+- Recraft20b: `fal-ai/recraft/v2/text-to-sticker.history`
+
+### Dock Integration
+
+The plugin automatically registers a dock component with a sparkle icon that opens the sticker generation panel. To customize the component's position in the dock, use the `setDockOrder` method:
+
+```typescript
+// Add the AI Sticker component to the beginning of the dock
+cesdk.ui.setDockOrder([
+  'ly.img.ai.sticker-generation.dock',
+  ...cesdk.ui.getDockOrder()
+]);
+
+// Or add it at a specific position
+const currentOrder = cesdk.ui.getDockOrder();
+currentOrder.splice(2, 0, 'ly.img.ai.sticker-generation.dock');
+cesdk.ui.setDockOrder(currentOrder);
+```
+
+## Integration with AI Apps Plugin
+
+The sticker generation plugin integrates seamlessly with the AI Apps plugin:
+
+```typescript
+import AIApps from '@imgly/plugin-ai-apps-web';
+import FalAiSticker from '@imgly/plugin-ai-sticker-generation-web/fal-ai';
+
+cesdk.addPlugin(
+  AIApps({
+    providers: {
+      // Other providers...
+      text2sticker: FalAiSticker.Recraft20b({
+        proxyUrl: 'http://your-proxy-server.com/api/proxy'
+      })
+    }
+  })
+);
+```
+
+When integrated with AI Apps, the sticker generation functionality appears in the main AI interface alongside other AI generation capabilities.
+
+## Related Packages
+
+- [@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-apps-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-apps-web) - AI apps orchestration
+- [@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
+
+This plugin is part of the IMG.LY plugin ecosystem for CreativeEditor SDK. Please refer to the license terms in the package.

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const PLUGIN_ID = "@imgly/plugin-ai-sticker-generation-web";

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

@@ -0,0 +1,30 @@
+export declare function getImageDimensions(id: string): {
+    width: number;
+    height: number;
+};
+export type StyleId = 'any' | 'realistic_image' | 'digital_illustration' | 'vector_illustration' | 'realistic_image/b_and_w' | 'realistic_image/hard_flash' | 'realistic_image/hdr' | 'realistic_image/natural_light' | 'realistic_image/studio_portrait' | 'realistic_image/enterprise' | 'realistic_image/motion_blur' | 'realistic_image/evening_light' | 'realistic_image/faded_nostalgia' | 'realistic_image/forest_life' | 'realistic_image/mystic_naturalism' | 'realistic_image/natural_tones' | 'realistic_image/organic_calm' | 'realistic_image/real_life_glow' | 'realistic_image/retro_realism' | 'realistic_image/retro_snapshot' | 'realistic_image/urban_drama' | 'realistic_image/village_realism' | 'realistic_image/warm_folk' | 'digital_illustration/pixel_art' | 'digital_illustration/hand_drawn' | 'digital_illustration/grain' | 'digital_illustration/infantile_sketch' | 'digital_illustration/2d_art_poster' | 'digital_illustration/handmade_3d' | 'digital_illustration/hand_drawn_outline' | 'digital_illustration/engraving_color' | 'digital_illustration/2d_art_poster_2' | 'digital_illustration/antiquarian' | 'digital_illustration/bold_fantasy' | 'digital_illustration/child_book' | 'digital_illustration/child_books' | 'digital_illustration/cover' | 'digital_illustration/crosshatch' | 'digital_illustration/digital_engraving' | 'digital_illustration/expressionism' | 'digital_illustration/freehand_details' | 'digital_illustration/grain_20' | 'digital_illustration/graphic_intensity' | 'digital_illustration/hard_comics' | 'digital_illustration/long_shadow' | 'digital_illustration/modern_folk' | 'digital_illustration/multicolor' | 'digital_illustration/neon_calm' | 'digital_illustration/noir' | 'digital_illustration/nostalgic_pastel' | 'digital_illustration/outline_details' | 'digital_illustration/pastel_gradient' | 'digital_illustration/pastel_sketch' | 'digital_illustration/pop_art' | 'digital_illustration/pop_renaissance' | 'digital_illustration/street_art' | 'digital_illustration/tablet_sketch' | 'digital_illustration/urban_glow' | 'digital_illustration/urban_sketching' | 'digital_illustration/vanilla_dreams' | 'digital_illustration/young_adult_book' | 'digital_illustration/young_adult_book_2' | 'vector_illustration/bold_stroke' | 'vector_illustration/chemistry' | 'vector_illustration/colored_stencil' | 'vector_illustration/contour_pop_art' | 'vector_illustration/cosmics' | 'vector_illustration/cutout' | 'vector_illustration/depressive' | 'vector_illustration/editorial' | 'vector_illustration/emotional_flat' | 'vector_illustration/infographical' | 'vector_illustration/marker_outline' | 'vector_illustration/mosaic' | 'vector_illustration/naivector' | 'vector_illustration/roundish_flat' | 'vector_illustration/segmented_colors' | 'vector_illustration/sharp_contrast' | 'vector_illustration/thin' | 'vector_illustration/vector_photo' | 'vector_illustration/vivid_shapes' | 'vector_illustration/engraving' | 'vector_illustration/line_art' | 'vector_illustration/line_circuit' | 'vector_illustration/linocut' | 'icon/broken_line' | 'icon/colored_outline' | 'icon/colored_shapes' | 'icon/colored_shapes_gradient' | 'icon/doodle_fill' | 'icon/doodle_offset_fill' | 'icon/offset_fill' | 'icon/outline' | 'icon/outline_gradient' | 'icon/uneven_fill';
+export declare const STYLES_IMAGE: {
+    id: StyleId;
+    label: string;
+}[];
+export declare const STYLE_IMAGE_DEFAULT: {
+    id: StyleId;
+    label: string;
+};
+export declare const STYLES_VECTOR: {
+    id: StyleId;
+    label: string;
+}[];
+export declare const STYLE_VECTOR_DEFAULT: {
+    id: StyleId;
+    label: string;
+};
+export declare const STYLES_ICON: {
+    id: StyleId;
+    label: string;
+}[];
+export declare const STYLE_ICON_DEFAULT: {
+    id: StyleId;
+    label: string;
+};
+export declare function getStyleThumbnail(id: StyleId, baseURL: string): string | undefined;

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

@@ -0,0 +1,30 @@
+import { CommonProviderConfiguration } from '@imgly/plugin-ai-generation-web';
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import { type StyleId } from './Recraft20b.constants';
+type Recraft20bInput = {
+    prompt: string;
+    image_size?: 'square_hd' | 'square' | 'portrait_4_3' | 'portrait_16_9' | 'landscape_4_3' | 'landscape_16_9' | {
+        width: number;
+        height: number;
+    };
+    style?: StyleId;
+    colors?: Array<{
+        r: number;
+        g: number;
+        b: number;
+    }>;
+};
+interface ProviderConfiguration extends CommonProviderConfiguration<Recraft20bInput, any> {
+    /**
+     * Base URL used for the UI assets used in the plugin.
+     *
+     * By default, we load the assets from the IMG.LY CDN You can copy the assets.
+     * from the `/assets` folder to your own server and set the base URL to your server.
+     */
+    baseURL?: string;
+}
+export declare function Recraft20b(config: ProviderConfiguration): (context: {
+    cesdk: CreativeEditorSDK;
+}) => Promise<any>;
+declare function getProvider(cesdk: CreativeEditorSDK, config: ProviderConfiguration): any;
+export default getProvider;

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

@@ -0,0 +1,40 @@
+import { type OpenAPIV3 } from 'openapi-types';
+import CreativeEditorSDK, { CreativeEngine } from '@cesdk/cesdk-js';
+import { RenderCustomProperty, Middleware } from '@imgly/plugin-ai-generation-web';
+import { StickerQuickActionSupportMap } from '../types';
+type StickerProviderConfiguration = {
+    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
+ * but may be rough around the edges and should/can be further customized.
+ */
+declare function createStickerProvider<I extends Record<string, any>>(options: {
+    falKey: string;
+    modelKey: string;
+    name?: string;
+    schema: OpenAPIV3.Document;
+    inputReference: string;
+    userFlow?: 'placeholder' | 'generation-only';
+    initialize?: (context: {
+        cesdk?: CreativeEditorSDK;
+        engine: CreativeEngine;
+    }) => void;
+    renderCustomProperty?: RenderCustomProperty;
+    supportedQuickActions?: StickerQuickActionSupportMap<I>;
+    getBlockInput?: any;
+    getStickerSize?: (input: I) => {
+        width: number;
+        height: number;
+    };
+    middleware?: any[];
+    headers?: Record<string, string>;
+    cesdk?: CreativeEditorSDK;
+}, config: StickerProviderConfiguration): any;
+export default createStickerProvider;

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

@@ -0,0 +1,5 @@
+import { Recraft20b } from './Recraft20b';
+declare const FalAi: {
+    Recraft20b: typeof Recraft20b;
+};
+export default FalAi;