Magiviz

Magiviz Logo

AI驱动的智能视频创作平台 | AI-Powered Intelligent Video Creation Platform

Next.js TypeScript Tailwind CSS PostgreSQL Stripe

???? 在线演示 • ???? 快速开始

Magiviz 是一款 AI 驱动的智能视频创作平台，让每个人都能轻松创作专业级的视频内容。从创意构想到成品制作，只需数分钟——无需任何经验。支持好莱坞影视、动漫、故事剧情、广告、科普等多种视频类型。

目录

• 核心功能
• 技术栈
• API 接口
• 部署指南

核心功能

???? AI 视频创作工作流

创意输入 → AI 剧情生成 → 角色设计 → 分镜生成 → 视频渲染 → 成品导出

• AI 剧情生成：输入故事大纲，AI 自动生成详细的场景分解、角色设定、导演指令和对话
• 自定义角色生成：AI 根据文字描述生成风格一致的角色设计，支持自定义上传和重新生成
• 分镜图生成：自动生成高保真分镜图，包含构图、光影、氛围等细节
• 多格式输出：支持 16:9、9:16等多种画面比例
• 多模型支持：集成 Veo、Kling、Seedance、Wan 等多个 AI 视频生成模型

???? 核心五步工作流（详见 components/operate.tsx）

应用的核心交互组件 AIFunction（位于 components/operate.tsx，约 10,289 行）实现了一套完整的「五步串行 + 可中断可恢复」AI 视频生成流水线。

整体流程

        ┌─────────────────────────────────────────────┐
        │   步骤1：AI 剧情生成 (script)                │
        │   /api/ai/generate-story-details            │
        └─────────────────────────────────────────────┘
                          ↓
        ┌─────────────────────────────────────────────┐
        │   步骤2：主角生成 (character) [并行]         │
        │   /api/ai/generate-character-image          │
        └─────────────────────────────────────────────┘
                          ↓
        ┌─────────────────────────────────────────────┐
        │   步骤3：分镜图生成 (storyboard) [并行]      │
        │   /api/ai/generate-storyboard-image         │
        └─────────────────────────────────────────────┘
                          ↓
        ┌─────────────────────────────────────────────┐
        │   步骤4：剧情视频生成 (scenes) [并行]        │
        │   /api/ai/generate-story-video              │
        └─────────────────────────────────────────────┘
                          ↓
        ┌─────────────────────────────────────────────┐
        │   步骤5：完整视频合成 (video)                │
        │   /api/ai/fal/compose-story-video           │
        └─────────────────────────────────────────────┘

步骤详解

步骤 1：AI 剧情生成

• 输入：用户提示词、时长、比例、视频风格、视频模型、参考图
• 调 generate-story-details 生成结构化 JSON：标题、场景列表、角色列表（含主角描写与分镜/视频提示词）
• 内置分段时长规则：根据 videoModel 决定每段时长（Veo 固定 8s；Seedance 2.5 支持 4-30s；Seedance 2.0 系列 4-15s；Wan 2-15s 等）
• 解析时使用 tryParsePossiblyMalformedJson 兼容 LLM 输出的非严格 JSON

步骤 2：主角生成（并行）

• 对 scriptData.characters 中每个角色调用 generateCharacterForSingle
• 支持图生图：如果用户上传了角色参考图，会作为 referenceImage 传入
• 错误处理：积分不足、其他 API 错误、JSON 解析失败均有独立分支
• 实时状态：每个完成的主角立即更新到 UI（带失败覆盖层）

步骤 3：分镜图生成（并行）

• 调用 generateStoryboardForScene，对每个场景并行生成
• 智能角色筛选：只把该场景 characterIds 引用的角色图片传给分镜图生成
• 首尾帧模式（generationMode === 'first-last-frame'）：同时生成首帧和尾帧，使用 firstFramePrompt / lastFramePrompt
• 支持 regenerateFrameType 单帧重生成（仅重新生成首帧或尾帧）

步骤 4：剧情视频生成（并行）

• 调用 generateSceneVideoForScene，基于分镜图生成每个场景的视频
• 传递参数：aspectRatio、duration、videoStyle、videoModel
• 多模态参考：上传的视频/音频会作为 videoUrls / audioUrls 传入（仅 Seedance 模型支持）
• 首尾帧模式下，尾帧图作为 additionalImageUrls 传入
• 实时更新：每完成一段视频立即显示

步骤 5：完整视频合成

• 调用 composeSceneVideosWithFAL，使用 FAL AI 把所有剧情视频拼接为完整视频
• 计算每段视频的 keyframes（视频轨 + 音频轨）并合并
• 完整视频含总时长、缩略图、宽高比、文件大小

