Running Late

https://github.com/KinuGra/2511-egret-front
http://35.78.241.229:3000/

Next.js

AWS

Python

Firestore

Lambda

目指せ最強のエンジニア...!!!

fe01

zatunohito

推しアイデア

褒めてあげるのではなく、危機感を煽る

作った背景

つよつよになるまでの問題として技術力、モチベ、勉強量、危機感がない、と要因分析していくと「危機感がない」という課題が出てきたため。

推し技術

WebSocket, CloudFormation, RAG, Three.js

プロジェクト詳細

image image

会場に来ている方はデプロイ済みなので触ってみてください！

概要

学びスニペットとAIによる採点結果をリアルタイムで共有し、他プレイヤーや活躍している学生に比べてどれくらい遅れているかを見せつけて焦らせるアプリケーション。

リポジトリ

フロントエンド https://github.com/KinuGra/2511-egret-front

バックエンド https://github.com/KinuGra/2511-egret-back

インフラ https://github.com/zatunohito/2511-aws-code

技術

image

フロントエンド

 
・ Next.js
・ Cloud Firestore
・ Three.js

image

バックエンド

 
・ Python（FastAPI）
・ RAG
・ Chroma DB

image

インフラ

 
・ API Gateway
・ WebSocket
・ Lambda(Node.js)
・ Amazon Bedrock
・ DynamoDB
・ S3
・ EC2
・ VPC + Nginx

image

機能詳細

FastAPI + RAG + Geminiによる採点機能については「工夫したこと」に書きました。

投稿・通知機能

image

スニペットはCloud Firestoreに保存しており、スニペットが投稿されるとAWSで構築したWebSocketでリアルタイムに周囲のユーザーの学んだこととスコアが通知されます。

スコアの表現

image

2つのAI（RAG・Gemini、Bedrock）によって採点されたスコアはリアルタイムに通知されるだけでなく、Three.jsで制作した惑星モデルの大きさに直結しており、さらにプログレスバー、スニペットと紐づいています。

Three.js

3Dでタイトル、惑星を実装しているのでドラッグすると回転させることが可能。

IaC

ConoHa VPSでデプロイしているバックエンドもコードで構成するつもりだったが、時間がなかった。

AWSに関してはCloudFormationを使い、コードで管理することでGUIによるミスを減らすことに挑戦しました。

工夫したこと

バックエンド

JSON Schemaで出力を制御することで、LLM が必ず"depth_of_learning": intのような正しい JSON を返すように制御

config={
  "response_mime_type": "application/json",
  "response_json_schema": SnippetScore.model_json_schema(),
}

RAG

採点品質を高めるためにRAGを用いた。 Embedding → 類似検索 → プロンプト生成まで全て実装した。

流れ： ① Gemini の embedding ② ChromaDB にクエリ ③ 類似スニペット取得 ④ プロンプトに注入 ⑤ Gemini が “良い例と比較しながら採点” image

・Geminiの役割

Embedding（意味を数値化）
例文比較をした上での採点（LLM）

・ChromaDB の役割

例文データベース
類似検索（近いスニペットを探す）
これらを用いてLLMの弱点を補完しています。

AIの採点2種類を使い、ユーザーのスコアを“平均”して信頼性を高めた

・AWS Bedrock（Claude） ・RAG Gemini

挑戦したこと

WebSocket

我々以外の強い人がやることが多かったAPI Gateway + Lambda + DynamoDBによるリアルタイム通信を今回は当日までに勉強し、コネクションに関するエラーと戦いつつもなんとか実装しました。

EC2・VPSでデプロイ

Next.jsといえばVercelで爆速デプロイすることが多く、今回はEC2を使ってデプロイしてみようという話になったのでメンターさんに教えてもらいながらもデプロイすることができました。

FastAPIも仮想サーバーを借りて、生のUbuntuにNginxやFastAPIの環境構築を1から行いました。

2つの評価を取得し平均することで、単一AI依存を避け、信頼性を高めた。

あれこれ

WebSocketの接続したユーザーがbodyを送ったとき、そのbodyを送ったユーザーに返したくない。 ページのコンポーネントが再レンダリングされるたびに再接続され、connectionIdが同じでなくなってしまった。 そこでuseRefという参照を維持するreactの関数コンポーネントを使うことでconnectionIdがそろい、bodyが送信者に送り返されなくなった。 うれしいね。

AI

Notion AIによるミーティングの効率化

企画・開発・振り返りのミーティングでは以下のような課題があります。

・手動で議事録を手動で作成するのが面倒で、開発時間が削られる ・複雑な議論の振り返りの困難さ：ハッカソンのミーティングでは複雑な技術的議論や専門用語が多く、内容を追いきれないことがあった ・ミスコミュニケーションのリスク：議論内容の認識のズレや、聞き逃した内容の確認が難しい

Notion AIでDiscordでのミーティング内容を、文字起こしから要約までを全て自動で行うことで、上記の課題解決に活用しました。ミーティングに関して思い出せないことがあれば、Notionのミーティングブロックをプロンプトに含めてNotion AIに質問することで効率的に検索することが可能です。

・「議事録作成の手間を減らし、開発時間を最大化」 ・「振り返りの容易化」 ・「チームの意思決定の明確化」

Notion AI（Claude）による調査ドキュメント作成の自動化

Notion AIのパーソナライズを利用して事前にコマンドを設定することで、必要に応じてページ作成までを自動で行うようにした。

・実際のパーソナライズ設定 image

・実際のプロンプト image

・調査結果のドキュメント自動作成 image

ChatGPTによる企画段階でのレビュー

話し合いが煮詰まってきたら一度AIに課題設定、ターゲット設定、要件定義をレビューさせることで改善点を探りました。

image

Geminiのプレビュー機能でプロトタイプ作成

Figmaに書いている要件定義をプロンプトとして提示し、プロトタイプを作成することでメンバーへのイメージの共有や実装に必要な処理がイメージしやすくなるようにしました。

image

コーディング支援

・ChatGPT ・Gemini ・Codex ・GitHub Copilot

実装の際の技術的な疑問点の解消、適切なブランチ名の提案など、実装だけでなく雑務にも活用しました。

工夫した点としては、AIが提示するコードに対して以下のようなプロンプトを提示。

自分がコードを見て、何も見ずに実装できないであろう部分は学びながら実装できるように「概要」「技術的な仕組み」「文法」を解説してもらいながら実装するようにしました。

以下の3点に沿って教授してください。
・コードの概要
・実装コードの技術的な仕組みの解説
・実装コードの文法的な解説

・Google Antigravity Googleが11月19日、AIエージェントによって開発を支援するIDEを公開。

現在はパブリックプレビュー期間中で無料で利用できるため使ってみました。

AIが実装計画を提示してくれるので、それに対して人間がレビューすることでAIと人間の認識の差異を最小限に抑えることが可能です。

・Google Code Assist PRの自動レビュー、サマリーの提示によりレビュワーの負担が減るだけでなく、自分自身でコードのリファクタリングができるようにしました。

おまけのスクショ

スコアに応じて大きさが変わる3Dオブジェクト！回転します（笑） image

ReactMarkdownを用いており、マークダウン形式で投稿が可能です。 image

自分が送った投稿は「送信できました。」という通知がきます。 image

自分以外が送った投稿は採点処理が終わったのち、リアルタイムに受信されます。 image

fe01

@f0e72fc098fc575f