Introduction to TensorFlow.js

TensorFlow.jsを使用してブラウザ上で推論を行う方法についての紹介です。ブラウザやモバイルデバイスで機械学習のタスクを実行するメリットにも触れています。

Transcript

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

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

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

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

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

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

8. © ZOZO Technologies, Inc. 8 TensorFlow

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

10. © ZOZO Technologies, Inc. TensorFlow ecosystem
 10 • モデルの開発・学習・デプロイ
 • モデルの公開
 ◦ TensorFlow Hub
 • プロダクションへのデプロイ
 ◦ Cloud
 ◦ オンプレミス
 ◦ ブラウザ
 ◦ iOS / Android / IoT
 引用: https://www.tensorflow.org/learn
11. © ZOZO Technologies, Inc. TensorFlow ecosystem
 11 • モデルの開発・学習・デプロイ
 • モデルの公開
 ◦ TensorFlow Hub
 • プロダクションへのデプロイ
 ◦ Cloud
 ◦ オンプレミス
 ◦ ブラウザ
 ◦ iOS / Android / IoT
 引用: https://www.tensorflow.org/learn
12. © ZOZO Technologies, Inc. フロントエンドでの機械学習タスクの実行
 12 • オンデバイス学習・推論

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

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

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

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

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

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

19. © ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている
 フロントエンドでの機械学習タスクの実行
 19
20. © ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている
 ◦ Google Photo、Google AssistantをはじめとするGoogleのサービスなど
 ◦ Google I/O 2019のKeynoteでも言及
 ▪ https://youtu.be/lyRPyRKHO8M?t=2575
 
 フロントエンドでの機械学習タスクの実行
 20
21. © ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている
 • 機械学習を活用したより良いユーザー体験の提供
 フロントエンドでの機械学習タスクの実行
 21
22. © ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている
 • 機械学習を活用したより良いユーザー体験の提供
 ◦ オンデバイス学習・推論のUse Caseを特徴しておく
 フロントエンドでの機械学習タスクの実行
 22 引用: AI for Mobile and IoT Devices: TensorFlow Lite (Google I/O'19) | Use Case of TensorFlow Lite
23. © ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている
 • 機械学習を活用したより良いユーザー体験の提供
 • 今まで実現が難しかった機能を実現できる可能性
 フロントエンドでの機械学習タスクの実行
 23
24. © ZOZO Technologies, Inc. • 実際のサービスで実際に使われ始めている
 • 機械学習を活用したより良いユーザー体験の提供
 • 今まで実現が難しかった機能を実現できる可能性
 フロントエンドでの機械学習タスクの実行
 24 フロントエンドエンジニアも機械学習の知識を持っておくのは重要

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

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

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

31. © ZOZO Technologies, Inc. • 丁寧なチュートリアルがある
 ◦ https://www.tensorflow.org/js/tutorials
 • 使用方法が複数存在
 ◦ ml5.jsの利用
 ◦ TensorFlow.jsでモデルを作成・学習
 ◦ TensorFlowで作成したモデルを変換
 TensorFlow.jsの使い方
 31
32. © ZOZO Technologies, Inc. • 丁寧なチュートリアルがある
 ◦ https://www.tensorflow.org/js/tutorials
 • 使用方法が複数存在
 ◦ ml5.jsの利用
 ◦ TensorFlow.jsでモデルを作成・学習
 ◦ TensorFlowで作成したモデルを変換
 TensorFlow.jsの使い方
 32
33. © 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
34. © ZOZO Technologies, Inc. • tensorflowjs_converter を使用
 ◦ https://www.tensorflow.org/js/tutorials/conversion/import_keras
 • 
 • 次のようなファイルが得られる
 モデルの変換
 34
35. © ZOZO Technologies, Inc. 機械学習タスクを実行するまでの手順
 35 1. モデルを作成
 2. 学習データを準備
 3. 学習
 4. 推論の実行

36. © ZOZO Technologies, Inc. 36 デモ

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

38. © 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 */});
39. © 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);
40. © 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();
41. © ZOZO Technologies, Inc. • 推論結果の受け取り
 
 • 結果の描画
 ◦ 受け取った推論結果に応じてブラウザへ描画
 
 
 41 推論を実行
 model.predict(input).dataSync();
42. © ZOZO Technologies, Inc. 42 まとめ

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