基于大语言模型的动态图形实时控制平台

基于大语言模型的动态图形实时控制平台

基于大语言模型的动态图形实时控制平台

「基于大语言模型的动态图形实时控制平台」
/~4e3a3LqatM~:/
链接：https://pan.quark.cn/s/f1e94814d16a

✨ 项目亮点

"描述即所得，实时可控制"​ 的AI动态图形生成平台。用自然语言描述视觉效果，即可获得可执行渲染代码和可调整参数定义的Canvas 2D动态图形。实时调参，导出为视频或独立HTML — 在"生成与控制"的一体化工作流中创作专业级动态图形。

🎯 为什么开源

Neon是首个开源的、支持实时参数控制的AI动态设计工具（参考Higgsfield对Vibe Motion的定义；如果此声明不准确，请开Issue，我会立即更正）。

开源的契机是Higgsfield发布了他们的Vibe Motion产品 — 巧合的是，这与我在过去几周在BILIBILI上进行的工作高度契合。实际体验后，我发现与宣传相去甚远。作为付费产品，它远未达到可接受的水平，也远未触及Vibe Motion能力的上限。

因此，我将近期工作的基础版本开源，希望与社区共同探索Vibe Motion的未来。

推荐模型：Gemini 3.0 Flash / Gemini 3.1 Pro​ 或其他具备多模态能力的LLM。祝您玩得开心！

关于技术栈：这是一个纯前端应用。后端的存在仅用于代理LLM API请求以规避浏览器CORS限制。我不是专业前端工程师 — 如果您有更优雅的解决方案，欢迎提交PR。

💭 当前思考

目前的最佳工作流是使用Claude Code直接生成.neon草稿文件，然后在此基础上迭代。Claude Code的上下文工程非常出色 — 我一直在编写各种技能来探索这一方向。

总体而言，Vibe Motion作为一个品类仍处于玩具阶段 — 远未达到可交付产品的质量。以下是一些零散的观察和学习心得：

1. 渲染上限过低​ — 纯Canvas 2D + WebGL后处理仍然过于简单。添加Remotion和SVG支持可以显著提升教育/解说类动画的质量上限。

2. 3D效果欠佳​ — 早期尝试过Three.js；输出纯粹是玩具级，毫无惊艳可言。

3. 缺乏上下文管理​ — 诸如按需预设风格加载、迭代记忆等功能缺失。不过，Claude Code的技能系统可能是此工作流的完美替代方案。

4. 追求像素级复现是错误的​ — 曾投入时间开发动作复现技能；收益有限。LLM的价值不应在于高保真复现 — 而应在于批量生成：快速生成多种变体，然后进行筛选。

5. 缺少分阶段渲染​ — Neon目前难以自主形成分阶段/分步骤效果绘制的概念，导致简单提示下输出单调。

6. 流体模拟效果差​ — 流体模拟结果不理想。

🚀 快速开始

环境要求

• Node.js >= 18

• pnpm >= 8

安装与运行

pnpm install
pnpm dev

访问 http://localhost:5173启动应用。

其他命令

pnpm build       # 生产环境构建
pnpm lint        # 代码检查
pnpm test        # 运行测试
pnpm typecheck   # 类型检查
pnpm preview     # 预览生产构建

首次使用

1. 点击"设置"配置您的LLM API（任何OpenAI兼容的端点）

2. 在聊天面板输入动态效果描述，例如"一个赛博朋克风格的条形图，柱子从底部弹跳进入"

3. 画布实时预览生成效果

4. 在参数面板调整颜色、速度、资源等

5. 导出为视频、HTML资源包或.neon会话存档

🎨 核心功能

结构化生成

与传统AI视频工具输出静态、不可编辑的视频文件不同，Neon的LLM生成结构化动态定义(MotionDefinition)​ — 包含可执行的渲染函数、可调整的参数声明、时长配置和后处理链。每个生成结果都是"活"的：用户获得的不是死文件，而是实时可控的动态程序。

• 智能澄清​ — 当提示模糊时，AI在生成前会提出针对性问题，减少无效尝试

• 自动错误恢复​ — 运行时异常触发基于LLM的代码修复，最多尝试3次自我修复

自然语言提示 → [智能澄清] → LLM生成MotionDefinition → 渲染引擎实时播放
                                                            ↓
                                                  参数面板 ← 可调整参数声明
                                                            ↓
                                                  用户调整参数 → 实时更新 → 导出视频/HTML/会话存档

渲染引擎

Canvas 2D​ — 基于HTML5 Canvas 2D API构建。适用于平面动态图形、数据可视化、文字动画和粒子系统。

