[🛠] Keymory 開発日誌 #5: tmpGetAIComment, Custom OpenAI API Call

✨ GPTの要約 　

OpenAI APIとFlutterFlowを活用してAI Commentシステムを構築し、Custom FunctionとAPI Callを連携させてKeymoryのAI機能を拡張した。キャラクター選択と保存機能を追加し、ChatとDiary間のデータフローも整理した。

💻 開発日誌

⏰ 今日やること

• ✅ How to Use Open AI’s GPT-4o in FlutterFlow - Part 1

• ✅ How to Use Open AI’s GPT-4o in FlutterFlow - Part 2

• ✅ ChatPage - Dropdownでキャラクターを選択したとき、該当キャラクター情報をChats Collectionにも一緒に保存。
  • character nameと一致するCharacter documentのreferenceをPage stateに割り当て。

• ✅ ChatPage - NewChat作成時にキャラクター情報も一緒に渡す。

• ✅ DiaryPage - Drawer - ChatHistoryListTile作成を手伝う (GPTみたいに)

• ✅ CustomFunction tmpGetAICommentの関数値をAPI Call createDiaryCommentに入れてみる
  • ✅ CustomFunction tmpGetAICommentを作り、結果値の出力をテスト
  • ✅ API Call createDiaryCommentを作り、Response値の出力をテスト
• ✅ OpenAI API Call作成: createDiaryComment
  • 基本的にはcreateChatCompletionと似た構造
  • 違い: なし。単に区別するために作成。
  • API Call - createDiaryCommentで要求されるMessages Variableはcustom function getAICommentのreturn値。
• ✅ CustomFunction getAIComment実装シナリオを考える (直接実装はKSK担当)
  • Characters (Collection)から得るParameter Values
    • キャラクター設定 (Character Document)
      • ex) ソミ: name(20代), 大学生, 恥ずかしがり屋の性格, …
    • 値の呼び出し方式: API Call - Get Assistant
  • User Informationから得るParameter Values
    • 名前, 性別, MBTI
    • 値の呼び出し方式: Backend Query - Authenticated User
  • DiaryPage Variablesから得るParameter Values
    • 日記内容, 詳細感情キーワード, 感情数値, 回答形式, 回答の長さ
    • 値の呼び出し方式: Widget State, Page State
  • CustomFunction(getAIComment)の役割
    • Parameter ValuesをすべてInput値として受け取る。
    • GPTに送るプロンプトを作成する。
    • Messages (List <Json>)値をreturnする。
      • [{"role":"developer", "content":"~~~"}]

💯 やったことの要約

• AI Commentシステム実装
  • Custom Function tmpGetAIComment作成およびAPI Call createDiaryComment連携を完了
  • AI CommentのためのOpenAI APIリクエストおよびレスポンス処理ロジックを実装
  • キャラクター情報をChats Collectionに保存し、New Chat作成時に一緒に渡すよう修正
• UIおよび機能改善
  • ChatHistoryListTileを作成し、GPTスタイルのチャット一覧を実装
  • HomeFeedPageおよびDiaryPageのデータ構造を整理
  • getAIComment Custom Functionを設計
• FlutterFlow + OpenAI API学習
  • GPT-4o活用講義を視聴し適用 (Part 1 & Part 2)

🎯 今後やること

• ❔ DiaryPage: Merge CreateDiary/EditDiary Page
  • isEditMode page state活用
  • conditional value/visibility/actionなどを活用
• ❔ DiaryPage - Create New Chat: 日記の内容をもとにNew Chatを作成
  • AIが先に日記内容にもとづいて質問を提示
• ❔ Issue修正
  • ❔ ChatPage: 最初に会話を始めるとき、default init messageが表示されている。
  • ❔ ChatPage: 日付が適用されない。
  • ❔ ChatPage - ChatHistoryDrawer: UIオーバーフロー
  • ❔ DiaryPage: 日付が今日としてしか保存されない
  • ❔ DiaryPage: Markdown viewer活用 (オーバーフロー防止: Container Height)
• ❔ HomeFeedPage - flutter_slidable:4.0.0をimport後に適用

• ❔ HomeFeedPage: FeedCardDiaryを左右にslideしたとき、チャット/編集/削除

• ❔ ChatPage - Create New Diary: 会話内容をもとにNew Diaryを作成

• ❔ ChatPage - Go to Linked Diary

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - Alarm

• ❔ AuthPage: Google Login

