【ChatGPT☓HuggingFace】 もしもポケモンの世界が現実だったら...？

## 初めに
2023年6月24日参加したサポーターズ主催のハッカソンに参加したので、発表したアプリについて記事にしようと思います！

今回参加したハッカソンは、サポーターズ主催のハッカソンにて入賞した経験のあるチームのみが出場を許されていたので、かなりレベルが高かったです

残念ながら自分のチームは今回参加したハッカソンで入賞できなかったのですが、めちゃくちゃいい刺激になりました！

[GitHub](https://github.com/rabbit0624/kawakera_advance)にコードを公開しているので、今回作成したアプリAnimalGOでぜひ遊んでみてください！
[発表スライド](https://www.canva.com/design/DAFmniET5x0/J4Z1fpjKZrqM0rfMmCN9Yw/view)も公開しておきます

[デモURL](https://animalgo-advance.vercel.app)を使えるようにしたので、使ってみてください！



## どんなサービスなのか?
サービス名はAnimalGO

これは、動物の画像をAIの力であにモン (ポ◯モン）に変えてしまうアプリです！

実際に見てみましょう！

### 投稿
Home画面の投稿ボタンからこのような動物画像を投げます
![zebra_2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/c9cd2d9e-4cba-5ec1-2fc0-cb6892f168bc.jpeg)
![bare.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/9c9f0bc0-920a-ead8-563e-24f4a6aad103.jpeg)
![otter_2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/c4a9d2b6-3143-db2f-7def-8e1a684994d0.jpeg)

### 結果
するとこのように、動物がポケモンのようにステータス化されます！
さらに、その動物の生態も表示されます！
![5E415A31-78DF-4483-9637-29923B9BE59D_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/b2ec6c90-75ab-ec70-53ad-c044412e6ea3.jpeg)
![1DA1F8EC-490F-4402-BFAD-E68692D78E3C_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/75674b35-624e-e20a-9810-b7d8338f79b5.jpeg)
![BEF335C6-B774-40C2-9071-761967487F65_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/07b5f6b7-46f8-c26f-ca0e-ea88f5f09869.jpeg)

シマウマは素早さが高かったり、クマは攻撃が高かったり、カワウソは全体的に低かったり、現実のイメージとのあまりズレがなくステータス化できていますよね！カワウソはちゃんとみずタイプになってたりします！我ながらいい出来だと思ってます笑

そしてお気づきですか...？

そうです！画像が切り取られているんです！
これは、HuggingFaceのAPIを用いてAIで画像の切り取りを行っています

このアプリにはいろんな技術を使っているので、後ほど紹介します

## このアプリを開発したきっかけと目的は？
このアプリを作成するきっかけは、**動物の画像からその動物の生態がわかったら面白いよね** という話がチームで上がったことでした。

今回のアプリは、動物をポケモンのようにするアプリなので違和感があるかもしれません。実はこの AnimalGO は ver.2 なんです

動物の生態を教えてくれるAnimalGO ver.1については [この記事](https://qiita.com/rabbit0624/items/959ab309802e1a8e5115)に書かれているので読んでみてください！

今回開発したAnimalGO ver.2は、**子供にターゲットを絞り**AnimalGO ver.1をグレードアップしました。子供が動物園に行って写真を撮り、このアプリを通じて動物について楽しく学んでくれればいいなと思っています


## ChatGPT×HuggingFace
画像を投稿するだけで動物がポケモンになる！

どのような技術をつかったのかきになりますよね...？笑

下図を見てください。このような仕組みになっています！
![Screenshot from 2023-06-29 14-01-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/32c17515-aea7-585c-4ce7-33c8f5980d8e.png)

1. HuggingFaceの画像分類モデルとセグメンテーションモデルに動物の画像を投げる
1. 動物の名前と動物のセグメントされた画像を取得する
1. 動物の名前をChatGPTに与えてステータス化する
1. 動物の情報とセグメントされた画像を保存する

のような流れであにモン化させています！

さて、ChatGPTのプロンプトも気になりますよね？笑
それもお見せします！
```prombt.py
    system_setting = """\
        ### setting ###
        You are a scholar who knows much about animals and a Pokémon lover.  You have a wealth of knowledge about what animals eat, where they live, and trivia about them. You are tempted to compare animals to Pokémon.

        ### status ###
        You receive the name of the animal from the user. You are to respond with the animal' name(label), food, place of residence, trivia, one or two types you think apply to it, and predict the base status. You are to respond with the animal's food, place of residence, trivia, the type, and the base status in JSON format {"ecology":"what animals eat, and where animals live", "trivia":"animal's trivia", "type": "the animal's type you think",  "hp":"", "attack":"", "defense":"", "magic_attack":"", "magic_defense:"", "speed":""} or {"type": "the first animal's type you think, the second animal's type you think",  "hp":"", "attack":"", "defense":"", "magic_attack":"", "magic_defense:"", "Speed":""}.

        ### Requirements ###
        Be sure to output names (labels) in katakana.
        Answer the user's questions. You must output your answer in JSON format so the value is in Japanese.

        Here are some examples.

        Example 1
        user:cat
        assistant:{"label_ja":"ネコ", "ecology":"ネコは世界中に広く分布し、個人宅飼いや野良ネコとして生活しています。主に肉食で、小型哺乳類や鳥類を食べます。", "trivia":"ネコは一日の14〜16時間を寝て過ごしています。また、ネコは舐めることで毛づくろいをし、体を清潔に保ちます。", "type":"ノーマル", "hp":"82", "attack":"55", "defense":37", "magic_attack":"39", "magic_defense:"76", "speed":"95"}.

        Example 2
        user:crocodile
        assistant:{"label_ja":"ワニ", "ecology":"ワニは世界の熱帯地方に広く分布しており、河川や湖沼などの、淡水や汽水域に生息しています。幼体は昆虫、小魚等を食べて育ちます。成体は肉食で、サワガニやカメ、水鳥等を食べます。", "trivia":"ワニは魚を捕まえるときに、口を大きく開けて威嚇する行動をとります。この時の口の大きさは、実際の飲み込める大きさの3倍もあるとされています。また、ワニは空気を貯めることができるため、30分以上も水中に潜ることができます。", "type":"じめん,あく", "hp":"95", "attack":"125", "defense":"100", "magic_attack":"55", "magic_defense:"75", "speed":"45"}

        Example 3
        user:elephant
        assistant:{"label_ja":"ゾウ", "ecology":"ゾウはアフリカゾウ、インドゾウに分かれ、アフリカやアジアに生息しています。日本では草食獣と思われますが、実際には鼻を使って木の皮、根、芽、果実等を食べます。", "trivia":"ゾウの鼻は、とても力強く、木を引き抜いたり、川を渡りながら泳ぐことができます。ゾウは非常に社交的で、親密な仲間とは、鼻を触れあわせたり、耳をたたいたり、尻尾を振ったりしてコミュニケーションをとります。", "type":"じめん", "hp":"150", "attack":"120", "defense":"120", "magic_attack":"50", "magic_defense:"60", "speed":"50"}

        Example 4
        user:lion
        assistant:{"label_ja":"ライオン", "ecology": "ライオンはアフリカ中部から南部、インドの一部に分布している。主に肉食であり、トナカイ、シマウマ、カバ、水牛等を狩っている。", "trivia":"ライオンの雄は、鬣毛と呼ばれるたてがみを持っています。鬣毛は仲間内での地位を誇示するためにも重要で、強く美しいものを持つ雄が群れをリードすることが多いです。", "type": "ノーマル,あく", "hp":"95", "attack":"150", "defense":"70", "magic_attack":"60", "magic_defense":"80", "speed":"120"}
    """
    chatgpt = Chatgpt(system_setting)
    chatgpt.input_message(animal_name)
    knowledge = chatgpt.input_list[-1]["content"]

```

この中身を見れば何をやっているのかわかっていただけると思うので、プロンプトの内容については詳しくは触れませんがChatGPTをうまく扱うプロンプトのコツは
1. 命令を英語で書く
1. 例を詳しくたくさん書く

この2点だと思います！

このようにHuggingFaceの画像分類モデル・セグメンテーションモデル、ChatGPTの３つのAIによってAnimalGOはできています！

## 技術スタック
このアプリにはこのような技術たちを使っています

フロントにはReact、バックエンドにはDjango、サーバにはAWSを、バージョン管理にはGitHubを使いました
![Screenshot from 2023-06-28 18-56-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3274897/d1b3ddee-599c-c369-f246-08fdf780fc2a.png)

## チーム開発
AnimalGO ver.2は5人でチーム開発を行いました
2人がフロント、3人がバックエンドを担当していました

### 担当
私はバックエンド担当だったのですが、行ったことは大きく分けて3つです
1. API開発
1. フロントから送られてくる画像に対する一連の処理
1. CIのテストコード作成

APIの開発が初めてだったのでそこに挑戦するのには壁があったし、画像の処理を行うもの結構大変でした...
でも、チームのみんなと話し合って試行錯誤することでなんとか乗り越えることができました！

### コミュニケーション
一番苦労したのはチームのコミュニケーションでした
何をいつまでにやるべきなのか、現状どこまでできているのかというのを逐一把握するのが大変でした

なのでオフラインで頻繁なミーティングを行い、現状の把握と今後の予定を常に管理していました
オンラインでも把握できるように、GitHubのIssueによるチケット管理やReadmeに自分のやった作業を書いていました

## まとめ
今回のハッカソンでは賞を取ることは叶いませんでしたが、ハッカソンに出ることで技術的にもマインド的にもたくさんのものを得ることができました！　

ぜひ皆さんもハッカソン参加してみてください！

次出場できるのは就活終わってからかな〜...