关键状态机

type WorkflowStep = 'idle' | 'script' | 'character' | 'storyboard' | 'scenes' | 'video'

每个步骤都有三种 UI 状态：当前（橙色高亮 + Loader）、已完成（绿色 ✓）、待开始（灰色）。

可中断 & 可恢复

工作流支持在任意步骤暂停和恢复：

• 暂停：积分不足时自动暂停，弹出购买弹窗；用户也可手动暂停
• 正在执行的 Pusher 任务：暂停时先等待所有进行中的异步任务完成（最多 60s），再调用 abortController.abort() 取消新请求
• 恢复：从中断的步骤继续（resumeWorkflow 按 workflowStep 分发），不丢失已有数据
• 项目恢复：通过 resumeProjectId + resumeVersionId 加载历史项目，按完成度自动跳转到下一步

版本组管理（versionGroupId）

每次重新生成（剧情/主角/分镜图/剧情视频/视频）都会生成新的 versionGroupId，用于：

• 关联同一批次的所有重新生成任务
• 数据库版本追踪
• 历史版本回溯（原版本不会被覆盖）

参数面板

UI 面板提供完整的生成参数控制：

媒体兼容性自动锁定：当用户上传了视频/音频时，自动锁定为 Seedance 模型（seedance2 / seedance2Fast / seedance2Mini / seedance25），其他模型被禁用。

媒体校验（validateSeedanceMedia）

上传视频/音频后，自动调用 probeMediaUrl 探测元数据并校验：

• 视频/音频数量 ≤ SEEDANCE_LIMITS.video.maxCount / audio.maxCount
• 总时长 ≤ maxTotalDuration
• 单个文件格式/尺寸符合 Seedance 限制

单个元素重新生成

工作流运行后，用户可针对每个元素重新生成：

实时状态更新

每完成一个元素立即更新 UI：

• 正在生成：半透明黑色蒙层 + Loader2 转圈
• 生成失败：红色蒙层 + 错误信息
• 生成成功：图片/视频立即显示

???? 项目管理

Magiviz 提供完整的项目生命周期管理体系，覆盖从创作、保存、版本追溯到成果导出的全部环节。

项目列表（/projects）

• 统一列表：集中展示用户的所有项目，支持缩略图预览、标题、状态、创建时间、进度百分比
• 状态标签：已完成（绿色 badge）/ 进行中（灰色 badge）一目了然
• 进度可视化：每个项目显示当前步骤（剧情/主角/分镜图/剧情视频/完整视频）的完成百分比
• 快速操作：列表项支持继续生成、查看详情、删除等快捷操作
• 过滤与搜索：按状态、模型、风格筛选，按关键词搜索项目标题

项目详情页（/projects/[id]，由 components/project-detail.tsx 实现）

详情页是一个多 Tab 复合视图，包括：

五步进度跟踪

详情页顶部展示五步进度条，每个步骤对应不同图标：

  ???? 剧情  →  ???? 主角  →  ????️ 分镜图  →  ???? 剧情视频  →  ✨ 完整视频

• 完成步骤：绿色 + 主色填充
• 当前步骤：高亮主色
• 待开始：灰色

进度数据由 useProject Hook 提供，进度百分比通过 getProgressPercentage 计算。

元信息记录

每个项目自动保存完整的生成参数，便于回溯与复现：

版本管理（versionGroupId + version）

Magiviz 实现了一套双层版本控制：

• versionGroupId：每次「重新生成」（剧情/主角/分镜图/剧情视频/总视频）会生成新的 versionGroupId，把同一批次的所有重新生成任务关联起来
• version：每个版本组内的具体版本号（自增整数），用于版本时间线展示

历史版本时间线（History Tab）

详情页的「历史版本」Tab 提供：

• 完整版本列表：显示版本号（v1、v2...）、创建时间、修改时间、是否当前查看
• 版本查看：点击 查看 按钮切换前端展示的数据（仅前端状态，不改变真实激活版本）
• 版本继续生成：未完成版本显示 继续生成 按钮
• 版本编辑：已完成版本显示 编辑 按钮，可跳转到创作页面
• 状态标识：高亮当前正在查看的版本

项目恢复（Resume Project）

当用户从项目列表点击未完成项目时：

