From 4c20f7544d40caf15cc5882244689a9c7414289c Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Thu, 10 Oct 2024 23:43:00 +0800
Subject: [PATCH] perf: use web worker to decode (#12)

---
 app/components/Scan.vue           | 36 +++++++++++++++--------
 app/composables/decode-worker.ts  | 49 +++++++++++++++++++++++++++++++
 app/composables/workers/decode.ts | 49 +++++++++++++++++++++++++++++++
 cspell.config.yaml                |  1 +
 package.json                      |  1 +
 pnpm-lock.yaml                    | 13 ++++----
 6 files changed, 132 insertions(+), 17 deletions(-)
 create mode 100644 app/composables/decode-worker.ts
 create mode 100644 app/composables/workers/decode.ts

diff --git a/app/components/Scan.vue b/app/components/Scan.vue
index ad1e333..95986c2 100644
--- a/app/components/Scan.vue
+++ b/app/components/Scan.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { toUint8Array } from 'js-base64'
-import { binaryToBlock, createDecoder, readFileHeaderMetaFromBuffer } from 'luby-transform'
-
+import { binaryToBlock, readFileHeaderMetaFromBuffer } from 'luby-transform'
 import QrScanner from 'qr-scanner'
+
+import { createDecodeWorker } from '~/composables/decode-worker'
 import { useKiloBytesNumberFormat } from '~/composables/intlNumberFormat'
 import { useBytesRate } from '~/composables/timeseries'
 import { CameraSignalStatus } from '~/types'
@@ -156,7 +157,15 @@ async function updateCameraStatus() {
   }
 }
 
-const decoder = ref(createDecoder())
+const decoderWorker = createDecodeWorker()
+onUnmounted(() => decoderWorker.dispose())
+const decoderStatus = ref<Awaited<ReturnType<typeof decoderWorker.getStatus>>>({
+  encodedBlocks: new Set(),
+  decodedData: [],
+  encodedCount: 0,
+  decodedCount: 0,
+  meta: null!,
+})
 
 const k = ref(0)
 const bytes = ref(0)
@@ -170,7 +179,7 @@ const dataUrl = ref<string>()
 const dots = useTemplateRef<HTMLDivElement[]>('dots')
 const status = ref<number[]>([])
 const decodedBlocks = computed(() => status.value.filter(i => i === 1).length)
-const receivedBytes = computed(() => decoder.value.encodedCount * (decoder.value.meta?.data.length ?? 0))
+const receivedBytes = computed(() => decoderStatus.value.encodedCount * (decoderStatus.value.meta?.data.length ?? 0))
 
 const filename = ref<string | undefined>()
 const contentType = ref<string | undefined>()
