Tweet
Tweet

Slide 1

Slide 1 text

Introduction to TensorFlow.js
 株式会社ZOZOテクノロジーズ
 開発部
 堀江 亮介 Copyright © ZOZO Technologies, Inc. ZOZOテクノロジーズMeetup #10 for Frontend Engineer


Slide 2

Slide 2 text

© ZOZO Technologies, Inc. 自己紹介
 2 ZOZOテクノロジーズ 開発部 Androidエンジニア Tech Lead 堀江 亮介 Ryosuke Horie ・自動化とビールが好き ・Androidテスト全書という本を書きました ・ @Horie1024

Slide 3

Slide 3 text

© ZOZO Technologies, Inc. 3 機械学習？


Slide 4

Slide 4 text

© ZOZO Technologies, Inc. 機械学習 
 4 ● データのパターン・特徴を学習して未知のデータに対して何らかの結果を出力する


Slide 5

Slide 5 text

© ZOZO Technologies, Inc. 機械学習 
 5 ● データのパターン・特徴を学習して未知のデータに対して何らかの結果を出力する
 ● 近年、深層学習(ディープラーニング)の実サービスへの活用が進む


Slide 6

Slide 6 text

© ZOZO Technologies, Inc. 機械学習 
 6 ● データのパターン・特徴を学習して未知のデータに対して何らかの結果を出力する
 ● 近年、深層学習(ディープラーニング)の実サービスへの活用が進む
 ● 深層学習 ⊂ 機械学習 


Slide 7

Slide 7 text

© ZOZO Technologies, Inc. 機械学習 
 7 ● データのパターン・特徴を学習して未知のデータに対して何らかの結果を出力する
 ● 近年、深層学習(ディープラーニング)の実サービスへの活用が進む
 ● 深層学習 ⊂ 機械学習 
 ● 機械学習に用いるソフトウェアが多く公開


Slide 8

Slide 8 text

© ZOZO Technologies, Inc. 8 TensorFlow


Slide 9

Slide 9 text

© ZOZO Technologies, Inc. TensorFlowとは？
 9 ● Googleがオープンソースで提供する機械学習フレームワーク
 ● 機械学習モデルの研究開発、学習と推論の実行
 ● 研究とプロダクション両方での使用をサポート


Slide 10

Slide 10 text

© ZOZO Technologies, Inc. TensorFlow ecosystem
 10 ● モデルの開発・学習・デプロイ
 ● モデルの公開
 ○ TensorFlow Hub
 ● プロダクションへのデプロイ
 ○ Cloud
 ○ オンプレミス
 ○ ブラウザ
 ○ iOS / Android / IoT
 引用: https://www.tensorflow.org/learn

Slide 11

Slide 11 text

© ZOZO Technologies, Inc. TensorFlow ecosystem
 11 ● モデルの開発・学習・デプロイ
 ● モデルの公開
 ○ TensorFlow Hub
 ● プロダクションへのデプロイ
 ○ Cloud
 ○ オンプレミス
 ○ ブラウザ
 ○ iOS / Android / IoT
 引用: https://www.tensorflow.org/learn

Slide 12

Slide 12 text

© ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行
 12 ● オンデバイス学習・推論


Slide 13

Slide 13 text

© ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行
 13 ● オンデバイス学習・推論
 ○ 低レイテンシ、サーバーリクエスト不要
 ○ セキュリティの向上
 ○ オフライン実行
 ○ 省電力
 ○ センサーデータの活用


Slide 14

Slide 14 text

© ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行
 14 ● TensorFlow.js
 ● TensorFlow Lite


Slide 15

Slide 15 text

© ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行
 15 ● TensorFlow.js
 ○ TensorFlowの機能をJavaScriptから利用できるフレームワーク
 ○ ブラウザ上で機械学習モデルの開発、学習、推論が可能
 ● TensorFlow Lite
 ○ TensorFlowをiOS/Android、IoTデバイスへ最適化したフレームワーク
 ○ 推論のみをサポート※2019年末に学習もサポート予定
 ○ Firebase ML KitはTensorFlow Lite形式のモデルを使用


Slide 16

Slide 16 text

© ZOZO Technologies, Inc. サンプル: ML Kitによる物体検出
 16 ● ML Kitのオンデバイスモード利用
 ● 低レイテンシでの動作
 ● オフライン対応


Slide 17

Slide 17 text

© ZOZO Technologies, Inc. サンプル: Teachable Machine
 17 ● 公式サンプル
 ○ https://www.tensorflow.org/js/demos/
 ● ブラウザ上での学習と推論のデモ
 ● 学習データはローカルで完結


Slide 18

Slide 18 text

© ZOZO Technologies, Inc. サンプル: ファッションチェックアプリ
 18 ● 弊社でDroidKaigi向けに開発
 ○ FlutterとFirebase ML Kitを使ってカンファレンス用デモ アプリを作った話
 ○ ML Kit事例紹介機械学習を活用したプロトタイプアプリ の開発
 ● ML Kit + Cloud Vision API
 ● WEARのコーディネートから学習
 ○ TensorFlowでモデルを作成
 ○ TensorFlow Liteに変換して利用


Slide 19

Slide 19 text

© ZOZO Technologies, Inc. ● 実際のサービスで実際に使われ始めている
 フロントエンドでの機械学習タスクの実行
 19

Slide 20

Slide 20 text

© ZOZO Technologies, Inc. ● 実際のサービスで実際に使われ始めている
 ○ Google Photo、Google AssistantをはじめとするGoogleのサービスなど
 ○ Google I/O 2019のKeynoteでも言及
 ■ https://youtu.be/lyRPyRKHO8M?t=2575
 
 フロントエンドでの機械学習タスクの実行
 20

Slide 21

Slide 21 text

