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
900
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.5k
How does the Relay connect Android app development and Design?
horie1024
2
2.1k
既存画面の 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
Deep Dive into ~/.claude/projects
hiragram
14
14k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.8k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
210
効率的な開発手段として VRTを活用する
ishkawa
1
170
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
230
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
Yes, You Can Work on Rails & any other Gem
kaspth
0
100
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
360
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
200
Featured
See All Featured
Scaling GitHub
holman
460
140k
Raft: Consensus for Rubyists
vanstee
140
7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Statistics for Hackers
jakevdp
799
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Site-Speed That Sticks
csswizardry
10
700
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
GitHub's CSS Performance
jonrohan
1031
460k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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/tfjs@1.1.0"></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