青いセーターを着た人がコンピュータで作業している
Microsoft Base ロゴ

技術ブログ

Azureに関する技術情報

ONNX Runtime Web – 機械学習モデルをブラウザーで実行

Open Source

本ポストは以下の記事の翻訳です。

ONNX Runtime Web—running your machine learning model in browser – Microsoft Open Source Blog

2021 年 9 月 2 日

Emma Ning

Emma Ning, Principal Program Manager, AI Frameworks

Yulong Wang

Senior Software Engineer, AI Frameworks

Du Li

Senior Software Engineer, AI Frameworks

AI + 機械学習, プロジェクト更新情報

マイクロソフトは、ONNX Runtime の新機能 ONNX Runtime Web (ORT Web) を発表いたします。これは、JavaScript 開発者によるブラウザーを使った機械学習モデルの実行とデプロイを可能にし、新たなクラスのオンデバイス計算の実現を支援するものです。ORT Web には、サーバーサイドとクライアントサイドの推論用パッケージ間における開発者エクスペリエンスの一貫性向上、推論のパフォーマンス強化、対応モデルの拡張といった改善が追加されており、間もなく廃止される onnx.js は、この ORT Web に置き換えられます。このブログでは、ORT Web の概要と、実際に試してみる際に役立つリソースを紹介します。

ONNX Runtime (ORT) の概要

ONNX Runtime は、あらゆる種類の機械学習モデルを実行できる、高パフォーマンスのクロスプラットフォーム推論エンジンです。TensorFlow、PyTorch、SciKit Learn などの主要なトレーニング フレームワークをすべてサポートする ONNX Runtime は、さまざまなハードウェア プラットフォームとソフトウェア プラットフォームでモデルを実行する AI 開発者に、利便性の高い環境を提供することを目的としています。ONNX Runtime は、サーバーサイドの推論を高速化するだけでなく、ONNX Runtime 1.5 以降では、ONNX Runtime for Mobile も提供されています。今回 ONNX Runtime 1.8 のリリースに合わせて、ORT Web が新たに提供されたことで、ブラウザー内での推論が可能になりました。

ORT Web によるブラウザー内推論

機械学習ベースの Web アプリケーションをブラウザー内でいかに実行するかは、AI コミュニティの大きな注目を集めています。プログラミング言語やデプロイメント環境の違いから、ネイティブの AI アプリケーションに複数なプラットフォームへの移植性を追加することは困難です。ただし Web アプリケーションであれば、ブラウザー経由で同じ実装を使用することで、クロスプラットフォームの移植性を簡単に実現できます。また、機械学習モデルをブラウザーで実行することで、サーバーとクライアント間の通信量削減によりパフォーマンスを向上させることができます。さらに、ライブラリやドライバーの追加インストールが不要になることで配布も簡素化できます。

動作のメカニズム

ORT Web は、Web ブラウザー内でのモデル推論を CPU と GPU の両方で高速化します。これには WebAssembly (WASM) バックエンドと WebGL バックエンドがそれぞれ使用されます。CPU による推論では、ORT Web はネイティブの ONNX Runtime CPU エンジンを、Emscripten を使用して WASM バックエンドにコンパイルします。ORT Web による GPU 上の高パフォーマンス実現には、GPU 機能へのアクセスに広く使用されている標準である WebGL が採用されています。

図 1:ORT Web の概要

CPU 用の WebAssembly (WASM) バックエンド

WebAssembly により、サーバーサイドのコードをブラウザー内のクライアントサイドで使用できるようになります。WebAssembly 以前は、ブラウザーで利用できるのは JavaScript だけでした。JavaScript と比べると、WebAssembly には、読み込み時間の高速化や実行効率などのメリットがあります。さらに WebAssembly は SharedArrayBuffer、Web ワーカー、SIMD128 (128 ビット Single Instruction Multiple Data) の利用によりマルチスレッドをサポートするため、データ一括処理を高速化できます。Web 上でネイティブに近い速度でモデルを実行する手法としての WebAssembly の魅力は、こうした要素にあります。

マイクロソフトでは、オープン ソースのコンパイラ ツールチェーン Emscripten を使用して ONNXRuntime C++ コードを WebAssembly にコンパイルし、ブラウザーで読み込めるようにすることで、ONNX Runtime コアとネイティブの CPU エンジンを再利用できるようにしています。これにより、ORT Web WASM バックエンドがあらゆる ONNX を実行できるようになり、量子化された ONNX モデルミニ ランタイムといったネイティブの ONNX Runtime が提供する機能の大部分を、ORT Web WASM バックエンドがサポートできるようになります。マルチスレッディングと WebAssembly の機能を使用することで、モデル推論がさらに高速化されます。SIMD は新機能であり、WebAssembly をサポートするブラウザーの一部で利用できない場合がある点に注意してください。WebAssembly 機能をサポートするブラウザーは、webassembly.org Web サイトで確認できます。

ORT Web は、初期化中にランタイム環境の機能をチェックして、マルチスレッディング機能と SIMD 機能を利用できるかを検出します。利用できない場合、環境に応じたフォールバック バージョンを利用できます。たとえば Mobilenet V2 の場合、2 つのスレッドを同時実行し SIMD を有効化することで、これら 2 つの機能を使用しない純粋な WebAssembly と比較して、CPU の推論パフォーマンスを 3.4 倍高速化できます。

