Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
430
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.9k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.9k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
1.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
400
Other Decks in Technology
See All in Technology
Code4Lib JAPANカンファレンス2026 開会挨拶 / Code4Lib JAPAN Conference 2026: Opening Remarks
ykiyota
0
340
2026/09/10 Spring Bootから Jakarta EE/MicroProfileへの移行
megascus
0
350
OpenTelemetry eBPF Instrumentationの舞台裏 / Behind the Scenes of OpenTelemetry eBPF Instrumentation
ymotongpoo
4
1.1k
AIに丸投げしないトイル削減 / Eliminating Toil Without Leaving It All to AI
kohbis
4
1.1k
TinyGo 開発サイクルを高速化する:Go で作るエミュレータ入門
zozotech
PRO
1
650
From Vanilla Kubernetes to a Batteries-Included Platform: Developer Experience at 1,300+ Clusters
yosshi_
0
690
Snowflakeのコスト最適化を支えるアーキテクチャ設計
ktatsuya
1
1.5k
omasushiというライブラリを作った
polidog
PRO
0
210
全員がプロダクトへ向き合う組織を持続成長させるために——組織づくりのフライホイールと4象限 / The Flywheel Model and Four Quadrants for Organizational Design
hiro_torii
4
980
Tab5をRubyで動くパソコンにする
kishima
2
350
幾何アルゴリズムで なめらかなピン操作を / iOSDC Japan 2026 / smoothpin
kazumanagano
0
280
Sigmaユーザーのための有用リソース一挙公開 & Sigmaで使えるMCP #sigma_ucj /useful-resources-for-sigma-computing-users-and-mcps-with-sigma
shinyaa31
0
200
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
4.7k
Test your architecture with Archunit
thirion
2
2.4k
Deep Space Network (abreviated)
tonyrice
0
300
Visualization
eitanlees
152
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
730
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
3
1.2k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Chasing Engaging Ingredients in Design
codingconduct
0
310
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
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で書き出し・読み込み可能