ランサーズ Advent Calendar 2017 8日目
はじめまして、開発部の井上です。
ランサーズにおける機能開発を主に担当しております。
今回はdeeplearnjsについて少し紹介させていただきます。
なにそれ?
Googleが発表したJavaScriptライブラリです。
ブラウザ単独で動作する点、WebGLを介してGPUが利用できる点等が特徴として挙げられます。特に計算処理がクライアント上になるというのはdeeplearnjsの優位性ともいえます。
背景
近年、需要が高まる機械学習。どの企業でも活用が進んでいますね。
ランサーズでも機械学習への取り組みが進んでおりサービスへの活用が行われています。
(詳しくは担当者が書いてくれるはず...)
ブラウザで動作するということで導入コストが低く、
学習しやすそうだと感じたので触れてみることにしました。
早速動かしてみる
それでは動作させてみましょう。
githubリポジトリにいくつかのデモがあるので動作させてみようと思います。
git clone https://github.com/PAIR-code/deeplearnjs.git
cd deeplearnjs # 以降の操作は、このディレクトリをカレントと想定しています
npm run prep
それではdemos
ディレクトリ配下にいくつかあるデモの中から
Compositional Pattern-Producing Network(CPPN)を動かしてみます。
./scripts/watch-demo demos/nn-art
ブラウザで以下URLへアクセス
![nn-art.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F221491%2Fa9b80f9c-9ca2-bfa2-1185-18708a62a755.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3f0050e7f44217dea010ed014dc121be)
簡単に動作させることができましたね。
他も触ってみる
demos配下のディレクトリを指定してやることで
他にも色々なデモも触ることができます。
Benchmark
CPUとGPUのベンチマーク
./scripts/watch-demo demos/benchmarks
![benchmark.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F221491%2F1f6b66b6-5fcc-ef23-c694-e0cd2f2f3b5c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0129607567024978c3a60f34e05ca940)
GPUの方が高い結果が出てますね。
Model-Builder
画像認識
./scripts/watch-demo demos/model-builder
![model-builder.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F221491%2F0a4a92b4-9438-dcf3-2339-8331b817901c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0c3b31987b7cc9b6bba3948e0959f0cd)
初期状態では精度が悪いので
trainを実行し、しばらく待てば(3分ぐらい)徐々に精度が上がってるのがわかると思います。
画面中央付近にあるCPUとGPUを切替えてもらって、その差を感じて下さい。
環境を作ってみる
それでは自身で利用/開発するにはどうすればよいか?ですが、
cloneしたリポジトリ内にstarterが含まれているのでソチラを利用するのが良いです。
typescriptとes6の2種類存在していますが、手順は簡単です。
cd starter/[typescript|ec6]/
yarn prep
yarn watch
実行はコマンド実行したディレクトリにあるindex.htmlをブラウザで開けばOKです
実行結果はブラウザのdeveloper toolにて確認できます。
![result.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F221491%2Fa44004ac-fd76-4355-2b79-91f04da0368b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=946c95dc52765834b0f39ce37bf0b254)
より簡単に
yarnがインストールできない環境の方にはコチラ
htmlファイル作成して中に以下コードを記述してもらえば簡単に実行できます。
これらは配列の中身をスカラーで合計するだけの簡単な計算処理です。
<script src="https://unpkg.com/deeplearn"></script>
<script type="text/javascript">
var math = new dl.NDArrayMathGPU();
var a = dl.Array1D.new([10, 15, 20]);
var b = dl.Scalar.new(5);
var result = math.add(a, b);
result.data().then(data => console.log(data)); // Float32Array([15, 20, 25])
console.log(result.dataSync());
</script>
まとめ
比較的簡単に機械学習を体験できたのではないでしょうか?
発表も新しいためネット上に資料が少なく動作環境も限られてますが、
クライアント上で動作する機械学習ライブラリということで発想は面白いと思います。
現状deeplearnが公式でサポートしてるのがtypescriptとes6ですが、
reactから操作してみようと整理してますので近々お伝えできれば幸いです。