Baby Album：用 React + Express 给宝宝照片做个 AI 成长相册
Baby Album（GitHub：oyzh888/baby-album）做的事很生活化：把一堆没整理过的宝宝照片，按「几个月大」和「在什么场景」，自动归进对应的相册，再生成一张能截图发朋友圈的成长纪念卡。它不依赖任何外部付费 AI 服务，整套逻辑跑在你自己本机，本质是一个前端 React + 后端 Express 的小全栈 Demo。
一句话定位：一个开源、可自托管的宝宝成长相册应用——输入宝宝信息 → 上传照片 → 按年龄和场景 AI 分组 → 生成成长纪念卡。技术栈是 React 18 + Vite + TailwindCSS + Node.js Express，MIT 协议，零外部 API 依赖，本地一键起。
一、它解决什么痛点
新手父母手机里往往堆着成百上千张宝宝照片：出生、满月、百天、生日、第一次翻身、去公园、家庭聚会……全是散图。想做一张「百天纪念」或「一岁成长卡」发亲友，得手动翻、手动拼、手动排版，费时还容易漏。
Baby Album 的思路就是把这道手工活自动化：你只给两样东西——宝宝名字 + 出生日期，以及一批照片——它算好每张照片拍摄时宝宝几个月大，再把它们分到「100 天纪念」「生日派对」「日常成长」这类相册里，最后吐一张带拼图和里程碑的纪念卡。
二、它是什么：一个轻量全栈应用
项目是一个典型的 Monorepo：前端用 React 18 + Vite + TailwindCSS，后端用 Node.js Express。Express 既提供照片上传 / 整理的 API，生产模式下又直接 serve 前端构建产物，所以部署后只有一个端口要管。
- 前端：React 18 + Vite + TailwindCSS，4 个页面（欢迎页、上传页、结果页、分享卡页），温暖母婴风格——淡粉、奶油色、天空蓝渐变，圆角卡片、柔和阴影、可爱 emoji 和入场动画，移动优先完全响应式。
- 后端：Node.js Express，提供
/api/health、/api/photos等端点，负责接收上传、做日期解析与分组。 - AI 整理：不调用任何外部大模型。当前实现是「规则 + 占位」路线——读照片 EXIF 日期算出宝宝年龄，再用一个内置的 7 类场景识别器（mock）打标签，最后按「里程碑 + 场景 + 兜底」三组规则归相册。所以它离线也能跑，不烧 API 额度。
- Demo 模式：内置一批 SVG 占位图，不用真上传照片就能点「体验 Demo」走完整流程，方便先看看效果。
关于「AI」要实事求是：README 写的是「AI 自动识别场景」，但代码里场景识别目前是 mock（占位）实现，不是接了视觉大模型。把它理解成「按 EXIF 日期 + 规则的分类器」更准确；真要上视觉识别，得自己把场景识别器换成真实模型。它胜在架构清楚、零外部依赖、能本地跑，是一个很好的二开起点。
三、使用流程：四步出一张成长卡
完整的用户路径是四个页面串起来，下面这张图把每一步都画了出来：
图：Baby Album 的四步用户流程。从左到右：①欢迎页填宝宝名字 + 生日；②上传页拖拽或点选 8–20 张照片；③结果页按相册分组、每张照片带年龄标签；④生成可截图的成长纪念卡。配色为项目默认的淡粉 / 奶油 / 天空蓝母婴风。
- 输入宝宝信息：填写宝宝名字、选择出生日期，点「开始整理照片」。
- 上传照片：拖拽或点选上传 8–20 张照片；或者直接点「体验 Demo」走内置占位图。
- 查看 AI 整理结果：照片自动按年龄节点和场景分组，每张显示宝宝当时年龄和一句话 caption，相册分「100 天纪念」「生日派对」「日常成长」等。
- 生成成长纪念卡：精美的成长纪念卡包含宝宝信息、照片拼图和重要里程碑，点「截图保存」或手机截图即可分享。
四、技术实现细节
后端整理逻辑是这个项目最能体现「思路」的部分，拆分来看：
- EXIF 日期提取 → 年龄计算：读照片的拍摄时间，减去宝宝生日，得到「几个月 / 几天大」，这是分组的主轴。
- 场景识别（mock，7 类）：内置一个 7 类场景识别器做占位，给出「日常 / 派对 / 户外」之类标签；接真实视觉模型时替换这一层即可。
- 智能分组：按「里程碑（出生、30 天、100 天、180 天、365 天等）+ 场景 + 兜底」三层规则把照片归进相册，保证每张都有去处。
- 成长纪念卡：把宝宝信息、照片拼图和里程碑时间轴排成一张卡片，截图即分享，不依赖后端导出。
项目结构
baby-album/
├── client/ # React 前端
│ ├── src/
│ │ ├── pages/ # 4 个页面：欢迎、上传、结果、分享卡
│ │ ├── App.jsx
│ │ └── index.css # TailwindCSS 样式
│ └── public/
│ └── demo/ # Demo 占位图（SVG）
├── server/ # Express 后端
│ └── src/
│ ├── index.js
│ └── routes/
├── start.sh # 一键启动脚本
└── package.json # Monorepo 根配置五、快速上手
本地跑起来很简单，Node 24+ 即可（USAGE 里推荐 Node 24.14.1，README 用通用 npm 命令）：
# 安装依赖
npm install
# 开发模式（前后端同时启动）
npm run dev
# 前端: http://localhost:3000 (Vite HMR)
# 后端: http://localhost:41011
# 生产部署
npm run build # 构建前端
npm start # Express 同时 serve 前端静态文件
# 访问 http://localhost:41011 即用完整应用嫌分步麻烦也可以直接 ./start.sh 一键启动。整个应用打包成单端口服务，部署到任意能跑 Node 的机器（VPS、容器、Cloudflare 之外的 Node 主机）都行，没有数据库、没有外部回调。
六、适合谁 / 不适合谁
适合
• 想给自家宝宝做个本地成长相册、不爱把照片传第三方云的家长
• 需要「上传 → 自动分组 → 出纪念卡」这一条流水线的轻量工具
• 前端 / Node 开发者，想拿一个 React + Express 全栈小项目二开练手
• 想先点 Demo 看效果、再决定是否部署的尝鲜用户
不适合
• 指望开箱即用的「视觉 AI 识图」的人（场景识别目前是 mock）
• 需要多用户 / 账号体系 / 云端同步的家庭（它是单机单宝宝设计）
• 需要真·无限存储与备份的人（本地磁盘即上限，无对象存储）
• 想要 iOS / 桌面原生客户端的人（当前是 Web 应用）
用 React + Express 给宝宝照片做 AI 成长相册：按年龄和场景自动分组，生成可分享的成长纪念卡。
