IAmDirector：让每个人都能成为AI视频导演

背景：从"想拍电影"到"真的拍出来"，只差一个工具

想象这样一个场景：你在咖啡馆里灵光一现，想到一个绝妙的微电影创意——也许是一段关于城市凌晨4点的诗意的城市风光，也许是两个陌生人在地铁里交换眼神的浪漫邂逅。你想把这个想法变成一段视频，发到社交媒体上。

但现实是，传统的视频创作需要剧本、演员、拍摄、剪辑……每一步都是门槛。大多数人的创意，最终只停留在脑子里。

IAmDirector 就是来解决这个问题的。这是一个基于生成式AI的文生视频Web平台，用户只需要输入一段文字描述，AI就能帮你生成完整的视频剧本，再把剧本转化成视频。整个流程，从创意到成片，在浏览器里就能完成。

IAmDirector Logo 图1：IAmDirector 项目Logo

项目起源：为什么需要这样一个前端？

2024年初，Sora等文生视频模型引发了行业地震。但真正的问题是：模型有了，如何让普通用户用起来？

当时市面上的生成式AI视频平台普遍存在两个问题：

前端简陋：大多数只是一个输入框+生成按钮，没有任何编辑能力
缺乏剧本工作流：用户直接输入提示词生成视频，效果难以控制

开发者 JiaqiLi404 注意到这个缺口，决定开源一个完整的前端参考实现。这个项目使用 NextJS 构建，目标是成为"文生视频平台的模板"，帮助开发者快速搭建自己的AI视频创作平台。

核心功能：从文字到视频的四步流水线

第一步：GPT生成视频剧本

用户不需要自己写剧本。系统集成了多个大语言模型后端：

OpenAI GPT：通用能力强，生成质量稳定
百度千帆大模型：中文语境理解优秀
智谱ChatGLM：开源友好，本地部署可行

用户输入一个电影主题或创意描述，GPT会生成包含场景描述、角色对话、镜头语言的分镜剧本。这个剧本不只是文字，还会以可视化时间轴的形式呈现在编辑器中。

剧本生成界面 图2：GPT生成视频剧本界面

第二步：编辑器精细调控

项目内置了一个基于 Fabric.js 的可视化编辑器。Fabric.js 是一个强大的Canvas图形库，广泛用于在线设计工具（如Figma、Polotno的核心渲染引擎）。

在这个编辑器中，用户可以：

调整每个镜头的画面构图
添加文字标注和特效
预览镜头切换效果
控制时间轴和时长

这意味着AI生成的剧本不是"直接出片"，而是可以二次编辑的中间产物。用户既享受了AI的效率，又保留了创作的控制权。

第三步：文生视频生成

剧本编辑完成后，接入视频生成API。早期版本集成的是 Fliki.ai，这是一家专注于AI视频生成的SaaS平台，可以根据剧本自动选择素材、配音和字幕。

但这里有个值得关注的插曲：Fliki在近期关闭了API接口，导致视频生成功能暂时不可用。作者在README中提到另一个备选方案 StableDiffusionAPI，但每月147美元的成本让人望而却步。

这个问题实际上是整个AI视频生成行业的缩影——API服务商的政策变动会直接影响依赖它们的开源项目。

视频生成界面 图3：视频生成工作流

第四步：作品导出与展示

生成的视频可以导出为常见格式（MP4等），也可以直接在平台内置的作品展示页发布。

技术架构：NextJS生态下的模块化设计

从代码结构来看，这是一个非常典型的现代Web应用：

/client
  /src
    /app          # NextJS App Router 路由
    /api          # API请求封装 (director.ts, user.ts)
    /components   # React组件 (Editor, Menu, Resources, TimeLine)
    /store        # 状态管理 (Store.ts)
    /auth         # 认证模块
    /utils        # 工具函数 (fabric-utils, request)
  /next-video     # 视频处理相关 (webpack-loader, providers)
  /public         # 静态资源 (图片等)

技术选型要点：

技术	用途	说明
NextJS 14+	框架	使用App Router，是当前React全栈开发的主流选择
TypeScript	语言	类型安全，编辑器级别的代码质量
Fabric.js	Canvas编辑器	前端可视化编辑的核心库
Tailwind CSS	样式	原子化CSS，快速构建响应式UI
Mux / Vercel Blob	视频存储	专业的视频托管与流媒体服务
S3 / Backblaze B2	对象存储	支持多种云存储后端
Webpack Loader	构建增强	自定义loader处理视频资源

