最近用Next.js 15开发了一个图像到图像的AI处理工具，解决现有工具要么太贵要么功能单一的问题。支持上传图片+文字描述AI重新生成，最多批量处理5张，实时状态追踪，新用户送免费积分。采用Next.js 15+Tailwind CSS前端，后端用Next.js API Routes+Drizzle ORM+PostgreSQL，文件存储在Cloudflare R2。虽然目前日活不高但功能完整，技术栈现代化，欢迎大家试用。

🎨 图像到图像转换：用户可上传图片并添加文字描述，AI会根据描述重新生成图像，支持最多同时上传5张图片进行批量处理。

⏱️ 实时状态追踪：采用异步处理+轮询机制，用户可以实时查看处理进度，完成后展示前后对比图并支持一键下载结果。

🌟 积分系统：新用户可获得免费积分，可用于免费使用AI转换功能，用完后可考虑付费模式，确保扣除和退还的原子性操作。

💻 技术实现：前端基于Next.js 15+TypeScript+Tailwind CSS，拖拽上传支持JPEG/PNG/WebP格式，后端使用Next.js API Routes+Drizzle ORM+PostgreSQL，文件存储在Cloudflare R2。

📊 成本控制：前端托管于Vercel（免费），数据库使用Supabase（免费额度），文件存储Cloudflare R2几乎免费，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 + PostgreSQLNextAuth (Google/GitHub 登录)Cloudflare R2 做文件存储

核心流程

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

踩过的坑

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

值得一提的细节

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

成本控制

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

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

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