PPT2HTML Agent Demo

一个基于 Next.js 的 PPTX 转 HTML 互动课件 Agent Demo。

项目目标不是像素级复刻 PowerPoint，而是把 PPTX 中的文本与素材抽取出来，重建成一份 基本一致、审美稳定、可编辑、可导出 的 HTML 课件。

特性

• 上传 .pptx 后端解析，不在前端使用 PPTXjs。
• 抽取 PPT 文本、图片、音视频等素材。
• 使用 visual-rebuild Skill 生成美观可编辑的课件 AST。
• 使用 HTML renderer 将 AST 渲染成可预览课件。
• 支持对话式修改文字、样式和基础动效。
• 导出 ZIP，包含 index.html、deck.json、assets/*、manifest.json、changes.json。
• 支持 DeepSeek OpenAI-compatible API。

技术路线

当前默认路线是 美观可编辑重建模式：

PPTX
-> ppt-analyze: 解压并解析 Office Open XML，抽取文本与素材
-> visual-rebuild: 根据内容和素材重建 CoursewareDeck AST
-> courseware-renderer: 将 AST 渲染为 HTML
-> deck-edit: 根据用户指令修改 AST，再重新渲染 HTML

这与传统的“PPT 底层 XML 逐元素翻译成 HTML”不同。它更关注：

• 页面稳定性
• 视觉一致性
• 可编辑性
• 后续 Agent 修改能力

项目结构

src/app/page.tsx                      # 单页 Demo UI
src/app/api/convert/route.ts          # PPTX 转课件
src/app/api/edit/route.ts             # 对话式编辑
src/app/api/export/route.ts           # ZIP 导出
src/lib/agent-skills/ppt-analyze.ts   # PPTX 结构与素材解析
src/lib/agent-skills/visual-rebuild.ts # 美观可编辑 AST 重建
src/lib/agent-skills/courseware-renderer.ts # AST -> HTML
src/lib/agent-skills/deck-edit.ts     # AST 结构化编辑
src/lib/agent-skills/export-package.ts # 导出包生成
src/lib/agent-skills/types.ts         # 核心数据结构

环境变量

复制 .env.example 为 .env：

cp .env.example .env

填写：

DEEPSEEK_API_KEY=your_api_key
DEEPSEEK_MODEL=deepseek-v4-pro

.env 已在 .gitignore 中排除，不会提交到仓库。

本地开发

安装依赖：

npm install

启动开发服务：

npm run dev

打开：

http://localhost:3000

验证

npm run lint
npm run build

导出格式

导出的 ZIP 包含：

index.html        # 可直接打开的 HTML 课件
deck.json         # 结构化课件 AST
assets/           # 图片、音频、视频等资源
manifest.json     # 课件元信息
changes.json      # Agent 修改记录

当前边界

• 不追求 PPT 像素级复刻。
• 复杂动画、SmartArt、图表、母版细节不会完整还原。
• 重点是生成稳定、可演示、可继续对话编辑的 HTML 课件。
• 若需要严格高保真，可后续增加“截图背景兜底模式”。