Cursor Hub LogoCursor Hub

教程目录

AI 图片生成站

从零搭建一个完整的AI图片生成网站

课程概览

本教程将带领你从零开始构建一个完整的AI图片生成网站。我们将学习NextJS全栈开发，整合第三方AI图像生成API，实现用户认证与支付订阅，最终部署一个功能完备的AI图片生成网站。

适合初学到中级开发者
预计完成时间: 10-15小时
包含完整源码和部署指南
7个核心模块, 20多个视频

需求与技术选型

在这个教程中，我们将从零开始搭建一个完整的AI图片生成网站。首先，我们需要分析项目需求，了解网站的核心功能和界面结构，并选择合适的技术栈。

需求分析与技术选型要点

1网站结构分析

  • 分析竞对网站，了解网页基本结构
  • 首页设计为产品落地页
  • 工具页放在内页，方便用户直接使用
  • 确定网站整体布局和导航结构

2工具页面结构

  • 侧边栏导航，便于用户快速切换功能
  • 输入区域，用户填写prompt和参数
  • 图片输出区域，展示生成结果
  • 参数设置区，包含图片数量和尺寸选项

3技术栈选择

  • Next.js全栈开发 - 前后端代码统一管理
  • React - 构建交互式用户界面
  • TailwindCSS - 实现响应式设计
  • API Routes - 处理后端请求
  • 第三方AI服务 - 图片生成核心功能
  • Vercel - 部署和托管网站

页面搭建

页面结构开发

  • 创建项目结构

    使用Next.js创建基础项目结构，设计页面布局

  • 组件设计

    构建页面核心组件，实现响应式布局和用户界面

  • 表单设计

    创建用户输入表单，设计参数选择界面和交互逻辑

API选择

常用API平台
  • RapidAPI Hub - 集成多种AI服务API
  • Fal.ai - 专注于AI图像生成服务
  • Replicate - 开源模型API服务
  • Segmind - 提供多种AI模型API
  • PublicAPIs - 免费API资源库
API选择标准
  • 输入参数与需求匹配度
  • 输出质量与响应速度
  • API调用成本与限额
  • 文档完整性和易用性
  • 使用示例和社区支持

API调用实现

接下来，我们将学习如何调用AI图像生成API，并将生成的图片展示在网站中。这一步是实现核心功能的关键环节。

API调用流程

  1. 创建Next.js API路由处理函数
  2. 配置第三方API所需的认证与参数
  3. 处理用户输入的prompt和参数
  4. 发送请求到AI图像生成服务
  5. 接收生成的图片URL或Base64数据
  6. 返回结果到前端页面

编码技巧

  • 提前规划API调用流程，明确每一步的逻辑
  • 在复杂逻辑处添加日志，便于调试和定位问题
  • 处理各种错误情况，确保应用稳定性
  • 使用适当的状态管理，跟踪请求状态

前端展示实现

请求状态处理

实现加载状态、成功状态和错误状态的UI展示，提升用户体验

图片展示组件

创建响应式图片网格布局，支持不同数量和尺寸的图片展示

交互功能设计

添加下载、放大查看等功能，提升用户使用体验

提示： 在开发过程中，如果遇到难以定位的问题，可以在关键位置添加console.log日志，输出中间数据和状态信息，帮助定位问题所在。

图片保存

为了保存用户生成的图片，我们将使用Cloudflare R2存储服务，这是一个高性能、低成本的云存储解决方案。

Cloudflare R2存储配置

1. 创建R2存储桶

  • 登录Cloudflare管理面板
  • 选择R2服务，创建新的存储桶
  • 配置存储桶访问权限和生命周期规则
  • 获取访问密钥和密钥ID

2. 绑定自定义域名

  • 确保域名已添加到Cloudflare管理中
  • 在R2设置中创建公共访问入口
  • 配置自定义域名作为存储桶访问地址
  • 设置DNS记录指向R2存储服务

注意：必须先将域名添加到Cloudflare并完成DNS配置，才能为R2存储桶绑定子域名

3. 实现图片上传功能

  • 安装@aws-sdk/client-s3包与R2通信
  • 创建S3客户端连接R2服务
  • 实现图片上传API接口
  • 将R2返回的链接转换为自定义域名链接

将R2链接替换为自定义域名链接

R2默认返回的链接格式为：https://<bucket>.<account-id>.r2.cloudflarestorage.com/<object-key>

需要在代码中将其替换为：https://<your-subdomain>.<your-domain>.com/<object-key>

用户认证登录

为了跟踪用户生成的图片并提供个性化体验，我们需要实现用户登录功能。在本节中，我们将使用Supabase实现谷歌账号登录，并将用户信息存储到数据库中。

Supabase认证系统整合