• 基于requestAnimationFrame的60fps实时渲染

• 内置可种子的PRNG — 相同参数产生逐帧一致的输出

• 支持图片和视频资源预加载与合成

后处理(GLSL)​ — 支持光晕、模糊、色彩校正、扭曲等的全屏着色器链。

参数类型

LLM根据效果语义智能声明可调整参数，用户通过参数面板实时调整：

类型	控件	典型用途
number	滑块	速度、尺寸、透明度
color	颜色选择器	主色调、背景色、描边色
select	下拉菜单	动画模式、字体样式
boolean	开关	显示/隐藏元素、启用效果
string	文本输入	标题文本、标签内容
image	图片上传	背景、Logo、纹理资源
video	视频上传	背景视频、画中画

效果时长并非固定 — LLM可生成durationCode表达式，从参数值（如视频长度）计算总时长，确保多资源组合时时间线准确。

📤 导出功能

视频

格式	模式	输出内容
MP4	RGB	单个.mp4文件
MP4	RGB + Alpha	包含RGB.mp4 + Alpha.mp4的ZIP，适合AE/Premiere合成
WebM	RGB	单个.webm文件

• 分辨率：720p / 1080p / 4K

• 帧率：24 / 30 / 60 fps

• 基于h264-mp4-encoder的逐帧编码，非屏幕录制

HTML资源包

一键导出为零依赖的.html文件，内含嵌入式渲染代码和资源。用户可选择公开哪些参数。可直接部署到Web，或交给开发者集成。

会话存档

完整对话（提示词、参数快照、附件）可导出为.neon文件，便于跨设备迁移、团队共享和版本备份。

🏗️ 技术栈

层级	技术
框架	React 18.3 + TypeScript 5.6
状态管理	Zustand 5.0
构建工具	Vite 6.0
样式	Tailwind CSS 3.4
2D渲染	Canvas 2D API
视频编码	h264-mp4-encoder 1.0
路由	React Router DOM 7.12
存储	localStorage + IndexedDB
LLM接口	OpenAI兼容API

📁 项目结构

src/
├── components/              # UI组件
│   ├── common/              # 通用组件（按钮、输入框、滑块、通知等）
│   ├── ChatPanel/           # 聊天面板（澄清、自动修复、多模态附件）
│   ├── PreviewCanvas/       # 实时预览画布（播放控制、性能监控）
│   ├── ParameterPanel/      # 参数面板
│   ├── DemoGallery/         # 效果演示画廊
│   ├── SettingsDialog/      # LLM配置对话框
│   └── ExportDialog/        # 导出对话框（视频/资源包）
├── services/                # 核心服务
│   ├── llm/                 # LLM客户端、提示工程、澄清、错误修复
│   ├── renderer/            # 渲染引擎（Canvas 2D/GLSL后处理）
│   ├── parameter/           # 参数管理（滑块、颜色选择器、下拉菜单等）
│   ├── exporter/            # 导出管道（逐帧渲染 → H.264 → MP4）
│   └── storage/             # 持久化存储（localStorage + IndexedDB）
├── stores/                  # Zustand状态管理
│   └── appStore.ts          # 全局应用状态
├── hooks/                   # 自定义钩子
├── utils/                   # 工具函数（可种子PRNG、代码验证等）
├── types/                   # TypeScript类型定义
└── App.tsx                  # 应用入口

🤝 贡献指南

欢迎贡献！请参阅CONTRIBUTING.md了解详细说明。

📄 许可证

MIT License - 详见LICENSE文件。

🌟 应用场景

🎯 专业设计

• 动态数据可视化​ - 为商业报告、仪表盘制作生动的图表动画

• 社交媒体内容​ - 快速生成短视频、GIF素材用于社交平台

• 品牌动画​ - 创建Logo动画、品牌元素动态效果

• 产品演示​ - 制作产品功能展示动画

🎓 教育与内容创作

• 教学动画​ - 为复杂概念创建可视化解释动画

• 科普内容​ - 制作科学原理、历史事件的动态演示

• 演示文稿​ - 为PPT/Keynote增强动画效果

• 电子书互动​ - 为数字出版物添加交互动画

🎬 视频制作

• 开场动画​ - 快速制作视频片头、转场效果

• 标题字幕​ - 创建动态文字标题和字幕条

• 特效元素​ - 生成粒子、光效、背景动画

• 模板制作​ - 作为After Effects/Blender的补充工具

🖥️ 前端开发

• 网页动画​ - 为网站创建引人注目的背景动画

• 加载动画​ - 制作独特的加载状态指示器

