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

Transcript

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

   View Slide

2. 自己紹介
   • Twitter: @spring_raining / GitHub: spring-raining
   • 「はるさめ」とお呼びください
   • 大阪の大学院生
   • フォントの研究をしている
   

   View Slide

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

   View Slide

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

   View Slide

5. なんかすごそう
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. 学習と推論
    • 機械学習の実利用は大まかに分けると2フェーズ
    学習 推論
    とはいえ推論でも計算速度は必要
    データセットから目的に
    あった推論モデルを学習
    大量のデータと潤沢な
    計算機環境で殴り合う
    修羅の世界
    推論モデルを使って
    未知の入力に対して推論
    Webブラウザでも
    実現可能な計算量
    

    View Slide

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

    View Slide

12. WebGL
    

    View Slide

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

    View Slide

14. WebDNN
    • WebDNN[1]
    を使うと、用意した
    推論モデルから各バックエンド
    （WebGL/WebGPU/WASM）
    向けの実行コードを生成してく
    れる
    • 生成される実行コードはどのよ
    うなものか？
    [1] https://github.com/mil-tokyo/webdnn
    パラメータデータ モデル定義
    実行コード
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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を活用
    

    View Slide

21. Python library for deep learning
    

    View Slide

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

    View Slide

23. View Slide

24. https://onnx.ai
    

    View Slide

25. JS library for inference engine
    ?
    .js
    

    View Slide

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で書き出し・読み込み可能
    

    View Slide