前端企业应用【免费下载链接】PPTistPowerPoint-ist/pauəpɔintist/, An online presentation application that replicates most of the commonly used features of MS PowerPoint, allowing for the editing and presentation of PPT online. It also supports AIPPT and local PPTX file preview.项目地址https://gitcode.com/gh_mirrors/pp/PPTist点击查看免费下载导读本文以 PPTistPowerPoint-ist在线演示文稿应用中的「模板式 AIPPT」能力为主线完整讲解其六大基本原理、AI 结构化数据的字段含义、AIPPT 模板的制作流程、页面标记与节点标记的类型体系以及模板与 AI 数据之间的匹配替换逻辑。读完本文你将掌握如何亲手在 PPTist 中制作一套可被 AI 复用的 AIPPT 模板含封面、目录、过渡、内容、结束五类页面理解模板页数下限与随机性的关系并能够读懂 useAIPPT.ts 中模板挑选、文字替换、字号自适应、图片池匹配等核心实现。一、模板式 AIPPT 的基本原理PPTist 的 AIPPT 属于「模板式 AIPPT」AI 并不直接绘制最终成品而是先产出符合既定结构的结构化数据再由前端把数据与人工制作好的模板做匹配结合生成最终 PPT。整套流程可以拆解为以下 6 步定义 PPT 结构约定一套 PPT 中包含哪些类型的页面每种页面含哪些内容例如封面页有标题与正文内容页有若干内容项定义数据格式基于上述结构定义用于 AI 生成的结构化数据格式该格式的具体定义见 示例数据 public/mocks/AIPPT.json 与 结构定义 src/types/AIPPT.ts制作模板在 PPTist 中制作模板页面并在模板上标记好结构类型页面类型 节点类型AI 生成结构化数据AI 依据第 1 步定义的 PPT 结构输出符合格式的数据生成配图利用 AI 文生图、图库搜索匹配等方案为页面生成相关配图该能力由调用方自行接入图片源实现匹配结合将 AI 生成的数据、配图与模板进行匹配结合生成最终 PPT。注 1虽然当前线上版本不提供配图演示效果但 AIPPT 方法是支持此功能的——你只需要自己提供图片源按照要求的格式将待选图片集合传入 AIPPT 方法即可对应useAIPPT.ts中presetImgPool(imgs)与AIPPT(templateSlides, AISlides, imgs)的可选第三参数。注 2以上仅适用于模板式 AIPPT非模板式 AIPPT 可以直接生成最终目标格式相关数据规范见 doc/AI_PPT_SCHEMA.md。二、AI 生成的结构化数据格式模板式 AIPPT 的输入数据是一条条「AI 幻灯片」AIPPTSlide其类型定义位于 src/types/AIPPT.ts联合类型成员type值页面含义data字段AIPPTCovercover封面页title标题、text正文AIPPTContentscontents目录页items: string[]目录项数组可选offsetAIPPTTransitiontransition过渡页章节过渡title、textAIPPTContentcontent内容页title页标题、items: { title, text }[]内容项数组可选offsetAIPPTEndend结束页致谢页无其中offset字段用于标识「当前这条数据是某一页被拆分后的第几段」配合模板替换逻辑实现项目编号的连续递增下文第五节详述。仓库中的 public/mocks/AIPPT.json 是一份完整的模拟 AI 输出示例节选片段如下[ { type: cover, data: { title: 犯罪心理学研究, text: 探索犯罪心理的成因、特征及干预策略助力犯罪预防与矫治。 } }, { type: contents, data: { items: [ 犯罪心理学概述, 犯罪心理的形成, 犯罪类型与心理特征, 犯罪心理评估与干预, 犯罪心理学的应用, 未来发展趋势 ] } }, { type: transition, data: { title: 犯罪心理学概述, text: 本章将介绍犯罪心理学的定义、历史、基本理论及其研究领域。 } }, { type: content, data: { title: 定义与历史, items: [ { title: 犯罪心理学的定义, text: 犯罪心理学是研究犯罪行为及其心理机制的学科…… }, { title: 犯罪心理学的发展历史, text: 犯罪心理学起源于19世纪末…… } ] } }, { type: end } ]实际联调时AI 输出的并不是一个完整的 JSON 文件而是逐条流式返回。在 AIPPTDialog.vue 中前端读取流式响应后按行拆分通过jsonrepair修复破损 JSON 后逐条解析为AIPPTSlide并立即调用一次AIPPT(templateSlides, [slide])完成单页的实时渲染实现生成一页、渲染一页的流式体验const processChunk (chunk: string) { try { const text chunk.replace(jsonl, ).replace(json, ).replace(, ).trim() if (text) { const slide: AIPPTSlide JSON.parse(jsonrepair(text)) AIPPT(templateSlides, [slide]) } } catch (err) { console.error(err) } }三、AIPPT 模板制作流程AIPPT 模板的制作完全复用 PPTist 的普通编辑能力流程共 5 步打开 PPTist新建或打开一个演示文稿制作模板页面用常规的文本、形状、图片、线条等元素排版出页面建议把装饰类元素锁定防止替换时误操作打开左上角菜单中的[幻灯片类型标注]功能对应 MarkupPanel.vue通过 EditorHeader/index.vue 中的setMarkupPanelState(true)唤起为制作好的页面标注页面类型并选中具体元素标注节点类型使用导出功能导出为 JSON 文件得到可被 AIPPT 调用的模板。注意实际上并不存在专门提供给 AIPPT 的模板。所谓的 AIPPT 模板只是把在 PPTist 中制作的普通页面标注上类型标记而已。这些数据不仅用于 AI 生成 PPT也可以作为普通的页面模板使用。从 public/mocks/template_1.json 可以看到模板文件结构就是普通演示文稿的slides数组每个 slide 携带一个type字段如type:cover、type:contents元素上携带textType文本元素、text.type形状内文本、imageType图片元素等节点标记。导出后的 JSON 模板还可以在 AIPPT 生成对话框中作为本地模板使用见AIPPTDialog.vue的uploadLocalTemplate()支持上传.pptist格式文件读取后经decrypt解密得到{ slides, theme }再触发生成。四、模板标记类型页面标记与节点标记4.1 页面标记5 类标注面板MarkupPanel.vue中的「当前页面类型」下拉框提供了如下选项对应 src/types/slides.ts 中的SlideType页面类型type值建议包含的节点封面页cover标题、正文、图片背景图、页面插图目录页contents目录标题标记类型为列表项目、图片背景图、页面插图过渡页章节过渡transition标题、正文、节编号、图片背景图、页面插图内容页content标题、24 个内容项每项含内容项标题标记类型为列表项标题、内容项正文标记类型为列表项目、内容项编号标记类型为项目编号以及图片背景图、页面插图、项目插图结束页致谢页end图片背景图、页面插图页面标记记录在 slide 的type字段上通过slidesStore.updateSlide({ type })/removeSlideProps写入或移除。4.2 节点标记文本标记与图片标记节点标记分为两种——文本标记和图片标记文本标记可作用于文本节点text元素和带文字的形状节点shape元素内嵌text标注面板中当选中元素是文本或带文字的形状时会展示「当前文本类型」下拉框图片标记只作用于图片节点image元素选中图片时展示「当前图片类型」下拉框你可以自行添加更多类型的标记如图表。文本标记的完整取值TextType见 src/types/slides.ts文本类型值说明未标记类型不参与 AI 替换标题title页面主标题副标题subtitle页面副标题正文content段落正文列表项目item目录项 / 内容项正文列表项标题itemTitle内容项标题注释notes备注类文字页眉header页眉文字页脚footer页脚文字节编号partNumber过渡页章节编号项目编号itemNumber内容项/目录项编号图片标记的完整取值ImageType见 src/types/slides.ts图片类型值说明未标记类型不参与 AI 替换页面插图pageFigure页面级配图项目插图itemFigure内容项配图背景图background页面背景图在 useAIPPT.ts 中checkTextType(el, type)同时兼容两种承载方式el.type text el.textType type或el.type shape el.text el.text.type type。五、AIPPT 模板制作原则一个用于 AIPPT 的模板至少需要包含以下页面至少 13 页建议 30 页以上页面类型最低数量建议数量备注封面页12 个以上—目录页6各 2 个26 项目录各 1 个10 项目录 1 个过渡页13 个以上—内容页4各 2 个24 项内容各 1 个1 项内容 1 个结束页12 个以上—需要注意的 3 点以上页数仅满足当前替换逻辑的最基本要求。如果希望 AI 生成的 PPT 具有一定的随机性需要适当增加每种页面的数量。例如假设模板中存在 3 个封面页生成时会从 3 个中随机选择 1 个使用源码中对应coverTemplates[Math.floor(Math.random() * coverTemplates.length)]。当前替换逻辑下目录页可支持 120 个目录项内容页可支持 112 个内容项但不需要每种数量的模板都做一遍因为程序会自动通过模板的拼接/裁减方式来实现特殊的项目数。你可以自行调整替换逻辑以支持更多情况。5.1 项目数超出模板时的自动拼接当 AI 输出的目录项/内容项数量超过模板中标记元素的数量时useAIPPT.ts会在渲染前先对 AI 数据做拆分用同一个模板连续渲染多页实现一页放不下就多页拼接content页数据拆分规则items 数量为 56 时拆为3 剩余78 时拆为4 4910 时拆为3 3 3大于 10 时拆为4 4 剩余14 直接使用contents页数据拆分规则items 数量为 11 时拆为6 5大于 11 时拆为10 剩余首页最多渲染 10 项10 及以下直接使用。拆分时会给后续段设置offset如offset: 3渲染「项目编号」节点时通过index offset 1保证编号连续递增。5.2 模板不足时的最接近匹配getUseableTemplates(templates, n, type)负责在同类模板中挑选可用的那个当n 1只需 1 个内容项时优先筛选出「恰好没有 item 标记、恰好 1 个 title、恰好 1 个 content」的模板即单栏排版页一般情况先在标记数量 n的模板中挑选「标记数量最接近 n」的那一批len - n最小者若所有模板的标记数量都小于 n则退而选择标记数量最多的模板。选好目标数量后返回所有标记数量与目标相等的模板再由调用方随机取一保证多样性的同时尽量复用同一版式。5.3 文本替换与字号自适应getNewTextElement({ el, text, maxLine, longestText, digitPadding })是文本替换的核心它保留模板节点原有的样式字体、颜色、对齐等仅替换第一个文本节点内容并删除其余冗余文本节点。为保证替换后不溢出内部通过getAdaptedFontsize用 CanvasmeasureText测量文本宽度在字号不低于 10px 的前提下逐级减小字号≤22px 时步长 1否则步长 2直到行数不超过maxLine或总高度适配文本框digitPadding用于项目编号补零如01。六、模板与 AI 数据的匹配替换逻辑源码级useAIPPT.ts中导出的核心方法为AIPPT(templateSlides, _AISlides, imgs?)它按AISlides中每条数据的类型分别走不同的替换分支cover从coverTemplates中随机取一个替换titlemaxLine 1与contentmaxLine 3标记的节点contents用getUseableTemplates挑目录模板按编号itemNumber与列表项item的groupId分组对齐——先按编号文本或left top * 2排序确定填充顺序再替换对应项文本未被使用的项连同其groupId一并过滤掉避免空位残留itemNumber用index offset 1重写编号transition过渡页模板在首次使用时随机选定后全局复用transitionTemplate缓存保证所有过渡页风格一致transitionIndex递增并写入partNumber节点contentitemTitle、item、itemNumber按left top * 2的从上到下、从左到右顺序排序后依次填充当只有 1 个内容项时直接写入content标记节点maxLine 6作整页正文end从endTemplates随机取一个仅处理图片替换不替换文字。所有分支对图片节点的处理一致若元素带imageType且图片池imgPool非空则调用getNewImgElement(el)——按模板图片宽高比从图片池中挑选比例相近的图getUseableImage优先匹配宽高关系再计算等比缩放与居中裁剪区间clip.range最终返回新src与clip的图片元素。这印证了注 1只要调用方提供图片源如public/mocks/imgs.json中的{ id, src, width, height }列表模板式 AIPPT 即自动具备配图能力。生成结束后若当前画布为空则setSlides(slides)整体替换否则addSlidesFromData(slides)追加到已有文稿之后。七、在 PPTist 中使用 AIPPT 生成演示文稿从 AIPPTDialog.vue 可以看到完整的交互流程共三步输入主题setup 步输入 PPT 主题关键词最长 50 字支持回车提交与推荐主题一键填充并可配置以下参数语言中文 / English / 日本語风格通用 / 学术风 / 职场风 / 教育风 / 营销风模型GLM-4.7-Flash、Doubao-Seed-1.6-Flash、DeepSeek-v4-Flash 等以 AIPPTDialog.vue 中下拉选项为准配图无 / 模拟测试test此时会加载public/mocks/imgs.json作为图片池/ AI 搜图、AI 生图当前版本置灰不可选覆盖已有幻灯片勾选后生成前先清空当前画布。 点击「AI 生成」调用api.AIPPT_Outline请求/tools/aippt_outlinestream 模式流式读取大纲内容结束后用getMdContent提取markdown 代码块并去除 HTML 注释得到可编辑大纲。确认大纲outline 步在 OutlineEditor.vue 中编辑大纲内容可右键添加/删除大纲项确认后进入模板选择。选择模板并生成template 步从预置模板列表如template_1template_8封面缩略图位于 public/imgs中选择或上传本地.pptist模板随后调用api.AIPPT请求/tools/aipptstream 模式流式解析逐条生成幻灯片完成后套用模板自带主题theme。若服务端返回state -1界面会提示「该模型 API 的并发数过高请更换其他模型重试」说明生成服务对模型并发有一定限制。八、模板落地与扩展建议模板即普通演示文稿AIPPT 模板没有任何专属文件格式就是把普通页面标上type/textType/imageType后导出的 JSON或.pptist。你完全可以在 PPTist 中继续用常规方式二次编辑、复用模板页面数量与随机性权衡想让 AI 每次生成的成品看起来不一样最直接的办法是增加每种页面的模板数量尤其是封面、过渡、结束页替换逻辑会在同类模板中随机选取自定义扩展useAIPPT.ts中的拆分阈值如 5/6/7/8/9/10/11、getUseableTemplates的匹配策略、getAdaptedFontsize的字号下限minFontSize 10与步长均为纯前端逻辑可按需调整以支持更多项目数或更激进的排版策略也可仿照TextType增加新的标记类型如图表标记并在替换分支中补充对应处理。相关文档与源码索引doc/AIPPT.md模板式 AIPPT 官方说明本文主体来源doc/AI_PPT_SCHEMA.mdAI 生成数据的目标格式规范非模板式 AIPPTsrc/types/AIPPT.tsAIPPTSlide数据结构定义public/mocks/AIPPT.json完整的 AI 结构化数据示例src/hooks/useAIPPT.ts模板匹配、文本替换、字号自适应、图片池替换实现src/views/Editor/MarkupPanel.vue幻灯片类型标注面板页面类型 节点类型src/views/Editor/AIPPTDialog.vueAIPPT 生成对话框主题 → 大纲 → 模板 → 流式生成public/mocks/template_1.json带类型标记的模板数据实例src/types/slides.tsSlideType、TextType、ImageType等类型定义src/services/index.tsAIPPT 相关接口/tools/aippt_outline、/tools/aippt赞分享前端企业应用【免费下载链接】PPTistPowerPoint-ist/pauəpɔintist/, An online presentation application that replicates most of the commonly used features of MS PowerPoint, allowing for the editing and presentation of PPT online. It also supports AIPPT and local PPTX file preview.项目地址https://gitcode.com/gh_mirrors/pp/PPTist点击查看免费下载相关推荐PPTist项目中的AIPPT技术解析从原理到模板制作PPTist项目中的AIPPT技术解析从原理到模板制作 引言 在现代办公场景中PPT制作是一项常见但耗时的工作。PPTist项目中的AIPPT功能通过人工智前端企业应用LMFlow 对话模板Conversation Template定制实战从原理到注册使用全流程LMFlow 对话模板Conversation Template定制实战从原理到注册使用全流程 本篇指南围绕 LMFlow 提供的对话模板定制能力展开先人工智能大模型微调模型评测强化学习多模态Open Headunit握手流程源码走读startHandshake到startReading的完整链路Open Headunit握手流程源码走读startHandshake到startReading的完整链路 Open Headunit 是一款把 Androi音视频上一篇ADK Feature Flags 机制全解析用 ADK_ENABLE_* / ADK_DISABLE_* 掌控 adk-python 的实验性功能下一篇Zoom OAuth 环境变量完全指南基于 knowledge-work-plugins 的 .env 密钥规划与生产实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考