0. 先和大家打个招呼吧 
-
**你是谁：**我是一名？？（男生，不告诉多大），没想到吧，但还是很喜欢trae的，用 400多天了好吧。
-
你是怎么用 TRAE 把 Demo 做出来的： 额，这个觉得过程还行，我的主力本来是MINIMAX3就是一看见AI创造力大赛，很期待，就和trae IDE 的这种生态觉得这种可以直连终端的这种方式可以少受折磨。对吧，废话少说，咱们来看看作品吧
1. Demo 简介
-
是什么：一个面向青少年的 AI 情绪分析与疏导 Web 应用。用户用画笔记录每天的情绪，AI 通过画作图像进行多模态情绪分析，结合 MBTI 性格类型给出个性化疏导建议，并推荐契合当下情绪的音乐。
-
面向谁：12–18 岁青少年群体——这个年龄段情绪起伏剧烈、表达欲强但倾诉渠道有限，传统心理咨询门槛高、有病耻感。我们希望用"绘画 + AI"这种低门槛、有创意的方式让他们学会觉察与表达情绪。
-
主要功能：
情绪画板 ：20 种预设情绪色 + 4 种笔触（画笔 / 马克笔 / 喷枪 / 橡皮），触屏 / 鼠标双兼容，支持多笔触叠加
AI 画作情绪分析 ：基于智谱 GLM-4V 多模态视觉语言模型 + RAG 情绪知识库（ID: 2060306326730547200），从画面的色彩、构图、元素识别用户当下的情绪状态
个性化疏导建议 ：基于智谱 GLM-4-Plus + RAG 疏导知识库（ID: 2060552431984648192），结合用户 MBTI 性格类型给出贴合性格的 4–5 条建议
MBTI 16 型人格测试 ：20 道情景题，分析结果影响后续疏导建议的语气与方向
情绪日历 ：按日期回看历史画作和情绪轨迹
情绪音乐推荐 ：根据 AI 解读的情绪自动推荐 5 个类别（平静 / 快乐 / 治愈 / 放松 / 力量）的歌单
1.登录页面
2.MBTI测试界面
3.MBTI测试结果（举例）
4.日历页面
5.绘画页
2. Demo 创作思路
- 灵感来源：
身边不少同学进入初高中后压力陡增，但又不愿意主动找家长或心理老师聊——画画是他们更自然的情绪出口。我想到：如果 AI 能"看懂"一幅画背后的情绪，并给到温和的回应，是不是就能在青少年和心理服务之间搭一座低门槛的桥？
- 想解决的问题：
- 青少年情绪表达渠道少：传统咨询"挂号式"流程让人望而却步
- 情绪觉察困难：很多人无法准确描述"我怎么了"
- 通用建议无效：同样的安慰话对 INFP 和 ENTJ 的效果完全不同
- 为什么做这个方向：
- 多模态大模型（GLM-4V）已经能很好地理解图像，让"看画识情绪"成为可能
- RAG 知识库让 AI 的回答有专业依据，而非泛泛而谈
- MBTI 是青少年群体熟悉且接受度高的性格框架，能让建议更"懂我"
- 绘画这种非语言表达对青少年来说低压力、有创意、愿意持续使用
3. Demo 体验地址（三选一）
我提供两种体验方式，互不影响：
在线版（推荐） http://emotiondiary.site
建议大家不要跳过注册页面，虽然有些麻烦，但是注册页面融合mbti性格测试，是之后画作分析的重要参考因素所以嘛。。。对吧
这个我自掏腰包买的公网服务器和API Key,等了很久的公网icp，所以禁止狂用AI功能
求求啦
离线版
离线版.zip (46.1 KB)这个是离线html版本点开需要自备自备 API Key所以还是推荐大家在线版但再说一遍禁止狂用AI功能毕竟我是学生党
4. TRAE 实践过程
整个项目从创意到上线完全使用 TRAE IDE 完成。下面是关键开发节点：
4.1 创意提案 → 技术选型
用 TRAE 头脑风暴，确定了"画作情绪分析 + MBTI + RAG 知识库"的核心架构。关键决策：用 GLM-4V 做图像理解（因为支持原生 image_url 输入），用 GLM-4-Plus 做文本疏导建议（接 RAG 知识库增强专业性）。
4.2 画板 Canvas 引擎开发
让 TRAE 实现了多笔触绘制系统：画笔（普通线条）、马克笔（半透明叠加）、喷枪（随机点扩散）、橡皮（destination-out 合成），20 种情绪色快选，DPR 适配高分屏，touch + mouse 双事件流。
4.3 AI 情绪分析 + RAG 知识库接入
调用智谱 API 的 tools.retrieval 字段挂载知识库，让 GLM-4V 在分析画面时同时检索情绪心理学文档。Prompt 设计成只返回 JSON（content + emotion 两字段），保证结果可结构化展示。
4.4 MBTI 测试 + 个性化疏导建议
20 道情景题问卷，结果按 4 维度（E/I、S/N、T/F、J/P）算分映射到 16 型人格。每型人格在 AI Prompt 里注入对应的"沟通风格"上下文（比如对 INFP 用"轻柔温和的表达"，对 ENTJ 用"直接但鼓励性的反馈"），让疏导建议真正贴合用户性格。
4.5 部署上线 + 安全加固
TRAE 协助完成了 Node.js + Express + MySQL + Nginx + PM2 的服务器部署，并做了：
- PM2 操作密码保护（停止/重启服务需密码，日常查询免密）
- ICP 备案号合规悬挂（沪ICP备2026028713号-1）
- 离线版 1:1 复刻（5 个页面所有 fetch 改写为 localStorage，与服务器完全解耦） [插入截图 5：TRAE 配置 Nginx + PM2 的对话]
- 关键任务对话的 Session ID
- .3235231768518020:a38e3f405eac8b8e5b1b5881d4a91732_6a1964dec5db64f676051614.6a3dda589ae24d9a0e8ac852.6a3dda584cdfe8bd2b5ed7ae:Trae CN.T(2026/6/26 09:48:08)
- .3235231768518020:741c14dc3b26eaed3c7af6beaf7a363c_6a1964dec5db64f676051614.6a3e3bc09ae24d9a0e8ac8d5.6a3e3bbf4cdfe8bd2b5ed7b1:Trae CN.T(2026/6/26 16:43:44)
- .3235231768518020:7322d7066fde8520478b96474c92c787_6a1964dec5db64f676051614.6a2bda519c5e03c1a15e52d3.6a2bda50842a5ca0811addb8:Trae CN.T(2026/6/12 18:07:13)
- .3235231768518020:2e4b10e09669c4982b8a470603ba8fc8_6a1964dec5db64f676051614.6a2bd7fa9c5e03c1a15e5263.6a2bd7fa842a5ca0811addb7:Trae CN.T(2026/6/12 17:57:14)
5. 对应的报名审核通过的帖子链接
情绪日记———了解自身
