@imgly/plugin-ai-image-generation-web 0.2.16 → 1.68.0-rc.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/README.md CHANGED
@@ -1,2145 +1,9 @@
1
- # IMG.LY AI Image Generation for Web
1
+ # @imgly/plugin-ai-image-generation-web
2
2
 
3
- A plugin for integrating AI image generation capabilities into CreativeEditor SDK.
3
+ AI image generation plugin for the CE.SDK editor
4
4
 
5
- ## Overview
6
-
7
- The `@imgly/plugin-ai-image-generation-web` package enables users to generate and modify images using AI directly within CreativeEditor SDK. This shipped provider leverages the [fal.ai](https://fal.ai) platform to provide high-quality image generation from text-to-image and image-to-image transformations.
8
-
9
- Features include:
10
- - Text-to-image generation
11
- - Image-to-image transformations
12
- - Multiple style options (realistic, illustration, vector)
13
- - Various size presets and custom dimensions
14
- - Automatic history tracking
15
- - Canvas menu quick actions
16
- - Seamless integration with CreativeEditor SDK
17
-
18
- ## Installation
19
-
20
- ```bash
21
- npm install @imgly/plugin-ai-image-generation-web
22
- ```
23
-
24
- ## Usage
25
-
26
- ### Basic Configuration
27
-
28
- To use the plugin, import it and configure it with your preferred providers:
29
-
30
- #### Single Provider Configuration
31
-
32
- ```typescript
33
- import CreativeEditorSDK from '@cesdk/cesdk-js';
34
- import ImageGeneration from '@imgly/plugin-ai-image-generation-web';
35
- import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';
36
- // For OpenAI providers
37
- import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai';
38
- // For Runware providers
39
- import RunwareImage from '@imgly/plugin-ai-image-generation-web/runware';
40
-
41
- // Initialize CreativeEditor SDK
42
- CreativeEditorSDK.create(domElement, {
43
- license: 'your-license-key',
44
- // Other configuration options...
45
- }).then(async (cesdk) => {
46
- // Add the image generation plugin with fal.ai providers
47
- cesdk.addPlugin(
48
- ImageGeneration({
49
- // Text-to-image provider
50
- text2image: FalAiImage.RecraftV3({
51
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
52
- headers: {
53
- 'x-custom-header': 'value',
54
- 'x-client-version': '1.0.0'
55
- }
56
- }),
57
-
58
- // Alternative: Use Recraft20b with icon style support
59
- // text2image: FalAiImage.Recraft20b({
60
- // proxyUrl: 'http://your-proxy-server.com/api/proxy',
61
- // headers: {
62
- // 'x-custom-header': 'value',
63
- // 'x-client-version': '1.0.0'
64
- // }
65
- // }),
66
-
67
- // Image-to-image provider (optional)
68
- image2image: FalAiImage.GeminiFlashEdit({
69
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
70
- headers: {
71
- 'x-custom-header': 'value',
72
- 'x-client-version': '1.0.0'
73
- }
74
- }),
75
-
76
- // Optional configuration
77
- debug: false,
78
- dryRun: false
79
- })
80
- );
81
- });
82
- ```
83
-
84
- #### Multiple Providers Configuration
85
-
86
- You can configure multiple providers for each generation type, and users will see a selection box to choose between them:
87
-
88
- ```typescript
89
- import CreativeEditorSDK from '@cesdk/cesdk-js';
90
- import ImageGeneration from '@imgly/plugin-ai-image-generation-web';
91
- import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';
92
- import OpenAiImage from '@imgly/plugin-ai-image-generation-web/open-ai';
93
-
94
- // Initialize CreativeEditor SDK
95
- CreativeEditorSDK.create(domElement, {
96
- license: 'your-license-key',
97
- // Other configuration options...
98
- }).then(async (cesdk) => {
99
- // Add the image generation plugin with multiple providers
100
- cesdk.addPlugin(
101
- ImageGeneration({
102
- // Multiple text-to-image providers
103
- text2image: [
104
- FalAiImage.RecraftV3({
105
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
106
- headers: {
107
- 'x-custom-header': 'value',
108
- 'x-client-version': '1.0.0'
109
- }
110
- }),
111
- FalAiImage.NanoBanana({
112
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
113
- headers: {
114
- 'x-custom-header': 'value',
115
- 'x-client-version': '1.0.0'
116
- }
117
- }),
118
- FalAiImage.Recraft20b({
119
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
120
- headers: {
121
- 'x-custom-header': 'value',
122
- 'x-client-version': '1.0.0'
123
- }
124
- }),
125
- OpenAiImage.GptImage1.Text2Image({
126
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
127
- headers: {
128
- 'x-api-key': 'your-key',
129
- 'x-request-source': 'cesdk-plugin'
130
- }
131
- })
132
- ],
133
-
134
- // Multiple image-to-image providers (optional)
135
- image2image: [
136
- FalAiImage.GeminiFlashEdit({
137
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
138
- headers: {
139
- 'x-custom-header': 'value',
140
- 'x-client-version': '1.0.0'
141
- }
142
- }),
143
- FalAiImage.NanoBananaEdit({
144
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
145
- headers: {
146
- 'x-custom-header': 'value',
147
- 'x-client-version': '1.0.0'
148
- }
149
- }),
150
- OpenAiImage.GptImage1.Image2Image({
151
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
152
- headers: {
153
- 'x-api-key': 'your-key',
154
- 'x-request-source': 'cesdk-plugin'
155
- }
156
- })
157
- ],
158
-
159
- // Optional configuration
160
- debug: false,
161
- dryRun: false
162
- })
163
- );
164
- });
165
- ```
166
-
167
- ### Providers
168
-
169
- The plugin comes with pre-configured providers for fal.ai and OpenAI models:
170
-
171
- #### 1. RecraftV3 (Text-to-Image)
172
-
173
- A versatile text-to-image model from fal.ai that generates images based on text prompts:
174
-
175
- ```typescript
176
- text2image: FalAiImage.RecraftV3({
177
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
178
- headers: {
179
- 'x-custom-header': 'value',
180
- 'x-client-version': '1.0.0'
181
- },
182
- // Optional: Configure default property values
183
- properties: {
184
- style: { default: 'realistic_image' }, // Default style
185
- image_size: { default: 'square_hd' } // Default size
186
- }
187
- })
188
- ```
189
-
190
- Key features:
191
- - Multiple style options (realistic, illustration, vector)
192
- - Various image size presets
193
- - Custom dimensions support
194
- - Adjustable quality settings
195
- - Custom headers support for API requests
196
-
197
- **Available Property Values:**
198
-
199
- ```typescript
200
- // image_size options:
201
- 'square_hd' // 1024x1024 (default)
202
- 'square' // 512x512
203
- 'portrait_4_3' // 768x1024
204
- 'portrait_16_9' // 576x1024
205
- 'landscape_4_3' // 1024x768
206
- 'landscape_16_9' // 1024x576
207
-
208
- // style options (grouped by category):
209
- // Base styles:
210
- 'any' // Let model decide
211
- 'realistic_image' // Photorealistic (default)
212
- 'digital_illustration' // Digital art
213
- 'vector_illustration' // Vector graphics
214
-
215
- // Realistic substyles:
216
- 'realistic_image/b_and_w' // Black and white
217
- 'realistic_image/hard_flash' // Hard flash photography
218
- 'realistic_image/hdr' // HDR photography
219
- 'realistic_image/natural_light' // Natural lighting
220
- 'realistic_image/studio_portrait' // Studio portrait
221
- 'realistic_image/enterprise' // Business/corporate
222
- 'realistic_image/motion_blur' // Motion blur effect
223
- 'realistic_image/evening_light' // Evening lighting
224
- 'realistic_image/faded_nostalgia' // Nostalgic/faded look
225
- 'realistic_image/forest_life' // Forest/nature
226
- 'realistic_image/mystic_naturalism' // Mystic nature
227
- 'realistic_image/natural_tones' // Natural color tones
228
- 'realistic_image/organic_calm' // Organic/calm aesthetic
229
- 'realistic_image/real_life_glow' // Natural glow
230
- 'realistic_image/retro_realism' // Retro realistic
231
- 'realistic_image/retro_snapshot' // Retro photo
232
- 'realistic_image/urban_drama' // Urban/dramatic
233
- 'realistic_image/village_realism' // Village/rural
234
- 'realistic_image/warm_folk' // Warm/folk style
235
-
236
- // Digital illustration substyles:
237
- 'digital_illustration/pixel_art' // Pixel art
238
- 'digital_illustration/hand_drawn' // Hand-drawn
239
- 'digital_illustration/grain' // Grainy texture
240
- 'digital_illustration/infantile_sketch' // Child-like sketch
241
- 'digital_illustration/2d_art_poster' // 2D poster art
242
- 'digital_illustration/handmade_3d' // Handmade 3D look
243
- 'digital_illustration/hand_drawn_outline' // Hand-drawn outline
244
- 'digital_illustration/engraving_color' // Color engraving
245
- 'digital_illustration/2d_art_poster_2' // Alternative poster style
246
- 'digital_illustration/antiquarian' // Antique/vintage
247
- 'digital_illustration/bold_fantasy' // Bold fantasy art
248
- 'digital_illustration/child_book' // Children's book
249
- 'digital_illustration/child_books' // Children's book alt
250
- 'digital_illustration/cover' // Book/album cover
251
- 'digital_illustration/crosshatch' // Crosshatching
252
- 'digital_illustration/digital_engraving' // Digital engraving
253
- 'digital_illustration/expressionism' // Expressionist
254
- // ... and many more digital illustration styles
255
-
256
- // Vector illustration substyles:
257
- 'vector_illustration/cartoon' // Cartoon style
258
- 'vector_illustration/kawaii' // Kawaii/cute
259
- 'vector_illustration/comic' // Comic book
260
- 'vector_illustration/line_art' // Line art
261
- 'vector_illustration/noir_silhouette' // Noir silhouette
262
- ```
263
-
264
- **Configuration Example with All Properties:**
265
-
266
- ```typescript
267
- text2image: FalAiImage.RecraftV3({
268
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
269
- properties: {
270
- prompt: { default: '' }, // User will fill this
271
- style: { default: 'realistic_image/natural_light' },
272
- image_size: { default: 'landscape_16_9' },
273
-
274
- // Dynamic style based on context
275
- style: {
276
- default: (context) => {
277
- const hour = new Date().getHours();
278
- if (hour < 6 || hour > 18) {
279
- return 'realistic_image/evening_light';
280
- }
281
- return 'realistic_image/natural_light';
282
- }
283
- }
284
- }
285
- })
286
- ```
287
-
288
- **Style Group Control:**
289
- You can control which style groups (image/vector) are available using the Feature API:
290
-
291
- ```typescript
292
- // Disable vector styles, only allow image styles
293
- cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.vector', false);
294
-
295
- // Or disable image styles, only allow vector styles
296
- cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.style.image', false);
297
- ```
298
-
299
- **Custom Translations:**
300
- ```typescript
301
- cesdk.i18n.setTranslations({
302
- en: {
303
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt': 'Your image description',
304
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.style': 'Art Style',
305
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.style.realistic_image': 'Photorealistic',
306
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.style.illustration': 'Illustration',
307
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.image_size': 'Canvas Size'
308
- }
309
- });
310
- ```
311
-
312
- #### 2. Recraft20b (Text-to-Image)
313
-
314
- An enhanced text-to-image model from fal.ai with additional icon style support:
315
-
316
- ```typescript
317
- text2image: FalAiImage.Recraft20b({
318
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
319
- headers: {
320
- 'x-custom-header': 'value',
321
- 'x-client-version': '1.0.0'
322
- },
323
- // Optional: Configure default property values
324
- properties: {
325
- // Dynamic style defaults based on style type
326
- style: {
327
- default: (context) => {
328
- // Different defaults for different style categories
329
- // This is handled internally by the provider
330
- return 'broken_line'; // Default for icon styles
331
- }
332
- },
333
- image_size: { default: 'square_hd' },
334
- n_colors: { default: 4 } // Default color count for icon styles
335
- }
336
- })
337
- ```
338
-
339
- Key features:
340
- - All RecraftV3 features (realistic, illustration, vector styles)
341
- - **New icon styles**: broken_line, colored_outline, colored_shapes, doodle_fill, and more
342
- - Three-way style selection (image/vector/icon)
343
- - Same image size presets and custom dimensions support
344
- - Cost-effective alternative to RecraftV3
345
-
346
- **Available Property Values:**
347
-
348
- ```typescript
349
- // image_size options (same as RecraftV3):
350
- 'square_hd' // 1024x1024 (default)
351
- 'square' // 512x512
352
- 'portrait_4_3' // 768x1024
353
- 'portrait_16_9' // 576x1024
354
- 'landscape_4_3' // 1024x768
355
- 'landscape_16_9' // 1024x576
356
-
357
- // style options - includes all RecraftV3 styles PLUS icon styles:
358
- // All RecraftV3 styles are supported (see RecraftV3 above)
359
-
360
- // Additional Icon styles (unique to Recraft20b):
361
- 'icon/broken_line' // Broken line icon style
362
- 'icon/colored_outline' // Colored outline icons
363
- 'icon/colored_shapes' // Solid colored shapes
364
- 'icon/colored_shapes_gradient' // Gradient colored shapes
365
- 'icon/doodle_fill' // Doodle-filled icons
366
- 'icon/doodle_offset_fill' // Offset doodle fill
367
- 'icon/offset_fill' // Offset fill style
368
- 'icon/outline' // Simple outline
369
- 'icon/outline_gradient' // Gradient outline
370
- 'icon/uneven_fill' // Uneven/artistic fill
371
-
372
- // Logo styles:
373
- 'logo' // Logo design
374
-
375
- // n_colors options (for icon styles):
376
- 1 // Monochrome
377
- 2 // Two colors (default)
378
- 3 // Three colors
379
- 4 // Four colors
380
- // ... up to any reasonable number
381
- ```
382
-
383
- **Configuration Example with All Properties:**
384
-
385
- ```typescript
386
- text2image: FalAiImage.Recraft20b({
387
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
388
- properties: {
389
- prompt: { default: '' }, // User will fill this
390
- style: { default: 'icon/colored_outline' }, // Default to icon style
391
- image_size: { default: 'square' },
392
- n_colors: { default: 3 }, // Number of colors for icon styles
393
-
394
- // Dynamic style based on use case
395
- style: {
396
- default: (context) => {
397
- // You could check block type or other context
398
- const engine = context.engine;
399
- // Return appropriate style
400
- return 'icon/broken_line';
401
- }
402
- }
403
- }
404
- })
405
- ```
406
-
407
- **Style Group Control:**
408
- You can control which style groups (image/vector/icon) are available using the Feature API:
409
-
410
- ```typescript
411
- // Only allow icon styles
412
- cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.style.image', false);
413
- cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.style.vector', false);
414
-
415
- // Only allow image and vector styles (disable icon)
416
- cesdk.feature.enable('ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.style.icon', false);
417
- ```
418
-
419
- Note: When all style groups are disabled, the provider automatically falls back to the 'any' style.
420
-
421
- **Custom Translations:**
422
- ```typescript
423
- cesdk.i18n.setTranslations({
424
- en: {
425
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.property.prompt': 'Icon description',
426
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.property.style': 'Icon Style',
427
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.property.style.icon': 'Standard Icon',
428
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.property.style.logo': 'Logo Icon',
429
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft/v2/text-to-image.property.n_colors': 'Number of Colors'
430
- }
431
- });
432
- ```
433
- - Custom headers support for API requests
434
-
435
- #### 3. GptImage1.Text2Image (Text-to-Image)
436
-
437
- OpenAI's GPT-4 Vision based text-to-image model that generates high-quality images:
438
-
439
- ```typescript
440
- text2image: OpenAiImage.GptImage1.Text2Image({
441
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
442
- headers: {
443
- 'x-api-key': 'your-key',
444
- 'x-request-source': 'cesdk-plugin'
445
- },
446
- // Optional: Configure default property values
447
- properties: {
448
- size: { default: '1024x1024' }, // Options: '1024x1024', '1792x1024', '1024x1792'
449
- quality: { default: 'standard' }, // Options: 'standard', 'hd'
450
- style: { default: 'vivid' } // Options: 'vivid', 'natural'
451
- }
452
- })
453
- ```
454
-
455
- Key features:
456
- - High-quality image generation
457
- - Multiple size options (1024×1024, 1536×1024, 1024×1536)
458
- - Background transparency options
459
- - Automatic prompt optimization
460
- - Custom headers support for API requests
461
-
462
- #### 4. GeminiFlash25 (Text-to-Image)
463
-
464
- A fast and efficient text-to-image model from Google's Gemini Flash 2.5 via fal.ai:
465
-
466
- ```typescript
467
- text2image: FalAiImage.GeminiFlash25({
468
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
469
- headers: {
470
- 'x-custom-header': 'value',
471
- 'x-client-version': '1.0.0'
472
- },
473
- // Optional: Configure default property values
474
- properties: {
475
- aspect_ratio: { default: '1:1' }, // Options: '1:1', '3:4', '4:3', '9:16', '16:9'
476
- output_format: { default: 'jpeg' } // Options: 'jpeg', 'png', 'webp'
477
- }
478
- })
479
- ```
480
-
481
- Key features:
482
- - Fast generation times with Google's Gemini Flash 2.5 model
483
- - Multiple aspect ratios: 1:1, 3:4, 4:3, 9:16, 16:9
484
- - Custom dimensions support
485
- - Multiple output formats (JPEG, PNG, WEBP)
486
- - Configurable number of images (1-4)
487
- - Custom headers support for API requests
488
-
489
- **Available Property Values:**
490
-
491
- ```typescript
492
- // aspect_ratio options:
493
- '1:1' // Square (1024×1024)
494
- '3:4' // Portrait (768×1024)
495
- '4:3' // Landscape (1024×768)
496
- '9:16' // Tall Portrait (576×1024)
497
- '16:9' // Wide Landscape (1024×576)
498
-
499
- // output_format options:
500
- 'jpeg' // JPEG format (default)
501
- 'png' // PNG format
502
- 'webp' // WebP format
503
- ```
504
-
505
- **Custom Translations:**
506
- ```typescript
507
- cesdk.i18n.setTranslations({
508
- en: {
509
- 'ly.img.plugin-ai-image-generation-web.fal-ai/gemini-flash-2.5.property.prompt': 'Describe your image',
510
- 'ly.img.plugin-ai-image-generation-web.fal-ai/gemini-flash-2.5.property.aspect_ratio': 'Aspect Ratio',
511
- 'ly.img.plugin-ai-image-generation-web.fal-ai/gemini-flash-2.5.property.aspect_ratio.1:1': 'Square (1:1)',
512
- 'ly.img.plugin-ai-image-generation-web.fal-ai/gemini-flash-2.5.property.aspect_ratio.16:9': 'Wide (16:9)'
513
- }
514
- });
515
- ```
516
-
517
- #### 5. GeminiFlashEdit (Image-to-Image)
518
-
519
- An image modification model from fal.ai that transforms existing images:
520
-
521
- ```typescript
522
- image2image: FalAiImage.GeminiFlashEdit({
523
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
524
- headers: {
525
- 'x-custom-header': 'value',
526
- 'x-client-version': '1.0.0'
527
- },
528
- // Optional: Configure default property values
529
- properties: {
530
- strength: { default: 0.8 }, // Transformation strength (0.0-1.0)
531
- guidance_scale: { default: 7.5 }, // Guidance scale (0-20)
532
- num_inference_steps: { default: 50 } // Number of inference steps
533
- }
534
- })
535
- ```
536
-
537
- Key features:
538
- - Transform existing images with text prompts
539
- - Comprehensive quick actions support: edit image, swap background, style transfer, artist styles, create variants, upscale, outpaint, and combine images
540
- - Maintains original image dimensions
541
- - Includes style presets and artist-specific transformations
542
- - Supports multi-image inputs via combineImages quick action
543
- - Custom headers support for API requests
544
-
545
- **Custom Translations:**
546
- ```typescript
547
- cesdk.i18n.setTranslations({
548
- en: {
549
- 'ly.img.plugin-ai-image-generation-web.fal-ai/gemini-flash-edit.property.prompt': 'Transformation instructions',
550
- 'ly.img.plugin-ai-image-generation-web.fal-ai/gemini-flash-edit.property.image_url': 'Source Image'
551
- }
552
- });
553
- ```
554
-
555
- #### 5. GptImage1.Image2Image (Image-to-Image)
556
-
557
- OpenAI's GPT-4 Vision based image editing model that can transform existing images:
558
-
559
- ```typescript
560
- image2image: OpenAiImage.GptImage1.Image2Image({
561
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
562
- headers: {
563
- 'x-api-key': 'your-key',
564
- 'x-request-source': 'cesdk-plugin'
565
- }
566
- })
567
- ```
568
-
569
- Key features:
570
- - Powerful image transformation capabilities
571
- - Supports the same quick actions as GeminiFlashEdit
572
- - Maintains original image dimensions
573
- - Can be used as a direct alternative to GeminiFlashEdit
574
- - Custom headers support for API requests
575
-
576
- #### 5. IdeogramV3 (Text-to-Image)
577
-
578
- A high-quality text-to-image model from fal.ai featuring advanced generation capabilities:
579
-
580
- ```typescript
581
- text2image: FalAiImage.IdeogramV3({
582
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
583
- headers: {
584
- 'x-custom-header': 'value',
585
- 'x-client-version': '1.0.0'
586
- },
587
- // Optional: Configure default property values
588
- properties: {
589
- style: { default: 'GENERAL' }, // Options: 'AUTO', 'GENERAL', 'REALISTIC', 'DESIGN'
590
- image_size: { default: 'square_hd' }, // Same options as Recraft
591
- seed: { default: 12345 } // Fixed seed for reproducibility
592
- }
593
- })
594
- ```
595
-
596
- Key features:
597
- - Four distinct style modes: AUTO, GENERAL, REALISTIC, and DESIGN
598
- - Multiple image size presets: square HD, square, portrait 4:3/16:9, landscape 4:3/16:9
599
- - Custom dimensions support (64x64 to 14142x14142 pixels)
600
-
601
- #### 6. IdeogramV3Remix (Image-to-Image)
602
-
603
- A powerful image remixing model from fal.ai that transforms existing images while preserving core elements:
604
-
605
- ```typescript
606
- image2image: FalAiImage.IdeogramV3Remix({
607
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
608
- headers: {
609
- 'x-custom-header': 'value',
610
- 'x-client-version': '1.0.0'
611
- },
612
- // Optional: Configure default property values
613
- properties: {
614
- style: { default: 'AUTO' }, // Options: 'AUTO', 'GENERAL', 'REALISTIC', 'DESIGN'
615
- image_size: { default: 'square_hd' },
616
- remix_strength: { default: 0.7 } // How much to transform (0.0-1.0)
617
- }
618
- })
619
- ```
620
-
621
- Key features:
622
- - **Remix existing images** with text prompts while maintaining core characteristics
623
- - Four distinct style modes: AUTO, GENERAL, REALISTIC, and DESIGN
624
- - Multiple image size presets: square HD, square, portrait 4:3/16:9, landscape 4:3/16:9
625
- - Custom dimensions support (64x64 to 14142x14142 pixels)
626
-
627
- #### 7. QwenImageEdit (Image-to-Image)
628
-
629
- A powerful image editing model with superior text editing capabilities from fal.ai:
630
-
631
- ```typescript
632
- image2image: FalAiImage.QwenImageEdit({
633
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
634
- headers: {
635
- 'x-custom-header': 'value',
636
- 'x-client-version': '1.0.0'
637
- },
638
- // Optional: Configure default property values
639
- properties: {
640
- seed: { default: 12345 }, // Fixed seed for reproducibility
641
- guidance_scale: { default: 7.5 } // Guidance strength (0-20)
642
- }
643
- })
644
- ```
645
-
646
- Key features:
647
- - **Superior text editing capabilities** for image transformation
648
- - Transform existing images with detailed text prompts
649
- - Available through all canvas quick actions (edit, background swap, style transfer, artist styles, variants)
650
- - Maintains original image dimensions
651
- - Custom headers support for API requests
652
- ```
653
-
654
- #### 8. FluxProKontextEdit (Image-to-Image)
655
-
656
- A versatile image editing model that applies stylistic changes and transformations:
657
-
658
- ```typescript
659
- image2image: FalAiImage.FluxProKontextEdit({
660
- proxyUrl: 'http://your-proxy-server.com/api/proxy'
661
- })
662
- ```
663
-
664
- Key features:
665
- - Change existing images with text prompts
666
- - Built-in quick actions for style transfer, artist styles, background swapping, and variants
667
- - Keeps original image dimensions
668
-
669
- #### 9. FluxProKontextMaxEdit (Image-to-Image)
670
-
671
- A high-quality variant of FluxProKontext offering more detailed results:
672
-
673
- ```typescript
674
- image2image: FalAiImage.FluxProKontextMaxEdit({
675
- proxyUrl: 'http://your-proxy-server.com/api/proxy'
676
- })
677
- ```
678
-
679
- Key features:
680
- - All capabilities of FluxProKontextEdit with enhanced quality
681
- - Style transfer & artist presets
682
- - Maintains original dimensions
683
- - Canvas quick-action integration
684
-
685
- #### 9. NanoBanana (Text-to-Image)
686
-
687
- A fast and efficient text-to-image model from fal.ai that generates high-quality images:
688
-
689
- ```typescript
690
- text2image: FalAiImage.NanoBanana({
691
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
692
- headers: {
693
- 'x-custom-header': 'value',
694
- 'x-client-version': '1.0.0'
695
- },
696
- // Optional: Configure default property values
697
- properties: {
698
- output_format: { default: 'PNG' } // Options: 'PNG', 'JPEG'
699
- }
700
- })
701
- ```
702
-
703
- Key features:
704
- - Fast generation times for quick prototyping
705
- - High-quality image output at 1024×1024 resolution
706
- - Simple prompt-based interface
707
- - Support for multiple output formats (JPEG, PNG)
708
- - Configurable number of images (1-4)
709
- - Supports page remixing with custom prompts
710
- - Custom headers support for API requests
711
-
712
- **Custom Translations:**
713
- ```typescript
714
- cesdk.i18n.setTranslations({
715
- en: {
716
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana.property.prompt': 'Describe your image',
717
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana.property.num_images': 'Number of Images',
718
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana.property.output_format': 'Output Format'
719
- }
720
- });
721
- ```
722
-
723
- #### 10. NanoBananaPro (Text-to-Image)
724
-
725
- An enhanced version of NanoBanana from fal.ai with advanced aspect ratio and resolution controls:
726
-
727
- ```typescript
728
- text2image: FalAiImage.NanoBananaPro({
729
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
730
- headers: {
731
- 'x-custom-header': 'value',
732
- 'x-client-version': '1.0.0'
733
- },
734
- // Optional: Configure default property values
735
- properties: {
736
- aspect_ratio: { default: '1:1' }, // Options: '1:1', '3:2', '2:3', '4:3', '3:4', '16:9', '9:16', '21:9', '9:21', '2.4:1'
737
- resolution: { default: '1K' }, // Options: '1K', '2K', '4K'
738
- output_format: { default: 'png' } // Options: 'png', 'jpeg', 'webp'
739
- }
740
- })
741
- ```
742
-
743
- Key features:
744
- - Fast generation times for quick prototyping
745
- - 10 different aspect ratio options (square, portrait, landscape, ultra-wide, cinematic)
746
- - 3 resolution multipliers (1K, 2K, 4K) for scalable image quality
747
- - High-quality image output with flexible dimensions
748
- - Simple prompt-based interface
749
- - Support for multiple output formats (JPEG, PNG)
750
- - Configurable number of images (1-4)
751
- - Supports page remixing with custom prompts
752
- - Custom headers support for API requests
753
-
754
- **Custom Translations:**
755
- ```typescript
756
- cesdk.i18n.setTranslations({
757
- en: {
758
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana-pro.property.prompt': 'Describe your image',
759
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana-pro.property.aspect_ratio': 'Aspect Ratio',
760
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana-pro.property.resolution': 'Resolution',
761
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana-pro.property.output_format': 'Output Format'
762
- }
763
- });
764
- ```
765
-
766
- #### 11. SeedreamV4 (Text-to-Image)
767
-
768
- A powerful text-to-image model from ByteDance's Seedream 4.0 available through fal.ai:
769
-
770
- ```typescript
771
- text2image: FalAiImage.SeedreamV4({
772
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
773
- headers: {
774
- 'x-custom-header': 'value',
775
- 'x-client-version': '1.0.0'
776
- },
777
- // Optional: Configure default property values
778
- properties: {
779
- image_size: { default: 'square_hd' } // Options: square_hd, square, portrait/landscape variants
780
- }
781
- })
782
- ```
783
-
784
- Key features:
785
- - High-quality image generation with ByteDance's Seedream 4.0 model
786
- - Multiple image size presets: square HD (2048×2048), square (1024×1024), portrait 4:3/16:9, landscape 4:3/16:9
787
- - Custom dimensions support (1024-4096 pixels)
788
- - Fast generation times
789
- - Safety checker enabled by default
790
-
791
- #### 11. SeedreamV4Edit (Image-to-Image)
792
-
793
- An advanced image editing model from ByteDance's Seedream 4.0 for transforming existing images:
794
-
795
- ```typescript
796
- image2image: FalAiImage.SeedreamV4Edit({
797
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
798
- headers: {
799
- 'x-custom-header': 'value',
800
- 'x-client-version': '1.0.0'
801
- }
802
- })
803
- ```
804
-
805
- Key features:
806
- - Unified architecture for both generation and editing
807
- - Supports multiple input images (up to 10)
808
- - Full canvas quick actions support: edit image, swap background, style transfer, artist styles, create variants, combine images, remix page
809
- - Maintains original image dimensions
810
- - Custom headers support for API requests
811
-
812
- #### 12. NanoBananaEdit (Image-to-Image)
813
-
814
- An image editing model from fal.ai that transforms existing images using text prompts:
815
-
816
- ```typescript
817
- image2image: FalAiImage.NanoBananaEdit({
818
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
819
- headers: {
820
- 'x-custom-header': 'value',
821
- 'x-client-version': '1.0.0'
822
- },
823
- // Optional: Configure default property values
824
- properties: {
825
- strength: { default: 0.7 }, // Edit strength (0.0-1.0)
826
- output_format: { default: 'PNG' } // Options: 'PNG', 'JPEG'
827
- }
828
- })
829
- ```
830
-
831
- Key features:
832
- - Edit existing images with text prompts
833
- - Supports combining multiple images (up to 10 images)
834
- - Maintains original image dimensions automatically
835
- - Supports all standard image editing quick actions
836
- - Fast processing times
837
- - Canvas quick-action integration
838
- - Custom headers support for API requests
839
-
840
- **Custom Translations:**
841
- ```typescript
842
- cesdk.i18n.setTranslations({
843
- en: {
844
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana/edit.property.prompt': 'Edit instructions',
845
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana/edit.property.image_url': 'Source Image'
846
- }
847
- });
848
- ```
849
-
850
- #### 13. NanoBananaProEdit (Image-to-Image)
851
-
852
- An enhanced image editing model from fal.ai (Pro version of Nano Banana) that transforms existing images using text prompts:
853
-
854
- ```typescript
855
- image2image: FalAiImage.NanoBananaProEdit({
856
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
857
- headers: {
858
- 'x-custom-header': 'value',
859
- 'x-client-version': '1.0.0'
860
- },
861
- // Optional: Configure default property values
862
- properties: {
863
- num_images: { default: 1 }, // Number of images (1-4)
864
- aspect_ratio: { default: 'auto' }, // Aspect ratio (auto, 21:9, 16:9, 3:2, 4:3, 5:4, 1:1, 4:5, 3:4, 2:3, 9:16)
865
- resolution: { default: '1K' }, // Resolution (1K, 2K, 4K)
866
- output_format: { default: 'png' } // Options: 'png', 'jpeg', 'webp'
867
- }
868
- })
869
- ```
870
-
871
- Key features:
872
- - Professional-grade image editing with text prompts
873
- - Supports combining multiple images (up to 10 images)
874
- - Maintains original image dimensions automatically
875
- - Multiple aspect ratio and resolution options
876
- - Supports all standard image editing quick actions
877
- - Fast processing with optimized quality
878
- - Canvas quick-action integration
879
- - Custom headers support for API requests
880
-
881
- **Custom Translations:**
882
- ```typescript
883
- cesdk.i18n.setTranslations({
884
- en: {
885
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana-pro/edit.property.prompt': 'Edit instructions',
886
- 'ly.img.plugin-ai-image-generation-web.fal-ai/nano-banana-pro/edit.property.image_url': 'Source Image'
887
- }
888
- });
889
- ```
890
-
891
- ### Runware Providers
892
-
893
- Runware provides access to multiple AI models through a unified API. These providers require a Runware proxy URL for authentication.
894
-
895
- #### 14. Flux2Dev (Text-to-Image & Image-to-Image)
896
-
897
- Black Forest Labs' FLUX.2 [dev] model with full architectural control:
898
-
899
- ```typescript
900
- // Text-to-Image
901
- text2image: RunwareImage.Flux2Dev.Text2Image({
902
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
903
- })
904
-
905
- // Image-to-Image
906
- image2image: RunwareImage.Flux2Dev.Image2Image({
907
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
908
- })
909
- ```
910
-
911
- Key features:
912
- - Open weights release with full architectural control
913
- - Flexible sampling behavior and guidance strategies
914
- - Resolution: 512-2048 pixels (multiples of 16)
915
- - Up to 4 reference images for I2I
916
- - Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4
917
-
918
- #### 15. Flux2Pro (Text-to-Image & Image-to-Image)
919
-
920
- Black Forest Labs' FLUX.2 [pro] model with enhanced capabilities:
921
-
922
- ```typescript
923
- // Text-to-Image
924
- text2image: RunwareImage.Flux2Pro.Text2Image({
925
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
926
- })
927
-
928
- // Image-to-Image
929
- image2image: RunwareImage.Flux2Pro.Image2Image({
930
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
931
- })
932
- ```
933
-
934
- Key features:
935
- - Professional-grade image generation
936
- - Resolution: 256-1920 pixels (multiples of 16)
937
- - Up to 9 reference images for I2I
938
- - Enhanced quality and detail
939
- - Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4
940
-
941
- #### 16. Flux2Flex (Text-to-Image & Image-to-Image)
942
-
943
- Black Forest Labs' FLUX.2 [flex] model optimized for flexibility:
944
-
945
- ```typescript
946
- // Text-to-Image
947
- text2image: RunwareImage.Flux2Flex.Text2Image({
948
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
949
- })
950
-
951
- // Image-to-Image
952
- image2image: RunwareImage.Flux2Flex.Image2Image({
953
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
954
- })
955
- ```
956
-
957
- Key features:
958
- - Flexible generation with fast inference
959
- - Resolution: 256-1920 pixels (multiples of 16)
960
- - Up to 10 reference images for I2I
961
- - Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4
962
-
963
- #### 17. Seedream4 (Text-to-Image & Image-to-Image)
964
-
965
- ByteDance's Seedream 4.0 model for high-quality generation:
966
-
967
- ```typescript
968
- // Text-to-Image
969
- text2image: RunwareImage.Seedream4.Text2Image({
970
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
971
- })
972
-
973
- // Image-to-Image
974
- image2image: RunwareImage.Seedream4.Image2Image({
975
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
976
- })
977
- ```
978
-
979
- Key features:
980
- - ByteDance's latest generation model
981
- - High-quality photorealistic output
982
- - Up to 14 reference images for I2I with character/subject consistency
983
- - Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4
984
-
985
- #### 18. NanoBanana2Pro (Text-to-Image & Image-to-Image)
986
-
987
- Google's Gemini 3 Pro based model for fast, high-quality generation:
988
-
989
- ```typescript
990
- // Text-to-Image
991
- text2image: RunwareImage.NanoBanana2Pro.Text2Image({
992
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
993
- })
994
-
995
- // Image-to-Image
996
- image2image: RunwareImage.NanoBanana2Pro.Image2Image({
997
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
998
- })
999
- ```
1000
-
1001
- Key features:
1002
- - Powered by Gemini 3 Pro
1003
- - Fast generation with high quality
1004
- - Up to 14 reference images for style/lighting transfer
1005
- - Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4
1006
-
1007
- #### 19. GptImage1 (Text-to-Image & Image-to-Image) via Runware
1008
-
1009
- OpenAI's GPT Image 1 model accessed through Runware:
1010
-
1011
- ```typescript
1012
- // Text-to-Image
1013
- text2image: RunwareImage.GptImage1.Text2Image({
1014
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
1015
- })
1016
-
1017
- // Image-to-Image
1018
- image2image: RunwareImage.GptImage1.Image2Image({
1019
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
1020
- })
1021
- ```
1022
-
1023
- Key features:
1024
- - OpenAI's latest image generation model
1025
- - High-quality image generation and editing
1026
- - Fixed resolutions: 1024×1024, 1536×1024, 1024×1536
1027
- - Instruction-based editing for I2I
1028
-
1029
- #### 20. Seedream45 (Text-to-Image & Image-to-Image) via Runware
1030
-
1031
- ByteDance's Seedream 4.5 model with improved facial detail and text generation:
1032
-
1033
- ```typescript
1034
- // Text-to-Image
1035
- text2image: RunwareImage.Seedream45.Text2Image({
1036
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
1037
- })
1038
-
1039
- // Image-to-Image
1040
- image2image: RunwareImage.Seedream45.Image2Image({
1041
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
1042
- })
1043
- ```
1044
-
1045
- Key features:
1046
- - Improved facial detail rendering over Seedream 4.0
1047
- - Enhanced text generation quality
1048
- - Multi-image fusion capabilities
1049
- - 2K resolution output (minimum 3.7M pixels)
1050
- - Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4
1051
- - Up to 14 reference images for I2I
1052
-
1053
- #### 21. GptImage1Mini (Text-to-Image & Image-to-Image) via Runware
1054
-
1055
- OpenAI's cost-efficient GPT Image 1 Mini model accessed through Runware:
1056
-
1057
- ```typescript
1058
- // Text-to-Image
1059
- text2image: RunwareImage.GptImage1Mini.Text2Image({
1060
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
1061
- })
1062
-
1063
- // Image-to-Image
1064
- image2image: RunwareImage.GptImage1Mini.Image2Image({
1065
- proxyUrl: 'http://your-runware-proxy.com/api/proxy'
1066
- })
1067
- ```
1068
-
1069
- Key features:
1070
- - ~80% cost savings compared to GPT Image 1
1071
- - Fast generation times
1072
- - Same capabilities as GPT Image 1
1073
- - Fixed resolutions: 1024×1024, 1536×1024, 1024×1536
1074
- - Instruction-based editing for I2I
1075
-
1076
- ### EachLabs Providers
1077
-
1078
- EachLabs provides access to multiple AI models through a unified API. These providers require an EachLabs proxy URL for authentication.
1079
-
1080
- ```typescript
1081
- import EachLabsImage from '@imgly/plugin-ai-image-generation-web/eachlabs';
1082
- ```
1083
-
1084
- #### 22. NanoBananaPro (Text-to-Image) via EachLabs
1085
-
1086
- Nano Banana Pro multi-style image generation via EachLabs:
1087
-
1088
- ```typescript
1089
- text2image: EachLabsImage.NanoBananaPro.Text2Image({
1090
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1091
- })
1092
- ```
1093
-
1094
- Key features:
1095
- - Multi-style image generation
1096
- - 10 aspect ratio options (1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3, 21:9, 9:21, 2.4:1)
1097
- - Multiple resolution options (1K, 2K, 4K)
1098
- - High-quality output
1099
-
1100
- #### 23. NanoBananaPro Edit (Image-to-Image) via EachLabs
1101
-
1102
- Nano Banana Pro image transformation via EachLabs:
1103
-
1104
- ```typescript
1105
- image2image: EachLabsImage.NanoBananaPro.Image2Image({
1106
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1107
- })
1108
- ```
1109
-
1110
- Key features:
1111
- - Multi-style image transformation
1112
- - Multiple resolution options (1K, 2K, 4K)
1113
- - Supports up to 10 reference images
1114
- - Full canvas quick actions support: edit image, swap background, style transfer, artist styles, create variants, combine images, remix page
1115
-
1116
- #### 24. Flux2Pro (Text-to-Image) via EachLabs
1117
-
1118
- Black Forest Labs' Flux 2 Pro high-quality text-to-image generation via EachLabs:
1119
-
1120
- ```typescript
1121
- text2image: EachLabsImage.Flux2Pro.Text2Image({
1122
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1123
- })
1124
- ```
1125
-
1126
- Key features:
1127
- - High-quality image generation from Black Forest Labs
1128
- - 6 image size options (square HD, square, portrait 4:3/16:9, landscape 4:3/16:9)
1129
- - Professional-grade output quality
1130
-
1131
- #### 25. Flux2Pro Edit (Image-to-Image) via EachLabs
1132
-
1133
- Black Forest Labs' Flux 2 Pro image transformation via EachLabs:
1134
-
1135
- ```typescript
1136
- image2image: EachLabsImage.Flux2Pro.Image2Image({
1137
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1138
- })
1139
- ```
1140
-
1141
- Key features:
1142
- - High-quality image transformation
1143
- - Supports up to 4 reference images
1144
- - Full canvas quick actions support: edit image, swap background, style transfer, artist styles, create variants, combine images, remix page
1145
-
1146
- #### 26. Flux2 (Text-to-Image) via EachLabs
1147
-
1148
- Black Forest Labs' Flux 2 standard text-to-image generation via EachLabs:
1149
-
1150
- ```typescript
1151
- text2image: EachLabsImage.Flux2.Text2Image({
1152
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1153
- })
1154
- ```
1155
-
1156
- Key features:
1157
- - Standard Flux 2 image generation from Black Forest Labs
1158
- - 6 image size options (square HD, square, portrait 4:3/16:9, landscape 4:3/16:9)
1159
- - Good quality output with faster generation
1160
-
1161
- #### 27. Flux2 Edit (Image-to-Image) via EachLabs
1162
-
1163
- Black Forest Labs' Flux 2 image transformation via EachLabs:
1164
-
1165
- ```typescript
1166
- image2image: EachLabsImage.Flux2.Image2Image({
1167
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1168
- })
1169
- ```
1170
-
1171
- Key features:
1172
- - Standard Flux 2 image transformation
1173
- - Supports up to 3 reference images
1174
- - Full canvas quick actions support: edit image, swap background, style transfer, artist styles, create variants, combine images, remix page
1175
-
1176
- #### 28. Flux2Flex (Text-to-Image) via EachLabs
1177
-
1178
- Black Forest Labs' Flux 2 Flex text-to-image generation with automatic prompt expansion via EachLabs:
1179
-
1180
- ```typescript
1181
- text2image: EachLabsImage.Flux2Flex.Text2Image({
1182
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1183
- })
1184
- ```
1185
-
1186
- Key features:
1187
- - Automatic prompt expansion using the model's knowledge
1188
- - 6 image size options (square HD, square, portrait 4:3/16:9, landscape 4:3/16:9)
1189
- - High-quality Flux 2 generation from Black Forest Labs
1190
-
1191
- #### 29. Flux2Flex Edit (Image-to-Image) via EachLabs
1192
-
1193
- Black Forest Labs' Flux 2 Flex image transformation with automatic prompt expansion via EachLabs:
1194
-
1195
- ```typescript
1196
- image2image: EachLabsImage.Flux2Flex.Image2Image({
1197
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1198
- })
1199
- ```
1200
-
1201
- Key features:
1202
- - Automatic prompt expansion using the model's knowledge
1203
- - Automatic image size detection ("auto" mode)
1204
- - Supports up to 10 reference images
1205
- - Full canvas quick actions support: edit image, swap background, style transfer, artist styles, create variants, combine images, remix page
1206
-
1207
- #### 30. OpenAI GPT Image (Text-to-Image) via EachLabs
1208
-
1209
- OpenAI's GPT Image text-to-image generation via EachLabs:
1210
-
1211
- ```typescript
1212
- text2image: EachLabsImage.OpenAIGptImage.Text2Image({
1213
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1214
- })
1215
- ```
1216
-
1217
- Key features:
1218
- - High-quality image generation from OpenAI
1219
- - 3 image size options (Square, Landscape, Portrait)
1220
- - Professional-grade output quality
1221
-
1222
- #### 31. OpenAI GPT Image Edit (Image-to-Image) via EachLabs
1223
-
1224
- OpenAI's GPT Image image transformation via EachLabs:
1225
-
1226
- ```typescript
1227
- image2image: EachLabsImage.OpenAIGptImage.Image2Image({
1228
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1229
- })
1230
- ```
1231
-
1232
- Key features:
1233
- - High-quality image transformation
1234
- - Supports up to 16 reference images
1235
- - Full canvas quick actions support: edit image, swap background, style transfer, artist styles, create variants, combine images, remix page
1236
-
1237
- #### 32. Seedream v4.5 (Text-to-Image) via EachLabs
1238
-
1239
- ByteDance's Seedream v4.5 text-to-image generation via EachLabs:
1240
-
1241
- ```typescript
1242
- text2image: EachLabsImage.Seedream45.Text2Image({
1243
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1244
- })
1245
- ```
1246
-
1247
- Key features:
1248
- - High-quality image generation from ByteDance
1249
- - 6 image size options (square HD, square, portrait 4:3/16:9, landscape 4:3/16:9)
1250
- - Improved facial details and text generation over v4.0
1251
-
1252
- #### 33. Seedream v4.5 Edit (Image-to-Image) via EachLabs
1253
-
1254
- ByteDance's Seedream v4.5 image transformation via EachLabs:
1255
-
1256
- ```typescript
1257
- image2image: EachLabsImage.Seedream45.Image2Image({
1258
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1259
- })
1260
- ```
1261
-
1262
- Key features:
1263
- - High-quality image transformation
1264
- - Supports up to 10 reference images
1265
- - Full canvas quick actions support: edit image, swap background, style transfer, artist styles, create variants, combine images, remix page
1266
- - Improved facial details and text generation over v4.0
1267
-
1268
- #### 34. Gemini 3 Pro Image (Text-to-Image) via EachLabs
1269
-
1270
- Google's Gemini 3 Pro text-to-image generation via EachLabs:
1271
-
1272
- ```typescript
1273
- text2image: EachLabsImage.Gemini3Pro.Text2Image({
1274
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1275
- })
1276
- ```
1277
-
1278
- Key features:
1279
- - High-quality image generation from Google Gemini
1280
- - 8 aspect ratio options (1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3, 21:9)
1281
- - Multiple resolution options (1K, 2K, 4K)
1282
- - Professional-grade output quality
1283
-
1284
- #### 35. Gemini 3 Pro Image Edit (Image-to-Image) via EachLabs
1285
-
1286
- Google's Gemini 3 Pro image transformation via EachLabs:
1287
-
1288
- ```typescript
1289
- image2image: EachLabsImage.Gemini3Pro.Image2Image({
1290
- proxyUrl: 'http://your-eachlabs-proxy.com/api/proxy'
1291
- })
1292
- ```
1293
-
1294
- Key features:
1295
- - High-quality image transformation
1296
- - Supports up to 10 reference images
1297
- - Full canvas quick actions support: edit image, swap background, style transfer, artist styles, create variants, combine images, remix page
1298
-
1299
- ### Customizing Labels and Translations
1300
-
1301
- You can customize all labels and text in the AI image generation interface using the translation system. This allows you to provide better labels for your users in any language.
1302
-
1303
- #### Translation Key Structure
1304
-
1305
- The system checks for translations in this order (highest to lowest priority):
1306
-
1307
- 1. **Provider-specific**: `ly.img.plugin-ai-image-generation-web.${provider}.property.${field}` - Override labels for a specific AI provider
1308
- 2. **Generic**: `ly.img.plugin-ai-generation-web.property.${field}` - Override labels for all AI plugins
1309
-
1310
- #### Basic Example
1311
-
1312
- ```typescript
1313
- // Customize labels for your AI image generation interface
1314
- cesdk.i18n.setTranslations({
1315
- en: {
1316
- // Generic labels (applies to ALL AI plugins)
1317
- 'ly.img.plugin-ai-generation-web.property.prompt': 'Describe what you want to create',
1318
- 'ly.img.plugin-ai-generation-web.property.image_size': 'Image Dimensions',
1319
-
1320
- // Provider-specific for RecraftV3
1321
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.prompt': 'Describe your Recraft image',
1322
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.image_size': 'Canvas Size',
1323
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.image_size.square_hd': 'Square HD (1024×1024)',
1324
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.image_size.portrait_4_3': 'Portrait 4:3 (768×1024)',
1325
-
1326
- // Provider-specific for IdeogramV3
1327
- 'ly.img.plugin-ai-image-generation-web.fal-ai/ideogram/v3.property.prompt': 'Describe your Ideogram image',
1328
- 'ly.img.plugin-ai-image-generation-web.fal-ai/ideogram/v3.property.style_mode': 'Style Mode',
1329
- 'ly.img.plugin-ai-image-generation-web.fal-ai/ideogram/v3.property.style_mode.REALISTIC': 'Photorealistic'
1330
- }
1331
- });
1332
- ```
1333
-
1334
- #### QuickAction Translations
1335
-
1336
- QuickActions (like "Edit Image", "Style Transfer", etc.) use their own translation keys with provider-specific overrides:
1337
-
1338
- ```typescript
1339
- cesdk.i18n.setTranslations({
1340
- en: {
1341
- // Provider-specific translations (highest priority)
1342
- 'ly.img.plugin-ai-image-generation-web.fal-ai/gemini-flash-edit.quickAction.editImage': 'Edit with Gemini',
1343
- 'ly.img.plugin-ai-image-generation-web.fal-ai/flux-pro/kontext.quickAction.styleTransfer': 'Style with Flux Pro Kontext',
1344
- 'ly.img.plugin-ai-image-generation-web.open-ai/gpt-image-1/image2image.quickAction.editImage': 'Edit with GPT',
1345
-
1346
- // Generic plugin translations
1347
- 'ly.img.plugin-ai-image-generation-web.quickAction.editImage': 'Edit Image...',
1348
- 'ly.img.plugin-ai-image-generation-web.quickAction.swapBackground': 'Swap Background...',
1349
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer': 'Style Transfer...',
1350
- 'ly.img.plugin-ai-image-generation-web.quickAction.createVariant': 'Create Variant...',
1351
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer': 'Painted By...',
1352
-
1353
- // QuickAction input fields and buttons
1354
- 'ly.img.plugin-ai-image-generation-web.quickAction.editImage.prompt': 'Edit Image...',
1355
- 'ly.img.plugin-ai-image-generation-web.quickAction.editImage.prompt.placeholder': 'e.g. "Add a sunset"',
1356
- 'ly.img.plugin-ai-image-generation-web.quickAction.editImage.apply': 'Change',
1357
- 'ly.img.plugin-ai-image-generation-web.quickAction.swapBackground.prompt': 'Swap Background...',
1358
- 'ly.img.plugin-ai-image-generation-web.quickAction.swapBackground.prompt.placeholder': 'e.g. "Beach at sunset"',
1359
- 'ly.img.plugin-ai-image-generation-web.quickAction.swapBackground.apply': 'Swap'
1360
- }
1361
- });
1362
- ```
1363
-
1364
- **QuickAction Translation Priority:**
1365
- 1. Provider-specific: `ly.img.plugin-ai-image-generation-web.${provider}.quickAction.${action}.${field}`
1366
- 2. Generic plugin: `ly.img.plugin-ai-image-generation-web.quickAction.${action}.${field}`
1367
-
1368
- **Translation Structure:**
1369
- - Base key (e.g., `.quickAction.editImage`): Button text when QuickAction is collapsed
1370
- - `.prompt`: Label for input field when expanded
1371
- - `.prompt.placeholder`: Placeholder text for input field
1372
- - `.apply`: Text for action/submit button
1373
-
1374
- #### QuickAction Dropdown Options
1375
-
1376
- Some QuickActions like Artist Transfer and Style Transfer include dropdown menus with predefined options. You can customize these dropdown labels using provider-specific translation keys:
1377
-
1378
- ```typescript
1379
- cesdk.i18n.setTranslations({
1380
- en: {
1381
- // Artist Transfer dropdown options (provider-specific)
1382
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.van-gogh': 'Van Gogh',
1383
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.monet': 'Monet',
1384
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.picasso': 'Picasso',
1385
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.dali': 'Dalí',
1386
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.matisse': 'Matisse',
1387
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.warhol': 'Warhol',
1388
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.michelangelo': 'Michelangelo',
1389
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.da-vinci': 'Da Vinci',
1390
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.rembrandt': 'Rembrandt',
1391
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.mondrian': 'Mondrian',
1392
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.kahlo': 'Frida Kahlo',
1393
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.fal-ai/gemini-flash-edit.property.artist.hokusai': 'Hokusai',
1394
-
1395
- // Style Transfer dropdown options (provider-specific)
1396
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.water': 'Watercolor Painting',
1397
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.oil': 'Oil Painting',
1398
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.charcoal': 'Charcoal Sketch',
1399
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.pencil': 'Pencil Drawing',
1400
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.pastel': 'Pastel Artwork',
1401
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.ink': 'Ink Wash',
1402
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.stained-glass': 'Stained Glass Window',
1403
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.fal-ai/gemini-flash-edit.property.style.japanese': 'Japanese Woodblock Print',
1404
-
1405
- // Generic fallback options (applies to all providers)
1406
- 'ly.img.plugin-ai-image-generation-web.quickAction.artistTransfer.property.artist.van-gogh': 'Van Gogh',
1407
- 'ly.img.plugin-ai-image-generation-web.quickAction.styleTransfer.property.style.water': 'Watercolor Painting'
1408
- }
1409
- });
1410
- ```
1411
-
1412
- The system checks for translations in this order (highest to lowest priority):
1413
-
1414
- 1. **Provider-specific**: `ly.img.plugin-ai-image-generation-web.quickAction.${actionName}.${providerId}.property.${field}.${option}` - Override labels for a specific AI provider
1415
- 2. **Generic**: `ly.img.plugin-ai-image-generation-web.quickAction.${actionName}.property.${field}.${option}` - Override labels for all AI plugins
1416
-
1417
- ### Configuration Options
1418
-
1419
- The plugin accepts the following configuration options:
1420
-
1421
- | Option | Type | Description | Default |
1422
- |--------|------|-------------|---------|
1423
- | `text2image` | Provider \| Provider[] | Provider(s) for text-to-image generation. When multiple providers are provided, users can select between them | undefined |
1424
- | `image2image` | Provider \| Provider[] | Provider(s) for image-to-image transformation. When multiple providers are provided, users can select between them | undefined |
1425
- | `debug` | boolean | Enable debug logging | false |
1426
- | `dryRun` | boolean | Simulate generation without API calls | false |
1427
- | `middleware` | Function[] | Array of middleware functions to extend the generation process | undefined |
1428
-
1429
- ### Middleware Configuration
1430
-
1431
- The `middleware` option allows you to add pre-processing and post-processing capabilities to the generation process:
1432
-
1433
- ```typescript
1434
- import ImageGeneration from '@imgly/plugin-ai-image-generation-web';
1435
- import FalAiImage from '@imgly/plugin-ai-image-generation-web/fal-ai';
1436
- import { loggingMiddleware, rateLimitMiddleware } from '@imgly/plugin-ai-generation-web';
1437
-
1438
- // Create middleware functions
1439
- const logging = loggingMiddleware();
1440
- const rateLimit = rateLimitMiddleware({
1441
- maxRequests: 10,
1442
- timeWindowMs: 60000, // 1 minute
1443
- onRateLimitExceeded: (input, options, info) => {
1444
- console.log(`Rate limit exceeded: ${info.currentCount}/${info.maxRequests}`);
1445
- return false; // Reject request
1446
- }
1447
- });
1448
-
1449
- // Apply middleware to plugin
1450
- cesdk.addPlugin(
1451
- ImageGeneration({
1452
- text2image: FalAiImage.RecraftV3({
1453
- proxyUrl: 'http://your-proxy-server.com/api/proxy'
1454
- }),
1455
- // Or use: FalAiImage.Recraft20b({ proxyUrl: 'http://your-proxy-server.com/api/proxy' }),
1456
- middleware: [logging, rateLimit] // Apply middleware in order
1457
- })
1458
- );
1459
- ```
1460
-
1461
- Built-in middleware options:
1462
-
1463
- - **loggingMiddleware**: Logs generation requests and responses
1464
- - **rateLimitMiddleware**: Limits the number of generation requests in a time window
1465
-
1466
- #### Creating Custom Middleware
1467
-
1468
- Custom middleware functions follow this pattern:
1469
-
1470
- ```typescript
1471
- const customMiddleware = async (input, options, next) => {
1472
- // Pre-processing logic
1473
- console.log('Before generation:', input);
1474
-
1475
- // Add custom fields or modify the input if needed
1476
- const modifiedInput = {
1477
- ...input,
1478
- customField: 'custom value'
1479
- };
1480
-
1481
- // Call the next middleware or generation function
1482
- const result = await next(modifiedInput, options);
1483
-
1484
- // Post-processing logic
1485
- console.log('After generation:', result);
1486
-
1487
- // You can also modify the result before returning it
1488
- return result;
1489
- };
1490
- ```
1491
-
1492
- #### Preventing Default Feedback
1493
-
1494
- Middleware can suppress default UI feedback behaviors using `options.preventDefault()`:
1495
-
1496
- ```typescript
1497
- const customErrorMiddleware = async (input, options, next) => {
1498
- try {
1499
- return await next(input, options);
1500
- } catch (error) {
1501
- // Prevent default error notification and block error state
1502
- options.preventDefault();
1503
-
1504
- // When preventDefault() is called, you need to handle the block state yourself.
1505
- // Here we set the error state to mimic the default behavior:
1506
- options.blockIds?.forEach(blockId => {
1507
- if (options.engine.block.isValid(blockId)) {
1508
- options.engine.block.setState(blockId, { type: 'Error', error: 'Unknown' });
1509
- }
1510
- });
1511
- // Alternative: Delete the placeholder block instead
1512
- // options.blockIds?.forEach(blockId => {
1513
- // if (options.engine.block.isValid(blockId)) {
1514
- // options.engine.block.destroy(blockId);
1515
- // }
1516
- // });
1517
-
1518
- // Show custom error notification
1519
- options.cesdk?.ui.showNotification({
1520
- type: 'error',
1521
- message: `Custom error: ${error.message}`,
1522
- action: {
1523
- label: 'Contact Support',
1524
- onClick: () => window.open('mailto:support@example.com')
1525
- }
1526
- });
1527
-
1528
- throw error;
1529
- }
1530
- };
1531
- ```
1532
-
1533
- **What gets prevented:**
1534
- - Error/success notifications
1535
- - Block error state
1536
- - Console error logging
1537
-
1538
- **What is NOT prevented:**
1539
- - Pending → Ready transition (loading spinner always stops)
1540
-
1541
- For more details, see the [@imgly/plugin-ai-generation-web documentation](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-generation-web#preventing-default-feedback).
1542
-
1543
- The middleware function signature is:
1544
-
1545
- ```typescript
1546
- type Middleware<I, O extends Output> = (
1547
- input: I,
1548
- options: GenerationOptions & {
1549
- // The block IDs the generation is applied on
1550
- blockIds?: number[] | null;
1551
-
1552
- // Function to add a cleanup handler
1553
- addDisposer: (dispose: () => Promise<void>) => void;
1554
- },
1555
- next: (input: I, options: GenerationOptions) => Promise<GenerationResult<O>>
1556
- ) => Promise<GenerationResult<O>>;
1557
- ```
1558
-
1559
- Middleware functions are applied in order, creating a chain of processing steps. The `next` parameter calls the next middleware in the chain or the generation function itself.
1560
-
1561
- ### Using a Proxy
1562
-
1563
- 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:
1564
-
1565
- ```typescript
1566
- text2image: FalAiImage.RecraftV3({
1567
- proxyUrl: 'http://your-proxy-server.com/api/proxy',
1568
- headers: {
1569
- 'x-custom-header': 'value',
1570
- 'x-client-version': '1.0.0'
1571
- }
1572
- })
1573
-
1574
- // Or use Recraft20b with icon style support:
1575
- // text2image: FalAiImage.Recraft20b({
1576
- // proxyUrl: 'http://your-proxy-server.com/api/proxy',
1577
- // headers: {
1578
- // 'x-custom-header': 'value',
1579
- // 'x-client-version': '1.0.0'
1580
- // }
1581
- // })
1582
- ```
1583
-
1584
- The `headers` option allows you to include custom HTTP headers in all API requests. This is useful for:
1585
- - Adding custom client identification headers
1586
- - Including version information
1587
- - Passing through metadata required by your API
1588
- - Adding correlation IDs for request tracing
1589
-
1590
- You'll need to implement a proxy server that forwards requests to fal.ai and handles authentication.
1591
-
1592
- ## API Reference
1593
-
1594
- ### Main Plugin
1595
-
1596
- ```typescript
1597
- ImageGeneration(options: PluginConfiguration): EditorPlugin
1598
- ```
1599
-
1600
- Creates and returns a plugin that can be added to CreativeEditor SDK.
1601
-
1602
- ### Plugin Configuration
1603
-
1604
- ```typescript
1605
- interface PluginConfiguration {
1606
- // Provider(s) for text-to-image generation
1607
- text2image?: AiImageProvider | AiImageProvider[];
1608
-
1609
- // Provider(s) for image-to-image generation
1610
- image2image?: AiImageProvider | AiImageProvider[];
1611
-
1612
- // Enable debug logging
1613
- debug?: boolean;
1614
-
1615
- // Skip actual API calls for testing
1616
- dryRun?: boolean;
1617
-
1618
- // Extend the generation process
1619
- middleware?: GenerationMiddleware;
1620
- }
1621
- ```
1622
-
1623
- ### Fal.ai Providers
1624
-
1625
- #### RecraftV3
1626
-
1627
- ```typescript
1628
- FalAiImage.RecraftV3(config: {
1629
- proxyUrl: string;
1630
- headers?: Record<string, string>;
1631
- debug?: boolean;
1632
- })
1633
- ```
1634
-
1635
- #### Recraft20b
1636
-
1637
- ```typescript
1638
- FalAiImage.Recraft20b(config: {
1639
- proxyUrl: string;
1640
- headers?: Record<string, string>;
1641
- debug?: boolean;
1642
- })
1643
- ```
1644
-
1645
- #### IdeogramV3
1646
-
1647
- ```typescript
1648
- FalAiImage.IdeogramV3(config: {
1649
- proxyUrl: string;
1650
- headers?: Record<string, string>;
1651
- debug?: boolean;
1652
- })
1653
- ```
1654
-
1655
- #### IdeogramV3Remix
1656
-
1657
- ```typescript
1658
- FalAiImage.IdeogramV3Remix(config: {
1659
- proxyUrl: string;
1660
- headers?: Record<string, string>;
1661
- debug?: boolean;
1662
- })
1663
- ```
1664
-
1665
- #### GeminiFlash25
1666
-
1667
- ```typescript
1668
- FalAiImage.GeminiFlash25(config: {
1669
- proxyUrl: string;
1670
- headers?: Record<string, string>;
1671
- debug?: boolean;
1672
- })
1673
- ```
1674
-
1675
- #### GeminiFlashEdit
1676
-
1677
- ```typescript
1678
- FalAiImage.GeminiFlashEdit(config: {
1679
- proxyUrl: string;
1680
- headers?: Record<string, string>;
1681
- debug?: boolean;
1682
- })
1683
- ```
1684
-
1685
- #### Gemini25FlashImageEdit
1686
-
1687
- ```typescript
1688
- FalAiImage.Gemini25FlashImageEdit(config: {
1689
- proxyUrl: string;
1690
- headers?: Record<string, string>;
1691
- debug?: boolean;
1692
- })
1693
- ```
1694
-
1695
- #### QwenImageEdit
1696
-
1697
- ```typescript
1698
- FalAiImage.QwenImageEdit(config: {
1699
- proxyUrl: string;
1700
- headers?: Record<string, string>;
1701
- debug?: boolean;
1702
- })
1703
- ```
1704
-
1705
- ### OpenAI Providers
1706
-
1707
- #### GptImage1.Text2Image
1708
-
1709
- ```typescript
1710
- OpenAiImage.GptImage1.Text2Image(config: {
1711
- proxyUrl: string;
1712
- headers?: Record<string, string>;
1713
- debug?: boolean;
1714
- })
1715
- ```
1716
-
1717
- #### GptImage1.Image2Image
1718
-
1719
- ```typescript
1720
- OpenAiImage.GptImage1.Image2Image(config: {
1721
- proxyUrl: string;
1722
- headers?: Record<string, string>;
1723
- debug?: boolean;
1724
- })
1725
- ```
1726
-
1727
- #### FluxProKontextEdit
1728
-
1729
- ```typescript
1730
- FalAiImage.FluxProKontextEdit(config: {
1731
- proxyUrl: string;
1732
- debug?: boolean;
1733
- })
1734
- ```
1735
-
1736
- #### FluxProKontextMaxEdit
1737
-
1738
- ```typescript
1739
- FalAiImage.FluxProKontextMaxEdit(config: {
1740
- proxyUrl: string;
1741
- debug?: boolean;
1742
- })
1743
- ```
1744
-
1745
- #### NanoBanana
1746
-
1747
- ```typescript
1748
- FalAiImage.NanoBanana(config: {
1749
- proxyUrl: string;
1750
- headers?: Record<string, string>;
1751
- debug?: boolean;
1752
- })
1753
- ```
1754
-
1755
- #### NanoBananaPro
1756
-
1757
- ```typescript
1758
- FalAiImage.NanoBananaPro(config: {
1759
- proxyUrl: string;
1760
- headers?: Record<string, string>;
1761
- debug?: boolean;
1762
- })
1763
- ```
1764
-
1765
- #### NanoBananaEdit
1766
-
1767
- ```typescript
1768
- FalAiImage.NanoBananaEdit(config: {
1769
- proxyUrl: string;
1770
- headers?: Record<string, string>;
1771
- debug?: boolean;
1772
- })
1773
- ```
1774
-
1775
- #### NanoBananaProEdit
1776
-
1777
- ```typescript
1778
- FalAiImage.NanoBananaProEdit(config: {
1779
- proxyUrl: string;
1780
- headers?: Record<string, string>;
1781
- debug?: boolean;
1782
- })
1783
- ```
1784
-
1785
- #### SeedreamV4
1786
-
1787
- ```typescript
1788
- FalAiImage.SeedreamV4(config: {
1789
- proxyUrl: string;
1790
- headers?: Record<string, string>;
1791
- debug?: boolean;
1792
- })
1793
- ```
1794
-
1795
- #### SeedreamV4Edit
1796
-
1797
- ```typescript
1798
- FalAiImage.SeedreamV4Edit(config: {
1799
- proxyUrl: string;
1800
- headers?: Record<string, string>;
1801
- debug?: boolean;
1802
- })
1803
- ```
1804
-
1805
- ### Runware Providers
1806
-
1807
- All Runware providers use the following configuration:
1808
-
1809
- ```typescript
1810
- interface RunwareProviderConfiguration {
1811
- proxyUrl: string; // HTTP endpoint URL for the Runware proxy
1812
- debug?: boolean; // Enable debug logging
1813
- middlewares?: any[]; // Optional middleware functions
1814
- history?: false | '@imgly/local' | '@imgly/indexedDB' | (string & {});
1815
- }
1816
- ```
1817
-
1818
- #### Flux2Dev.Text2Image / Flux2Dev.Image2Image
1819
-
1820
- ```typescript
1821
- RunwareImage.Flux2Dev.Text2Image(config: RunwareProviderConfiguration)
1822
- RunwareImage.Flux2Dev.Image2Image(config: RunwareProviderConfiguration)
1823
- ```
1824
-
1825
- #### Flux2Pro.Text2Image / Flux2Pro.Image2Image
1826
-
1827
- ```typescript
1828
- RunwareImage.Flux2Pro.Text2Image(config: RunwareProviderConfiguration)
1829
- RunwareImage.Flux2Pro.Image2Image(config: RunwareProviderConfiguration)
1830
- ```
1831
-
1832
- #### Flux2Flex.Text2Image / Flux2Flex.Image2Image
1833
-
1834
- ```typescript
1835
- RunwareImage.Flux2Flex.Text2Image(config: RunwareProviderConfiguration)
1836
- RunwareImage.Flux2Flex.Image2Image(config: RunwareProviderConfiguration)
1837
- ```
1838
-
1839
- #### Seedream4.Text2Image / Seedream4.Image2Image
1840
-
1841
- ```typescript
1842
- RunwareImage.Seedream4.Text2Image(config: RunwareProviderConfiguration)
1843
- RunwareImage.Seedream4.Image2Image(config: RunwareProviderConfiguration)
1844
- ```
1845
-
1846
- #### NanoBanana2Pro.Text2Image / NanoBanana2Pro.Image2Image
1847
-
1848
- ```typescript
1849
- RunwareImage.NanoBanana2Pro.Text2Image(config: RunwareProviderConfiguration)
1850
- RunwareImage.NanoBanana2Pro.Image2Image(config: RunwareProviderConfiguration)
1851
- ```
1852
-
1853
- #### GptImage1.Text2Image / GptImage1.Image2Image (Runware)
1854
-
1855
- ```typescript
1856
- RunwareImage.GptImage1.Text2Image(config: RunwareProviderConfiguration)
1857
- RunwareImage.GptImage1.Image2Image(config: RunwareProviderConfiguration)
1858
- ```
1859
-
1860
- ### EachLabs Providers
1861
-
1862
- All EachLabs providers use the following configuration:
1863
-
1864
- ```typescript
1865
- interface EachLabsProviderConfiguration {
1866
- proxyUrl: string; // HTTP endpoint URL for the EachLabs proxy
1867
- debug?: boolean; // Enable debug logging
1868
- middlewares?: any[]; // Optional middleware functions
1869
- history?: false | '@imgly/local' | '@imgly/indexedDB' | (string & {});
1870
- }
1871
- ```
1872
-
1873
- #### NanoBananaPro.Text2Image / NanoBananaPro.Image2Image
1874
-
1875
- ```typescript
1876
- EachLabsImage.NanoBananaPro.Text2Image(config: EachLabsProviderConfiguration)
1877
- EachLabsImage.NanoBananaPro.Image2Image(config: EachLabsProviderConfiguration)
1878
- ```
1879
-
1880
- #### Flux2Pro.Text2Image / Flux2Pro.Image2Image
1881
-
1882
- ```typescript
1883
- EachLabsImage.Flux2Pro.Text2Image(config: EachLabsProviderConfiguration)
1884
- EachLabsImage.Flux2Pro.Image2Image(config: EachLabsProviderConfiguration)
1885
- ```
1886
-
1887
- #### Flux2.Text2Image / Flux2.Image2Image
1888
-
1889
- ```typescript
1890
- EachLabsImage.Flux2.Text2Image(config: EachLabsProviderConfiguration)
1891
- EachLabsImage.Flux2.Image2Image(config: EachLabsProviderConfiguration)
1892
- ```
1893
-
1894
- #### Flux2Flex.Text2Image / Flux2Flex.Image2Image
1895
-
1896
- ```typescript
1897
- EachLabsImage.Flux2Flex.Text2Image(config: EachLabsProviderConfiguration)
1898
- EachLabsImage.Flux2Flex.Image2Image(config: EachLabsProviderConfiguration)
1899
- ```
1900
-
1901
- #### OpenAIGptImage.Text2Image / OpenAIGptImage.Image2Image
1902
-
1903
- ```typescript
1904
- EachLabsImage.OpenAIGptImage.Text2Image(config: EachLabsProviderConfiguration)
1905
- EachLabsImage.OpenAIGptImage.Image2Image(config: EachLabsProviderConfiguration)
1906
- ```
1907
-
1908
- #### Seedream45.Text2Image / Seedream45.Image2Image
1909
-
1910
- ```typescript
1911
- EachLabsImage.Seedream45.Text2Image(config: EachLabsProviderConfiguration)
1912
- EachLabsImage.Seedream45.Image2Image(config: EachLabsProviderConfiguration)
1913
- ```
1914
-
1915
- #### Gemini3Pro.Text2Image / Gemini3Pro.Image2Image
1916
-
1917
- ```typescript
1918
- EachLabsImage.Gemini3Pro.Text2Image(config: EachLabsProviderConfiguration)
1919
- EachLabsImage.Gemini3Pro.Image2Image(config: EachLabsProviderConfiguration)
1920
- ```
1921
-
1922
- ## UI Integration
1923
-
1924
- The plugin automatically registers the following UI components:
1925
-
1926
- 1. **Generation Panel**: A sidebar panel for text-to-image generation
1927
- 2. **Quick Actions**: Canvas menu items for image-to-image transformations
1928
- 3. **History Library**: Displays previously generated images
1929
- 4. **Dock Component**: A button in the dock area to open the image generation panel
1930
-
1931
- ### Quick Action Features
1932
-
1933
- The plugin includes several pre-configured quick actions for image generation providers:
1934
-
1935
- #### Available Quick Actions
1936
-
1937
- - **`ly.img.editImage`**: Change image based on description
1938
- - Input: `{ prompt: string, uri: string }`
1939
-
1940
- - **`ly.img.swapBackground`**: Change the background of the image
1941
- - Input: `{ prompt: string, uri: string }`
1942
-
1943
- - **`ly.img.createVariant`**: Create a variation of the image
1944
- - Input: `{ prompt: string, uri: string }`
1945
-
1946
- - **`ly.img.styleTransfer`**: Transform image into different art styles
1947
- - Input: `{ style: string, uri: string }`
1948
-
1949
- - **`ly.img.artistTransfer`**: Transform image in the style of famous artists
1950
- - Input: `{ artist: string, uri: string }`
1951
-
1952
- - **`ly.img.combineImages`**: Combine multiple images with instructions
1953
- - Input: `{ prompt: string, uris: string[], exportFromBlockIds: number[] }`
1954
-
1955
- - **`ly.img.remixPage`**: Convert the page into a single image
1956
- - Input: `{ prompt: string, uri: string }`
1957
-
1958
- - **`ly.img.remixPageWithPrompt`**: Remix the page with custom instructions
1959
- - Input: `{ prompt: string, uri: string }`
1960
-
1961
- - **`ly.img.gpt-image-1.changeStyleLibrary`**: Apply different art styles (GPT-specific)
1962
- - Input: `{ prompt: string, uri: string }`
1963
-
1964
- #### Provider Quick Action Support
1965
-
1966
- Providers declare which quick actions they support through their configuration:
1967
-
1968
- ```typescript
1969
- const myImageProvider = {
1970
- // ... other provider config
1971
- input: {
1972
- // ... panel config
1973
- quickActions: {
1974
- supported: {
1975
- 'ly.img.editImage': {
1976
- mapInput: (quickActionInput) => ({
1977
- prompt: quickActionInput.prompt,
1978
- image_url: quickActionInput.uri
1979
- })
1980
- },
1981
- 'ly.img.swapBackground': {
1982
- mapInput: (quickActionInput) => ({
1983
- prompt: quickActionInput.prompt,
1984
- image_url: quickActionInput.uri
1985
- })
1986
- },
1987
- 'ly.img.styleTransfer': {
1988
- mapInput: (quickActionInput) => ({
1989
- style: quickActionInput.style,
1990
- image_url: quickActionInput.uri
1991
- })
1992
- }
1993
- // Add more supported quick actions as needed
1994
- }
1995
- }
1996
- }
1997
- };
1998
- ```
1999
-
2000
- ### Panel IDs
2001
-
2002
- - Main panel: `ly.img.ai.image-generation`
2003
- - Canvas quick actions: `ly.img.ai.image.canvasMenu`
2004
- - Provider-specific panels:
2005
- - RecraftV3: `ly.img.ai.fal-ai/recraft-v3`
2006
- - Recraft20b: `ly.img.ai.fal-ai/recraft/v2/text-to-image`
2007
- - IdeogramV3: `ly.img.ai.fal-ai/ideogram/v3`
2008
- - IdeogramV3Remix: `ly.img.ai.fal-ai/ideogram/v3/remix`
2009
- - GeminiFlash25: `ly.img.ai.fal-ai/gemini-flash-2.5`
2010
- - GeminiFlashEdit: `ly.img.ai.fal-ai/gemini-flash-edit`
2011
- - QwenImageEdit: `ly.img.ai.fal-ai/qwen-image-edit`
2012
- - GptImage1.Text2Image: `ly.img.ai.open-ai/gpt-image-1/text2image`
2013
- - GptImage1.Image2Image: `ly.img.ai.open-ai/gpt-image-1/image2image`
2014
- - FluxProKontextEdit: `ly.img.ai.fal-ai/flux-pro/kontext`
2015
- - FluxProKontextMaxEdit: `ly.img.ai.fal-ai/flux-pro/kontext/max`
2016
- - NanoBanana: `ly.img.ai.fal-ai/nano-banana`
2017
- - NanoBananaPro: `ly.img.ai.fal-ai/nano-banana-pro`
2018
- - NanoBananaEdit: `ly.img.ai.fal-ai/nano-banana/edit`
2019
- - NanoBananaProEdit: `ly.img.ai.fal-ai/nano-banana-pro/edit`
2020
- - SeedreamV4: `ly.img.ai.fal-ai/bytedance/seedream/v4/text-to-image`
2021
- - SeedreamV4Edit: `ly.img.ai.fal-ai/bytedance/seedream/v4/edit`
2022
- - Runware Flux2Dev.Text2Image: `ly.img.ai.runware/bfl/flux-2-dev`
2023
- - Runware Flux2Dev.Image2Image: `ly.img.ai.runware/bfl/flux-2-dev/image2image`
2024
- - Runware Flux2Pro.Text2Image: `ly.img.ai.runware/bfl/flux-2-pro`
2025
- - Runware Flux2Pro.Image2Image: `ly.img.ai.runware/bfl/flux-2-pro/image2image`
2026
- - Runware Flux2Flex.Text2Image: `ly.img.ai.runware/bfl/flux-2-flex`
2027
- - Runware Flux2Flex.Image2Image: `ly.img.ai.runware/bfl/flux-2-flex/image2image`
2028
- - Runware Seedream4.Text2Image: `ly.img.ai.runware/bytedance/seedream-4`
2029
- - Runware Seedream4.Image2Image: `ly.img.ai.runware/bytedance/seedream-4/image2image`
2030
- - Runware NanoBanana2Pro.Text2Image: `ly.img.ai.runware/google/nano-banana-2-pro`
2031
- - Runware NanoBanana2Pro.Image2Image: `ly.img.ai.runware/google/nano-banana-2-pro/image2image`
2032
- - Runware GptImage1.Text2Image: `ly.img.ai.runware/openai/gpt-image-1`
2033
- - Runware GptImage1.Image2Image: `ly.img.ai.runware/openai/gpt-image-1/image2image`
2034
- - EachLabs NanoBananaPro.Text2Image: `ly.img.ai.eachlabs/nano-banana-pro`
2035
- - EachLabs NanoBananaPro.Image2Image: `ly.img.ai.eachlabs/nano-banana-pro/edit`
2036
- - EachLabs Flux2Pro.Text2Image: `ly.img.ai.eachlabs/flux-2-pro`
2037
- - EachLabs Flux2Pro.Image2Image: `ly.img.ai.eachlabs/flux-2-pro/edit`
2038
- - EachLabs Flux2.Text2Image: `ly.img.ai.eachlabs/flux-2`
2039
- - EachLabs Flux2.Image2Image: `ly.img.ai.eachlabs/flux-2/edit`
2040
- - EachLabs Flux2Flex.Text2Image: `ly.img.ai.eachlabs/flux-2-flex`
2041
- - EachLabs Flux2Flex.Image2Image: `ly.img.ai.eachlabs/flux-2-flex/edit`
2042
- - EachLabs OpenAIGptImage.Text2Image: `ly.img.ai.eachlabs/openai-gpt-image`
2043
- - EachLabs OpenAIGptImage.Image2Image: `ly.img.ai.eachlabs/openai-gpt-image/edit`
2044
- - EachLabs Seedream45.Text2Image: `ly.img.ai.eachlabs/seedream-v4.5`
2045
- - EachLabs Seedream45.Image2Image: `ly.img.ai.eachlabs/seedream-v4.5/edit`
2046
- - EachLabs Gemini3Pro.Text2Image: `ly.img.ai.eachlabs/gemini-3-pro-image`
2047
- - EachLabs Gemini3Pro.Image2Image: `ly.img.ai.eachlabs/gemini-3-pro-image/edit`
2048
-
2049
- ### Asset History
2050
-
2051
- Generated images are automatically stored in asset sources with the following IDs:
2052
- - RecraftV3: `fal-ai/recraft-v3.history`
2053
- - Recraft20b: `fal-ai/recraft/v2/text-to-image.history`
2054
- - IdeogramV3: `fal-ai/ideogram/v3.history`
2055
- - IdeogramV3Remix: `fal-ai/ideogram/v3/remix.history`
2056
- - GeminiFlash25: `fal-ai/gemini-flash-2.5.history`
2057
- - GeminiFlashEdit: `fal-ai/gemini-flash-edit.history`
2058
- - QwenImageEdit: `fal-ai/qwen-image-edit.history`
2059
- - GptImage1.Text2Image: `open-ai/gpt-image-1/text2image.history`
2060
- - GptImage1.Image2Image: `open-ai/gpt-image-1/image2image.history`
2061
- - FluxProKontextEdit: `fal-ai/flux-pro/kontext.history`
2062
- - FluxProKontextMaxEdit: `fal-ai/flux-pro/kontext/max.history`
2063
- - NanoBanana: `fal-ai/nano-banana.history`
2064
- - NanoBananaPro: `fal-ai/nano-banana-pro.history`
2065
- - NanoBananaEdit: `fal-ai/nano-banana/edit.history`
2066
- - NanoBananaProEdit: `fal-ai/nano-banana-pro/edit.history`
2067
- - SeedreamV4: `fal-ai/bytedance/seedream/v4/text-to-image.history`
2068
- - SeedreamV4Edit: `fal-ai/bytedance/seedream/v4/edit.history`
2069
- - Runware Flux2Dev.Text2Image: `runware/bfl/flux-2-dev.history`
2070
- - Runware Flux2Dev.Image2Image: `runware/bfl/flux-2-dev/image2image.history`
2071
- - Runware Flux2Pro.Text2Image: `runware/bfl/flux-2-pro.history`
2072
- - Runware Flux2Pro.Image2Image: `runware/bfl/flux-2-pro/image2image.history`
2073
- - Runware Flux2Flex.Text2Image: `runware/bfl/flux-2-flex.history`
2074
- - Runware Flux2Flex.Image2Image: `runware/bfl/flux-2-flex/image2image.history`
2075
- - Runware Seedream4.Text2Image: `runware/bytedance/seedream-4.history`
2076
- - Runware Seedream4.Image2Image: `runware/bytedance/seedream-4/image2image.history`
2077
- - Runware NanoBanana2Pro.Text2Image: `runware/google/nano-banana-2-pro.history`
2078
- - Runware NanoBanana2Pro.Image2Image: `runware/google/nano-banana-2-pro/image2image.history`
2079
- - Runware GptImage1.Text2Image: `runware/openai/gpt-image-1.history`
2080
- - Runware GptImage1.Image2Image: `runware/openai/gpt-image-1/image2image.history`
2081
- - EachLabs NanoBananaPro.Text2Image: `eachlabs/nano-banana-pro.history`
2082
- - EachLabs NanoBananaPro.Image2Image: `eachlabs/nano-banana-pro/edit.history`
2083
- - EachLabs Flux2Pro.Text2Image: `eachlabs/flux-2-pro.history`
2084
- - EachLabs Flux2Pro.Image2Image: `eachlabs/flux-2-pro/edit.history`
2085
- - EachLabs Flux2.Text2Image: `eachlabs/flux-2.history`
2086
- - EachLabs Flux2.Image2Image: `eachlabs/flux-2/edit.history`
2087
- - EachLabs Flux2Flex.Text2Image: `eachlabs/flux-2-flex.history`
2088
- - EachLabs Flux2Flex.Image2Image: `eachlabs/flux-2-flex/edit.history`
2089
- - EachLabs OpenAIGptImage.Text2Image: `eachlabs/openai-gpt-image.history`
2090
- - EachLabs OpenAIGptImage.Image2Image: `eachlabs/openai-gpt-image/edit.history`
2091
- - EachLabs Seedream45.Text2Image: `eachlabs/seedream-v4.5.history`
2092
- - EachLabs Seedream45.Image2Image: `eachlabs/seedream-v4.5/edit.history`
2093
- - EachLabs Gemini3Pro.Text2Image: `eachlabs/gemini-3-pro-image.history`
2094
- - EachLabs Gemini3Pro.Image2Image: `eachlabs/gemini-3-pro-image/edit.history`
2095
-
2096
- ### Dock Integration
2097
-
2098
- The plugin automatically registers a dock component with a sparkle icon that opens the image generation panel. To customize the component's position in the dock, use the `setDockOrder` method:
2099
-
2100
- ```typescript
2101
- // Add the AI Image component to the beginning of the dock
2102
- cesdk.ui.setDockOrder([
2103
- 'ly.img.ai.image-generation.dock',
2104
- ...cesdk.ui.getDockOrder()
2105
- ]);
2106
-
2107
- // Or add it at a specific position
2108
- const currentOrder = cesdk.ui.getDockOrder();
2109
- currentOrder.splice(2, 0, 'ly.img.ai.image-generation.dock');
2110
- cesdk.ui.setDockOrder(currentOrder);
2111
- ```
2112
-
2113
- ## Internationalization (i18n)
2114
-
2115
- The Image Generation plugin supports full internationalization. To customize translations, set them **before** adding the plugin:
2116
-
2117
- ```typescript
2118
- cesdk.i18n.setTranslations({
2119
- en: {
2120
- '@imgly/plugin-ai-image-generation-web.action.label': 'Create Image',
2121
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.style': 'Art Style'
2122
- },
2123
- de: {
2124
- '@imgly/plugin-ai-image-generation-web.action.label': 'Bild erstellen',
2125
- 'ly.img.plugin-ai-image-generation-web.fal-ai/recraft-v3.property.style': 'Kunststil'
2126
- }
2127
- });
2128
-
2129
- // Then add the plugins - they won't override your custom translations
2130
- await cesdk.addPlugin(AiApps({ providers: { /* ... */ } }));
2131
- ```
2132
-
2133
- For detailed documentation on the translation system, see the [Internationalization section](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-generation-web#internationalization-i18n) in the core AI generation package.
2134
-
2135
- For all available translation keys, see the [translations.json](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-image-generation-web/translations.json) file.
2136
-
2137
- ## Related Packages
2138
-
2139
- - [@imgly/plugin-ai-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-generation-web) - Core utilities for AI generation
2140
- - [@imgly/plugin-ai-video-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-video-generation-web) - AI video generation
2141
- - [@imgly/plugin-ai-audio-generation-web](https://github.com/imgly/plugins/tree/main/packages/plugin-ai-audio-generation-web) - AI audio generation
5
+ For documentation, visit: https://img.ly/docs/cesdk
2142
6
 
2143
7
  ## License
2144
8
 
2145
- This plugin is part of the IMG.LY plugin ecosystem for CreativeEditor SDK. Please refer to the license terms in the package.
9
+ This plugin is part of the IMG.LY plugin ecosystem for CreativeEditor SDK.