我们用1万行Vue3代码，做了款开源AI PPT项目

徐小夕
0 阅读6分钟

今天和大家聊聊，我们做的开源AI PPT项目。

图片

写这篇文章之前也在掘金提前和大家聊过，我们为什么会开源这个项目。一方面是因为我们团队目前会聚焦于打磨和迭代 JitWord 这款AI办公解决方案；另一方面，我们希望能通过开源，得到更多用户的正式需求反馈，方便我们更好的迭代产品。

图片

这款AI PPT项目，我们应用了目前市面上比较流行的AI技术方案，比如：

  • AI SKills 技能
  • MCP服务
  • 通用LLM模型适配器方案设计
  • PPT可视化编辑解决方案
  • AI语音识别方案
  • 基于Coze工作流设计PPT生成Agent编排
  • Canvas绘制PPT能力

如果大家感兴趣，可以在 github 上研究参考：

github：github.com/jitOffice/a…

演示地址：ppt.jitword.com/jit-slide

接下来我就和大家详细介绍一下我们开发的这款AI PPT项目的功能亮点和核心技术实现。

JitPPT项目介绍

图片

AIPPT 是一款功能丰富的开源 AI 演示文稿编辑器，让我们在数秒内创建精美的幻灯片。它在浏览器中直接集成了主流大语言模型——DeepSeek、GPT、Claude、Gemini、Kimi、通义千问等——并支持零后端模式，可立即在本地使用。

大家在项目的全局环境变量中可以配置自己的AI 模型，即可实现AI生成PPT。

图片

核心亮点我总结如下，供大家参考：

功能说明
🤖 多模型支持DeepSeek、OpenAI、Claude、Gemini、Kimi、通义千问、智谱 GLM、豆包、Grok、MiniMax——均使用您自己的 API Key
⚡ AI 幻灯片生成一句话描述即可生成完整演示文稿，实时流式预览
🎨 可视化幻灯片编辑器拖拽画布、丰富格式化、ECharts 图表、思维导图、表格
📊 智能图表识别自动检测数据结构并推荐最佳图表类型
🔊 AI 语音助手基于讯飞 ASR 的语音转文字编辑功能
🌍 国际化（8 种语言）简体中文、繁體中文、English、日本語、한국어、Bahasa、ไทย、Tiếng Việt
🔌 自定义 LLM 接口接入任意兼容 OpenAI 格式的 API 端点
📤 多格式导出通过 jsPDF 和 PptxGenJS 导出为 PDF、PPTX、PNG/图片
🧩 智能体架构分层 AI 智能体系统（Core / Memory / Skills），支持扩展 AI 功能
🔒 隐私优先API Key 仅存储在浏览器 localStorage 中，绝不发送至我们的服务器

我们提供了完整的PPT解决方案，大家可以基于我们的设计进行二次开发，对接自己的后台服务来实现AI PPT产品。

具体模块介绍如下：

  1. 精美的登录注册模块

图片

  1. AI PPT的入口管理模块

图片

  1. AI生成PPT模块

图片图片

  1. PPT可视化编辑模块

图片

我们可以在线编辑PPT，对每张PPT做排版，同时也支持非常丰富的PPT组件和模块：

  1. PPT布局模版

图片

布局模版我们内置了几个基础布局，大家可以扩展来实现快速设计PPT页面的效果。

  1. PPT支持一件嵌入媒体素材

图片

我们可以上传各种平台的视频，音频等，让PPT演示更生动。

  1. 支持嵌入自定义表格/形状素材

图片

  1. 支持嵌入可视化图表

图片

图表是PPT报告的非常重要的一个功能，目前我们内置了8个可视化图表，大家也可以基于我们的方案进行扩展。

如果大家想二次开发，肯定比较关注技术栈，那接下来详细和大家分享一下我们开源的JitPPT的核心技术方案。

核心技术栈清单

前端核心技术栈

  • Vue 3 + Composition API + <script setup>
  • Vite 5 — 极速开发服务器和构建工具
  • TypeScript — 类型安全的 composables 和工具函数
  • Pinia — 轻量级状态管理
  • Vue Router 4 — 带权限守卫的 SPA 路由

UI 与样式

  • Arco Design Vue — 企业级组件库
  • UnoCSS — 原子化 CSS 引擎
  • Konva.js — 幻灯片编辑器的 Canvas 渲染
  • Iconify — 20 万+ 统一图标库

