Web

ONNX Runtimeを使用してWebアプリケーションに機械学習を追加する方法

ONNX Runtime Webは、JavaScript APIとライブラリを使用して、Webアプリケーションで機械学習モデルを実行およびデプロイできるようにします。このページでは、開発プロセスの一般的な流れを説明します。

アプリケーションの開発環境に応じて、他の言語ライブラリを使用してONNX RuntimeでWebアプリケーションのサーバー側に機械学習を統合することもできます。

実際のWeb開発フローの例を見るには、次のチュートリアルの手順に従って、Next.jsを使用して画像を分類するWebアプリケーションを構築してください。

以下の手順の詳細については、ONNX Runtimeを使用したWebアプリケーションの構築リファレンスガイドを参照してください。

ONNX Runtime Webアプリケーション開発フロー

デプロイターゲットとONNX Runtimeパッケージを選択

ONNX Runtimeは、アプリケーションの要件に応じて、Webアプリケーションに統合する方法がいくつかあります。
- ブラウザでの推論。onnxruntime-webパッケージを使用します。
  
  デバイス上およびブラウザ内での推論には、以下の利点があります。
  - 高速です。 低性能のハードウェアで動作するように最適化されたモデルでは、クライアント側で推論を実行することで、推論時間を大幅に短縮できます。
  - 安全性が高く、プライバシーに役立ちます。データが推論のためにデバイスから離れることがないため、より安全な推論方法です。
  - オフラインで動作します。 インターネット接続が失われても、モデルは推論を実行できます。
  - コストが削減されます。 推論をブラウザにオフロードすることで、クラウドサービングコストを削減できます。
  Electronアプリのフロントエンドでも、onnxruntime-webパッケージを使用できます。
  
  onnxruntime-webでは、GPU処理にはwebgl、webgpu、またはwebnn（deviceTypeをgpuに設定）を使用し、CPU処理にはWebAssembly（wasm、cpuのエイリアス）またはwebnn（deviceTypeをcpuに設定）を使用できます。すべてのONNX演算子はWASMでサポートされていますが、WebGL、WebGPU、WebNNでは現在、サブセットのみがサポートされています。
- JavaScriptでサーバーでの推論。onnxruntime-nodeパッケージを使用します。
  
  アプリケーションには、サーバー側で推論を実行する方が適している制約がある場合があります。
  - モデルが大きすぎる場合、より高いハードウェア仕様が必要です。クライアントで推論を実行するには、低性能のハードウェアで効率的に実行できるほど小さいモデルが必要です。
  - モデルをデバイスにダウンロードしたくない場合。
  Electronアプリのバックエンドでも、onnxruntime-nodeパッケージを使用できます。
- 他の言語APIを使用してサーバーで推論。C/C++およびその他の言語用のONNX Runtimeパッケージを使用します。
  - node.jsでWebバックエンドを開発していない場合 Webアプリケーションのバックエンドが別の言語で開発されている場合、選択した言語のONNX Runtime APIを使用できます。
- React Nativeアプリケーションでの推論。onnxruntime-react-nativeパッケージを使用します。
アプリケーションが使用する機械学習モデルは何ですか？

Webアプリのシナリオを理解し、そのシナリオに適したONNXモデルを取得する必要があります。たとえば、アプリは画像を分類するか、ビデオストリームで物体検出を行うか、テキストを要約または予測するか、数値予測を行うかです。

ONNX Runtime Webアプリケーションは、ONNX形式のモデルを処理します。ONNXモデルは、ONNX model zooから取得したり、PyTorchやTensorFlowから変換したり、その他の多くの場所から取得できます。

解決しようとしているタスクに特定のカスタムモデルを作成することもできます。コードを使用してモデルを構築するか、ローコード/ノーコードツールを使用してモデルを作成します。以下のリソースを確認して、カスタマイズされたモデルを作成するさまざまな方法について学習してください。これらのリソースにはすべて、ONNX形式へのエクスポート機能があるため、このテンプレートとソースコードを活用できます。
アプリ開発をどのように開始しますか？

選択したWebフレームワーク（例：vuejs、reactjs、angularjs）に従ってWebアプリケーションをブートストラップします。
アプリケーションを最適化するにはどうすればよいですか？

前の手順で言及したライブラリとモデルは、メモリと処理の要件を満たすように最適化できます。

a. ONNX形式のモデルは、ORT形式に変換できます。これにより、モデルのバイナリサイズの最適化、初期化の高速化、ピークメモリ使用量の削減が可能です。

b. ONNX Runtime自体のサイズは、特定のモデルのみをサポートするカスタムパッケージをビルドすることで削減できます。

c. 異なる実行プロバイダーを試すなど、ONNX Runtime推論セッションオプションを調整します。