PERF: Update to @itk-wasm/image-io

Also work around issue detecting input format type (use .isq extension).
KitwareMedical · Oct 20, 2023 · 76c2414 · 76c2414
1 parent de2669d
commit 76c2414
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 36 deletions.
diff --git a/app/package.json b/app/package.json
@@ -23,8 +23,8 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/KitwareMedical/ITKIOScanco#readme",
   "dependencies": {
-    "itk-image-io": "1.0.0-b.132",
-    "itk-wasm": "1.0.0-b.132"
+    "@itk-wasm/image-io": "^0.3.0",
+    "itk-wasm": "1.0.0-b.149"
   },
   "devDependencies": {
     "@itk-wasm/dam": "^1.0.1",
@@ -38,4 +38,4 @@
     "type": "git",
     "url": "https://github.com/KitwareMedical/ITKIOScanco"
   }
-}
+}
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/conversion-controller.ts b/app/src/conversion-controller.ts
@@ -1,4 +1,4 @@
-import { readImageArrayBuffer, writeImageArrayBuffer } from "itk-wasm"
+import { readImage, writeImage } from "@itk-wasm/image-io"
 
 import conversionLoadSampleInputs from "./conversion-load-sample-inputs.js"
 import { notify, downloadFile } from "./utilities.js"
@@ -91,19 +91,18 @@ class ConversionController  {
         runButton.loading = true
         const t0 = performance.now()
 
-        const { webWorker, image } = await readImageArrayBuffer(this.webWorker,
-          model.inputVolume.slice(),
-          'volume.aim'
+        const { webWorker, image } = await readImage(this.webWorker,
+          { data: model.inputVolume.slice(), path: 'volume.isq' }
         )
         this.webWorker = webWorker
         // Avoid later use of detached buffer
         const direction = image.direction.slice()
-        const { arrayBuffer } = await writeImageArrayBuffer(webWorker, image, `${model.inputFileName}.${model.outputFormat}`)
+        const { serializedImage } = await writeImage(webWorker, image, `${model.inputFileName}.${model.outputFormat}`)
 
         const t1 = performance.now()
         notify("conversion successfully completed", `in ${t1 - t0} milliseconds.`, "success", "rocket-fill")
 
-        model.outputVolume = new Uint8Array(arrayBuffer)
+        model.outputVolume = new Uint8Array(serializedImage.data)
 
         outputOutputDownload.variant = "success"
         outputOutputDownload.disabled = false

diff --git a/app/src/index.ts b/app/src/index.ts
@@ -1,2 +1,8 @@
+import * as imageIo from '@itk-wasm/image-io'
+
+// Use local, vendored WebAssembly module assets
+const pipelinesBaseUrl: string | URL = new URL('/itk/image-io', document.location.origin).href
+imageIo.setPipelinesBaseUrl(pipelinesBaseUrl)
+
 import './conversion-controller.js'
 // import './calibration-controller.js'
diff --git a/app/vite.config.js b/app/vite.config.js
@@ -9,23 +9,18 @@ export default defineConfig({
     outDir: 'dist',
     emptyOutDir: true,
   },
+  worker: {
+    format: 'es'
+  },
+  optimizeDeps: {
+    exclude: ['@itk-wasm/image-io']
+  },
   plugins: [
     // put lazy loaded JavaScript and Wasm bundles in dist directory
     viteStaticCopy({
       targets: [
-        { src: 'node_modules/itk-wasm/dist/web-workers/*', dest: 'itk/web-workers' },
-        {
-          src: 'node_modules/itk-image-io/*',
-          dest: 'itk/image-io',
-        },
+        { src: 'node_modules/@itk-wasm/image-io/dist/pipelines/*.{js,wasm.zst}', dest: 'itk/image-io' },
       ],
     })
   ],
-  resolve: {
-    // where itk-wasm code has 'import ../itkConfig.js` point to the path of itkConfig
-    alias: {
-      '../itkConfig.js': itkConfig,
-      '../../itkConfig.js': itkConfig
-    }
-  }
 })