初めに
どうもこんにちは！最近アプリ開発に力を入れてる大学院生です（研究もやらなきゃね…）
今回は、先日のハッカソンでチーム開発を行なったWebアプリについてと、チーム開発について共有したいと思います！
ハッカソンでは三位タイで入賞させていただきました！Twitter（チーム名：カワケラ）
GitHubのレポジトリも載せておきます
Webアプリ
機能
このアプリは、動物の画像をホーム画面からアップロードするとその動物の名前・生息地・豆知識を教えてくれるサービスです
例をいくつかお見せします。下記の結果は、それぞれの画像の上段に載っている動物の画像とその生態情報です
-
ダルメシアン
-
雨蛙
-
ライオン
動物の生態が詳しく説明できていますね〜。種明かしは技術の章で！
また、ユーザーによってアップロードされた画像とその生態はすべて保存されるようになっていて、ホーム画面から見れるようになっています。ログイン機能を搭載しているので、誰が保存したかはわかるようになっています。
コンセプト
アプリ名は「AnimalGO」で、「ポケモンGO」をもじっています笑
「ポケモンGO」のように動物を捕まえて動物図鑑を完成させれたら面白いんじゃないか？
という発想からこのアプリを作りました
ただ1つ違うのは、図鑑をみんなで作り上げるということです！ユーザー全員で作り上げることで、自分の知らなかった動物や他の人によって保存された動物の生態を見ることができます！
技術
僕たちはどのようにしてこのサービスを作り上げたのか？？
ここが一番気になるますよね！
核となる技術はこちらです
- MVTモデル：Django
- データベース：postgres
- CSSデザイン：bootstrap
- AI：HuggingFace・ChatGPT・DeepL
MVTモデル・データベース・CSSデザイン
まずは、上3つについて解説します
Djangoを用いてデータベースの操作、ログイン機能、ページの動的な変化を設計しました。自分はチーム開発で、主にここに携わっていました。 DjangoはSQL要らずでデータベースにアクセスでき、フルスタックのPythonフレームワークであるためおすすめです！！
データベースにはpostgresを用いましたが、特に理由はなく、MySQLなどでも良いと思います
ページのデザインはbootstrapの無料のテンプレートを利用しました。startbootstrapには無料のテンプレートが大量にあるのでデザインに迷ったらとりあえずここって感じで使ってます
AI技術
さて、ここからが技術の肝となる部分です。このフローを見るとわかりやすいと思います。
以下が入力から出力までの流れです
- 画像をHuggingFaceの画像分類モデルに渡し、画像分類を行う
- 入力：動物の画像 (ダルメシアンの画像)
- 出力：動物名 ("dalmetian"）
- ChatGPTに動物の解説を英語で行ってもらう
- 入力：動物名 ("dalmetian")
- 出力：動物の生態 ("Name", "area", "foods", "trivia")
- DeepLにChatGPTの解説を翻訳してもらう
- 入力：動物の生態 ("Name", "area", "foods", "trivia")
- 出力：動物の生態 ("動物名", "生息地", "食べ物", "豆知識")
このアプリは、元からデータベースに保存してある情報を取り出しているのではなく、AIによってデータを生成して表示しています！
ChatGPTに直接日本語で解説を行ってもらうこともできるのですが、英語の方が精度が良いのでこの方法を採用しました
初めは、Clipを使って画像に写っている動物を判断するつもりだったのですが、あまりうまくいかなかったのでHuggingFaceの画像分類モデルを使用することにしました
チーム開発
役割
このアプリは5人で、MVTモデル・AI・フロントエンドの大きく三つに分担して作成しました。
DockerとGitHubを活用をしたのですが、Dockerの環境構築に少し手こずりました…
まとめ
ハッカソンにてチーム開発を行なったWebアプリについて紹介しました！
HuggingFace・ChatGPT・DeepLの３つのAIをフルに活用したWebアプリを作り、入賞することができました。入賞した時の達成感は最高でしたね〜
チーム開発を通して、適切な役割分の仕方や適度なコミュニケーションの大切さを学ぶことができました！
皆さんもぜひ、ハッカソンでWebアプリのチーム開発やってみてください。面白いですよ〜
あとがき
ご覧いただきありがとうございました！
GitHubにコードがあるので、皆さんも使ってみてください！