@@ -182,10 +191,10 @@ const receivedBytesFormatted = useKiloBytesNumberFormat(computed(() => (received
 function getStatus() {
   const array = Array.from({ length: k.value }, () => 0)
   for (let i = 0; i < k.value; i++) {
-    if (decoder.value.decodedData[i] != null)
+    if (decoderStatus.value.decodedData[i] != null)
       array[i] = 1
   }
-  for (const block of decoder.value.encodedBlocks) {
+  for (const block of decoderStatus.value.encodedBlocks) {
     for (const i of block.indices) {
       if (array[i] === 0 || array[i]! > block.indices.length) {
         array[i] = block.indices.length
@@ -231,6 +240,7 @@ function toDataURL(data: Uint8Array | string | any, type: string): string {
   }
 }
 
+let decoderInitPromise: Promise<any> | undefined
 async function scanFrame(result: QrScanner.ScanResult) {
   cameraSignalStatus.value = CameraSignalStatus.Ready
 
@@ -238,7 +248,7 @@ async function scanFrame(result: QrScanner.ScanResult) {
     return
 
   bytesReceived.value += result.data.length
-  totalValidBytesReceived.value = decoder.value.encodedCount * (decoder.value.meta?.data.length ?? 0)
+  totalValidBytesReceived.value = decoderStatus.value.encodedCount * (decoderStatus.value.meta?.data.length ?? 0)
 
   // Do not process the same QR code twice
   if (cached.has(result.data))
@@ -252,7 +262,7 @@ async function scanFrame(result: QrScanner.ScanResult) {
   const data = binaryToBlock(binary)
   // Data set changed, reset decoder
   if (checksum.value !== data.checksum) {
-    decoder.value = createDecoder()
+    decoderInitPromise = decoderWorker.createDecoder()
     checksum.value = data.checksum
     bytes.value = data.bytes
     k.value = data.k
@@ -268,17 +278,19 @@ async function scanFrame(result: QrScanner.ScanResult) {
   else if (endTime.value) {
     return
   }
+  await decoderInitPromise
 
   cached.add(result.data)
   k.value = data.k
 
   data.indices.map(i => pluse(i))
-  const success = decoder.value.addBlock(data)
+  const success = await decoderWorker.addBlock(data)
+  decoderStatus.value = await decoderWorker.getStatus()
   status.value = getStatus()
   if (success) {
     endTime.value = performance.now()
 
-    const merged = decoder.value.getDecoded()!
+    const merged = (await decoderWorker.getDecoded())!
     const [mergedData, meta] = readFileHeaderMetaFromBuffer(merged)
     dataUrl.value = toDataURL(mergedData, meta.contentType)
 
@@ -350,7 +362,7 @@ function now() {
         <span text-neutral-500>Decoded</span>
         <span text-right md:text-left>{{ decodedBlocks }}</span>
         <span text-neutral-500>Received blocks</span>
-        <span text-right md:text-left>{{ decoder.encodedCount }}</span>
+        <span text-right md:text-left>{{ decoderStatus.encodedCount }}</span>
         <span text-neutral-500>Expected bytes</span>
         <span text-right md:text-left>{{ bytesFormatted }}</span>
         <span text-neutral-500>Received bytes</span>
@@ -427,7 +439,7 @@ function now() {
 
     <Collapsable label="Blocks">
       <div flex="~ gap-1 wrap" max-w-150 text-xs>
-        <div v-for="i, idx of decoder.encodedBlocks" :key="idx" border="~ gray/10 rounded" p1>
+        <div v-for="i, idx of decoderStatus.encodedBlocks" :key="idx" border="~ gray/10 rounded" p1>
           <template v-for="x, idy of i.indices" :key="x">
             <span v-if="idy !== 0" op25>, </span>
             <span :style="{ color: `hsl(${x * 40}, 40%, 60%)` }">{{ x }}</span>
diff --git a/app/composables/decode-worker.ts b/app/composables/decode-worker.ts
new file mode 100644
index 0000000..5382d1d
--- /dev/null
+++ b/app/composables/decode-worker.ts
@@ -0,0 +1,49 @@
+import type { EncodedBlock } from 'luby-transform'
+import type { DecoderWorkerFunctions } from './workers/decode'
+import { createBirpc } from 'birpc'
+import DecodeWorkerConstructor from './workers/decode?worker'
+
+export function createDecodeWorker() {
+  const worker = new DecodeWorker()
+
+  const rpc = Object.assign(createBirpc<DecoderWorkerFunctions>({}, {
+    post: worker.decodeWorker.postMessage.bind(worker.decodeWorker),
+    on: fn => worker.decodeWorker.addEventListener('message', event => fn(event.data)),
+  }), {
+    worker,
+    dispose() {
+      worker.decodeWorker.terminate()
+    },
+  })
+
+  return rpc
+}
+
+class DecodeWorker {
+  decodeWorker: Worker
+  constructor() {
+    this.decodeWorker = new DecodeWorkerConstructor()
+  }
+
+  initDecoder(data?: EncodedBlock[]) {
+    this.decodeWorker.postMessage({ type: 'createDecoder', data })
+  }
+
+  addBlock(data: EncodedBlock) {
+    this.decodeWorker.postMessage({ type: 'addBlock', data })
+  }
+
+  onDecoded(callback: (data: Uint8Array | undefined) => void) {
+    const eventFn = (event: MessageEvent) => {
+      const { type, data } = event.data
+      if (type === 'decoded') {
+        callback(data)
+      }
+    }
+    this.decodeWorker.addEventListener('message', eventFn)
+
+    return () => {
+      this.decodeWorker.removeEventListener('message', eventFn)
+    }
+  }
+}
diff --git a/app/composables/workers/decode.ts b/app/composables/workers/decode.ts
new file mode 100644
index 0000000..5d7e6cf
--- /dev/null
+++ b/app/composables/workers/decode.ts
@@ -0,0 +1,49 @@
+import type { EncodedBlock, LtDecoder } from 'luby-transform'
+import { createBirpc } from 'birpc'
+import { createDecoder } from 'luby-transform'
+
+let decoder: LtDecoder
+
+const workerFunctions = {
+  createDecoder(data?: EncodedBlock[]) {
+    decoder = createDecoder(data)
+  },
+  isInitialized() {
+    return !!decoder
+  },
+  addBlock(...args: Parameters<LtDecoder['addBlock']>) {
+    checkDecoder()
+    return decoder.addBlock(...args)
+  },
+  propagateDecoded(...args: Parameters<LtDecoder['propagateDecoded']>) {
+    checkDecoder()
+    decoder.propagateDecoded(...args)
+  },
+  getDecoded(...args: Parameters<LtDecoder['getDecoded']>) {
+    checkDecoder()
+    return decoder.getDecoded(...args)
+  },
+  getStatus() {
+    checkDecoder()
+    return {
+      decodedCount: decoder.decodedCount,
+      encodedCount: decoder.encodedCount,
+      meta: decoder.meta,
+      decodedData: decoder.decodedData,
+      encodedBlocks: decoder.encodedBlocks,
+    }
+  },
+}
+
+export type DecoderWorkerFunctions = typeof workerFunctions
+
+createBirpc(workerFunctions, {
+  post: globalThis.postMessage,
+  on: fn => globalThis.onmessage = event => fn(event.data),
+})
+
+function checkDecoder() {
+  if (!decoder) {
+    throw new Error('Decoder not initialized')
+  }
+}
diff --git a/cspell.config.yaml b/cspell.config.yaml
index f41e77b..4dae3f1 100644
--- a/cspell.config.yaml
+++ b/cspell.config.yaml
@@ -4,6 +4,7 @@ dictionaryDefinitions: []
 dictionaries: []
 words:
   - Attributify
+  - birpc
   - composables
   - luby
   - Nuxt
diff --git a/package.json b/package.json
index bbe3756..cadca69 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "birpc": "^0.2.19",
     "js-base64": "^3.7.7",
     "qr-scanner": "^1.4.2",
     "uqr": "^0.1.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 212759d..78cd666 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
 
   .:
     dependencies:
+      birpc:
+        specifier: ^0.2.19
+        version: 0.2.19
       js-base64:
         specifier: ^3.7.7
         version: 3.7.7
@@ -2753,8 +2756,8 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
-  birpc@0.2.17:
-    resolution: {integrity: sha512-+hkTxhot+dWsLpp3gia5AkVHIsKlZybNT5gIYiDlNzJrmYPcTM9k5/w2uaj3IPpd7LlEYpmCj4Jj1nC41VhDFg==}
+  birpc@0.2.19:
+    resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==}
 
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
@@ -7904,7 +7907,7 @@ snapshots:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@3.29.5)(webpack-sources@3.2.3)
       '@vue/devtools-core': 7.4.4(vite@5.4.6(@types/node@22.5.0)(terser@5.31.6))(vue@3.5.6(typescript@5.6.2))
       '@vue/devtools-kit': 7.4.4
-      birpc: 0.2.17
+      birpc: 0.2.19
       consola: 3.2.3
       cronstrue: 2.50.0
       destr: 2.0.3
@@ -9149,7 +9152,7 @@ snapshots:
   '@vue/devtools-kit@7.4.4':
     dependencies:
       '@vue/devtools-shared': 7.4.5
-      birpc: 0.2.17
+      birpc: 0.2.19
       hookable: 5.5.3
       mitt: 3.0.1
       perfect-debounce: 1.0.0
@@ -9501,7 +9504,7 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
-  birpc@0.2.17: {}
+  birpc@0.2.19: {}
 
   boolbase@1.0.0: {}