在线体验：https://danzhihuiyan-ui.vercel.app 为方便展示，当前为纯前端 Mock 数据版，无需等待后端启动，点开即用。
项目背景：为什么做这个？
买眼镜这件事，一直是个让人头疼的痛点。在线下店挑选，面对满墙的镜框容易挑花眼，还常常伴随着销售的”贴身跟随”；选择在线上下单，又往往只能对着模特图”盲猜”是否适合自己的脸型，最后沦为买家秀与卖家秀的惨烈对比。
基于这个痛点，我开发了**「丹智慧眼」**。
这是一款结合 AI 脸型识别的眼镜电商应用。核心思路很明确：用户只需上传一张自拍，系统就会通过 AI 分析出其面部轮廓特征，再结合用户填写的近视度数和日常风格偏好，精准匹配并推荐最适合的镜框，同时提供一套完整的电商购买链路。
在当前版本中，系统支持 6 种核心脸型的精确分析，内置了 500+ 款精选镜框数据，单次面部特征提取与推荐分析的平均耗时控制在 10 秒以内。
核心业务模块
一、AI 试戴与个性化推荐（核心链路）
这是整个项目最具挑战、也是打磨最久的模块。用户进入该模块后，只需三步：
- 图像采集：支持实时调用摄像头或从相册上传，兼容 JPG/PNG 格式
- 偏好设定：提供分段控制器，可勾选商务/时尚/复古等风格，并可选填度数来过滤不合适的镜框
- 分析与推荐：点击确认后屏幕出现科技感扫描光效，配合进度条缓慢推进，结果揭晓时下方顺滑展开匹配度最高的眼镜卡片
底层真实接入了 HuggingFace 的 metadome/face_shape_classification 模型（基于 ViT 架构）。为防止网络波动或 CPU 推理过慢导致页面卡死，这里做了一层优雅降级——推理超时或失败时，系统会自动平滑切换为兜底推荐策略，保证主流程不被阻断。
二、电商商城闭环
商城大厅支持基于「脸型、风格、分类、价格区间」的多维交叉筛选，展示品牌、评分、销量。从商品列表浏览、点击详情查看图文，到加购、修改数量、结算、下单、支付及确认收货，一整套业务状态流转顺滑跑通。
三、个人中心与数据沉淀
- 试戴档案：记录每次 AI 分析结果，包括推荐款式与匹配度得分，方便随时回溯
- 动态偏好：收藏行为和手动设置的风格偏好会直接影响后续商城列表与推荐权重排序
四、数据看板（管理后台）
轻量级 Admin 后台，除基础的商品上下架和订单状态管理外，利用 ECharts 引入数据可视化，直观呈现全站用户的「脸型分布饼图」与「试戴活跃度折线图」。
技术实现思路
在这个项目中，技术选型保持了一定的克制，没有盲目堆砌庞大框架，更看重基础功底和交互细节。
前端
- 放弃 Vue/React，采用纯 Vanilla JS（ES6+）构建，手写全部组件化逻辑、页面路由分发与全局状态管理
- 借助 Tailwind CSS 复刻 iOS 17 设计语言：毛玻璃卡片、Sheet 底部弹层、分段控制器
- Particles.js 粒子背景 + ECharts 数据可视化，整体 UI 偏向轻盈通透
服务端（完整版架构，当前展示为 Mock）
- Flask 蓝图架构，划分认证、商品、订单、AI 等 7 个独立业务模块
- Flask-JWT-Extended 无状态权限校验，SQLite + Flask-SQLAlchemy，支持首次部署自动初始化
演示环境说明
当前访问的链接是专门打包的纯前端 Mock 版本，所有数据已在 js/api.js 中本地化处理。
- 免注册体验：打开自动以
demo身份登录，随意输入账号密码即可，验证逻辑已绕过 - AI 结果固定：Mock 版 AI 分析固定返回「鹅蛋形」及对应推荐，保证演示流畅度
- 状态重置：购物车与订单在当前 Session 内有效，刷新即恢复初始状态，可毫无顾忌体验全流程
总结
开发「丹智慧眼」最大的收获跳出了纯代码的范畴。
相比跑通复杂的电商支付逻辑，我花了更多心思推敲”等待 AI 识别”那 10 秒钟的用户心理——如何用扫描动画缓解焦躁、如何用柔和的文案解释脸型特征。这让我深刻体会到，优秀的技术最终还是要服务于产品体验的。
如果对项目中的某个组件实现或业务逻辑感兴趣，可以通过作品集上的联系方式找到我，期待与您的交流 👋