ウェブ向けのビルド

クラウドからエッジまで – このレイヤーは、ワークロードがどこで実行されても、柔軟性とパフォーマンスを保証します。Foundryは、クラウドからエッジまでシームレスに拡張できるように設計されており、Foundry Localはすでに何億ものWindows（およびMac）デバイスで稼働しています。

ONNX Runtimeをウェブ向けにビルドする

ONNX Runtime Webをビルドするには2つのステップがあります。

• ONNX Runtime WebAssemblyアーティファクトの取得 - 以下によって行うことができます -
  • ONNX RuntimeをWebAssembly向けにビルドする
  • ビルド済みアーティファクトをダウンロードする以下の手順
• onnxruntime-web（NPMパッケージ）のビルド
  • このステップにはONNX Runtime WebAssemblyアーティファクトが必要です

目次

• TOCプレースホルダー

ONNX Runtime Webassemblyアーティファクトのビルド

前提条件

• ソースツリーをチェックアウトする：

  git clone --recursive https://github.com/Microsoft/onnxruntime
  cd onnxruntime

• cmake-3.26以上をインストールする。

• Node.js（16.0+、18.0+を推奨）をインストールする。

  • （オプション）nvm（Windows / Mac/Linux）を使用してNode.jsをインストールする。

• Python（3.9+）：https://www.python.org/downloads/

  • pythonをPATH環境変数に追加する必要があります。

• Ninja：https://ninja-build.org/

  pip install ninja

• emsdkの準備： emsdkは<ORT_ROOT>/cmake/external/emsdk/emsdkに自動的にインストールされるはずです。フォルダ構造が存在しない場合は、<ORT_ROOT>/で次のコマンドを実行してgitサブモジュールをインストールします。

  git submodule sync --recursive
  git submodule update --init --recursive

  （Windowsを使用している場合は、この手順をスキップできます）<ORT_ROOT>/cmake/external/emsdk/で、次のコマンドを実行してemsdkを設定します。

  ./emsdk install latest
  ./emsdk activate latest
  source ./emsdk_env.sh

ビルド手順

ONNX Runtime WebAssemblyは、マルチスレッドおよび単一命令複数データ（SIMD）サポートの有無にかかわらずビルドできます。 このサポートは、ビルドコマンドに次のフラグを追加/削除することで追加/削除されます。デフォルトのビルドオプションはなしです。

ビルドフラグ	使用法
--enable_wasm_threads	マルチスレッドサポートでビルド
--enable_wasm_simd	SIMDサポートでビルド

ONNX Runtime Webは、JavaScript実行プロバイダー（JSEP）を介してWebGPUおよびWebNNをサポートしてビルドできます。JSEPサポートでビルドするには、フラグ--use_jsepを使用します。WebNNサポートをビルドするには、追加のフラグ--use_webnnが必要です。

ONNX Runtime Webは、トレーニングAPIをサポートするようにビルドすることもできます。トレーニングAPIを含めてビルドするには、フラグ--enable-training-apisを使用します。

ONNX Runtime Webの完全なビルドのWebAssemblyアーティファクトには、3つの「.wasm」ファイルと3つの「.mjs」ファイルが含まれます。 以下のビルドコマンドは、各構成に対して実行する必要があります。

<ORT_ROOT>/で、次のいずれかのコマンドを実行してWebAssemblyをビルドします。

# Windowsでは、'./build.sh'の代わりに'build'を使用します
# Release & Debug + 'debug info'構成では'--skip_tests`を使用することをお勧めします - 詳細についてはFAQを確認してください

# 次のコマンドはデバッグをビルドします。
./build.sh --build_wasm --enable_wasm_simd --enable_wasm_threads

# 次のコマンドはデバッグ情報付きでデバッグをビルドします。
./build.sh --build_wasm --enable_wasm_simd --enable_wasm_threads --skip_tests --enable_wasm_debug_info

# 次のコマンドはリリースをビルドします。
./build.sh --config Release --build_wasm --skip_tests --disable_wasm_exception_catching --disable_rtti

必要なビルドアーティファクトの完全なリスト：

ファイル名	使用されたビルドフラグ
ort-wasm-simd-threaded.wasm	--enable_wasm_simd --enable_wasm_threads
ort-wasm-simd-threaded.mjs	--enable_wasm_simd --enable_wasm_threads
ort-wasm-simd-threaded.jsep.wasm	--use_jsep --use_webnn --enable_wasm_simd --enable_wasm_threads
ort-wasm-simd-threaded.jsep.mjs	--use_jsep --use_webnn --enable_wasm_simd --enable_wasm_threads
ort-training-wasm-simd.wasm	--enable_wasm_simd --enable_wasm_threads --enable_training_apis
ort-training-wasm-simd.mjs	--enable_wasm_simd --enable_wasm_threads --enable_training_apis

注：

• ONNX Runtime Webは、v1.19.0以降の将来のバージョンで、非SIMDおよび非スレッドビルドのサポートを廃止します。
• WebGPUおよびWebNNは、現在ONNX Runtime Webの実験的な機能としてサポートされています。ビルド手順は変更される可能性があります。ORT Web WebGPUおよびWebNNの詳細なビルド/使用手順については、webgpu gistおよびwebnn gistの最新ドキュメントを必ず参照してください。

最小ビルドサポート

ONNX Runtime WebAssemblyは、フラグ--minimal_buildを使用してビルドできます。これにより、より小さなアーティファクトが生成され、ランタイムメモリ使用量も少なくなります。 このONNX Runtime構成を使用するには、ORT形式のモデルが必要です（ONNX形式に対して）。 詳細については、ORT形式への変換も参照してください。

