@imgly/plugin-ai-generation-web 0.1.8 → 0.1.10

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog - AI Plugins
+
+## [Unreleased]
+
+## [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/README.md

@@ -26,11 +26,20 @@ import {
     Provider,
     ImageOutput,
     initProvider,
-    loggingMiddleware
+    loggingMiddleware,
+    CommonProviderConfiguration
 } from '@imgly/plugin-ai-generation-web';
 
-// Create your image generation provider
-const myImageProvider: Provider<'image', MyInputType, ImageOutput> = {
+// Define your provider configuration interface
+interface MyProviderConfiguration 
+    extends CommonProviderConfiguration<MyInputType, ImageOutput> {
+    // Add any provider-specific configuration here
+    baseURL?: string;
+}
+
+// Create a provider factory function
+function createMyImageProvider(config: MyProviderConfiguration): Provider<'image', MyInputType, ImageOutput> {
+  return {
     // Unique identifier for this provider
     id: 'my-image-provider',
 
@@ -40,7 +49,10 @@ const myImageProvider: Provider<'image', MyInputType, ImageOutput> = {
     // Initialize the provider
     initialize: async ({ engine, cesdk }) => {
         // Setup APIs, register further components, etc.
-        myAIApi.configure({ apiKey: 'YOUR_API_KEY' });
+        myAIApi.configure({ 
+            apiKey: 'YOUR_API_KEY',
+            headers: config.headers  // Use custom headers if provided
+        });
     },
 
     // Define input panel and UI components
@@ -97,7 +109,9 @@ const myImageProvider: Provider<'image', MyInputType, ImageOutput> = {
         // Core generation function
         generate: async (input, { abortSignal, engine }) => {
             // Call your AI API and return result
-            const response = await myAIApi.generateImage(input);
+            const response = await myAIApi.generateImage(input, {
+                headers: config.headers  // Pass custom headers to API
+            });
 
             return {
                 kind: 'image',
@@ -105,7 +119,20 @@ const myImageProvider: Provider<'image', MyInputType, ImageOutput> = {
             };
         }
     }
-};
+  };
+}
+
+// Usage example
+const myImageProvider = createMyImageProvider({
+    proxyUrl: 'https://your-api-proxy.example.com',
+    headers: {
+        'x-client-version': '1.0.0',
+        'x-request-source': 'cesdk-plugin'
+    },
+    debug: false,
+    middleware: [loggingMiddleware()],
+    baseURL: 'https://assets.example.com'
+});
 ```
 
 ## Provider Interface
@@ -120,6 +147,61 @@ The Provider interface is generic and type-safe, supporting four output kinds:
 interface Provider<K extends OutputKind, I, O extends Output, C = O> { ... }
 ```
 
+## Common Provider Configuration
+
+All providers should extend the `CommonProviderConfiguration` interface, which provides standardized configuration options:
+
+```typescript
+interface CommonProviderConfiguration<I, O extends Output> {
+    // The proxy URL to use for the provider
+    proxyUrl: string;
+    
+    // Enable debug mode for additional logging
+    debug?: boolean;
+    
+    // Middleware for request/response processing
+    middleware?: Middleware<I, O>[];
+    
+    // Custom headers to include in all API requests
+    headers?: Record<string, string>;
+}
+```
+
+The `headers` property allows you to include custom HTTP headers in all API requests made by your provider. 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
+
+**Implementation Note:** When implementing your provider's `generate` function, ensure you merge the custom headers with any required headers for your API. For example:
+
+```typescript
+// In your generate function
+const response = await fetch(apiUrl, {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${apiKey}`,
+        ...config.headers  // Spread custom headers
+    },
+    body: JSON.stringify(requestData)
+});
+```
+
+Example provider configuration:
+
+```typescript
+const myProvider = createMyProvider({
+    proxyUrl: 'https://api.example.com',
+    headers: {
+        'x-client-version': '1.0.0',
+        'x-request-source': 'cesdk-plugin'
+    },
+    debug: false,
+    middleware: [loggingMiddleware()]
+});
+```
+
 ### Key Provider Options
 
 -   **id**: Unique identifier for your provider
@@ -235,7 +317,7 @@ input: {
       imageUrl: (context, property) => {
         const valueState = context.state('imageUrl', '');
         context.builder.TextInput('imageUrl', {
-          label: 'Image URL',
+          inputLabel: 'Image URL',
           ...valueState
         });
 
@@ -294,7 +376,7 @@ input: {
 
 ### 2. Custom Input Panels
 
-The `custom` type gives you complete control over UI components.
+The `custom` type gives you complete control over UI components. For more details on how to build custom panels and see all available builder components, refer to the [Create a Custom Panel](https://img.ly/docs/cesdk/js/user-interface/ui-extensions/create-custom-panel-d87b83/) guide.
 
 ```typescript
 input: {
@@ -304,14 +386,14 @@ input: {
       // Use the builder pattern to create UI components
       const promptState = context.state('prompt', '');
       context.builder.TextArea('prompt', {
-        label: 'Prompt',
+        inputLabel: 'Prompt',
         ...promptState
       });
 
       // Set up width selection
       const widthState = context.state('width', 1024);
       context.builder.Select('width', {
-        label: 'Width',
+        inputLabel: 'Width',
         options: [
           { value: 512, label: '512px' },
           { value: 1024, label: '1024px' },
@@ -683,7 +765,7 @@ This example shows how to create a quick action that expands into a more complex
     const promptState = state('prompt', '');
 
     builder.TextArea('prompt', {
-      label: 'Prompt',
+      inputLabel: 'Prompt',
       placeholder: 'Describe the changes you want...',
       ...promptState
     });
@@ -759,9 +841,13 @@ The most basic way is to use the `initProvider` function to register your provid
 ```typescript
 import { initProvider } from '@imgly/plugin-ai-generation-web';
 
-// Create your provider
+// Create your provider with custom headers
 const myProvider = createMyProvider({
-    proxyUrl: 'https://your-api-proxy.example.com'
+    proxyUrl: 'https://your-api-proxy.example.com',
+    headers: {
+        'x-custom-header': 'value',
+        'x-client-version': '1.0.0'
+    }
 });
 
 // Initialize the provider with CreativeEditor SDK

package/dist/__tests__/getProperties.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/common/renderStyleTransferProperty.d.ts

@@ -0,0 +1,47 @@
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+import { RenderCustomProperty } from '../generation/provider';
+type Style = {
+    id: 'none' | (string & {});
+    label: string;
+    prompt: string;
+    thumbUri: string;
+};
+/**
+ * Provides render function for a style transfer property that allows
+ * to change a style (of an image) from a library.
+ *
+ * The style will be appended to the prompt property, so the model does
+ * not need to support style transfer directly.
+ *
+ * By default this expects the property key to be `style`. This can be changed with the option
+ * `propertyKey`.
+ */
+declare function renderStyleTransferProperty(providerId: string, options: {
+    cesdk?: CreativeEditorSDK;
+    /**
+     * Base URL used for the UI assets used in the plugin.
+     */
+    baseURL?: string;
+    /**
+     * What property key to use for the style property.
+     */
+    propertyKey?: string;
+    /**
+     * What property key to use for the prompt property.
+     */
+    propertyKeyForPrompt?: string;
+    /**
+     * Override the default styles
+     */
+    styles?: Style[] | ((defaultStyles: Style[]) => Style[]);
+    /**
+     * Overrides the default i18n translations for the prompt input.
+     */
+    i18n?: {
+        prompt?: {
+            inputLabel?: string;
+            placeholder?: string;
+        };
+    };
+}): RenderCustomProperty;
+export default renderStyleTransferProperty;

package/dist/generation/openapi/types.d.ts

@@ -2,7 +2,7 @@ import { Builder } from '@cesdk/cesdk-js';
 import { OpenAPIV3 } from 'openapi-types';
 export interface Property {
     id: string;
-    schema: OpenAPIV3.SchemaObject;
+    schema?: OpenAPIV3.SchemaObject;
 }
 type PropertyInputForString = {
     id: string;

package/dist/generation/provider.d.ts

@@ -211,6 +211,14 @@ export interface PanelInputSchema<K extends OutputKind, I> extends PanelInputBas
      * representing the properties.
      */
     orderExtensionKeyword?: string | string[];
+    /**
+     * Defined the order of the properties in the panel. Takes precedence over
+     * the order defined in the schema (also see `orderExtensionKeyword`).
+     *
+     * If a function is provided, it receives the current order of properties from
+     * the schema and can return a new order.
+     */
+    order?: string[] | ((order: string[]) => string[]);
     /**
      * Returns the necessary input for the creation of a block.
      *

package/dist/generation/types.d.ts

@@ -1,6 +1,8 @@
 import type CreativeEditorSDK from '@cesdk/cesdk-js';
 import { type CreativeEngine } from '@cesdk/cesdk-js';
 import type Provider from './provider';
+import { Output } from './provider';
+import { Middleware } from './middleware/middleware';
 /**
  * Configuration options for provider initialization
  */
@@ -31,6 +33,27 @@ export type InitProviderConfiguration = {
      */
     middleware?: GenerationMiddleware;
 };
+/**
+ * Common provider configuration that all providers should provide.
+ */
+export interface CommonProviderConfiguration<I, O extends Output> {
+    /**
+     * The proxy URL to use for the provider.
+     */
+    proxyUrl: string;
+    /**
+     * Indicates whether the provider is in debug mode and should log additional information.
+     */
+    debug?: boolean;
+    /**
+     * Middleware that shall be executed during the generation process.
+     */
+    middleware?: Middleware<I, O>[];
+    /**
+     * Headers that shall be sent with the request of the provider.
+     */
+    headers?: Record<string, string>;
+}
 export type GenerationMiddleware = (generate: () => Promise<void>, context: {
     provider: Provider<any, any, any>;
     abort: () => void;

package/dist/index.d.ts

@@ -1,17 +1,19 @@
 import renderImageUrlProperty from './common/renderImageUrlProperty';
+import renderStyleTransferProperty from './common/renderStyleTransferProperty';
 declare const CommonProperties: {
     ImageUrl: typeof renderImageUrlProperty;
+    StyleTransfer: typeof renderStyleTransferProperty;
 };
 export { CommonProperties };
 export { type default as Provider, type ImageOutput, type VideoOutput, type TextOutput, type AudioOutput, type Output, type OutputKind, type PanelInputSchema, type RenderCustomProperty, type GetBlockInput, type GetBlockInputResult, type GetInput, type QuickAction, type QuickActionsInput } from './generation/provider';
 export { type GetPropertyInput, type Property } from './generation/openapi/types';
 export { default as initProvider } from './generation/initProvider';
-export { type GenerationMiddleware } from './generation/types';
+export { type GenerationMiddleware, type CommonProviderConfiguration } from './generation/types';
 export { composeMiddlewares, type Middleware } from './generation/middleware/middleware';
 export { default as loggingMiddleware } from './generation/middleware/loggingMiddleware';
 export { default as uploadMiddleware } from './generation/middleware/uploadMiddleware';
 export { default as rateLimitMiddleware, type RateLimitOptions } from './generation/middleware/rateLimitMiddleware';
-export { getPanelId, getDurationForVideo, getThumbnailForVideo, getLabelFromId } from './utils';
+export { getPanelId, getDurationForVideo, getThumbnailForVideo, getLabelFromId, isAsyncGenerator } from './utils';
 export { default as registerDockComponent } from './registerDockComponent';
 export { default as getQuickActionMenu } from './generation/quickAction/getQuickActionMenu';
 export { default as registerQuickActionMenuComponent } from './generation/quickAction/registerQuickActionMenuComponent';