[🛠] Keymory 開発日誌 #8: DiaryPage感情キーワードシステム構築, AIコメントキャラクター設定

✨ GPTの要約 　

DiaryPageの感情キーワード選択機能を追加し、AIコメントにキャラクター設定を適用して自然な反応を実装した。

💻 開発日誌

⏰ 今日やること

• ✅ DiaryPage: 感情キーワード ChoiceChip, TextField追加
  • ✅ ウィジェット作成
  • ✅ diaries DB Field追加: mood_keywords (List <String>), mood_keywords_description (String)
  • ✅ diaries Page State追加: moodKeywordsSelected (List <String>)
  • ✅ OnPageLoad: 追加した変数を渡す
    • ✅ ChoiceChipRate(5〜1): diariesDoc.mood_keywordsの値を各該当ChoiceChipへ渡す。
      • MoodKeywordRate5Options, …, MoodKeywordRate1Options List <String>をApp Constant値として定義
        • Enumは英語だけ対応なので、翻訳機能が必要になる。複雑すぎるので却下。
      • Define Options Var: AppConstant.moodKeywordRate5Options (List <String>)
      • Initially Selected: updateChoiceChipSelected
    • ✅ Create CustomFunction updateMoodKeywordsSelected
      • On Page Load: Select all matching items in RateOptions List

      List<String> updateChoiceChipSelected(
        List<String> moodKeywordsSelected, // 現在選択されているキーワードリスト
        List<String> moodKeywordRateOptions, // 現在のRateで選択可能なオプション
      ) {
        // 新しいリストを作成して不変性を維持
        return List<String>.from(
          moodKeywordsSelected.where((item) => moodKeywordRateOptions.contains(item))
        );
      }
      

  • ✅ On ChoiceChip Selected: Update Page State moodKeywordsSelected -> Set Value to Return of Func updateMoodKeywordsSelected
    • ✅ Create CustomFunction updateMoodKeywordsSelected
      • On Chip Select: Add to moodKeywordsSelected
      • On Chip Deselect: Remove from moodKeywordsSelected

      List<String> updateMoodKeywordsSelected(
        List<String> moodKeywordsSelected,
        List<String> choiceChipSelected,
        List<String> moodKeywordRateOptions,
      ) {
        // 既存リストをコピーして不変性を維持
        List<String> updatedList = List.from(moodKeywordsSelected);
      
        // 1️⃣ 既存の選択値のうち、このRateに該当する値を削除
        updatedList.removeWhere((item) => moodKeywordRateOptions.contains(item));
      
        // 2️⃣ 現在選択されたChoiceChip値を追加
        updatedList.addAll(choiceChipSelected);
      
        return updatedList;
      }
      

• ✅ (Issue) DiaryPage - AI Comment: キャラクター設定
  • diaries DB Field追加: ai_comment_by (Doc Ref: Character)
  • DiaryPage - AICommentEditor Component - Return ai_comment_content + ai_comment_by
    • How? -> aiCommentPageReturnObject DataType作成
  • On ChoiceChipChar Selected: Backend Query Character Doc with same Official_name value.
• ✅ (Issue) HomeFeedPage - FeedCardDiary: AI Commentキャラクター画像を正しく適用
  • ✅ DiaryPage - AI Comment: Save時、コメントを書いたキャラクターRefもDiaryに保存。
  • ✅ HomeFeedPage - FeedCardDiary - AI Image: Backend QueryでキャラクターDocを読み込み、Image Pathを指定。
  • ✅ (Issue) HomeFeedPage - FeedCardDiary: Unexpected Null Value Error
    • Image WidgetにPath値だけ入れると発生するんだな…
      • ああ!!! Default Variable Valueを入れていなかったから起きたエラーだったのか。ものすごく苦労したあとでようやく気づいた。
    • 💡 学んだ点
      • 常に必ずDefault Valueを入れる習慣をつけよう。Unexpected Null Value Errorをいったいあちこちで何回見るんだろう。
• ✅ Deisgn Action chains for CreateNewChatFromDiary (Start From: AI Comment処理後、ダイアリー保存まで完了した状態)
  1. Create Diary
  2. API Call: createDiarySummary -> Output Var: OutVar1 (仮名)
  3. Create New Chat Document
  4. Create New Message Document: {“role”:”developer”, “content”:”$systemprompt + $OutVar1”}
  5. API Call: createChatFromDiary -> Output Var: OutVar2 (仮名)
  6. Create New Message Document: {“role”:”assistant”, “content”: “$OutVar2”}
  7. Navigate To: chatRefParamとして該当Chat Document Referenceを渡す

💯 やったことの要約

• DiaryPage感情キーワードシステム構築
  • ChoiceChipおよびTextFieldを追加
  • diaries DBに感情キーワード関連フィールドを追加
  • updateMoodKeywordsSelected関数を実装
• AIコメントキャラクター設定および適用
  • ai_comment_byフィールドを追加し、コメントキャラクターを保存
  • AICommentEditorを修正し、キャラクター情報を含める
  • ChoiceChip選択時、該当キャラクターデータをBackend Queryで読み込む