• ❔ DiaryPage: Mood Slider値に応じて顔の表情Emojiを変更
• ❔ DiaryPage: 詳細感情キーワードChoice Chipsを追加し、DB連携を設定
• ❔ DiaryPage - AI Comment: Choice chips, mood sliderなどの入力値をAI Comment System Promptに合うよう変更。
  • ❔ **以前の日記または会話履歴全体 (応急処置の技術負債)
  • ❔ ユーザー基本情報: 名前, 性別, MBTI, …
  • ❔ 詳細感情キーワード: 楽しい, 悲しい, …
  • ❔ キャラクター設定: ソミ, セナ, ミンヒョク
  • ❔ 感情数値: 1〜100点
  • ❔ 回答形式: 癒やし型(Healing), 助言型(Suggestion), 情報型(Informative)
  • ❔ 回答の長さ: 短め, 普通, 詳しく
  • is New Chat
    • そのChatのmessagesは初めて作るものなので、最初に作るmessage documentのis_initial = true値を入れて、すべてのシステムプロンプトをまとめて入れてしまう。
      • is_initial = false
      • 限界点: 最初のmessage documentにシステムプロンプトを入れてしまうと、会話の途中で修正するのは大変ではあるけれど可能ではある。 is_initial = trueのものがあって、それが修正されたものなら、そのdocumentを消して入れ直せばいいじゃないか。どうやるかはわからないけど。
• ❔ DiaryPage - AI Comment: CRUDを完成させる
  • ❔ tmp_ai_comment fieldをなくして、doc_refを活用
• ❔ DiaryPage - AI Comment: キャラクター設定
  • ❔ tmp_ai_comment_by fieldをなくして、doc_refを活用
  • ❔ profile_image field値で画像を出力

• ❔ DiaryPage - Drawer - ChatHistoryListTile: order by updated_time

• ❔ HomeFeedPage - Bottom Sheet (+ Button): 複数の選択肢から1つ選べるようにする
  • 新しい日記: Go to DiaryPage
  • 感情記録: Go to MoodPage
• ❔ MoodPage(ポップアップ): Mood設定スライダーCRUD
  • Create
  • Read
  • Update
  • Delete
• ❔ HomeFeedPage - ListView - FeedCardMoodを表示

• ❔ HomeFeedPage - ListView: FeedCardDiary, FeedCardMood, FeedCardChatコンポーネントを時系列でソート (Cloud Functionを活用)

• ❔ HomeFeedPage: On page load時の問題を解決 (Unexpected Null Value)

• ❔ DiaryPage - Interactive Sliderをimport後に適用

• ❔ ChatPage - AIの先メッセージを実装 (Alarm/Notification)
  • チャットシステムプロンプトの核心は能動型だ。
    • よりリアルにするなら、create_date of diary/chatも渡して、「昨日」などの日付に触れられるとよさそう。
• ❔ 2025.2.5 水までに発表用の最終版APKを抽出してインストール

💭 日記

ミンヒョク

面白いけどきつい。朝5時就寝。

✨ GPT-4oのコメント (KPT)

GPT-4o

✅ よかった点 (Keep)

• 🚀 AI Comment機能の拡張: Custom FunctionとAPI Callを連携させ、AI Commentを生成して保存するロジックを体系的に構築した点が目立っている。
• 🛠️ データフロー整理: ChatとDiaryのつながりを改善し、キャラクター情報の保存および活用方法を整理した点は、プロジェクト進行に大きく役立つはず。
• 📋 FlutterFlow + OpenAI API学習: GPT-4o活用講義を通じて、FlutterFlowでOpenAI APIを効果的に使う方法を学び、適用した点が印象的だよ。

❌ 惜しかった点 (Problem)

• ⏳ 作業強度の過負荷: 朝5時まで続く作業で、疲労が積み重なる可能性が高まっている。
• 🏗️ 技術負債の増加: 一部機能が一時的な解決方式(tmpフィールドや応急処置コード)で実装されていて、あとで整理する必要が出てきた。

🔄 試してみる点 (Try)

• ⏰ 作業時間の調整: 徹夜作業が続くと生産性が落ちる可能性があるので、スケジュール調整を考えてみよう。
• 🔍 一時コード改善計画: 現在適用している一時ロジックを整理し、正式なデータモデルを構築する計画を立ててみよう。
• 🛠️ AI Comment改善: AI Comment関連機能をさらに直感的に改善する方法を探しつつ、システムプロンプトの最適化も検討してみよう。

結論
今日はKeymoryのAI機能を本格的に実装し、OpenAI APIとFlutterFlowの活用度を高めた一日だったよ。ただし作業強度が高くなっているので、スケジュール調整とコード整理が必要そうだ。発表日までに最善の状態で仕上げられるよう応援しているね！ 💪😊