1Supabase设置

  • 创建Supabase项目
  • 配置谷歌OAuth提供商
  • 设置允许的回调URL
  • 获取客户端密钥和API密钥
数据库用户表设计
字段名类型说明
idUUID主键，用户唯一标识符
emailVARCHAR用户邮箱地址
avatar_urlVARCHAR用户头像URL
creditsINTEGER用户可用积分数量

2前端集成

安装依赖

安装并配置Supabase客户端库，准备认证相关组件

登录按钮

在Header组件右侧添加谷歌登录按钮，处理登录流程

用户状态管理

创建全局认证上下文，跟踪用户登录状态和信息

登录回调处理

处理OAuth回调，获取用户信息并更新数据库

SQL代码示例
CREATE TABLE users (
  id UUID PRIMARY KEY,
  email VARCHAR NOT NULL,
  avatar_url VARCHAR,
  credits INTEGER DEFAULT 10
);
注意： 谷歌OAuth配置需要在谷歌云平台创建项目和OAuth凭据，并将回调URL添加到允许列表中。详细步骤可参考谷歌开发者文档。

图片数据库记录

当用户生成图片并上传到Cloudflare R2后，我们需要将图片URL和生成记录保存到数据库中，便于用户查看历史记录和管理生成内容。

图片生成记录数据库设计

数据库表设计

字段名类型说明
idUUID记录唯一标识符
user_idUUID关联用户ID
promptTEXT生成图片使用的提示词
image_urlVARCHAR图片URL地址
created_atTIMESTAMP创建时间
parametersJSONB生成参数(尺寸、数量等)
SQL代码示例：
CREATE TABLE generated_images (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID REFERENCES users(id),
  prompt TEXT NOT NULL,
  image_url VARCHAR NOT NULL,
  created_at TIMESTAMP DEFAULT NOW(),
  parameters JSONB
);

实现功能

1. 记录创建API

创建API接口，将图片生成记录存入数据库，包含用户信息、提示词和图片URL

2. 历史记录获取

实现获取用户生成历史的API，支持分页和筛选

3. 前端展示组件

创建历史记录展示页面，显示用户生成的图片及相关信息

4. 用户积分管理

实现生成图片消耗积分的功能，更新用户积分余额

集成流程
  1. 用户生成图片 → 图片上传到R2
  2. 获取图片URL → 创建数据库记录
  3. 扣除用户积分 → 返回生成结果
  4. 用户查看历史 → 从数据库加载记录
提示： 通过将图片记录与用户关联，可以实现更多高级功能，如用户图片收藏、分享、重新生成等功能，提升用户体验和平台粘性。

Stripe支付集成

为了实现会员订阅和积分充值功能，我们需要集成在线支付系统。本节将使用Stripe作为支付处理平台，实现订阅模式的支付流程和Webhook事件处理。

支付系统实现步骤

Stripe账户设置

开通Stripe账户要求
  • 护照 + 香港银行卡（个人即可开通）
  • 初期可使用沙盒(Sandbox)模式测试集成
  • 获取API密钥（公钥和私钥）
  • 配置Webhook端点和事件监听
测试卡信息

卡号：4242 4242 4242 4242

CVC：任意三位数

日期：任意未来日期

新建订阅表

CREATE TABLE subscriptions (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  user_id UUID REFERENCES users(id),
  stripe_customer_id VARCHAR NOT NULL,
  stripe_subscription_id VARCHAR NOT NULL,
  plan_type VARCHAR NOT NULL,
  status VARCHAR NOT NULL,
  current_period_end TIMESTAMP,
  created_at TIMESTAMP DEFAULT NOW()
);

实现支付流程

1. 前端支付组件

使用Stripe Elements或Checkout创建支付界面，处理用户订阅选择

2. 创建支付会话

后端API创建Stripe支付会话，返回会话ID给前端

3. Webhook处理

配置Webhook监听invoice.paid事件，更新数据库

Webhook调试技巧

处理Webhook时，添加适当的日志能帮助定位问题：

console.log('Received webhook event:', event.type);
console.log('Event data:', JSON.stringify(event.data));
console.log('Customer:', event.data.object.customer);

try {
  // 处理逻辑
  console.log('Processing successful');
} catch (error) {
  console.error('Error processing webhook:', error);
  // 错误处理
}
遇到报错解决思路
  • 在关键位置添加详细日志，记录完整的请求和响应
  • 使用Stripe CLI工具本地测试Webhook
  • 检查Stripe Dashboard中的事件日志
  • 确认API密钥和Webhook密钥正确配置

支付完成后的数据更新流程

  1. 监听invoice.paid事件确认支付成功
  2. 根据订阅计划更新users表中的credits字段
  3. 将订阅信息记录到subscriptions表
  4. 更新用户界面显示最新的积分和订阅状态