【超簡単！】自作の画像分類AIを載せたスマホアプリをFlutter✖︎Teachable Machineで作ろう！

# はじめに
普段IT企業で働いてますプログラマー芸人、ジンバです！
以下のように自作の画像分類AIを使ったアプリを簡単に作れる方法をご紹介します！

![スクリーンショット 2023-10-28 20.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/a70f73a7-4bc9-9afa-a287-93adca9481ba.png)

# 手順
手順は以下です。
<ol>
<li>好きな画像をたくさん集める！
<li>Teachable Machineに画像をアップロードして、モデルを入手！
<li>GitHubから画像分類のFlutterプロジェクトを入手！
<li>モデルを入れたら完成！
</ol>
説明していきます。

### 1.好きな画像をたくさん集める！
まずは分類したい画像を集めましょう！手動は面倒なので、<b>Google Colaboratory</b>で以下のコードを実行すると楽ですよー！


```
# 検索サイトから画像ファイルを収集するクローラ
!pip install icrawler
```

```py
import tensorflow as tf
# icrawlerのBingImageCrawlerクラスを利用可能にする
from icrawler.builtin import BingImageCrawler

# 「/apple」を保存フォルダに指定して、 BingImageCrawlerのインスタンスを生成する
crawler = BingImageCrawler(storage={"root_dir": "apple"}, downloader_threads=4)

# Bingで「リンゴの写真」というキーワードでヒットした画像を収集する
crawler.crawl(keyword="リンゴの写真", max_num=100)
```


```
# zipファイル作る
!zip -r /content/apple.zip /content/apple
```

```py
# zipファイルをローカルにダウンロード
from google.colab import files
files.download("/content/apple.zip")
```

こんな感じ↓
![スクリーンショット 2023-10-28 18.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/cc9c7166-077d-beaf-37d1-ffa3bc5f7f03.png)
<be>
ダウンロードされています↓

![スクリーンショット 2023-10-28 18.30.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/cbaead74-0360-1d43-2abb-31dab05182cc.png)

「リンゴ、ゴリラ、ラーメン」の画像をダウンロードしました！

![スクリーンショット 2023-10-28 18.39.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/ead26c24-166a-6224-0e33-c148fa1182e1.png)


### Teachable Machineに画像をアップロードして、モデルを入手！
Teachable Machine は、短時間で簡単に機械学習モデルを作成できる、ウェブベースのツールです。↓
https://teachablemachine.withgoogle.com/

では使ってみましょう！

まず「新しいプロジェクト」で「画像プロジェクト」を選択します。標準の画像モデルで良いでしょう。

![スクリーンショット 2023-10-28 18.47.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/9cbbb4c2-7f81-edc3-ae0d-7e652af55185.png)

![スクリーンショット 2023-10-28 18.47.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/6b466e28-8169-a5bc-87de-ff89bb00658c.png)

以下のような画面になります。クラス名を変えられます。

![スクリーンショット 2023-10-28 18.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/881e87ca-8ed6-5ebf-e8d9-4007ef3a7f31.png)

「アップロード」を押して、先ほどダウンロードした画像をアップロードします。
![スクリーンショット 2023-10-28 18.59.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/8cc91d15-d8f7-e987-472d-64e66eaca179.png)

ほかの画像もアップロードしたら、「モデルをトレーニングする」を押します。
すると「プレビュー」が表示されます。
![スクリーンショット 2023-10-28 19.04.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/bd0289b8-b35d-2350-1f42-79246d8d7ee7.png)

右上をWebcam→ファイルに変更して、テスト用の画像を上げてみましょう。

![スクリーンショット 2023-10-28 19.11.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/d1d95fda-4084-56a5-75e1-750f71cba7b4.png)

精度100%！簡単すぎましたかね。
「モデルをエクスポートする」から「Tensorflow Lite(量子化済み)」を選択してダウンロードしましょう！
![スクリーンショット 2023-10-28 19.13.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/c89054cd-52ce-7fd4-657e-67c96930881a.png)

以下のようにダウンロードできたら完了です！
![スクリーンショット 2023-10-28 19.16.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/e2234396-3612-5559-4491-937c8e1bf369.png)


### GitHubから画像分類のFlutterプロジェクトを入手！
開発環境は以下です
```
Mac Book Pro
Android Studio Chipmunk | 2021.2.1
Dart SDK version: 3.0.6 
Flutter 3.10.6 
```

下からFlutterの画像分類プロジェクトをダウンロードします。
https://github.com/tensorflow/flutter-tflite/tree/main/example/image_classification_mobilenet

![スクリーンショット 2023-10-28 19.28.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/b8ef6d9d-5188-8e3a-01fd-96163012b521.png)


「image_classification_mobilenet」だけでいいです。やり方ですが、キーボードの「.」を押すとVSCodeのようなレイアウトになってフォルダをダウンロードできます。
![スクリーンショット 2023-10-28 19.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/d35b460e-1ac9-1d50-de53-26af541146f4.png)

これをAndroid Studioで開いてみてください。

![スクリーンショット 2023-10-28 19.39.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/a86b44ce-a96f-0d7b-0759-8527e57fe984.png)
pubspec.yamlの「tflite_flutter」でエラーを出たら、最新バージョンを入力してください。
![スクリーンショット 2023-10-28 19.45.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/cf477faf-bf60-1653-8bbf-431e187442f0.png)


### モデルを入れたら完成！
「assers/models」にデフォルトで「labels.txt,mobilenet_quant.tflite」が入っています。

![スクリーンショット 2023-10-28 19.49.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/ff251394-90fa-8288-626f-ec0283954f49.png)

削除して、先ほどダウンロードしたモデルとラベルテキストに入れ替えてください。
![スクリーンショット 2023-10-28 19.53.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/5b40a96c-cdfb-cf3f-5f64-0a31d8c192ef.png)

「lib/helper/image_classification_helper.dart」のmodelPathを先ほど入れ替えたモデル名」に変えます。

![スクリーンショット 2023-10-28 19.54.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/beb26196-7d04-ba11-578d-9ac28de1c2ff.png)


あとは実機でビルドしてみましょう！
![スクリーンショット 2023-10-28 20.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/a70f73a7-4bc9-9afa-a287-93adca9481ba.png)

完成です！


# おわりに
思ったより簡単ではないでしょうか！音声とかもありましたので、そちらもチャレンジしてみたいですね！

# 告知
TikTokで「プログラミングやってる人しか分からないネタ動画」をあげてます！ぜひご覧ください！↓
https://www.tiktok.com/@jimba_games

![スクリーンショット 2023-10-28 20.02.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/6ecc0e9e-8a20-0772-da6e-644a05280e8b.png)