[学习工作赛道] AI Photo Studio — 摄影师智能工作台
1. Demo 简介
-
是什么： 一款纯 Web 端的 AI 照片后期处理流水线工作台，专为摄影师打造从「选片 → 精修 → 调色」的一站式解决方案；
-
面向谁： 婚礼/写真摄影师、中小摄影工作室、自媒体/内容创作者；
-
主要功能：
项目管理 支持项目的创建、编辑、归档、恢复，每个项目独立管理照片库。支持按状态（进行中/已完成/已归档）筛选和关键词搜索。
智能选片（Arena） 独创「照片对战」模式：左右两张照片 PK 对比，摄影师直觉选择，系统自动分组去重。支持键盘快捷键（←/→/↑/↓）快速操作。
AI 人像精修（Retouching） 自动识别人像区域，提供磨皮、美白、瘦脸、亮眼等一键精修功能。Canvas 实时预览，参数即调即看。
AI 色彩迁移（Colorgrading） 上传参考图即可一键迁移色调风格，支持亮度、对比度、饱和度等参数微调。支持 3D LUT (.cube) 导出。
工作流串联（Workflow） 四大阶段进度可视化追踪，数据无缝流转。项目切换时自动清理缓存，确保数据隔离和状态一致性。
2. Demo 创作思路
-
灵感来源： 身边的摄影师朋友经常抱怨，一场婚礼拍完 3000+ 张照片，光选片就要花 3-5 小时，精修每张 5-8 分钟，追色还要反复试错。中小摄影工作室根本没有专职后期团队，很多摄影师因为后期压力而不敢接更多单。这个项目就是想用 AI 把他们从后期泥潭里拉出来；
-
想解决的问题：
-
选片效率低：3-5 小时手工筛选，双眼疲劳导致漏选错选
-
精修速度慢：熟练修图师每天极限修 150 张，客片积压严重
-
追色难度高：客户拿"网图"要求同款色调，调色师反复试错
-
流程不连贯：三个环节之间有大量文件搬运、格式转换工作，容易出错且极度枯燥；
-
-
为什么做这个方向： 中小工作室没有专职后期团队，而市面上的专业软件（Lightroom/Photoshop）学习成本高、操作复杂，AI 工具可以大幅降低门槛，让摄影师专注于创意而非机械劳动。
3. Demo 体验地址
线上访问： https://commonsnow-hash.github.io/ai-photo-studio/
项目源码： https://github.com/commonsnow-hash/ai-photo-studio
4. TRAE 实践过程
整个项目完全使用 TRAE Code + Design 模式开发，从零到一逐模块构建，以下是关键开发步骤：
步骤 1：项目初始化与核心架构搭建 通过 TRAE 生成纯 HTML5 + CSS3 + 原生 JS 的多页应用架构，搭建项目管理、Arena、Retouching、Colorgrading、Culling、Workflow 六大页面，实现 localStorage 数据持久化和 SessionManager 状态管理。
对话 Session ID：3924613303376169:ede549111b688c1c839ff6469bc5f34c_6a3f0a3dde3b6c16a6feb9f9.6a3f0a3dde3b6c16a6feb9fc.6a3f0a3dde3b6c16a6feb9fa:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/27 07:24:45)
步骤 2：Arena 智能选片模块开发 实现照片对战选片模式，包括照片分组、左右对比、键盘快捷键、选片进度统计等功能，使用 Canvas API 实现图片预览和加载。
对话 Session ID：3924613303376169:021808ab468c43054414f6bffda8e9b9_6a40c19a8ecd99a9c367b0d3.6a40e54c8ecd99a9c367b307.6a40e54c8ecd99a9c367b305:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/28 17:11:40)
步骤 3：视觉设计优化 通过 TRAE Design 模式进行界面优化，包括设计系统建设、组件化改造、微交互和动效添加，提升整体视觉体验和可用性。发现并修复了 45 个设计问题，实现了 38 项改进。
对话 Session ID：3924613303376169:0ff6fa9b1ff26b52bf723318c645a167_6a431aea9e27460f479ff712.6a44d8359e27460f47a00f0d.6a44d8359e27460f47a00f0b:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/1 17:04:53)
步骤 4：Bug 修复与功能完善 使用 vibe-testing-loop 进行业务闭环测试，修复项目切换时 sessionStorage 数据清理、StateManager 与 ImageDataUtils 同步、Arena/Retouching/Colorgrading loadImages() fallback 等问题。测试覆盖 12 个测试用例，全部通过。
对话 Session ID：3924613303376169:3a85a35c67f4f65f042540670a48b3b1_6a408c1e8ecd99a9c367a6e1.6a408d398ecd99a9c367a71f.6a408d398ecd99a9c367a71d:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/28 10:55:53)
步骤 5：部署到 GitHub Pages 配置 GitHub Actions 自动部署工作流，解决 Personal Access Token 认证问题，成功部署到公网。
对话 Session ID：3924613303376169:79723a1ea4226780ba3f8c4343571001_6a4df8dddba79ba019c9804e.6a4e071cdba79ba019c98340.6a4e071cdba79ba019c9833e:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 16:15:24)
