@innovastudio/contentbuilder 1.4.93 → 1.4.95

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.93",
+  "version": "1.4.95",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -2077,7 +2077,7 @@ button:focus-visible {
 .is-ui .is-modal.imageadjust2,
 .is-ui .is-modal.audioselect,
 .is-ui .is-modal.mediasource {
-  z-index: 10005 !important;
+  z-index: 10006 !important;
 }
 #_cbhtml .is-modal.previewcontent,
 .is-ui .is-modal.previewcontent {

package/public/contentbuilder/contentbuilder.esm.js

@@ -15886,10 +15886,6 @@ const prepareSvgIcons = builder => {
                 <path d="M4 12h4"></path>
                 <path d="M4 18h4"></path>
             </symbol>
-            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
-            </symbol>
             <symbol id="icon-folder-media" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
@@ -15958,6 +15954,23 @@ const prepareSvgIcons = builder => {
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                 <path d="M20.2 20.2l1.8 1.8"></path>
             </symbol>
+
+            <symbol id="icon-folder-old" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
+            </symbol>
+            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M20.2 20.2l1.8 1.8"></path>
+            </symbol>
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M20.2 20.2l1.8 1.8"></path>
+            </symbol>
             
             </defs>
         </svg>`;
@@ -49551,6 +49564,7 @@ class Image$1 {
                         <input title="${util.out('Change Image')}" data-title="${util.out('Change Image')}" id="fileEmbedImage" type="file" accept="image/*" style="position:absolute;top:-20px;left:0;width:40px;height:60px;opacity: 0;cursor: pointer;"/>
                     </div>
                     <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-link"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#fff"><use xlink:href="#icon-folder2"></use></svg></button> 
                     <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-android-create"></use></svg></button>
                 </div>
                 <div id="divImageProgress">
@@ -50067,6 +50081,35 @@ class Image$1 {
         util.hideModal(modalImageLink);
         this.builder.elmTool.refresh();
       });
+      const btnOpenAsset = imageTool.querySelector('.open-asset');
+      if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect) {
+        btnOpenAsset.style.display = 'block';
+        dom.addEventListener(btnOpenAsset, 'click', () => {
+          this.builder.openImageSelect(src => {
+            this.builder.uo.saveForUndo();
+            let img = this.builder.activeImage;
+            img.setAttribute('src', src);
+            setTimeout(() => {
+              img.click();
+              let divImageResizer = document.querySelector('#divImageResizer');
+              if (divImageResizer) divImageResizer.click();
+              setTimeout(() => {
+                img.click();
+                let divImageResizer = document.querySelector('#divImageResizer');
+                if (divImageResizer) divImageResizer.click();
+              }, 600);
+            }, 10);
+
+            //Trigger Change event
+            this.builder.opts.onChange();
+
+            //Trigger Render event
+            this.builder.opts.onRender();
+          });
+        });
+      } else {
+        btnOpenAsset.style.display = 'none';
+      }
 
       // Select image (opens Asset Manager plugin or custom dialog)
       let divImageSrc = modalImageLink.querySelector('.image-src');
@@ -77984,7 +78027,7 @@ class Dictation {
       let htmlList = '';
       const commandInfo = this.builder.commandInfo;
       let bImageGeneration = false;
-      if (this.builder.generateImageUrl && this.builder.uploadBase64Url) {
+      if (this.builder.textToImageUrl) {
         bImageGeneration = true;
       }
       for (const key in commandInfo) {
@@ -78122,7 +78165,7 @@ class Dictation {
     const btnScopeOthers = this.modalCommand.querySelector('.scope-others');
     const btnScopeImage = this.modalCommand.querySelector('.scope-image');
     btnScopeBlock.disabled = true;
-    if (this.builder.generateImageUrl) btnScopeImage.style.display = ''; // show generate image button
+    if (this.builder.textToImageUrl) btnScopeImage.style.display = ''; // show generate image button
 
     const assistModeBtns = modalCommand.querySelectorAll('.div-assistant-mode button');
     assistModeBtns.forEach(btn => {
@@ -80895,6 +80938,35 @@ class ContentBuilder {
     return this.targetAssetType; // not used yet
   }
 
+  openImageSelect(callback) {
+    const inpUrl = document.createElement('input');
+
+    // dummy button (for the openAsset() method, for the old Asset Manager. Not needed for the new.)
+    const btn = document.createElement('button');
+    this.openAsset(inpUrl, 'image', btn);
+    let out = s => this.util.out(s);
+    const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+    Object.defineProperty(inpUrl, 'value', {
+      get: desc.get,
+      set: function (s) {
+        // Additional protection if normal selectAsset() is not used in asset dialog.
+        // This is used if onImageSelectClick or onFileSelectClick are used.
+        const filename = s.substring(s.lastIndexOf('/') + 1);
+        let extension = filename.split('.').pop();
+        extension = extension.toLowerCase();
+        let ok = false;
+        if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
+          ok = true;
+        } else {
+          alert(out('Please select an image file.'));
+        }
+        if (ok) {
+          if (callback) callback(s);
+        }
+        desc.set.call(this, s);
+      }
+    });
+  }
   renderSelectAsset(btn, targetAssetType, callback) {
     const _id = 'inp_' + this.util.makeId();
     btn.insertAdjacentHTML('afterend', `<input type="hidden" id="${_id}">`);
@@ -81864,17 +81936,36 @@ class ContentBuilder {
       }
     }
   }
-  async generateImage(prompt, num, callback) {
-    if (!(this.generateImageUrl && this.uploadBase64Url)) return;
+  async generateImage(prompt, callback) {
     this.controller = new AbortController(); // Create a new AbortController
     this.signal = this.controller.signal; // Get a new signal object
 
+    let model = 'realistic-vision-v3';
+    let negative_prompt = '';
+    if (model.includes('realistic-vision')) {
+      if (negative_prompt === '') negative_prompt = '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 width = 1024;
+    let height = 1024;
+    let steps = 25;
+    let guidance = 7.5;
+    let scheduler = 'dpmsolver++';
+    let output_format = 'jpeg';
     const messages = {
-      prompt,
-      num
+      model: 'realistic-vision-v3',
+      prompt: prompt,
+      negative_prompt: negative_prompt,
+      width: width,
+      height: height,
+      steps: steps,
+      guidance: guidance,
+      scheduler: scheduler,
+      output_format: output_format,
+      folder_path: ''
     };
     try {
-      const response = await fetch(this.generateImageUrl, {
+      let url = this.textToImageUrl;
+      const response = await fetch(url, {
         signal: this.signal,
         // Abort
         method: 'POST',
@@ -81888,41 +81979,8 @@ class ContentBuilder {
         console.log('Error:\n' + result.error);
         return;
       }
-      const filename = result.filename;
-      let images = [];
-      const base64 = result.data;
-      const src = `data:image/jpeg;base64,${base64}`;
-      var newWidth = 1024;
-      var newHeight = 1024;
-      var img = new Image();
-      img.src = src;
-      img.onload = () => {
-        var canvas = document.createElement('canvas');
-        canvas.width = newWidth;
-        canvas.height = newHeight;
-        var ctx = canvas.getContext('2d');
-        ctx.drawImage(img, 0, 0, newWidth, newHeight);
-        var resizedBase64 = canvas.toDataURL('image/jpeg');
-        let image = resizedBase64;
-        image = image.replace(/^data:image\/(png|jpeg);base64,/, '');
-        const reqBody = {
-          image: image,
-          filename: filename
-        };
-        fetch(this.uploadBase64Url, {
-          method: 'POST',
-          body: JSON.stringify(reqBody),
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        }).then(response => response.json()).then(response => {
-          if (!response.error) {
-            const uploadedImageUrl = response.url;
-            images.push(uploadedImageUrl);
-            callback(images);
-          }
-        });
-      };
+      const imageUrl = result.url;
+      callback([imageUrl]);
     } catch (error) {
       if (error.name === 'AbortError') ; else {
         // CORS or code errors goes here
@@ -81934,8 +81992,11 @@ class ContentBuilder {
     }
   }
 
-  /*
-  async generateImage(prompt, num, callback) {
+  /* OpenAI
+  // Requires:
+  // generateImageUrl: '/generateimage',
+  // uploadBase64Url:'/uploadbase64',
+   async generateImage(prompt, num, callback) {
        if(!(this.generateImageUrl && this.uploadBase64Url)) return;
        this.controller = new AbortController(); // Create a new AbortController
       this.signal = this.controller.signal; // Get a new signal object