--- name: science-content-ppt description: 将科普内容文本转换为可视化PPT风格网页的完整工作流。当用户输入科普内容并希望生成演示页面时触发。支持两种模式：(1) 默认模式：将科普内容生成为仿PPT轮播的单页HTML动画网页；(2) 流程图模式：使用Animation模板将已生成的AI_Animation.html按平面UI样式重构。模板已内置于Skill中。触发词包括"生成PPT"、"生成演示网页"、"生成流程图"等。 --- # Science Content PPT Skill 将科普内容文本转换为可视化PPT风格网页的完整工作流。 --- ## 真实案例（OSI 七层网络模型） **用户输入文本：** > 为了使不同计算机厂家生产的计算机能够相互通信，以便在更大的范围内建立计算机网络，国际标准化组织（ISO）在1978年提出了"开放系统互联参考模型"……七层自下而上依次为：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。其中第四层完成数据传送服务，上面三层面向用户。除了标准的OSI七层模型以外，常见的网络层次划分还有TCP/IP四层协议以及TCP/IP五层协议。 **执行流程：** 1. 用下方「Step 1 提示词模板」生成 PPT 提示词 2. 模型直接生成完整 HTML（或用 Step 3 模板重构） 3. 用户说"生成流程图"时，用模式二将内容转为平面 UI 风格 **输出结果：** - PPT模式：13页轮播，含封面、简介、七层详情、层级分工、协议对比 - 流程图模式：横向七层流程卡片，绿色平面UI风格 --- ## 模板文件（内置于Skill） 调用时使用相对于 Skill 根目录的路径： **PPT轮播模板（模式一，默认，Step 3 使用）：** ``` # 优先使用 level2 模板（由当前对话模型根据内容选择最合适的） assets/templates/PPT Template-level2/ ← 优先选用 assets/templates/PPT/PPT-Generate-3.html assets/templates/PPT/PPT-Generate-1.html assets/templates/PPT/PPT-Generate-2.html assets/templates/PPT/PPT-Generate-4.html assets/templates/PPT/PPT-Generate-5.html assets/templates/PPT/PPT-Generate-6.html assets/templates/PPT/PPT-Generate-7.html ``` **Animation平面UI模板（模式二，默认）：** ``` assets/templates/Animation/RNN-3.html ← 默认 assets/templates/Animation/RNN-2.html assets/templates/Animation/RNN-4.html assets/templates/Animation/RNN-5.html assets/templates/Animation/RNN-6.html assets/templates/Animation/RNN-7.html assets/templates/Animation/LSTM-1.html assets/templates/Animation/Comprehension.html assets/templates/Animation/GPU.html assets/templates/Animation/word2vec-1.html assets/templates/Animation/onehot.html assets/templates/Animation/onehot-drawback.html assets/templates/Animation/The fatal flaw of DNN.html assets/templates/Animation/Cross-modal disentanglement - 2.html ``` --- ## 模式一：生成PPT演示网页（默认） 当用户提供科普文本希望生成演示页面时，执行以下步骤： ### Step 1 — 生成PPT提示词 将以下提示词模板应用到用户输入的科普文本内容： ``` 根据以下内容生成基于纯前端页面单页布局仿PPT换页轮播进行直观图形化可视化的介绍，加大文字大小，并运用加粗、下划线、斜体、文字颜色、文字背景等强调方式方便进行视频演示。添加每次切换页面时页面中的各个元素依次"缓入"出现的动画效果(细化到每行文字)。 --- {用户输入的科普内容文本} --- ``` ### Step 2 — 生成AI_Animation.html 使用Step 1生成的提示词，调用当前对话模型生成完整的HTML页面代码。 **⚠️ 关键：必须追加以下两条约束到生成提示词中：** ``` 将emoji图标换成平面ui库的图标（如Font Awesome或Lucide图标库）。添加完成后检查页面中是否还有残留的emoji字符，如有则全部替换为对应的ui图标。 ``` ``` 所有动画元素的class名统一使用 an 或 anim-item，以便后续动画重置逻辑能正确识别并处理。 ``` **⚠️ 关键：动画重置修复** AI模型直接生成的HTML存在动画只播放一次、切换页面后动画不复发的bug。必须在生成后插入以下修复JS到页面底部（确保在 `` 前）： ```javascript (function() { // 克隆节点强制重置CSS动画，确保每次切换页面动画重新触发 document.querySelectorAll('.slide').forEach(function(s) { s.querySelectorAll('.an, .anim-item, [style*="animation"]').forEach(function(item) { var clone = item.cloneNode(true); item.parentNode.replaceChild(clone, item); }); }); })(); ``` **输出路径**：由用户决定，用户未指定时默认输出到桌面 `/home/mt/桌面/AI_Animation.html` ### Step 3 — 重构为PPT模板风格（可选） 以PPT模板对生成的网页进行重构。 **模板选择规则：** 1. **优先从 `assets/templates/PPT Template-level2/` 目录中选择**（共20+个模板） 2. 由**当前对话的模型**根据科普文案的内容特点（主题、结构、复杂度）自行判断，选出最合适的一个PPT模板 3. 若 level2 中没有合适选项，则回退到 `assets/templates/PPT/` 目录 提示词模板： ``` 以页面 {模板相对路径} 为模板重构 {用户指定的输出路径}。 请将AI_Animation.html的内容按照指定PPT模板的布局、样式和轮播机制进行重构，保持科普内容不变，优化视觉效果使其更适合视频演示。 ``` **模板路径示例：** - Level2 示例：`assets/templates/PPT Template-level2/3-1.html` - 默认回退：`assets/templates/PPT/PPT-Generate-3.html` - 用户可指定其他内置模板 **模板目录清单：** - `PPT Template-level2/`（优先）：1.html ~ 9-3.html 共 25 个模板，见下方 SUMMARY 参考 - `PPT/`（回退）：PPT-Generate-1.html ~ PPT-Generate-7.html **AI 选模板参考文档：** `assets/templates/PPT Template-level2/SUMMARY.md` > Step 3 重构前，AI 必须先阅读 `SUMMARY.md`，根据科普内容类型从 25 个模板中选择最合适的一个，再进行重构。选模板的核心依据： > - **对比/辩论类** → 8-1（12组VS）、8-3（30组VS）、6-2（架构对比） > - **步骤/流程类** → 3-2（SVG流程图）、6-1/6-3/6-4（步骤动画） > - **案例/实验类** → 4-2、4-3（代码雨动画） > - **警示/危险类** → 5-4（13页+15种动画）、7-3（红色脉冲） > - **轻量/快速** → 3-3（331行）、4-1（315行）、9-3（5页） > - **最强视觉冲击** → 2（13种动画）、6-2（15种动画+红绿VS对比） **注意**：重构完成后需检查目标模板是否内置了动画重置修复JS，如没有需手动添加。 --- ## 模式二：生成流程图（需用户明确触发） 当用户说"生成流程图"时，执行以下步骤： ### Step 1 — 确定模板 + 阅读 SUMMARY 参考 **AI 必须先阅读：** `assets/templates/Animation/SUMMARY.md` 根据科普内容类型，从 14 个 Animation 模板中选择最合适的一个： | 内容类型 | 推荐模板 | 原因 | |---------|---------|------| | RNN/LSTM 循环网络 | RNN-3（隐藏态，默认）> RNN-4（标准流程） | 深绿主题，RNN 系列 | | 梯度消失/爆炸 | RNN-6（爆炸警示）> RNN-7（双问题） | explode + shake 动画 | | 架构/系统/多模块 | Comprehension > Cross-modal | 架构卡片 + 连线动画 | | Word2Vec/词向量 | word2vec-1 | 语义向量可视化 | | One-hot 编码 | onehot（介绍）> onehot-drawback（缺陷） | 向量稀疏性可视化 | | DNN/深度学习缺陷 | The fatal flaw of DNN | 紫色警示风格 | | GPU/计算硬件 | GPU | 计算节点连接动画 | | LSTM 三阶段 | LSTM-1 | 门控结构三阶段 | **默认模板：** `assets/templates/Animation/RNN-3.html` **用户可指定其他 Animation 模板。** ### Step 2 — 重构为平面UI样式 提示词模板： ``` 将 {用户指定的输出路径} 网页的每相邻的两页的内容合并后按照指定网页的平面UI样式进行视觉重构，保持现有颜色方案不变。 具体实施要求包括： 1. 精确还原模板中的布局结构、元素间距、字体样式、图标设计和视觉层次 2. 确保所有交互元素（按钮、表单、导航等）的视觉表现与参考网页一致 3. 维持原有的颜色值和配色方案 4. 保证修改后的页面在不同设备和浏览器上具有良好的响应式表现 5. 优化DOM结构以匹配UI设计，同时保持原有功能完整性和交互逻辑不变 完成后需进行视觉一致性检查，确保实现效果与参考网页达到95%以上的相似度。 模板路径：{模板相对路径，默认 assets/templates/Animation/RNN-3.html} ``` --- ## 已知问题与解决方案（实操总结） ### Q1: 切换页面后动画不重触发 **原因**：CSS `animation-fill-mode: forwards` 使动画只执行一次，display:none 也无法重置动画状态。 **解决方案**：切换页面时克隆 DOM 节点（`cloneNode(true)` + `replaceChild`），强制浏览器重新渲染动画。这是**跨浏览器最可靠**的方案。 **代码**： ```javascript document.querySelectorAll('.slide').forEach(function(s) { s.querySelectorAll('.an, .anim-item').forEach(function(item) { var clone = item.cloneNode(true); item.parentNode.replaceChild(clone, item); }); }); ``` ### Q2: AI直接生成的HTML代码量不足 **现象**：模型生成的HTML有时只有200-400行，内容单薄。 **解决**：在提示词中明确要求"代码1000行以上"，或分多步生成后拼接内容。 ### Q3: 流程图模式不生成新内容 **说明**：流程图模式**不生成新内容**，仅将已生成的 AI_Animation.html 的页面内容按模板样式重新视觉呈现。需先有 PPT 版内容再说"生成流程图"。 --- ## 参数说明 | 参数 | 默认值 | 说明 | |------|--------|------| | PPT模板路径 | `assets/templates/PPT Template-level2/`（模型自选） | 模式一使用的模板，模型根据内容特点选择最合适的 level2 模板 | | 流程图模板路径 | `assets/templates/Animation/RNN-3.html` | 模式二使用的模板 | | 输出路径 | `/home/mt/桌面/AI_Animation.html` | 生成的网页文件，用户未指定时使用默认值 | | 动画修复JS | 内置于模板 | 切换页面时克隆节点重置CSS动画 | --- ## 使用方式 **模式一（默认PPT流程）：** > 用户输入科普内容 → Skill自动完成提示词生成、网页生成、动画修复全流程 **模式二（流程图）：** > 用户输入科普内容后再说"生成流程图" → 将已生成的AI_Animation.html按Animation模板重构为平面UI风格 **模板替换：** > 用户可通过"以xxx.html为模板"指定其他内置模板进行重构