From 51ad741744575917c34d82ba22b0271827409f56 Mon Sep 17 00:00:00 2001
From: Ludy <Ludy87@users.noreply.github.com>
Date: Sun, 18 Feb 2024 08:40:30 +0100
Subject: [PATCH] Fix 746 (#825)

* Fix: #746

* formatting
---
 .../SPDF/config/EndpointConfiguration.java    |   2 +-
 src/main/resources/static/js/downloader.js    |  16 +-
 src/main/resources/static/pdfjs/js/viewer.js  |   4 +-
 .../resources/templates/fragments/common.html |  38 +-
 .../templates/misc/adjust-contrast.html       | 440 +++++++++---------
 .../resources/templates/misc/compare.html     |  10 +-
 .../templates/misc/extract-images.html        |   2 +-
 .../resources/templates/misc/flatten.html     |  28 +-
 src/main/resources/templates/view-pdf.html    |   8 +-
 9 files changed, 265 insertions(+), 283 deletions(-)

diff --git a/src/main/java/stirling/software/SPDF/config/EndpointConfiguration.java b/src/main/java/stirling/software/SPDF/config/EndpointConfiguration.java
index 752474a0..2b25b7fb 100644
--- a/src/main/java/stirling/software/SPDF/config/EndpointConfiguration.java
+++ b/src/main/java/stirling/software/SPDF/config/EndpointConfiguration.java
@@ -218,7 +218,7 @@ public class EndpointConfiguration {
         addEndpointToGroup("Java", "overlay-pdf");
         addEndpointToGroup("Java", "split-pdf-by-sections");
         addEndpointToGroup("Java", "remove-blanks");
-        
+
         // Javascript
         addEndpointToGroup("Javascript", "pdf-organizer");
         addEndpointToGroup("Javascript", "sign");
diff --git a/src/main/resources/static/js/downloader.js b/src/main/resources/static/js/downloader.js
index a4794e12..9871b69d 100644
--- a/src/main/resources/static/js/downloader.js
+++ b/src/main/resources/static/js/downloader.js
@@ -25,16 +25,15 @@ $(document).ready(function () {
     const originalButtonText = $("#submitBtn").text();
     $("#submitBtn").text("Processing...");
     console.log(override);
-    
+
     // Set a timeout to show the game button if operation takes more than 5 seconds
     const timeoutId = setTimeout(() => {
-	  var boredWaiting = localStorage.getItem("boredWaiting") || "disabled";
-      const showGameBtn = document.getElementById('show-game-btn');
-      if(boredWaiting === "enabled" && showGameBtn){
-      	showGameBtn.style.display = 'block';
+      var boredWaiting = localStorage.getItem("boredWaiting") || "disabled";
+      const showGameBtn = document.getElementById("show-game-btn");
+      if (boredWaiting === "enabled" && showGameBtn) {
+        showGameBtn.style.display = "block";
       }
-    }, 5000); 
-
+    }, 5000);
 
     try {
       if (remoteCall === true) {
@@ -46,9 +45,8 @@ $(document).ready(function () {
       }
       clearTimeout(timeoutId);
       $("#submitBtn").text(originalButtonText);
-      
     } catch (error) {
-	  clearTimeout(timeoutId);
+      clearTimeout(timeoutId);
       handleDownloadError(error);
       $("#submitBtn").text(originalButtonText);
       console.error(error);
diff --git a/src/main/resources/static/pdfjs/js/viewer.js b/src/main/resources/static/pdfjs/js/viewer.js
index f533f24b..3ed440f6 100644
--- a/src/main/resources/static/pdfjs/js/viewer.js
+++ b/src/main/resources/static/pdfjs/js/viewer.js
@@ -3323,13 +3323,13 @@
                     kind: OptionKind.WORKER
                 },
                 workerSrc: {
-                    value: "/pdfjs/pdf.worker.js",
+                    value: "./pdfjs/pdf.worker.js",
                     kind: OptionKind.WORKER
                 }
             };
             {
                 defaultOptions.defaultUrl = {
-                    value: "/pdfjs/example/Welcome.pdf",
+                    value: "./pdfjs/example/Welcome.pdf",
                     kind: OptionKind.VIEWER
                 };
                 defaultOptions.disablePreferences = {
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 10c38afa..517a902b 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -34,7 +34,7 @@
     <link rel="stylesheet" href="css/bootstrap-icons.min.css">
 
     <!-- PDF.js -->
-    <script src="pdfjs/pdf.js"></script>
+    <script th:src="@{pdfjs/pdf.js}"></script>
 
     <!-- PDF-Lib -->
     <script src="js/thirdParty/pdf-lib.min.js"></script>
@@ -70,24 +70,22 @@
       <script>
         console.log("loaded game");
         $(document).ready(function() {
-        	
-        	
-       	 // Find the file input within the form
-            var fileInput = $('input[type="file"]');
-            
-            // Find the closest enclosing form of the file input
-            var form = fileInput.closest('form');
-            
-            // Find the submit button within the form
-            var submitButton = form.find('button[type="submit"], input[type="submit"]');
-            
-            // Create the 'show-game-btn' button
-            var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">Bored waiting?</button><br /><br />');
-            
-            // Insert the 'show-game-btn' just above the submit button
-            submitButton.before(gameButton);
-            
-            
+
+           // Find the file input within the form
+          var fileInput = $('input[type="file"]');
+          
+          // Find the closest enclosing form of the file input
+          var form = fileInput.closest('form');
+          
+          // Find the submit button within the form
+          var submitButton = form.find('button[type="submit"], input[type="submit"]');
+          
+          // Create the 'show-game-btn' button
+          var gameButton = $('<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">Bored waiting?</button><br /><br />');
+          
+          // Insert the 'show-game-btn' just above the submit button
+          submitButton.before(gameButton);
+
           function loadGameScript(callback) {
             console.log('loadGameScript called');
             const script = document.createElement('script');
@@ -122,8 +120,6 @@
               gameDialog.close();
             }
           })
-    	
-          
         })
       </script>
       <div id="game-container">
diff --git a/src/main/resources/templates/misc/adjust-contrast.html b/src/main/resources/templates/misc/adjust-contrast.html
index d5bd1115..537985ec 100644
--- a/src/main/resources/templates/misc/adjust-contrast.html
+++ b/src/main/resources/templates/misc/adjust-contrast.html
@@ -4,272 +4,260 @@
   <th:block th:insert="~{fragments/common :: head(title=#{adjustContrast.title}, header=#{adjustContrast.header})}"></th:block>
   </head>
 
-<body>
-  <div id="page-container">
-    <div id="content-wrap">
-      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-      <br /><br />
-      <div class="container">
-        <div class="row justify-content-center">
-          <div class="col-md-12">
-                        <div class="row justify-content-center">
-                            <div class="col-md-3">
-                                <div id="sliders-container" style="display:none;">
-                                    <h4>
-                                        <span th:text="#{adjustContrast.contrast}"></span> <span id="contrast-val">100</span>%
-                                    </h4>
-                                    <input type="range" min="0" max="200" value="100" id="contrast-slider" />
+  <body>
+    <div id="page-container">
+      <div id="content-wrap">
+        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+        <br /><br />
+        <div class="container">
+          <div class="row justify-content-center">
+            <div class="col-md-12">
+              <div class="row justify-content-center">
+                <div class="col-md-3">
+                    <div id="sliders-container" style="display:none;">
+                      <h4><span th:text="#{adjustContrast.contrast}"></span> <span id="contrast-val">100</span>%</h4>
+                      <input type="range" min="0" max="200" value="100" id="contrast-slider" />
 
-                                    <h4>
-                                        <span th:text="#{adjustContrast.brightness}"></span> <span id="brightness-val">100</span>%
-                                    </h4>
-                                    <input type="range" min="0" max="200" value="100" id="brightness-slider" />
+                      <h4><span th:text="#{adjustContrast.brightness}"></span> <span id="brightness-val">100</span>%</h4>
+                      <input type="range" min="0" max="200" value="100" id="brightness-slider" />
 
-                                    <h4>
-                                        <span th:text="#{adjustContrast.saturation}"></span> <span id="saturation-val">100</span>%
-                                    </h4>
-                                    <input type="range" min="0" max="200" value="100" id="saturation-slider" />
-                                </div>
-                            </div>
-                            <div class="col-md-7">
-                                <h2 th:text="#{adjustContrast.header}"></h2>
-                                <div class="col-md-8">
-                                    <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
-                                </div>
-                                <br>
-                                <canvas id="contrast-pdf-canvas"></canvas>
-                                <button id="download-button" class="btn btn-primary" th:text="#{adjustContrast.download}"></button>
-                            </div>
-                        </div>
-                        <style>
-                            #flex-container {
-                      display: flex;
-                      align-items: center;
-                  }
-                  #sliders-container {
-                      padding: 0 20px;  /* Add some padding to separate sliders from canvas */
-                  }
-                        </style>
+                      <h4><span th:text="#{adjustContrast.saturation}"></span> <span id="saturation-val">100</span>%</h4>
+                      <input type="range" min="0" max="200" value="100" id="saturation-slider" />
+                    </div>
+                </div>
+                <div class="col-md-7">
+                  <h2 th:text="#{adjustContrast.header}"></h2>
+                  <div class="col-md-8">
+                    <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
+                  </div>
+                  <br />
+                  <canvas id="contrast-pdf-canvas"></canvas>
+                  <button id="download-button" class="btn btn-primary" th:text="#{adjustContrast.download}"></button>
+                </div>
+              </div>
+              <style>
+                #flex-container {
+                  display: flex;
+                  align-items: center;
+                }
+                #sliders-container {
+                  padding: 0 20px;  /* Add some padding to separate sliders from canvas */
+                }
+              </style>
 