FAQ

Q：リリースビルドでunittestが失敗します。

A：unittestが正しく動作するにはC++例外が必要です。ただし、パフォーマンス上の懸念から、emscriptenでの例外キャッチを無効にしています。したがって、リリースビルドでは--skip_testsを指定してください。

Q：デバッグ情報付きのデバッグビルドでunittestが失敗します。

A：デバッグ情報付きでビルドすると、非常に巨大なアーティファクト（unittestの場合は>1GB）が生成され、Node.jsでロードできません。したがって、デバッグ情報付きのビルドでは--skip_testsを指定してください。

Q：ウェブシナリオ用のC++プロジェクトがあり、ONNX Runtimeを使用してMLモデルを実行し、WebAssemblyを出力として生成します。ONNX Runtime Webは静的WebAssemblyライブラリをサポートしていますか？これにより、アプリケーションがそれとリンクし、すべてのプリ/ポストプロセッサをWebAssemblyにまとめてコンパイルできますか？

A：--build_wasmを使用すると、ビルドスクリプトはウェブシナリオ用の.wasmおよび.jsファイルを生成し、中間ライブラリは他のC/C++プロジェクトと適切にリンクされません。--build_wasmの代わりに--build_wasm_static_libを使用してONNX Runtime Webをビルドすると、ビルドスクリプトは出力ディレクトリにlibonnxruntime_webassembly.aという名前のONNX Runtime Webの静的ライブラリを生成します。ユニットテストのような単純な推論を実行するには、次の3つのヘッダーファイルとlibonnxruntime_webassembly.aが必要です。

• include/onnxruntime/core/session/onnxruntime_c_api.h
• include/onnxruntime/core/session/onnxruntime_cxx_api.h
• include/onnxruntime/core/session/onnxruntime_cxx_inline.h

重要な注意点の1つは、ONNX Runtimeがprotobuf、onnxなどの多くのサードパーティライブラリに依存していることです。必要なヘッダーファイルをプロジェクトにコピーする必要がある場合があります。また、ONNX Runtimeとプロジェクト間のライブラリバージョンの競合やemsdkバージョンの競合の場合にも注意が必要です。

onnxruntime-web - NPMパッケージのビルド

以下のセクションは、onnxruntime-web NPMパッケージのステップバイステップのインストールガイドです。 これはビルドプロセスの最終段階です。セクションを順番に実行してください。

前提条件

• Node.js（16.0+、18.0+を推奨）をインストールする。

  • （オプション）nvm（Windows/Mac/Linux）を使用してNode.jsをインストールする。

• テストを実行するためのChromeまたはEdgeブラウザ。

NPMパッケージのインストール

1. <ORT_ROOT>/js/で、npm ciを実行します。
2. <ORT_ROOT>/js/common/で、npm ciを実行します。
3. <ORT_ROOT>/js/web/で、npm ciを実行します。

ONNX Runtime WebAssemblyアーティファクトの準備

ビルド済みのアーティファクトを使用するか、自分でビルドすることができます。

• スクリプトによるセットアップ。

  <ORT_ROOT>/js/web/で、npm run pull:wasmを実行して、CIパイプラインから最新のマスターブランチのWebAssemblyアーティファクトをプルします。使用方法の詳細については、npm run pull:wasm helpを使用してください。

  注：このスクリプトは、WebAssemblyビルドアーティファクトを上書きします。アーティファクトの一部をソースからビルドする場合、一般的な方法は、npm run pull:wasmを実行してビルド済みアーティファクトの完全なセットをプルし、次にビルドアーティファクト（以下の手順に従います）をターゲットフォルダーにコピーすることです。これにより、6回ビルドする必要がなくなります。

• パイプラインからアーティファクトを手動でダウンロードします。

  Windows WebAssembly CIパイプラインからビルド済みのWebAssemblyアーティファクトをダウンロードできます。ビルドを選択し、アーティファクト「Release_wasm」をダウンロードして解凍します。ファイルを宛先フォルダーに配置するには、以下の手順を参照してください。

• WebAssemblyアーティファクトをビルドします。

  1. ONNX Runtime WebAssemblyをビルドします。

     ONNX Runtime WebAssemblyをビルドするには、上記の手順に従ってください。

  2. 次のファイルをビルド出力フォルダーから<ORT_ROOT>/js/web/dist/にコピーします（フォルダーが存在しない場合は作成します）。

     • ort-wasm-simd-threaded.wasm（フラグ--enable_wasm_threads --enable_wasm_simdでビルド）
     • ort-wasm-simd-threaded.mjs（フラグ--enable_wasm_threads --enable_wasm_simdでビルド）
     • ort-wasm-simd-threaded.jsep.wasm（フラグ--use_jsep --use_webnn --enable_wasm_simd --enable_wasm_threadsでビルド）
     • ort-wasm-simd-threaded.jsep.mjs（フラグ--use_jsep --use_webnn --enable_wasm_simd --enable_wasm_threadsでビルド）
     • ort-training-wasm-simd-threaded.wasm（フラグ--enable_wasm_simd --enable_wasm_threads --enable_training_apisでビルド）
     • ort-training-wasm-simd-threaded.mjs（フラグ--enable_wasm_simd --enable_wasm_threads --enable_training_apisでビルド）

onnxruntimeビルドの最終処理

<ORT_ROOT>/js/webフォルダーで次のコマンドを使用してビルドします。

npm run build

これにより、使用する最終的なJavaScriptバンドルファイルが生成されます。これらは<ORT_ROOT>/js/web/distフォルダーにあります。