@diatonicの技術ブログ

ONNXがブラウザで動かせる「ONNX.js」誕生 という記事を読んで、早速試しに Chainer モデルを ONNX に変換して Web ブラウザで動かしてみました。

といっても、ほぼ次のページに書いてあることをやっただけです。

準備

まずは Python 側の処理です。Chainer はあらかじめインストールされているものとします。

ONNX-Chainer をインストールします。

$ pip install onnx-chainer

ここで以下に扱うサンプルでは ChainerCV の学習済みモデルを使うので(自前で学習させるのが面倒だった)、ChainerCV もインストールします。自前のモデルを使う場合はインストールの必要はありません。

$ pip install chainercv

Chainer モデルを ONNX に変換

次のコードを記述します(ONNX-Chainer の README.md のコピペです…)。ファイル名は convert_to_onnx.py とします。

import numpy as np

import chainer
import chainercv.links as C
import onnx_chainer

model = C.VGG16(pretrained_model='imagenet')

# Pseudo input
x = np.zeros((1, 3, 224, 224), dtype=np.float32)

onnx_chainer.export(model, x, filename='vgg16.onnx')

実行します。

$ python convert_to_onnx.py

処理が終わると vgg16.onnx というファイルが生成されます。

Web ブラウザで動かす

ここから JavaScript 側の話になります。 自分でちゃんとコードを書きたいところですが、今回はひとまず動きを確かめたいので、ONNX.js 公式のサンプルコードを使ってみます。

Git clone します。

$ git clone git@github.com:Microsoft/onnxjs.git

ONNX.js には ResNet の Example があり、これが使えそうです。ただ、先ほど生成したモデルを使用するので、一箇所コードを変更します。

onnxjs/examples/browser/resnet50/index.js の6行目がモデルを読み込んでいるところなので、先ほど生成した ONNX モデルのパスに書き換えます。ここでは、モデルを onnxjs/examples/browser/resnet50/ ディレクトリ配下に移動させて、次のように書き換えてみることにします。

  await session.loadModel("./vgg16.onnx");

Windows の場合はこれだけで完成ですが、Mac や Linux はこのままでは正常に動かないようです。現状、ONNX.js が Windows 以外の OS において WebGL Backend に対応していないのが理由みたいです(参考)。

index.js の3行目を次のように書き換えたら動くようになりました。

  const session = new onnx.InferenceSession({ backendHint: 'cpu' });

ということでこれでできました。Web サーバを立てて確認してみます。注意として、onnxjs/examples/browser/ のディレクトリで Web サーバを起動してください(ロードするモジュールのパスの関係)。

$ cd onnxjs/examples/browser/
$ python -m http.server    // Python の HTTPServer を使いましたがなんでも構いません
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

ブラウザで http://0.0.0.0:8000/resnet50 にアクセスし、Run ボタンを押します。

しばらくすると予測結果が出てきます。明らかに予測がおかしいですが、一応動いてはいるようです(おかしい原因の一つとして、画像の前処理が元の Chainer のコードと合っていないからなのかなと思っています)。

おわりに

今回はとりあえず動作を確認するだけの雑なまとめになってしまったので、また改めて詳細を追ってみたいと思います。

この記事へのコメント

まだコメントはありません