基于火山引擎Seedream大模型，比公版即梦AI更好用的个人专属AI图像生成工具
不用买会员 · 没有生成限制 · 完全自定义 · 隐私可控
| 对比项 | 本工具 | 公版即梦AI平台 |
|---|---|---|
| 💰 成本 | 火山引擎API按量付费，用多少次付多少钱，不用买会员 | 需要买月度/年度会员，不用也得花钱 |
| 🔧 自定义 | 100%开源可改，随便加自己需要的功能，比如自定义提示词模板、批量生成规则 | 功能固定，完全不能改，只能用平台提供的功能 |
| 🔒 隐私 | 所有生成记录和图片都存在你本地，不会上传到第三方服务器 | 所有内容都会上传到平台服务器，受平台审核限制 |
| ⚡ 使用限制 | 没有生成次数限制、没有速度限制、没有广告 | 有每日生成上限、高峰需要排队、插播广告 |
| 📦 工作流对接 | 可以对接你的个人工作流，自动保存到本地文件夹、对接图床/笔记等 | 只能手动下载图片，无法对接个人工作流 |
| 功能 | 能做什么 |
|---|---|
| 📝 文字生成图片 | 输入你想要的画面描述，直接生成图片 |
| 🖼️ 参考图改图 | 上传一张图，告诉AI要改成什么风格/内容 |
| 🔗 多张图融合 | 上传多张参考图，把它们的特点混合成新图 |
| 🔍 联网找灵感 | AI自动联网搜索相关素材，生成效果更好 |
| 📺 边生成边看 | 不用等全部生成完，实时看到生成进度 |
┌─────────────────────────────────────────────────────────────┐
│ 分辨率选项 │
├─────────────────────────────────────────────────────────────┤
│ 🌟 2K (2048×2048) ─ 轻量快速，适合预览 │
│ 🚀 3K (3072×3072) ─ 平衡之选，质量与速度兼顾 │
│ 💎 4K (4096×4096) ─ 超高清输出，专业级品质 │
└─────────────────────────────────────────────────────────────┘
比例: 1:1 · 3:4 · 4:3 · 16:9 · 9:16 · 2:3 · 3:2 · 21:9
| 模型 | 版本 | 特色能力 | 最大生成数 |
|---|---|---|---|
| Seedream 5.0-lite | 260128 | 联网搜索 🔥 | 15 |
| Seedream 4.5 | 251128 | 4K超清 | 10 |
| Seedream 4.0 | 250828 | 经典稳定 | 10 |
SeedDream_UI/
├── 📂 src/
│ ├── 📂 components/ # 组件库
│ │ ├── 📂 ui/ # 基础 UI 组件 (shadcn/ui)
│ │ ├── 📂 layout/ # 布局组件
│ │ ├── 📂 image/ # 图像相关组件
│ │ └── 📂 generation/ # 生成器组件
│ │ ├── PromptInput.tsx 💬 提示词输入
│ │ ├── ReferenceImageUpload.tsx 🖼️ 参考图上传
│ │ ├── ModelSelector.tsx 🤖 模型选择
│ │ ├── ImageSizeSelector.tsx 📐 分辨率选择
│ │ ├── FormatSelector.tsx 📁 格式选择
│ │ ├── GenerateButton.tsx ⚡ 一键生成
│ │ └── ...
│ ├── 📂 pages/ # 页面
│ │ └── HomePage.tsx 🏠 首页
│ ├── 📂 services/ # 业务服务
│ │ └── api.ts 🔌 API 服务
│ ├── 📂 stores/ # 状态管理
│ │ └── settings.ts ⚙️ 设置状态
│ ├── 📂 types/ # 类型定义
│ │ └── index.ts 📋 类型安全
│ ├── 📂 lib/ # 工具库
│ │ ├── utils.ts 🛠️ 工具函数
│ │ └── constants.ts 📌 常量配置
│ └── 📂 assets/ # 静态资源
├── 📂 public/ # 公共资源
└── 📄 package.json 📦 依赖配置
| 分类 | 技术 | 说明 |
|---|---|---|
| ⚛️ 框架 | React 19 | 现代化的 UI 框架 |
| 🔷 语言 | TypeScript 5.9 | 类型安全的 JavaScript 超集 |
| ⚡ 构建 | Vite 8.0 | 极快的开发服务器和构建工具 |
| 🎨 样式 | Tailwind CSS 4.2 | 原子化 CSS 框架 |
| 🧩 组件 | shadcn/ui + Radix UI | 精美的无障碍组件库 |
| 📊 状态 | Zustand 5.0 | 轻量级状态管理 |
| 🧭 路由 | React Router 7 | 声明式路由 |
| 🔮 图标 | Lucide React | 精美的开源图标库 |
| 🎭 动画 | Tailwind Animations | 流畅的交互动画 |
- Node.js: >= 18.0.0
- pnpm: >= 8.0.0 (推荐) 或 npm / yarn
# 1. 克隆项目
git clone https://github.com/your-repo/SeedDream_UI.git
cd SeedDream_UI
# 2. 安装依赖
pnpm install
# 3. 启动开发服务器
pnpm dev
# 4. 构建生产版本
pnpm build| 命令 | 描述 |
|---|---|
pnpm dev |
启动开发服务器 |
pnpm build |
构建生产版本 |
pnpm preview |
预览生产构建 |
pnpm lint |
运行 ESLint 检查 |
pnpm typecheck |
运行 TypeScript 类型检查 |
输入提示词 ──→ 选择模型 ──→ 选择分辨率 ──→ 点击生成 ──→ 获取图像
│ │ │ │
▼ ▼ ▼ ▼
"一只赛博 Seedream 2K / 3K / 4K 🔥 AI 图像
朋克猫咪" 5.0-lite 秒速生成中...
上传参考图 ──→ 输入提示词 ──→ 调整参数 ──→ 点击生成 ──→ 获取融合结果
│ │ │ │
▼ ▼ ▼ ▼
🖼️ 拖拽或 "将这只猫 风格强度 🐱 保留主体
点击上传 变成机器人" 0.1-1.0 换上新风格
上传多张参考图 ──→ 选择融合方式 ──→ 输入提示词 ──→ 生成混合图像
│ │ │
▼ ▼ ▼
最多 15 张 风格混合 / "融合这两张图的
参考图上传 主体保持 / 色彩和构图"
/|\ 元素融合
|
┌──────────────────────────────────────────────────────────────────┐
│ 🎨 SeedDream UI │
├──────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 💬 在此输入你的创意描述... │ │
│ │ │ │
│ │ "一座漂浮在星海中的未来城市，高耸的塔楼被霓虹灯 │ │
│ │ 点亮，飞车在空中穿梭..." │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ ┌────────────────┐ │
│ │ 🤖 模型 │ │ 📐 分辨率 │ │ 📁 格式 │ │
│ │ Seedream 5.0 ▼│ │ 3K (3072×3072) ▼│ │ PNG ▼│ │
│ └──────────────────┘ └──────────────────┘ └────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🖼️ 参考图 (可选) │ │
│ │ 拖拽图片到此处或点击上传 │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────┐ │
│ │ ⚡ 开始生成 │ │
│ └─────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────┘
本项目对接 字节跳动火山引擎 Seedream AI 图像生成服务：
首次使用需要配置 API Key（支持环境变量配置，保护您的密钥安全）：
// 在设置中输入您的 API Key
// 或设置环境变量 VITE_API_KEY=your_key# 组件存放位置
src/components/
├── ui/ # 基础组件（按钮、输入框等）
├── image/ # 图像相关组件
├── generation/ # 生成器相关组件
└── layout/ # 布局组件使用 Zustand 管理全局状态：
// src/stores/settings.ts
import { create } from 'zustand'
interface SettingsState {
apiKey: string
setApiKey: (key: string) => void
}
export const useSettingsStore = create<SettingsState>((set) => ({
apiKey: '',
setApiKey: (key) => set({ apiKey: key }),
}))感谢以下开源项目：
MIT License © 2025 SeedDream Team
🌟 如果这个项目对你有帮助，请给我们一个 Star！🌟
Built with ❤️ by SeedDream Team · Powered by 🔥 Volcano Engine