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
610
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
Use Perl as Better Shell Script
karupanerura
0
690
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
210
イベントストーミングから始めるドメイン駆動設計
jgeem
4
840
FormFlow - Build Stunning Multistep Forms
yceruto
1
170
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
300
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
110
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
280
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
660
GoのWebAssembly活用パターン紹介
syumai
3
10k
CSC307 Lecture 17
javiergs
PRO
0
110
複数アプリケーションを育てていくための共通化戦略
irof
10
3.9k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Invisible Side of Design
smashingmag
299
51k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimizing for Happiness
mojombo
379
70k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
The Pragmatic Product Professional
lauravandoore
35
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
4 Signs Your Business is Dying
shpigford
184
22k
The Cost Of JavaScript in 2023
addyosmani
50
8.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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