1. 详情页会展示项目状态和当前进度
2. 点击 继续生成 跳转到 /create?projectId=xxx&versionId=yyy
3. AIFunction 组件通过 resumeProjectId + resumeVersionId props 接收参数
4. restoreProjectData 调用 /api/projects/:id 和 /api/projects/:id/data?version=:versionId 恢复全部数据
5. useEffect 根据完成度自动跳转到对应步骤：

缺主角图 → 跳到步骤 2（character）
缺分镜图 → 跳到步骤 3（storyboard）
缺剧情视频 → 跳到步骤 4（scenes）
缺完整视频 → 跳到步骤 5（video）
全部完成 → 显示「全部完成」提示

项目数据存储结构

每个项目版本在数据库中保存完整的生成结果：

{
  id: string,                  // 版本 ID
  projectId: string,           // 所属项目
  version: number,             // 版本号
  versionGroupId: string,      // 版本组 ID

  // 步骤 1：剧情
  scriptTitle: string,
  scriptDescription: string,
  scriptScenes: Scene[],       // 场景列表

  // 步骤 2：主角
  characterData: Character[],  // 角色列表（含 imageUrl）

  // 步骤 3：分镜图
  storyboardData: Storyboard[], // 分镜图列表（含 imageUrl、firstFrameUrl、lastFrameUrl）

  // 步骤 4：剧情视频
  sceneVideoData: SceneVideo[], // 剧情视频列表（含 videoUrl）

  // 步骤 5：完整视频
  finalVideoUrl: string,
  finalVideoThumbnail: string,
  finalVideoDuration: number,
  finalVideoSize: number,
}

素材库（/library）

独立的素材管理模块，集中管理用户上传的所有资源：

• 图片素材：用户上传的参考图、按时间倒序展示、缩略图预览、删除操作
• 视频素材：项目生成的剧情视频片段、最终视频
• 存储空间监控：顶部展示已用/总配额/可用空间进度条（按订阅等级不同）
• 引用追踪：每个素材显示被哪些项目使用
• 上传限额校验：单文件 ≤ 订阅计划限制（Trial 50MB / Pro 100MB / Annual 无限制）
• 存储校验：上传前调用 /api/library/storage 预检查剩余空间

一键导出

详情页每个素材都支持一键下载：

• 剧情 JSON：导出完整剧本结构（含 title、description、scenes）
• 主角图：PNG 格式下载，文件名包含角色名
• 分镜图：PNG 格式下载，支持首尾帧
• 剧情视频：MP4 格式下载，文件名包含场景信息
• 完整视频：MP4 格式下载，Kie.ai URL 自动转换为直链
• 下载进度：流式下载带进度反馈，失败时降级为浏览器直链下载

删除与归档

• 项目可一键删除（带确认弹窗）
• 删除会同时清理关联的所有素材数据
• 数据库层面使用级联删除保证一致性

???? 支付与积分系统

• 订阅计划：Trial（试用）、Pro（月付）、Annual（年付）三种方案
• 积分购买：灵活的积分充值系统，按量付费
• 积分折扣：订阅用户享受 67 折积分消耗优惠
• 消费记录：详细的积分使用历史和消费明细

???? 推荐与分销

• 推荐计划：通过推荐链接邀请好友，获得积分奖励
• 分销系统：加入推广计划，通过推广获得收益
• 提现功能：佣金可随时提现至账户

???? 用户系统

• 多种登录方式：邮箱密码、Google OAuth、GitHub OAuth
• 邮箱验证：注册验证、密码重置
• 个人资料：用户信息管理、账户安全设置
• 订阅管理：查看订阅状态、管理计费

????️ 管理员后台

• 用户管理：查看和管理所有用户、积分调整
• 订阅统计：订阅数据分析、收入报表
• 分销管理：推广订单、佣金结算
• 邮件订阅：Newsletter 管理

???? 国际化

• 多语言支持：中文、英文，可轻松扩展
• 本地化：完整的 UI 翻译和日期格式化
• 多语言 SEO：多语言 URL 和元数据优化

技术栈

前端

• Next.js 15 - React 全栈框架
• TypeScript - 类型安全
• Tailwind CSS - 原子化 CSS 框架
• Radix UI - 无障碍组件库
• next-intl - 国际化解决方案
• Framer Motion - 动画效果
• React Hook Form + Zod - 表单管理与验证

后端

• Next.js API Routes - 服务端 API
• NextAuth.js - 身份认证
• Drizzle ORM - 数据库 ORM
• PostgreSQL - 关系型数据库
• Stripe - 支付处理
• Resend - 邮件服务
• Pusher - 实时推送

AI 服务

• Kie.ai - 集成多个视频生成模型
• ZenMux - AI 剧情生成

快速开始

环境要求