© ZOZO Technologies, Inc. ● 実際のサービスで実際に使われ始めている
 ● 機械学習を活用したより良いユーザー体験の提供
 フロントエンドでの機械学習タスクの実行
 21

Slide 22

Slide 22 text

© ZOZO Technologies, Inc. ● 実際のサービスで実際に使われ始めている
 ● 機械学習を活用したより良いユーザー体験の提供
 ○ オンデバイス学習・推論のUse Caseを特徴しておく
 フロントエンドでの機械学習タスクの実行
 22 引用: AI for Mobile and IoT Devices: TensorFlow Lite (Google I/O'19) | Use Case of TensorFlow Lite

Slide 23

Slide 23 text

© ZOZO Technologies, Inc. ● 実際のサービスで実際に使われ始めている
 ● 機械学習を活用したより良いユーザー体験の提供
 ● 今まで実現が難しかった機能を実現できる可能性
 フロントエンドでの機械学習タスクの実行
 23

Slide 24

Slide 24 text

© ZOZO Technologies, Inc. ● 実際のサービスで実際に使われ始めている
 ● 機械学習を活用したより良いユーザー体験の提供
 ● 今まで実現が難しかった機能を実現できる可能性
 フロントエンドでの機械学習タスクの実行
 24 フロントエンドエンジニアも機械学習の知識を持っておくのは重要


Slide 25

Slide 25 text

© ZOZO Technologies, Inc. ● ZOZOTOWN / WEAR は画像を大量に扱うため機械学習と相性が良いサービス
 ZOZOTOWN / WEARでは？
 25

Slide 26

Slide 26 text

© ZOZO Technologies, Inc. ● ZOZOTOWN / WEAR は画像を大量に扱うため機械学習と相性が良いサービス
 ● 現状フロントエンドでの機械学習の活用はできていない
 ZOZOTOWN / WEARでは？
 26

Slide 27

Slide 27 text

© ZOZO Technologies, Inc. ● ZOZOTOWN / WEAR は画像を大量に扱うため機械学習と相性が良いサービス
 ● 現状フロントエンドでの機械学習の活用はできていない
 ● バックエンドを含めサービスに機械学習を取り入れていきたい
 ZOZOTOWN / WEARでは？
 27

Slide 28

Slide 28 text

© ZOZO Technologies, Inc. 28 最後に


Slide 29

Slide 29 text

© ZOZO Technologies, Inc. 29 TensorFlow.jsを使ってみる


Slide 30

Slide 30 text

© ZOZO Technologies, Inc. 機械学習タスクを実行するまでの手順
 30 1. モデルを作成
 2. 学習データを準備
 3. 学習
 4. 推論の実行


Slide 31

Slide 31 text

© ZOZO Technologies, Inc. ● 丁寧なチュートリアルがある
 ○ https://www.tensorflow.org/js/tutorials
 ● 使用方法が複数存在
 ○ ml5.jsの利用
 ○ TensorFlow.jsでモデルを作成・学習
 ○ TensorFlowで作成したモデルを変換
 TensorFlow.jsの使い方
 31

Slide 32

Slide 32 text

© ZOZO Technologies, Inc. ● 丁寧なチュートリアルがある
 ○ https://www.tensorflow.org/js/tutorials
 ● 使用方法が複数存在
 ○ ml5.jsの利用
 ○ TensorFlow.jsでモデルを作成・学習
 ○ TensorFlowで作成したモデルを変換
 TensorFlow.jsの使い方
 32

Slide 33

Slide 33 text

© 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

Slide 34

Slide 34 text

© ZOZO Technologies, Inc. ● tensorflowjs_converter を使用
 ○ https://www.tensorflow.org/js/tutorials/conversion/import_keras
 ● 
 ● 次のようなファイルが得られる
 モデルの変換
 34

Slide 35

Slide 35 text

© ZOZO Technologies, Inc. 機械学習タスクを実行するまでの手順
 35 1. モデルを作成
 2. 学習データを準備
 3. 学習
 4. 推論の実行


Slide 36

Slide 36 text

© ZOZO Technologies, Inc. 36 デモ


Slide 37

Slide 37 text

© ZOZO Technologies, Inc. 37 推論の実行までの流れ
 1. モデルの読み込み
 2. 入力画像のリサイズ
 3. Tensorに変換
 4. 推論を実行


Slide 38

Slide 38 text

© ZOZO Technologies, Inc. ● TensorFlow.jsの読み込み
 
 ● モデルの読み込み
 
 
 
 TensorFlow.jsからのモデルの読み込み
 38 tf.loadLayersModel('/model/model.json').then(model => {/* do some thing */});

Slide 39

Slide 39 text

© 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);

Slide 40

Slide 40 text

© 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();

Slide 41

Slide 41 text

© ZOZO Technologies, Inc. ● 推論結果の受け取り
 
 ● 結果の描画
 ○ 受け取った推論結果に応じてブラウザへ描画
 
 
 41 推論を実行
 model.predict(input).dataSync();

Slide 42

Slide 42 text

© ZOZO Technologies, Inc. 42 まとめ


Slide 43

Slide 43 text

© ZOZO Technologies, Inc. まとめ
 43 ● TensorFlow.jsによって機械学習タスクをブラウザ上で実行可能になった
 ○ 今まで実現が難しかった機能を実現できる可能性
 ○ 機械学習を活用したより良いユーザー体験の提供
 ● フロントエンジニアも機械学習で何ができるかを把握しておくことは重要
 ○ サービスを開発する際に機械学習を利用する選択肢を持てるようにしておく
 ● ZOZOTOWN / WEAR は画像を大量に扱うため機械学習と相性が良いサービス
 ○ バックエンドを含めサービスに機械学習を取り入れていきたい
 


Slide 44

Slide 44 text

No content