図 2:WebAssembly でマルチスレッディングと SIMD を有効化し、CPU 上で 3.4 倍のパフォーマンス高速化を実現 (テスト マシン: プロセッサ: Intel(R) Xeon(R) CPU E3-1230 v5 @ 3.40GHz、3401 Mhz、4 コア、論理プロセッサ 8 基)

GPU 用の WebGL バックエンド

WebGL は OpenGL ES 2.0 標準準拠の JavaScript API で、あらゆる主要ブラウザーと、Windows、Linux、macOS、Android、iOS などのさまざまなプラットフォームでサポートされています。ORT Web の GPU バックエンドは WebGL を基盤に構築されており、サポートされるさまざまな環境と連携して動作します。これにより、プラットフォームの違いを越えたディープ ラーニング モデルの移植が可能になります。

移植性だけではありません。ORT の WebGL バックエンドは、パック モード、データ キャッシュ、コード キャッシュ、ノード フュージョンなどの最適化機能を展開することで、卓越した推論パフォーマンスを提供します。パック モードにより、並列性を向上させつつ、メモリ フットプリントを最大 75% 削減できます。ORT Web は、同じ GPU データを何度も作成しないよう、GPU データ (テクスチャ) を可能な限り再利用しています。WebGL では、OpenGL Shading Language (GLSL) を使用してシェーダーを構築し、GPU プログラムを実行しますが、シェーダーは実行時にコンパイルする必要があり、許容水準を超えるオーバーヘッドが発生します。コード キャッシュによって各シェーダーのコンパイルが 1 回限りになることで、この問題が解決されます。WebGL バックエンドでは、一般的なノード フュージョンを数多く実行できます。また、グラフ最適化インフラストラクチャを活用することで、グラフベースの最適化を数多くサポートする予定です。

WASM バックエンドはすべての ONNX 演算子をサポートし、WebGL バックエンドは一部の演算子をサポートします。各バックエンドでサポートされる演算子は、こちらで確認できます。ORT Web で各バックエンドがサポートする、互換性のあるプラットフォームは以下のとおりです。

図 3:ORT Web がサポートする、互換性のあるプラットフォーム

利用開始

このセクションでは、ORT Web を組み込んで、機械学習を基盤とする Web アプリケーションを構築する方法を説明します。

ONNX モデルを入手する

ONNX が備えるフレームワークの相互運用性により、ONNX をサポートするあらゆるフレームワークでトレーニングされたモデルを ONNX に変換できます。モデルを ONNX にエクスポートするには、PyTorch に組み込まれた API である Torch.onnx.export を使用できます。TensorFlow および TensorFlow Lite から ONNX へのモデル変換には、標準のツール Tensorflow-ONNX を使用可能です。また、ONNX Model Zoo に用意されている、一般的な各種シナリオに対応したさまざまな事前トレーニング済み ONNX モデルを使用することで、作業初期の負担を軽減できます。

ブラウザーで ONNX モデルを推論する

ORT-Web を使用するには、スクリプト タグまたはバンドラーの 2 種類の方法があります。モデルをスコアリングする ORT Web の API は、ネイティブの ONNX Runtime と同様に、最初にモデルを使用して ONNX Runtime の推論セッションを作成し、次に入力データを使用してセッションを実行します。マイクロソフトでは、一貫性のある開発エクスペリエンスの提供を通して、開発者が ONNX Runtime を使用して異なるプラットフォームのアプリケーションやサービスに ML を連携する場合の、時間と労力を削減することを目指しています。

以下のコード スニペットは、ORT Web API を呼び出して異なるバックエンドでモデルを推論する方法を示しています。

const ort = require('onnxruntime-web');
		// create an inference session, using WebGL backend. (default is 'wasm')
		const session = await ort.InferenceSession.create('./model.onnx', { executionProviders: ['webgl'] });
		…
		// feed inputs and run
	const results = await session.run(feeds);

図 4:ORT Web API のコード スニペット

最大数のスレッドの設定や SIMD の有効化/無効化などの高度な機能は、`ort.env` オブジェクトの設定プロパティで構成できます。

// set maximum thread number for WebAssembly backend. Setting to 1 to disable multi-threads
		ort.wasm.numThreads = 1;
		// set flag to enable/disable SIMD (default is true)
	ort.wasm.simd = false;

図 5:ORT Web の設定プロパティのコード スニペット

推論のために ORT Web に入力する前に、前処理と後処理を JS で実行する必要があります。ORT Web のデモでは、画像モデルと ORT Web を使用したブラウザー内ビジョンの興味深いシナリオをいくつか確認することができます。ORT Web による画像入力処理と推論などのコード ソースも確認できます。クラウド アドボケイトのカリキュラム チームが作成した別の E2E チュートリアルでは、おすすめ料理の Web アプリを ORT Web で開発する方法を紹介しています。ここでは、Scikit-Learn モデルを ONNX にエクスポートする方法や、スクリプト タグを使用してモデルを ORT Web で実行する方法などを解説しています。

図 6:ORT Web によるおすすめ料理の Web アプリ

今後の展望

今回の記事で、実際の Web アプリケーションで ORT Web をお試しいただければ幸いです。ご意見やご提案もぜひお聞かせください。また、GitHub リポジトリ (ONNX Runtime) への参加やコメントの投稿もお待ちしております。私たちは引き続き、パフォーマンスの向上、対応モデルの拡大、新機能の追加に取り組んでまいります。現在は、ORT Web の新たな可能性を感じる興味深い分野として、デバイス上のトレーニングについて調査を進めたいと考えています。ぜひご期待ください。

< 前の記事

> 次の記事

ページの先頭へ戻る