@innovastudio/contentbuilder 1.5.127 → 1.5.129

package/index.d.ts

@@ -214,8 +214,10 @@ interface ContentBuilderOptions {
     commandInfoCanvasMode?: any[]; 
     onStartRequest?: () => void;
 
-    imageModel?: string;
     defaultImageGenerationProvider?: string;
+    imageModel?: string;
+    imageSize?: string; 
+    imageGenerationModels?: any[]; 
 
     //-- Asset Manager
     listFilesUrl?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.127",
+  "version": "1.5.129",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.esm.js

@@ -83219,6 +83219,152 @@ class Dictation {
     };
     this.opts = Object.assign(this, defaults, opts);
     this.builder = builder;
+    this.imageModels = [{
+      id: 'fal-ai/nano-banana',
+      // ok
+      label: 'Nano Banana',
+      sizes: [],
+      // no size options
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/imagen4/preview/fast',
+      // ok
+      label: 'Imagen 4 Preview Fast',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/imagen4/preview',
+      // ok
+      label: 'Imagen 4 Preview',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/imagen4/preview/ultra',
+      // ok
+      label: 'Imagen 4 Preview Ultra',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/hidream-i1-fast',
+      // ok
+      label: 'HiDream-I1 Fast',
+      // sizes: => uses defaultSizes
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/hidream-i1-dev',
+      // ok
+      label: 'HiDream-I1 Dev',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/hidream-i1-full',
+      // ok
+      label: 'HiDream-I1 Full',
+      output_format: 'jpeg'
+    }, {
+      id: 'bria/text-to-image/3.2',
+      // ok
+      label: 'Bria (3.2)',
+      sizes: ['1:1', '3:2', '4:3', '5:4', '16:9', '2:3', '3:4', '4:5', '9:16']
+    }, {
+      id: 'fal-ai/recraft/v3/text-to-image',
+      // ok
+      label: 'Recraft V3'
+    }, {
+      id: 'fal-ai/flux-1/schnell',
+      // ok
+      label: 'FLUX.1 Schnell',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux/krea',
+      // ok
+      label: 'FLUX.1 Krea',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-krea-lora',
+      // ok
+      label: 'FLUX.1 Krea Lora',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-kontext-lora/text-to-image',
+      // ok
+      label: 'FLUX Kontext Lora',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/kontext/text-to-image',
+      // ok 
+      label: 'FLUX.1 Kontext Pro',
+      sizes: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16', '9:21'],
+      size_param: 'aspect_ratio',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/kontext/max/text-to-image',
+      // ok
+      label: 'FLUX.1 Kontext Max',
+      sizes: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16', '9:21'],
+      size_param: 'aspect_ratio',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/v1.1-ultra',
+      // ok
+      label: 'FLUX 1.1 Pro Ultra',
+      sizes: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16', '9:21'],
+      size_param: 'aspect_ratio',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/bytedance/seedream/v4/text-to-image',
+      // ok
+      label: 'ByteDance Seedream 4.0'
+    }, {
+      id: 'fal-ai/wan/v2.2-5b/text-to-image',
+      // ok
+      label: 'Wan 2.2 5B',
+      output_format: 'jpeg',
+      output_param: 'image_format'
+    }, {
+      id: 'fal-ai/wan/v2.2-a14b/text-to-image',
+      // ok
+      label: 'Wan 2.2 14B'
+    }, {
+      id: 'fal-ai/qwen-image',
+      // ok
+      label: 'Qwen Image',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/ideogram/v3',
+      // ok
+      label: 'Ideogram V3'
+    }, {
+      id: 'fal-ai/minimax/image-01',
+      // ok
+      label: 'MiniMax Image-01',
+      sizes: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16'],
+      size_param: 'aspect_ratio'
+    }, {
+      id: 'fal-ai/playground-v25',
+      // ok
+      label: 'Playground v25',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana',
+      // ok
+      label: 'Sana Base',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/sprint',
+      // ok
+      label: 'Sana Sprint',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/v1.5/4.8b',
+      // ok
+      label: 'Sana v1.5 4.8B',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/v1.5/1.6b',
+      // ok
+      label: 'Sana v1.5 1.6B',
+      output_format: 'jpeg'
+    }];
+    if (this.builder.imageGenerationModels) {
+      this.imageModels = this.builder.imageGenerationModels;
+    }
   } // constructor
 
   renderPanel() {
@@ -83548,6 +83694,22 @@ class Dictation {
                     </div>
                 </label>
 
+                <div class="div-image-generation-options" style="display:none">
+                    <div style="font-weight:500;margin:18px 0 0 0;">${util.out('Image Generation')}</div>
+
+                    <label class="label-input-image-model" for="input_image_model" style="margin: 7px 0 0 0;display: flex;flex-direction: column;letter-spacing: 0;">
+                        <div style="width:100%"><span>${util.out('Model')}</span>:</div>
+                        <select id="inpImageModelSelect" style="margin-top: 3px"></select>
+                    </label>
+
+                    <label class="label-input-image-size div-size-container" for="input_image_size" style="margin: 7px 0 0 0;display: flex;flex-direction: column;letter-spacing: 0;">
+                        <div style="width:100%"><span>${util.out('Image Size')}</span>:</div>
+                        <select id="inpImageSizeSelect" style="margin-top: 3px"></select>
+                    </label>
+
+                    <input id="inpImageOutputFormat" type="hidden" />
+                </div>
+
                 <div style="text-align:right;margin-top:25px;">
                     <button title="${util.out('Ok')}" class="input-ok classic-primary" style="width:100%;">${util.out('Ok')}</button>
                 </div>
@@ -83943,8 +84105,114 @@ class Dictation {
       }
     };
     this.initialStart = false; // for Safari
+
+    this.renderImageOptions();
   }
