Merge pull request #47 from baloise/main

Polish

src/static/scripts/demask.js

@@ -1,21 +1,20 @@
 document.getElementById('inputForm').addEventListener('submit', function(event) {
     event.preventDefault(); // Prevent the default form submission
 
-    document.getElementById('loading-spinner').style.display = 'flex';
+    document.getElementById('loading-spinner').style.display = 'flex'; // Show the loading spinner
 
     const inputData = document.getElementById('inputData').value;
     const inputDataEntities = JSON.parse(document.getElementById('responseFieldEntities').value);
 
-    // Use a relative URL for the API endpoint
-    const apiEndpoint = '/api/demask'; // Relative URL
+    const apiEndpoint = '/api/demask'; // Set API endpoint
 
     // Send a POST request to the API
     fetch(apiEndpoint, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ text: inputData, entities: inputDataEntities}), // Send the input text as JSON
+        body: JSON.stringify({ text: inputData, entities: inputDataEntities}),
     })
     .then(response => {
         if (!response.ok) {
@@ -25,10 +24,10 @@ document.getElementById('inputForm').addEventListener('submit', function(event)
     })
     .then(text => {
         // Display the response in the textarea
-        document.getElementById('responseFieldText').value = inputData; // Format the JSON response
-        document.getElementById('responseFieldDeanonText').value = JSON.stringify(text.deanonymized_text, null, 2); // Format the JSON response
+        document.getElementById('responseFieldText').value = inputData;
+        document.getElementById('responseFieldDeanonText').value = text.deanonymized_text;
 
-        document.getElementById('loading-spinner').style.display = 'none';
+        document.getElementById('loading-spinner').style.display = 'none'; // Hide the loading spinner
 
     })
     .catch((error) => {

src/static/scripts/demask_downloader.js

@@ -1,18 +1,27 @@
 document.getElementById('downloadBtnDemask').addEventListener('click', function() {
-    // Get the content of the textarea
-    const Text = document.getElementById('responseFieldDeanonText').value;
 
-    // Create a Blob from the textarea content
-    const blobText = new Blob([Text], { type: 'text/plain' });
+    const contents = [
+        { content: document.getElementById('responseFieldDeanonText').value, name: 'yoyo-text.txt', type: 'text/plain' },
+    ];
+
+    // Download files
+    async function downloadFiles(files) {
+        for (const file of files) {
+            const blob = new Blob([file.content], { type: file.type });
+            const url = window.URL.createObjectURL(blob);
+
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = file.name;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+
+            window.URL.revokeObjectURL(url);
 
-    // Create a link element
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blobText);
-    link.download = 'yoyo-text.txt'; // Specify the file name
-
-    // Programmatically click the link to trigger the download
-    link.click();
-
-    // Clean up and revoke the object URL
-    URL.revokeObjectURL(link.href);
+            await new Promise(resolve => setTimeout(resolve, 100));
+        };
+    }
+
+    downloadFiles(contents);
 });

src/static/scripts/mask.js

@@ -6,9 +6,9 @@ document.getElementById('backendType').addEventListener('change', function() {
     } else {
         var llmInputDiv = document.getElementById('LLMInput');
         var llmInputReset = document.getElementById('LLMReset');
-        llmInputCheckbox.style.display = 'none';
+        llmInputCheckbox.style.display = 'none'; // Hide the LLMcustomLabel div
         llmInputDiv.style.display = 'none'; // Hide the LLMInput div
-        llmInputReset.style.display = 'none';
+        llmInputReset.style.display = 'none'; // Hide the LLMReset div
     }
 });
 
@@ -18,10 +18,10 @@ document.getElementById('LLMcustom').addEventListener('change', function() {
     var llmInputReset = document.getElementById('LLMReset');
     if (this.checked === true) {
         llmInputDiv.style.display = 'flex'; // Show the LLMInput div
-        llmInputReset.style.display = 'flex';
+        llmInputReset.style.display = 'flex'; // Show the LLMReset div
     } else {
         llmInputDiv.style.display = 'none'; // Hide the LLMInput div
-        llmInputReset.style.display = 'none';
+        llmInputReset.style.display = 'none'; // Hide the LLMReset div
     }
 });
 
@@ -73,41 +73,39 @@ document.getElementById('btnLLMReset').addEventListener('click', function() {
 document.getElementById('inputForm').addEventListener('submit', function(event) {
     event.preventDefault(); // Prevent the default form submission
 
-    document.getElementById('loading-spinner').style.display = 'flex';
-
+    document.getElementById('loading-spinner').style.display = 'flex'; // Show the loading spinner
     const inputData = document.getElementById('inputData').value;
     const backendType = document.getElementById('backendType').value;
     const inputLLMurl = document.getElementById('inputLLMurl').value;
     const inputLLMmodel = document.getElementById('inputLLMmodel').value;
 
-    // Use a relative URL for the API endpoint
-    const apiEndpoint = '/api/mask'; // Relative URL
+    const apiEndpoint = '/api/mask'; // Set API endpoint
 
     // Send a POST request to the API
     fetch(apiEndpoint, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ text: inputData, "backendType": backendType, llmURL: inputLLMurl, llmModel: inputLLMmodel}), // Send the input text as JSON
+        body: JSON.stringify({ text: inputData, "backendType": backendType, llmURL: inputLLMurl, llmModel: inputLLMmodel}),
     })
     .then(response => {
         if (!response.ok) {
             throw new Error('Network response was not ok');
         }
-        return response.json(); // Parse the JSON response
+        return response.json();
     })
     .then(text => {
-        // Display the response in the textarea
-        document.getElementById('responseFieldText').value = JSON.stringify(text.original_text, null, 2); // Format the JSON response
+
+        // Display the response in the textarea, no JSON formatting for text
+        document.getElementById('responseFieldText').value = text.original_text;
         document.getElementById('responseFieldEntities').value = JSON.stringify(text.entities, null, 2);
-        document.getElementById('responseFieldAnonText').value = JSON.stringify(text.anonymized_text, null, 2);
+        document.getElementById('responseFieldAnonText').value = text.anonymized_text;
 
-        document.getElementById('loading-spinner').style.display = 'none';
+        document.getElementById('loading-spinner').style.display = 'none'; // Hide the loading spinner
     })
     .catch((error) => {
         console.error('Error:', error); // Handle any errors
-        // Optionally display the error in the textarea
-        document.getElementById('responseFieldText').value = 'Error: ' + error.message + '\nText: ' + inputData;
+        document.getElementById('responseFieldText').value = 'Error: ' + error.message + '\nText: ' + inputData; // display the error in the textarea
     });
 });

src/static/scripts/mask_downloader.js

@@ -1,28 +1,28 @@
 document.getElementById('downloadBtn').addEventListener('click', function() {
-    // Get the content of the textarea
-    const foundEntities = document.getElementById('responseFieldEntities').value;
-    const newText = document.getElementById('responseFieldAnonText').value;
 
-    // Create a Blob from the textarea content
-    const blobEntities = new Blob([foundEntities], { type: 'application/json' });
-    const blobNewText = new Blob([newText], { type: 'text/plain' });
-
-    // Create a link element
-    const linkE = document.createElement('a');
-    linkE.href = URL.createObjectURL(blobEntities);
-    linkE.download = 'yoyo-entities.json'; // Specify the file name
-
-    const linkNT = document.createElement('a');
-    linkNT.href = URL.createObjectURL(blobNewText);
-    linkNT.download = 'yoyo-anonymizedText.txt'; // Specify the file name
+    const contents = [
+        { content: document.getElementById('responseFieldEntities').value, name: 'yoyo-entities.json', type: 'application/json' },
+        { content: document.getElementById('responseFieldAnonText').value, name: 'yoyo-anonymizedText.txt', type: 'text/plain' },
+    ];
 
-    setTimeout(function() {
-        linkE.click();
-        URL.revokeObjectURL(linkE.href);
-    }, 50);
+    // Download files
+    async function downloadFiles(files) {
+        for (const file of files) {
+            const blob = new Blob([file.content], { type: file.type });
+            const url = window.URL.createObjectURL(blob);
+
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = file.name;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+
+            window.URL.revokeObjectURL(url);
+
+            await new Promise(resolve => setTimeout(resolve, 100));
+        };
+    }
 
-    setTimeout(function() {
-        linkNT.click();
-        URL.revokeObjectURL(linkNT.href)
-    }, 50);
+    downloadFiles(contents);
 });