• Node.js 18+
• PostgreSQL 数据库
• Stripe 账户
• Kie.ai API Key

1. 克隆项目

git clone <https://github.com/ItusiAI/Open-Magiviz>
cd Magiviz

2. 安装依赖

npm install

3. 配置环境变量

复制 .env.example 到 .env.local 并配置以下环境变量：

# 数据库
DATABASE_URL="postgresql://..."

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"

# Stripe
STRIPE_SECRET_KEY="sk_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# AI 服务
KIE_API_KEY="your-kie-api-key"
ZENMUX_API_KEY="your-zenmux-api-key"

4. 数据库设置

npm run db:push

5. 启动开发服务器

npm run dev

访问 http://localhost:3000

项目结构

├── app/
│   ├── [locale]/                 # 国际化路由
│   │   ├── page.tsx             # 首页
│   │   ├── create/             # 创作页面
│   │   ├── projects/            # 项目列表
│   │   ├── library/             # 素材库
│   │   ├── pricing/             # 价格页面
│   │   ├── profile/             # 个人资料
│   │   ├── auth/                # 认证页面
│   │   └── admin/              # 管理后台
│   └── api/
│       ├── ai/                  # AI 相关 API
│       │   ├── generate-story-details/   # 剧情生成
│       │   ├── generate-story-video/     # 视频生成
│       │   └── ...
│       ├── stripe/              # 支付 API
│       ├── admin/               # 管理 API
│       └── auth/                # 认证 API
├── components/
│   ├── operate.tsx              # 核心创作组件
│   ├── project-detail.tsx       # 项目详情
│   ├── sidebar.tsx              # 侧边栏
│   ├── ui/                      # UI 组件库
│   └── ...
├── lib/
│   ├── auth.ts                  # 认证配置
│   ├── db.ts                    # 数据库连接
│   ├── schema.ts                # 数据模型
│   ├── stripe.ts                # Stripe 配置
│   └── ...
├── messages/
│   ├── en.json                  # 英文翻译
│   └── zh.json                  # 中文翻译
└── public/                      # 静态资源

商业模式

订阅计划

积分套餐

积分消耗示例

API 接口

剧情生成

POST /api/ai/generate-story-details
{
  prompt: string,           // 故事大纲
  duration?: number,        // 时长
  aspectRatio?: string,     // 画面比例
  videoStyle?: string,      // 视频风格
  videoModel?: string,      // 视频模型
  userImages?: string[]     // 参考图片
}

视频生成

POST /api/ai/generate-story-video
{
  imageUrl?: string,              // 分镜图 URL
  prompt: string,                // 视频提示词
  aspectRatio?: string,          // 画面比例
  duration?: string,            // 视频时长
  videoModel?: string,          // 视频模型
  videoStyle?: string,          // 视频风格
  additionalImageUrls?: string[], // 额外图片（尾帧等）
  generationType?: string,       // 生成模式（仅 Veo）
  videoUrls?: string[],         // 参考视频（仅 Seedance）
  audioUrls?: string[]          // 参考音频（仅 Seedance）
}

部署指南

Vercel 部署（推荐）

1. Fork 本项目到 GitHub
2. 在 Vercel 中导入项目
3. 配置环境变量
4. 部署完成

环境变量清单

# 数据库
DATABASE_URL

# NextAuth
NEXTAUTH_URL
NEXTAUTH_SECRET

# Stripe
STRIPE_SECRET_KEY
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
STRIPE_WEBHOOK_SECRET
STRIPE_TRIAL_PRICE_ID
STRIPE_PRO_PRICE_ID
STRIPE_ANNUAL_PRICE_ID
STRIPE_POINTS_*

# OAuth
GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET
GITHUB_ID
GITHUB_SECRET

# AI 服务
KIE_API_KEY
KIE_VEO_WEBHOOK_URL
KIE_VIDEO_WEBHOOK_URL
ZENMUX_API_KEY

# 邮件服务
RESEND_API_KEY
RESEND_FROM_EMAIL

# 应用
NEXT_PUBLIC_APP_URL

安全特性

• 数据加密：密码 bcrypt 加密
• 会话管理：JWT 令牌和安全会话
• CSRF 保护：内置 CSRF 防护
• 输入验证：Zod 数据验证
• 环境隔离：敏感配置环境变量管理

SEO 优化

• 多语言 SEO 元数据
• 自动生成 sitemap.xml
• JSON-LD 结构化数据
• Open Graph 社交分享优化
• 图片自动优化

让每个人都能成为影视创作者

延伸阅读

Magiviz