Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

spring_raining

January 12, 2019
Tweet

More Decks by spring_raining

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. なんかすごそう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 例: 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 full-size slide

  15. 例: 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 full-size slide

  16. 例: 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 full-size slide

  17. 例: 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 full-size slide

  18. • 畳み込み層の計算は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 full-size slide

  19. • 畳み込み層の計算は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 full-size slide

  20. Python library for deep learning

    View full-size slide

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

    View full-size slide

  22. https://onnx.ai

    View full-size slide

  23. JS library for inference engine
    ?
    .js

    View full-size slide

  24. 結局どれ使えばいいの
    学習機能 読込対応モデル バックエンド コメント
    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 full-size slide