ONNX RuntimeでWebアプリケーションを構築する

このドキュメントでは、ONNX RuntimeでWebアプリケーションを構築するためのオプションと考慮事項について説明します。

デプロイターゲットのオプション

ブラウザでの推論

ランタイムとモデルがクライアントにダウンロードされ、ブラウザ内で推論が行われます。このシナリオではonnxruntime-webを使用します。
サーバーでの推論

ブラウザがユーザーの入力をサーバーに送信し、サーバーが推論を行い結果を取得してクライアントに返送します。

最良のパフォーマンスを得るために、ネイティブONNX Runtimeを使用します。

サーバーアプリケーションとしてNode.jsを使用する場合、サーバーでonnxruntime-node（ONNX Runtime node.jsバインディング）を使用します。
Electron

Electronはフロントエンド（chromiumに基づく、技術的にはブラウザコア）とバックエンド（Node.jsに基づく）を使用します。

可能であれば、バックエンドでの推論にonnxruntime-nodeを使用してください（より高速です）。セキュリティと互換性の懸念から、フロントエンドでonnxruntime-webを使用することもオプションです。
React Native

React-nativeはreactjsと同じAPIを使用するフレームワークですが、モバイルでWebアプリではなくネイティブアプリケーションを構築します。onnxruntime-react-nativeを使用する必要があります。

Webアプリのシナリオを理解し、そのシナリオに適したONNXモデルを取得する必要があります。

ONNXモデルはONNX model zooから取得したり、PyTorchまたはTensorFlowから変換したり、その他の多くの場所から取得できます。

ONNX形式のモデルをORT形式のモデルに変換して、バイナリサイズの最適化、初期化の高速化、ピークメモリ使用量を最適化できます。

モデル固有のカスタムビルドを実行して、バイナリサイズをさらに最適化できます。

vuejs、reactjs、angularjsなどの選択したWebフレームワークに従ってWebアプリケーションをブートストラップします。

ONNX Runtimeで機械学習を追加している既存のWebアプリケーションがある場合は、この手順をスキップできます。

onnxruntime-webをインストールします。これらのコマンドラインはアプリケーションのpackage.jsonファイルを更新します。

yarn add onnxruntime-web

npm install onnxruntime-web

ナイトリービルドを使用するには、パッケージ名に”@dev”を追加します（例：npm install onnxruntime-web@dev）。

詳細についてはONNX Runtime Web API docsを参照してください。

生の入力は通常、NLPモデルの場合は文字列、画像モデルの場合は画像です。これらは複数の形式と形式から来ます。

JS/wasmでトークナイザーを使用して数値データに前処理し、そのデータからテンソルを作成してORTにフィードしてモデル推論を実行します。
1つ以上のカスタム演算子を使用して文字列を処理します。カスタム演算子でビルドします。モデルは文字列テンソル入力を直接処理できます。onnxruntime-extensionsライブラリを参照してください。これには可能なカスタム演算子のセットが含まれています。

JS/wasmライブラリを使用してデータを前処理し、モデルの要件を満たす入力としてテンソルを作成します。ONNX Runtime Webを使用した画像分類チュートリアルを参照してください。
モデルを変更して前処理を演算子としてモデル内に含めます。モデルは特定のWeb画像形式（例：canvasからのビットマップまたはテクスチャ）を期待します。

モデルの出力は多様であり、ほとんどのものは独自の後処理コードを必要とします。上記のチュートリアルをJavaScript後処理の例として参照してください。

[このセクションは近日公開予定]