+              <script>
+                var canvas = document.getElementById('contrast-pdf-canvas');
+                var context = canvas.getContext('2d');
+                var originalImageData = null;
+                var allPages = [];
+                var pdfDoc = null;
+                var pdf = null; // This is the current PDF document
 
-            <script src="pdfjs/pdf.js"></script>
-            <script>
-              var canvas = document.getElementById('contrast-pdf-canvas');
-              var context = canvas.getContext('2d');
-              var originalImageData = null;
-              var allPages = [];
-              var pdfDoc = null;
-              var pdf = null; // This is the current PDF document
+                async function renderPDFAndSaveOriginalImageData(file) {
+                  var fileReader = new FileReader();
+                  fileReader.onload = async function() {
+                    var data = new Uint8Array(this.result);
+                    pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
+                    pdf = await pdfjsLib.getDocument({data: data}).promise;
 
-              async function renderPDFAndSaveOriginalImageData(file) {
-                var fileReader = new FileReader();
-                fileReader.onload = async function() {
-                  var data = new Uint8Array(this.result);
-                  pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js'
-                  pdf = await pdfjsLib.getDocument({data: data}).promise;
+                    // Get the number of pages in the PDF
+                    var numPages = pdf.numPages;
+                    allPages = Array.from({length: numPages}, (_, i) => i + 1);
 
-                  // Get the number of pages in the PDF
-                  var numPages = pdf.numPages;
-                  allPages = Array.from({length: numPages}, (_, i) => i + 1);
+                    // Create a new PDF document
+                    pdfDoc = await PDFLib.PDFDocument.create();
+                    // Render the first page in the viewer
+                    await renderPageAndAdjustImageProperties(1);
+                    document.getElementById("sliders-container").style.display = "block";
 
-                  // Create a new PDF document
-                  pdfDoc = await PDFLib.PDFDocument.create();
-                  // Render the first page in the viewer
-                  await renderPageAndAdjustImageProperties(1);
-                  document.getElementById("sliders-container").style.display = "block";
+                  };
+                  fileReader.readAsArrayBuffer(file);
+                }
 
-                };
-                fileReader.readAsArrayBuffer(file);
-              }
-
-              // This function is now async and returns a promise
-              function renderPageAndAdjustImageProperties(pageNum) {
+                // This function is now async and returns a promise
+                function renderPageAndAdjustImageProperties(pageNum) {
                   return new Promise(async function(resolve, reject) {
-                      var page = await pdf.getPage(pageNum);
-                      var scale = 1.5;
-                      var viewport = page.getViewport({ scale: scale });
+                    var page = await pdf.getPage(pageNum);
+                    var scale = 1.5;
+                    var viewport = page.getViewport({ scale: scale });
 
-                      canvas.height = viewport.height;
-                      canvas.width = viewport.width;
+                    canvas.height = viewport.height;
+                    canvas.width = viewport.width;
 
-                      var renderContext = {
-                        canvasContext: context,
-                        viewport: viewport
-                      };
+                    var renderContext = {
+                      canvasContext: context,
+                      viewport: viewport
+                    };
 
-                      var renderTask = page.render(renderContext);
-                      renderTask.promise.then(function () {
-                        originalImageData = context.getImageData(0, 0, canvas.width, canvas.height);
-                        adjustImageProperties();
-                        resolve();
-                      });
-                      canvas.classList.add("fixed-shadow-canvas");
+                    var renderTask = page.render(renderContext);
+                    renderTask.promise.then(function () {
+                      originalImageData = context.getImageData(0, 0, canvas.width, canvas.height);
+                      adjustImageProperties();
+                      resolve();
+                    });
+                    canvas.classList.add("fixed-shadow-canvas");
                   });
-              }
-
+                }
 
                 function adjustImageProperties() {
-                    var contrast = parseFloat(document.getElementById('contrast-slider').value);
-                    var brightness = parseFloat(document.getElementById('brightness-slider').value);
-                    var saturation = parseFloat(document.getElementById('saturation-slider').value);
+                  var contrast = parseFloat(document.getElementById('contrast-slider').value);
+                  var brightness = parseFloat(document.getElementById('brightness-slider').value);
+                  var saturation = parseFloat(document.getElementById('saturation-slider').value);
 
-                    contrast /= 100; // normalize to range [0, 2]
-                    brightness /= 100; // normalize to range [0, 2]
-                    saturation /= 100; // normalize to range [0, 2]
+                  contrast /= 100; // normalize to range [0, 2]
+                  brightness /= 100; // normalize to range [0, 2]
+                  saturation /= 100; // normalize to range [0, 2]
 
-                    if (originalImageData) {
-                      var newImageData = context.createImageData(originalImageData.width, originalImageData.height);
-                      newImageData.data.set(originalImageData.data);
+                  if (originalImageData) {
+                    var newImageData = context.createImageData(originalImageData.width, originalImageData.height);
+                    newImageData.data.set(originalImageData.data);
 
-                      for(var i=0; i<newImageData.data.length; i+=4)
-                      {
-                        var r = newImageData.data[i];
-                        var g = newImageData.data[i+1];
-                        var b = newImageData.data[i+2];
-                        // Adjust contrast
-                        r = adjustContrastForPixel(r, contrast);
-                        g = adjustContrastForPixel(g, contrast);
-                        b = adjustContrastForPixel(b, contrast);
-                        // Adjust brightness
-                        r = adjustBrightnessForPixel(r, brightness);
-                        g = adjustBrightnessForPixel(g, brightness);
-                        b = adjustBrightnessForPixel(b, brightness);
-                        // Adjust saturation
-                        var rgb = adjustSaturationForPixel(r, g, b, saturation);
-                        newImageData.data[i] = rgb[0];
-                        newImageData.data[i+1] = rgb[1];
-                        newImageData.data[i+2] = rgb[2];
-                      }
-
-                      context.putImageData(newImageData, 0, 0);
+                    for(var i=0; i<newImageData.data.length; i+=4) {
+                      var r = newImageData.data[i];
+                      var g = newImageData.data[i+1];
+                      var b = newImageData.data[i+2];
+                      // Adjust contrast
+                      r = adjustContrastForPixel(r, contrast);
+                      g = adjustContrastForPixel(g, contrast);
+                      b = adjustContrastForPixel(b, contrast);
+                      // Adjust brightness
+                      r = adjustBrightnessForPixel(r, brightness);
+                      g = adjustBrightnessForPixel(g, brightness);
+                      b = adjustBrightnessForPixel(b, brightness);
+                      // Adjust saturation
+                      var rgb = adjustSaturationForPixel(r, g, b, saturation);
+                      newImageData.data[i] = rgb[0];
+                      newImageData.data[i+1] = rgb[1];
+                      newImageData.data[i+2] = rgb[2];
                     }
+
+                    context.putImageData(newImageData, 0, 0);
                   }
+                }
 
                 function rgbToHsl(r, g, b) {
-                    r /= 255, g /= 255, b /= 255;
+                  r /= 255, g /= 255, b /= 255;
 
-                    var max = Math.max(r, g, b), min = Math.min(r, g, b);
-                    var h, s, l = (max + min) / 2;
+                  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+                  var h, s, l = (max + min) / 2;
 
-                    if (max === min) {
-                      h = s = 0; // achromatic
-                    } else {
-                      var d = max - min;
-                      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+                  if (max === min) {
+                    h = s = 0; // achromatic
+                  } else {
+                    var d = max - min;
+                    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 
-                      switch (max) {
-                        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-                        case g: h = (b - r) / d + 2; break;
-                        case b: h = (r - g) / d + 4; break;
-                      }
-
-                      h /= 6;
+                    switch (max) {
+                      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+                      case g: h = (b - r) / d + 2; break;
+                      case b: h = (r - g) / d + 4; break;
                     }
 
-                    return [h, s, l];
+                    h /= 6;
                   }
 
-                  function hslToRgb(h, s, l) {
-                    var r, g, b;
+                  return [h, s, l];
+                }
 
-                    if (s === 0) {
-                      r = g = b = l; // achromatic
-                    } else {
-                      var hue2rgb = function hue2rgb(p, q, t) {
-                        if (t < 0) t += 1;
-                        if (t > 1) t -= 1;
-                        if (t < 1 / 6) return p + (q - p) * 6 * t;
-                        if (t < 1 / 2) return q;
-                        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-                        return p;
-                      };
+                function hslToRgb(h, s, l) {
+                  var r, g, b;
 
-                      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-                      var p = 2 * l - q;
+                  if (s === 0) {
+                    r = g = b = l; // achromatic
+                  } else {
+                    var hue2rgb = function hue2rgb(p, q, t) {
+                      if (t < 0) t += 1;
+                      if (t > 1) t -= 1;
+                      if (t < 1 / 6) return p + (q - p) * 6 * t;
+                      if (t < 1 / 2) return q;
+                      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+                      return p;
+                    };
 
-                      r = hue2rgb(p, q, h + 1 / 3);
-                      g = hue2rgb(p, q, h);
-                      b = hue2rgb(p, q, h - 1 / 3);
-                    }
+                    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                    var p = 2 * l - q;
 
-                    return [r * 255, g * 255, b * 255];
+                    r = hue2rgb(p, q, h + 1 / 3);
+                    g = hue2rgb(p, q, h);
+                    b = hue2rgb(p, q, h - 1 / 3);
                   }
 
-                  function adjustContrastForPixel(pixel, contrast) {
-                      // Normalize to range [-0.5, 0.5]
-                      var normalized = pixel / 255 - 0.5;
+                  return [r * 255, g * 255, b * 255];
+                }
 
-                      // Apply contrast
-                      normalized *= contrast;
+                function adjustContrastForPixel(pixel, contrast) {
+                  // Normalize to range [-0.5, 0.5]
+                  var normalized = pixel / 255 - 0.5;
 
-                      // Denormalize back to [0, 255]
-                      return (normalized + 0.5) * 255;
-                    }
-                  function clamp(value, min, max) {
-                    return Math.min(Math.max(value, min), max);
+                  // Apply contrast
+                  normalized *= contrast;
+
+                  // Denormalize back to [0, 255]
+                  return (normalized + 0.5) * 255;
+                }
+
+                function clamp(value, min, max) {
+                  return Math.min(Math.max(value, min), max);
+                }
+
+                function adjustSaturationForPixel(r, g, b, saturation) {
+                  var hsl = rgbToHsl(r, g, b);
+
+                  // Adjust saturation
+                  hsl[1] = clamp(hsl[1] * saturation, 0, 1);
+
+                  // Convert back to RGB
+                  var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
+
+                  // Return adjusted RGB values
+                  return rgb;
+                }
+
+                function adjustBrightnessForPixel(pixel, brightness) {
+                  return Math.max(0, Math.min(255, pixel * brightness));
+                }
+
+                async function downloadPDF() {
+                  for (var i = 0; i < allPages.length; i++) {
+                    await renderPageAndAdjustImageProperties(allPages[i]);
+                    const pngImageBytes = canvas.toDataURL('image/png');
+                    const pngImage = await pdfDoc.embedPng(pngImageBytes);
+                    const pngDims = pngImage.scale(1);
+
+                    // Create a blank page matching the dimensions of the image
+                    const page = pdfDoc.addPage([pngDims.width, pngDims.height]);
+
+                    // Draw the PNG image
+                    page.drawImage(pngImage, {
+                      x: 0,
+                      y: 0,
+                      width: pngDims.width,
+                      height: pngDims.height
+                    });
                   }
 
-                  function adjustSaturationForPixel(r, g, b, saturation) {
-                      var hsl = rgbToHsl(r, g, b);
+                  // Serialize the PDFDocument to bytes (a Uint8Array)
+                  const pdfBytes = await pdfDoc.save();
 
-                      // Adjust saturation
-                      hsl[1] = clamp(hsl[1] * saturation, 0, 1);
+                  // Create a Blob
+                  const blob = new Blob([pdfBytes.buffer], {type: "application/pdf"});
 
-                      // Convert back to RGB
-                      var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
+                  // Create download link
+                  const downloadLink = document.createElement('a');
+                  downloadLink.href = URL.createObjectURL(blob);
+                  downloadLink.download = "download.pdf";
+                  downloadLink.click();
 
-                      // Return adjusted RGB values
-                      return rgb;
-                    }
-
-                  function adjustBrightnessForPixel(pixel, brightness) {
-                      return Math.max(0, Math.min(255, pixel * brightness));
-                    }
-
-                  async function downloadPDF() {
-                    for (var i = 0; i < allPages.length; i++) {
-                      await renderPageAndAdjustImageProperties(allPages[i]);
-                      const pngImageBytes = canvas.toDataURL('image/png');
-                      const pngImage = await pdfDoc.embedPng(pngImageBytes);
-                      const pngDims = pngImage.scale(1);
-
-                      // Create a blank page matching the dimensions of the image
-                      const page = pdfDoc.addPage([pngDims.width, pngDims.height]);
-
-                      // Draw the PNG image
-                      page.drawImage(pngImage, {
-                        x: 0,
-                        y: 0,
-                        width: pngDims.width,
-                        height: pngDims.height
-                      });
-                    }
-
-                    // Serialize the PDFDocument to bytes (a Uint8Array)
-                    const pdfBytes = await pdfDoc.save();
-
-                    // Create a Blob
-                    const blob = new Blob([pdfBytes.buffer], {type: "application/pdf"});
-
-                    // Create download link
-                    const downloadLink = document.createElement('a');
-                    downloadLink.href = URL.createObjectURL(blob);
-                    downloadLink.download = "download.pdf";
-                    downloadLink.click();
-
-                   // After download, reset the viewer and clear stored data
-                    allPages = [];  // Clear the pages
-                    originalImageData = null;  // Clear the image data
-
-                    // Go back to page 1 and render it in the viewer
-                    if (pdf !== null) {
-                      renderPageAndAdjustImageProperties(1);
-                    }
+                  // After download, reset the viewer and clear stored data
+                  allPages = [];  // Clear the pages
+                  originalImageData = null;  // Clear the image data
 
+                  // Go back to page 1 and render it in the viewer
+                  if (pdf !== null) {
+                    renderPageAndAdjustImageProperties(1);
                   }
 
-
-
+                }
 
                 // Event listeners
                 document.getElementById('fileInput-input').addEventListener('change', function(e) {
@@ -294,14 +282,14 @@
                 });
 
                 document.getElementById('download-button').addEventListener('click', function() {
-                    downloadPDF();
-                  });
+                  downloadPDF();
+                });
               </script>
+            </div>
           </div>
         </div>
       </div>
+      <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
-    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
-  </div>
-</body>
+  </body>
 </html>
diff --git a/src/main/resources/templates/misc/compare.html b/src/main/resources/templates/misc/compare.html
index c225f6b2..3b564855 100644
--- a/src/main/resources/templates/misc/compare.html
+++ b/src/main/resources/templates/misc/compare.html
@@ -4,11 +4,11 @@
   <th:block th:insert="~{fragments/common :: head(title=#{compare.title}, header=#{compare.header})}"></th:block>
     <style>
       .result-column {
-          border: 1px solid #ccc;
-          padding: 15px;
-          overflow-y: auto;
-          height: calc(100vh - 400px);
-          white-space: pre-wrap;
+        border: 1px solid #ccc;
+        padding: 15px;
+        overflow-y: auto;
+        height: calc(100vh - 400px);
+        white-space: pre-wrap;
       }
     </style>
   </head>
diff --git a/src/main/resources/templates/misc/extract-images.html b/src/main/resources/templates/misc/extract-images.html
index b14c9b20..bf79fa54 100644
--- a/src/main/resources/templates/misc/extract-images.html
+++ b/src/main/resources/templates/misc/extract-images.html
@@ -5,7 +5,7 @@
   </head>
 
   <body>
-  	<th:block th:insert="~{fragments/common :: game}"></th:block>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
       <div id="content-wrap">
         <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
diff --git a/src/main/resources/templates/misc/flatten.html b/src/main/resources/templates/misc/flatten.html
index 1d4563bc..6107fcc4 100644
--- a/src/main/resources/templates/misc/flatten.html
+++ b/src/main/resources/templates/misc/flatten.html
@@ -21,26 +21,26 @@
                 <script src="js/local-pdf-input-download.js"></script>
                 <script>
                   document.getElementById('pdfForm').addEventListener('submit', async (e) => {
-                      e.preventDefault();
+                    e.preventDefault();
 
-                      const { PDFDocument } = PDFLib;
+                    const { PDFDocument } = PDFLib;
 
-                      const processFile = async (file) => {
-                          const origFileUrl = URL.createObjectURL(file);
-                          const formPdfBytes = await fetch(origFileUrl).then(res => res.arrayBuffer());
-                          const pdfDoc = await PDFDocument.load(formPdfBytes, { ignoreEncryption: true });
+                    const processFile = async (file) => {
+                      const origFileUrl = URL.createObjectURL(file);
+                      const formPdfBytes = await fetch(origFileUrl).then(res => res.arrayBuffer());
+                      const pdfDoc = await PDFDocument.load(formPdfBytes, { ignoreEncryption: true });
 
-                          const form = pdfDoc.getForm();
-                          form.flatten();
+                      const form = pdfDoc.getForm();
+                      form.flatten();
 
-                          const pdfBytes = await pdfDoc.save();
-                          const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
-                          const fileName = (file.name ? file.name.replace('.pdf', '') : 'pdf') + '_flattened.pdf';
+                      const pdfBytes = await pdfDoc.save();
+                      const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
+                      const fileName = (file.name ? file.name.replace('.pdf', '') : 'pdf') + '_flattened.pdf';
 
-                          return { processedData: pdfBlob, fileName };
-                      };
+                      return { processedData: pdfBlob, fileName };
+                    };
 
-                      await downloadFilesWithCallback(processFile);
+                    await downloadFilesWithCallback(processFile);
                   });
                 </script>
               </form>
diff --git a/src/main/resources/templates/view-pdf.html b/src/main/resources/templates/view-pdf.html
index 8aca4542..afe4e957 100644
--- a/src/main/resources/templates/view-pdf.html
+++ b/src/main/resources/templates/view-pdf.html
@@ -32,11 +32,11 @@ See https://github.com/adobe-type-tools/cmap-resources
 <script src="js/thirdParty/bootstrap.min.js"></script>
 
     <!-- This snippet is used in production (included from view-pdf.html) -->
-    <link rel="resource" type="application/l10n" href="pdfjs/locale/locale.properties">
-    <script src="pdfjs/pdf.js"></script>
+    <link rel="resource" type="application/l10n" th:href="@{pdfjs/locale/locale.properties}">
+    <script th:src="@{pdfjs/pdf.js}" type="module"></script>
 
-    <link rel="stylesheet" href="pdfjs/css/viewer.css">
-    <script src="pdfjs/js/viewer.js"></script>
+    <link rel="stylesheet" th:href="@{/pdfjs/css/viewer.css}">
+    <script th:src="@{pdfjs/js/viewer.js}" type="module"></script>
 </head>
 
 <body tabindex="1">