Zenn
🦌

奈良公園の鹿の名前がわかる鹿発見アプリ SHIKA-FINDE(E)R, using Machine Learning

2024/12/31に公開
Next.js
Python
機械学習
Web
FastAPI
tech

モチベーション

奈良公園の鹿！この鹿はどの鹿なんだ！さっき会った鹿なのか？新たな鹿なのか？わからーーん！

そう.. そんなときは...
この鹿がどの鹿なのか識別してくれる機械学習モデルを作ればいいじゃないか！

奈良公園の鹿を識別するためだけにできた、鹿識別アプリ！！！

概要

奈良公園の鹿を識別する機械学習モデルと、それを用いた鹿識別アプリ

machine learning model の作成

学習モデル

  • ResNet
  • CNN

データを集める

鹿データセットなんてないのである。それは鹿ではなくトナカイや。
奈良公園まで行って鹿の動画を撮ってきた。（2024/12/6　16:00ごろ　くもり, 発表の1週間前）

周りは外国人やカップルばかりである。鹿データセット作ってるの私だけ。

データセットをつくる

撮影した動画を画像に変換し、トレーニング用、テスト用、評価用に分割する。スクリプトで一気に前処理。

精度を上げるにはここでボケてる画像など抜き取る処理を入れるべきかも。背景除去もするべきかも。

モデルを学習する

ResNet

  • ResNet18
  • 10 epoch

Best val Acc: 0.9966
Test Loss: 0.0555 Acc: 0.9848

精度98%はなかなかいいんじゃないか？？
良すぎて怖い。

Doctorの先輩
「制度が良すぎるのはデータの分け方の問題じゃない？ train, value, testデータをランダムに分けるのではなく、時系列的に離れたデータを入れたほうがいい。ランダムだと、似たようなデータが学習データとテストデータに入ってしまう。」

TODO

  • データの分け方を改良する

CNN

Webアプリの開発

技術スタック

カテゴリー 技術スタック
バックエンド FastAPI, Python, uvicorn, ResNet
フロントエンド Next.js, React
コンテナ技術 Docker, Docker Compose
依存関係管理 requirements.txt, package.json
サーバー環境 uvicorn
機械学習モデル ResNet（事前学習済み）

Docker、FastAPIは初めて使う。
機械学習と相性のいいFastAPIを採用。（Flaskも検討したが、FastAPIが気になっていたので。）
フロントエンドは使い慣れているのでNext.jsを採用。

はじめてのDocker

「プログラマのためのDocker教科書 第2版 インフラの基礎知識&コードによる環境構築の自動化」を軽く読んだ。

何度も実行したコマンド

docker-compose down
docker-compose build --no-cache
docker-compose up

ちょっとうれしい

できてるね

frontend

# イメージの作成
docker build -t shika-app-frontend-2 .

# イメージからコンテナの作成
# ポートの指定を忘れてはいけない
# bashでバッシュの起動
docker run -p 127.0.0.1:3000:3000 -it shika-app-frontend-2 bash
# bash内でアプリの起動
root@8038eff3db11:/# npm run dev

backend

# イメージの作成
# 名前を指定しないと、ランダムになる
docker build --no-cache .
# イメージからコンテナの作成
docker run -p 127.0.0.1:8000:8000 -it e5de445d3c5a bash
# bash内でアプリの起動
root@154d0d1cdd98:/app# uvicorn main:app --host 127.0.0.1 --port 8000 --reload


デザイン

  • Behanceでムードボード作成
  • Canvaでトップ画面デザイン

できたものがこちら


考察

  • 鹿単体ではなく画像の背景で学習している可能性はある
    • 一匹の鹿に対して、同じ時刻・場所でしか撮影していない
    • 背景を除去した画像で学習することを試す必要がある

将来展望

  • より精度の良い機械学習モデルを作成する

