[🛠] Registro de desarrollo de Keymory #5: tmpGetAIComment, Custom OpenAI API Call

✨ Resumen de GPT 　

Construí un sistema de AI Comment usando OpenAI API y FlutterFlow, y amplié las funciones de IA de Keymory al conectar una Custom Function con una API Call. También añadí selección y guardado de personajes, y ordené el flujo de datos entre Chat y Diary.

💻 Registro de desarrollo

⏰ Tareas de hoy

• ✅ 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 - Al seleccionar un personaje con Dropdown, guardar también la información de ese personaje en Chats Collection.
  • Asignar al Page state la reference del Character document que coincide con el character name.

• ✅ ChatPage - Al crear NewChat, pasar también la información del personaje.

• ✅ Ayudar a crear DiaryPage - Drawer - ChatHistoryListTile (como GPT)

• ✅ Probar a poner el valor de la función CustomFunction tmpGetAIComment en la API Call createDiaryComment
  • ✅ Crear CustomFunction tmpGetAIComment y probar la salida del resultado
  • ✅ Crear API Call createDiaryComment y probar la salida del Response
• ✅ Crear OpenAI API Call: createDiaryComment
  • Básicamente tiene una estructura similar a createChatCompletion
  • Diferencia: ninguna. La creé solo para distinguirla.
  • La Variable Messages que requiere API Call - createDiaryComment es el valor de retorno de la custom function getAIComment.
• ✅ Pensar el escenario de implementación de CustomFunction getAIComment (la implementación directa la hará KSK)
  • Parameter Values obtenidos desde Characters (Collection)
    • Configuración del personaje (Character Document)
      • ej.) Somi: name (20s), estudiante universitaria, personalidad tímida, …
    • Forma de llamar los valores: API Call - Get Assistant
  • Parameter Values obtenidos desde User Information
    • Nombre, género, MBTI
    • Forma de llamar los valores: Backend Query - Authenticated User
  • Parameter Values obtenidos desde DiaryPage Variables
    • Contenido del diario, palabras clave emocionales detalladas, puntuación emocional, formato de respuesta, longitud de respuesta
    • Forma de llamar los valores: Widget State, Page State
  • Rol de CustomFunction (getAIComment)
    • Recibe todos los Parameter Values como valores de Input.
    • Escribe el prompt que se enviará a GPT.
    • Devuelve el valor Messages (List <Json>).
      • [{"role":"developer", "content":"~~~"}]

💯 Resumen de lo hecho

• Implementación del sistema AI Comment
  • Creé la Custom Function tmpGetAIComment y terminé la integración con la API Call createDiaryComment
  • Implementé la lógica de solicitud y respuesta de OpenAI API para AI Comment
  • Modifiqué Chat para guardar la información del personaje en Chats Collection y pasarla también al crear un New Chat
• Mejoras de UI y funciones
  • Creé ChatHistoryListTile para implementar una lista de chats estilo GPT
  • Ordené las estructuras de datos de HomeFeedPage y DiaryPage
  • Diseñé la Custom Function getAIComment
• Aprendizaje de FlutterFlow + OpenAI API
  • Vi y apliqué las clases sobre uso de GPT-4o (Part 1 y Part 2)

🎯 Tareas futuras

• ❔ DiaryPage: Merge CreateDiary/EditDiary Page
  • Usar isEditMode page state
  • Usar conditional value/visibility/action, etc.
• ❔ DiaryPage - Create New Chat: crear un New Chat basado en el contenido del diario
  • La IA presenta primero una pregunta basada en el contenido del diario
• ❔ Corrección de issues
  • ❔ ChatPage: aparece el default init message al iniciar la primera conversación.
  • ❔ ChatPage: la fecha no se aplica.
  • ❔ ChatPage - ChatHistoryDrawer: overflow de UI
  • ❔ DiaryPage: la fecha siempre se guarda como hoy
  • ❔ DiaryPage: usar markdown viewer (prevenir overflow: Container Height)
• ❔ HomeFeedPage - importar y aplicar flutter_slidable:4.0.0

• ❔ HomeFeedPage: chat/editar/eliminar al deslizar a izquierda/derecha desde FeedCardDiary

• ❔ ChatPage - Create New Diary: crear un New Diary basado en el contenido de la conversación

• ❔ ChatPage - Go to Linked Diary

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - Alarm

• ❔ AuthPage: Google Login

