のんびりしているエンジニアの日記

ソフトウェアなどのエンジニア的な何かを書きます。

Keras.jsを使って、JavascriptでDeepLearningを動かしてみる

Sponsored Links

皆さんこんにちは
お元気ですか?一人で箱根温泉りらっくすできました。

Keras.jsが出て、遂にKerasをjavascriptを扱えるようになりました。
(これ公式なのかどうかが非常に不安で、きっと違う)
ということで実際に動かしてみようと思います。

Kerasについて

Keras(Python

KerasはDeepLearningのライブラリです。
Theano、TensorFlowをバックエンドとして動作し、
切り替えることが可能です。

github.com

Keras-js

今回扱うのは、Keras-jsです。
github.com

ブラウザ上で、学習したKerasのモデルを走らせ、GPUWebGLを使って
扱うことができます。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
  1. assets・・出力例の.png
  2. data・・keras.jsonで必要なNeuralNetworkのデータ、*.json, *_metadata.json, *weights.bufの組み合わせ
  3. notebooks・・Jupyter Notebookで、学習ソースコードが入っている。
  4. src・・ソースコード(html,css)が含まれている 。

Demoを動かしてみよう

既に殆どのものは準備されているので、
実は非常に簡単です。

Clone

まずは、リポジトリをクローンします。

git clone https://github.com/transcranial/keras-js

サーバの起動

npmを使ってinstallとサーバの起動を行います。

npm install
npm run server

http://127.0.0.1:3000にアクセスすると以下の画面を表示することができます。

f:id:tereka:20161016190946p:plain

ホームには様々な画面があり、サンプルを動かすことができます。
試しにMNISTを動かしてみましょう。

f:id:tereka:20161016191158p:plain

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サービスを作ることが少ないという。。