感想

  • Dockerを試せた！
    • 研究がやばいのに、Doctorの先輩に借りたDockerの本を2時間くらいで読んだ。
    • インターンで docker compose up しかしてこなかったが、初めて自分でDockerファイルとdocker-compose.ymlを書いた。
  • AI driven開発を試した。主にChat-GPT4o
    • Pros
      • まずは一般的な実装方針を聞き、次に使ってほしい技術や機能を指定する方法で試したが、非常に実装が速くなるし、勉強になる。
    • Cons
      • Dockerfileの記述がうまいこといかず、自分で調べて書き直した。nodeやPythonパッケージのバージョンの問題、アプリのフォルダ構成を理解しないDockerファイルの記述の問題が主。
      • バージョンや依存関係系はやっぱり自分で何とかしないといけないな～という印象。

参考文献

  1. Docker docs, https://docs.docker.com/.
  2. 「プログラマのためのDocker教科書 第2版 インフラの基礎知識&コードによる環境構築の自動化」, https://www.shoeisha.co.jp/book/detail/9784798153223.
  3. https://qiita.com/tegnike/items/bcdcee0320e11a928d46#exec.
  4. https://github.com/Akatsuki1910/next-template/tree/main
  5. https://flowbite.com/docs/components/footer/

おまけ - Replitを用いたアプリ開発

Replitとは、アプリの開発をAIエージェントがまるっと行ってくれるサービス。自然言語で入力できる。APIやDBを使用可能。

プロンプト「鹿の画像を入力して、その鹿野名前を教えてくれるWebアプリ。鹿のidentificationには機械学習モデルを使用するので、そのモデルを入れられるようにしてください。」

1分くらいで動くプロダクトができたので感激。
テストコードなどは自動で生成してくれない。指示すればできるかも。

  • 広告
  • 外国人にうけそう
  • 名付け親になるにはお金発生
  • 投資家からすると0円（笑）
npm install
pip intall -r requirements.txt
npm run dev

メモ

名前候補
鹿に聞け！、鹿々識システム（しかしかシステム）
しかしかり

backend-1   | RuntimeError: Form data requires "python-multipart" to be installed.
backend-1   | You can install "python-multipart" with:
backend-1   |
backend-1   | pip install python-multipart
backend-1   |

command list

# Train model
# /shika-model>
python .\train_resnet.py

# API test -> http://127.0.0.1:8000/docs#/default
# /shika-app/backend/app > 
 uvicorn main:app --host 127.0.0.1 --port 8000 --reload

# docker run dev
# /shika-app >
docker-compose down
docker-compose build --no-cache
docker-compose up

docker run --it --rm --name --gpus -p -v

docker build -t shika-app-backend-1 .
docker run -it shika-app-backend-1 bash

**docker run -it -p 127.0.0.1:8000:8000 shika-app-backend-1 bash**

docker run -it shika-app-backend bash

docker attach
contrl+p+q: コンテナを終了せずに出る
exit: コンテナ終了して出る


# イメージをビルド
docker build -t [image name] . 
docker build -t shika-app-backend-1 .
# イメージを確認
docker images
# コンテナを起動
docker run -it イメージ名 bash
docker run -p 127.0.0.1:8000:8000 -it e5de445d3c5a bash

# なんかうまくいった
docker run -p 127.0.0.1:8000:8000 -it e5de445d3c5a bash
root@154d0d1cdd98:/app# uvicorn main:app --host 0.0.0.0 --port 8000 --reload

# docker run と同時に-pでポートを指定しないとアクセスできない
# フロントエンドはlocalhost:3000ではなく、http://127.0.0.1:3000　に接続する

進捗

ローカルはうまくいってそう
Dockerfileからbackend frontend別でできた～

TODO

  • Docker compose upをもう一度試す
  • GitHub管理
  • デザイン
  • Renderにデプロイ
  • 写真取れるように
  • 結果画面に対応する鹿の写真・名前を表示

Discussion