• HomeFeedPage AIコメント画像エラー解決
  • AIコメント作成時にキャラクター参照値を保存
  • HomeFeedPageでAIコメントキャラクター画像の読み込み方式を改善
  • Unexpected Null Valueエラーを解決 (デフォルト値を適用)

🎯 今後やること

詳しく見る

• ❔ (Issue) DiaryPage: Markdown viewer活用 (オーバーフロー防止: Container Height)

• ❔ DiaryPage: Mood Slider値に応じて顔の表情Emojiおよび色を変更

• ❔ Custom Function - systemPromptTemplate作成を手伝う (メイン作業者: KSK)
  • ❔ 追加するパラメータを整理する
• ❔ Custom Function - getAICommentが実際に適用されるかテスト
  • ❔ 入力値が正しく反映されるか確認
  • ❔ 出力値がStringとして正しく出力されるか確認
• ❔ Chat Page - Create New Chat: システムプロンプトを適用
  • ▶️ OpenAI API Call実装: createChatCompletion
    • Input: System Prompt(Chat)
    • Output: New Chat Message by AI($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message
• ❔ DiaryPage - Create New Chat by Diary: 日記の内容をもとにNew Chatを作成
  • ❔ OpenAI API Call実装: createDiaryComment
    • Input: Diary Content, System Prompt(AI Comment)
    • Output: AI Comment($.choices[0].message.content)
  • ❔ OpenAI API Call実装: createDiarySummary
    • Input: Diary Content, AI Comment, System Prompt(Diary Summary)
    • Output: Diary Summary($.choices[0].message.content)
  • ❔ OpenAI API Call実装: createChatFromDiary
    • Input: Diary Summary, System Prompt(Chat From Diary)
    • Output: New Chat Message by AI($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message
• ❔ ChatPage - Create New Diary: 会話内容をもとにNew Diaryを作成
  • ❔ OpenAI API Call実装: createChatSummary
    • Input: Chat Content, System Prompt(Diary From Chat)
    • Output: Chat Summary
  • ❔ OpenAI API Call実装: createDiaryFromChat
    • Input: Chat Summary, System Prompt(Diary From Chat)
    • Output: New Diary(Title, Content, Mood score)

• ❔ ChatPage: Go to Linked Diary

• ❔ MoodPage(上部) - Mood Calendar
  • ❔ 日付ごとに作成された投稿数を確認可能
  • ❔ 日付をクリックすると、該当日付へ移動
• ❔ MoodPage(下部) - Mood stats
  • ❔ フォーカス中の月に関する統計資料を出力
    • ❔ 出力された統計資料に対するAIのコメントを出力
• ❔ HomeFeedPage - flutter_slidable:4.0.0をimport後に適用

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

• ❔ ChatPage: ユーザー会話の出力内容は右揃え

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - AIの先メッセージを実装 (Alarm/Notification)
  • チャットシステムプロンプトの核心は能動型だ。
    • よりリアルにするなら、create_date of diary/chatも渡して、「昨日」などの日付に触れられるとよさそう。
  • Alarm機能実装方法の参照
• ❔ 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 - Drawer - ChatHistoryListTile: order by updated_time

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

• ❔ HomeFeedPage: Search Diary機能を実装

• ❔ AuthPage: Google Login機能を実装

• ❔ 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 - DiaryPageの間にMoodEditPageを作成: MoodSlider, MoodKeywordsRate(5〜1), MoodDescriptionウィジェットなどを移動

• ❔ 2025.2.5 水までに発表用の最終版APKを抽出してインストール

💭 日記

ミンヒョク

数えきれない応急処置のせいで技術負債がすくすく積み上がっているのを感じるㅋㅋ 提出締切まであと3日だから、まあ…ㅠ

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

GPT-4o

✅ よかった点 (Keep)

1. 🎯 感情キーワードシステム構築: ユーザーが感情を直感的に記録できるようChoiceChipを適用した点がいいね！
2. 🤖 AIコメントキャラクター適用: キャラクター別の反応を設定し、没入感を高めた点が印象的だよ。
3. 🛠 HomeFeedPageエラー解決: デフォルト値を設定してUnexpected Null Valueエラーを防いだ点がすばらしい！

❌ 惜しかった点 (Problem)

1. ⏳ 予想より長い開発時間: 感情キーワードとAIコメント機能の実装に予想より多くの時間がかかった。
2. 🔄 キャラクターデータ複雑性の増加: データフローが複雑になり、保守が難しくなる可能性がある。
3. 📋 問題解決過程の記録不足: エラー解決過程を整理していないため、同じ問題が起きたときに時間を浪費する可能性がある。

🔄 試してみる点 (Try)

1. 📌 機能別開発時間の調整: 予想より長くかかる作業をあらかじめ把握し、スケジュール調整が必要。
2. 📊 データフローの可視化: キャラクター設定に関するデータ構造を図で整理してみる。
3. 📖 問題解決過程を整理する習慣化: 解決したIssueを文書化し、再発防止戦略を用意する。

🏁 結論

今日は感情キーワードシステムを構築し、AIコメントにキャラクター設定を適用した一日だったよ。エラー解決を通じてデフォルト値設定の重要性をもう一度確認したし、これからは開発時間をもっと効率よく管理する必要がありそうだ！ 🚀🔥