Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@youtoy(Yosuke Toyota)inKDDI株式会社

TensorFlow Lite のモデルを Web で扱えるという話についてのざっくりなメモ【Google I/O 2021】

Last updated at Posted at 2021-06-12

内容はタイトルの通りで、先日参加したイベントで聞いた話が元になっています。

ちなみに、参加していたイベントというのはこちらです。

今回の話に関する公式の動画

TensorFlow Lite のモデルを Web で扱えるという話の公式の動画を掲載します。

今回の話に関する公式のデモ

上で掲載した動画の説明欄に、以下の 2つのデモへのリンクが掲載されていました。

Resources:
Demo 1 → https://goo.gle/3vxb62N
Demo 2 → https://goo.gle/3gLY79b

それぞれの内容を見てみると、CodePen上で試せるもので「TFJS Task API Demo - Movie Review Sentiment Classification」というものと、「TFJS: TFLite Model Runner Demo」というものでした。
2つ目はページのタイトルから分かりにくいですが、画像の Cartoonize を行うものです。

個人的には、過去にもいろいろ触っている画像分類が気になったので、上記の公式デモを公開しているアカウントの Pen にそれがあるかどうか探してみました。

画像分類のデモ

そうすると、以下のツイートに書いているデモページを見つけることができました。

上記のツイートに書いている「前に...」と書いているものは、以下の記事を書いたころに試していたものです。
　●TensorFlow Lite Model Maker による転移学習の過程で accuracy・loss を可視化（グラフ化）する - Qiita
　　https://qiita.com/youtoy/items/4f198afb3254613efc75

その後、キーワードで検索をしていて、カスタムモデルの要件に関する情報をたどれそうなリンクを見つけられました。

そこから要件が書かれたページにとんでみたのですが、今の自分の知識だとぱっと見ではすぐに分からない...
実際のモデルを用意して、デモのソースコードの必要な部分を切り出して動かす、とかやったほうが早そうな予感がします。

API の利用方法

記事の途中に出てきた npm のページを見てみると、以下のスクリプトタグを記載し、モデルの読み込みの処理を読み込みたいモデルに合わせて書くようです。
　●@tensorflow-models/tasks - npm
　　https://www.npmjs.com/package/@tensorflow-models/tasks
動作させるための情報.jpg

上で書いていたカスタムモデルかそうでないかという話についてですが、上記のモデルの読み込み処理（以下に抜き出したもの）を見ると、独自のモデルを外部から読み込むか、あらかじめ準備されているモデルを読み込むかの違いのようでした。

// Load the TFJS mobilenet model.
const model1 = await tfTask.ImageClassification.MobileNet.TFJS.load({
  backend: 'wasm'});

// Load the TFLite mobilenet model.
const model2 = await tfTask.ImageClassification.MobileNet.TFLite.load();

// Load a custom image classification TFLite model.
const model3 = await tfTask.ImageClassification.CustomModel.TFLite.load({
  model: 'url/to/your/bird_classifier.tflite'});

おわりに

とりあえず、TensorFlow Lite のモデルを Web で扱えるという話を追っていく前の、ざっくりな情報をメモ的にまとめました。

この後、続きを進めていって記事に書こうと思ってます。

【追記】 とりあえず動くものを試してみた

その後、サンプルに手を加えたものをちょっと動かしたりしてみてます。

【追記】 続きの記事をまず 1つ書きました

●30行未満の HTML＋JavaScript でカスタムモデルを使った画像分類を試す（TFJS Task API を利用） - Qiita
　https://qiita.com/youtoy/items/7b42ce2973a457cc5844

【追記】 余談2

そういえば、対応してるモデルを実際に動かして確かめる話は、わざわざ転移学習とかしてモデルを用意しなくても TensorFlow Hub の TFLite のモデルをとってくれば良いのでは？、と後から思ったりしました。

余談

記事の途中に出てきた以下のページで気になった部分を、最後にいくつかメモしておきます。
　●@tensorflow-models/tasks - npm
　　https://www.npmjs.com/package/@tensorflow-models/tasks

現状、「WORK IN PROGRESS」という状態のようです。
また、インストールについては「この 20K より小さいパッケージのみ利用すれば、依存関係等を気にせず使える」などといった説明が書かれていて、非常に使いやすい構成のようです。
ページの冒頭.jpg
【追記】 上記の話、デモのソースコードを見たら、外部から読み込んでるファイルのバージョンで 0.0.1-alpha.8 とか書いてました（まだベータにもなってない、という位置付けっぽい）。

<script src='https://cdn.jsdelivr.net/npm/@tensorflow-models/tasks@0.0.1-alpha.8'></script>

対応しているタスク・モデル等の全体像は、以下のようになるようです。
また「(The initial version only supports the web browser environment. NodeJS support is coming soon)」という記載があり、初期バージョンはブラウザ上での動作のみ対応という状態のようです。
表の前半.jpg
表の後半.jpg

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?