この記事は、以下のニュースに書かれていた「ONNX Runtime Web（ORT Web）」の一部を試してみたり、関連情報を見てみたという話です。
●マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開 － Publickey
ブログ書きました： マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開 https://t.co/6y4XXjo1S1
— Publickey (@publickey) September 5, 2021
情報をたどってサンプルを動かすまで
情報をたどる
上記の記事の最初に、以下のリポジトリへのリンクがはられていました。
●onnxruntime/js/web at master · microsoft/onnxruntime
https://github.com/microsoft/onnxruntime/tree/master/js/web#readme
そして、中を見ていくと以下の「Usage」の説明がありました。
そして、上記のONNX Runtime JavaScript examplesの先を見てみます。
そして、ONNX Runtime JavaScript examples の中にも「Usage」の項目があります。
その中の「Quick Start」は以下の 3種類があります。
個人的には、TensorFlow.js等を HTML＋JavaScript でという感じのことを好んでやっていたりするので、Web (using script tag) を深掘りしてみます。
Web (using script tag) のサンプルを試す
「Web (using script tag) のクイックスタート」は、ページ内はシンプルでした。
ちなみに、リポジトリ内のファイルも以下の 3つだけ。
HTMLファイルの中身を見ていってみます。
<!DOCTYPE html>
<html>
<header>
<title>ONNX Runtime JavaScript examples: Quick Start - Web (using script tag)</title>
</header>
<body>
<!-- import ONNXRuntime Web from CDN -->
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
<script>
// use an async context to call onnxruntime functions.
async function main() {
try {
// create a new session and load the specific model.
//
// the model in this example contains a single MatMul node
// it has 2 inputs: 'a'(float32, 3x4) and 'b'(float32, 4x3)
// it has 1 output: 'c'(float32, 3x3)
const session = await ort.InferenceSession.create('./model.onnx');
// prepare inputs. a tensor need its corresponding TypedArray as data
const dataA = Float32Array.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
const dataB = Float32Array.from([10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]);
const tensorA = new ort.Tensor('float32', dataA, [3, 4]);
const tensorB = new ort.Tensor('float32', dataB, [4, 3]);
// prepare feeds. use model input names as keys.
const feeds = { a: tensorA, b: tensorB };
// feed inputs and run
const results = await session.run(feeds);
// read from results
const dataC = results.c.data;
document.write(`data of result tensor 'c': ${dataC}`);
} catch (e) {
document.write(`failed to inference ONNX model: ${e}.`);
}
}
main();
</script>
</body>
</html>
内容を見た感じだと、先ほどのリポジトリ内にあった「model.onnx」を読み込んで使えば、この処理を実行できそうです。
ファイル読み込みを伴うので、HTMLファイルを直接ブラウザにドラッグ＆ドロップして実行というわけにはいかないため、ローカルでサーバを実行します。
「Web (using script tag) のクイックスタート」では、 npx light-server -s . -p 8080 というコマンドで light-server を使ってサーバを動かしていましたが、自分の場合は Python のワンライナーWebサーバを使いました。
そして、ブラウザからローカルサーバのアドレスでアクセスし、処理を実行してみます。
そうすると、ブラウザ上に以下の結果が表示されました。
このプログラムの内容は、3行4列の行列と4行3列の行列の2つの行列の積を求めるもののようなので、結果が正しいか確認してみます。
適当にググってでてきた以下のサイトで、今回の行列の積の計算を行ってみます。
●行列の積 - 高精度計算サイト
https://keisan.casio.jp/exec/system/1308269580
計算結果は以下のとおりで、先ほどブラウザ上に表示されたものと一致していそうです。
もう少し関連情報を見てみる
とりあえずサンプルは簡単に動かせたのですが、冒頭の記事にあった以下の部分の話には触れられずでした。
どうやら、以下の記事にもう少し情報がありそうなので、少し見てみます。
●ONNX Runtime Web—running your machine learning model in browser - Microsoft Open Source Blog
https://cloudblogs.microsoft.com/opensource/2021/09/02/onnx-runtime-web-running-your-machine-learning-model-in-browser/
モデルの準備
「Get Started」の中に書かれた内容を見ると、ONNX形式のモデルを準備すれば、もう少しいろいろなことができそうです。
TensorFlow・PyTorch等でモデルを作って変換するか、ONNX Model Zoo からモデルを持ってくるか、という感じのことが書いてあります。
ブラウザ上で推論を実行
さらに「Get Started」の中を読み進めていくと、ブラウザ上で推論を実行する話が書かれていそうでした。
さらに読み進めると、以下に「ONNX Runtime Web」というリンクがありました。
リンク先を見ると、画像分類や他のいくつかのサンプルがありそうでした。
とりあえず、一番上の画像分類が試せそうな「MobileNet, trained on ImageNet
」を開いてみます。
バックエンドを「GPU-WebGL」か「CPU-WebAssembly」のどちらかにして、画像分類を実行できそうな感じです。
画像は、既に用意されたものを選ぶか、自分でアップロードすることができるようでした。
とりあえず、既に用意されている画像を選んで動作確認をしてみました。
試しに「coffee」を選ぶと、以下のような推論の結果が表示されるのが確認できました。
上記の左上から開けるメニューを開いて、その中のリンクの 1つを見るとさらに情報が書かれていそうでしたが、今回の記事はここまでにしておこうと思います。
●microsoft/onnxruntime-web-demo: demos to show the capabilities of ONNX Runtime Web
https://github.com/Microsoft/onnxruntime-web-demo
まとめ
今回、情報を見かけて気になった「ONNX Runtime Web（ORT Web）」に関する内容を試してみました。
画像分類等のデモの実装の話はまだ見られてないので、別途、調べて記事にできればと思います。