JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15

Transcript

1. ディープラーニングってやつで なんとかして！！！！ 2019/1/12 Kyoto.js 15 @spring_raining +BWB4DSJQUͰ΋

2. 自己紹介 • Twitter: @spring_raining / GitHub: spring-raining • 「はるさめ」とお呼びください •

   大阪の大学院生 • フォントの研究をしている

3. https://qiita.com/taizan/items/cf77fd37ec3a0bef5d9d

4. https://www.youtube.com/watch?v=AXAouosx95Y

5. なんかすごそう

6. https://twitter.com/mizuasato/status/771316117746823170

7. ディープラーニングの 計算

8. https://www.blog.google/products/google-cloud/google-cloud-offer-tpus-machine-learning/

9. https://www.blog.google/products/google-cloud/google-cloud-offer-tpus-machine-learning/ 普通のPCでは 無理？

10. 学習と推論 • 機械学習の実利用は大まかに分けると2フェーズ 学習 推論 とはいえ推論でも計算速度は必要 データセットから目的に あった推論モデルを学習 大量のデータと潤沢な 計算機環境で殴り合う

    修羅の世界 推論モデルを使って 未知の入力に対して推論 Webブラウザでも 実現可能な計算量

11. GPUはいいぞ • ディープラーニングは並列可能で簡単な計算を大量 にこなす必要がある CG処理と似ているのでは？ GPU使おう！ • JavaScriptでGPUを使うことができるものといえば・・・

12. WebGL

13. WebGLを使った計算 • 推論結果はいくつもの計算を経て 出力される • 各ステップの計算を1つのWebGL シェーダとして実行 テンソル

14. WebDNN • WebDNN[1] を使うと、用意した 推論モデルから各バックエンド （WebGL/WebGPU/WASM） 向けの実行コードを生成してく れる • 生成される実行コードはどのよ

    うなものか？ [1] https://github.com/mil-tokyo/webdnn パラメータデータ モデル定義 実行コード

15. 例: Convolutional Neural Networks • Convolutional = 畳み込み • 画像を扱うディープラーニングでよく出る

    0 1 0 0 0 2 2 0 3 1 0 2 2 0 1 2 3 0 1 1 0 2*1+3*0+0*0+1*1

16. 例: Convolutional Neural Networks • Convolutional = 畳み込み • 画像を扱うディープラーニングでよく出る

    0 1 0 0 0 2 2 0 3 1 0 2 2 0 1 2 5 3 0 1 1 0

17. 例: Convolutional Neural Networks • Convolutional = 畳み込み • 画像を扱うディープラーニングでよく出る

    0 1 0 0 0 2 2 0 3 1 0 2 2 0 1 2 1 5 3 0 1 1 0

18. 例: Convolutional Neural Networks • Convolutional = 畳み込み • 画像を扱うディープラーニングでよく出る

    0 1 0 0 0 2 2 0 3 1 0 2 2 0 1 2 1 2 2 5 3 0 3 0 3 0 1 1 0

19. • 畳み込み層の計算は2つの計算からなる uniform sampler2D v3; void main() { ivec4 col

    = pos(gl_FragCoord.yx, ...); int n = col.x; int h2 = col.y; int w2 = col.z; int khkwc1 = col.w; int kh = khkwc1 / 64 / 4; int kw = khkwc1 / 64 - kh * 4; int c1 = khkwc1 - (kh * 4 + kw) * 64; gl_FragColor.r = (texture2D(v3, pos(c1 + 0, ...))).r; gl_FragColor.g = (texture2D(v3, pos(c1 + 1, ...))).r; gl_FragColor.b = (texture2D(v3, pos(c1 + 2, ...))).r; gl_FragColor.a = (texture2D(v3, pos(c1 + 3, ...))).r; } WebGLを使った並列計算 0 2 2 3 1 0 2 0 1 0 1 0 0 2 2 3 1 0 2 2 0 1 0 2 0 1 2 1 0 0 2 2 0 1 0 2 0 1 0 0 0 2 2 0 3 1 0 2 2 0 1 2 Im2Col

20. • 畳み込み層の計算は2つの計算からなる uniform sampler2D v3; uniform sampler2D v5; void main()

    { ivec2 pos_c = pos(gl_FragCoord.yx, ...); int m = pos_c.x; int n = pos_c.y; float v = 0.0; for (int k = 0; k < 256; k++) { vec4 v_a = texture2D(v3, vec2(k, m)); vec4 v_b = texture2D(v5, vec2(k, n)); v += dot(v_a, v_b); } gl_FragCoord.r = v; } WebGLを使った並列計算 0 2 2 3 1 0 2 0 1 0 1 0 0 2 2 3 1 0 2 2 0 1 0 2 0 1 2 1 0 0 2 2 0 1 0 2 Tensordot 画像の1ピクセル = 行列の1要素 とみなしてWebGLを活用

21. Python library for deep learning

22. JS library for inference engine 他にもあるかも (no longer active) brain.js

23. None

24. https://onnx.ai

25. JS library for inference engine ? .js

26. 結局どれ使えばいいの 学習機能 読込対応モデル バックエンド コメント TensorFlow.js （★10,145） ◦ TensorFlow/ Keras

    WebGL 情報豊富 brain.js （★8,703） ◦ ×[1] WebGL (gpu.js使用) サイズ小さい (19KB) WebDNN （★1,523） × いろいろ[2] WebGL/WebGPU/ WASM 推論専用/多彩 なバックエンド TensorFire ? ? ? 情報がなさす ぎる… Keras.js （★4,417） × Keras WebGL TensorFlow.js 使いましょう ONNX.js （★571） ×? いろいろ WebGL/WASM? まだはやい [2] Chainer, TensorFlow, Keras, PyTorch, Caffe以外はONNX経由 [1] JSONで書き出し・読み込み可能