【生活娱乐赛道】味忆 FlavorMemo — 一张老照片，AI 还原记忆中的家乡味

u744791664269664 · 2026 年7 月 2 日 09:15

0. 先和大家打个招呼吧

我是谁： 一名热爱美食和技术的独立开发者，平时喜欢研究怎么用 AI 解决生活中的真实问题。

我是怎么用 TRAE 把这个 Demo 做出来的：

说实话，在接触 TRAE 之前，我已经有初步的产品想法，但总觉得"从 0 到 1"开发一个完整的产品太复杂了。这次用 TRAE Work 来做这个 Demo，最大的感受就是：原来我只需要把脑子里想的"说"出来，它就能帮我变成现实。

整个过程就像在和一个很懂技术的朋友对话：

- 我说"我想做一个上传照片识别菜品的网站"，它马上给出了 Flask + HTML 的架构方案

- 我说"界面要温暖一点，要有家的感觉"，它立刻调整了配色和字体

- 我说"评委可能没装 Ollama，能不能不启动后端也能演示？"，它设计了内置菜谱 + 智能匹配的 fallback 方案

最让我惊喜的是，当我提出"上传什么都显示番茄炒蛋"这个问题时，TRAE 不仅修复了 bug，还主动提出了"关键词智能匹配"的优化方案——这个思路我自己都没想到。这种"你负责想，它负责实现"的配合方式，让我真正感受到了 AI 原生开发的魅力。

1. Demo 简介

是什么

味忆（FlavorMemo） 是一款基于多模态 AI 的家乡菜还原 Web 应用。用户只需上传一张家乡菜的照片，AI 就能自动识别菜品并生成完整的菜谱与烹饪指南。

产品形态： Web 应用（单 HTML 文件 + Flask 后端，可本地部署运行）

面向谁

- 在外漂泊的游子 — 想念家乡味道却做不出来的年轻人

- 想传承家味的后辈 — 想把长辈的手艺学下来的厨房新手

- 热爱记录的美食爱好者 — 看到美食照片就想知道做法的人

主要功能

功能一： AI 智能菜品识别

上传菜品照片，AI 自动识别菜品名称、所属菜系。支持图文双通道输入——照片不够清晰？加一段文字描述就能大幅提升识别准确率。

功能二：一键生成完整菜谱

识别完成后，AI 自动生成包含食材清单、分步烹饪步骤、烹饪时间和难度评估的完整菜谱。即使是从未下过厨的新手，也能跟着步骤一步步复现家乡味道。

功能三：语音辅助烹饪

支持语音输入菜品描述，解放双手。边做菜边查询，不用油腻的手去碰屏幕。

Demo 体验亮点：即使没有安装后端 AI 服务，前端也内置了 8 道经典菜品的演示数据，并支持根据文件名/描述智能匹配最合适的菜谱，打开就能体验完整流程！

2. Demo 创作思路

灵感来源

做这个产品的灵感来自我自己的真实经历。

去年春节回家，奶奶做了一道我小时候最爱吃的红烧肉。我拍了张照片，回到工作的城市后，看着照片口水直流，却怎么也做不出那个味道。打电话给奶奶，她说：“盐少许、油适量、火候到了就行”——这种经验式的指导对厨房新手来说几乎等于没说。

那一刻我突然意识到：**「味道」是一种非常珍贵却极易消逝的记忆。**全国有 2.9 亿流动人口，有多少人像我一样，带着家乡的照片却再也回不去那个味道？

想解决的问题

我梳理出了 **“四重断裂”**的真实痛点：

| 断裂类型 | 痛点描述 | 味忆的解法 |

| 记忆断裂 | 老照片能唤起味觉记忆，却无法还原真实味道 | 照片 → AI 识别 → 完整菜谱 |

| 信息断裂 | 大量家常菜没有统一菜名，“搜不到、叫不出” | 以图搜菜，不需要知道菜名 |

| 代际断裂 | "盐少许、油适量"对新手毫无帮助 | 精确到克的食材用量 + 分步指南 |

| 场景断裂 | 现有 App 是"先搜后看"，用户真实需求是"看到就想学" | 照片驱动的直觉式交互 |

为什么做这个方向

选择这个方向有三个判断：

1. 真实需求足够痛 — 这不是"锦上添花"的功能，而是"雪中送炭"。对于那些思念家乡味道却做不出来的人来说，这是一个情感刚需。