next-video 子模块尤其值得注意：这是一个完整的视频上传、处理、转码解决方案，包含了多个主流视频服务商（AWS Mux、Cloudflare Stream、Vercel Blob、Backblaze、亚马逊S3）的适配器。这种多provider架构确保了开发者可以根据成本和地区选择最优的存储方案。

部署体验：前端门槛低，但后端依赖是痛点

优点

零容器依赖：没有Dockerfile，直接npm install即可
熟悉的开发模式：标准的NextJS项目，文档丰富
环境变量配置简单：只需配置几个API Key

缺点

没有Docker支持：生产环境部署需要自己写Dockerfile
后端依赖外部API：视频生成依赖Fliki/OpenAI等服务商，不付费无法完整使用
汉化但不完美：网站是中文的，但手机号登录对海外用户不友好

部署步骤

# 1. 克隆项目
git clone https://github.com/JiaqiLi404/IAmDirector-Text2Video-NextJS-Client.git
cd IAmDirector-Text2Video-NextJS-Client/client

# 2. 安装依赖
npm install --force

# 3. 配置环境变量（复制 .env.development 并填入API Key）
cp .env.development .env.local

# 4. 启动开发服务器
npm run dev

当前局限与行业思考

Fliki API关闭的影响

这是本项目最直接的挑战。当依赖的外部服务不可用时，整个视频生成链路就断了。作者承认目前视频生成功能"暂时无法使用"，但项目的前端代码依然有开源价值。

这种困境在AI应用层很常见——基础设施层的变动会直接影响应用层的稳定性。对于开发者来说，有几个应对策略：

多provider兜底（不要只依赖一家）
使用开源自托管方案（如使用本地部署的Stable Diffusion视频模型）
关注API成本，选性价比最高的方案

与竞品的对比

特性	IAmDirector	有言	Runway
开源	✅ 前端开源	❌	❌
中文支持	✅ 深度	✅ 深度	一般
自托管	✅ 可行	❌	❌
文生视频效果	受限(Fliki关闭)	专业级	专业级
编辑器能力	中等	专业	专业

总结：前端模板价值大于完整产品

IAmDirector 最核心的价值，不是一个完整的视频生成产品，而是一个可参考的前端架构模板。

对于想搭建AI视频创作平台的开发者来说，这个项目的价值在于：

完整的NextJS + TypeScript + Fabric.js技术栈参考
多LLM后端集成的最佳实践
视频上传、转码、托管的完整工作流
从剧本生成到视频编辑的完整UX流程设计

如果你正在做AI视频相关的创业，或者想研究生成式AI的Web前端架构，这个项目值得clone下来细读。当Fliki或其他视频生成API恢复服务后，这个平台就能完整运转起来——而在此之前，它的代码本身就是最好的学习素材。

数据来源：GitHub仓库 (stars: 194, JavaScript, NextJS)、项目README、web_search综合整理

IAmDirector：让每个人都能成为AI视频导演

背景：从"想拍电影"到"真的拍出来"，只差一个工具

但现实是，传统的视频创作需要剧本、演员、拍摄、剪辑……每一步都是门槛。大多数人的创意，最终只停留在脑子里。

IAmDirector Logo 图1：IAmDirector 项目Logo

项目起源：为什么需要这样一个前端？

2024年初，Sora等文生视频模型引发了行业地震。但真正的问题是：模型有了，如何让普通用户用起来？

当时市面上的生成式AI视频平台普遍存在两个问题：

前端简陋：大多数只是一个输入框+生成按钮，没有任何编辑能力
缺乏剧本工作流：用户直接输入提示词生成视频，效果难以控制

核心功能：从文字到视频的四步流水线

第一步：GPT生成视频剧本

用户不需要自己写剧本。系统集成了多个大语言模型后端：

OpenAI GPT：通用能力强，生成质量稳定
百度千帆大模型：中文语境理解优秀
智谱ChatGLM：开源友好，本地部署可行

剧本生成界面 图2：GPT生成视频剧本界面

