[Web] I can’t use onnruntime-web to load a onnx model in a react web

tanggang1997 commented 3 months ago

Describe the issue

When I use onnxruntime-web to load a onnx model in react web,I found error.

a)The error is: Uncaught (in promise) Error: no available backend found. ERR: [wasm] Error: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -sASSERTIONS for more info., [cpu] Error: previous call to 'initWasm()' failed., [xnnpack] Error: previous call to 'initWasm()' failed.

b)This is my code: async function Load_Model() { console.log(window.location.origin + "/node_modules/onnxruntime-web/dist/ort-wasm-simd.wasm"); env.wasm.wasmPaths = window.location.origin + "/node_modules/onnxruntime-web/dist/"; env.wasm.proxy = true; // ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.15.0/dist/"; const path = ${process.env.PUBLIC_URL}/model.onnx; const session = await InferenceSession.create(path); return session.inputNames[0] }; Load_Model(); I don't know the detail about react.Does it need to config?

To reproduce

onnxruntime-web@1.17.0-dev.20240110-5f3113ecd6

Urgency

No response

ONNX Runtime Installation

Built from Source

ONNX Runtime Version or Commit ID

14.1

Execution Provider

'wasm'/'cpu' (WebAssembly CPU)

fs-eire commented 3 months ago

It is related to deploying WebAssembly files. Please refer to https://github.com/microsoft/onnxruntime/issues/19831#issuecomment-1986587685.

BTW, before version 1.19.0-dev.20240521-068bb3d5ee, the version of WebAssembly file need to match the JS file.

tanggang1997 commented 3 months ago

关于部署 WebAssembly 文件有关。请参考#19831 (评论)。

顺便说一句，在 1.19.0-dev.20240521-068bb3d5ee 版本之前，WebAssembly 的版本需要与 JS 的版本相匹配。 First: But i have setted :env.wasm.wasmPaths = window.location.origin + "/node_modules/onnxruntime-web/dist/"; I don't understand "The .wasm files are correctly deployed" ,can you tell me about the detail? Second: So I just upgarde the onnruntime-web version to 1.19.0-dev.20240521-068bb3d5ee?

fs-eire commented 3 months ago

env.wasm.wasmPaths = window.location.origin + "/node_modules/onnxruntime-web/dist/";

If you set this in the code, you also need to make sure the file is served by the server. I know that React has "dev" mode and "production" mode, and they may treat asset deployment differently. I am not an expert of React, so I cannot figure out the detail; but the whole idea is to make sure the URL of the .wasm file is actually valid ( which can be verified in your browser devtool, "Network" tab )

tanggang1997 commented 3 months ago

env.wasm.wasmPaths = window.location.origin + "/node_modules/onnxruntime-web/dist/";

If you set this in the code, you also need to make sure the file is served by the server. I know that React has "dev" mode and "production" mode, and they may treat asset deployment differently. I am not an expert of React, so I cannot figure out the detail; but the whole idea is to make sure the URL of the .wasm file is actually valid ( which can be verified in your browser devtool, "Network" tab )

Thank you very much!!! I have setted like this:ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.15.0/dist/"; but it also gives me error. Now, I want to ensure that wheather i need to upgarde the onnxruntime-web

fs-eire commented 3 months ago

env.wasm.wasmPaths = window.location.origin + "/node_modules/onnxruntime-web/dist/";

If you set this in the code, you also need to make sure the file is served by the server. I know that React has "dev" mode and "production" mode, and they may treat asset deployment differently. I am not an expert of React, so I cannot figure out the detail; but the whole idea is to make sure the URL of the .wasm file is actually valid ( which can be verified in your browser devtool, "Network" tab )

Thank you very much!!! I have setted like this:ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.15.0/dist/"; but it also gives me error. Now, I want to ensure that wheather i need to upgarde the onnxruntime-web

You have 3 options:

keep using env.wasm.wasmPaths = window.location.origin + "/node_modules/onnxruntime-web/dist/";, but you need to make sure the .wasm files are served correctly. For example, if your HTML is at http://localhost:8080/my/index.html, you need to make sure http://localhost:8080/my/node_modules/onnxruntime-web/dist/ort-wasm-simd.wasm can be accessed. This can be easily validated via browser. Usually the node_modules folder is excluded in dev server so you are unlikely to access that URL. A common way to deploy WASM is to copy the .wasm files into your public folder and set env.wasm.wasmPaths to there.
you can use env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/..." but as I mentioned above, please make sure the version is matched. If you are using version onnxruntime-web@1.17.0-dev.20240110-5f3113ecd6 you cannot use wasmPath pointing to version 1.15.0
You can also upgrade to onnruntime-web version to 1.19.0-dev.20240521-068bb3d5ee; but you still to choose either serve the .wasm yourself or point path to CDN.

github-actions[bot] commented 2 months ago

This issue has been automatically marked as stale due to inactivity and will be closed in 30 days if no further activity occurs. If further support is needed, please provide an update and/or more details.

microsoft / onnxruntime