一、Demo 简介
是什么：记得鸭（Remember Duck）是一款 PWA 网页应用，可在浏览器直接打开使用，也支持"添加到主屏幕"当作 App 使用，离线也能跑。
面向谁：记性差、信息散落在各种群聊和截图里的打工人 / 学生党；经常"看完消息转头就忘"的人群。
主要功能：
-
粘贴文本 / 上传截图，一句话提取提醒 把群里那段"周六晚上6点半万达三楼聚餐，记得带相机"粘进来，小鸭会自动识别出时间、地点、要带的东西，弹一张确认卡让你确认后收进篮子。截图同理，接通义千问VL 视觉模型直接看图。
-
可勾选的提醒时机 小鸭会给 3–4 个中文提醒建议（“当天早上 8:00”、“提前 1 小时”、“出门前 30 分钟”……），用户在确认卡上点选想要的，未点的不会提醒。日常习惯类事项还能给"每天提醒"选项。
-
今日概览 + 小鸭心情 首页一张智能卡片，告诉你"今天有 N 件事"或"
有 N 件已过期"；小鸭的表情会跟着待办状态变（有事干就开心、有过期就发愁、全清空就骄傲）。
二、Demo 创作思路
灵感来源：自己手机里堆了几百张截图和一堆群聊消息，每次都是"当时觉得重要存一下，之后再也不看"。等到想起来要找，已经过期了。
想解决的痛点：
-
群聊通知信息密度大，关键的时间/地点/要带的东西混在一堆闲聊里，手动摘抄麻烦；
-
截图存了等于没存，没人会回头翻；
-
系统自带日历要手动一条条填，输入成本太高，干脆就不记了。
为什么做这个方向：与其再造一个"待办 App"和已有产品硬碰，不如做"信息收纳 → 自动结构化 → 一键确认"这一段。大模型刚好擅长从非结构化文本里提字段，把用户从"打字录入"里解放出来。小鸭的拟人化形象也是为了让"记事"这件事不那么枯燥——它是你的小助手，不是冷冰冰的表格。
三、Demo 体验地址
采用「交互式可体验的 HTML 格式文件」方案：
remember-duck.zip（已打包上传社区）
下载后解压，双击 index.html 即可在浏览器中体验。
-
首次进入可点首页"一键开启 Demo 体验"，无需 API Key 即可试用文本提取流程；
-
想测真实大模型识别（含截图识别），进入「设置」页，选预设（通义千问VL / OpenAI / DeepSeek / Kimi / 智谱GLM）并填入自己的 API Key 即可。
四、TRAE 实践过程
整个 Demo 从 0 到 1 全程在 TRAE 中完成，包括前端代码编写、大模型 API 调试、Prompt 迭代、Bug 修复。以下是关键开发流程：
1. 项目脚手架与技术选型
用 TRAE 一次性生成 React 18 + TypeScript + Vite 5 + Tailwind CSS v4 + Zustand + Framer Motion 的工程骨架，并接入 vite-plugin-pwa 做离线缓存。
2. 核心提取逻辑（lib/extract.ts + lib/prompts.ts）
-
设计
extractWithLLM：统一对接 OpenAI 兼容的/chat/completions接口； -
编写 system prompt：输出严格 JSON，含 action / reminder / uncertain / remindSuggestions / duckAction 等字段；
-
迭代 prompt 新增"防过期规则 1.5"：已过时间的日常事项自动推到明天，并主动提问"是否每天提醒"。
3. 视觉模型接入与 API 兼容
-
实测发现 DeepSeek API 仅支持纯文本（不支持 image_url），改用通义千问VL 做截图识别；
-
处理 jsonMode 兼容：视觉模型不支持
response_format: json_object，截图路径不传 jsonMode，文本路径才传； -
在 Settings 页做了 5 个预设方便切换，并基于模型名关键词判断是否支持视觉，给用户三态提示。
4. 确认卡交互打磨
-
把 remindSuggestions 从只读标签改成可点选按钮（选中橙色、未选中白色）；
-
用户取消勾选的时机不会生成 remindAt，真正让"建议提醒时机"生效；
-
配合 prompt 规则 1.5，日常事项能选"每天提醒"。
5. 全量清理与打包
移除早期实验性的 OCR（tesseract.js）和语音输入功能，精简 InputSource 类型，最终打包成 zip 供下载。
关键任务对话 Session ID
-
Session ID 1：568874016450916:c5e0229dfc3a52f41a23ab047c19a65f_6a39615c30b17024f813118e.6a3d44861471fd4ab668ac03.6a3d448631ee5b0531535ae8:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/25 23:18:32) -
Session ID 2：568874016450916:3999e66658ddd569dea9243bd5c2419c_6a39615c30b17024f813118e.6a3d303c1471fd4ab668a67f.6a3d303cb92d2d00798dc430:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/25 21:45:06) -
Session ID 3：568874016450916:1f85c8d8280c236b45a8e27de90aae4c_6a39615c30b17024f813118e.6a3d3f3d1471fd4ab668ab1b.6a3d3f3d44e7881ca2b6e9c5:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/6/25 22:54:13) -
Session ID 4：568874016450916:fc35f83cc84c9e62dee90a0fc2cc5baa_6a39615c30b17024f813118e.6a4dfdbc088ead8d84cd6531.6a4dfdbc9f80b583ceb85f21:TRAE Work CN.0.1.23.no_sid.no_ppe.T(2026/7/8 15:43:38)