「AnimalGO」〜AIの力で動物図鑑を作ろう！〜　

# 初めに
どうもこんにちは！最近アプリ開発に力を入れてる大学院生です（研究もやらなきゃね…）

今回は、先日のハッカソンでチーム開発を行なった**Webアプリ**についてと、**チーム開発**について共有したいと思います！

ハッカソンでは三位タイで入賞させていただきました！[Twitter（チーム名：カワケラ）](https://twitter.com/geek_pjt/status/1647528651859329029?s=20)

[GitHubのレポジトリ](https://github.com/rabbit0624/kawakera_vol2)も載せておきます


# Webアプリ
## 機能
このアプリは、**動物の画像**をホーム画面からアップロードするとその動物の**名前・生息地・豆知識**を教えてくれるサービスです

例をいくつかお見せします。下記の結果は、それぞれの画像の上段に載っている動物の画像とその生態情報です
1. ダルメシアン
![b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/8d0628b8-b697-bad2-827e-3240a5f574e6.png)

2. 雨蛙
![c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/d516eb99-f49a-25ed-5093-22b94a58913c.png)

3. ライオン
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/dccbfe96-d9df-2405-5b11-1d6d8a5076f0.png)

動物の生態が詳しく説明できていますね〜。種明かしは[技術](##技術)の章で！

また、ユーザーによってアップロードされた画像とその生態は**すべて保存される**ようになっていて、ホーム画面から見れるようになっています。**ログイン機能**を搭載しているので、誰が保存したかはわかるようになっています。

![127.0.0.1_8080_ (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/41e17520-b691-5497-8e02-7dfb171161d6.png)

## コンセプト
アプリ名は「**AnimalGO**」で、「ポケモンGO」をもじっています笑

**「ポケモンGO」のように動物を捕まえて動物図鑑を完成させれたら面白いんじゃないか？**

という発想からこのアプリを作りました

ただ1つ違うのは、図鑑を**みんなで作り上げる**ということです！ユーザー全員で作り上げることで、自分の知らなかった動物や他の人によって保存された動物の生態を見ることができます！

## 技術
僕たちはどのようにしてこのサービスを作り上げたのか？？
ここが一番気になるますよね！

核となる技術はこちらです
- MVTモデル：**Django**
- データベース：**postgres**
- CSSデザイン：**bootstrap**
- AI：**HuggingFace・ChatGPT・DeepL**

### MVTモデル・データベース・CSSデザイン
まずは、上3つについて解説します

Djangoを用いてデータベースの操作、ログイン機能、ページの動的な変化を設計しました。**自分はチーム開発で、主にここに携わっていました。** DjangoはSQL要らずでデータベースにアクセスでき、フルスタックのPythonフレームワークであるためおすすめです！！

データベースにはpostgresを用いましたが、特に理由はなく、MySQLなどでも良いと思います

ページのデザインはbootstrapの無料のテンプレートを利用しました。[startbootstrap](https://startbootstrap.com/themes)には無料のテンプレートが大量にあるのでデザインに迷ったらとりあえずここって感じで使ってます

### AI技術
さて、ここからが**技術の肝**となる部分です。このフローを見るとわかりやすいと思います。
![3B969973-B428-4500-9122-584702AD082A_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/c9afd5b9-3c45-b2e9-a497-fab0e72d8ae4.jpeg)

以下が入力から出力までの流れです
1. 画像をHuggingFaceの画像分類モデルに渡し、**画像分類**を行う
    - 入力：動物の画像 (ダルメシアンの画像)
    - 出力：動物名 ("dalmetian"）
2. ChatGPTに**動物の解説を英語で行ってもらう**
    - 入力：動物名 ("dalmetian")
    - 出力：動物の生態 ("Name", "area", "foods", "trivia")
3. DeepLにChatGPTの解説を**翻訳**してもらう
    - 入力：動物の生態 ("Name", "area", "foods", "trivia")
    - 出力：動物の生態 ("動物名", "生息地", "食べ物", "豆知識")
 
このアプリは、元からデータベースに保存してある情報を取り出しているのではなく、**AIによってデータを生成して**表示しています！

ChatGPTに直接日本語で解説を行ってもらうこともできるのですが、英語の方が精度が良いのでこの方法を採用しました

初めは、[Clip](https://openai.com/research/clip)を使って画像に写っている動物を判断するつもりだったのですが、あまりうまくいかなかったのでHuggingFaceの画像分類モデルを使用することにしました





# チーム開発
## 役割
このアプリは5人で、MVTモデル・AI・フロントエンドの大きく三つに分担して作成しました。

DockerとGitHubを活用をしたのですが、Dockerの環境構築に少し手こずりました…

![1986B5FD-F78D-463C-BBE0-952868D34207_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/6f38c843-c623-4535-71dd-37fd2e840860.jpeg)


# まとめ
ハッカソンにてチーム開発を行なったWebアプリについて紹介しました！

HuggingFace・ChatGPT・DeepLの３つのAIをフルに活用したWebアプリを作り、入賞することができました。入賞した時の達成感は最高でしたね〜

チーム開発を通して、適切な役割分の仕方や適度なコミュニケーションの大切さを学ぶことができました！

皆さんもぜひ、ハッカソンでWebアプリのチーム開発やってみてください。面白いですよ〜



# あとがき
ご覧いただきありがとうございました！

GitHubにコードがあるので、皆さんも使ってみてください！