以下の記事でも取り扱っている「TFJS Task API」の話で、TensorFlow Lite用のモデルを JavaScript で簡単に呼び出して利用するというものです。
●TensorFlow Lite のモデルを Web で扱えるという話についてのざっくりなメモ【Google I/O 2021】 - Qiita
https://qiita.com/youtoy/items/3963f7f2cee431eca835
上記の記事や以下の公式情報にも書かれていますが、「TFJS Task API」は記事執筆時点ではアルファ版です。
●TensorFlow.js API
https://js.tensorflow.org/api_tasks/0.0.1-alpha.8/
なお、今回の HTML＋JavaScript は、冒頭で紹介した Qiita の記事でも紹介している、以下の公式デモを元にしています。
●TFJS Task API - Image Classification
https://codepen.io/jinjingforever/pen/VwPOePq
ソースコードや実行結果など
ソースコード
HTML＋JavaScript のソースコードは以下のとおりで、公式デモからカスタムモデルを使った処理以外の部分を除いて、さらにちょっとだけ書きかえたりなどしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TFJS Task API：カスタムモデルでの画像分類</title>
</head>
<body>
<div class="container">
<img id="img" src="https://storage.googleapis.com/tfweb/demos/static/wine.jpeg" crossorigin="anonymous" width="400">
<button id="button">推論を実行</button>
<div id="result"></div>
</div>
<script src='https://cdn.jsdelivr.net/npm/@tensorflow-models/tasks@0.0.1-alpha.8'></script>
<script type="text/javascript">
document.getElementById('button').addEventListener('click', async () => {
const model = await tfTask.ImageClassification.CustomModel.TFLite.load({
model: 'https://storage.googleapis.com/tfweb/models/mobilenet_v2_1.0_224_1_metadata_1.tflite',
maxResults: 1,
});
const result = await model.predict(document.getElementById('img'));
const resultEle = document.getElementById('result');
resultEle.textContent = `${result.classes[0].className} (${result.classes[0].score.toFixed(3)}).`;
});
</script>
</body>
</html>
推論の実行
上記の内容の html をブラウザ開くと、以下のようのページが表示されます。
ここでページ内の「推論を実行」ボタンを押してみます。
そうすると以下のように、ページ内の画像の下に機械学習の推論結果が表示されます。
推論結果として、「className がワインボトル、score が 0.833」という結果が得られました。
恐ろしいほど短い処理で、画像分類の推論が試せてしましました。
モデルの読み込みと推論に関わる部分
今回の全体のソースコードが短いのは、機械学習周りのソースコードがめちゃくちゃ短くてすむのが主な要因です。
まず、以下を読み込むのに 1行。
<script src='https://cdn.jsdelivr.net/npm/@tensorflow-models/tasks@0.0.1-alpha.8'></script>
そして、モデルの読み込みの処理、その後のイメージタグの画像に対して推論を行うのに、以下の部分だけという短さです。
const model = await tfTask.ImageClassification.CustomModel.TFLite.load({
model: 'https://storage.googleapis.com/tfweb/models/mobilenet_v2_1.0_224_1_metadata_1.tflite',
maxResults: 1,
});
const result = await model.predict(document.getElementById('img'));
おわりに
「TFJS Task API」は、元々は「TensorFlow Lite のモデルを Web で使える」という部分に対する興味で試したものでしたが、公式サンプルを削った内容を作ったら機械学習周りの部分の処理の短さにビックリでした。
以下のページで「Clean and powerful APIs」・「Simple installation」と謳っているだけはある！
という感じでした。
●@tensorflow-models/tasks - npm
https://www.npmjs.com/package/@tensorflow-models/tasks
【追記】その後のお試し
その後、このようなことをやって記事にも書きました。
●TensorFlow Hub の TensorFlow Lite用モデルを HTML＋JavaScript から使って画像分類（TFJS Task API を利用） - Qiita
https://qiita.com/youtoy/items/f6482f6a57d593e9fd3e