Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Introduction to TensorFlow.js
Ryosuke Horie
June 19, 2019
Programming
2
990
Introduction to TensorFlow.js
TensorFlow.jsを使用してブラウザ上で推論を行う方法についての紹介です。ブラウザやモバイルデバイスで機械学習のタスクを実行するメリットにも触れています。
Ryosuke Horie
June 19, 2019
Tweet
Share
More Decks by Ryosuke Horie
See All by Ryosuke Horie
horie1024
1
670
horie1024
0
170
horie1024
0
720
horie1024
3
3.9k
horie1024
2
3.6k
horie1024
0
730
horie1024
2
770
horie1024
5
2.5k
horie1024
2
360
Other Decks in Programming
See All in Programming
tkmnzm
0
140
line_developers_tw2
0
4.8k
makicamel
0
200
naokioouchi
1
310
grapecity_dev
0
180
kawaji_scratch
0
120
korosuke613
2
260
shiz
1
110
selcukusta
2
110
andpad
2
280
afilina
PRO
0
150
joergneumann
0
150
Featured
See All Featured
chriscoyier
145
20k
addyosmani
494
110k
revolveconf
200
9.7k
maltzj
502
36k
shpigford
165
19k
cromwellryan
104
6.2k
matthewcrist
73
7.5k
ddemaree
273
31k
myddelton
109
11k
samlambert
237
10k
imathis
479
150k
shlominoach
176
7.5k
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/tfjs@1.1.0"></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