AI 与大模型

  • 流式 SSE — 通过 fetch + ReadableStream 实现实时 Token 流
  • 智能模型路由 — 根据任务上下文自动选择最优模型
  • 多提供商架构 — OpenAI 兼容 API 抽象层
  • 智能体系统 — 核心编排器 + 上下文记忆 + 技能注册表

组件方案

  • ECharts 5.5 — 交互式数据可视化
  • AntV G2 — 声明式图表
  • Mind Elixir — 思维导图编辑器
  • Tiptap — 支持数学/LaTeX 的富文本编辑
  • KaTeX — 快速 LaTeX 数学公式渲染
  • Mermaid — 流程图与图表支持
  • highlight.js + Shiki — 代码语法高亮

导出

  • jsPDF — PDF 导出
  • PptxGenJS — PPTX 导出
  • html2canvas + html-to-image — 幻灯片截图

下面再来和大家分享一下AI PPT的核心功能设计。

技术实现

图片

我们的 AIPPT 项目是一个纯前端应用，核心设计目标是：

  • 零后端依赖可用用户只需填写 LLM API Key 即可完整使用
  • 多 LLM 兼容所有主流 OpenAI-compatible 接口统一抽象
  • 模块化可扩展新增 LLM 提供商或 AI 技能只需增加配置

所有 LLM 提供商通过统一的 ProviderConfig 接口描述，位于 src/utils/ai/providers.ts。

支持的提供商及其 baseUrl：

提供商baseUrl
DeepSeekhttps://api.deepseek.com/v1
OpenAIhttps://api.openai.com/v1
Claudehttps://api.anthropic.com/v1
Geminihttps://generativelanguage.googleapis.com/v1beta/openai
Kimihttps://api.moonshot.cn/v1
Qwenhttps://dashscope.aliyuncs.com/compatible-mode/v1
GLMhttps://open.bigmodel.cn/api/paas/v4
Doubaohttps://ark.cn-beijing.volces.com/api/v3
Grokhttps://api.x.ai/v1
MiniMaxhttps://api.minimaxi.com/v1
Custom用户自定义

新增提供商只需在 PROVIDERS 对象中添加一条配置即可，无需修改任何其他代码。

1. 流式生成核心：streamGenerate

src/utils/ai/index.ts 导出的 streamGenerate 是整个 AI 调用的统一入口；

2. SSE 流式解析

src/utils/ai/openaiStream.ts 实现标准 OpenAI SSE 协议解析：

支持 AbortController 中断，用户可随时停止生成。

3. 智能模型路由

src/utils/ai/modelRouter.ts 根据任务类型自动选择最优模型：

image.png

设计原则：复杂推理任务用 DeepSeek（准确度优先），实时交互任务用 MiniMax Lightning（速度优先）。

4. Canvas 渲染引擎

图片

幻灯片编辑器基于 Konva.js 构建：

  • vue-konva 将 Konva 对象包装为 Vue 组件
  • 每个幻灯片元素（文本框/图片/形状）是一个 Konva Group
  • 拖拽、缩放、旋转通过 Konva Transformer 实现
  • 多选操作通过 Ctrl+Click 更新 selectedIds 数组

大家可以在我们项目里学习如何使用 Canvas 来实现高性能可视化编辑器。5. Agent 的三层设计架构

AgentOrchestrator (core/)
    │  接收用户请求，协调各层
    │
    ├── ContextManager (memory/)
    │      存储对话历史 + 当前幻灯片上下文
    │
    └── SkillRegistry (skills/)
           注册并管理所有 AI 技能
               ├── TextOptimizationSkill
               ├── ImageGenerationSkill
               ├── ChartGenerationSkill
               ├── LayoutOptimizationSkill
               └── IntelligentLayoutSkill

这里我们采用了最近比较流行的Skills方案，可以在 src/agents/skills/implementations/ 创建新文件（skill）：

image.png

在 AgentOrchestrator.ts 的 registerSkills() 中注册即可。当然还有很多技术细节，这里就不一一介绍了，大家可以获取github项目源码自行研究体验：

github地址：github.com/jitOffice/a…

演示地址：ppt.jitword.com/jit-slide

当然这个项目还有很多优化的空间，大家可以使用AI Coding的方式自行优化，实现后端服务等，来打造自己的AI PPT项目。

后面我会在掘金中持续分享更多AI技术实践和高价值AI开源项目。

avatar
文章
阅读
粉丝