[🛠] Keymory Dev Log #8: Building DiaryPage Emotion Keyword System, AI Comment Character Settings

✨ GPT Summary 　

I added an emotion keyword selection feature to DiaryPage and implemented more natural responses by applying character settings to AI comments.

💻 Development Log

⏰ Today’s tasks

• ✅ DiaryPage: added emotion keyword ChoiceChip and TextField
  • ✅ Create widgets
  • ✅ Added diaries DB Fields: mood_keywords (List <String>), mood_keywords_description (String)
  • ✅ Added diaries Page State: moodKeywordsSelected (List <String>)
  • ✅ OnPageLoad: pass the newly added variables
    • ✅ ChoiceChipRate (5~1): pass values from diariesDoc.mood_keywords to each corresponding ChoiceChip.
      • Defined MoodKeywordRate5Options, …, MoodKeywordRate1Options List <String> as App Constant values
        • Enum only supports English, so a translation feature would be needed. Too complicated, so rejected.
      • 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, // current selected keyword list
        List<String> moodKeywordRateOptions, // selectable options for the current Rate
      ) {
        // Create a new list to maintain immutability
        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,
      ) {
        // Copy the existing list to maintain immutability
        List<String> updatedList = List.from(moodKeywordsSelected);
      
        // 1️⃣ Remove values from the existing selection that belong to this Rate
        updatedList.removeWhere((item) => moodKeywordRateOptions.contains(item));
      
        // 2️⃣ Add the currently selected ChoiceChip values
        updatedList.addAll(choiceChipSelected);
      
        return updatedList;
      }
      

• ✅ (Issue) DiaryPage - AI Comment: character settings
  • Added diaries DB Field: ai_comment_by (Doc Ref: Character)
  • DiaryPage - AICommentEditor Component - Return ai_comment_content + ai_comment_by
    • How? -> create aiCommentPageReturnObject DataType
  • On ChoiceChipChar Selected: Backend Query Character Doc with same Official_name value.
• ✅ (Issue) HomeFeedPage - FeedCardDiary: apply AI Comment character image properly
  • ✅ DiaryPage - AI Comment: when saving, also save the Ref of the character who wrote the comment to Diary.
  • ✅ HomeFeedPage - FeedCardDiary - AI Image: load Character Doc with Backend Query and specify Image Path.
  • ✅ (Issue) HomeFeedPage - FeedCardDiary: Unexpected Null Value Error
    • This happens if I only put a Path value into the Image Widget…
      • Ah!!! It happened because I did not put in a Default Variable Value. I only realized after struggling like crazy.
    • 💡 What I learned
      • Always make a habit of putting in a Default Value. How many times am I going to see Unexpected Null Value Error everywhere?
• ✅ Design Action chains for CreateNewChatFromDiary (Start From: after AI Comment processing and diary saving are complete)
  1. Create Diary
  2. API Call: createDiarySummary -> Output Var: OutVar1 (temporary name)
  3. Create New Chat Document
  4. Create New Message Document: {“role”:”developer”, “content”:”$systemprompt + $OutVar1”}
  5. API Call: createChatFromDiary -> Output Var: OutVar2 (temporary name)
  6. Create New Message Document: {“role”:”assistant”, “content”: “$OutVar2”}
  7. Navigate To: pass the relevant Chat Document Reference as chatRefParam

💯 Summary of what I did

• Built DiaryPage emotion keyword system
  • Added ChoiceChip and TextField
  • Added emotion keyword related fields to diaries DB
  • Implemented updateMoodKeywordsSelected function
• AI comment character settings and application
  • Added ai_comment_by field to save the comment character
  • Modified AICommentEditor to include character information
  • On ChoiceChip selection, load the relevant character data with Backend Query
• Resolved HomeFeedPage AI comment image error
  • Saved character reference value when writing AI comments
  • Improved AI comment character image loading in HomeFeedPage
  • Fixed Unexpected Null Value error (by applying a default value)

🎯 Future tasks

Click to see details

• ❔ (Issue) DiaryPage: use markdown viewer (prevent overflow: Container Height)

• ❔ DiaryPage: change face expression Emoji and color according to Mood Slider value

• ❔ Help create Custom Function - systemPromptTemplate (main worker: KSK)
  • ❔ Organize parameters to add
• ❔ Custom Function - test whether getAIComment is actually applied
  • ❔ Check whether input values are reflected properly
  • ❔ Check whether output value is printed properly as String