第二步：编辑器精细调控

项目内置了一个基于 Fabric.js 的可视化编辑器。Fabric.js 是一个强大的Canvas图形库，广泛用于在线设计工具（如Figma、Polotno的核心渲染引擎）。

在这个编辑器中，用户可以：

调整每个镜头的画面构图
添加文字标注和特效
预览镜头切换效果
控制时间轴和时长

这意味着AI生成的剧本不是"直接出片"，而是可以二次编辑的中间产物。用户既享受了AI的效率，又保留了创作的控制权。

第三步：文生视频生成

剧本编辑完成后，接入视频生成API。早期版本集成的是 Fliki.ai，这是一家专注于AI视频生成的SaaS平台，可以根据剧本自动选择素材、配音和字幕。

这个问题实际上是整个AI视频生成行业的缩影——API服务商的政策变动会直接影响依赖它们的开源项目。

视频生成界面 图3：视频生成工作流

第四步：作品导出与展示

生成的视频可以导出为常见格式（MP4等），也可以直接在平台内置的作品展示页发布。

技术架构：NextJS生态下的模块化设计

从代码结构来看，这是一个非常典型的现代Web应用：

/client
  /src
    /app          # NextJS App Router 路由
    /api          # API请求封装 (director.ts, user.ts)
    /components   # React组件 (Editor, Menu, Resources, TimeLine)
    /store        # 状态管理 (Store.ts)
    /auth         # 认证模块
    /utils        # 工具函数 (fabric-utils, request)
  /next-video     # 视频处理相关 (webpack-loader, providers)
  /public         # 静态资源 (图片等)

技术选型要点：

技术	用途	说明
NextJS 14+	框架	使用App Router，是当前React全栈开发的主流选择
TypeScript	语言	类型安全，编辑器级别的代码质量
Fabric.js	Canvas编辑器	前端可视化编辑的核心库
Tailwind CSS	样式	原子化CSS，快速构建响应式UI
Mux / Vercel Blob	视频存储	专业的视频托管与流媒体服务
S3 / Backblaze B2	对象存储	支持多种云存储后端
Webpack Loader	构建增强	自定义loader处理视频资源

部署体验：前端门槛低，但后端依赖是痛点

优点

零容器依赖：没有Dockerfile，直接npm install即可
熟悉的开发模式：标准的NextJS项目，文档丰富
环境变量配置简单：只需配置几个API Key

缺点

没有Docker支持：生产环境部署需要自己写Dockerfile
后端依赖外部API：视频生成依赖Fliki/OpenAI等服务商，不付费无法完整使用
汉化但不完美：网站是中文的，但手机号登录对海外用户不友好

部署步骤

# 1. 克隆项目
git clone https://github.com/JiaqiLi404/IAmDirector-Text2Video-NextJS-Client.git
cd IAmDirector-Text2Video-NextJS-Client/client

# 2. 安装依赖
npm install --force

# 3. 配置环境变量（复制 .env.development 并填入API Key）
cp .env.development .env.local

# 4. 启动开发服务器
npm run dev

当前局限与行业思考

Fliki API关闭的影响

这种困境在AI应用层很常见——基础设施层的变动会直接影响应用层的稳定性。对于开发者来说，有几个应对策略：

多provider兜底（不要只依赖一家）
使用开源自托管方案（如使用本地部署的Stable Diffusion视频模型）
关注API成本，选性价比最高的方案

与竞品的对比

特性	IAmDirector	有言	Runway
开源	✅ 前端开源	❌	❌
中文支持	✅ 深度	✅ 深度	一般
自托管	✅ 可行	❌	❌
文生视频效果	受限(Fliki关闭)	专业级	专业级
编辑器能力	中等	专业	专业

总结：前端模板价值大于完整产品

IAmDirector 最核心的价值，不是一个完整的视频生成产品，而是一个可参考的前端架构模板。

对于想搭建AI视频创作平台的开发者来说，这个项目的价值在于：

完整的NextJS + TypeScript + Fabric.js技术栈参考
多LLM后端集成的最佳实践
视频上传、转码、托管的完整工作流
从剧本生成到视频编辑的完整UX流程设计

数据来源：GitHub仓库 (stars: 194, JavaScript, NextJS)、项目README、web_search综合整理