用Cursor 20分钟构建AI背景移除工具

使用Next.js与Replicate API开发AI图片背景移除工具

本教程将介绍如何开发一个AI图片处理工具站，涵盖服务注册、前后端代码编写及部署上线。

完整视频教程

建议按照视频步骤操作以完成开发。

开发流程和物料准备

在开始前，请准备以下服务和工具：

1. 注册Cloudflare并创建R2存储桶

访问 Cloudflare仪表板 注册账号，并创建R2存储桶用于保存用户上传的图片及其处理结果。

2. 在Replicate API平台选择背景移除API

访问 Replicate官网 查找并使用背景移除API：https://replicate.com/851-labs/background-remover/api。

开发环节

1. 安装Next.js

首先使用Next.js框架构建应用，在终端执行命令：

npx create-next-app@latest background-remove

2. 使用Github Desktop创建仓库

下载安装Github Desktop客户端：GitHub Desktop下载页面

3. 使用Cursor生成代码

打开Cursor，加载项目后利用如下提示词生成代码：

你好，我想做一个图片背景移除在线网站，网站首页仅包含工具模块。逻辑如下：用户前端上传图片 → 后端先将图片上传至Cloudflare R2并获取链接 → 调用Replicate提供的API → 最终在前端展示处理后的图片供用户下载

生成的代码应包括前端上传组件、后端API处理逻辑以及与Cloudflare R2和Replicate API的集成。

核心文件结构示例如下：

• app/page.tsx - 前端上传界面
• app/api/upload/route.ts - 处理图片上传到R2
• app/api/remove-bg/route.ts - 调用Replicate API进行背景移除
• lib/cloudflare.ts - Cloudflare R2配置信息
• components/UploadForm.tsx - 图片上传组件
• components/ImagePreview.tsx - 展示处理前后的对比预览

部署代码到Vercel

Vercel是一个提供免费额度的云服务器部署平台，它通过连接GitHub中的代码库来完成部署。

部署步骤如下：

1. 推送代码至GitHub仓库
2. 在Vercel中导入GitHub仓库
3. 配置环境变量（包含Cloudflare账户ID、R2访问密钥及Replicate API令牌等）
4. 点击部署按钮

需配置的环境变量包括：

• CLOUDFLARE_ACCOUNT_ID - Cloudflare账户ID
• CLOUDFLARE_ACCESS_KEY - R2访问密钥
• CLOUDFLARE_SECRET_KEY - R2秘密密钥
• CLOUDFLARE_BUCKET_NAME - R2存储桶名称
• REPLICATE_API_TOKEN - Replicate API访问令牌

完成部署

部署完成后，您将获得一个可访问的网址，用户可通过该网址上传图片并自动接收处理后的结果。

总结

通过本教程，我们成功搭建了一个AI图片背景移除工具网站。

该项目展示了如何结合多种服务和技术（如Next.js、Cloudflare R2、Replicate API）来打造实用AI工具。开发者可在现有基础上扩展更多功能，比如支持批量处理或提供更多图像编辑选项。

得益于Cursor的强大能力，即便不熟悉特定技术栈，也能快速开发出专业级的应用程序。