Slide 1
Slide 1 text
ディープラーニングってやつで
なんとかして！！！！
2019/1/12 Kyoto.js 15
@spring_raining
+BWB4DSJQUͰ
Slide 2
Slide 2 text
自己紹介
• Twitter: @spring_raining / GitHub: spring-raining
• 「はるさめ」とお呼びください
• 大阪の大学院生
• フォントの研究をしている
Slide 3
Slide 3 text
https://qiita.com/taizan/items/cf77fd37ec3a0bef5d9d
Slide 4
Slide 4 text
https://www.youtube.com/watch?v=AXAouosx95Y
Slide 5
Slide 5 text
なんかすごそう
Slide 6
Slide 6 text
https://twitter.com/mizuasato/status/771316117746823170
Slide 7
Slide 7 text
ディープラーニングの
計算
Slide 8
Slide 8 text
https://www.blog.google/products/google-cloud/google-cloud-offer-tpus-machine-learning/
Slide 9
Slide 9 text
https://www.blog.google/products/google-cloud/google-cloud-offer-tpus-machine-learning/
普通のPCでは
無理？
Slide 10
Slide 10 text
学習と推論
• 機械学習の実利用は大まかに分けると2フェーズ
学習 推論
とはいえ推論でも計算速度は必要
データセットから目的に
あった推論モデルを学習
大量のデータと潤沢な
計算機環境で殴り合う
修羅の世界
推論モデルを使って
未知の入力に対して推論
Webブラウザでも
実現可能な計算量
Slide 11
Slide 11 text
GPUはいいぞ
• ディープラーニングは並列可能で簡単な計算を大量
にこなす必要がある
CG処理と似ているのでは？
GPU使おう！
• JavaScriptでGPUを使うことができるものといえば・・・
Slide 12
Slide 12 text
WebGL
Slide 13
Slide 13 text
WebGLを使った計算
• 推論結果はいくつもの計算を経て
出力される
• 各ステップの計算を1つのWebGL
シェーダとして実行
テンソル
Slide 14
Slide 14 text
WebDNN
• WebDNN[1]
を使うと、用意した
推論モデルから各バックエンド
（WebGL/WebGPU/WASM）
向けの実行コードを生成してく
れる
• 生成される実行コードはどのよ
うなものか？
[1] https://github.com/mil-tokyo/webdnn
パラメータデータ モデル定義
実行コード
Slide 15
Slide 15 text
例: 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
Slide 16
Slide 16 text
例: 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
Slide 17
Slide 17 text
例: 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
Slide 18
Slide 18 text
例: 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
Slide 19
Slide 19 text
• 畳み込み層の計算は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
Slide 20
Slide 20 text
• 畳み込み層の計算は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を活用
Slide 21
Slide 21 text
Python library for deep learning
Slide 22
Slide 22 text
JS library for inference engine
他にもあるかも
(no longer active)
brain.js
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
https://onnx.ai
Slide 25
Slide 25 text
JS library for inference engine
?
.js
Slide 26
Slide 26 text
結局どれ使えばいいの
学習機能 読込対応モデル バックエンド コメント
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で書き出し・読み込み可能