项目

AI Video Studio

暗黑影视工作站风格的 AI 视频创作平台:从剧本、分镜、素材到成片的一条链路,Next.js 15 + Prisma + Supabase 全栈实现。

wip
  • Next.js 15
  • React 19
  • TypeScript
  • Prisma
  • Supabase
  • Tailwind

AI Video Studio 想把「一个想法 → 一条片子」的过程收进一个工作区里: 剧本生成 → 分镜设计 → 图片素材 → 视频素材 → 时间轴 → 项目管理 → 作品分享。

它解决的不是「AI 能不能生成画面」,而是生成出来的东西往哪儿放、怎么改、怎么复用。 单独用聊天窗口生成几段素材谁都会,难的是第七次修改时还能找到第一版。

技术选型

层 技术
前端 Next.js 15 App Router / React 19 / TypeScript
样式 TailwindCSS / shadcn-ui / Framer Motion
状态 Zustand + React Query
后端 Next.js Server Actions / Supabase
数据 PostgreSQL + Prisma
AI OpenAI / Claude / Replicate SDXL / Runway / Kling
部署 Vercel / Supabase / Cloudflare

选 Server Actions 而不是单独的后端服务,是为了让「一次生成」这种长链路操作 不必在前端和后端之间来回定义接口。

工作区拆分

app/(marketing)/     落地页、隐私与条款
app/(auth)/          登录、注册
app/(app)/dashboard  项目列表与工作台
app/(community)/     作品流、帖子、个人主页
components/
  editor/            剧本编辑器、小说分析
  storyboard/        分镜画布
  timeline/          时间轴
  assets/            生成素材与上传素材

(marketing) (auth) (app) (community) 是四个路由组: 它们共享一个根布局,但各自有自己的 loading 与 error 边界。 这样工作台里一次生成失败,不会把落地页也带崩。

Demo 模式

项目可以在没有数据库的情况下跑完整条链路:内存存储换成 JSON 文件持久化, 十几个 Server Action 统一接自动保存,重启服务不丢数据。

现状

  • 账号体系与中间件路由保护
  • 剧本编辑器:全字段可编辑、版本历史、内联重命名
  • 上传小说并分析世界观 / 角色 / 大纲 / 场景
  • 分镜生成与分镜画布
  • 素材模块:生成素材、上传素材、批量下载
  • Demo 模式(无需数据库)
  • 时间轴与成片导出
  • 多租户与团队协作权限
  • 换成真实 AI 服务的成本面板(先知道要花多少钱)

最后更新: 提交 f0a1437