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

[tanggang1997]

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/[email protected]/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

[email protected]

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]

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]

关于部署 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]

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]

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/[email protected]/dist/"; but it also gives me error. Now, I want to ensure that wheather i need to upgarde the onnxruntime-web

[fs-eire]

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/[email protected]/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 [email protected] 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]]

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.

[snnn]

This issue has been automatically closed as 'not planned' because it has been marked as 'stale' for more than 30 days without activity. If you believe this is still an issue, please feel free to reopen it.