はじめに
こんにちは！
今回は、ハッカソンイベントQiitaHackathon2024に参加してきたので、参加体験談と作成したアプリの紹介をさせていただきます！
私たちのチームは、
LINEのトーク画像のスクショをアップロードすることで、相手からの好感度を知ることができるアプリ「MoodKey」を開発しました！
参加したハッカソン
今回、Qiita主催のQiita Hackathon2024の予選に参加しました！
大学時代の同期3人での参加で、みんなIT関連の企業で働いております！
Qiita Hackathonは本戦と予選に分かれており、２日間で開発からプレゼンまでを行うと流れです。
結論、私たちのチームは予選通過できませんでしたが、備忘録として記事にしたいと思います！
テーマ
テーマは1日目の午前に発表されます。
今回のテーマは、、、、、「オープン」でした！
最初聞いた時に、パッと何も思いつかないくらい抽象的でしたので、アイデア出しが難しかったです😢
アイデアを決める
アイデア出しとしては、
- 「オープン」から連想できることをたくさん書き出す
- 書き出した内容に対して存在する課題を考える
- 解題に対する解決策を出す
というフローで進めました！
最終的に、
気になる子とLINEをしているけど、「相手の気持ちが分からず、一歩踏みだす勇気が出ない」という課題に対して、AIによって相手の気持ちをオープンにして次の一歩に繋げるようなアプリを作ろう。
となりました！
開発していく
完成までの流れとしては、
- Figmaでラフのデザインを起こす
- アイデアを形にするためのアーキテクチャを考える
- ラフのデザインで実装（その間に最終デザインも作成）
- 最終デザインを反映
となりました！
２日間でかなりハードでしたが、うまく分担して作りきりました（ほぼ寝れませんでしたが、、、）
デザイン
以下のようなデザインにしました！
工夫ポイントとしては、
- 背景色にはピンクと紫のグラデーションを使用し、暗い状態から気持ちが晴れていく（オープン）印象を与えるようなカラー
- ステータスバーを表示することで結果が分かるまでのフローをユーザーに可視化
- 画像をアップロードしてない状態では「診断開始ボタン」の色がグレーとなり、次に進めないことを知らせる
- 分析中のフローを入れることでユーザーを不安にさせない
アーキテクチャ
以下の図のようなアーキテクチャで実装しました。
フロントエンド：TypeScript（React）
バックエンド ：TypeScript（Node,js）、Python（Flask）
システムの大まかな流れとしては、
- ユーザーがアップロードしたトーク画像を文字起こし（Cloud Vision API）
- 文字起こししたテキストの感情分析でポジティブスコアを獲得（Transformer）
- テキストとスコアの情報をもとにスコアの理由とアドバイスを生成（Gemini）
となります。
工夫ポイントとしては、
- LINEなどはトークを全てコピーできないため、スクショ画像を文字起こしする処理を入れてユーザーの手間を減らす
- スコアの計算を生成AIに行わせず、transformerに行わせる（生成AIにスコアリングさせるよりも、感情分析用に学習されたモデルの数値の方が信頼できると考えた）
完成したアプリ
完成したアプリのgifを以下に貼りました！
主な画面構成としては、
- 画像アップロード画面
- AI分析中画面
- 結果表示画面
となってます。
作成したアプリを振り返ってみると、
- 好感度が必ずしもポジティブ度合いと一致はしない
- 診断結果のアドバイスを構造化して見やすく表示できた方が良い
などについては、さらに改善できるかなと思っています。
特に「好感度が必ずしもポジティブ度合いと一致はしない」については「会話頻度」、「共感」、「相手からの興味・関心」など、好感度に関連しそうな複数観点をもとに評価することで結果の質が上がるかなと考えています。
まとめ
今回は、Qiita Hackathonへの参加体験談と実際に作成したアプリの紹介をさせていただきました。
デザイン〜実装までを約1.5日間で完成させるのは非常にハードでほぼ睡眠はできませんでしたが、チームでプロダクトを作り切るという経験ができてよかったです！
機会があれば、また参加したいと思います！
それでは、また！