AI 创作工坊 (AI Creative Workshop)

基于阿里云 DashScope 通义万相系列模型的 AI 图片/视频生成应用，提供文生图、图生图、图生视频、文生视频四大功能。

移动端优先设计，前后端一体化部署于 Google Cloud Run。

✨ 功能特性

功能	模型	说明
文生图	`wanx-v1`	文字描述 → 图片生成，支持尺寸预设、步数、CFG 等高级参数
图生图	`wanx2.1-imageedit`	上传参考图 + 提示词 → 风格转换/编辑
图生视频	`wan2.6-i2v-flash`	上传图片 → 动态视频，支持 480P/720P/1080P、5/10 秒时长
文生视频	`wan2.6-t2v`	文字描述 → 视频生成，支持多种分辨率和宽高比

其他特性：

🔐 Google OAuth 2.0 + 邮箱登录
📊 每日用量限制 & 管理员无限额度
☁️ 云端历史同步 (Firestore)，多设备共享
🖼️ 生成结果自动上传 GCS，永久链接
🌓 深色/浅色主题切换
📋 一键复制历史提示词
💾 用户输入参数自动保存 (按用户持久化)

🏗️ 技术栈

前端

Vue 3.5 + TypeScript 5.7 + Vite 6
Pinia 状态管理
Vue Router 路由
Tailwind CSS 3.4 + shadcn-vue 风格组件
Radix Vue 无障碍基础组件
Lucide Icons 图标库
Axios HTTP 客户端

后端

Node.js 20 + Express 4.21 + TypeScript 5.7
Google Cloud Firestore 数据库 (用户、用量、任务历史)
Google Cloud Storage 媒体文件存储
JWT 认证 + Google Auth Library OAuth
Helmet + express-rate-limit 安全中间件

基础设施

Google Cloud Run 容器化部署
Google Cloud Build CI/CD
Artifact Registry Docker 镜像仓库
Secret Manager 密钥管理

📁 项目结构

ai-iv-generate/
├── src/                          # 前端源码 (Vue 3)
│   ├── api/                      #   API 客户端 (axios)
│   │   └── client.ts             #   统一 API 封装 (auth/generate/usage/history)
│   ├── components/
│   │   ├── common/               #   通用组件 (TaskCard, ImageLightbox, LoginDialog...)
│   │   ├── layout/               #   布局组件 (MobileLayout, PageHeader, BottomNav)
│   │   └── ui/                   #   shadcn-vue UI 基础组件
│   ├── composables/
│   │   ├── useGeneration.ts      #   生成任务逻辑 (提交、轮询、状态管理)
│   │   └── useUserParams.ts      #   用户参数持久化 (按用户保存表单输入)
│   ├── config/
│   │   └── oauth.ts              #   OAuth 配置 (Google, 微信)
│   ├── router/                   #   Vue Router 路由配置
│   ├── stores/
│   │   ├── app.ts                #   应用状态 (任务列表、云端同步、主题)
│   │   └── user.ts               #   用户状态 (登录、登出、OAuth)
│   ├── views/
│   │   ├── HomeView.vue          #   首页
│   │   ├── TextToImage.vue       #   文生图
│   │   ├── ImageToImage.vue      #   图生图
│   │   ├── ImageToVideo.vue      #   图生视频
│   │   ├── TextToVideo.vue       #   文生视频
│   │   ├── HistoryView.vue       #   历史记录
│   │   ├── SettingsView.vue      #   设置
│   │   └── OAuthCallback.vue     #   OAuth 回调
│   ├── App.vue
│   └── main.ts
├── server/                       # 后端源码 (Express)
│   └── src/
│       ├── index.ts              #   入口 (Express 启动、静态文件、SPA 回退)
│       ├── config.ts             #   配置 (每日限额、管理员邮箱)
│       ├── middleware/            #   中间件 (JWT 认证)
│       ├── routes/
│       │   ├── auth.ts           #   认证路由 (注册/登录/Google OAuth)
│       │   ├── proxy.ts          #   AI 代理路由 (DashScope API 转发)
│       │   ├── usage.ts          #   用量路由 (查询/限额)
│       │   └── history.ts        #   历史路由 (CRUD/批量同步)
│       └── services/
│           ├── db.ts             #   Firestore 数据库服务
│           ├── gcsStorage.ts     #   GCS 存储服务
│           └── imageUpload.ts    #   图片上传处理
├── Dockerfile                    # 多阶段构建 (前端+后端合一)
├── cloudbuild.yaml               # Cloud Build CI/CD 配置
├── vite.config.ts                # Vite 配置 (代理、别名)
├── tailwind.config.js            # Tailwind CSS 配置
└── package.json                  # 前端依赖

🚀 快速开始

前置要求

Node.js ≥ 20
DashScope API Key — 阿里云百炼控制台获取
Google Cloud 项目 (可选，部署时需要)

本地开发

# 1. 克隆项目
git clone <repo-url>
cd ai-iv-generate

# 2. 安装前端依赖
npm install

# 3. 安装后端依赖
cd server && npm install && cd ..