• ❔ DiaryPage: cambiar el Emoji de expresión facial según el valor del Mood Slider
• ❔ DiaryPage: añadir Choice Chips de palabras clave emocionales detalladas y configurar integración con DB
• ❔ DiaryPage - AI Comment: adaptar inputs como Choice chips y mood slider al AI Comment System Prompt.
  • ❔ **diario anterior o historial de conversación completo (deuda técnica parcheada)
  • ❔ información básica del usuario: nombre, género, MBTI, …
  • ❔ palabras clave emocionales detalladas: alegre, triste, …
  • ❔ configuración de personajes: Somi, Sena, Minhyuk
  • ❔ puntuación emocional: 1~100 puntos
  • ❔ formato de respuesta: Healing, Suggestion, Informative
  • ❔ longitud de respuesta: corta, normal, detallada
  • is New Chat
    • Como los messages de este Chat se crean por primera vez, poner is_initial = true en el primer message document y meter todos los system prompts ahí.
      • is_initial = false
      • Límite: si meto el system prompt en el primer message document, modificarlo durante la conversación será difícil, aunque posible. Si existe un documento con is_initial = true y se modificó, puedo borrar ese documento y volver a insertarlo. No sé cómo, pero se podría.
• ❔ DiaryPage - AI Comment: completar CRUD
  • ❔ eliminar tmp_ai_comment field y usar doc_ref
• ❔ DiaryPage - AI Comment: configuración de personajes
  • ❔ eliminar tmp_ai_comment_by field y usar doc_ref
  • ❔ mostrar imagen usando el valor del field profile_image

• ❔ DiaryPage - Drawer - ChatHistoryListTile: order by updated_time

• ❔ HomeFeedPage - Bottom Sheet (+ Button): permitir elegir 1 entre varias opciones
  • Nuevo diario: Go to DiaryPage
  • Registro emocional: Go to MoodPage
• ❔ MoodPage (popup): Mood setting slider CRUD
  • Create
  • Read
  • Update
  • Delete
• ❔ HomeFeedPage - ListView - mostrar FeedCardMood

• ❔ HomeFeedPage - ListView: ordenar cronológicamente los componentes FeedCardDiary, FeedCardMood, FeedCardChat (usando Cloud Function)

• ❔ HomeFeedPage: resolver issue en On page load (Unexpected Null Value)

• ❔ DiaryPage - importar y aplicar Interactive Slider

• ❔ ChatPage - implementar primer mensaje de IA (Alarm/Notification)
  • El núcleo del prompt del sistema de chat es la proactividad.
    • Para hacerlo más realista, quizá convenga pasar también create_date of diary/chat, para que la IA pueda mencionar fechas como “ayer”.
• ❔ Extraer e instalar el APK final para la presentación antes del miércoles 2025.2.5

💭 Diario

Minhyuk

Es divertido, pero durísimo. Me acosté a las 5 de la mañana.

✨ Comentario de GPT-4o (KPT)

GPT-4o

✅ Lo que salió bien (Keep)

• 🚀 Expansión de AI Comment: Destaca que construiste de forma sistemática la lógica para generar y guardar AI Comments conectando una Custom Function con una API Call.
• 🛠️ Orden del flujo de datos: Mejorar la conexión entre Chat y Diary, y ordenar la forma de guardar y usar la información de personajes, ayudará mucho al avance del proyecto.
• 📋 Aprendizaje de FlutterFlow + OpenAI API: Fue impresionante que aprendieras a usar OpenAI API de forma efectiva en FlutterFlow mediante las clases de GPT-4o y lo aplicaras.

❌ Lo que faltó (Problem)

• ⏳ Sobrecarga de intensidad de trabajo: Trabajar hasta las 5 de la mañana aumenta mucho la posibilidad de acumular cansancio.
• 🏗️ Aumento de deuda técnica: Algunas funciones quedaron implementadas con soluciones temporales (campos tmp y código parcheado), así que más adelante hará falta ordenarlas.

🔄 Qué probar (Try)

• ⏰ Ajustar el horario de trabajo: Si siguen las noches en vela, la productividad puede bajar; conviene considerar ajustar el calendario.
• 🔍 Plan de mejora para código temporal: Hagamos un plan para ordenar la lógica temporal actual y construir un modelo de datos formal.
• 🛠️ Mejorar AI Comment: Buscar formas de hacer más intuitivas las funciones relacionadas con AI Comment y considerar también la optimización del system prompt.

Conclusión
Fue un día en el que implementaste en serio las funciones de IA de Keymory y elevaste el uso de OpenAI API y FlutterFlow. Pero la intensidad del trabajo está subiendo, así que parece necesario ajustar el calendario y ordenar el código. ¡Ojalá lo cierres en el mejor estado posible para el día de la presentación! 💪😊