fix (web): Updated Onnx runtime to make it work for new chrome versio…

…n. (#140)
imgly · Nov 27, 2024 · e13257c · e13257c
1 parent c9f7e5c
commit e13257c
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.5.5",
+  "version": "1.5.6",
   "name": "workspace",
   "workspaces": [
     "packages/web",

diff --git a/packages/node-e2e/package.json b/packages/node-e2e/package.json
@@ -6,5 +6,5 @@
     "@imgly/background-removal-node": "file:../node",
     "jest": "^29.6.2"
   },
-  "version": "1.5.5"
+  "version": "1.5.6"
 }
diff --git a/packages/node-examples/package.json b/packages/node-examples/package.json
@@ -9,5 +9,5 @@
     "@imgly/background-removal-node": "file:../node",
     "uuidv4": "^6.2.13"
   },
-  "version": "1.5.5"
+  "version": "1.5.6"
 }
diff --git a/packages/node/package.json b/packages/node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imgly/background-removal-node",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "Background Removal in NodeJS",
   "resources": "@imgly/background-removal-node",
   "keywords": [

diff --git a/packages/web-data/.resources.mjs b/packages/web-data/.resources.mjs
@@ -1,9 +1,28 @@
 export default [
   {
     path: '/onnxruntime-web/',
-    source: '../../node_modules/onnxruntime-web/dist/*.wasm',
+    source:
+      '../../node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.jsep.wasm',
     mime: 'application/wasm'
   },
+  {
+    path: '/onnxruntime-web/',
+    source:
+      '../../node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.wasm',
+    mime: 'application/wasm'
+  },
+  {
+    path: '/onnxruntime-web/',
+    source:
+      '../../node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.jsep.mjs',
+    mime: 'text/javascript'
+  },
+  {
+    path: '/onnxruntime-web/',
+    source:
+      '../../node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.mjs',
+    mime: 'text/javascript'
+  },
   {
     path: '/models/',
     source: '../../bundle/models/*',

diff --git a/packages/web-data/changelog/1.5.6/20242602190400-Added_ThirdPartyLicenses_json_Added.yaml b/packages/web-data/changelog/1.5.6/20242602190400-Added_ThirdPartyLicenses_json_Added.yaml
@@ -0,0 +1,9 @@
+---
+type: Changed
+# type: Added
+# type: Changed
+# type: Removed
+# type: Security
+# private: true
+description: |
+  Upgrade onnx-runtime
diff --git a/packages/web-data/package.json b/packages/web-data/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imgly/background-removal-data",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "Background Removal Data",
   "keywords": [
     "background-removal",
@@ -46,6 +46,6 @@
     "package:pack": "npm pack . --pack-destination ../../releases"
   },
   "dependencies": {
-    "onnxruntime-web": "~1.18.0"
+    "onnxruntime-web": "~1.20.1"
   }
 }
diff --git a/packages/web-examples/vite-project/.vercel/README.txt b/packages/web-examples/vite-project/.vercel/README.txt
@@ -0,0 +1,11 @@
+> Why do I have a folder named ".vercel" in my project?
+The ".vercel" folder is created when you link a directory to a Vercel project.
+
+> What does the "project.json" file contain?
+The "project.json" file contains:
+- The ID of the Vercel project that you linked ("projectId")
+- The ID of the user or team your Vercel project is owned by ("orgId")
+
+> Should I commit the ".vercel" folder?
+No, you should not share the ".vercel" folder with anyone.
+Upon creation, it will be automatically added to your ".gitignore" file.
diff --git a/packages/web-examples/vite-project/.vercel/project.json b/packages/web-examples/vite-project/.vercel/project.json
@@ -0,0 +1,4 @@
+{
+  "orgId": "team_JFznad5UXNe4xKmEfdbZq5jl",
+  "projectId": "prj_jLTn0qO7rU5v6MEyaNREE9gIk3l2"
+}
diff --git a/packages/web-examples/vite-project/package-lock.json b/packages/web-examples/vite-project/package-lock.json
diff --git a/packages/web-examples/vite-project/package.json b/packages/web-examples/vite-project/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-project",
   "private": true,
-  "version": "1.5.5",
+  "version": "1.5.6",
   "type": "module",
   "scripts": {
     "start": "npm run dev",

diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.6]
+
+### Changed
+
+- Upgrade onnx-runtime
+
 ## [1.5.0]
 
 ### Added

diff --git a/packages/web/changelog/1.5.6/20242602190400-Added_ThirdPartyLicenses_json_Added.yaml b/packages/web/changelog/1.5.6/20242602190400-Added_ThirdPartyLicenses_json_Added.yaml
@@ -0,0 +1,9 @@
+---
+type: Changed
+# type: Added
+# type: Changed
+# type: Removed
+# type: Security
+# private: true
+description: |
+  Upgrade onnx-runtime
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imgly/background-removal",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "Background Removal in the Browser",
   "keywords": [
     "background-removal",
@@ -59,15 +59,15 @@
     "lint": "npx prettier --write ."
   },
   "dependencies": {
-    "@types/lodash-es": "^4.17.12",
-    "@types/ndarray": "~1.0.14",
-    "@types/node": "~20.3.0",
     "lodash-es": "^4.17.21",
     "ndarray": "~1.0.0",
-    "onnxruntime-web": "~1.18.0",
+    "onnxruntime-web": "~1.20.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/ndarray": "~1.0.14",
+    "@types/node": "~20.3.0",
     "assert": "~2.0.0",
     "esbuild": "~0.18.0",
     "glob": "~10.3.0",

diff --git a/packages/web/src/onnx.ts b/packages/web/src/onnx.ts
@@ -6,21 +6,18 @@ import type ORT from 'onnxruntime-web';
 import * as ort_cpu from 'onnxruntime-web';
 import * as ort_gpu from 'onnxruntime-web/webgpu';
 
-import { loadAsUrl } from './resource';
 import * as caps from './capabilities';
 import { Config } from './schema';
+import { loadAsUrl, resolveChunkUrls } from './resource';
 
 async function createOnnxSession(model: any, config: Config) {
   const useWebGPU = config.device === 'gpu' && (await caps.webgpu());
-  const useThreads = await caps.threads();
-  const useSimd = caps.simd();
-  const proxyToWorker = config.proxyToWorker;
+  // BUG: proxyToWorker is not working for WASM/CPU Backend for now
+  const proxyToWorker = useWebGPU && config.proxyToWorker;
   const executionProviders = [useWebGPU ? 'webgpu' : 'wasm'];
   const ort = useWebGPU ? ort_gpu : ort_cpu;
 
   if (config.debug) {
-    console.debug('\tUsing Threads:', useThreads);
-    console.debug('\tUsing SIMD:', useSimd);
     console.debug('\tUsing WebGPU:', useWebGPU);
     console.debug('\tProxy to Worker:', proxyToWorker);
 
@@ -29,28 +26,20 @@ async function createOnnxSession(model: any, config: Config) {
   }
 
   ort.env.wasm.numThreads = caps.maxNumThreads();
-  ort.env.wasm.simd = caps.simd();
   ort.env.wasm.proxy = proxyToWorker;
 
-  const wasmPaths = {
-    'ort-wasm-simd-threaded.wasm': useThreads && useSimd,
-    'ort-wasm-simd.wasm': !useThreads && useSimd,
-    'ort-wasm-threaded.wasm': !useWebGPU && useThreads && !useSimd,
-    'ort-wasm.wasm': !useWebGPU && !useThreads && !useSimd
-  };
+  // The path inside the resource bundle
+  const baseFilePath = useWebGPU
+    ? '/onnxruntime-web/ort-wasm-simd-threaded.jsep'
+    : '/onnxruntime-web/ort-wasm-simd-threaded';
 
-  const proxiedWasmPaths = {};
-  for (const [key, value] of Object.entries(wasmPaths)) {
-    if (value) {
-      const wasmPath =
-        useWebGPU && key.includes('simd')
-          ? `/onnxruntime-web/${key.replace('.wasm', '.jsep.wasm')}`
-          : `/onnxruntime-web/${key}`;
-      proxiedWasmPaths[key] = await loadAsUrl(wasmPath, config);
-    }
-  }
+  const wasmPath = await loadAsUrl(`${baseFilePath}.wasm`, config);
+  const mjsPath = await loadAsUrl(`${baseFilePath}.mjs`, config);
 
-  ort.env.wasm.wasmPaths = proxiedWasmPaths;
+  ort.env.wasm.wasmPaths = {
+    mjs: mjsPath,
+    wasm: wasmPath
+  };
 
   if (config.debug) {
     console.debug('ort.env.wasm:', ort.env.wasm);