+  renderImageOptions() {
+    const modal = this.modalConfig;
+    const util = this.builder.util;
+    const divImageSettings = modal.querySelector('.div-image-generation-options');
+    if (this.builder.generateMediaUrl_Fal) {
+      divImageSettings.style.display = '';
+    }
+    const sizeDefs = {
+      square_hd: util.out('Square HD'),
+      square: util.out('Square'),
+      landscape_4_3: util.out('Landscape 4x3'),
+      landscape_16_9: util.out('Landscape 16x9'),
+      portrait_4_3: util.out('Portrait 3x4'),
+      portrait_16_9: util.out('Portrait 9x16'),
+      '1:1': util.out('Square'),
+      '3:2': util.out('Landscape 3x2'),
+      '4:3': util.out('Landscape 4x3'),
+      '5:4': util.out('Landscape 5x4'),
+      '16:9': util.out('Landscape 16x9'),
+      '2:3': util.out('Portrait 2x3'),
+      '3:4': util.out('Portrait 3x4'),
+      '4:5': util.out('Portrait 4x5'),
+      '9:16': util.out('Portrait 9x16'),
+      '21:9': util.out('Landscape 21:9'),
+      '9:21': util.out('Landscape 9:21')
+    };
+
+    // Default set
+    const defaultSizes = ['square', 'square_hd', 'landscape_4_3', 'landscape_16_9', 'portrait_4_3', 'portrait_16_9'];
+
+    // Models
+    let models = this.imageModels;
+
+    // Default selections
+    const defaultModelId = this.builder.imageModel || 'fal-ai/flux-1/schnell';
+    const defaultSize = this.builder.imageSize || 'landscape_4_3';
+
+    // Helper: return available sizes for a model
+    function getSizesForModel(modelId) {
+      const model = models.find(m => m.id === modelId);
+      if (!model) return defaultSizes;
+
+      // if sizes explicitly empty array → means no size options
+      if (Array.isArray(model.sizes) && model.sizes.length === 0) {
+        return null;
+      }
+      return model.sizes || defaultSizes;
+    }
 
+    // Elements
+    const modelSelect = modal.querySelector('#inpImageModelSelect');
+    const sizeSelect = modal.querySelector('#inpImageSizeSelect');
+    const sizeContainer = sizeSelect.closest('.div-size-container') || sizeSelect; // wrap div if you have one
+    const outputFormatField = modal.querySelector('#inpImageOutputFormat'); // hidden input
+
+    // Populate model select
+    models.forEach(m => {
+      const option = document.createElement('option');
+      option.value = m.id;
+      option.textContent = m.label;
+      modelSelect.appendChild(option);
+    });
+
+    // Populate sizes when model changes
+    const renderSizes = (modelId, keepSelected = true) => {
+      const model = models.find(m => m.id === modelId);
+      const prevValue = sizeSelect.value;
+      sizeSelect.innerHTML = ''; // clear
+
+      const sizes = getSizesForModel(modelId);
+      // Handle size visibility
+      if (!sizes) {
+        sizeContainer.style.display = 'none';
+      } else {
+        sizeContainer.style.display = 'flex';
+        sizes.forEach(s => {
+          const option = document.createElement('option');
+          option.value = s;
+          option.textContent = sizeDefs[s] || s;
+          sizeSelect.appendChild(option);
+        });
+
+        // Try to restore previous size selection
+        if (keepSelected && sizes.includes(prevValue)) {
+          sizeSelect.value = prevValue;
+        } else if (sizes.includes(defaultSize)) {
+          sizeSelect.value = defaultSize;
+        } else {
+          sizeSelect.value = sizes[0];
+        }
+      }
+
+      // Handle output_format if present
+      if (outputFormatField && model) {
+        outputFormatField.value = model.output_format || '';
+      }
+    };
+    modelSelect.addEventListener('change', e => {
+      renderSizes(e.target.value);
+    });
+
+    // Trigger initial render with defaults
+    modelSelect.value = defaultModelId;
+    renderSizes(defaultModelId, false);
+  }
   resetConfig() {
     const tempSlider = this.modalConfig.querySelector('.temperature-slider');
     const valTemp = this.modalConfig.querySelector('.val-temp');
@@ -94718,7 +94986,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
         if (!this.dom.getSelected()) {
           let inputFocused = document.activeElement.tagName.toLowerCase() === 'input';
-          let insideEditable = this.doc.activeElement && this.doc.activeElement.closest('[contenteditable]');
+
+          // let insideEditable = this.doc.activeElement && this.doc.activeElement.closest('[contenteditable]');
+          let insideEditable = target.closest('[contenteditable]');
 
           // if(!document.querySelector('.is-modal.active')) { // Additional (to prevent lost focus)
           let openedModal = document.querySelector('.is-modal.active:not(.is-modal-content)');
@@ -98045,16 +98315,56 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   }
 
   async generateImage_Fal(prompt, callback) {
+    const modal = this.dictation.modalConfig;
+
+    // Construct inputs: model, prompt, size, output format
+    const inpImageModelSelect = modal.querySelector('#inpImageModelSelect');
+    const inpImageSizeSelect = modal.querySelector('#inpImageSizeSelect');
+    const outputFormatField = modal.querySelector('#inpImageOutputFormat');
+    const modelId = inpImageModelSelect.value;
+    const modelDef = this.dictation.imageModels.find(m => m.id === modelId) || {};
+
+    // Build options dynamically
+    let options = {};
+
+    // Handle size/aspect_ratio if model has sizes
+    if (modelDef && modelDef.sizes !== undefined) {
+      if (modelDef.sizes !== null && modelDef.sizes.length !== 0) {
+        const sizeParam = modelDef.size_param || 'image_size'; // default
+        const imageSize = inpImageSizeSelect.value;
+        options[sizeParam] = imageSize;
+      }
+      // if sizes = [] => no size options => exclude size.
+    } else {
+      // if sizes not defined, use default set
+      const imageSize = inpImageSizeSelect.value;
+      options['image_size'] = imageSize;
+    }
+
+    // Handle output_format if present
+    const outputFormat = outputFormatField.value;
+    if (outputFormat) {
+      const outputParam = modelDef.output_param || 'output_format'; // default
+      options[outputParam] = outputFormat;
+    }
+    // if output_format not defined, exclude output_format.
+
     this.controller = new AbortController();
     this.signal = this.controller.signal;
-    let model = this.imageModel || 'flux-schnell';
-    let jsonBody = {};
-    jsonBody.model = model;
-    jsonBody.customData = this.customData;
-    jsonBody.endpoint = `https://queue.fal.run/${model}`;
-    jsonBody.payload = {
-      prompt
+    let jsonBody = {
+      model: modelId,
+      customData: this.customData,
+      endpoint: `https://queue.fal.run/${modelId}`,
+      payload: {
+        prompt,
+        ...options
+      }
     };
+
+    // console.log(jsonBody);
+    // this.dictation.finish();
+    // return;
+
     let url = this.generateMediaUrl_Fal;
     let headers = {
       ...this.headers,
@@ -98079,9 +98389,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       endpoint = endpoint.replace('{MODEL}', firstTwoParts);
       return endpoint;
     };
-    const statusEndpoint = getStatusEndpoint(model, requestId);
+    const statusEndpoint = getStatusEndpoint(modelId, requestId);
     let inputCheckStatus = {
-      model,
+      model: modelId,
       endpoint: statusEndpoint,
       request_id: requestId
       // customData: this.customData