added a bit of love

index.html

@@ -5,22 +5,33 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Note to PNG Converter</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
+        #images {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            padding: 20px;
         }
 
-        #images img {
-            margin: 10px;
+        .image-container {
+            position: relative;
+            min-height: 200px;
             border: 1px solid #ccc;
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .image-container img {
             max-width: 100%;
+            height: auto;
         }
 
-        #images span {
-            display: block;
-            margin: 10px 0;
-            font-size: 14px;
-            color: gray;
+        .loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
         }
     </style>
 </head>
@@ -29,57 +40,52 @@ <h1>Display a Supernote File</h1>
 <form id="uploadForm">
     <input type="file" id="noteInput" accept=".note" required/>
 </form>
+<progress id="progressBar" value="0" max="100" style="display: none;"></progress>
 <div id="images"></div>
 
 <script type="module">
-  import { SupernoteX, toImage } from 'supernote-typescript';
-
-  document.getElementById('noteInput').addEventListener('change', async (event) => {
-    const fileInput = event.target;
-    const file = fileInput.files[0];
+  import { SupernoteX } from 'supernote-typescript'
+  import SupernoteWorker from './worker.js'
 
-    if (!file) {
-      alert('Please select a file.');
-      return;
-    }
+  const MAX_WORKERS = 3
 
-    try {
-      const imagesContainer = document.getElementById('images');
-      imagesContainer.innerHTML = ''; // Clear previous images
+  document.getElementById('noteInput').addEventListener('change', async (event) => {
+    const file = event.target.files[0]
+    if (!file) return
 
-      // Read the file as ArrayBuffer
-      const arrayBuffer = await file.arrayBuffer();
-      const uint8Array = new Uint8Array(arrayBuffer);
+    const arrayBuffer = await file.arrayBuffer()
+    const note = new SupernoteX(new Uint8Array(arrayBuffer))
+    const totalPages = note.pages.length
 
-      // Process with SupernoteX
-      const note = new SupernoteX(uint8Array);
+    const workers = Array(MAX_WORKERS).fill(null).map(() => new SupernoteWorker())
+    const processQueue = Array.from({ length: totalPages }, (_, i) => i + 1)
 
-      let index = 1;
-      for (const page of note.pages) {
-        // Display loading placeholder
-        const placeholder = document.createElement('span');
-        placeholder.textContent = `Processing page ${index}...`;
-        imagesContainer.appendChild(placeholder);
+    // Initialize page containers
+    document.getElementById('images').innerHTML = processQueue.map(i => `<div id="container-${i}" class="image-container">
+                     <div class="loading">Processing page ${i}...</div>
+                   </div>`).join('')
 
-        const [image] = await toImage(note, [index]);
-        const imageBuffer = await image.toBuffer('image/png');
-        const base64Image = `data:image/png;base64,${btoa(
-          new Uint8Array(imageBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
-        )}`;
+    workers.forEach(worker => {
+      worker.onMessage(async ({ pageIndex, imageData, status, error }) => {
+        if (status === 'success') {
+          const base64Image = btoa(String.fromCharCode(...new Uint8Array(imageData)))
+          document.getElementById(`container-${pageIndex}`).innerHTML =
+            `<img src="data:image/png;base64,${base64Image}" alt="Page ${pageIndex}">`
+        }
 
-        // Replace the placeholder with the actual image
-        const imgElement = document.createElement('img');
-        imgElement.src = base64Image;
-        imgElement.alt = `Page ${index}`;
-        imagesContainer.replaceChild(imgElement, placeholder);
+        const nextPage = processQueue.shift()
+        if (nextPage) {
+          worker.process(note, nextPage)
+        }
+      })
+    })
 
-        index++;
-      }
-    } catch (error) {
-      console.error('Error processing the file:', error);
-      alert('An error occurred while processing the file.');
-    }
-  });
+    // Start initial batch
+    workers.forEach(worker => {
+      const pageIndex = processQueue.shift()
+      if (pageIndex) worker.process(note, pageIndex)
+    })
+  })
 </script>
 </body>
 </html>

worker-impl.js

@@ -0,0 +1,20 @@
+import { toImage } from 'supernote-typescript'
+
+self.onmessage = async function(e) {
+  const { pageIndex, note } = e.data
+  try {
+    const [image] = await toImage(note, [pageIndex])
+    const imageBuffer = await image.toBuffer('image/png')
+    postMessage({
+      pageIndex,
+      imageData: imageBuffer,
+      status: 'success'
+    })
+  } catch (error) {
+    postMessage({
+      pageIndex,
+      error: error.message,
+      status: 'error'
+    })
+  }
+}

worker.js

@@ -0,0 +1,20 @@
+export default class SupernoteWorker {
+  constructor() {
+    this.worker = new Worker(
+      new URL('./worker-impl.js?v=' + Date.now(), import.meta.url),
+      { type: 'module' }
+    )
+  }
+
+  process(note, pageIndex) {
+    this.worker.postMessage({ note, pageIndex })
+  }
+
+  onMessage(callback) {
+    this.worker.onmessage = (e) => callback(e.data)
+  }
+
+  terminate() {
+    this.worker.terminate()
+  }
+}