AI Wallpaper 🎨

基于 Next.js 16 + Cloudflare R2 + Supabase 构建的智能壁纸生成平台 (v0.3.0)

你的专属 AI 壁纸设计师

魔法扩写 · 无限瀑布流 · 4K 原图下载 · 个人作品集

核心功能 • 前置准备 • 配置指南 • 快速开始

---

AI Wallpaper 是一款现代化的壁纸生成应用。它集成了 Gemini Pro 的文本理解能力（魔法扩写）和 DALL-E 3 / Gemini 的绘图能力。后端采用 Supabase 进行数据存储与鉴权，图片存储在 Cloudflare R2 以实现低成本高性能分发。

🌟 核心功能

• 🪄 Magic Prompt: 输入简单词汇，AI 自动扩写为专业绘画提示词。
• 🌊 无限瀑布流: 全宽 Masonry 布局，支持无限滚动加载。
• 🖼️ 交互式灯箱: 高清大图预览，支持“一键同款 (Remix)”和原图下载。
• 👤 个人中心: 独立的 /profile 页面，基于 Supabase Auth 的安全归档。
• ☁️ 高性能存储: 图片自动上传至 Cloudflare R2，全球 CDN 加速。

🛠️ 前置准备

在开始部署之前，你需要准备以下服务的账号：

1. Supabase: 用于数据库 (PostgreSQL) 和用户认证 (Auth)。
2. Cloudflare: 用于对象存储 (R2)。
3. AI API 服务商: 支持 OpenAI 格式的接口 (如 Gemini, DeepSeek, OpenAI 官方等)。

⚙️ 配置指南

1. 配置 Supabase

1.1 创建项目与获取密钥

1. 登录 Supabase Dashboard，新建一个项目。
2. 进入 Project Settings -> API。
3. 记录下 Project URL (NEXT_PUBLIC_SUPABASE_URL) 和 anon public key (NEXT_PUBLIC_SUPABASE_ANON_KEY)。

1.2 配置 Google 登录 (Auth)

1. 在 Supabase 左侧菜单点击 Authentication -> Providers -> Google。
2. 你需要一个 Google Cloud Platform (GCP) 的 OAuth Client ID。
   • 前往 Google Cloud Console。
   • 创建 OAuth client ID (Web application)。
   • Authorized redirect URIs 填入 Supabase 提供的 Callback URL (例如 https://<your-project>.supabase.co/auth/v1/callback)。
3. 将 GCP 生成的 Client ID 和 Client Secret 填回 Supabase。
4. 保存并启用 Google Provider。

1.3 创建数据库表

进入 Supabase SQL Editor，运行以下 SQL 语句来初始化数据库结构：

-- 创建壁纸表
CREATE TABLE IF NOT EXISTS public.wallpapers (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  user_email text NOT NULL,
  user_name text,
  user_avatar text,
  img_description text,
  img_size text,
  img_url text NOT NULL,
  llm_name text,
  llm_params jsonb,
  created_at timestamptz DEFAULT now()
);

-- 启用行级安全 (RLS)
ALTER TABLE public.wallpapers ENABLE ROW LEVEL SECURITY;

-- 允许所有人查看壁纸 (公开画廊)
CREATE POLICY "Public wallpapers are viewable by everyone" 
ON public.wallpapers FOR SELECT USING (true);

-- 允许登录用户上传壁纸
CREATE POLICY "Users can insert their own wallpapers" 
ON public.wallpapers FOR INSERT WITH CHECK (auth.uid() IS NOT NULL);

-- (可选) 允许用户查看自己的壁纸 - 实际上上面的 Public 策略已经覆盖了，
-- 但如果有私有壁纸需求，可以调整策略。

2. 配置 Cloudflare R2

1. 登录 Cloudflare Dashboard，进入 R2。
2. 创建存储桶 (Bucket): 命名为 ai-wallpaper (或者你喜欢的名字)。
3. 设置公开访问:
   • 进入存储桶 -> Settings -> Public Access。
   • 你可以连接自定义域名 (Custom Domain)，或者启用 R2.dev 子域名 (测试用)。
   • 记录下这个 Public URL (例如 https://img.yourdomain.com 或 https://pub-<id>.r2.dev)，这将是 R2_PUBLIC_URL。
4. 获取 API 密钥:
   • 回到 R2 主页，点击右侧 Manage R2 API Tokens。
   • 点击 Create API token。
   • 权限选择 Object Read & Write (读写权限)。
   • 记录下 Access Key ID, Secret Access Key 和 Endpoint。
   • 注意: Endpoint 只需要 https://<account_id>.r2.cloudflarestorage.com 部分，不要带 bucket 名字。

3. 配置环境变量

复制 .env.example 为 .env.local，并填入上述步骤获取的信息：

# ---------------------------------------------------
# Supabase Configuration
# ---------------------------------------------------
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# ---------------------------------------------------
# Cloudflare R2 Configuration
# ---------------------------------------------------
# R2 的账户 ID 和密钥
R2_ACCESS_KEY_ID=your_r2_access_key_id
R2_SECRET_ACCESS_KEY=your_r2_secret_access_key
R2_ENDPOINT=https://<account_id>.r2.cloudflarestorage.com
# 你的存储桶名称
R2_BUCKET_NAME=ai-wallpaper
# 你的 R2 公开访问域名 (不带末尾斜杠)
R2_PUBLIC_URL=https://img.yourdomain.com

# ---------------------------------------------------
# AI API Configuration (OpenAI Compatible)
# ---------------------------------------------------
# API 基础地址 (例如 https://api.openai.com/v1 或中转地址)
BASE_URL=https://your-api-provider.com/v1
# API 密钥
API_KEY=sk-your-api-key

# [绘画模型] 用于生成壁纸
Image_MODEL=gemini-3-pro-image
# [文本模型] 用于 Magic Prompt 扩写
Content_MODEL=gemini-3-pro

🚀 快速开始

1. 安装依赖:

   npm install

2. 启动开发服务器:

   npm run dev

3. 访问 http://localhost:3000 🎉

📄 License

MIT

---

_{Built with ❤️ using Next.js & AI}