分享一个刚做完的 AI 图像处理工具，技术栈挺有意思的

项目背景

最近用 Next.js 15 搭了一个图像到图像的 AI 处理工具，主要解决现有工具要么太贵，要么功能单一的问题。

项目地址： https://aiimagetoimage.net

核心功能

• 图像到图像转换：上传图片 + 文字描述，AI 帮你重新生成
• 批量处理：最多同时上传 5 张图片
• 实时状态追踪：异步处理 + 轮询机制，有进度反馈
• 积分系统：新用户送免费积分，用完再考虑付费

技术实现

前端

• Next.js 15 (App Router) + TypeScript + Tailwind CSS
• 拖拽上传，支持 JPEG/PNG/WebP ，单文件最大 24MB
• 智能轮播：未登录用户看示例，登录用户看历史记录

后端

• Next.js API Routes + Drizzle ORM + PostgreSQL
• NextAuth (Google/GitHub 登录)
• Cloudflare R2 做文件存储

核心流程

1. 图片上传 → R2 存储获取公网 URL
2. 调用 API 开始异步处理
3. taskId 轮询机制检查状态
4. 完成后展示前后对比图
5. 一键下载结果

踩过的坑

1. DNS 配置：Dynadot + Cloudflare NS 花了半天时间调试
2. 异步状态管理：轮询过程中要处理网络中断、超时等边界情况
3. 积分系统：确保扣除和退还的原子性操作
4. SEO 优化：修复了 Google Search Console 的结构化数据重复问题

值得一提的细节

• 响应式设计，移动端体验不错
• 错误处理比较完善，失败会自动退还积分
• 用了 Suspense 做 loading 优化
• 所有文件操作都有进度和状态反馈

成本控制

• 前端托管：Vercel (免费)
• 数据库：Supabase (免费额度)
• 文件存储：Cloudflare R2 (几乎免费)
• AI 接口：按量付费，成本可控

目前日活不高，但功能比较完整，技术栈也算现代化。

欢迎大家试用 https://aiimagetoimage.net ，有问题或建议随时交流。