一、Demo 简介
是什么：
药膳知味是一款基于Web的AI药食同源膳食推荐与体质辨识助手，纯前端HTML应用，即开即用零安装，支持PWA离线使用。面向健康关注人群，通过九种体质辨识问卷、个性化药膳食谱推荐、药食同源食材百科、二十四节气养生指导、AI智能问答等功能，让用户在浏览器中就能获得科学的中医养生指导。
面向谁：
核心用户为25-50岁的健康关注人群（上班族、宝妈、养生爱好者），对中医文化有兴趣但缺乏专业知识的普通消费者。
主要功能：
【体质辨识问卷】10道标准化中医体质辨识题目，基于王琦教授九种体质理论，答题后自动计算各体质维度得分，生成雷达图和个性化体质报告。
【药膳食谱推荐】27道精选药膳食谱，涵盖汤羹、粥品、茶饮、菜品、甜品五大分类。支持按体质、分类、难度三维筛选，3D翻转卡片交互展示。
【食材百科】30种国家卫健委药食同源目录食材，按四气分类。支持搜索筛选，心形收藏，点击弹出详情浮层。
【AI药膳师】集成AI大模型，SSE流式输出，离线模式根据用户体质和节气生成个性化回复。
【养生日历】二十四节气完整展示，按四季分组，当前节气自动高亮，点击展开详细养生指导。
【游戏化体系】10级等级体系、每日签到、14个成就徽章、每日挑战、呼吸冥想小游戏。
截图1：首页（季节横幅、统计卡片、推荐食谱、呼吸冥想、签到、节气、每日挑战）
截图2：体质辨识（标准化问卷界面、选项动效、答题进度）
截图3：药膳食谱（三维筛选、3D翻转卡片网格）
截图4：食材百科（四气分类筛选、收藏按钮、详情浮层）
截图5：AI药膳师（快捷问题、对话界面、打字机效果）
截图6：养生日历（四季分组、节气高亮、展开详情）
截图7：成就徽章（解锁进度、徽章网格）
二、Demo 创作思路
灵感来源：
国家卫健委药食同源目录已有上百种食材，但普通人往往手足无措。网上养生信息鱼龙混杂。作为医学教育工作者，我希望通过AI技术降低养生门槛，让千年药膳智慧走进每个家庭的厨房。
想解决的问题：
（1）信息过载真假难辨，缺乏科学依据和个性化指导；
（2）不懂体质无从下手，九种体质各不相同；
（3）线下辨识门槛太高，年轻人没有这个习惯；
（4）有了食材不会烹饪，不知道怎么搭配。
为什么做这个方向：
纯前端技术路线（HTML+CSS+JS），零安装即开即用，PWA支持离线。AI大模型集成让产品能根据用户体质和节气给出个性化建议。中国风美学设计：墨绿+米白+金色配色、3D翻转卡片、呼吸冥想动画、成就解锁粒子庆祝等。
三、Demo 体验地址
请下载附件压缩包，解压后用浏览器打开"药膳知味：AI药食同源膳食推荐与体质辨识助手.html"即可体验。
提示：按 ? 键可查看键盘快捷键。
四、TRAE 实践过程
步骤1：需求梳理与数据架构设计
使用TRAE对话梳理核心模块和知识体系，定义数据结构（九种体质、30种食材、27道食谱、24节气、成就系统、等级配置等）。
步骤2：核心功能模块开发
体质辨识（10道题+雷达图）、药膳食谱（三维筛选+3D翻转）、食材百科（四气分类+搜索）、AI药膳师（SSE流式+离线回退）、养生日历（24节气四季分组）。
步骤3：AI能力集成
OpenAI兼容协议（DeepSeek/通义千问/智谱/豆包）、SSE流式输出、打字机效果、XOR加密存储API Key、离线个性化模拟回复。
步骤4：UI视觉与交互动画全面升级
中国风美学设计、3D倾斜卡片、3D翻转食谱卡片、心形收藏弹跳动画、呼吸冥想CSS动画、粒子庆祝、升级动画、stagger动画、键盘快捷键。
步骤5：游戏化与扩展功能
14个成就徽章、10级等级体系、每日签到、每日挑战、呼吸冥想、养生知识库、家庭管理、健康追踪、数据导出导入、深色模式、PWA。
步骤6：移动端适配与PWA
响应式布局、触摸事件、汉堡菜单、Service Worker离线缓存。
截图8：TRAE对话-数据架构设计过程
截图9：TRAE对话-交互功能开发
截图10：TRAE对话-UI视觉升级迭代
关键任务Session ID（不少于3个）：
请在此处粘贴您在TRAE中开发本作品时的关键对话Session ID（双击TRAE的会话头像即可复制）。
3190098353468763:0451e30e1c9f6acff964cc03573d6fea_6a0d90de4335433c4542f2fd.6a5714331f787b73dc216f2a.6a5714321f787b73dc216f28:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 13:01:39)
3190098353468763:28fa553dc01be8ceccf9b9a8e932292a_6a0d90de4335433c4542f2fd.6a5709ae1f787b73dc216d8e.6a5709ae1f787b73dc216d8c:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 12:16:46)
3190098353468763:1db81fc2348d25da97bedda7537d4a51_6a0d90de4335433c4542f2fd.6a57a5b21f787b73dc2174a2.6a57a5b21f787b73dc2174a0:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 23:22:26)
报名帖链接：药膳知味——AI 药食同源膳食推荐与体质辨识助手