皆さんこんにちは
お元気ですか?一人で箱根温泉りらっくすできました。
Keras.jsが出て、遂にKerasをjavascriptを扱えるようになりました。
(これ公式なのかどうかが非常に不安で、きっと違う)
ということで実際に動かしてみようと思います。
Kerasについて
Keras-js
今回扱うのは、Keras-jsです。
github.com
ブラウザ上で、学習したKerasのモデルを走らせ、GPUをWebGLを使って
扱うことができます。Kerasのjsonファイルとhdf5から読み出すことができます。
(backendはTheano,TensorFlowおそらくどちらも可)
ディレクトリ構成
デモのディレクトリ構成を確認します。
treeコマンドを実行すると次のような出力(一部省略)となります。
├── assets │ ├── imdb-bidirectional-lstm.png │ ├── inception-v3.png │ ├── mnist-cnn.png │ ├── mnist-vae.png │ └── resnet50.png ├── base.css ├── data │ ├── imdb_bidirectional_lstm │ │ ├── imdb_bidirectional_lstm.json │ │ ├── imdb_bidirectional_lstm_metadata.json │ │ ├── imdb_bidirectional_lstm_weights.buf │ │ ├── imdb_dataset_test.json │ │ ├── imdb_dataset_word_dict_top20000.json │ │ └── imdb_dataset_word_index_top20000.json │ ├── inception_v3 │ │ ├── inception_v3.json │ │ ├── inception_v3_metadata.json │ │ └── inception_v3_weights.buf │ ├── mnist_cnn │ │ ├── mnist_cnn.json │ │ ├── mnist_cnn_metadata.json │ │ └── mnist_cnn_weights.buf │ ├── mnist_vae │ │ ├── mnist_vae.json │ │ ├── mnist_vae_metadata.json │ │ └── mnist_vae_weights.buf │ └── resnet50 │ ├── resnet50.json │ ├── resnet50_metadata.json │ └── resnet50_weights.buf ├── dist │ └── bundle.js ├── notebooks ├── src ├── webpack.dev.config.js └── webpack.prod.config.js
Demoを動かしてみよう
既に殆どのものは準備されているので、
実は非常に簡単です。
サーバの起動
npmを使ってinstallとサーバの起動を行います。
npm install npm run server
http://127.0.0.1:3000にアクセスすると以下の画面を表示することができます。
ホームには様々な画面があり、サンプルを動かすことができます。
試しにMNISTを動かしてみましょう。
MNISTのDemoでは、四角の枠に絵(数字)を自分で書いて、どのように認識をさせることができるのかを
見ることができます。これを応用すると自分のWebサービスを構築した場合に、
Kerasをブラウザで動作させることができます。
カスタマイズポイント
Demoでは、既に準備されている
モデルを使って、表示をしてみました。TOPのREADME.mdには
他のモデルはどう扱うかなど、カスタマイズのポイントが紹介されているので
それを紹介したいと思います。
Model もしくは、Sequentialの構成の出力
次のようにするとモデルを出力することができます。
model = Sequential() model.add(...) ... model.save_weights('model.hdf5') with open('model.json', 'w') as f: f.write(model.to_json())
hdf5として出力したファイルを変換する。
encoder.pyはkeras-js/encoder.pyに含まれています。
python encoder.py /path/to/model.hdf5
上記を実行すると、model_weights.bufとmodel_metadata.jsonが生成されます。
javascript上でのkerasのNeural Networkの宣言
今まではPython上でしたが、javascriptでは次のように宣言します。
model, weights, metadataの3種類のファイルのパスを宣言すれば良いです。
また、gpuのtrue or falseの宣言が必要となります。
const model = new KerasJS.Model({ filepaths: { model: 'url/path/to/model.json', weights: 'url/path/to/model_weights.buf', metadata: 'url/path/to/model_metadata.json' } gpu: true })
データ形式
javascriptの形式ですが、WebGLのFloat32Arrayで扱います。
MNISTの場合は次の変数宣言がありました。784次元の配列の宣言です。
this.input = new Float32Array(784)
予測
modelにはPython同様predictメソッドがあり、Float32Arrayを入力とすることで動作します。
model.ready().then(() => { model.predict(inputData).then(outputData => { //ここにoutputを書く。 }) })
感想
個人的には結構扱いやすいKerasをベースとした構築のため
使ってみたいが、、、実のところ私がWebサービスを作ることが少ないという。。