エラー

前回のonnxruntime-webのimport時のエラーを解決して、 実際に使っていこうとしたところ再びエラーが出ました。

onnxファイルをすでにpublicフォルダーにmodel.onnxという名前で入れている状態で、
以下のコードを実行した時にエラーが発生しました。

import { onMounted } from "vue";
import * as ort from "onnxruntime-web";

onMounted(async () => {
  // ↓エラーが起きた箇所
  const session = await ort.InferenceSession.create("/model.onnx");
});

importしてsession作成部分でエラーになりました。 今回は、ブラウザ上でエラーが出ていました。

下がエラーの内容です。

Failed to load resource: the server responded with a status of 404 (Not Found)

wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok

falling back to ArrayBuffer instantiation

Failed to load resource: the server responded with a status of 404 (Not Found)

Aborted(both async and sync fetching of the wasm failed)

failed to asynchronously prepare wasm: RuntimeError: Aborted(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.

Aborted(RuntimeError: Aborted(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.)

[Vue warn]: Unhandled error during execution of mounted hook 
  at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy > > 
  at <RouterView> 
  at <App>

Uncaught (in promise) Error: no available backend found. ERR: [wasm] RuntimeError: Aborted(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
    at resolveBackend (backend-impl.ts:93:9)
    at async InferenceSession.create (inference-session-impl.ts:188:21)
    at async HomeView.vue:8:19

最後のエラー見ると、wasmの取得に失敗と書いてあったのでwasm関連で調べてみました。
onnxruntime-webのvueのデモにて、wasmファイルのコピーをしているスクリプトが ありました。
中身は、onnrutnime-webのライブラリの中にある.wasmファイルを出力フォルダーにコピーしていました。
どうやらwasmファイルのコピーが必要なようでした。

実際に下記のような方法でwasmファイルをコピーしてみるとエラーが出なくなりました。

解決法

onnxruntime-webライブラリの中の.wasmファイルを出力フォルダーにコピーします。

vue3でviteを使っているので、コピー用のviteのプラグインを追加します。

npm i -D vite-plugin-static-copy

vite.config.tsにコピーの設定を追加します。 node_modules/onnxruntime-web/dist/にあるすべての.wasmファイルをコピーするようにしました。
destに設定するのはビルドの出力ファイルルートからの相対パス。

// 省略
import { viteStaticCopy } from "vite-plugin-static-copy";

export default defineConfig({
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: "./node_modules/onnxruntime-web/dist/*.wasm",
          dest: "./",
        },
      ],
    }),
  ],
// 省略

これで先ほどのエラーが解決されました。

参考

• https://github.com/microsoft/onnxruntime-web-demo