大模型做PPT，又一种全新方案

大家好，我是 Ai 学习的老章

关于用大模型制作 PPT，我已经探索过很多种方案

用大模型，把论文变成_PPT_

大模型做_PPT_，最强解决方案

大模型做_PPT_，全新玩法，浏览器运行，可发布到互联网

今天向大家再介绍一个我刚摸索来的方案——借助大模型和一个强大的开源项目：reveal.js，通过 Web 技术创建漂亮、交互式演示文稿（PPT）。

先看效果，这其实是一个网页，你完全可以把它发布到互联网，也可以直接本地用浏览器打开

玩法也很简单

整个reveal.js项目 clone 到本地，简单安装，随便一个 AI 编程工具，根据自己的素材生成可以在线/离线浏览器打开的 PPT

比如我是用的 Gemini-CLI

生成后执行 npm start 就大功告成了

reveal.js 详细用法简介如下，建议：完整安装后在原文件基础上直接找大模型修改即可。

也不需要太细究，大致了解安装、核心功能可以指挥大模型办事就行了。

1. 什么是 reveal.js？

reveal.js 是一个开源的 HTML 演示文稿框架，可用于创建功能丰富、外观精美的幻灯片。由于它基于 Web 技术，演示文稿本质上就是一个网页，可以轻松地在任何有现代浏览器的设备上展示，并且非常易于分享和部署。

核心优势：

• 跨平台：任何能打开网页的地方都能展示演示文稿。
• 高度可定制：可以完全控制样式和行为。
• 功能强大：支持 Markdown、演讲者备注、PDF 导出、数学公式等。
• 交互性：可以嵌入网站、视频，并利用 CSS 和 JS 实现丰富的动画效果。

2. 安装与设置

reveal.js 提供了多种安装方式，以满足不同用户的需求。

方式一：基础安装 (Basic Setup)

这是最简单快捷的方式，不需要任何编译或构建工具。

1. 下载项目：从 GitHub 下载最新版的 ZIP 压缩包：https://github.com/hakimel/reveal.js/archive/master.zip
2. 解压文件：将下载的压缩包解压到指定的项目文件夹。
3. 开始编辑：直接用代码编辑器打开 index.html 文件，然后开始修改里面的 <div class="slides"> 部分来创建幻灯片。

这种方式非常适合只想快速创建一个 HTML 演示文稿的场景。

方式二：完整安装 (Full Setup)

这是官方推荐的方式，功能最全，支持使用 Markdown、演讲者备注以及自动重载等高级功能。

安装 Node.js：确保电脑上已安装 Node.js (版本 10.0.0 或更高)。

克隆仓库：使用 Git 克隆 reveal.js 的代码仓库。

$ git clone https://github.com/hakimel/reveal.js.git

进入目录并安装依赖：

$ cd reveal.js
$ npm install

启动开发服务器：

$ npm start

这个命令会启动一个本地的 Web 服务器。

访问：在浏览器中打开 http://localhost:8000 即可看到演示文稿。修改 index.html 或 slides.md 文件时，浏览器会自动刷新，非常方便。

方式三：作为 NPM 依赖安装

若需要在已有的 Node.js 项目中，将 reveal.js 作为一部分集成，可以使用 npm 来安装。

$ npm install reveal.js

安装后，可以在代码中这样引入它：

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

let deck = new Reveal({
   plugins: [ Markdown ]
})
deck.initialize();

3. 创建内容 (Content)

HTML 结构

幻灯片的基本结构非常简单。整个演示文稿包含在 <div class="reveal"> 中，而所有的幻灯片则在 <div class="slides"> 里。

每一张独立的幻灯片都是一个 <section> 标签。

<div class="reveal">
    <div class="slides">
        <section>第一张幻灯片</section>
        <section>第二张幻灯片</section>
    </div>
</div>

垂直幻灯片：若要创建可以向下导航的幻灯片（例如，一个主题下的子页面），只需将 <section> 嵌套即可。

<section>
    <section>这是主幻灯片 A</section>
    <section>这是 A 的第一张垂直子幻灯片</section>
    <section>这是 A 的第二张垂直子幻灯片</section>
</section>

使用 Markdown

对于完整安装的用户，可以直接在 Markdown 文件中编写内容，这通常比写 HTML 更高效。

在 index.html 中，用以下方式引用 Markdown 文件：

<div class="slides">
    <section data-markdown="slides.md"
             data-separator="^---"
             data-separator-vertical="^--">
    </section>
</div>

在 slides.md 文件中，用 --- 分隔水平幻灯片，用 -- 分隔垂直幻灯片。

4. 主题 (Themes)

reveal.js 内置了多款漂亮的主题，无需编写任何 CSS 即可改变演示文稿的外观。

切换主题： 在 index.html 中，找到引入主题 CSS 的那一行，将其中的 black.css 替换成目标主题的文件名即可。

<!-- 内置主题：black, white, league, beige, sky, night, serif, simple, solarized -->
<link rel="stylesheet" href="dist/theme/black.css">

例如，要切换到白色主题，只需改成：

<link rel="stylesheet" href="dist/theme/white.css">

5. 核心功能 (Features)

reveal.js 不仅仅是简单的幻灯片切换，它还包含许多强大的功能：

• **演讲者视图 (Speaker View)**：按 S 键可以打开一个特殊的演讲者窗口，里面会显示当前的幻灯片、下一张幻灯片、计时器和演讲备注。
• PDF 导出：在 URL 后面加上 ?print-pdf 后，可以通过浏览器的打印功能将整个演示文稿保存为 PDF 文件。
• 代码高亮：可以自动识别并高亮代码块，并支持行号和行高亮。
• 数学公式：通过插件支持 LaTeX 数学公式。
• **自动动画 (Auto-Animate)**：在两张幻灯片之间自动为匹配的元素生成平滑的过渡动画。
• **片段 (Fragments)**：让幻灯片中的元素可以分步显示，只需给元素添加 class="fragment" 即可。
• 丰富的插件生态：支持搜索、缩放、图表等多种插件来扩展功能。

搭建完美的写作环境：工具篇（12 章）图解机器学习 - 中文版（72 张 PNG）ChatGPT、大模型系列研究报告（50 个 PDF）108 页 PDF 小册子：搭建机器学习开发环境及 Python 基础 116 页 PDF 小册子：机器学习中的概率论、统计学、线性代数 史上最全！371 张速查表，涵盖 AI、ChatGPT、Python、R、深度学习、机器学习等