Introduction to TensorFlow.js

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

近年、深層学習(ディープラーニング)の実サービスへの活用が進む  • 深層学習 ⊂ 機械学習  

近年、深層学習(ディープラーニング)の実サービスへの活用が進む  • 深層学習 ⊂ 機械学習   • 機械学習に用いるソフトウェアが多く公開 

© 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. フロントエンドでの機械学習タスクの実行  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. • 実際のサービスで実際に使われ始めている  ◦ Google Photo、Google AssistantをはじめとするGoogleのサービスなど 
◦ Google I/O 2019のKeynoteでも言及  ▪ https://youtu.be/lyRPyRKHO8M?t=2575    フロントエンドでの機械学習タスクの実行  20

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

Introduction to TensorFlow.js

Introduction to TensorFlow.js

More Decks by Ryosuke Horie

Other Decks in Programming

Featured

Transcript