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.4k
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 Use Cases at ZOZO
horie1024
1
690
Miro × ZOZO ZOZOのMiro活用事例紹介
horie1024
0
2.4k
GitHub Copilotは開発者の生産性をどれだけ上げるのか?ZOZOでの全社導入とその効果 / How Much Does GitHub Copilot Improve Developer Productivity? The Company-wide Implementation and Its Effects at ZOZO
horie1024
36
26k
ZOZOTOWNにおける開発生産性向上に関する取り組み / Initiatives to Improve Development Productivity at ZOZOTOWN
horie1024
8
6.4k
How does the Relay connect Android app development and Design?
horie1024
2
2k
既存画面の Jetpack Composeでの書き換え: FAANSでの事例紹介 / Case study of rewriting existing screens with Jetpack Compose
horie1024
0
1.8k
スキルマップを作った話 / Create a skills map
horie1024
3
4.6k
Miroを使った開発効率向上のための取り組み / Using Miro Efforts to Improve Development Efficiency
horie1024
0
2.5k
ktlintカスタムルールのパッケージ化と再利用/Package and reuse ktlint custom rules
horie1024
1
1.2k
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
C++20 射影変換
faithandbrave
0
530
エンジニア向け採用ピッチ資料
inusan
0
160
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
Select API from Kotlin Coroutine
jmatsu
1
190
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Become a Pro
speakerdeck
PRO
28
5.4k
It's Worth the Effort
3n
185
28k
The Cult of Friendly URLs
andyhume
79
6.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Balancing Empowerment & Direction
lara
1
370
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
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