一、Demo 简介
是什么： AI剩菜改造大师是一款基于 AI 图像识别和菜谱生成技术的创意美食工具，以微信小程序形态呈现。
面向谁： 18-35岁的都市年轻人，特别是独居青年、小家庭主厨、烹饪新手和关注环保的人群。
主要功能：
食材拍照识别 — 拍摄冰箱或食材照片，AI自动识别食材种类、数量和新鲜度
![食材识别界面截图]
AI创意菜谱生成 — 根据现有食材智能生成3-5道创意料理方案，每道菜附带口味评分（1-10分）
![菜谱生成界面截图]
改造指数 — 趣味性指标，衡量这道菜有多"出乎意料"，让剩菜改造充满乐趣
![改造指数展示截图]
二、Demo 创作思路
灵感来源：
这个灵感来源于我自己的真实生活。作为一个独居的打工人，每周都会遇到同样的困境——冰箱里总有各种"鸡肋"食材。有一次我试着把剩饭、半根香肠和快过期的鸡蛋炒在一起，结果意外地好吃！那一刻我就想，如果有一个AI工具能帮我做这种"剩菜创意搭配"，该多好。
想解决的问题：
年轻人经常面临冰箱里有各种剩菜却不知如何处理的困境
传统菜谱App需要完整食材列表，输入"半根胡萝卜+剩鸡肉"搜不到任何结果
用户不知道零散食材搭配在一起会是什么味道，试错成本太高
中国每年浪费食物约3500万吨，其中家庭食物浪费占相当大比例
为什么做这个方向：
真实痛点： 这是我自己和身边朋友每天都遇到的问题
社会价值： 减少食物浪费，环保减碳
差异化： 市场上没有专门针对"剩菜改造"场景的工具
趣味性： "改造指数"和"改造挑战"机制让环保变得有趣
三、Demo 体验地址
在线体验链接：
AI剩菜改造大师.html (93.8 KB)
AI剩菜改造大师.zip (26.1 KB)
提示：由于 Demo 为纯前端实现，部分 AI 功能为模拟效果，实际产品中将与后端 AI 服务对接。
开发工具
TRAE Work — 用于生成创意提案和创意产物 HTML
TRAE code — 用于开发可交互的 Demo
开发流程
第一步：创意构思与需求梳理
使用 TRAE Work 的 Auto 模式，描述我的创意需求：
“我想做一个AI剩菜改造工具，用户拍冰箱照片，AI识别食材并生成创意菜谱。需要拍照上传界面、AI识别动画、菜谱卡片展示、口味评分、改造指数等功能。”
TRAE Work 帮我生成了完整的创意提案和创意产物 HTML。
关键步骤截图 1： TRAE Work 生成创意提案的过程
![TRAE Work 创意生成截图]
Session ID： session-work-001
第二步：Demo 界面开发
使用 TRAE Code，我逐步开发了以下核心界面：
拍照上传区域 — 支持拖拽上传和点击选择，实时预览已上传照片
AI识别动画 — 模拟AI分析过程，展示识别到的食材列表
菜谱卡片 — 每道菜展示名称、口味评分（星级可视化）、食材标签、详细步骤
改造指数 — 趣味性指标，用进度条形式展示
关键步骤截图 2： TRAE Code 中开发拍照上传功能
![TRAE Code 开发截图1]
Session ID： session-ide-001
第三步：交互逻辑实现
在 TRAE IDE 中，我使用 JavaScript 实现了以下交互：
拖拽上传和文件选择
AI识别动画（模拟3秒分析过程）
菜谱卡片展开/收起
用户评分反馈
关键步骤截图 3： TRAE IDE 中调试交互逻辑
![TRAE Code 开发截图2]
Session ID： session-ide-002
第四步：样式优化
使用 TRAE IDE 的 AI 助手，我优化了：
清新绿色美食主题视觉设计
响应式布局，适配移动端
动画效果（食材识别时的脉冲动画、卡片出现动画）
关键步骤截图 4： 样式优化后的最终效果
![最终效果截图]
Session ID：1576036371006794:3d55d329900730179e3836a87ca76ced_6a322a19bb6f6bd43277a802.6a32d240a6a00086c29aa56f.6a32d240a6a00086c29aa56d:TRAE Work CN.0.1.19.no_sid.no_ppe.T(2026/6/18 00:58:40)
五、开发心得
踩过的坑：
图片上传预览： 最初使用 FileReader 实现预览，但在移动端遇到兼容性问题。后来改用 URL.createObjectURL() 方案，兼容性更好。
响应式布局： 菜谱卡片在桌面端和移动端的展示方式需要不同处理。通过 CSS Grid 和 Flexbox 结合，实现了自适应布局。
AI识别动画： 需要模拟真实的AI分析过程。通过设置3个阶段的动画（扫描→分析→生成），让用户感受到"AI在思考"。
解决方案：
多使用 TRAE IDE 的 AI 助手询问最佳实践
在真机上测试移动端效果
参考优秀的美食类 App 设计
六、后续规划
复赛阶段计划：
接入真实 AI 服务 — 使用图像识别 API 实现真实食材识别
后端开发 — 搭建 Node.js 后端，实现用户系统和菜谱数据库
小程序适配 — 将 Demo 适配为微信小程序
社区功能 — 增加用户分享改造成果的功能
七、相关链接
报名帖链接：https://forum.trae.cn/t/topic/24908
GitHub 仓库： https://gitee.com/lfzy/traeying-yong-sai/tree/demo/ 大赛项目/01_生活娱乐/AI剩菜改造大师
Demo 体验链接：
AI剩菜改造大师.html (93.8 KB)