Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
Search
spring_raining
January 12, 2019
Technology
2.3k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
January 12, 2019
More Decks by spring_raining
See All by spring_raining
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
2
420
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.9k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.8k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
1k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
8.7k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
770
Printable Web
spring_raining
3
1k
今こそCSS組版
spring_raining
5
2.7k
シン・サーバの形は。
spring_raining
0
390
Other Decks in Technology
See All in Technology
認証認可だけじゃない! ID管理の構成要素と ライフサイクルを意識しよう
ritou
1
520
地域 SRE コミュニティ最前線 / SRE NEXT 2026 Discussion Night Track C
muziyoshiz
0
160
クラウド上のデータ復旧で見落としがちな制約: 医療系 SaaS の BCP 設計から得た教訓
kakehashi
PRO
0
2.5k
cccccc
moznion
0
1.8k
AI駆動開発におけるQAエンジニアの役割事例 〜AI駆動開発の現場から〜
kobayashiyorimitsu
0
400
Claude Code 珍プレー好プレー
shinyasaita
0
290
ゼロをイチにする仕事が終わったあと
smasato
0
310
オブザーバビリティ、本当に活用できてる? 〜API連携×生成AIで成熟度を自動評価〜
dmmsre
1
2.2k
LiDAR SLAMの実装とセンサ融合 ~Lie群からContinuous-Time LIOまで~
naokiakai
1
1k
Terraform共通モジュールをチーム横断で“変えられる”運用へ ― リリースと適用の分離
kekke_n
1
1.9k
ヘルスケア領域における AI 活用と その安全性担保のための取り組み (Leveraging AI in Healthcare and Our Efforts to Ensure Its Safety) - Google I/O Extended Tokyo 2026, July 11, 2026
zettaittenani
0
180
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
laysakura
2
8.1k
Featured
See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.5k
Practical Orchestrator
shlominoach
191
11k
BBQ
matthewcrist
89
10k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.8k
Leo the Paperboy
mayatellez
8
1.9k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
220
Being A Developer After 40
akosma
91
590k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.5k
Claude Code のすすめ
schroneko
67
230k
Paper Plane
katiecoart
PRO
1
52k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
880
Transcript
ディープラーニングってやつで なんとかして!!!! 2019/1/12 Kyoto.js 15 @spring_raining +BWB4DSJQUͰ
自己紹介 • Twitter: @spring_raining / GitHub: spring-raining • 「はるさめ」とお呼びください •
大阪の大学院生 • フォントの研究をしている
https://qiita.com/taizan/items/cf77fd37ec3a0bef5d9d
https://www.youtube.com/watch?v=AXAouosx95Y
なんかすごそう
https://twitter.com/mizuasato/status/771316117746823170
ディープラーニングの 計算
https://www.blog.google/products/google-cloud/google-cloud-offer-tpus-machine-learning/
https://www.blog.google/products/google-cloud/google-cloud-offer-tpus-machine-learning/ 普通のPCでは 無理?
学習と推論 • 機械学習の実利用は大まかに分けると2フェーズ 学習 推論 とはいえ推論でも計算速度は必要 データセットから目的に あった推論モデルを学習 大量のデータと潤沢な 計算機環境で殴り合う
修羅の世界 推論モデルを使って 未知の入力に対して推論 Webブラウザでも 実現可能な計算量
GPUはいいぞ • ディープラーニングは並列可能で簡単な計算を大量 にこなす必要がある CG処理と似ているのでは? GPU使おう! • JavaScriptでGPUを使うことができるものといえば・・・
WebGL
WebGLを使った計算 • 推論結果はいくつもの計算を経て 出力される • 各ステップの計算を1つのWebGL シェーダとして実行 テンソル
WebDNN • WebDNN[1] を使うと、用意した 推論モデルから各バックエンド (WebGL/WebGPU/WASM) 向けの実行コードを生成してく れる • 生成される実行コードはどのよ
うなものか? [1] https://github.com/mil-tokyo/webdnn パラメータデータ モデル定義 実行コード
例: 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
例: 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
例: 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
例: 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
• 畳み込み層の計算は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
• 畳み込み層の計算は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を活用
Python library for deep learning
JS library for inference engine 他にもあるかも (no longer active) brain.js
None
https://onnx.ai
JS library for inference engine ? .js
結局どれ使えばいいの 学習機能 読込対応モデル バックエンド コメント 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で書き出し・読み込み可能