【1. Demo 简介
是什么： PickMe 选择器是一款纯前端 Web 应用（单页 HTML/CSS/JS），接入 DeepSeek V4 Flash 大模型，通过 AI 引导式问答帮助用户在两个选项之间做出决策。
面向谁： 所有"选择困难症"用户——纠结吃什么、去哪玩、选哪份工作、买哪件东西的日常决策者。
主要功能：
- AI 引导式问答：用户说出纠结的两个选项后，AI 会通过 3-5 个单维度问题（全部为点击选项，无需手动输入）逐步挖掘用户偏好，问题从中性情境切入，深挖具体考量因素
- 多维度决策报告：问答结束后生成包含综合评分、推荐理由、纠结指数、各维度对比的完整决策报告，支持一键导出为高清图片
- 语音/图片多模态输入：支持语音输入（无限时长、实时转写、对号确认）和图片上传（截图对比），同时内置深色模式、决策历史记录、硬币翻转彩蛋等贴心功能
2. Demo 创作思路
灵感来源： 生活中处处是"选择困难"——中午吃火锅还是日料？买 A 款还是 B 款？去这家公司还是那家？每次纠结都要花大量时间查资料、问朋友，最后可能还是凭感觉选，选完又后悔。我自己就是一个典型的"纠结星人"，于是想做一个 AI 决策伙伴，通过结构化的提问帮我把脑子里模糊的偏好"算"清楚。
想解决的问题：
- 决策靠感觉，缺乏理性梳理——很多时候不是选项差异大，而是自己没想清楚真正看重什么
- 纠结时没人聊、没人帮分析——朋友不一定有空，也不一定了解全部背景
- 选完容易后悔——因为没有把决策过程记录下来，事后忘了当初为什么选
为什么做这个方向： 选择"生活娱乐"赛道是因为决策场景最普适、最有共鸣，每个人每天都在做选择。技术上选择纯前端 + 大模型 API 的方案，是因为：
- 不需要后端服务器，部署简单，用户打开即用
- 大模型的自然语言理解能力可以处理各种五花八门的决策场景（从吃饭到职业选择都能聊）
- 所有数据（API Key、历史记录）都存在用户本地浏览器，隐私安全
在功能取舍上，我优先做了点击式选项（降低用户输入成本）、AI 动态提问（而不是固定问卷）、决策历史（帮助用户复盘）这三个核心体验，其次才是语音、图片、深色模式等锦上添花的功能。
3. Demo 体验地址
pickme.zip (20.9 KB)
说明：使用前需输入 DeepSeek API Key（Key 仅保存在本地浏览器，不会上传）
4. TRAE 实践过程
开发流程概览：
整个项目从 0 到 1 完全在 TRAE 中完成，迭代过程大致分为 6 个阶段：
- 需求梳理与原型设计：和 TRAE 一起讨论产品形态、核心流程、交互方式，确定了"欢迎页 → 聊天问答 → 决策报告"的三页结构
- 第一版（纯前端规则逻辑）：用关键词匹配 + 固定问题库实现了基础功能，验证了交互流程的可行性
- 接入大模型：从规则逻辑升级为调用 DeepSeek API，通过 System Prompt 约束 AI 的提问方式和 JSON 输出格式，实现了真正的智能问答
- 体验打磨（核心迭代）：根据实际使用反馈反复优化——选项按钮太小、问题逻辑不对、语音输入太短、选项盖住问题、输入框单行不够用……每一个细节问题都和 TRAE 一起快速修复
- 功能加码：陆续加入了深色模式、打字机效果、决策历史、报告导出图片、硬币翻转彩蛋、满意/后悔反馈等功能
- 细节调优：图标从时钟 → 思考表情 → 菠萝的迭代，提问 Prompt 的反复优化（避免无效问题、放宽追问条件），综合评分公式说明的补充
关键步骤截图：
**关键任务 Session ID（**304983922971344:9ac3aaa91abaade65620e4b959492156_6a4c94662345184b682bf73d.6a4cf76e2345184b682bff4e.6a4cf76e2345184b682bff4c:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 20:56:14)
304983922971344:7a7f14e0c8d86330a4aa548b26ba693a_6a4c94662345184b682bf73d.6a4cc5552345184b682bfb92.6a4cc5552345184b682bfb90:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 17:22:29)
304983922971344:cfdb2df4b2627147624f684ee04c2f06_6a4c94662345184b682bf73d.6a4cbbd72345184b682bfb23.6a4cbbd72345184b682bfb21:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 16:41:59)
304983922971344:6454e293916ec0b3f1a2a6d215dc56f5_6a4c94662345184b682bf73d.6a4cded22345184b682bfddf.6a4cded22345184b682bfddd:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 19:11:14)
按时间从早到晚排列：
6a4c94662345184b682bf73d— 项目启动与核心开发：从产品构思、原型设计到接入 DeepSeek 大模型、实现完整问答流程的主开发会话6a4cbbd72345184b682bfb23— 早期原型迭代：实现纯前端规则逻辑版本，确定点击式选项交互、Apple/DeepSeek 极简风格 UI 设计6a4cc5552345184b682bfb92— 大模型接入与优化：从规则逻辑升级为 DeepSeek API 驱动，优化 System Prompt、改进提问质量、加入语音输入6a4cded22345184b682bfddf— 功能加码与体验打磨：添加深色模式、打字机效果、决策历史、硬币翻转彩蛋、Canvas 报告导出等增强功能6a4cf76e2345184b682bff4e— 部署与参赛准备：添加无 Key 本地降级模式、部署到 GitHub Pages、整理参赛作品帖内容
）
踩坑经历 & 心得
1. 大模型输出格式的坑
一开始让 AI 自由输出，结果解析经常失败。后来通过严格的 System Prompt 约束 JSON 格式，并在前端做了容错处理（正则提取 JSON），才稳定下来。教训：让大模型输出结构化数据，Prompt 约束越具体越好。
2. 语音输入的体验问题
最初的语音输入是"按住说话"，时间一到自动结束，用户反馈很不爽。后来改成了 TRAE Work 风格——不限时录音 + 对号确认/叉号取消 + 实时转写，体验一下子就顺了。教训：语音输入的核心是控制权在用户手里。
3. 选项按钮盖住问题的布局坑
聊到第三四个问题时，底部的选项按钮会把最新的问题挡住，用户得手动往上滑。后来把聊天页改成了标准的 flex 三栏布局（固定顶部 + 滚动内容 + 固定底部），并加了选项出现时自动滚动到问题位置的逻辑，才解决了这个问题。教训：聊天类界面的底部固定区域一定要算好滚动空间。
4. 图标审美的反复迭代
图标从时钟 → 思考脸 → 手托下巴表情 → 菠萝，前后改了四五版。教训：UI 审美是很主观的事，快速出方案让用户选比自己想破头高效得多。
一些tare反馈：
1.这个feedback反馈，图示我只是让它调整demo的显示，它以为是反馈那，有点过于灵敏了吧
2.这个语音输入是不是加了ai自动整理总结规范的功能啊，希望可以加一个关闭该功能的选项，图示是我说了“加”字好像，显示出选中的这些字（加–》家–》导航，是这样吗），而且不是孤例，前面一次语音输入也是被它误转换为了导航相关内容。
3.图示是我提出了一个反馈“不能用”，一个要求改动，很明显它只做了改动。
心得： 用 TRAE 做开发最大的感受是——想法落地的速度快了不止 10 倍。以前想做个小东西，光搭环境、写基础代码就要大半天，现在和 TRAE 聊几句就能跑起来一个可用的版本，然后把时间花在真正重要的"体验打磨"上。整个项目从想法到能用，只用了一个晚上加一个下午，这在以前是不敢想的。
**社区贴报名链接：**Pick-Me 选择器
不过有点意思，确认能解决选择困难的问题。
可以考虑纳入哈哈哈
，并没有说我有选项A和B呀；