Upload folder using huggingface_hub

static/javascript/rag_http.js

@@ -121,6 +121,7 @@ const HfRequest = {
       throw error;
     }
   },
+
   cancelRequest() {
     if (this.controller) {
       this.isCancelled = true;
@@ -164,3 +165,4 @@ function errorToText(err) {
     return s;
   }
 }
+

static/javascript/rag_rqs.js

@@ -19,7 +19,7 @@
  */
 
 "use strict";
-const VERS = "0.1.48 (26-08-2024)";
+const VERS = "0.1.49 (27-08-2024)";
 
 var xlog = console.log;
 var xerror = console.error;
@@ -69,14 +69,28 @@ const hideSpinner = () => {
 var tm;
 
 function openApp() {
-  tm = umgm();
-  wnds.init();
-  Menu.init();
-  TextInput.init();
-  TextOutput.init();
-  Rag.init();
-  document.querySelector(".menu-btn").checked = false;
-  release();
+  setTimeout(() => {
+    tm = umgm();
+    wnds.init();
+    Menu.init();
+    TextInput.init();
+    TextOutput.init();
+    Rag.init();
+    document.querySelector(".menu-btn").checked = false;
+    release();
+    showHistory();
+  }, 10);
+}
+
+// Visualizza la storia della conversazione
+function showHistory() {
+  const txt = ThreadMgr.getThread();
+  setOutText(txt);
+  // const p = document.querySelector("#id-text-out .pre-text");
+  // p.textContent = txt;
+  // setTimeout(() => {
+  //   p.scrollTop = p.scrollHeight;
+  // }, 0);
 }
 
 function release() {
@@ -120,7 +134,7 @@ function elencoRisposte(e) {
       // x = subResponseDOcTag(x);
       return `\n[${i + 1}]\n ${x.trim()}`;
     })
-    .join("\n");  
+    .join("\n");
   wnds.wpre.show(text);
 }
 
@@ -155,7 +169,7 @@ function elencoDocs() {
   DataMgr.readDbDocs();
   DataMgr.readDbDocNames();
   const arr = DataMgr.doc_names;
-  const fh = (x,i) => `
+  const fh = (x, i) => `
       <li><a href="#" onCLick="showT(${i});">${i + 1}.${x}</a></li>
   `;
   const jfh = UaJtfh();
@@ -194,7 +208,6 @@ function calcQuery() {
   wnds.wpre.show(s);
 }
 
-
 //cancella dati
 function deleteDati(e) {
   const ok = confirm("Confermi cancellazione dati?");
@@ -252,4 +265,3 @@ function showPrompts(e) {
     .join("\n");
   wnds.wpre.show(text);
 }
-

static/javascript/rag_ui.js

@@ -174,6 +174,27 @@ const Menu = {
   },
 };
 
+const setOutText = (txt) => {
+  const p = document.querySelector("#id-text-out .pre-text");
+  p.textContent = txt;
+  p.scrollTop = p.scrollHeight;
+};
+
+// const setOutText2 = async (txt) => {
+  // const t = p.textContent;
+  // if (t.trim().length < 2) {
+  //   p.textContent = txt;
+  //   p.scrollTop = p.scrollHeight;
+  //   return;
+  // }
+  // for (let i = 0; i < txt.length; i++) {
+  //   p.textContent += txt[i];
+  //   p.scrollTop = p.scrollHeight;
+  //   await new Promise((resolve) => setTimeout(resolve, 2));
+  // }
+// };
+
+
 const TextInput = {
   wnd: null,
   init() {
@@ -276,7 +297,9 @@ const TextInput = {
       return;
     }
     showSpinner();
-    if (ThreadMgr.isFirst()) setOutText("");
+    if (ThreadMgr.isFirst()) {
+      setOutText("");
+    }
     const query = this.inp.value.trim();
     try {
       let text = await Rag.requestContext(query);
@@ -304,14 +327,6 @@ const TextInput = {
   },
 };
 
-const setOutText = (txt) => {
-  let out = document.getElementById("id-text-out");
-  const h = `<pre class="pre-text"></pre>`;
-  out.innerHTML = h;
-  const pre = out.querySelector(".pre-text");
-  pre.textContent = txt;
-  pre.scrollTop = pre.scrollHeight;
-};
 
 TextOutput = {
   init() {
@@ -323,15 +338,14 @@ TextOutput = {
     wndBtn.addEventListener("click", () => this.openWnd());
   },
   openWnd() {
-    const p = document.getElementById("id-text-out");
+    const p = document.querySelector("#id-text-out .pre-text");
     const s = p.textContent;
     wnds.wout.show(s);
   },
   async copy() {
-    const e = document.getElementById("id-text-out");
-    const pre = e.querySelector("pre");
-    if (!pre) return;
+    const pre = document.querySelector("#id-text-out .pre-text");
     const t = pre.textContent;
+    if (t.trim().length < 2) return;
     pre.classList.add("copied");
     this.copyBtn.classList.add("copied");
     try {
@@ -345,7 +359,7 @@ TextOutput = {
     }, 5000);
   },
   clear() {
-    const out = document.getElementById("id-text-out");
+    const out = document.querySelector("#id-text-out .pre-text");
     out.textContent = "";
   },
 };

static/js/ragrqs.min.js

@@ -176,10 +176,10 @@ RESPONSE:
 `}function getPayloadDoc(a){return{inputs:a,parameters:{task:"text2text-generation",max_new_tokens:1024,num_return_sequences:1,temperature:.2,top_p:.85,top_k:30,do_sample:!1,no_repeat_ngram_size:4,num_beams:4,repetition_penalty:1.4,return_full_text:!1,details:!1,max_time:90,seed:42},options:{use_cache:!1,wait_for_model:!0}}}
 function getPayloadBuildContext(a){return{inputs:a,parameters:{task:"text2text-generation",max_new_tokens:6E3,num_return_sequences:1,temperature:.2,top_p:.85,top_k:30,do_sample:!1,no_repeat_ngram_size:4,num_beams:4,repetition_penalty:1.2,return_full_text:!1,details:!1,max_time:180,seed:42},options:{use_cache:!1,wait_for_model:!0}}}
 function getPayloadWithContext(a){return{inputs:a,parameters:{task:"text2text-generation",max_new_tokens:2048,num_return_sequences:1,temperature:.3,top_p:.85,top_k:30,do_sample:!1,no_repeat_ngram_size:4,num_beams:5,repetition_penalty:1.4,return_full_text:!1,details:!1,max_time:120,seed:42},options:{use_cache:!1,wait_for_model:!0}}}
-function getPayloadThread(a){return{inputs:a,parameters:{task:"text2text-generation",max_new_tokens:2048,num_return_sequences:1,temperature:.3,top_p:.85,top_k:30,do_sample:!1,no_repeat_ngram_size:4,num_beams:5,repetition_penalty:1.4,return_full_text:!1,details:!1,max_time:120,seed:42},options:{use_cache:!1,wait_for_model:!0}}};const VERS="0.1.48 (26-08-2024)";var xlog=console.log,xerror=console.error;const cancelRequest=()=>{confirm("Confermi Cancellazione Richeista ?")&&(HfRequest.cancelRequest(),hideSpinner())},showSpinner=()=>{const a=document.getElementById("spinner");a.classList.add("show-spinner");a.addEventListener("click",cancelRequest)},hideSpinner=()=>{const a=document.getElementById("spinner");a.classList.remove("show-spinner");a.removeEventListener("click",cancelRequest)};var tm;
-function openApp(){tm=umgm();wnds.init();Menu.init();TextInput.init();TextOutput.init();Rag.init();document.querySelector(".menu-btn").checked=!1;release()}function release(){document.querySelector(".release").innerHTML=VERS}const op0=async function(a){a=await requestGet("./help1.html");wnds.wdiv.show(a)};function showQuery(a){wnds.wpre.show(`\n${Rag.ragQuery}`)}function showRagResponse(a){wnds.wpre.show(`\n${Rag.ragAnswer}`)}function showThread(a){a=ThreadMgr.getThread();wnds.wpre.show(a)}
-function elencoRisposte(a){a=[...Rag.answers];0==a.length&&(a=UaDb.readArray(ID_RESPONSES));0!=a.length&&(a=a.map((b,c)=>`\n[${c+1}]\n ${b.trim()}`).join("\n"),wnds.wpre.show(a))}function showContesto(a){wnds.wpre.show(`${Rag.ragContext}`)}function elencoDati(a){var b=UaDb.getAllIds();a=[];for(var c of b)b=UaDb.read(c).length,a.push(`${c} (${b})`);c=a.join("\n ");wnds.wpre.show(c)}const showT=a=>{wnds.wpre.show(DataMgr.docs[a])};
-function elencoDocs(){DataMgr.readDbDocs();DataMgr.readDbDocNames();var a=DataMgr.doc_names,b=UaJtfh();let c=0;b.append("<ul>");for(const g of a){a=b;var d=a.append,e=g,f=c++;d.call(a,`
+function getPayloadThread(a){return{inputs:a,parameters:{task:"text2text-generation",max_new_tokens:2048,num_return_sequences:1,temperature:.3,top_p:.85,top_k:30,do_sample:!1,no_repeat_ngram_size:4,num_beams:5,repetition_penalty:1.4,return_full_text:!1,details:!1,max_time:120,seed:42},options:{use_cache:!1,wait_for_model:!0}}};const VERS="0.1.49 (27-08-2024)";var xlog=console.log,xerror=console.error;const cancelRequest=()=>{confirm("Confermi Cancellazione Richeista ?")&&(HfRequest.cancelRequest(),hideSpinner())},showSpinner=()=>{const a=document.getElementById("spinner");a.classList.add("show-spinner");a.addEventListener("click",cancelRequest)},hideSpinner=()=>{const a=document.getElementById("spinner");a.classList.remove("show-spinner");a.removeEventListener("click",cancelRequest)};var tm;
+function openApp(){setTimeout(()=>{tm=umgm();wnds.init();Menu.init();TextInput.init();TextOutput.init();Rag.init();document.querySelector(".menu-btn").checked=!1;release();showHistory()},10)}function showHistory(){const a=ThreadMgr.getThread();setOutText(a)}function release(){document.querySelector(".release").innerHTML=VERS}const op0=async function(a){a=await requestGet("./help1.html");wnds.wdiv.show(a)};function showQuery(a){wnds.wpre.show(`\n${Rag.ragQuery}`)}
+function showRagResponse(a){wnds.wpre.show(`\n${Rag.ragAnswer}`)}function showThread(a){a=ThreadMgr.getThread();wnds.wpre.show(a)}function elencoRisposte(a){a=[...Rag.answers];0==a.length&&(a=UaDb.readArray(ID_RESPONSES));0!=a.length&&(a=a.map((b,c)=>`\n[${c+1}]\n ${b.trim()}`).join("\n"),wnds.wpre.show(a))}function showContesto(a){wnds.wpre.show(`${Rag.ragContext}`)}
+function elencoDati(a){var b=UaDb.getAllIds();a=[];for(var c of b)b=UaDb.read(c).length,a.push(`${c} (${b})`);c=a.join("\n ");wnds.wpre.show(c)}const showT=a=>{wnds.wpre.show(DataMgr.docs[a])};function elencoDocs(){DataMgr.readDbDocs();DataMgr.readDbDocNames();var a=DataMgr.doc_names,b=UaJtfh();let c=0;b.append("<ul>");for(const g of a){a=b;var d=a.append,e=g,f=c++;d.call(a,`
       <li><a href="#" onCLick="showT(${f});">${f+1}.${e}</a></li>
   `)}b.append("</ul>");b=b.html();wnds.wdiv.show(`<br><br>${b}`)}function calcQuery(){DataMgr.readDbDocs();DataMgr.readDbDocNames();var a=[];let b=0,c=0;a.push("Documento   Num.Parti");a.push("==================");for(const d of DataMgr.docs){const e=DataMgr.doc_names[c];c+=1;const f=Math.ceil(d.length/MAX_PROMPT_LENGTH);b+=f;a.push(`${e}&nbsp;&nbsp;&nbsp;[${f}]`)}a.push("==================");a.push(`Totale num. Parti: ${b}`);a=a.join("\n");wnds.wpre.show(a)}
 function deleteDati(a){confirm("Confermi cancellazione dati?")&&(DataMgr.deleteJsonDati(),wnds.wdiv.close(),wnds.wpre.close(),TextOutput.clear())}function deleteSttorage(a){confirm("Confermi cancellazione documenti & dati?")&&(DataMgr.deleteJsonDati(),localStorage.clear(),wnds.wdiv.close(),wnds.wpre.close(),TextOutput.clear(),DataMgr.docs=[],DataMgr.doc_names=[])}async function help1(a){a=await requestGet("./data/help_test.html");wnds.wdiv.show(a)}
@@ -209,13 +209,13 @@ function loadTestoEsempio(a){DataMgr.loadDoc(`data/${a}`);wnds.wdiv.close()}asyn
 </div>
     `;this.w.drag();this.w.setZ(12);this.w.vw_vh().setXY(16.5,10,-1);this.w.setHtml(b);this.w.show();this.w.getElement().querySelector(".btn-copy").addEventListener("click",()=>this.copy())},close(){this.w.close()},async copy(){const b=this.w.getElement().querySelector(".div-text").textContent;try{await navigator.clipboard.writeText(b)}catch(c){console.error("Errore  ",c)}}}),wnds={wdiv:null,wpre:null,wout:null,init(){this.wdiv=WndDiv("id_w0");this.wpre=WndPre("id_w1");this.wout=WndPre("id_out")},
 closeAll(){UaWindowAdm.close("id_w0");UaWindowAdm.close("id_w1");UaWindowAdm.close("id_out")}},Menu={init(){const a=document.querySelector("#id-menu-btn");a.addEventListener("change",()=>{document.querySelector("body").classList.toggle("menu-open",a.checked)});const b=document.getElementById("id_log");UaLog.callHide=()=>{b.classList.contains("active")&&b.classList.remove("active")};UaLog.callShow=()=>{b.classList.contains("active")||b.classList.add("active")};UaLog.setXY(54,13).setZ(111).new();UaLog.log_show("")},
-close(){const a=document.querySelector("#menu-toggle");document.querySelector("body").classList.remove("menu-open",a.checked);document.querySelector(".menu-btn").checked=!1},async help(){const a=await requestGet("./help0.html");wnds.wdiv.show(a)},upload(){RagUpload.open()},uploadDir(){RagUpload.openDir()},async load(){alert("load")},log(){UaLog.toggle()}},TextInput={wnd:null,init(){this.inp=document.querySelector(".text-input");document.addEventListener("keydown",a=>{document.activeElement!==this.inp&&
-("F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Control Alt Shift Meta CapsLock Escape PrintScreen ScrollLock Pause Insert Delete Home End PageUp PageDown ArrowLeft ArrowRight ArrowUp ArrowDown".split(" ").includes(a.key)||a.ctrlKey||a.metaKey||a.preventDefault())});document.querySelector(".clear-button").addEventListener("click",()=>{this.inp.value="";this.inp.focus()});this.inp.addEventListener("keydown",a=>this.handleEnter(a));document.querySelector(".send-input").addEventListener("click",()=>this.send());
-document.querySelector(".send2-input").addEventListener("click",()=>this.send2());document.querySelector(".clear-input").addEventListener("click",()=>this.clear())},handleEnter(a){"Enter"===a.key&&!a.shiftKey&&Rag.returnOk()&&(a.preventDefault(),this.send2())},async send(){if(this.inp.value){if(Rag.ragContext&&!confirm("Vuoi iniziare una nuova elabrazione ?"))return"";showSpinner();setOutText("");var a=this.inp.value.trim();try{let b=await Rag.requestDocsRAG(a);b=cleanOut(b);setOutText(b);this.inp.value=
-"";UaLog.close()}catch(b){a=`send\n${b}`,console.error(a),alert(a),setOutText(a)}hideSpinner()}else alert("Ricorda di scrivere la Query  ")},async send2(){if(this.inp.value){showSpinner();ThreadMgr.isFirst()&&setOutText("");var a=this.inp.value.trim();try{let b=await Rag.requestContext(a);if(""==b){hideSpinner();return}b=cleanOut(b);setOutText(b);this.inp.value=""}catch(b){a=`send2\n${b}`,console.error(a),alert(a),setOutText(a)}hideSpinner()}else alert("Ricorda di scrivere la Query  ")},clear(){confirm("Confermi cancellazione conversazione? ")&&
-(this.inp.value="",setOutText(""),ThreadMgr.init())}},setOutText=a=>{var b=document.getElementById("id-text-out");b.innerHTML='<pre class="pre-text"></pre>';b=b.querySelector(".pre-text");b.textContent=a;b.scrollTop=b.scrollHeight};
-TextOutput={init(){this.copyBtn=document.querySelector(".copy-output");this.copyBtn.addEventListener("click",()=>this.copy());document.querySelector(".clear-output").addEventListener("click",()=>this.clear());document.querySelector(".wnd-output").addEventListener("click",()=>this.openWnd())},openWnd(){const a=document.getElementById("id-text-out").textContent;wnds.wout.show(a)},async copy(){const a=document.getElementById("id-text-out").querySelector("pre");if(a){var b=a.textContent;a.classList.add("copied");
-this.copyBtn.classList.add("copied");try{await navigator.clipboard.writeText(b)}catch(c){console.error("Errore  ",c)}setTimeout(()=>{this.copyBtn.classList.remove("copied");a.classList.remove("copied")},5E3)}},clear(){document.getElementById("id-text-out").textContent=""}};const RagUpload={open(){const a=UaWindowAdm.create("id_upload");a.drag();a.setZ(12);a.vw_vh().setXY(16.5,10,-1);a.setHtml('\n      <div class="window-text">\n        <div class="btn-wrapper">\n          <button class="btn-close" title="chiudi" onclick="UaWindowAdm.closeThis(this)">X</button>\n        </div>     \n        <div class="upload">     \n          <h4>Upload file Text / PDF</h4>    \n          <form id="uploadForm">\n              <input class="file" type="file" id="id_fileupload" >   \n              <button type="button" onclick="RagUpload.upload();">Upload and Convert</button>\n          </form>\n          <div id="result" class="result"></div>\n        </div>\n      </div>\n    ');
+close(){const a=document.querySelector("#menu-toggle");document.querySelector("body").classList.remove("menu-open",a.checked);document.querySelector(".menu-btn").checked=!1},async help(){const a=await requestGet("./help0.html");wnds.wdiv.show(a)},upload(){RagUpload.open()},uploadDir(){RagUpload.openDir()},async load(){alert("load")},log(){UaLog.toggle()}},setOutText=a=>{const b=document.querySelector("#id-text-out .pre-text");b.textContent=a;b.scrollTop=b.scrollHeight},TextInput={wnd:null,init(){this.inp=
+document.querySelector(".text-input");document.addEventListener("keydown",a=>{document.activeElement!==this.inp&&("F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Control Alt Shift Meta CapsLock Escape PrintScreen ScrollLock Pause Insert Delete Home End PageUp PageDown ArrowLeft ArrowRight ArrowUp ArrowDown".split(" ").includes(a.key)||a.ctrlKey||a.metaKey||a.preventDefault())});document.querySelector(".clear-button").addEventListener("click",()=>{this.inp.value="";this.inp.focus()});this.inp.addEventListener("keydown",
+a=>this.handleEnter(a));document.querySelector(".send-input").addEventListener("click",()=>this.send());document.querySelector(".send2-input").addEventListener("click",()=>this.send2());document.querySelector(".clear-input").addEventListener("click",()=>this.clear())},handleEnter(a){"Enter"===a.key&&!a.shiftKey&&Rag.returnOk()&&(a.preventDefault(),this.send2())},async send(){if(this.inp.value){if(Rag.ragContext&&!confirm("Vuoi iniziare una nuova elabrazione ?"))return"";showSpinner();setOutText("");
+var a=this.inp.value.trim();try{let b=await Rag.requestDocsRAG(a);b=cleanOut(b);setOutText(b);this.inp.value="";UaLog.close()}catch(b){a=`send\n${b}`,console.error(a),alert(a),setOutText(a)}hideSpinner()}else alert("Ricorda di scrivere la Query  ")},async send2(){if(this.inp.value){showSpinner();ThreadMgr.isFirst()&&setOutText("");var a=this.inp.value.trim();try{let b=await Rag.requestContext(a);if(""==b){hideSpinner();return}b=cleanOut(b);setOutText(b);this.inp.value=""}catch(b){a=`send2\n${b}`,
+console.error(a),alert(a),setOutText(a)}hideSpinner()}else alert("Ricorda di scrivere la Query  ")},clear(){confirm("Confermi cancellazione conversazione? ")&&(this.inp.value="",setOutText(""),ThreadMgr.init())}};
+TextOutput={init(){this.copyBtn=document.querySelector(".copy-output");this.copyBtn.addEventListener("click",()=>this.copy());document.querySelector(".clear-output").addEventListener("click",()=>this.clear());document.querySelector(".wnd-output").addEventListener("click",()=>this.openWnd())},openWnd(){const a=document.querySelector("#id-text-out .pre-text").textContent;wnds.wout.show(a)},async copy(){const a=document.querySelector("#id-text-out .pre-text"),b=a.textContent;if(!(2>b.trim().length)){a.classList.add("copied");
+this.copyBtn.classList.add("copied");try{await navigator.clipboard.writeText(b)}catch(c){console.error("Errore  ",c)}setTimeout(()=>{this.copyBtn.classList.remove("copied");a.classList.remove("copied")},5E3)}},clear(){document.querySelector("#id-text-out .pre-text").textContent=""}};const RagUpload={open(){const a=UaWindowAdm.create("id_upload");a.drag();a.setZ(12);a.vw_vh().setXY(16.5,10,-1);a.setHtml('\n      <div class="window-text">\n        <div class="btn-wrapper">\n          <button class="btn-close" title="chiudi" onclick="UaWindowAdm.closeThis(this)">X</button>\n        </div>     \n        <div class="upload">     \n          <h4>Upload file Text / PDF</h4>    \n          <form id="uploadForm">\n              <input class="file" type="file" id="id_fileupload" >   \n              <button type="button" onclick="RagUpload.upload();">Upload and Convert</button>\n          </form>\n          <div id="result" class="result"></div>\n        </div>\n      </div>\n    ');
 a.show()},async upload(){const a=document.getElementById("id_fileupload").files[0];if(a){var b=a.name;if(DataMgr.doc_names.includes(b))alert("Il file \u00e8 gi\u00e0 in archivio");else{var c=document.getElementById("result"),d=a.name.split(".").pop().toLowerCase();showSpinner();try{let e;if("pdf"===d){const f=new PdfHandler;await f.loadPdfJs();e=await f.extractTextFromPDF(a);f.cleanup()}else if("txt"===d)e=await readTextFile(a);else{alert("Formato file non supportato.");return}DataMgr.addDoc(b,e);
 c.innerHTML=`<br><br> ${b}<br><br>caricato e salvato nella memoria locale`}catch(e){xerror("Error:",e),alert("Errore durante l'estrazione del testo dal file.")}finally{hideSpinner()}}}else alert("Nessun file selezionato.")},openDir(){const a=UaWindowAdm.create("id_upload");a.drag();a.setZ(12);a.vw_vh().setXY(16.5,10,-1);a.setHtml('\n      <div class="window-text">\n        <div class="btn-wrapper">\n          <button class="btn-close" title="chiudi" onclick="UaWindowAdm.closeThis(this)">X</button>\n        </div>     \n        <div class="upload">     \n          <h4>Upload files Text / PDF</h4>    \n          <form id="uploadForm">\n              <input id="id_fileupload" class="file" type="file"  webkitdirectory mozdirectory msdirectory odirectory directory multiple />\n              <button type="button" onclick="RagUpload.uploadDir();">Upload and Convert</button>\n          </form>\n          <div class="result" id="result"></div>\n        </div>\n      </div>\n    ');
 a.show()},async uploadDir(){var a=document.getElementById("id_fileupload").files;if(a&&0!=a.length){var b=[];showSpinner();try{for(const c of a){const d=c.name;UaLog.log_show(d);if(DataMgr.doc_names.includes(d)){UaLog.log_shw(d+" : \u00e8 gi\u00e0 in archivio");continue}const e=c.name.split(".").pop().toLowerCase();let f;if("pdf"===e){const g=new PdfHandler;await g.loadPdfJs();f=await g.extractTextFromPDF(c);g.cleanup()}else if("txt"===e)f=await readTextFile(c);else{alert("Formato file non supportato.");

static/ragrqs.html

@@ -74,6 +74,7 @@
         <div class="output-wrapper">
 
           <div class="text-out" id="id-text-out">
+            <pre class="pre-text"></pre>
           </div>
 
           <div class="output-actions">

static/ragrqs_.html

@@ -85,6 +85,7 @@
         <div class="output-wrapper">
 
           <div class="text-out" id="id-text-out">
+            <pre class="pre-text"></pre>
           </div>
 
           <div class="output-actions">