@innovastudio/contentbox 1.6.130 → 1.6.131

package/index.d.ts

@@ -107,8 +107,6 @@ interface ContentBoxOptions {
     mediaSelectMaxWidth?: string;
     otherSelectMaxWidth?: string;
 
-    assetPanelFullScreen?: boolean;
-
     codeEditorWidth?: string;
     codeEditorHeight?: string;
     codeEditorMaxWidth?: string;
@@ -262,23 +260,6 @@ interface ContentBoxOptions {
     sendCommandUrl?: string;
     hideImageGeneration?: boolean;
 
-    listFilesUrl?: string;
-    listFoldersUrl?: string;
-    deleteFilesUrl?: string;
-    moveFilesUrl?: string;
-    createFolderUrl?: string;
-    uploadFilesUrl?: string;
-    renameFileUrl?: string;
-
-    getMmodelsUrl?: string;
-    textToImageUrl?: string;
-    upscaleImageUrl?: string;
-    controlNetUrl?: string;
-    saveTextUrl?: string;
-    viewUrl?: string;
-    viewFileUrl?: string;
-
-    imageModel?: string;
     imageNegativePrompt?: string;
 
     imageSteps?: number;
@@ -319,6 +300,24 @@ interface ContentBoxOptions {
     commandInfoCanvasMode?: any[]; 
     onStartRequest?: () => void;
 
+    imageModel?: string;
+    defaultImageGenerationProvider?: string;
+
+    //-- Asset Manager
+    listFilesUrl?: string;
+    listFoldersUrl?: string;
+    deleteFilesUrl?: string;
+    moveFilesUrl?: string;
+    createFolderUrl?: string;
+    uploadFilesUrl?: string;
+    renameFileUrl?: string;
+    getMmodelsUrl?: string;
+    textToImageUrl?: string;
+    upscaleImageUrl?: string;
+    controlNetUrl?: string;
+    saveTextUrl?: string;
+    viewUrl?: string;
+    viewFileUrl?: string;
     assetFolderTree?: boolean;
     assetFilesOnly?: boolean;
     assetPanelReverse?: boolean;
@@ -328,6 +327,8 @@ interface ContentBoxOptions {
     assetLocale?: string;
     assetDateShortOptions?: any[]; 
     assetDateLongOptions?: any[];
+    assetPanelFullScreen?: boolean;
+    //---
 
     //-- Form Builder
     defaultTextGenerationProvider?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.130",
+  "version": "1.6.131",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.120",
+    "@innovastudio/contentbuilder": "^1.5.124",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.esm.js

@@ -31731,25 +31731,23 @@ class Util$1 {
       if (item.classList.contains('is-row-tool')) return;
       if (item.classList.contains('is-col-tool')) return;
       if (item.classList.contains('is-rowadd-tool')) return;
+      item.style.width = '';
+      item.style.flex = '';
+      // if(item.getAttribute('data-html')) {
+      //     // Don't change width on custom block
+      //     if(!item.style.width) { // But if width is not set, add default 50%
+      //         item.style.width = '50%';
+      //         item.style.flex = '0 0 auto';
+      //     } 
+      //     if(this.getAllColumns(row).length === 1) { // only 1 col in a row
+      //         item.style.width = '';
+      //         item.style.flex = '';
+      //     }
+      // } else {
+      //     item.style.width = '';
+      //     item.style.flex = '';
+      // }
 
-      // item.style.width = '';
-      // item.style.flex = '';
-      if (item.getAttribute('data-html')) {
-        // Don't change width on custom block
-        if (!item.style.width) {
-          // But if width is not set, add default 50%
-          item.style.width = '50%';
-          item.style.flex = '0 0 auto';
-        }
-        if (this.getAllColumns(row).length === 1) {
-          // only 1 col in a row
-          item.style.width = '';
-          item.style.flex = '';
-        }
-      } else {
-        item.style.width = '';
-        item.style.flex = '';
-      }
       if (item.classList.contains('sm-hidden')) {
         smHidden = true;
       }
@@ -124457,11 +124455,151 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
     return closestRatio;
   }
+  async waitingResultFal(jsonBody, requestId) {
+    jsonBody.request_id = requestId;
+    const getResultEndpoint = (model, requestId) => {
+      let endpoint = `https://queue.fal.run/${model}/requests/${requestId}`;
+      let firstTwoParts = model.split('/').slice(0, 2).join('/');
+      endpoint = endpoint.replace('{MODEL}', firstTwoParts);
+      return endpoint;
+    };
+    const resultEndpoint = getResultEndpoint(jsonBody.model, requestId);
+    jsonBody.endpoint = resultEndpoint;
+    let url = this.getResultUrl_Fal;
+    let headers = {
+      ...this.headers,
+      ...this.defaultHeaders
+    };
+    const response = await fetch(url, {
+      signal: this.signal,
+      method: 'POST',
+      headers,
+      body: JSON.stringify(jsonBody)
+    });
+    // const result = await response.json();
+    let text = await response.text(); // Read response as text first
+    let result;
+    try {
+      result = JSON.parse(text); // Attempt to parse JSON
+    } catch (e) {
+      // console.log(text);
+      return;
+    }
+    if (!result.error) {
+      const data = result.data;
+      let output = [];
+      let output2 = [];
+      data.entries && data.entries.forEach(item => {
+        output.push(item.url);
+        output2.push(item.file_url);
+      });
+      return {
+        mediaGenerated: true,
+        status: 'success',
+        output,
+        output2
+      };
+    } else {
+      return {
+        mediaGenerated: false,
+        status: 'error',
+        message: result.error //this.out('Request failed.')
+      };
+    }
+  }
+
+  async generateImage_Fal(prompt, callback) {
+    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 url = this.generateMediaUrl_Fal;
+    let headers = {
+      ...this.headers,
+      ...this.defaultHeaders
+    };
+    const response = await fetch(url, {
+      signal: this.signal,
+      method: 'POST',
+      headers,
+      body: JSON.stringify(jsonBody)
+    });
+    const result = await response.json();
+    if (result.error) {
+      // console.log(result.error);
+      this.dictation.finish();
+    }
+    let requestId = result.request_id;
+    const getStatusEndpoint = (model, requestId) => {
+      let endpoint = `https://queue.fal.run/${model}/requests/${requestId}`;
+      let firstTwoParts = model.split('/').slice(0, 2).join('/');
+      endpoint = endpoint.replace('{MODEL}', firstTwoParts);
+      return endpoint;
+    };
+    const statusEndpoint = getStatusEndpoint(model, requestId);
+    let inputCheckStatus = {
+      model,
+      endpoint: statusEndpoint,
+      request_id: requestId
+      // customData: this.customData
+    };
+
+    let status;
+    do {
+      const response = await fetch(this.checkRequestStatusUrl_Fal, {
+        signal: this.signal,
+        method: 'POST',
+        headers,
+        body: JSON.stringify(inputCheckStatus)
+      });
+      const result = await response.json();
+      if (result.ok && result.status) {
+        // From endpoint that uses SDK
+        status = result.status;
+      } else if (result.data) {
+        // From endpoint that uses API
+        let data = result.data;
+        if (data.image || data.audio || data.audio_file || data.video) {
+          status = 'COMPLETED';
+        } else if (data.detail && typeof data.detail === 'string' && data.detail.startsWith('Request is still in progress')) {
+          //Request is still in progress
+          status = 'IN_PROGRESS';
+        } else if (data.status && !data.error) {
+          status = data.status;
+        }
+      }
+      if (!status) {
+        // const message = result.error || (result.data && JSON.stringify(result.data)) || this.out('Request failed.');
+        // console.log(message);
+        return;
+      }
+      if (status !== 'COMPLETED') {
+        await new Promise(resolve => setTimeout(resolve, 5000)); // Wait before retrying
+      }
+    } while (status !== 'COMPLETED');
+    if (status === 'COMPLETED') {
+      const mediaResult = await this.waitingResultFal(jsonBody, requestId);
+      if (mediaResult.output && mediaResult.output.length === 1) {
+        let imageUrl = mediaResult.output[0];
+        callback(imageUrl);
+      }
+    }
+  }
   async generateImage(prompt, callback) {
+    if (this.defaultImageGenerationProvider === 'fal') {
+      this.generateImage_Fal(prompt, callback);
+      return;
+    }
     this.controller = new AbortController(); // Create a new AbortController
     this.signal = this.controller.signal; // Get a new signal object
 
-    let model = this.imageModel || 'realistic-vision-v3';
+    let model = this.imageModel || 'flux-schnell'; //realistic-vision-v3
     let negative_prompt = this.imageNegativePrompt || 'duplicate, (deformed iris, deformed pupils, semi-realistic, cgi, 3d, render, sketch, cartoon, drawing, anime:1.4), text, close up, cropped, out of frame, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck, bad_prompt_version2, bad-hands-5, badhandv4, bad anatomy, deformed, mutated, amputated, missing finger, extra finger, fused fingers, missing leg, extra leg, fused legs, missing digit, extra digit, fused digits, missing hand, extra hand, fused hands, missing arm, extra arm, fused arms, missing limb, extra limb, fused limbs, fused bodies, merged bodies, extra bodies, dual bodies, extra navel, elongated body, missing joint, extra joint, fused joints, deformed hip, twisted limbs, twisted legs, twisted arms, missing head, extra head, double head, twins, missing ear, extra ear, deformed ear, black and white, monochrome, multiple views, blurry, text, signature, head out of frame, paintings, sketches, (worst quality:2), (low quality:2), (normal quality:2), lowres, grayscale, glans, bad hands, error, extra digit, fewer digits, cropped, jpeg artifacts, watermark, username, bad feet, poorly drawn hands, poorly drawn face, mutation, too many fingers, long neck, long body, long arms, cross-eyed, mutated hands, polar lowres, bad body, bad proportions, gross proportions, cropped head , bad eyes, extra breast, missing breast, fused breasts, unnatural proportions, necklace';
     let steps = this.imageSteps || 25;
     let guidance = this.imageGuidance || 7.5;
@@ -160564,6 +160702,10 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       imageGuidance: this.settings.imageGuidance,
       imageScheduler: this.settings.imageScheduler,
       imageAutoUpscale: this.settings.imageAutoUpscale,
+      defaultImageGenerationProvider: this.settings.defaultImageGenerationProvider,
+      generateMediaUrl_Fal: this.settings.generateMediaUrl_Fal,
+      checkRequestStatusUrl_Fal: this.settings.checkRequestStatusUrl_Fal,
+      getResultUrl_Fal: this.settings.getResultUrl_Fal,
       assetPanelReverse: this.settings.assetPanelReverse,
       assetFilesOnly: this.settings.assetFilesOnly,
       assetRefreshButton: this.settings.assetRefreshButton,