diff --git a/src/rollup-project/build/bundle.cjs b/src/rollup-project/build/bundle.cjs index 4567ef5..5675f10 100644 --- a/src/rollup-project/build/bundle.cjs +++ b/src/rollup-project/build/bundle.cjs @@ -113,7 +113,15 @@ const resultsContainer = () => { lexiconResultsContainer.appendChild(lexiconGlobalResult); mainSection.appendChild(lexiconResultsContainer); + + const inputImagesLabel = headline("h3", "Input Images", ["d-none"], "input-images-headline"); + mainSection.appendChild(inputImagesLabel); + const inputImagesContainer = container("div", ["mt-4", "d-none"], "input-images"); + + + + mainSection.appendChild(inputImagesContainer); containerOuter.appendChild(mainSection); @@ -281,6 +289,8 @@ class App { this.text = null; this.screen = 0; + this.IMAGE_SIZE = 1024; // in kb + this.init(); } @@ -383,13 +393,13 @@ class App { for (let i = 0; i 0) img.classList.add(`mx-2`); + img.classList.add('d-inline-block', `mb-2`, `mr-2`); img.style.height = `100px`; img.style.width = `auto`; imgContainer.appendChild(img); } imgContainer.classList.replace('d-none', 'd-block'); + document.getElementById("input-images-headline").classList.replace('d-none', 'd-block'); } _readImages = async (files) => { @@ -405,10 +415,17 @@ class App { }); }; for (let i = 0; i < files.length; i++) { - if (files[i].type.includes('image')) { - res.push(getBase64(files[i])); + console.log (`size size: ${Math.round(files[i].size/1024)}`); + if (files[i].size/1024 < this.IMAGE_SIZE) { + // if (files[i].size) + if (files[i].type.includes('image')) { + res.push(getBase64(files[i])); + } else { + err.push(files[i].name); + } } else { - err.push (files[i].name); + // handler + console.error (`size bigger than ${this.IMAGE_SIZE}`); } } diff --git a/src/rollup-project/build/bundle.css b/src/rollup-project/build/bundle.css index 446f2d6..72b8e24 100644 --- a/src/rollup-project/build/bundle.css +++ b/src/rollup-project/build/bundle.css @@ -11,4 +11,8 @@ html { background-color: var(--main-bg-color); font-family: monospace; +} + +.mr-2 { + margin-right: .5rem!important; } \ No newline at end of file diff --git a/src/rollup-project/build/bundle.min.css b/src/rollup-project/build/bundle.min.css index 446f2d6..72b8e24 100644 --- a/src/rollup-project/build/bundle.min.css +++ b/src/rollup-project/build/bundle.min.css @@ -11,4 +11,8 @@ html { background-color: var(--main-bg-color); font-family: monospace; +} + +.mr-2 { + margin-right: .5rem!important; } \ No newline at end of file diff --git a/src/rollup-project/build/bundle.min.js b/src/rollup-project/build/bundle.min.js index 4746577..68c884e 100644 --- a/src/rollup-project/build/bundle.min.js +++ b/src/rollup-project/build/bundle.min.js @@ -1 +1 @@ -var version=function(){"use strict";const e=(e=[],t=null,o=[],l=null)=>{const i=document.createElement("div");if(null!==t){const e=n("h3",t,["d-inline"]);i.appendChild(e)}const a=document.createElement("p");for(let e of o)a.classList.add(e);return null!==l&&(a.id=l),i.appendChild(a),i},n=(e="h3",n,t=[],o=null)=>{const l=document.createElement(e);for(let e of t)l.classList.add(e);return null!==o&&(l.id=o),l.textContent=n,l},t=(e="div",n=[],t=null)=>{const o=document.createElement(e);for(let e of n)o.classList.add(e);return null!==t&&(o.id=t),o},o=(e="text",n=null,t=[],o=null,l=null,i=null)=>{const a=document.createElement("input");a.type=e,null!==n&&(a.value=n);for(let e of t)a.classList.add(e);return null!==o&&(a.id=o),null!==l&&(a.checked=l),null!==i&&(a.name=i),a},l=(e,n=[],t=null,o=null)=>{const l=document.createElement("button");null!==t&&(l.type=t),null!==o&&(l.id=o);for(let e of n)l.classList.add(e);return l.textContent=e,l},i=["ar","bn","bs","bg","zh","hr","cs","da","nl","en","et","fi","fr","de","el","gu","he","hi","hu","ga","id","it","ja","ko","lv","lt","ms","ml","mt","ne","nb","pl","pt","ro","ru","si","sk","sl","es","sv","ta","te","th","tr","uk","ur","vi","cy"],a=(e,n,t=[])=>{const o=document.createElement("label");o.setAttribute("for",e),o.textContent=n;for(let e of t)o.classList.add(e);return o},d=()=>t("div",["my-5"]);class s{constructor(){this.images={imageRandomPlacement:!0,hasImages:!1,blobs:[],amount:0,loading:!1,randomPlacement:!1},this.text=null,this.screen=0,this.init()}init=()=>{const s=(()=>{const o=t("div",["temp-results","container-fluid","bg-light"],"temp-info"),l=t("div",["row"]),i=t("section",["col-10","offset-1","my-5"]),a=n("h1","Emotional analysis Results",["mb-3"]);i.appendChild(a);const d=e("","Text:",["d-inline"],"temp-res-text");i.appendChild(d);const s=e("","Sentences:",["d-inline"],"temp-res-sentences");i.appendChild(s);const c=e("","Classification results:",["d-inline"],"temp-res-classification");i.appendChild(c);const m=t("div",["mt-4"]),r=n("h3","Lexicon results"),p=t("div",[],"temp-res-lexicon-lines"),h=e("",null,[],"temp-res-lexicon-global");m.appendChild(r),m.appendChild(p),m.appendChild(h),i.appendChild(m);const u=t("div",["mt-4","d-none"],"input-images");return i.appendChild(u),o.appendChild(i),o.appendChild(l),o})(),c=(()=>{const e=t("aside",["container-fluid"]),n=t("div",["row"]),s=t("section",["input-form-outer","col-10","offset-1","mt-5"]),c=document.createElement("form");c.id="input-form",c.classList.add("input-form-inner");const m=document.createElement("fieldset"),r=t("div",["form-group","row","mb-2"]),p=document.createElement("textarea");p.id="formControlTextarea",p.classList.add("form-control","col-sm-10"),p.required=!0,p.rows=6;const h=a(p.id,"Input Text",["col-sm-2","col-form-label-sm"]);r.appendChild(h),r.appendChild(p),m.appendChild(r);const u=t("div",["form-group","row","mb-2"]),g=document.createElement("select");g.id="formControlLang",g.classList.add("form-control","form-control-lg");const f=a(g.id,"Language");for(let e of i){const n=document.createElement("option");n.textContent=e,n.value=e,n.selected="en"===e,g.appendChild(n)}u.appendChild(f),u.appendChild(g),m.appendChild(u),m.appendChild(d());const C=t("div",["form-check","form-check-inline","mb-2"],"lineDivisionField"),b=o("checkbox","1",["form-check-input"],"lineDivisionCheck",!0),x=a(b.id,"Automatic line division",["form-check-label"]);b.addEventListener("change",(e=>{const n=document.getElementById("textDelimiterField");e.target.checked&&null!==n?n.classList.add("d-none"):n.classList.remove("d-none")}));const y=t("div",["form-group","row","mb-2","d-none"],"textDelimiterField"),v=o("text","¶",["form-control","form-control-lg"],"formControlTextDelimiter"),I=a(v.id,"Text Line delimiter");C.appendChild(x),C.appendChild(b),m.appendChild(C),y.appendChild(I),y.appendChild(v),m.appendChild(y),m.appendChild(d());const E=t("div",["form-group","row","mb-2"]),L=o("file",null,["form-control-file"],"formControlImages","files[]");L.accept="image/jpeg, image/png, image/jpg",L.multiple=!0;const k=a(L.id,"Images");E.appendChild(k),E.appendChild(L),m.appendChild(E);const $=t("div",["form-check","form-check-inline","mb-2","d-none"],"imagePlacementField"),w=o("checkbox","1",["form-check-input"],"imagePlacementCheck",!0),B=a(w.id,"Image Random Placement",["form-check-label"]);$.appendChild(B),$.appendChild(w),m.appendChild($),w.addEventListener("change",(e=>{const n=document.getElementById("imageAnchorField");e.target.checked&&null!==n?n.classList.add("d-none"):n.classList.remove("d-none")}));const R=t("div",["form-group","row","mb-2","d-none"],"imageAnchorField"),P=o("text",null,["form-control","form-control-lg"],"formControlImagePlaceholderDelimiter",!1),A=a(P.id,"Image Placement Anchor");R.appendChild(A),R.appendChild(P),m.appendChild(R),m.appendChild(d());const D=t("div",["col-auto"]),T=l("Submit",["btn","btn-primary","mb-2"],"submit"),_=l("Reset",["btn","btn-secondary","mx-3","mb-2"],"reset");D.appendChild(T),D.appendChild(_),m.appendChild(D),c.appendChild(m),s.appendChild(c);const F=l("New Analysis",["btn","d-none","btn-secondary"],null,"btReload");return F.disabled=!0,F.onclick=()=>{window.location.reload()},s.appendChild(F),e.appendChild(s),e.appendChild(n),e})();document.body.appendChild(s),document.body.appendChild(c),c.addEventListener("submit",this.get),document.getElementById("formControlImages").addEventListener("change",this._uploadImages)};get=async e=>{e.preventDefault();let n=encodeURIComponent(document.getElementById("formControlTextarea").value);const t=document.getElementById("lineDivisionCheck").checked,o=encodeURIComponent(document.getElementById("formControlLang").value);let l,i="text";if(t||(l=encodeURIComponent(document.getElementById("formControlTextDelimiter").value),i=`lines/${l}`),this.images.hasImages&&!this.images.randomPlacement&&!t){let e=encodeURIComponent(document.getElementById("formControlImagePlaceholderDelimiter").value);if(this.images.nAnchorPoints=[...n.matchAll(new RegExp(e,"g"))].length,n=n.replaceAll(e,`${l}${e}${l}`),this.images.nAnchorPoints!==app.images.amount){const e=app.images.nAnchorPoints>app.images.amount?"higher":"smaller";console.error({message:`the amount of image anchor points is ${e} than the amount of upload images. (anchors:${app.images.nAnchorPoints} / images:${app.images.amount})`})}}fetch(`/${i}/${o}/${n}`).then((e=>e.json())).then((e=>{this._displayResults(e)})).catch((e=>{console.error("Error:",e),console.error({message:`error on fetch. ${e}`})}))};_displayResults=async e=>{e.success||console.log(e.err),document.getElementById("temp-res-text").textContent=`${e.text} (${e.lang})`,document.getElementById("temp-res-sentences").textContent=`${e.sentences.flat()} (${e.sentences.flat().length})`,document.getElementById("temp-res-classification").textContent=`${e.classification.emotions.data.predominant.emotion} (${e.classification.emotions.data.predominant.weight})`;const n=document.getElementById("temp-res-lexicon-lines");n.innerHTML="";for(let t in e.lexicon.sentences){const o=e.lexicon.sentences[t],l=document.createElement("span");l.innerHTML=`[${t}] ${o.text} (${o.emotions.data.predominant.emotion}, ${o.emotions.data.predominant.weight})
`,n.appendChild(l)}document.getElementById("temp-res-lexicon-global").innerHTML=`global lexicon: ${e.lexicon.global[0][0]} (${e.lexicon.global[0][1]})`,document.getElementById("temp-info").classList.replace("d-none","d-block"),document.querySelector("#input-form fieldset").disabled=!0,document.getElementById("btReload").enable=!0;const t=document.getElementById("btReload");t.disabled=!1,t.classList.replace("d-none","d-block")};_uploadImages=async e=>{this.images.blobs=[],this.images.hasImages=!0,this.images.loading=!0,this.images.amount=e.target.files.length,this.images.blobs=await this._readImages(e.target.files).catch((e=>{console.error(`not possible to load the image ${e}`)})),this.images.loading=!1,this._displayImages(this.images.blobs)};_displayImages=e=>{const n=document.getElementById("input-images");n.innerHTML="";for(let t=0;t0&&o.classList.add("mx-2"),o.style.height="100px",o.style.width="auto",n.appendChild(o)}n.classList.replace("d-none","d-block")};_readImages=async e=>{const n=[];let t=[];const o=e=>{const n=new FileReader;return new Promise((t=>{n.onload=e=>{t(e.target.result)},n.readAsDataURL(e)}))};for(let l=0;l0&&console.error({message:`error loading the following image(s): ${t.flat()}`}),await Promise.all(n)}}return window.onload=()=>{new s},s}(); +var version=function(){"use strict";const e=(e=[],t=null,o=[],l=null)=>{const i=document.createElement("div");if(null!==t){const e=n("h3",t,["d-inline"]);i.appendChild(e)}const s=document.createElement("p");for(let e of o)s.classList.add(e);return null!==l&&(s.id=l),i.appendChild(s),i},n=(e="h3",n,t=[],o=null)=>{const l=document.createElement(e);for(let e of t)l.classList.add(e);return null!==o&&(l.id=o),l.textContent=n,l},t=(e="div",n=[],t=null)=>{const o=document.createElement(e);for(let e of n)o.classList.add(e);return null!==t&&(o.id=t),o},o=(e="text",n=null,t=[],o=null,l=null,i=null)=>{const s=document.createElement("input");s.type=e,null!==n&&(s.value=n);for(let e of t)s.classList.add(e);return null!==o&&(s.id=o),null!==l&&(s.checked=l),null!==i&&(s.name=i),s},l=(e,n=[],t=null,o=null)=>{const l=document.createElement("button");null!==t&&(l.type=t),null!==o&&(l.id=o);for(let e of n)l.classList.add(e);return l.textContent=e,l},i=["ar","bn","bs","bg","zh","hr","cs","da","nl","en","et","fi","fr","de","el","gu","he","hi","hu","ga","id","it","ja","ko","lv","lt","ms","ml","mt","ne","nb","pl","pt","ro","ru","si","sk","sl","es","sv","ta","te","th","tr","uk","ur","vi","cy"],s=(e,n,t=[])=>{const o=document.createElement("label");o.setAttribute("for",e),o.textContent=n;for(let e of t)o.classList.add(e);return o},a=()=>t("div",["my-5"]);class d{constructor(){this.images={imageRandomPlacement:!0,hasImages:!1,blobs:[],amount:0,loading:!1,randomPlacement:!1},this.text=null,this.screen=0,this.IMAGE_SIZE=1024,this.init()}init=()=>{const d=(()=>{const o=t("div",["temp-results","container-fluid","bg-light"],"temp-info"),l=t("div",["row"]),i=t("section",["col-10","offset-1","my-5"]),s=n("h1","Emotional analysis Results",["mb-3"]);i.appendChild(s);const a=e("","Text:",["d-inline"],"temp-res-text");i.appendChild(a);const d=e("","Sentences:",["d-inline"],"temp-res-sentences");i.appendChild(d);const c=e("","Classification results:",["d-inline"],"temp-res-classification");i.appendChild(c);const m=t("div",["mt-4"]),r=n("h3","Lexicon results"),p=t("div",[],"temp-res-lexicon-lines"),h=e("",null,[],"temp-res-lexicon-global");m.appendChild(r),m.appendChild(p),m.appendChild(h),i.appendChild(m);const u=n("h3","Input Images",["d-none"],"input-images-headline");i.appendChild(u);const g=t("div",["mt-4","d-none"],"input-images");return i.appendChild(g),o.appendChild(i),o.appendChild(l),o})(),c=(()=>{const e=t("aside",["container-fluid"]),n=t("div",["row"]),d=t("section",["input-form-outer","col-10","offset-1","mt-5"]),c=document.createElement("form");c.id="input-form",c.classList.add("input-form-inner");const m=document.createElement("fieldset"),r=t("div",["form-group","row","mb-2"]),p=document.createElement("textarea");p.id="formControlTextarea",p.classList.add("form-control","col-sm-10"),p.required=!0,p.rows=6;const h=s(p.id,"Input Text",["col-sm-2","col-form-label-sm"]);r.appendChild(h),r.appendChild(p),m.appendChild(r);const u=t("div",["form-group","row","mb-2"]),g=document.createElement("select");g.id="formControlLang",g.classList.add("form-control","form-control-lg");const f=s(g.id,"Language");for(let e of i){const n=document.createElement("option");n.textContent=e,n.value=e,n.selected="en"===e,g.appendChild(n)}u.appendChild(f),u.appendChild(g),m.appendChild(u),m.appendChild(a());const C=t("div",["form-check","form-check-inline","mb-2"],"lineDivisionField"),b=o("checkbox","1",["form-check-input"],"lineDivisionCheck",!0),I=s(b.id,"Automatic line division",["form-check-label"]);b.addEventListener("change",(e=>{const n=document.getElementById("textDelimiterField");e.target.checked&&null!==n?n.classList.add("d-none"):n.classList.remove("d-none")}));const E=t("div",["form-group","row","mb-2","d-none"],"textDelimiterField"),y=o("text","¶",["form-control","form-control-lg"],"formControlTextDelimiter"),x=s(y.id,"Text Line delimiter");C.appendChild(I),C.appendChild(b),m.appendChild(C),E.appendChild(x),E.appendChild(y),m.appendChild(E),m.appendChild(a());const v=t("div",["form-group","row","mb-2"]),L=o("file",null,["form-control-file"],"formControlImages","files[]");L.accept="image/jpeg, image/png, image/jpg",L.multiple=!0;const $=s(L.id,"Images");v.appendChild($),v.appendChild(L),m.appendChild(v);const k=t("div",["form-check","form-check-inline","mb-2","d-none"],"imagePlacementField"),w=o("checkbox","1",["form-check-input"],"imagePlacementCheck",!0),B=s(w.id,"Image Random Placement",["form-check-label"]);k.appendChild(B),k.appendChild(w),m.appendChild(k),w.addEventListener("change",(e=>{const n=document.getElementById("imageAnchorField");e.target.checked&&null!==n?n.classList.add("d-none"):n.classList.remove("d-none")}));const A=t("div",["form-group","row","mb-2","d-none"],"imageAnchorField"),R=o("text",null,["form-control","form-control-lg"],"formControlImagePlaceholderDelimiter",!1),P=s(R.id,"Image Placement Anchor");A.appendChild(P),A.appendChild(R),m.appendChild(A),m.appendChild(a());const D=t("div",["col-auto"]),T=l("Submit",["btn","btn-primary","mb-2"],"submit"),_=l("Reset",["btn","btn-secondary","mx-3","mb-2"],"reset");D.appendChild(T),D.appendChild(_),m.appendChild(D),c.appendChild(m),d.appendChild(c);const M=l("New Analysis",["btn","d-none","btn-secondary"],null,"btReload");return M.disabled=!0,M.onclick=()=>{window.location.reload()},d.appendChild(M),e.appendChild(d),e.appendChild(n),e})();document.body.appendChild(d),document.body.appendChild(c),c.addEventListener("submit",this.get),document.getElementById("formControlImages").addEventListener("change",this._uploadImages)};get=async e=>{e.preventDefault();let n=encodeURIComponent(document.getElementById("formControlTextarea").value);const t=document.getElementById("lineDivisionCheck").checked,o=encodeURIComponent(document.getElementById("formControlLang").value);let l,i="text";if(t||(l=encodeURIComponent(document.getElementById("formControlTextDelimiter").value),i=`lines/${l}`),this.images.hasImages&&!this.images.randomPlacement&&!t){let e=encodeURIComponent(document.getElementById("formControlImagePlaceholderDelimiter").value);if(this.images.nAnchorPoints=[...n.matchAll(new RegExp(e,"g"))].length,n=n.replaceAll(e,`${l}${e}${l}`),this.images.nAnchorPoints!==app.images.amount){const e=app.images.nAnchorPoints>app.images.amount?"higher":"smaller";console.error({message:`the amount of image anchor points is ${e} than the amount of upload images. (anchors:${app.images.nAnchorPoints} / images:${app.images.amount})`})}}fetch(`/${i}/${o}/${n}`).then((e=>e.json())).then((e=>{this._displayResults(e)})).catch((e=>{console.error("Error:",e),console.error({message:`error on fetch. ${e}`})}))};_displayResults=async e=>{e.success||console.log(e.err),document.getElementById("temp-res-text").textContent=`${e.text} (${e.lang})`,document.getElementById("temp-res-sentences").textContent=`${e.sentences.flat()} (${e.sentences.flat().length})`,document.getElementById("temp-res-classification").textContent=`${e.classification.emotions.data.predominant.emotion} (${e.classification.emotions.data.predominant.weight})`;const n=document.getElementById("temp-res-lexicon-lines");n.innerHTML="";for(let t in e.lexicon.sentences){const o=e.lexicon.sentences[t],l=document.createElement("span");l.innerHTML=`[${t}] ${o.text} (${o.emotions.data.predominant.emotion}, ${o.emotions.data.predominant.weight})
`,n.appendChild(l)}document.getElementById("temp-res-lexicon-global").innerHTML=`global lexicon: ${e.lexicon.global[0][0]} (${e.lexicon.global[0][1]})`,document.getElementById("temp-info").classList.replace("d-none","d-block"),document.querySelector("#input-form fieldset").disabled=!0,document.getElementById("btReload").enable=!0;const t=document.getElementById("btReload");t.disabled=!1,t.classList.replace("d-none","d-block")};_uploadImages=async e=>{this.images.blobs=[],this.images.hasImages=!0,this.images.loading=!0,this.images.amount=e.target.files.length,this.images.blobs=await this._readImages(e.target.files).catch((e=>{console.error(`not possible to load the image ${e}`)})),this.images.loading=!1,this._displayImages(this.images.blobs)};_displayImages=e=>{const n=document.getElementById("input-images");n.innerHTML="";for(let t=0;t{const n=[];let t=[];const o=e=>{const n=new FileReader;return new Promise((t=>{n.onload=e=>{t(e.target.result)},n.readAsDataURL(e)}))};for(let l=0;l0&&console.error({message:`error loading the following image(s): ${t.flat()}`}),await Promise.all(n)}}return window.onload=()=>{new d},d}(); diff --git a/src/rollup-project/input.js b/src/rollup-project/input.js index e22513c..b0fb5e9 100644 --- a/src/rollup-project/input.js +++ b/src/rollup-project/input.js @@ -36,7 +36,15 @@ export const resultsContainer = () => { lexiconResultsContainer.appendChild(lexiconGlobalResult); mainSection.appendChild(lexiconResultsContainer); + + const inputImagesLabel = headline("h3", "Input Images", ["d-none"], "input-images-headline"); + mainSection.appendChild(inputImagesLabel); + const inputImagesContainer = container("div", ["mt-4", "d-none"], "input-images"); + + + + mainSection.appendChild(inputImagesContainer); containerOuter.appendChild(mainSection); diff --git a/src/rollup-project/main.css b/src/rollup-project/main.css index 696d20f..93a7ab3 100644 --- a/src/rollup-project/main.css +++ b/src/rollup-project/main.css @@ -5,4 +5,8 @@ html { background-color: var(--main-bg-color); font-family: monospace; +} + +.mr-2 { + margin-right: .5rem!important; } \ No newline at end of file diff --git a/src/rollup-project/main.js b/src/rollup-project/main.js index ed4412f..139ae50 100644 --- a/src/rollup-project/main.js +++ b/src/rollup-project/main.js @@ -19,6 +19,8 @@ export default class App { this.text = null; this.screen = 0; + this.IMAGE_SIZE = 1024; // in kb + this.init(); } @@ -121,13 +123,13 @@ export default class App { for (let i = 0; i 0) img.classList.add(`mx-2`); + img.classList.add('d-inline-block', `mb-2`, `mr-2`); img.style.height = `100px`; img.style.width = `auto`; imgContainer.appendChild(img); } imgContainer.classList.replace('d-none', 'd-block'); + document.getElementById("input-images-headline").classList.replace('d-none', 'd-block'); } _readImages = async (files) => { @@ -143,10 +145,17 @@ export default class App { }); }; for (let i = 0; i < files.length; i++) { - if (files[i].type.includes('image')) { - res.push(getBase64(files[i])); + console.log (`size size: ${Math.round(files[i].size/1024)}`) + if (files[i].size/1024 < this.IMAGE_SIZE) { + // if (files[i].size) + if (files[i].type.includes('image')) { + res.push(getBase64(files[i])); + } else { + err.push(files[i].name); + } } else { - err.push (files[i].name); + // handler + console.error (`size bigger than ${this.IMAGE_SIZE}`); } }