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?

Answer 1

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, ...)