# 4. 配置环境变量
#    前端: 复制 .env.example → .env.local
cp .env.example .env.local

#    后端: 在 server/.env 中配置
cat > server/.env << 'EOF'
WAN_API_KEY=sk-your-dashscope-api-key
JWT_SECRET=your-jwt-secret-for-local-dev
GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-google-client-secret
GCS_BUCKET=your-gcs-bucket-name
EOF

# 5. 启动后端 (端口 8080)
cd server && npm run dev &

# 6. 启动前端 (端口 5173，自动代理 /api → localhost:8080)
cd .. && npm run dev

访问 http://localhost:5173 即可使用。

☁️ 部署到 Google Cloud Run

1. 创建 Secret Manager 密钥

PROJECT_ID=your-project-id

for SECRET in WAN_API_KEY GOOGLE_CLIENT_ID GOOGLE_CLIENT_SECRET JWT_SECRET; do
  gcloud secrets create $SECRET --replication-policy="automatic" --project=$PROJECT_ID
done

echo -n "sk-your-key" | gcloud secrets versions add WAN_API_KEY --data-file=-
echo -n "your-client-id" | gcloud secrets versions add GOOGLE_CLIENT_ID --data-file=-
echo -n "your-client-secret" | gcloud secrets versions add GOOGLE_CLIENT_SECRET --data-file=-
echo -n "$(openssl rand -base64 32)" | gcloud secrets versions add JWT_SECRET --data-file=-

2. 授权 Cloud Build 访问 Secrets

PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')
for SECRET in WAN_API_KEY GOOGLE_CLIENT_ID GOOGLE_CLIENT_SECRET JWT_SECRET; do
  gcloud secrets add-iam-policy-binding $SECRET \
    --member="serviceAccount:${PROJECT_NUMBER}@cloudbuild.gserviceaccount.com" \
    --role="roles/secretmanager.secretAccessor"
done

3. 触发构建部署

gcloud builds submit \
  --config=cloudbuild.yaml \
  --region=asia-east1 \
  --project=$PROJECT_ID

Cloud Build 会自动：构建前端 → 构建后端 → 打包 Docker 镜像 → 推送到 Artifact Registry → 部署到 Cloud Run。

📐 架构说明

┌──────────────────────────────────────────────────┐
│                   Cloud Run                       │
│  ┌──────────────────────────────────────────┐    │
│  │            Node.js (Express)              │    │
│  │  ┌──────────┐  ┌─────────────────────┐   │    │
│  │  │ 静态文件  │  │    API Routes        │   │    │
│  │  │ (Vue SPA)│  │  /api/auth/*         │   │    │
│  │  │ /public  │  │  /api/generate/*     │   │    │
│  │  │          │  │  /api/usage/*        │   │    │
│  │  │          │  │  /api/history/*      │   │    │
│  │  └──────────┘  └─────────┬───────────┘   │    │
│  └──────────────────────────┼───────────────┘    │
└─────────────────────────────┼────────────────────┘
                              │
              ┌───────────────┼───────────────┐
              │               │               │
     ┌────────▼──────┐ ┌─────▼─────┐ ┌───────▼──────┐
     │  DashScope    │ │ Firestore │ │   GCS        │
     │  (通义万相)    │ │  数据库   │ │  媒体存储    │
     │  文/图→图/视频 │ │ 用户/用量 │ │  图片/视频   │
     └───────────────┘ └───────────┘ └──────────────┘

⚙️ 配置项

每日用量限额

在 server/src/config.ts 中配置：

dailyLimits: {
  free:  { image: 30, video: 30 },
  basic: { image: 30, video: 30 },
  pro:   { image: 200, video: 50 },
}

管理员账户 (无限额度)

通过环境变量 ADMIN_EMAILS 设置，或在 server/src/config.ts 中修改默认值。

📄 License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
public		public
server		server
src		src
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
cloudbuild.yaml		cloudbuild.yaml
env.d.ts		env.d.ts
index.html		index.html
nginx.conf		nginx.conf
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.app.tsbuildinfo		tsconfig.app.tsbuildinfo
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.node.tsbuildinfo		tsconfig.node.tsbuildinfo
vite.config.ts		vite.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

AI 创作工坊 (AI Creative Workshop)

✨ 功能特性

🏗️ 技术栈

前端

后端

基础设施

📁 项目结构

🚀 快速开始

前置要求

本地开发

☁️ 部署到 Google Cloud Run

1. 创建 Secret Manager 密钥

2. 授权 Cloud Build 访问 Secrets

3. 触发构建部署

📐 架构说明

⚙️ 配置项

每日用量限额

管理员账户 (无限额度)

📄 License

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

AI 创作工坊 (AI Creative Workshop)

✨ 功能特性

🏗️ 技术栈

前端

后端

基础设施

📁 项目结构

🚀 快速开始

前置要求

本地开发

☁️ 部署到 Google Cloud Run

1. 创建 Secret Manager 密钥

2. 授权 Cloud Build 访问 Secrets

3. 触发构建部署

📐 架构说明

⚙️ 配置项

每日用量限额

管理员账户 (无限额度)

📄 License

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages