@innovastudio/contentbuilder 1.4.90 → 1.4.92
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -5553,13 +5553,13 @@ class Util {
|
|
5553
5553
|
localStorage.removeItem('_dictation');
|
5554
5554
|
localStorage.removeItem('_mic');
|
5555
5555
|
localStorage.removeItem('_autosendcommand');
|
5556
|
-
localStorage.removeItem('_sampleshown');
|
5557
5556
|
localStorage.removeItem('_disclaimershown');
|
5558
5557
|
localStorage.removeItem('_temp');
|
5559
5558
|
localStorage.removeItem('_top_p');
|
5560
5559
|
localStorage.removeItem('_autosend_delay');
|
5561
5560
|
localStorage.removeItem('_auto_editblock');
|
5562
5561
|
localStorage.removeItem('_command_lang');
|
5562
|
+
localStorage.removeItem('_ai_panel_open');
|
5563
5563
|
|
5564
5564
|
//NOT USED
|
5565
5565
|
localStorage.removeItem('_scrollableeditor');
|
@@ -5570,6 +5570,7 @@ class Util {
|
|
5570
5570
|
localStorage.removeItem('_advancedhtmleditor');
|
5571
5571
|
localStorage.removeItem('_hidecolhtmleditor');
|
5572
5572
|
localStorage.removeItem('_hiderowhtmleditor');
|
5573
|
+
localStorage.removeItem('_sampleshown');
|
5573
5574
|
}
|
5574
5575
|
|
5575
5576
|
// source: http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div */
|
@@ -77744,6 +77745,7 @@ class Dictation {
|
|
77744
77745
|
<button class="scope-section on" title="${util.out('General')}" data-value="general" style="margin-right:5px">${util.out('General')}</button>
|
77745
77746
|
<button class="scope-others" title="${util.out('Ask Questions')}" data-value="others">${util.out('Ask Questions')}</button>
|
77746
77747
|
<button class="scope-block" title="${util.out('Edit Selected Block')}" data-value="block" style="">${util.out('Edit Selected Block')}</button>
|
77748
|
+
<button class="scope-image" title="${util.out('Image')}" data-value="image" style="display:none;margin-right:5px">${util.out('Image')}</button>
|
77747
77749
|
</div>
|
77748
77750
|
</div>
|
77749
77751
|
<textarea class="inp-command"></textarea>
|
@@ -77875,15 +77877,12 @@ class Dictation {
|
|
77875
77877
|
info += '</ul>';
|
77876
77878
|
divInfo.innerHTML = info;
|
77877
77879
|
const inpCommand = this.builderStuff.querySelector('.inp-command');
|
77878
|
-
if (localStorage.getItem('_sampleshown') === null) {
|
77879
|
-
inpCommand.setAttribute('placeholder', this.builder.commandPlaceholderText);
|
77880
|
-
localStorage.setItem('_sampleshown', true);
|
77881
|
-
}
|
77882
77880
|
this.builder.commandText = '';
|
77883
77881
|
this.builder.autoSendCommand = false;
|
77884
77882
|
if (localStorage.getItem('_dictation') !== null) {
|
77885
77883
|
if (localStorage.getItem('_dictation') === '1') {
|
77886
77884
|
this.modalCommand.classList.add('active');
|
77885
|
+
this.doOpen();
|
77887
77886
|
if (localStorage.getItem('_mic') !== null) {
|
77888
77887
|
if (localStorage.getItem('_mic') === '1') {
|
77889
77888
|
this.startDictation();
|
@@ -77984,28 +77983,34 @@ class Dictation {
|
|
77984
77983
|
btnCommandList.addEventListener('click', () => {
|
77985
77984
|
let htmlList = '';
|
77986
77985
|
const commandInfo = this.builder.commandInfo;
|
77986
|
+
let bImageGeneration = false;
|
77987
|
+
if (this.builder.generateImageUrl && this.builder.uploadBase64Url) {
|
77988
|
+
bImageGeneration = true;
|
77989
|
+
}
|
77987
77990
|
for (const key in commandInfo) {
|
77988
77991
|
if (Object.prototype.hasOwnProperty.call(commandInfo, key)) {
|
77989
|
-
|
77990
|
-
|
77991
|
-
|
77992
|
-
|
77993
|
-
|
77994
|
-
|
77995
|
-
|
77996
|
-
if (
|
77997
|
-
|
77998
|
-
|
77992
|
+
if (key !== 'image' || key === 'image' && bImageGeneration) {
|
77993
|
+
const {
|
77994
|
+
title,
|
77995
|
+
description,
|
77996
|
+
list,
|
77997
|
+
width
|
77998
|
+
} = commandInfo[key];
|
77999
|
+
if (!this.builder.enableShortCommands) {
|
78000
|
+
if (description) {
|
78001
|
+
htmlList += `<h2>${title}</h2>`;
|
78002
|
+
htmlList += `<p>${description}</p>`;
|
78003
|
+
} else {
|
78004
|
+
htmlList += `<h2 style="margin-bottom:30px">${title}</h2>`;
|
78005
|
+
}
|
78006
|
+
for (const item of list) {
|
78007
|
+
if (width) htmlList += `<div role="button" tabindex="0" class="command-item" style="width:${width}">${item}</div>`;else htmlList += `<div role="button" tabindex="0" class="command-item">${item}</div>`;
|
78008
|
+
}
|
77999
78009
|
} else {
|
78000
|
-
htmlList += `<h2
|
78001
|
-
|
78002
|
-
|
78003
|
-
|
78004
|
-
}
|
78005
|
-
} else {
|
78006
|
-
htmlList += `<h2>${title}</h2>`;
|
78007
|
-
for (const item of list) {
|
78008
|
-
if (width) htmlList += `<div role="button" tabindex="0" class="command-item" style="width:${width}">${item}</div>`;else htmlList += `<div role="button" tabindex="0" class="command-item">${item}</div>`;
|
78010
|
+
htmlList += `<h2>${title}</h2>`;
|
78011
|
+
for (const item of list) {
|
78012
|
+
if (width) htmlList += `<div role="button" tabindex="0" class="command-item" style="width:${width}">${item}</div>`;else htmlList += `<div role="button" tabindex="0" class="command-item">${item}</div>`;
|
78013
|
+
}
|
78009
78014
|
}
|
78010
78015
|
}
|
78011
78016
|
}
|
@@ -78115,7 +78120,10 @@ class Dictation {
|
|
78115
78120
|
const btnScopeSection = this.modalCommand.querySelector('.scope-section');
|
78116
78121
|
const btnScopeBlock = this.modalCommand.querySelector('.scope-block');
|
78117
78122
|
const btnScopeOthers = this.modalCommand.querySelector('.scope-others');
|
78123
|
+
const btnScopeImage = this.modalCommand.querySelector('.scope-image');
|
78118
78124
|
btnScopeBlock.disabled = true;
|
78125
|
+
if (this.builder.generateImageUrl) btnScopeImage.style.display = ''; // show generate image button
|
78126
|
+
|
78119
78127
|
const assistModeBtns = modalCommand.querySelectorAll('.div-assistant-mode button');
|
78120
78128
|
assistModeBtns.forEach(btn => {
|
78121
78129
|
btn.addEventListener('click', () => {
|
@@ -78124,7 +78132,21 @@ class Dictation {
|
|
78124
78132
|
});
|
78125
78133
|
btn.classList.add('on');
|
78126
78134
|
const val = btn.getAttribute('data-value');
|
78127
|
-
this.builder.assistantMode = val; // general, block, others
|
78135
|
+
this.builder.assistantMode = val; // general, block, others, image
|
78136
|
+
|
78137
|
+
if (this.builder.hidePlaceholder) {
|
78138
|
+
inpCommand.setAttribute('placeholder', '');
|
78139
|
+
} else {
|
78140
|
+
if (val === 'general') {
|
78141
|
+
inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.general || '');
|
78142
|
+
} else if (val === 'block') {
|
78143
|
+
inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.edit_block || '');
|
78144
|
+
} else if (val === 'others') {
|
78145
|
+
inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.ask_questions || '');
|
78146
|
+
} else if (val === 'image') {
|
78147
|
+
inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.generate_image || '');
|
78148
|
+
}
|
78149
|
+
}
|
78128
78150
|
|
78129
78151
|
/*
|
78130
78152
|
// ContentBox
|
@@ -78155,17 +78177,20 @@ class Dictation {
|
|
78155
78177
|
btnScopeBlock.classList.add('on');
|
78156
78178
|
btnScopeSection.classList.remove('on');
|
78157
78179
|
btnScopeOthers.classList.remove('on');
|
78180
|
+
btnScopeImage.classList.remove('on');
|
78158
78181
|
}
|
78159
78182
|
btnScopeBlock.removeAttribute('disabled');
|
78160
78183
|
} else {
|
78161
78184
|
btnScopeBlock.disabled = true;
|
78162
78185
|
if (btnScopeOthers.classList.contains('on')) return;
|
78186
|
+
if (btnScopeImage.classList.contains('on')) return;
|
78163
78187
|
|
78164
78188
|
// change
|
78165
78189
|
this.builder.assistantMode = 'general';
|
78166
78190
|
btnScopeSection.classList.add('on');
|
78167
78191
|
btnScopeBlock.classList.remove('on');
|
78168
78192
|
btnScopeOthers.classList.remove('on');
|
78193
|
+
btnScopeImage.classList.remove('on');
|
78169
78194
|
}
|
78170
78195
|
};
|
78171
78196
|
this.initialStart = false; // for Safari
|
@@ -78240,7 +78265,32 @@ class Dictation {
|
|
78240
78265
|
return true;
|
78241
78266
|
}
|
78242
78267
|
}
|
78268
|
+
doOpen() {
|
78269
|
+
this.builder.hidePlaceholder = false;
|
78270
|
+
const numeOfOpenToHidePlaceholderText = 4;
|
78271
|
+
if (localStorage.getItem('_ai_panel_open') === null) {
|
78272
|
+
localStorage.setItem('_ai_panel_open', 1);
|
78273
|
+
} else {
|
78274
|
+
let count = parseInt(localStorage.getItem('_ai_panel_open'));
|
78275
|
+
if (count < numeOfOpenToHidePlaceholderText) {
|
78276
|
+
count++;
|
78277
|
+
localStorage.setItem('_ai_panel_open', count);
|
78278
|
+
}
|
78279
|
+
}
|
78280
|
+
const inpCommand = this.builderStuff.querySelector('.inp-command');
|
78281
|
+
if (localStorage.getItem('_ai_panel_open') === `${numeOfOpenToHidePlaceholderText}`) {
|
78282
|
+
this.builder.hidePlaceholder = true;
|
78283
|
+
inpCommand.setAttribute('placeholder', '');
|
78284
|
+
} else {
|
78285
|
+
if (!this.builder.commandPlaceholders) {
|
78286
|
+
this.builder.commandPlaceholders = {};
|
78287
|
+
this.builder.commandPlaceholders.general = '';
|
78288
|
+
}
|
78289
|
+
inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.general || '');
|
78290
|
+
}
|
78291
|
+
}
|
78243
78292
|
openDictation() {
|
78293
|
+
this.doOpen();
|
78244
78294
|
const inpCommand = this.modalCommand.querySelector('.inp-command');
|
78245
78295
|
if (this.modalCommand.classList.contains('active')) {
|
78246
78296
|
setTimeout(() => {
|
@@ -79324,7 +79374,6 @@ class ContentBuilder {
|
|
79324
79374
|
onlineDemo: false,
|
79325
79375
|
autoSendDelay: 4000,
|
79326
79376
|
autoEditBlock: false,
|
79327
|
-
commandPlaceholderText: '',
|
79328
79377
|
enableShortCommands: true,
|
79329
79378
|
speechRecognitionLang: 'en-US',
|
79330
79379
|
assistantMode: 'general',
|
@@ -81817,64 +81866,80 @@ class ContentBuilder {
|
|
81817
81866
|
}
|
81818
81867
|
async generateImage(prompt, num, callback) {
|
81819
81868
|
if (!(this.generateImageUrl && this.uploadBase64Url)) return;
|
81869
|
+
this.controller = new AbortController(); // Create a new AbortController
|
81870
|
+
this.signal = this.controller.signal; // Get a new signal object
|
81871
|
+
|
81820
81872
|
const messages = {
|
81821
81873
|
prompt,
|
81822
81874
|
num
|
81823
81875
|
};
|
81824
|
-
|
81825
|
-
|
81826
|
-
|
81827
|
-
|
81828
|
-
|
81829
|
-
|
81830
|
-
|
81831
|
-
|
81832
|
-
|
81833
|
-
|
81834
|
-
|
81835
|
-
|
81836
|
-
|
81837
|
-
|
81838
|
-
|
81839
|
-
|
81840
|
-
|
81841
|
-
const
|
81842
|
-
const
|
81843
|
-
|
81844
|
-
|
81845
|
-
|
81846
|
-
|
81847
|
-
|
81848
|
-
var
|
81849
|
-
|
81850
|
-
|
81851
|
-
|
81852
|
-
|
81853
|
-
|
81854
|
-
|
81855
|
-
|
81856
|
-
|
81857
|
-
image
|
81858
|
-
|
81859
|
-
|
81860
|
-
|
81861
|
-
|
81862
|
-
|
81863
|
-
|
81864
|
-
|
81865
|
-
|
81866
|
-
|
81867
|
-
|
81868
|
-
const uploadedImageUrl = response.url;
|
81869
|
-
images.push(uploadedImageUrl);
|
81870
|
-
if (images.length === numOfImages) {
|
81871
|
-
callback(images);
|
81876
|
+
try {
|
81877
|
+
const response = await fetch(this.generateImageUrl, {
|
81878
|
+
signal: this.signal,
|
81879
|
+
// Abort
|
81880
|
+
method: 'POST',
|
81881
|
+
headers: {
|
81882
|
+
'Content-Type': 'application/json'
|
81883
|
+
},
|
81884
|
+
body: JSON.stringify(messages)
|
81885
|
+
});
|
81886
|
+
const result = await response.json();
|
81887
|
+
if (result.error) {
|
81888
|
+
console.log('Error:\n' + result.error);
|
81889
|
+
return;
|
81890
|
+
}
|
81891
|
+
const filename = result.filename;
|
81892
|
+
let images = [];
|
81893
|
+
const numOfImages = result.data.data.length;
|
81894
|
+
const imageList = result.data.data;
|
81895
|
+
imageList.forEach(item => {
|
81896
|
+
const base64 = item.b64_json;
|
81897
|
+
const src = `data:image/jpeg;base64,${base64}`;
|
81898
|
+
var newWidth = 1024;
|
81899
|
+
var newHeight = 1024;
|
81900
|
+
var img = new Image();
|
81901
|
+
img.src = src;
|
81902
|
+
img.onload = () => {
|
81903
|
+
var canvas = document.createElement('canvas');
|
81904
|
+
canvas.width = newWidth;
|
81905
|
+
canvas.height = newHeight;
|
81906
|
+
var ctx = canvas.getContext('2d');
|
81907
|
+
ctx.drawImage(img, 0, 0, newWidth, newHeight);
|
81908
|
+
var resizedBase64 = canvas.toDataURL('image/jpeg');
|
81909
|
+
let image = resizedBase64;
|
81910
|
+
image = image.replace(/^data:image\/(png|jpeg);base64,/, '');
|
81911
|
+
const reqBody = {
|
81912
|
+
image: image,
|
81913
|
+
filename: filename
|
81914
|
+
};
|
81915
|
+
fetch(this.uploadBase64Url, {
|
81916
|
+
method: 'POST',
|
81917
|
+
body: JSON.stringify(reqBody),
|
81918
|
+
headers: {
|
81919
|
+
'Content-Type': 'application/json'
|
81872
81920
|
}
|
81873
|
-
}
|
81874
|
-
|
81875
|
-
|
81876
|
-
|
81921
|
+
}).then(response => response.json()).then(response => {
|
81922
|
+
if (!response.error) {
|
81923
|
+
const uploadedImageUrl = response.url;
|
81924
|
+
images.push(uploadedImageUrl);
|
81925
|
+
if (images.length === numOfImages) {
|
81926
|
+
callback(images);
|
81927
|
+
}
|
81928
|
+
}
|
81929
|
+
});
|
81930
|
+
};
|
81931
|
+
});
|
81932
|
+
} catch (error) {
|
81933
|
+
if (error.name === 'AbortError') ; else {
|
81934
|
+
// CORS or code errors goes here
|
81935
|
+
console.error('Error:', error);
|
81936
|
+
// console.log('Error:\n'+error);
|
81937
|
+
|
81938
|
+
this.dictation.finish(); // Must be called after finished
|
81939
|
+
}
|
81940
|
+
}
|
81877
81941
|
}
|
81942
|
+
|
81878
81943
|
lightboxOpen(col) {
|
81879
81944
|
// Open Lightbox
|
81880
81945
|
if (this.useLightbox) {
|