@imgly/plugin-ai-image-generation-web 0.1.10 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/README.md +327 -85
- package/dist/constants.d.ts +5 -0
- package/dist/fal-ai/FluxProKontextEdit.d.ts +11 -0
- package/dist/fal-ai/FluxProKontextMaxEdit.d.ts +11 -0
- package/dist/fal-ai/Recraft20b.constants.d.ts +30 -0
- package/dist/fal-ai/Recraft20b.d.ts +34 -0
- package/dist/fal-ai/createImageProvider.d.ts +8 -2
- package/dist/fal-ai/index.d.ts +6 -0
- package/dist/fal-ai/index.mjs +22 -9
- package/dist/fal-ai/index.mjs.map +4 -4
- package/dist/index.d.ts +4 -1
- package/dist/index.mjs +25 -7
- package/dist/index.mjs.map +4 -4
- package/dist/open-ai/index.mjs +6 -6
- package/dist/open-ai/index.mjs.map +4 -4
- package/dist/open-ai/quickActions/ChangeStyleLibrary.d.ts +39 -0
- package/dist/plugin.d.ts +3 -2
- package/dist/quickActions/ArtistTransfer.d.ts +31 -0
- package/dist/quickActions/CombineImages.d.ts +32 -0
- package/dist/quickActions/CreateVariant.d.ts +31 -0
- package/dist/quickActions/EditImage.d.ts +31 -0
- package/dist/quickActions/RemixPage.d.ts +31 -0
- package/dist/quickActions/RemixPageWithPrompt.d.ts +31 -0
- package/dist/quickActions/StyleTransfer.d.ts +31 -0
- package/dist/quickActions/SwapBackground.d.ts +31 -0
- package/dist/quickActions/types.d.ts +6 -0
- package/dist/types.d.ts +56 -25
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,41 @@
|
|
|
2
2
|
|
|
3
3
|
## [Unreleased]
|
|
4
4
|
|
|
5
|
+
## [0.2.1] - 2025-07-15
|
|
6
|
+
|
|
7
|
+
- [ai-apps] Fix issue where AI apps panel displayed empty content when no provider app was available
|
|
8
|
+
- [ai-apps] Maintain backwards compatibility by registering legacy AI apps ID, alongside new `ly.img.ai.apps` panel ID
|
|
9
|
+
|
|
10
|
+
## [0.2.0] - 2025-07-15
|
|
11
|
+
|
|
12
|
+
### Breaking Changes
|
|
13
|
+
|
|
14
|
+
- [all] **Provider Initialization**: `initProvider` is replaced with `initializeProviders` and `initializeProvider` with a different signature
|
|
15
|
+
- [all] **Quick Actions Structure**: `provider.input.quickctions.actions` replaced with `provider.input.quickActions.supported`
|
|
16
|
+
- [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):
|
|
17
|
+
- Image Generation History: `ly.img.ai.image-generation.history`
|
|
18
|
+
- Video Generation History: `ly.img.ai.video-generation.history`
|
|
19
|
+
- Audio Generation History: `ly.img.ai.audio-generation.history`
|
|
20
|
+
- Sticker Generation History: `ly.img.ai.sticker-generation.history`
|
|
21
|
+
- [all] **ID Format Standardization**: All `ly.img.ai/` prefixed IDs changed to use dot notation `ly.img.ai.` for consistency
|
|
22
|
+
- Panel IDs: `ly.img.ai/apps` → `ly.img.ai.apps`, `ly.img.ai/image-generation` → `ly.img.ai.image-generation`
|
|
23
|
+
- Dock IDs: `ly.img.ai/apps.dock` → `ly.img.ai.apps.dock`
|
|
24
|
+
|
|
25
|
+
### New Features
|
|
26
|
+
|
|
27
|
+
- [all] **Multiple Providers Support**: All plugin packages now support arrays of providers with automatic selection UI
|
|
28
|
+
- [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
|
|
29
|
+
- [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
|
|
30
|
+
- [image-generation] **Flux Pro Kontext Provider**: Added Flux Pro Kontext provider for image editing with style transfer and artist style options
|
|
31
|
+
- [image-generation] **Flux Pro Kontext Max Provider**: Added Flux Pro Kontext Max provider for enhanced image editing capabilities
|
|
32
|
+
- [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
|
|
33
|
+
- [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
|
|
34
|
+
- [text-generation] **Model Selection**: OpenAI and Anthropic providers now support configurable model selection through the `model` parameter
|
|
35
|
+
|
|
36
|
+
### Deprecated Features
|
|
37
|
+
|
|
38
|
+
- [all] **Middleware Configuration**: The `middleware` property in provider configurations is deprecated. Use `middlewares` instead. The old property will continue to work for now.
|
|
39
|
+
|
|
5
40
|
## [0.1.10] - 2025-06-20
|
|
6
41
|
|
|
7
42
|
- [all] Fix issue with GPT provider when using text provider
|
package/README.md
CHANGED
|
@@ -27,6 +27,8 @@ npm install @imgly/plugin-ai-image-generation-web
|
|
|
27
27
|
|
|
28
28
|
To use the plugin, import it and configure it with your preferred providers:
|
|
29
29
|
|
|
30
|
+
#### Single Provider Configuration
|
|
31
|
+
|
|
30
32
|
```typescript
|
|
31
33
|
import CreativeEditorSDK from '@cesdk/cesdk-js';
|
|
32
34
|
import ImageGeneration from '@imgly/plugin-ai-image-generation-web';
|
|
@@ -44,12 +46,29 @@ CreativeEditorSDK.create(domElement, {
|
|
|
44
46
|
ImageGeneration({
|
|
45
47
|
// Text-to-image provider
|
|
46
48
|
text2image: FalAiImage.RecraftV3({
|
|
47
|
-
proxyUrl: '
|
|
49
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
50
|
+
headers: {
|
|
51
|
+
'x-custom-header': 'value',
|
|
52
|
+
'x-client-version': '1.0.0'
|
|
53
|
+
}
|
|
48
54
|
}),
|
|
49
55
|
|
|
56
|
+
// Alternative: Use Recraft20b with icon style support
|
|
57
|
+
// text2image: FalAiImage.Recraft20b({
|
|
58
|
+
// proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
59
|
+
// headers: {
|
|
60
|
+
// 'x-custom-header': 'value',
|
|
61
|
+
// 'x-client-version': '1.0.0'
|
|
62
|
+
// }
|
|
63
|
+
// }),
|
|
64
|
+
|
|
50
65
|
// Image-to-image provider (optional)
|
|
51
66
|
image2image: FalAiImage.GeminiFlashEdit({
|
|
52
|
-
proxyUrl: '
|
|
67
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
68
|
+
headers: {
|
|
69
|
+
'x-custom-header': 'value',
|
|
70
|
+
'x-client-version': '1.0.0'
|
|
71
|
+
}
|
|
53
72
|
}),
|
|
54
73
|
|
|
55
74
|
// Optional configuration
|
|
@@ -57,25 +76,75 @@ CreativeEditorSDK.create(domElement, {
|
|
|
57
76
|
dryRun: false
|
|
58
77
|
})
|
|
59
78
|
);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
//
|
|
77
|
-
|
|
78
|
-
//
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### Multiple Providers Configuration
|
|
83
|
+
|
|
84
|
+
You can configure multiple providers for each generation type, and users will see a selection box to choose between them:
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
import CreativeEditorSDK from '@cesdk/cesdk-js';
|
|
88
|
+
import ImageGeneration from '@imgly/plugin-ai-image-generation-web';
|
|
89
|
+
import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';
|
|
90
|
+
import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai';
|
|
91
|
+
|
|
92
|
+
// Initialize CreativeEditor SDK
|
|
93
|
+
CreativeEditorSDK.create(domElement, {
|
|
94
|
+
license: 'your-license-key',
|
|
95
|
+
// Other configuration options...
|
|
96
|
+
}).then(async (cesdk) => {
|
|
97
|
+
// Add the image generation plugin with multiple providers
|
|
98
|
+
cesdk.addPlugin(
|
|
99
|
+
ImageGeneration({
|
|
100
|
+
// Multiple text-to-image providers
|
|
101
|
+
text2image: [
|
|
102
|
+
FalAiImage.RecraftV3({
|
|
103
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
104
|
+
headers: {
|
|
105
|
+
'x-custom-header': 'value',
|
|
106
|
+
'x-client-version': '1.0.0'
|
|
107
|
+
}
|
|
108
|
+
}),
|
|
109
|
+
FalAiImage.Recraft20b({
|
|
110
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
111
|
+
headers: {
|
|
112
|
+
'x-custom-header': 'value',
|
|
113
|
+
'x-client-version': '1.0.0'
|
|
114
|
+
}
|
|
115
|
+
}),
|
|
116
|
+
OpenAiImage.GptImage1.Text2Image({
|
|
117
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
118
|
+
headers: {
|
|
119
|
+
'x-api-key': 'your-key',
|
|
120
|
+
'x-request-source': 'cesdk-plugin'
|
|
121
|
+
}
|
|
122
|
+
})
|
|
123
|
+
],
|
|
124
|
+
|
|
125
|
+
// Multiple image-to-image providers (optional)
|
|
126
|
+
image2image: [
|
|
127
|
+
FalAiImage.GeminiFlashEdit({
|
|
128
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
129
|
+
headers: {
|
|
130
|
+
'x-custom-header': 'value',
|
|
131
|
+
'x-client-version': '1.0.0'
|
|
132
|
+
}
|
|
133
|
+
}),
|
|
134
|
+
OpenAiImage.GptImage1.Image2Image({
|
|
135
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
136
|
+
headers: {
|
|
137
|
+
'x-api-key': 'your-key',
|
|
138
|
+
'x-request-source': 'cesdk-plugin'
|
|
139
|
+
}
|
|
140
|
+
})
|
|
141
|
+
],
|
|
142
|
+
|
|
143
|
+
// Optional configuration
|
|
144
|
+
debug: false,
|
|
145
|
+
dryRun: false
|
|
146
|
+
})
|
|
147
|
+
);
|
|
79
148
|
});
|
|
80
149
|
```
|
|
81
150
|
|
|
@@ -89,7 +158,11 @@ A versatile text-to-image model from fal.ai that generates images based on text
|
|
|
89
158
|
|
|
90
159
|
```typescript
|
|
91
160
|
text2image: FalAiImage.RecraftV3({
|
|
92
|
-
proxyUrl: '
|
|
161
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
162
|
+
headers: {
|
|
163
|
+
'x-custom-header': 'value',
|
|
164
|
+
'x-client-version': '1.0.0'
|
|
165
|
+
}
|
|
93
166
|
})
|
|
94
167
|
```
|
|
95
168
|
|
|
@@ -98,14 +171,41 @@ Key features:
|
|
|
98
171
|
- Various image size presets
|
|
99
172
|
- Custom dimensions support
|
|
100
173
|
- Adjustable quality settings
|
|
174
|
+
- Custom headers support for API requests
|
|
101
175
|
|
|
102
|
-
#### 2.
|
|
176
|
+
#### 2. Recraft20b (Text-to-Image)
|
|
177
|
+
|
|
178
|
+
An enhanced text-to-image model from fal.ai with additional icon style support:
|
|
179
|
+
|
|
180
|
+
```typescript
|
|
181
|
+
text2image: FalAiImage.Recraft20b({
|
|
182
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
183
|
+
headers: {
|
|
184
|
+
'x-custom-header': 'value',
|
|
185
|
+
'x-client-version': '1.0.0'
|
|
186
|
+
}
|
|
187
|
+
})
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
Key features:
|
|
191
|
+
- All RecraftV3 features (realistic, illustration, vector styles)
|
|
192
|
+
- **New icon styles**: broken_line, colored_outline, colored_shapes, doodle_fill, and more
|
|
193
|
+
- Three-way style selection (image/vector/icon)
|
|
194
|
+
- Same image size presets and custom dimensions support
|
|
195
|
+
- Cost-effective alternative to RecraftV3
|
|
196
|
+
- Custom headers support for API requests
|
|
197
|
+
|
|
198
|
+
#### 3. GptImage1.Text2Image (Text-to-Image)
|
|
103
199
|
|
|
104
200
|
OpenAI's GPT-4 Vision based text-to-image model that generates high-quality images:
|
|
105
201
|
|
|
106
202
|
```typescript
|
|
107
203
|
text2image: OpenAiImage.GptImage1.Text2Image({
|
|
108
|
-
proxyUrl: '
|
|
204
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
205
|
+
headers: {
|
|
206
|
+
'x-api-key': 'your-key',
|
|
207
|
+
'x-request-source': 'cesdk-plugin'
|
|
208
|
+
}
|
|
109
209
|
})
|
|
110
210
|
```
|
|
111
211
|
|
|
@@ -114,14 +214,19 @@ Key features:
|
|
|
114
214
|
- Multiple size options (1024×1024, 1536×1024, 1024×1536)
|
|
115
215
|
- Background transparency options
|
|
116
216
|
- Automatic prompt optimization
|
|
217
|
+
- Custom headers support for API requests
|
|
117
218
|
|
|
118
|
-
####
|
|
219
|
+
#### 4. GeminiFlashEdit (Image-to-Image)
|
|
119
220
|
|
|
120
221
|
An image modification model from fal.ai that transforms existing images:
|
|
121
222
|
|
|
122
223
|
```typescript
|
|
123
224
|
image2image: FalAiImage.GeminiFlashEdit({
|
|
124
|
-
proxyUrl: '
|
|
225
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
226
|
+
headers: {
|
|
227
|
+
'x-custom-header': 'value',
|
|
228
|
+
'x-client-version': '1.0.0'
|
|
229
|
+
}
|
|
125
230
|
})
|
|
126
231
|
```
|
|
127
232
|
|
|
@@ -130,14 +235,19 @@ Key features:
|
|
|
130
235
|
- Available directly through canvas quick actions
|
|
131
236
|
- Maintains original image dimensions
|
|
132
237
|
- Includes style presets and artist-specific transformations
|
|
238
|
+
- Custom headers support for API requests
|
|
133
239
|
|
|
134
|
-
####
|
|
240
|
+
#### 5. GptImage1.Image2Image (Image-to-Image)
|
|
135
241
|
|
|
136
242
|
OpenAI's GPT-4 Vision based image editing model that can transform existing images:
|
|
137
243
|
|
|
138
244
|
```typescript
|
|
139
245
|
image2image: OpenAiImage.GptImage1.Image2Image({
|
|
140
|
-
proxyUrl: '
|
|
246
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
247
|
+
headers: {
|
|
248
|
+
'x-api-key': 'your-key',
|
|
249
|
+
'x-request-source': 'cesdk-plugin'
|
|
250
|
+
}
|
|
141
251
|
})
|
|
142
252
|
```
|
|
143
253
|
|
|
@@ -146,6 +256,38 @@ Key features:
|
|
|
146
256
|
- Supports the same quick actions as GeminiFlashEdit
|
|
147
257
|
- Maintains original image dimensions
|
|
148
258
|
- Can be used as a direct alternative to GeminiFlashEdit
|
|
259
|
+
- Custom headers support for API requests
|
|
260
|
+
|
|
261
|
+
#### 5. FluxProKontextEdit (Image-to-Image)
|
|
262
|
+
|
|
263
|
+
A versatile image editing model that applies stylistic changes and transformations:
|
|
264
|
+
|
|
265
|
+
```typescript
|
|
266
|
+
image2image: FalAiImage.FluxProKontextEdit({
|
|
267
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy'
|
|
268
|
+
})
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
Key features:
|
|
272
|
+
- Change existing images with text prompts
|
|
273
|
+
- Built-in quick actions for style transfer, artist styles, background swapping, and variants
|
|
274
|
+
- Keeps original image dimensions
|
|
275
|
+
|
|
276
|
+
#### 6. FluxProKontextMaxEdit (Image-to-Image)
|
|
277
|
+
|
|
278
|
+
A high-quality variant of FluxProKontext offering more detailed results:
|
|
279
|
+
|
|
280
|
+
```typescript
|
|
281
|
+
image2image: FalAiImage.FluxProKontextMaxEdit({
|
|
282
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy'
|
|
283
|
+
})
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
Key features:
|
|
287
|
+
- All capabilities of FluxProKontextEdit with enhanced quality
|
|
288
|
+
- Style transfer & artist presets
|
|
289
|
+
- Maintains original dimensions
|
|
290
|
+
- Canvas quick-action integration
|
|
149
291
|
|
|
150
292
|
### Configuration Options
|
|
151
293
|
|
|
@@ -153,8 +295,8 @@ The plugin accepts the following configuration options:
|
|
|
153
295
|
|
|
154
296
|
| Option | Type | Description | Default |
|
|
155
297
|
|--------|------|-------------|---------|
|
|
156
|
-
| `text2image` | Provider | Provider for text-to-image generation | undefined |
|
|
157
|
-
| `image2image` | Provider | Provider for image-to-image transformation | undefined |
|
|
298
|
+
| `text2image` | Provider \| Provider[] | Provider(s) for text-to-image generation. When multiple providers are provided, users can select between them | undefined |
|
|
299
|
+
| `image2image` | Provider \| Provider[] | Provider(s) for image-to-image transformation. When multiple providers are provided, users can select between them | undefined |
|
|
158
300
|
| `debug` | boolean | Enable debug logging | false |
|
|
159
301
|
| `dryRun` | boolean | Simulate generation without API calls | false |
|
|
160
302
|
| `middleware` | Function[] | Array of middleware functions to extend the generation process | undefined |
|
|
@@ -183,8 +325,9 @@ const rateLimit = rateLimitMiddleware({
|
|
|
183
325
|
cesdk.addPlugin(
|
|
184
326
|
ImageGeneration({
|
|
185
327
|
text2image: FalAiImage.RecraftV3({
|
|
186
|
-
proxyUrl: '
|
|
328
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy'
|
|
187
329
|
}),
|
|
330
|
+
// Or use: FalAiImage.Recraft20b({ proxyUrl: 'http://your-proxy-server.com/api/proxy' }),
|
|
188
331
|
middleware: [logging, rateLimit] // Apply middleware in order
|
|
189
332
|
})
|
|
190
333
|
);
|
|
@@ -245,10 +388,29 @@ For security reasons, it's recommended to use a proxy server to handle API reque
|
|
|
245
388
|
|
|
246
389
|
```typescript
|
|
247
390
|
text2image: FalAiImage.RecraftV3({
|
|
248
|
-
proxyUrl: '
|
|
391
|
+
proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
392
|
+
headers: {
|
|
393
|
+
'x-custom-header': 'value',
|
|
394
|
+
'x-client-version': '1.0.0'
|
|
395
|
+
}
|
|
249
396
|
})
|
|
397
|
+
|
|
398
|
+
// Or use Recraft20b with icon style support:
|
|
399
|
+
// text2image: FalAiImage.Recraft20b({
|
|
400
|
+
// proxyUrl: 'http://your-proxy-server.com/api/proxy',
|
|
401
|
+
// headers: {
|
|
402
|
+
// 'x-custom-header': 'value',
|
|
403
|
+
// 'x-client-version': '1.0.0'
|
|
404
|
+
// }
|
|
405
|
+
// })
|
|
250
406
|
```
|
|
251
407
|
|
|
408
|
+
The `headers` option allows you to include custom HTTP headers in all API requests. This is useful for:
|
|
409
|
+
- Adding custom client identification headers
|
|
410
|
+
- Including version information
|
|
411
|
+
- Passing through metadata required by your API
|
|
412
|
+
- Adding correlation IDs for request tracing
|
|
413
|
+
|
|
252
414
|
You'll need to implement a proxy server that forwards requests to fal.ai and handles authentication.
|
|
253
415
|
|
|
254
416
|
## API Reference
|
|
@@ -265,11 +427,11 @@ Creates and returns a plugin that can be added to CreativeEditor SDK.
|
|
|
265
427
|
|
|
266
428
|
```typescript
|
|
267
429
|
interface PluginConfiguration {
|
|
268
|
-
// Provider for text-to-image generation
|
|
269
|
-
text2image?: AiImageProvider;
|
|
430
|
+
// Provider(s) for text-to-image generation
|
|
431
|
+
text2image?: AiImageProvider | AiImageProvider[];
|
|
270
432
|
|
|
271
|
-
// Provider for image-to-image generation
|
|
272
|
-
image2image?: AiImageProvider;
|
|
433
|
+
// Provider(s) for image-to-image generation
|
|
434
|
+
image2image?: AiImageProvider | AiImageProvider[];
|
|
273
435
|
|
|
274
436
|
// Enable debug logging
|
|
275
437
|
debug?: boolean;
|
|
@@ -289,6 +451,17 @@ interface PluginConfiguration {
|
|
|
289
451
|
```typescript
|
|
290
452
|
FalAiImage.RecraftV3(config: {
|
|
291
453
|
proxyUrl: string;
|
|
454
|
+
headers?: Record<string, string>;
|
|
455
|
+
debug?: boolean;
|
|
456
|
+
})
|
|
457
|
+
```
|
|
458
|
+
|
|
459
|
+
#### Recraft20b
|
|
460
|
+
|
|
461
|
+
```typescript
|
|
462
|
+
FalAiImage.Recraft20b(config: {
|
|
463
|
+
proxyUrl: string;
|
|
464
|
+
headers?: Record<string, string>;
|
|
292
465
|
debug?: boolean;
|
|
293
466
|
})
|
|
294
467
|
```
|
|
@@ -297,6 +470,47 @@ FalAiImage.RecraftV3(config: {
|
|
|
297
470
|
|
|
298
471
|
```typescript
|
|
299
472
|
FalAiImage.GeminiFlashEdit(config: {
|
|
473
|
+
proxyUrl: string;
|
|
474
|
+
headers?: Record<string, string>;
|
|
475
|
+
debug?: boolean;
|
|
476
|
+
})
|
|
477
|
+
```
|
|
478
|
+
|
|
479
|
+
### OpenAI Providers
|
|
480
|
+
|
|
481
|
+
#### GptImage1.Text2Image
|
|
482
|
+
|
|
483
|
+
```typescript
|
|
484
|
+
OpenAiImage.GptImage1.Text2Image(config: {
|
|
485
|
+
proxyUrl: string;
|
|
486
|
+
headers?: Record<string, string>;
|
|
487
|
+
debug?: boolean;
|
|
488
|
+
})
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
#### GptImage1.Image2Image
|
|
492
|
+
|
|
493
|
+
```typescript
|
|
494
|
+
OpenAiImage.GptImage1.Image2Image(config: {
|
|
495
|
+
proxyUrl: string;
|
|
496
|
+
headers?: Record<string, string>;
|
|
497
|
+
debug?: boolean;
|
|
498
|
+
})
|
|
499
|
+
```
|
|
500
|
+
|
|
501
|
+
#### FluxProKontextEdit
|
|
502
|
+
|
|
503
|
+
```typescript
|
|
504
|
+
FalAiImage.FluxProKontextEdit(config: {
|
|
505
|
+
proxyUrl: string;
|
|
506
|
+
debug?: boolean;
|
|
507
|
+
})
|
|
508
|
+
```
|
|
509
|
+
|
|
510
|
+
#### FluxProKontextMaxEdit
|
|
511
|
+
|
|
512
|
+
```typescript
|
|
513
|
+
FalAiImage.FluxProKontextMaxEdit(config: {
|
|
300
514
|
proxyUrl: string;
|
|
301
515
|
debug?: boolean;
|
|
302
516
|
})
|
|
@@ -313,68 +527,96 @@ The plugin automatically registers the following UI components:
|
|
|
313
527
|
|
|
314
528
|
### Quick Action Features
|
|
315
529
|
|
|
316
|
-
The plugin includes several pre-configured quick actions for
|
|
530
|
+
The plugin includes several pre-configured quick actions for image generation providers:
|
|
531
|
+
|
|
532
|
+
#### Available Quick Actions
|
|
533
|
+
|
|
534
|
+
- **`ly.img.editImage`**: Change image based on description
|
|
535
|
+
- Input: `{ prompt: string, uri: string }`
|
|
536
|
+
|
|
537
|
+
- **`ly.img.swapBackground`**: Change the background of the image
|
|
538
|
+
- Input: `{ prompt: string, uri: string }`
|
|
539
|
+
|
|
540
|
+
- **`ly.img.createVariant`**: Create a variation of the image
|
|
541
|
+
- Input: `{ prompt: string, uri: string }`
|
|
317
542
|
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
3. **Create Variant**: Duplicate the selected image and generate a variant
|
|
321
|
-
4. **Style Transfer**: Apply different artistic styles to the selected image (GeminiFlashEdit only)
|
|
322
|
-
5. **Artist Painting Styles**: Transform the image in the style of famous artists (GeminiFlashEdit only)
|
|
543
|
+
- **`ly.img.styleTransfer`**: Transform image into different art styles
|
|
544
|
+
- Input: `{ style: string, uri: string }`
|
|
323
545
|
|
|
324
|
-
|
|
546
|
+
- **`ly.img.artistTransfer`**: Transform image in the style of famous artists
|
|
547
|
+
- Input: `{ artist: string, uri: string }`
|
|
548
|
+
|
|
549
|
+
- **`ly.img.combineImages`**: Combine multiple images with instructions
|
|
550
|
+
- Input: `{ prompt: string, uris: string[], exportFromBlockIds: number[] }`
|
|
551
|
+
|
|
552
|
+
- **`ly.img.remixPage`**: Convert the page into a single image
|
|
553
|
+
- Input: `{ prompt: string, uri: string }`
|
|
554
|
+
|
|
555
|
+
- **`ly.img.remixPageWithPrompt`**: Remix the page with custom instructions
|
|
556
|
+
- Input: `{ prompt: string, uri: string }`
|
|
557
|
+
|
|
558
|
+
- **`ly.img.gpt-image-1.changeStyleLibrary`**: Apply different art styles (GPT-specific)
|
|
559
|
+
- Input: `{ prompt: string, uri: string }`
|
|
560
|
+
|
|
561
|
+
#### Provider Quick Action Support
|
|
562
|
+
|
|
563
|
+
Providers declare which quick actions they support through their configuration:
|
|
325
564
|
|
|
326
565
|
```typescript
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
})
|
|
357
|
-
];
|
|
358
|
-
}
|
|
566
|
+
const myImageProvider = {
|
|
567
|
+
// ... other provider config
|
|
568
|
+
input: {
|
|
569
|
+
// ... panel config
|
|
570
|
+
quickActions: {
|
|
571
|
+
supported: {
|
|
572
|
+
'ly.img.editImage': {
|
|
573
|
+
mapInput: (quickActionInput) => ({
|
|
574
|
+
prompt: quickActionInput.prompt,
|
|
575
|
+
image_url: quickActionInput.uri
|
|
576
|
+
})
|
|
577
|
+
},
|
|
578
|
+
'ly.img.swapBackground': {
|
|
579
|
+
mapInput: (quickActionInput) => ({
|
|
580
|
+
prompt: quickActionInput.prompt,
|
|
581
|
+
image_url: quickActionInput.uri
|
|
582
|
+
})
|
|
583
|
+
},
|
|
584
|
+
'ly.img.styleTransfer': {
|
|
585
|
+
mapInput: (quickActionInput) => ({
|
|
586
|
+
style: quickActionInput.style,
|
|
587
|
+
image_url: quickActionInput.uri
|
|
588
|
+
})
|
|
589
|
+
}
|
|
590
|
+
// Add more supported quick actions as needed
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
};
|
|
359
595
|
```
|
|
360
596
|
|
|
361
597
|
### Panel IDs
|
|
362
598
|
|
|
363
|
-
- Main panel: `ly.img.ai
|
|
599
|
+
- Main panel: `ly.img.ai.image-generation`
|
|
364
600
|
- Canvas quick actions: `ly.img.ai.image.canvasMenu`
|
|
365
601
|
- Provider-specific panels:
|
|
366
|
-
- RecraftV3: `ly.img.ai
|
|
367
|
-
-
|
|
368
|
-
-
|
|
369
|
-
- GptImage1.
|
|
602
|
+
- RecraftV3: `ly.img.ai.fal-ai/recraft-v3`
|
|
603
|
+
- Recraft20b: `ly.img.ai.fal-ai/recraft/v2/text-to-image`
|
|
604
|
+
- GeminiFlashEdit: `ly.img.ai.fal-ai/gemini-flash-edit`
|
|
605
|
+
- GptImage1.Text2Image: `ly.img.ai.open-ai/gpt-image-1/text2image`
|
|
606
|
+
- GptImage1.Image2Image: `ly.img.ai.open-ai/gpt-image-1/image2image`
|
|
607
|
+
- FluxProKontextEdit: `ly.img.ai.fal-ai/flux-pro/kontext`
|
|
608
|
+
- FluxProKontextMaxEdit: `ly.img.ai.fal-ai/flux-pro/kontext/max`
|
|
370
609
|
|
|
371
610
|
### Asset History
|
|
372
611
|
|
|
373
612
|
Generated images are automatically stored in asset sources with the following IDs:
|
|
374
613
|
- RecraftV3: `fal-ai/recraft-v3.history`
|
|
614
|
+
- Recraft20b: `fal-ai/recraft/v2/text-to-image.history`
|
|
375
615
|
- GeminiFlashEdit: `fal-ai/gemini-flash-edit.history`
|
|
376
616
|
- GptImage1.Text2Image: `open-ai/gpt-image-1/text2image.history`
|
|
377
617
|
- GptImage1.Image2Image: `open-ai/gpt-image-1/image2image.history`
|
|
618
|
+
- FluxProKontextEdit: `fal-ai/flux-pro/kontext.history`
|
|
619
|
+
- FluxProKontextMaxEdit: `fal-ai/flux-pro/kontext/max.history`
|
|
378
620
|
|
|
379
621
|
### Dock Integration
|
|
380
622
|
|
|
@@ -383,21 +625,21 @@ The plugin automatically registers a dock component with a sparkle icon that ope
|
|
|
383
625
|
```typescript
|
|
384
626
|
// Add the AI Image component to the beginning of the dock
|
|
385
627
|
cesdk.ui.setDockOrder([
|
|
386
|
-
'ly.img.ai
|
|
628
|
+
'ly.img.ai.image-generation.dock',
|
|
387
629
|
...cesdk.ui.getDockOrder()
|
|
388
630
|
]);
|
|
389
631
|
|
|
390
632
|
// Or add it at a specific position
|
|
391
633
|
const currentOrder = cesdk.ui.getDockOrder();
|
|
392
|
-
currentOrder.splice(2, 0, 'ly.img.ai
|
|
634
|
+
currentOrder.splice(2, 0, 'ly.img.ai.image-generation.dock');
|
|
393
635
|
cesdk.ui.setDockOrder(currentOrder);
|
|
394
636
|
```
|
|
395
637
|
|
|
396
638
|
## Related Packages
|
|
397
639
|
|
|
398
|
-
- [@imgly/plugin-ai-generation-web](https://github.com/imgly/plugin-ai-generation-web) - Core utilities for AI generation
|
|
399
|
-
- [@imgly/plugin-ai-video-generation-web](https://github.com/imgly/plugin-ai-video-generation-web) - AI video generation
|
|
400
|
-
- [@imgly/plugin-ai-audio-generation-web](https://github.com/imgly/plugin-ai-audio-generation-web) - AI audio generation
|
|
640
|
+
- [@imgly/plugin-ai-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-generation-web) - Core utilities for AI generation
|
|
641
|
+
- [@imgly/plugin-ai-video-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-video-generation-web) - AI video generation
|
|
642
|
+
- [@imgly/plugin-ai-audio-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-audio-generation-web) - AI audio generation
|
|
401
643
|
|
|
402
644
|
## License
|
|
403
645
|
|
package/dist/constants.d.ts
CHANGED
|
@@ -1 +1,6 @@
|
|
|
1
1
|
export declare const PLUGIN_ID = "@imgly/plugin-ai-image-generation-web";
|
|
2
|
+
/**
|
|
3
|
+
* Default order for image quick actions, matching the ai-demo.tsx example.
|
|
4
|
+
* This is used as a fallback when children is undefined in canvas menu order.
|
|
5
|
+
*/
|
|
6
|
+
export declare const DEFAULT_IMAGE_QUICK_ACTION_ORDER: string[];
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ImageOutput, type Provider, type CommonProviderConfiguration } from '@imgly/plugin-ai-generation-web';
|
|
2
|
+
import CreativeEditorSDK from '@cesdk/cesdk-js';
|
|
3
|
+
type FluxProKontextEditInput = {
|
|
4
|
+
prompt: string;
|
|
5
|
+
image_url: string;
|
|
6
|
+
};
|
|
7
|
+
export declare function FluxProKontextEdit(config: CommonProviderConfiguration<FluxProKontextEditInput, ImageOutput>): (context: {
|
|
8
|
+
cesdk: CreativeEditorSDK;
|
|
9
|
+
}) => Promise<Provider<'image', FluxProKontextEditInput, ImageOutput>>;
|
|
10
|
+
declare function getProvider(cesdk: CreativeEditorSDK, config: CommonProviderConfiguration<FluxProKontextEditInput, ImageOutput>): Provider<'image', FluxProKontextEditInput, ImageOutput>;
|
|
11
|
+
export default getProvider;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ImageOutput, type Provider, type CommonProviderConfiguration } from '@imgly/plugin-ai-generation-web';
|
|
2
|
+
import CreativeEditorSDK from '@cesdk/cesdk-js';
|
|
3
|
+
export type FluxProKontextMaxEditInput = {
|
|
4
|
+
prompt: string;
|
|
5
|
+
image_url: string;
|
|
6
|
+
};
|
|
7
|
+
export declare function FluxProKontextMaxEdit(config: CommonProviderConfiguration<FluxProKontextMaxEditInput, ImageOutput>): (context: {
|
|
8
|
+
cesdk: CreativeEditorSDK;
|
|
9
|
+
}) => Promise<Provider<'image', FluxProKontextMaxEditInput, ImageOutput>>;
|
|
10
|
+
declare function getProvider(cesdk: CreativeEditorSDK, config: CommonProviderConfiguration<FluxProKontextMaxEditInput, ImageOutput>): Provider<'image', FluxProKontextMaxEditInput, ImageOutput>;
|
|
11
|
+
export default getProvider;
|