• 交互动效​ - 为UI元素添加响应用户操作的效果

• 创意实验​ - 探索新颖的Web动画可能性

🎯 优势特点

与传统AI视频工具对比

特性	Neon	传统AI视频工具
实时交互	✅ 支持	❌ 仅输出静态文件
参数控制	✅ 完整参数面板	⚠️ 有限控制
代码输出	✅ 可编辑代码	❌ 不可编辑
精度控制	✅ 像素级控制	⚠️ 随机性高
导出格式	✅ 多格式	✅ 通常支持
上下文记忆	✅ 完整会话	⚠️ 有限

与传统动画工具对比

特性	Neon	AE/Blender/专业工具
学习曲线	几分钟	数周至数月
描述性创作	自然语言描述	手动关键帧调整
迭代速度	数秒	数分钟至数小时
代码生成	自动生成	需手动编写
专业性	中等	专业级
成本	免费/低成本	高额许可费

🔧 配置指南

LLM API设置

Neon支持任何OpenAI兼容的API端点：

// 示例配置
{
  endpoint: "https://api.openai.com/v1/chat/completions",  // 或自定义端点
  model: "gpt-4-turbo",  // 支持的模型
  apiKey: "sk-...",       // 您的API密钥
  temperature: 0.7,       // 创意度
  maxTokens: 4000         // 最大输出长度
}

本地部署

1. 克隆仓库：

git clone https://github.com/yourusername/neon.git
cd neon

1. 安装依赖：

pnpm install

1. 配置环境变量：

cp .env.example .env.local
# 编辑.env.local文件添加您的API密钥

1. 启动开发服务器：

pnpm dev

生产部署

# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview

# 部署到Vercel (推荐)
vercel deploy

🎨 使用技巧

提示词优化

• 具体明确："一个蓝色的粒子系统，粒子会随着音乐节奏移动" 优于 "一个动画"

• 指定风格："赛博朋克风格的数据图表"、"水墨风格的文字动画"

• 包含参数："速度可调节的旋转动画"、"颜色可变的背景渐变"

• 分步骤描述：复杂效果可拆分为多个步骤描述

参数调优

• 逐步调整：从基础参数开始，逐步调整细节

• 组合使用：多个参数的组合可产生意想不到的效果

• 保存预设：喜欢的参数组合可保存为预设快速调用

• 实时预览：调整参数时实时查看效果变化

导出建议

• HTML资源包：适合网页展示，文件小加载快

• MP4+Alpha：需要透明背景的视频合成

• 高帧率：动态效果丰富时使用60fps

• 适中分辨率：1080p适用于大多数场景

🐛 故障排除

常见问题

1. 画布不显示：检查浏览器控制台，确保API密钥正确

2. 生成失败：尝试降低提示词复杂度，分步描述

3. 性能问题：降低分辨率，关闭不必要的后处理效果

4. 导出失败：检查磁盘空间，确保有足够内存

调试模式

启用调试模式获取详细日志：

// 在浏览器控制台输入
localStorage.setItem('neon_debug', 'true')
// 刷新页面查看详细日志

📈 路线图

近期计划

• [ ] Remotion渲染器集成

• [ ] SVG动画支持

• [ ] 预设样式库

• [ ] 社区效果市场

• [ ] 协作编辑功能

中期目标

• [ ] 3D渲染支持（Three.js集成）

• [ ] 音频响应动画

• [ ] 时间线编辑器

• [ ] 插件系统

• [ ] 多平台SDK

长期愿景

• [ ] 实时协作平台

• [ ] AI风格迁移

• [ ] 物理模拟集成

• [ ] 跨平台应用

• [ ] 企业级功能

🌍 社区与支持

获取帮助

• 📖 文档​ - 详细使用指南

• 💬 Discord社区​ - 实时交流与支持

• 🐛 GitHub Issues​ - 报告问题与功能请求

• 💡 讨论区​ - 分享想法与技巧

贡献者

感谢所有贡献者！查看贡献者名单。

支持项目

如果您发现Neon有用，请考虑：

• ⭐ 在GitHub上给项目点赞

• 📢 在社交媒体上分享

• 💻 提交代码贡献

• 🐛 报告问题

• 📖 改进文档

📄 许可证

MIT许可证 - 详见LICENSE文件。

📞 联系方式

• 项目维护者：[您的姓名]

• 邮箱：your.email@example.com

• Twitter：@yourhandle

• 项目主页：neon-vibe-motion.vercel.app

---

立即开始创作​ → 在线体验| 本地运行| 查看案例

"让每个人都能成为动态图形设计师"