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
Introduction to TensorFlow.js
Search
Ryosuke Horie
June 19, 2019
Programming
2
1.3k
Introduction to TensorFlow.js
TensorFlow.jsを使用してブラウザ上で推論を行う方法についての紹介です。ブラウザやモバイルデバイスで機械学習のタスクを実行するメリットにも触れています。
Ryosuke Horie
June 19, 2019
Tweet
Share
More Decks by Ryosuke Horie
See All by Ryosuke Horie
GitHub Copilotは開発者の生産性をどれだけ上げるのか?ZOZOでの全社導入とその効果 / How Much Does GitHub Copilot Improve Developer Productivity? The Company-wide Implementation and Its Effects at ZOZO
horie1024
34
19k
ZOZOTOWNにおける開発生産性向上に関する取り組み / Initiatives to Improve Development Productivity at ZOZOTOWN
horie1024
8
5.2k
How does the Relay connect Android app development and Design?
horie1024
1
1.6k
既存画面の Jetpack Composeでの書き換え: FAANSでの事例紹介 / Case study of rewriting existing screens with Jetpack Compose
horie1024
0
1.4k
スキルマップを作った話 / Create a skills map
horie1024
3
4.1k
Miroを使った開発効率向上のための取り組み / Using Miro Efforts to Improve Development Efficiency
horie1024
0
2k
ktlintカスタムルールのパッケージ化と再利用/Package and reuse ktlint custom rules
horie1024
1
930
Jetpack Benchmarkでの ViewのInflateパフォーマンスの可視化と改善 / The Jetpack Benchmark. Visualizing and improving View Inflate performance
horie1024
3
1k
ZOZOTOWNでの Dagger Hilt対応について/Migration to Dagger Hilt at ZOZOTOWN.
horie1024
1
1.9k
Other Decks in Programming
See All in Programming
AmperとFleetを使ったAndroidアプリ
yoppie
0
300
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
430
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
Open standards for building event-driven applications in the cloud
meteatamel
0
230
An adventure of Happy Eyeballs
coe401_
1
140
哲学史とモデリング
tanakahisateru
2
420
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
230
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
420
Adding Security to Microcontroller Ruby
sylph01
1
160
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
140
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Designing with Data
zakiwarfel
96
4.8k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
How GitHub (no longer) Works
holman
305
140k
The Invisible Side of Design
smashingmag
294
49k
Agile that works and the tools we love
rasmusluckow
325
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Transcript
Introduction to TensorFlow.js 株式会社ZOZOテクノロジーズ 開発部 堀江 亮介 Copyright © ZOZO
Technologies, Inc. ZOZOテクノロジーズMeetup #10 for Frontend Engineer
© ZOZO Technologies, Inc. 自己紹介 2 ZOZOテクノロジーズ 開発部 Androidエンジニア Tech
Lead 堀江 亮介 Ryosuke Horie ・自動化とビールが好き ・Androidテスト全書という本を書きました ・ @Horie1024
© ZOZO Technologies, Inc. 3 機械学習?
© ZOZO Technologies, Inc. 機械学習 4 • データのパターン・特徴を学習して未知のデータに対して何らかの結果を出力する
© ZOZO Technologies, Inc. 機械学習 5 • データのパターン・特徴を学習して未知のデータに対して何らかの結果を出力する •
近年、深層学習(ディープラーニング)の実サービスへの活用が進む
© ZOZO Technologies, Inc. 機械学習 6 • データのパターン・特徴を学習して未知のデータに対して何らかの結果を出力する •
近年、深層学習(ディープラーニング)の実サービスへの活用が進む • 深層学習 ⊂ 機械学習
© ZOZO Technologies, Inc. 機械学習 7 • データのパターン・特徴を学習して未知のデータに対して何らかの結果を出力する •
近年、深層学習(ディープラーニング)の実サービスへの活用が進む • 深層学習 ⊂ 機械学習 • 機械学習に用いるソフトウェアが多く公開
© ZOZO Technologies, Inc. 8 TensorFlow
© ZOZO Technologies, Inc. TensorFlowとは? 9 • Googleがオープンソースで提供する機械学習フレームワーク • 機械学習モデルの研究開発、学習と推論の実行
• 研究とプロダクション両方での使用をサポート
© ZOZO Technologies, Inc. TensorFlow ecosystem 10 • モデルの開発・学習・デプロイ •
モデルの公開 ◦ TensorFlow Hub • プロダクションへのデプロイ ◦ Cloud ◦ オンプレミス ◦ ブラウザ ◦ iOS / Android / IoT 引用: https://www.tensorflow.org/learn
© ZOZO Technologies, Inc. TensorFlow ecosystem 11 • モデルの開発・学習・デプロイ •
モデルの公開 ◦ TensorFlow Hub • プロダクションへのデプロイ ◦ Cloud ◦ オンプレミス ◦ ブラウザ ◦ iOS / Android / IoT 引用: https://www.tensorflow.org/learn
© ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行 12 • オンデバイス学習・推論
© ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行 13 • オンデバイス学習・推論 ◦ 低レイテンシ、サーバーリクエスト不要
◦ セキュリティの向上 ◦ オフライン実行 ◦ 省電力 ◦ センサーデータの活用
© ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行 14 • TensorFlow.js • TensorFlow
Lite
© ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行 15 • TensorFlow.js ◦ TensorFlowの機能をJavaScriptから利用できるフレームワーク
◦ ブラウザ上で機械学習モデルの開発、学習、推論が可能 • TensorFlow Lite ◦ TensorFlowをiOS/Android、IoTデバイスへ最適化したフレームワーク ◦ 推論のみをサポート※2019年末に学習もサポート予定 ◦ Firebase ML KitはTensorFlow Lite形式のモデルを使用
© ZOZO Technologies, Inc. サンプル: ML Kitによる物体検出 16 • ML
Kitのオンデバイスモード利用 • 低レイテンシでの動作 • オフライン対応
© ZOZO Technologies, Inc. サンプル: Teachable Machine 17 • 公式サンプル
◦ https://www.tensorflow.org/js/demos/ • ブラウザ上での学習と推論のデモ • 学習データはローカルで完結
© ZOZO Technologies, Inc. サンプル: ファッションチェックアプリ 18 • 弊社でDroidKaigi向けに開発 ◦
FlutterとFirebase ML Kitを使ってカンファレンス用デモ アプリを作った話 ◦ ML Kit事例紹介機械学習を活用したプロトタイプアプリ の開発 • ML Kit + Cloud Vision API • WEARのコーディネートから学習 ◦ TensorFlowでモデルを作成 ◦ TensorFlow Liteに変換して利用
© ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている フロントエンドでの機械学習タスクの実行 19
© ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている ◦ Google Photo、Google AssistantをはじめとするGoogleのサービスなど
◦ Google I/O 2019のKeynoteでも言及 ▪ https://youtu.be/lyRPyRKHO8M?t=2575 フロントエンドでの機械学習タスクの実行 20
© ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている • 機械学習を活用したより良いユーザー体験の提供 フロントエンドでの機械学習タスクの実行 21
© ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている • 機械学習を活用したより良いユーザー体験の提供 ◦ オンデバイス学習・推論のUse
Caseを特徴しておく フロントエンドでの機械学習タスクの実行 22 引用: AI for Mobile and IoT Devices: TensorFlow Lite (Google I/O'19) | Use Case of TensorFlow Lite
© ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている • 機械学習を活用したより良いユーザー体験の提供 • 今まで実現が難しかった機能を実現できる可能性
フロントエンドでの機械学習タスクの実行 23
© ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている • 機械学習を活用したより良いユーザー体験の提供 • 今まで実現が難しかった機能を実現できる可能性
フロントエンドでの機械学習タスクの実行 24 フロントエンドエンジニアも機械学習の知識を持っておくのは重要
© ZOZO Technologies, Inc. • ZOZOTOWN / WEAR は画像を大量に扱うため機械学習と相性が良いサービス ZOZOTOWN
/ WEARでは? 25
© ZOZO Technologies, Inc. • ZOZOTOWN / WEAR は画像を大量に扱うため機械学習と相性が良いサービス •
現状フロントエンドでの機械学習の活用はできていない ZOZOTOWN / WEARでは? 26
© ZOZO Technologies, Inc. • ZOZOTOWN / WEAR は画像を大量に扱うため機械学習と相性が良いサービス •
現状フロントエンドでの機械学習の活用はできていない • バックエンドを含めサービスに機械学習を取り入れていきたい ZOZOTOWN / WEARでは? 27
© ZOZO Technologies, Inc. 28 最後に
© ZOZO Technologies, Inc. 29 TensorFlow.jsを使ってみる
© ZOZO Technologies, Inc. 機械学習タスクを実行するまでの手順 30 1. モデルを作成 2. 学習データを準備
3. 学習 4. 推論の実行
© ZOZO Technologies, Inc. • 丁寧なチュートリアルがある ◦ https://www.tensorflow.org/js/tutorials • 使用方法が複数存在
◦ ml5.jsの利用 ◦ TensorFlow.jsでモデルを作成・学習 ◦ TensorFlowで作成したモデルを変換 TensorFlow.jsの使い方 31
© ZOZO Technologies, Inc. • 丁寧なチュートリアルがある ◦ https://www.tensorflow.org/js/tutorials • 使用方法が複数存在
◦ ml5.jsの利用 ◦ TensorFlow.jsでモデルを作成・学習 ◦ TensorFlowで作成したモデルを変換 TensorFlow.jsの使い方 32
© ZOZO Technologies, Inc. • Transfer Learning Using Pretrained ConvNets
◦ https://www.tensorflow.org/beta/tutorials/images/transfer_learning ◦ https://colab.research.google.com/github/tensorflow/docs/blob/master/site/en/r2/tutorials/images/transfer_learning.ipynb • 公式の「猫 vs 犬」画像分類チュートリアルを使用 • Colabに を追加して学習済みモデルを取得 モデルの作成と学習 33
© ZOZO Technologies, Inc. • tensorflowjs_converter を使用 ◦ https://www.tensorflow.org/js/tutorials/conversion/import_keras •
• 次のようなファイルが得られる モデルの変換 34
© ZOZO Technologies, Inc. 機械学習タスクを実行するまでの手順 35 1. モデルを作成 2. 学習データを準備
3. 学習 4. 推論の実行
© ZOZO Technologies, Inc. 36 デモ
© ZOZO Technologies, Inc. 37 推論の実行までの流れ 1. モデルの読み込み 2. 入力画像のリサイズ
3. Tensorに変換 4. 推論を実行
© ZOZO Technologies, Inc. • TensorFlow.jsの読み込み • モデルの読み込み
TensorFlow.jsからのモデルの読み込み 38 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/
[email protected]
"></script> tf.loadLayersModel('/model/model.json').then(model => {/* do some thing */});
© ZOZO Technologies, Inc. 39 入力画像 リサイズ リサイズ // リサイズ
const canvas = document.createElement('canvas').getContext('2d'); canvas.drawImage(this.video, 0, 0, VIDEO_WIDTH, VIDEO_HEIGHT, 0, 0, INPUT_SIZE, INPUT_SIZE); let imageData = canvas.getImageData(0, 0, INPUT_SIZE, INPUT_SIZE);
© ZOZO Technologies, Inc. 40 Tensorへの変換 // RGBで3チャンネル const channels
= 3; // テンソルへの変換。[width, height, channels]の形にする let input = tf.browser.fromPixels(imageData, channels); // 正規化。 0.0-1.0の値に変換 input = tf.cast(input, 'float32').div(tf.scalar(255)); // 次元を追加。モデルのインプットが求める形([batch_size, width, height, channels])に変換 input = input.expandDims();
© ZOZO Technologies, Inc. • 推論結果の受け取り • 結果の描画 ◦
受け取った推論結果に応じてブラウザへ描画 41 推論を実行 model.predict(input).dataSync();
© ZOZO Technologies, Inc. 42 まとめ
© ZOZO Technologies, Inc. まとめ 43 • TensorFlow.jsによって機械学習タスクをブラウザ上で実行可能になった ◦ 今まで実現が難しかった機能を実現できる可能性
◦ 機械学習を活用したより良いユーザー体験の提供 • フロントエンジニアも機械学習で何ができるかを把握しておくことは重要 ◦ サービスを開発する際に機械学習を利用する選択肢を持てるようにしておく • ZOZOTOWN / WEAR は画像を大量に扱うため機械学習と相性が良いサービス ◦ バックエンドを含めサービスに機械学習を取り入れていきたい
None