AI 课程视频生产管线
项目概览
这个项目围绕《AI 应用入门：从模型到智能体》第一课，搭建了一套课程视频生产管线。核心产物包括课程脚本、PPT、旁白 MP3、字幕、场景时间轴、同步渲染数据和质检截图。
项目基于 HyperFrames 的 HTML-native 视频思路，把课程页面写成可 seek、可预览、可截图核验的互动式视频 composition。它不是单纯做一份 PPT，而是把脚本、视觉、声音和字幕对齐成一条可复用的内容生产流程。
访问入口
上方“观看演示”入口是本地整理后的课程视频页面。它可以在浏览器中预览课程结构、旁白音频、字幕区、安全边距和 slide 动效。
项目介绍视频口径
这段视频可以直接作为作品介绍：
- 先说明课程主题：帮助新手理解模型、智能体和 AI 从回答问题到完成任务的演进。
- 展示 PPT 页面，说明它不是静态课件，而是能和旁白、字幕、动效同步的 HTML composition。
- 展示
script.md、scenes.json、captions.json和video-data.js，说明内容生产链路。 - 展示质检截图 contact sheet，说明每个关键时间点都能检查画面是否合格。
- 总结价值：把 AI 课程制作从“手工剪视频”变成“结构化脚本 + 可复核渲染管线”。
我的工作
- 编写并整理第一课课程脚本，主题为“模型是大脑，智能体是身体”。
- 将课程内容拆成开头、概念讲解、能力台阶、后续规划和结尾总结。
- 基于 PPT 视觉重建视频页面，保持浅色课程风格、字幕安全区和轻量镜头运动。
- 整理旁白音频、字幕、场景时间轴和同步渲染数据，形成可复核的课程视频结构。
- 使用关键帧截图和 contact sheet 做视觉质检，检查画面、字幕和节奏是否稳定。
具体效果呈现
- 形成一套完整课程产物：PPT、脚本、旁白、字幕、时间轴、预览页面和质检截图。
- 页面总时长约 791 秒，覆盖完整一节 AI 入门课。
- 字幕区预留底部 140px 安全区域，避免字幕遮挡主视觉。
- 通过脚本对齐字幕，解决本地转写工具缺失时仍能生成可用字幕的问题。
- 课程内容从概念讲解落到使用路径：一问一答、多轮对话、Prompt、计划、Agent、Skills、协作系统。
技术栈
- 视频框架：HyperFrames
- 页面：HTML、CSS、JavaScript、GSAP
- 内容资产：PPT、旁白 MP3、字幕 JSON、场景 JSON
- 质检：关键帧截图、contact sheet、字幕安全区检查
展望与规划
- 将这一套流程沉淀成 AI 课程生产 SOP，支持后续连续课程复用。
- 补充自动转写、字幕校对和 BGM 资产管理。
- 增加封面、片头、片尾和短视频切片导出能力。
- 把课程脚本、PPT 和渲染数据统一归档，形成可迭代的知识产品管线。