📸 Moment Camera

一款简洁优雅的H5移动端照片风格化应用 让每个人都能轻松创作出具有艺术风格的拍立得照片

在线演示 · 功能介绍 · 快速开始 · 部署指南 · English

✨ 关于项目

Moment 是一个简洁的H5移动端照片风格化应用。用户可以通过手机拍照或上传照片，然后使用AI技术或本地滤镜将照片转换成具有艺术风格的拍立得照片。

这个项目起源于一个简单的想法：让每个人都能轻松创作出独特的视觉回忆。

🎯 设计理念

• 简单易用：无需注册登录，打开即用
• 移动优先：专为手机浏览器优化，提供原生应用般的体验
• 美观设计：复古相机界面，让拍照本身也成为一种享受

🚀 核心功能

📷 照片输入

• 实时拍照：支持前后摄像头切换
• 相册上传：从手机相册选择现有照片
• 即时预览：拍照后立即显示效果

🎨 风格化处理

• AI风格：通过后端API进行AI图像生成（需配置AI服务）
• 本地滤镜：内置多种滤镜效果，支持离线处理
• 拍立得相框：自动添加经典的拍立得边框和日期标记

📱 移动端体验

• 响应式设计：适配各种手机屏幕
• 触摸优化：大按钮设计，便于操作
• 相机界面：复古相机UI设计

🖼️ 照片管理

• 相册浏览：查看所有处理过的照片
• 大图预览：点击照片查看详情
• 本地保存：照片存储在浏览器本地

🛠 技术栈

前端 (Next.js 14)

├── React 18           - UI框架
├── TypeScript         - 类型安全
├── Tailwind CSS       - 样式框架
├── Framer Motion      - 动画库
├── Lucide React       - 图标库
└── Axios              - HTTP客户端

后端 (FastAPI)

├── Python 3.9+        - 主要语言
├── FastAPI            - Web框架
├── SQLAlchemy         - ORM
├── Redis              - 缓存
├── Pydantic           - 数据验证
└── Uvicorn            - ASGI服务器

AI集成

├── OpenAI API         - 图像生成
├── 自定义提示词模板      - 风格控制
└── 异步处理            - 性能优化

📁 项目结构

moment/
├── web/                    # Next.js前端应用
│   ├── app/                # App Router页面
│   ├── components/         # React组件
│   ├── hooks/              # 自定义Hooks
│   ├── lib/                # 工具库
│   ├── types/              # TypeScript类型
│   └── utils/              # 工具函数
├── app/                    # FastAPI后端应用
│   ├── api/                # API路由
│   ├── services/           # 业务逻辑
│   ├── core/               # 核心配置
│   └── utils/              # 工具模块
├── alembic/                # 数据库迁移
└── README.md

🚀 快速开始

环境要求

• Node.js 18+
• Python 3.9+
• Docker & Docker Compose (推荐)

方式一：Docker 部署（推荐）

# 克隆项目
git clone https://github.com/yourusername/moment.git
cd moment

# 构建并启动服务
make start

# 查看日志
make log

应用将在 http://localhost 启动，API服务在 http://localhost:8010

方式二：本地开发

1. 启动前端

cd web
npm install
npm run dev

前端将在 http://localhost:3000 启动

2. 启动后端

# 安装Python依赖
pip install -r app/requirements.txt

# 启动服务
python main.py

后端API将在 http://localhost:8010 启动

3. 配置环境变量

创建 .env 文件：

# AI API配置（可选，不配置则只使用本地滤镜）
AI_API_KEY=your_api_key_here
AI_BASE_URL=openai_base_url

# 数据库配置
DATABASE_URL=sqlite:///./moment.db

🌐 部署指南

生产环境部署

使用提供的 Docker Compose 配置：

# 构建镜像
make build

# 启动服务
make up

# 查看运行状态
docker ps

# 查看日志
make log

# 停止服务
make down

自定义配置

修改 deploy/docker-compose.yml 中的环境变量：

• 数据库配置
• AI API配置
• 域名和SSL设置

🎨 风格类型

本地滤镜（无需联网）

• vintage：复古胶片效果
• polaroid：经典宝丽来效果

AI风格（需配置API）

• ai-ghibli：吉卜力动画风格
• ai-cartoon：Q版漫画风格
• ai-sketch：素描风格
• 更多风格可通过后端API配置添加

🔧 自定义配置

添加本地滤镜

在 web/lib/filters.ts 中添加新的滤镜函数：

export const applyMyFilter = (ctx: CanvasRenderingContext2D, width: number, height: number) => {
  // 滤镜处理逻辑
};

添加AI风格

1. 在后端配置AI API
2. 在 app/services/moment/prompts/ 中添加风格模板
3. 前端会自动从API获取可用风格列表

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

• 感谢开源社区提供的技术支持和灵感

---

如果这个项目对你有帮助，请给一个 ⭐️

让每个人都能创作出独特的视觉回忆 📸