2. 技术可行性高 — 多模态 AI（视觉+语言）恰好能完美解决"照片识别+菜谱生成"这个场景，不需要从零训练模型，调用现有 API 即可实现。

3. 商业价值清晰 — 菜谱生成后可以延伸出食材电商、智能厨电联动、社区分享等多种变现路径。

3. Demo 体验地址

体验方式

方式一：在线体验（推荐）

由于本 Demo 为本地部署应用，我已将完整文件打包为 Zip，上传至本帖附件。下载后按以下步骤即可运行：

```bash

# 1. 安装依赖

pip install -r requirements.txt

# 2. 安装 Ollama（可选，用于真实 AI 识别）

# 下载地址： Download Ollama on Linux

ollama pull llava

# 3. 启动服务

python app.py

# 4. 打开浏览器访问 http://localhost:8080

```

前端内置了 8 道经典菜品的演示数据，上传任意图片即可看到完整的识别 → 菜谱生成流程。

方式二：直接打开 HTML

如果不启动后端，也可以直接双击打开 `index.html`，进入演示模式体验完整交互流程。

文件清单

```

weiyi-flavormemo/

├── index.html # 前端页面（单文件，内联所有 CSS/JS）

├── app.py # Flask 后端 API 服务

├── requirements.txt # Python 依赖

├── README.md # 快速开始指南

├── fonts/ # 4 个字体文件

└── assets/ # 5 张产品配图

```

4. TRAE 实践过程

开发流程总览

整个 Demo 的开发分为三个阶段，全部通过 TRAE Work 完成：

阶段一：产品定义与架构设计

我的 Prompt：“我想做一个上传家乡菜照片，AI 自动识别并生成菜谱的网站，请帮我设计技术架构”

TRAE 给出的方案：

- 前端：单 HTML 文件（内联 CSS/JS），便于打包分享

- 后端：Flask REST API，接收图片并调用 Ollama 多模态模型

- AI 引擎：Ollama + LLaVA（视觉识别）+ Qwen2.5（文本生成）

关键对话 Session ID：

（1）744791664269664:5b248e269e2ad539cb1c4b4b7b3cd437_6a39e5700aa0a7bee782a37a.6a39e5700aa0a7bee782a37d.6a39e5700aa0a7bee782a37b:TRAE Work CN.0.1.27.no_sid.no_ppe.T(2026/6/23 09:46:24)
（2）744791664269664:50b465959ebb444fa1ce0080e4a188e3_6a39e5700aa0a7bee782a37a.6a39e8380aa0a7bee782a3dd.6a39e8370aa0a7bee782a3db:TRAE Work CN.0.1.27.no_sid.no_ppe.T(2026/6/23 09:58:16)

阶段二：前端界面开发

我的 Prompt： “界面要温暖一点，要有家的感觉，用暖色调”

TRAE 设计了一套完整的视觉方案：

- 主色 `#E85D26` 橙色（温暖、食欲感）

- 辅色 `#2D9B6E` 绿色（健康、自然）

- 字体：InstrumentSans（现代感标题）+ IBMPlexSerif（衬线装饰）

- 实现了响应式导航栏、Hero 区域、图片拖拽上传、四步进度条、结果展示区

阶段三：智能 Fallback 与优化（踩坑与解决）

踩坑 1：上传什么都显示番茄炒蛋

测试时发现，如果没有启动后端，Demo 会进入 fallback 模式随机选一道内置菜谱。结果上传红烧肉照片也显示番茄炒蛋，体验非常割裂。

解决过程：

我向 TRAE 反馈这个问题后，它提出了"关键词智能匹配"方案：

1. 给每道内置菜谱配置 keywords（如红烧肉匹配"红烧肉/五花/猪肉"等）

2. 根据用户上传的文件名和文字描述进行关键词匹配

3. 匹配不到时再用文件大小辅助判断（大图→复杂菜，小图→简单菜）

这个优化让 Demo 的"可体验性"大大提升——即使评委没有安装任何依赖，也能获得合理且多样化的演示效果。

关键对话 Session ID：

744791664269664:8689049a54de54fd9e82a618ab83d0eb_6a39e5700aa0a7bee782a37a.6a3f2f2c1347ee34b6620946.6a3f2f2b1347ee34b6620944:TRAE Work CN.0.1.27.no_sid.no_ppe.T(2026/6/27 10:02:20)

开发关键步骤截图

截图 1：产品首页

> 展示产品主视觉、核心 slogan 和导航结构