• ❔ Chat Page - Create New Chat: apply system prompt
  • ▶️ OpenAI API Call implementation: 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: create a New Chat based on diary content
  • ❔ OpenAI API Call implementation: createDiaryComment
    • Input: Diary Content, System Prompt (AI Comment)
    • Output: AI Comment ($.choices[0].message.content)
  • ❔ OpenAI API Call implementation: createDiarySummary
    • Input: Diary Content, AI Comment, System Prompt (Diary Summary)
    • Output: Diary Summary ($.choices[0].message.content)
  • ❔ OpenAI API Call implementation: 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: create a New Diary based on conversation content
  • ❔ OpenAI API Call implementation: createChatSummary
    • Input: Chat Content, System Prompt (Diary From Chat)
    • Output: Chat Summary
  • ❔ OpenAI API Call implementation: createDiaryFromChat
    • Input: Chat Summary, System Prompt (Diary From Chat)
    • Output: New Diary (Title, Content, Mood score)

• ❔ ChatPage: Go to Linked Diary

• ❔ MoodPage (top) - Mood Calendar
  • ❔ Check the number of posts written by date
  • ❔ Move to the selected date when clicking a date
• ❔ MoodPage (bottom) - Mood stats
  • ❔ Output statistics for the focused month
    • ❔ Output AI comment on the displayed statistics
• ❔ HomeFeedPage - import and apply flutter_slidable:4.0.0

• ❔ HomeFeedPage: on left/right slide from FeedCardDiary, chat/edit/delete

• ❔ ChatPage: align user conversation output to the right

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - implement AI first message (Alarm/Notification)
  • The core of the chat system prompt is proactivity.
    • To make it more realistic, it might be good to pass create_date of diary/chat too, so the AI can mention dates like “yesterday.”
  • Alarm implementation reference
• ❔ DiaryPage: add detailed emotion keyword Choice Chips and set DB integration
• ❔ DiaryPage - AI Comment: change inputs such as Choice chips and mood slider to fit the AI Comment System Prompt.
  • ❔ **previous diary or entire conversation history (patchy technical debt)
  • ❔ basic user information: name, gender, MBTI, …
  • ❔ detailed emotion keywords: happy, sad, …
  • ❔ character settings: Somi, Sena, Minhyuk
  • ❔ emotion score: 1 to 100
  • ❔ response format: Healing, Suggestion, Informative
  • ❔ response length: short, normal, detailed
  • is New Chat
    • Since this Chat’s messages are being created for the first time, set is_initial = true on the first message document and shove in all system prompts.
      • is_initial = false
      • Limit: if I put the system prompt into the very first message document, it is hard to modify in the middle of a conversation, but possible. If there is an is_initial = true document and it was modified, I can delete that document and put it back in. I do not know how, but still.
• ❔ DiaryPage - AI Comment: complete CRUD
  • ❔ remove tmp_ai_comment field and use doc_ref

• ❔ DiaryPage - Drawer - ChatHistoryListTile: order by updated_time

• ❔ DiaryPage - import and apply Interactive Slider

• ❔ HomeFeedPage: implement Search Diary feature

• ❔ AuthPage: implement Google Login

• ❔ HomeFeedPage - Bottom Sheet (+ Button): make it possible to choose one of several options
  • New diary: Go to DiaryPage
  • Emotion record: Go to MoodPage
• ❔ MoodPage (popup): Mood setting slider CRUD
  • Create
  • Read
  • Update
  • Delete
• ❔ HomeFeedPage - ListView - show FeedCardMood

• ❔ HomeFeedPage - ListView: sort FeedCardDiary, FeedCardMood, FeedCardChat components chronologically (using Cloud Function)

• ❔ Create MoodEditPage between HomeFeedPage and DiaryPage: move MoodSlider, MoodKeywordsRate (5~1), MoodDescription widgets, etc.

• ❔ Extract and install the final presentation APK by Wed 2025.2.5

💭 Diary

Minhyuk

I can feel the technical debt growing nicely because of all the patchworkㅋㅋ The submission deadline is 3 days away, so well…ㅠ

✨ GPT-4o Comment (KPT)

GPT-4o

✅ What Went Well (Keep)

1. 🎯 Built emotion keyword system: Applying ChoiceChip so users can intuitively record emotions was good!
2. 🤖 Applied AI comment characters: Setting responses by character to increase immersion was impressive.
3. 🛠 Resolved HomeFeedPage error: Setting a default value to prevent Unexpected Null Value errors was excellent!

❌ What Was Missing (Problem)

1. ⏳ Longer development time than expected: Implementing emotion keywords and AI comment features took more time than expected.
2. 🔄 Increased character data complexity: The data flow became more complex, so maintenance may become difficult.
3. 📋 Insufficient problem-solving records: Not organizing the error resolution process may waste time if the same problem happens again.

🔄 What to Try (Try)

1. 📌 Adjust development time by feature: Identify tasks that take longer than expected in advance and adjust the schedule.
2. 📊 Visualize data flow: Try organizing the data structure related to character settings as a diagram.
3. 📖 Build a habit of recording problem-solving: Document resolved issues and prepare strategies to prevent recurrence.

🏁 Conclusion

Today was a day where you built the emotion keyword system and applied character settings to AI comments. Through error resolution, you confirmed again how important default values are, and going forward it seems necessary to manage development time more efficiently! 🚀🔥