Load onnx model in browser, can't find wasm file

Question

Just trying to load an .onnx model that I have into browser using onnxruntime-web

The code is run in a React app using a vite server,

import * as ort from 'onnxruntime-web';

const App = () => {

    const create = async () => {
        const session = await ort.InferenceSession.create('./src/assets/silero_vad.onnx');
    }
    create();

    return <>Hello world</>
}

export default App

.wasm module fails to load and gives error

GET http://localhost:5173/ort-wasm-simd.wasm net::ERR_ABORTED 404 (Not Found)

Using Google chrome version Google Chrome 112.0.5615.165 on Ubuntu 22.04. No idea how to fix this?

score 2 · Accepted Answer · answered May 05 '23 at 20:40

2

The wasm files have to be served up statically by whichever server you are running, in this case vite. vite has a plugin for copying static files called vite-plugin-static-copy. Add call to viteStaticCopy in your vite.config.js as below

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from 'vite-plugin-static-copy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/onnxruntime-web/dist/*.wasm',
          dest: '.'
        }
      ]
    }),
  ],
})

This will copy all .wasm files to the dist folder in your root directory. Then your code can get the files by calling fetch(local_server_uri/file_to_grab.wasm, ...)

answered May 05 '23 at 20:40

jojeyh

276
1
3
12

You can just put them in the public folder – Minsky Jun 01 '23 at 18:29
Hi, I have a similar problem. Could you elaborate by what you mean by 'just put them in the public folder' ? I am making a react app which will be served statically, without a server. – Frotaur Jul 24 '23 at 09:31
@Frotaur At the top level directory of your project you can create a folder named 'public' and then fetch will automatically look for files there. So another solution to my problem could have been to put all the .wasm/.onnx files I needed and put them in the public folder. Then for example if I have a file `model.onnx` in the `public` directory I can fetch it with `fetch('./model.onnx')` – jojeyh Jul 25 '23 at 16:48
@Frotaur I prefer the solution above because its cleaner and all the files I need from onnxruntime are automatically copied over from node package folder – jojeyh Jul 25 '23 at 16:50
@Frotaur also all react apps have to be served from somewhere? do you mean you're using static hosting? – jojeyh Jul 25 '23 at 16:51
I probably expressed myself poorly, since I'm new to webdev. I just mean that I webpack the app and in the end I am left with an .HTML file with a bunch of javascript, that does not need a 'backend' to run. Of course, the HTML file will be served by a webserver such as nginx an so on. At least that's my understanding. In any case, the .wasm copying trick worked for me, thanks ! – Frotaur Jul 28 '23 at 00:06

Load onnx model in browser, can't find wasm file

1 Answers1