【标签】生活娱乐
【标题】生活娱乐赛道 - 识人闻香
1. Demo 简介
是什么： 识人闻香是一个交互式 AI 面部表情分析与香水推荐网站（单页应用）。用户上传照片后，浏览器端 AI 模型（face-api.js）在本地完成人脸检测与 68 点关键点定位，从中提取 15 维面部特征（含笑容分数、眉毛倾斜度、眼睛睁开度等 7 维表情特征），融合大五人格模型生成多维度"气味画像"，最终从 33 款真实香水数据库中推荐 2-3 款最契合的香水。全程照片不上传服务器，隐私零风险。
面向谁：
- 对香水好奇但缺乏选香经验的年轻用户（18-35 岁）
- 喜欢趣味性格测试、乐于社交分享的用户
- 想为他人挑选香水礼物但不知从何下手的用户
主要功能：
功能一：AI 面部表情分析 → 性格画像
用户上传照片或摄像头拍照（含 3 秒倒计时）后，系统在 4 步动画中完成分析。face-api.js 从 68 个关键点中提取 15 维特征：fWHR（面部宽高比）、笑容分数（嘴角上扬度 + 嘴部曲率）、眉毛倾斜度（眉头与眉尾高度差）、眉毛上扬度（眉到眼睑距离）、EAR（眼睛睁开度）、MAR（嘴部张开度）、法令纹代理（鼻翼到嘴角距离）、下颌角度等。这些特征注入大五人格模型（OCEAN），生成 6 维性格雷达图 + 8 项面部特征指标。
功能二：真实香水数据库 → 个性化推荐
基于余弦相似度的香调匹配算法，从 6 大香调（花香、木质、清新、柑橘、东方、果香）共 33 款真实香水中精选推荐。每款香水配有真实产品图片、前/中/后调金字塔、品牌信息和匹配度百分比。推荐算法融入性别匹配加分、面部特征确定性扰动和会话随机扰动，确保不同人脸和多次测试结果有区分度，30 种香水均可出现。
功能三：分享卡片 + 非人脸趣味处理
- 一键分享：接入 html2canvas 库，将分析结果生成 PNG 图片下载，支持社交传播
- 趣味页面：上传动物/风景/插画等非人脸图片时，系统通过 Canvas 分析图片主色调（亮度/暖度/绿度），匹配 8 种趣味人格（
绿意/
暖色/
明亮/
暗色/
清冷/
粉柔/
创意/
浓烈），配对应真实香水推荐，将"错误上传"转化为趣味体验
2. Demo 创作思路
灵感来源：
香水本质上是"气味人格"的外化——选择香水的过程暗含性格密码。市面上的香水推荐工具多数只是简单问卷（“你喜欢什么花？”“你周末做什么？”），体验枯燥，缺乏仪式感。如果能把选香变成一场"认识自己"的互动体验——上传一张照片，AI 从面部表情中读出你的性格特质，再匹配到真实香水——既有探索自我的仪式感，又能在娱乐中收获一份实用的推荐。
想解决的问题：
| 用户痛点 | 现状 | 识人闻香的解法 |
|---|---|---|
| 香水品类太多，新手无从选择 | 线下柜台试香一次只能试几种 | 33 款真实香水数据库 + AI 匹配算法 |
| 现有推荐工具体验枯燥 | 简单问卷，缺乏沉浸感 | 多步骤引导式体验 + 4 步分析动画 + 雷达图 |
| 推荐结果缺乏个性化依据 | “你喜欢花就推荐花香” | 15 维面部特征 → Big Five 性格 → 香调匹配 |
| 分析结果难以传播 | 文字报告，无分享价值 | html2canvas 一键生成分享卡片 |
为什么做这个方向：
选择"面部表情 → 性格 → 香水"这条路径，是因为它连接了三个天然有话题性的元素：看脸（人人好奇）、性格测试（社交货币）、香水推荐（实用价值）。三者串联形成完整的"认识自己 → 找到专属气味"故事线，既有娱乐性又有实用价值，天然适配社交传播。
技术选型上选择 face-api.js + 浏览器端 AI 模型，因为：
- 隐私友好：照片不上传服务器，全部在本地浏览器分析
- 零后端成本：纯前端单 HTML 文件，无需服务器部署
- 即时反馈：模型预加载后分析仅需数秒
3. Demo 体验地址
交付方式：交互式 HTML 文件（Zip 打包上传）
已将完整 Demo 及所有依赖（AI 模型文件、香水数据库、产品图片）打包为 Zip 文件上传至社区。
使用方式：
- 下载并解压 Zip 文件
- 双击
启动.bat（自动启动本地服务器并打开浏览器） - 或手动运行：在解压目录下执行
python -m http.server 8765，然后访问http://localhost:8765/ 识人闻香.html
注意：必须通过本地服务器（http://） 访问，不能直接双击 HTML 文件（file:// 协议会导致浏览器同源策略阻止 AI 模型加载）
4. TRAE 实践过程
4.1 整体开发流程
整个项目从需求构思到最终交付，全程使用 TRAE 完成。以下为完整开发时间线，每个关键节点标注对应的 TRAE 对话 Session ID：
| 日期 | 开发阶段 | 关键任务 | Session ID |
|---|---|---|---|
| 7/8 | 需求规划 | 撰写产品需求文档（PRD），定义核心用户流程、功能模块、多学科理论融合方案 | 6a4e5ca0adc73baa79d77c67 |
| 7/8 | 初版开发 | 完成 Demo 网站初版开发 + 整理 33 款香水结构化数据 | 6a4e68e8adc73baa79d77cf3 |
| 7/9 | 核心优化 | 实现全局回退导航、可折叠分析面板、多学科理论驱动分析逻辑、香水产品图片 | 6a4e9686adc73baa79d781d4 |
| 7/9 | 算法 V2 | 发现标签匹配导致推荐趋同，改用余弦相似度算法 | 6a4f207eadc73baa79d7826c |
| 7/9 | UI 修复 | 修复导航栏遮挡文字 + 香水真实图片从 9 款扩充到 33 款 | 6a4f2436adc73baa79d782ac |
| 7/10 | AI 集成 | 将 Mock 分析替换为真实 face-api.js AI 识别（人脸检测 + 68 点关键点 + 年龄性别） | 6a4fb325f1056a7d98f6be38 |
| 7/10 | Bug 修复 | 修复 TensorFlow.js 版本缓存冲突 + 服装饱和度计算错误 | 6a4fc973f1056a7d98f6c059 |
| 7/10 | 系统测试 | UI 交互流程检测 + 推荐算法区分度修复（性别匹配 + 连续值调整）+ 图片加载验证 | 6a4fcef7f1056a7d98f6c21b |
| 7/14 | 代码审计 | 自审代码，发现 5 个遗漏问题（空壳函数、静默降级、随机性、死代码、缺免责声明） | 6a56317037008f827a5e1403 |
| 7/14 | 5 项修复 | html2canvas 保存功能 + Mock 降级提示 + 移除随机性 + 趣味页面接入 + 免责声明 | 6a56326337008f827a5e1429 |
| 7/14 | 推荐多样性 | 加入面部特征确定性扰动 + 会话随机扰动，确保 30 种香水均可出现 | 6a56392d37008f827a5e14e4 |
| 7/14 | 表情增强 | 研究 68 关键点能力，设计 7 维表情特征方案，修正 fWHR 学术定义 | 6a563d0937008f827a5e15b2 |
| 7/14 | 表情实施 | 实施 7 维表情特征注入 Big Five 性格公式 + UI 从 4 栏扩展到 8 栏 | 6a563e0c37008f827a5e1607 |
4.2 关键开发步骤详解
步骤一：需求规划与初版开发（7/8）
使用 TRAE 撰写了完整的产品需求文档（PRD），定义了从"用户进入网站"到"查看香水推荐"的完整交互链路，规划了多学科理论融合方案（面部宽高比理论、大五人格模型、四季色彩理论、NeedScope 香水匹配模型）。同日完成 Demo 初版开发，包含首页引导页、照片上传、摄像头拍照等功能模块，并整理了 33 款香水数据到 perfume-data.json。
Session ID：
6a4e5ca0adc73baa79d77c67（需求规划） /6a4e68e8adc73baa79d77cf3（初版开发）
步骤二：核心优化与算法迭代（7/9）
在 TRAE 中完成 4 项重大优化：全局回退导航（步骤进度显示 + 回退跳转）、可折叠分析面板（默认折叠显示摘要）、多学科理论驱动的分析逻辑、香水推荐卡片产品图片。推荐算法从简单标签匹配改为余弦相似度算法，解决了 3 张人脸图片推荐趋同的问题。香水真实图片从 9 款扩充到 33 款（21 张来自 nosetime.com CDN，3 张同品牌替代图），设置加载失败回退到品牌色占位图。
Session ID：
6a4e9686adc73baa79d781d4（核心优化） /6a4f207eadc73baa79d7826c（余弦相似度） /6a4f2436adc73baa79d782ac（UI修复+图片扩充）
步骤三：真实 AI 集成与 Bug 修复（7/10）
这是项目最关键的一步——将 Mock 分析替换为真实 AI 识别。在 TRAE 中完成了 face-api.js 集成：人脸检测（TinyFaceDetector）、68 点关键点定位（FaceLandmark68TinyNet）、年龄/性别估计（AgeGenderNet）、Canvas 肤色/服装色彩分析。实现 AI 失败时自动降级到 Mock 模式的兜底机制。
开发过程中遇到两个关键 Bug：
- TensorFlow.js 版本缓存冲突：浏览器缓存旧版 tfjs 与 face-api.js 不兼容，通过重命名
tf.min.js为tf170.min.js解决 - 服装饱和度计算错误：RGB 差值未归一化导致开放性分数异常，修正为 0-100 范围归一化
随后进行系统化测试：UI 交互流程检测、推荐算法区分度修复（加入性别匹配 +5 分 + 连续值调整）、香水图片加载验证、非人脸拒绝验证，全部通过。
Session ID：
6a4fb325f1056a7d98f6be38（AI集成） /6a4fc973f1056a7d98f6c059（Bug修复） /6a4fcef7f1056a7d98f6c21b（系统测试）
步骤四：代码自审与 5 项修复（7/14）
让 TRAE 审查自己的代码，发现了 5 个未意识到的问题并全部修复：
| 问题 | 严重度 | 修复方案 |
|---|---|---|
saveShareCard() 是空壳函数，只弹 alert |
高 | 接入 html2canvas CDN，实现真正的 PNG 下载 |
| Mock 模式静默降级，用户不知情 | 高 | 新增 showModelLoadWarning() 明确提示 |
推荐结果含 Math.random，同图结果不稳定 |
高 | 移除随机扰动，改为确定性公式 |
showFunResult() 和 page-fun 是死代码 |
中 | 重写为基于图片主色调分析的趣味推荐 |
| 缺少娱乐性免责声明 | 中 | 首页和结果页添加"仅供娱乐参考" |
Session ID：
6a56317037008f827a5e1403（代码审计） /6a56326337008f827a5e1429（5项修复）
步骤五：推荐多样性 + 7 维表情特征增强（7/14）
推荐多样性优化：在 findMatchingPerfumes 中加入两层扰动机制——基于面部特征（fWHR、眼部比例、嘴部比例等 10 个原始特征）的确定性扰动（±8 分）和会话随机扰动（±2 分）。确保不同人脸 → 不同推荐，同图多次 → 相似香水交替出现，30 种香水均可出现。
7 维表情特征：在 TRAE 中研究 face-api 68 个关键点的完整能力后，设计并实施了 7 个新的几何特征：
| 特征 | 计算方式 | 关键点 | 影响的性格维度 |
|---|---|---|---|
| 笑容分数 | 嘴角上扬度 + 嘴部曲率 | 48/54/57 | 开放性+15, 外倾性+20, 宜人性+12 |
| 眉毛倾斜度 | 眉头与眉尾高度差 | 17/21/22/26 | 神经质（倒八字眉→↑） |
| 眉毛上扬度 | 眉到眼睑距离 | 19/24/37/43 | 开放性+20 |
| 眼睛睁开度 | EAR 公式 | 36-47 | 外倾性+, 神经质（眯眼→↑） |
| 嘴部张开度 | MAR 公式 | 48/51/54/57/62/66 | 外倾性+15 |
| 法令纹代理 | 鼻翼到嘴角距离 | 31/35/48/54 | 尽责性（距离短→↑） |
| 下颌角度 | 下巴尖夹角 | 4/8/12 | 尽责性+, 宜人性- |
同时修正了 fWHR 的高度定义：从"下巴到鼻梁"（非标准）改为学术标准的"眉到上唇"（符合 Carre & McCormick 研究口径）。UI 面部特征栏从 4 个扩展到 8 个，性格维度从 4 个扩展到 6 个，香调画像从 4 个扩展到 6 个。
三张人脸图片验证结果：
| 指标 | 图片1（女，微笑） | 图片2（女，不笑） | 图片3（男） |
|---|---|---|---|
| 笑容指数 | 57% | 44% | 54% |
| 开放性 | 72 | 66 | 64 |
| 外倾性 | 59 | 51 | 62 |
| 理性气质 | 63 | 66 | 64 |
| 推荐香水 | 一千零一夜 | 绽放 | 卡普里岛香橙 |
笑容分数正确区分了不同表情，性格维度随之变化，推荐结果完全不同。
Session ID：
6a56392d37008f827a5e14e4（推荐多样性） /6a563d0937008f827a5e15b2（表情研究） /6a563e0c37008f827a5e1607（表情实施）
4.3 开发心得
TRAE 的核心价值体现在三个方面：
- 浏览器集成测试：TRAE 内置浏览器工具让"写代码 → 测试 → 发现 Bug → 修复"的循环无需离开 IDE。每次修改后直接在浏览器中验证，通过 JS 执行检查变量状态、截图确认 UI 效果，大幅缩短调试周期。
- 多轮对话迭代：推荐算法经过 4 轮迭代，每次都是在 TRAE 对话中分析问题 → 提出方案 → 实施修改 → 浏览器验证。TRAE 保持了完整上下文，不需要每次重新解释项目背景。
- 代码审计能力：让 TRAE 审查自己的代码，发现了 saveShareCard 空壳、Mock 静默降级、page-fun 死代码等未意识到的问题。这种"自我审计"能力帮助提升了代码质量。
技术架构总结：
Plain Text
用户照片 → face-api.js（浏览器端 AI）
├─ 人脸检测（TinyFaceDetector）
├─ 68 点关键点（FaceLandmark68TinyNet）
├─ 年龄/性别估计（AgeGenderNet）
└─ 肤色/服装色彩分析（Canvas getImageData）
↓
15 维特征提取（含 7 维表情特征）
↓
Big Five 性格模型 + 香调画像
↓
余弦相似度匹配 33 款香水（含确定性扰动 + 会话扰动）
↓
推荐结果 + html2canvas 分享卡片
4.4 关键任务 Session ID 汇总
以下为本项目开发过程中关键任务的 TRAE 对话 Session ID，按时间顺序排列：
| # | Session ID | 日期 | 任务描述 |
|---|---|---|---|
| 1 | 6a4e5ca0adc73baa79d77c67 |
7/8 | 需求规划与产品需求文档撰写 |
| 2 | 6a4e68e8adc73baa79d77cf3 |
7/8 | Demo 初版开发 + 33 款香水数据库构建 |
| 3 | 6a4e9686adc73baa79d781d4 |
7/9 | 核心优化：回退导航 + 折叠面板 + 分析算法 + 产品图片 |
| 4 | 6a4f207eadc73baa79d7826c |
7/9 | 推荐算法 V2：标签匹配改为余弦相似度 |
| 5 | 6a4f2436adc73baa79d782ac |
7/9 | UI 修复 + 香水真实图片扩充至 33 款 |
| 6 | 6a4fb325f1056a7d98f6be38 |
7/10 | AI 集成：Mock 替换为真实 face-api.js |
| 7 | 6a4fc973f1056a7d98f6c059 |
7/10 | Bug 修复：TF.js 版本冲突 + 饱和度计算 |
| 8 | 6a4fcef7f1056a7d98f6c21b |
7/10 | 系统测试：算法区分度 + 性别匹配 + 图片验证 |
| 9 | 6a56317037008f827a5e1403 |
7/14 | 代码自审：发现 5 个遗漏问题 |
| 10 | 6a56326337008f827a5e1429 |
7/14 | 5 项修复：html2canvas + Mock提示 + 去随机 + 趣味页面 + 免责 |
| 11 | 6a56392d37008f827a5e14e4 |
7/14 | 推荐多样性：确定性扰动 + 会话随机扰动 |
| 12 | 6a563d0937008f827a5e15b2 |
7/14 | 表情研究：68 关键点能力分析 + 7 维方案设计 |
| 13 | 6a563e0c37008f827a5e1607 |
7/14 | 表情实施：7 维特征注入 Big Five + UI 扩展 |
以上 Session ID 可在 TRAE 中双击对应对话查看完整开发记录。
5. 报名帖链接
报名帖已通过社区审核，链接如下：
【生活娱乐赛道】做一个"识人闻香"香水性格分析网站 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
免责声明： 本应用基于面部特征分析进行趣味性香水推荐，分析结果仅供娱乐参考，不构成专业人格评估或购买建议。