30行未満の HTML＋JavaScript でカスタムモデルを使った画像分類を試す（TFJS Task API を利用）【Google I/O 2021】

以下の記事でも取り扱っている「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 のソースコードは以下のとおりで、[公式デモ](https://codepen.io/jinjingforever/pen/VwPOePq)からカスタムモデルを使った処理以外の部分を除いて、さらにちょっとだけ書きかえたりなどしています。

```html
<!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 をブラウザ開くと、以下のようのページが表示されます。
![TFJS_Task_API：カスタムモデルでの画像分類（推論実行前）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2bd1111a-f175-66a3-c9fb-47932cf89fd0.jpeg)

ここでページ内の「推論を実行」ボタンを押してみます。
そうすると以下のように、ページ内の画像の下に機械学習の推論結果が表示されます。
![TFJS_Task_API：カスタムモデルでの画像分類（推論実行後）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/917abc2a-20cd-7139-3116-250968413af6.jpeg)

推論結果として、「className がワインボトル、score が 0.833」という結果が得られました。
恐ろしいほど短い処理で、画像分類の推論が試せてしましました。

### モデルの読み込みと推論に関わる部分
今回の全体のソースコードが短いのは、機械学習周りのソースコードがめちゃくちゃ短くてすむのが主な要因です。

まず、以下を読み込むのに 1行。

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

そして、モデルの読み込みの処理、その後のイメージタグの画像に対して推論を行うのに、以下の部分だけという短さです。

```javascript
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 で使える」という部分に対する興味で試したものでしたが、[公式サンプル](　https://codepen.io/jinjingforever/pen/VwPOePq)を削った内容を作ったら機械学習周りの部分の処理の短さにビックリでした。

以下のページで「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