绘本PPT（NoteBookLM 版）
将文章内容转化为专业PPT。自动生成AI绘画提示词，一键创建温暖治愈系插画风格的演示文稿。
Autore
非著名程序员
Istruzioni
请根据用户提供的文章内容，自动生成一套完整的绘本 PPT 并制作可视化展示页面：
【任务要求】
请分三步完成：
第一步：分析文章并生成 AI 绘画提示词（纯中文）
- 深入分析文章的核心主题和关键要点
- 提炼出 4-6 个最重要的知识点或章节
- **重要：根据每个知识点的内容特征，灵活选择最合适的布局方式**
- 为每个知识点生成一个详细且独特的中文 AI 绘画提示词
第二步：调用 Nano Banana Pro 生成图片
- 使用生成的提示词调用 API 生成所有 PPT 配图
- 保存生成的图片 URL
第三步：制作可视化 PPT 展示页面
- 创建一个全屏的 HTML 页面
- 图片完全占满整个屏幕，无边距无留白（img { width: 100vw; height: 100vh; object-fit: cover; margin: 0; padding: 0; border-radius: 0; }）
- 实现左右切换查看 PPT 图片
- 支持键盘、鼠标、触摸操作
- 精美的过渡动画和控制界面
【核心设计原则】
1. **灵活布局 - 根据内容选择**
**布局方案 A - 横向三分栏**（适合并列对比的概念）
- 示例：三种不同类型、三个平行要素
- 左中右三个区域，每个独立展示
**布局方案 B - 竖向三栏**（适合三个层次或维度）
- 示例：财富/幸福/智慧三个维度
- 三个竖长区域，每个包含多个要点
**布局方案 C - 上下结构**（适合总分关系）
- 上部：核心概念 + 大插画
- 下部：2-3个细分要点
**布局方案 D - 中心扩散**（适合一个核心多个延伸）
- 中央：核心概念 + 主插画
- 四周：4-6个相关要点围绕
**布局方案 E - 流程式**（适合步骤或过程）
- 左到右或上到下的流程展示
- 箭头连接，步骤清晰
**布局方案 F - 分层金字塔**（适合层级关系）
- 上层：顶层概念
- 中层：支撑要素
- 底层：基础元素
**布局方案 G - 对比式**（适合对比两个概念）
- 左右分屏，中间分隔线
- 每侧展示不同内容
2. **内容密度 - 根据信息量调整**
**密集型**（信息量大）：
- 3-4个区域，每个包含多行文字
- 插画较小，文字为主
- 适合：知识点列表、详细说明
**平衡型**（信息量中等）：
- 2-3个区域
- 插画和文字各占一半
- 适合：概念解释、要点总结
**视觉型**（信息量少但重要）：
- 1-2个区域
- 大插画配简短文字
- 适合：核心概念、引言页
3. **插画风格 - 根据主题变化**
**场景类**：完整的小场景（人物+环境）
**图标类**：简洁的象征性图标组合
**人物类**：以人物动作为主
**物品类**：以物品展示为主
**抽象类**：图形、箭头、流程图
【必须遵循的统一风格元素】
✓ 16:9 横屏比例
✓ 温暖治愈的手绘插画风格
✓ 奶油色系背景（米黄到奶油白渐变）
✓ 顶部花朵藤蔓装饰框架
✓ 丝带横幅或装饰性标题框
✓ 手绘线条，棕色描边
✓ 柔和的配色（浅橙、浅黄、浅粉、浅绿、浅蓝）
✓ 四周散落小花、叶子、星星装饰
✓ Q版可爱的插画风格
✓ 简体中文文字，清晰可读
【可变化的设计元素】
✗ 区域数量（2-6个都可以）
✗ 区域形状（圆角矩形、圆形、不规则形状）
✗ 排列方式（横向、竖向、环绕、对角）
✗ 文字密度（标题式、段落式、列表式）
✗ 插画比重（大插画、小图标、多图标）
✗ 装饰元素位置和密度
✗ 色彩分配（每个区域不同颜色或统一色调）
【中文 AI 绘画提示词生成指南】
每个提示词应该这样构建：
**第一步：分析内容特征**
- 这个知识点有几个要点？（决定区域数量）
- 是并列关系还是层级关系？（决定布局方式）
- 信息量大还是小？（决定文字密度）
- 适合什么插画？（决定插画风格）
**第二步：选择布局方案**
明确说明："本页采用[布局方案X]"
**第三步：详细描述画面**
用自然语言描述整个画面，包括：
- 整体布局结构
- 每个区域的位置、大小、形状、颜色
- 具体的文字内容（逐字写出）
- 具体的插画内容（详细描述）
- 装饰元素的位置和样式
- 整体色调和氛围
**第四步：强调关键细节**
- 文字必须清晰（字号、颜色、位置）
- 插画风格统一
- 符合温暖治愈的整体风格
【输出格式 - 第一步】
---
## PPT 第 1 页
**内容分析：**
- 主题：[主题名称]
- 要点数量：[X个]
- 关系类型：[并列/层级/流程/对比等]
- 信息密度：[密集/平衡/简洁]
**选择的布局方案：** [布局方案X - 原因说明]
**图片包含的所有文字：**
[列出所有要显示的文字内容，包括主标题、副标题、各区域标题和说明]
**完整的中文绘画提示词：**
```
16:9横屏，温暖治愈手绘插画风格，奶油色渐变背景。
[自然流畅地描述整个画面布局]
顶部有手绘花朵藤蔓框架，[描述标题样式和内容]。
[详细描述主体内容的布局方式]
[描述第一个区域/元素的位置、形状、颜色、内容]
[描述第二个区域/元素...]
[描述第三个区域/元素...]
[根据实际需要继续描述]
[描述插画的具体内容和风格]
[描述装饰元素的分布]
所有文字使用简体中文，清晰可读，[描述文字样式]。整体氛围温馨治愈。
```
---
## PPT 第 2 页
[同样的格式，但内容和布局完全不同...]
---
【示例：不同布局的提示词】
**示例1（横向三分栏）：**
```
16:9横屏，温暖手绘插画风格。顶部花朵藤蔓框架中有丝带横幅写着"三种财富杠杆"。画面中央横向排列三个圆角矩形区域。左侧浅橙色区域顶部标签"资本杠杆"，中间是宝箱和金币的插画，底部写"用钱生钱，投资获得回报"。中间浅黄色区域标签"媒体杠杆"，插画是录制视频的人，底部写"创作内容，一次制作无限传播"。右侧浅绿色区域标签"劳动力杠杆"，插画是团队协作场景，底部写"组建团队，协同创造价值"。四周散落小花和星星装饰。
```
**示例2（竖向三栏 - 列表型）：**
```
16:9横屏，温暖手绘插画风格。顶部装饰框内标题"纳瓦尔的人生智慧"。画面中央分为三个竖长区域。左侧浅橙色拱门形状，顶部大标题"财富"，下方金币图标配文字"打造资产"，书籍图标配文字"积累知识"，帆船图标配文字"长期思维"，天平图标配文字"风险管理"。中间浅黄色拱门，标题"幸福"，包含太阳、莲花、茶杯等图标，每个配简短说明。右侧浅绿色拱门，标题"智慧"，包含大脑、望远镜、猫头鹰等图标配说明。
```
**示例3（上下结构 - 核心+要点）：**
```
16:9横屏，温暖手绘风格。顶部标题"幸福的本质"。中上部大圆角矩形对话框，人物盘腿冥想在云朵上，旁边写着"幸福是一种可以培养的内在能力，而非外部条件的简单叠加"。下方三个横向并列的小圆角矩形，浅橙色"减少欲望"配简约生活插画，浅黄色"活在当下"配闻花香插画，浅粉色"管理情绪"配天气变化插画。底部一排四个小图标"充足睡眠、适度运动、良好关系、健康饮食"。
```
【生成要求 - 第一步】
1. **多样化布局**：6张PPT应该有至少4种不同的布局方式
2. **内容驱动设计**：根据内容特点选择最合适的表现形式
3. **保持风格统一**：虽然布局不同，但整体风格必须协调一致
4. **文字内容丰富**：每页都要有足够的文字信息
5. **视觉层次清晰**：主次分明，重点突出
6. **创意且实用**：既要美观也要易于理解
【生成参数 - 第二步】
- 模型：Nano Banana Pro
- 尺寸：1456×816（16:9横屏）
- 为每个提示词调用 API 生成图片
- 收集所有生成的图片 URL
【可视化展示页面设计规范 - 第三步】
创建一个全屏 PPT 展示页面，要求如下：
1. **整体布局：**
- 全屏显示（100vw × 100vh）
- 深色背景（#1a1a1a 或 #2d2d2d）
- 图片居中显示，保持 16:9 比例
- 图片周围有适当留白
2. **PPT 图片显示：**
- 图片宽度和高度：占满全屏（img { width: 100vw; height: 100vh; object-fit: cover; margin: 0; padding: 0; border-radius: 0; }）
- 自动计算高度保持 16:9 比例
- 图片圆角：0px
- 图片阴影：0 10px 40px rgba(0,0,0,0.3)
- 图片加载时显示加载动画
- 支持图片缩放查看（可选）
3. **导航控制：**
- 左右箭头按钮：
* 位置：屏幕两侧，垂直居中
* 样式：半透明圆形按钮（直径 60px）
* 背景：rgba(255,255,255,0.15)，玻璃态效果
* 图标：白色箭头（← →）
* 悬停：背景变为 rgba(255,255,255,0.25)
* 点击：轻微缩放动画
* 第一页隐藏左箭头，最后一页隐藏右箭头
- 键盘支持：
* ← 键：上一页
* → 键：下一页
* 空格键：下一页
* Home键：第一页
* End键：最后一页
- 触摸支持（移动端）：
* 左右滑动切换页面
* 滑动距离超过 50px 触发切换
* 平滑过渡动画
4. **进度指示器（底部中央）：**
- 页码显示："3 / 6"
* 字体 18px，字重 500
* 颜色 rgba(255,255,255,0.8)
* 背景：rgba(0,0,0,0.3)，圆角 20px
* 内边距 10px 20px
- 进度点导航（页码下方）：
* 每页一个小圆点
* 未激活：直径 8px，rgba(255,255,255,0.3)
* 已激活：直径 10px，rgba(255,255,255,0.9)
* 点击圆点可跳转到对应页面
* 圆点间距 12px
* 悬停：放大 1.2 倍
5. **顶部控制栏（可选）：**
- 位置：顶部右侧
- 包含按钮：
* 全屏切换（Maximize/Minimize 图标）
* 自动播放（Play/Pause 图标）
* 下载 PPT（Download 图标，可选）
* 分享（Share 图标，可选）
- 样式：半透明背景，圆角按钮
- 鼠标不动 3 秒后自动隐藏，移动时显示
6. **切换动画：**
- 默认动画：淡入淡出 + 轻微位移
* 当前页淡出并向左/右移动
* 新页面从右/左淡入
* 动画时长 0.4 秒
- 可选动画效果（可切换）：
* 滑动：水平滑动切换
* 缩放：当前页缩小消失，新页放大出现
* 翻页：3D 翻页效果
* 立方体：立方体旋转效果
7. **自动播放功能（可选）：**
- 点击播放按钮开始自动播放
- 每页停留 5 秒（可配置）
- 自动播放时显示暂停按钮
- 手动切换时暂停自动播放
- 播放到最后一页后停止
8. **响应式设计：**
- 桌面端：显示所有控制元素
- 平板端：简化控制栏，支持触摸
- 手机端：
* 隐藏箭头按钮
* 仅保留滑动和进度指示
* 图片宽度 95vw
* 双击图片放大查看
9. **加载状态：**
- 初始加载：显示加载动画（旋转圆圈或进度条）
- 图片加载中：显示骨架屏或模糊预览
- 加载完成：淡入显示图片
- 预加载下一张：提升切换流畅度
10. **性能优化：**
- 懒加载：仅加载当前页和前后各一页
- 图片预加载：提前加载下一页图片
- 防抖处理：避免快速点击导致的问题
- 使用 CSS transform 而非 position 实现动画
【技术实现要求 - 第三步】
- 使用纯 HTML + CSS + JavaScript（不使用框架）
- 从 CDN 引入 lucide icons（用于控制按钮图标）：
https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js
- 使用 Flexbox 居中布局
- CSS transition 实现平滑过渡
- 事件监听处理键盘、鼠标、触摸操作
- 代码结构清晰，注释完整
【最终输出格式】
第一步输出：
- 生成所有 PPT 页面的绘画提示词
第二步输出：
- 调用 API 生成图片
- 显示所有图片的 URL
第三步输出：
- 生成完整的 HTML 文件（包含内嵌的 CSS 和 JavaScript）
- HTML 中的图片 URL 数组包含所有生成的图片链接
- 可以直接在浏览器中打开使用
【完整工作流程】
1. 分析文章内容
2. 为每个知识点生成独特的绘画提示词
3. 调用 Nano Banana Pro API 生成所有图片
4. 创建可视化展示页面，将图片嵌入
5. 输出完整的 HTML 文件代码
请现在开始执行完整流程，生成从内容分析到最终可视化展示的完整解决方案。
绘本PPT（NoteBookLM 版）
将文章内容转化为专业PPT。自动生成AI绘画提示词，一键创建温暖治愈系插画风格的演示文稿。
Autore
非著名程序员
Istruzioni
请根据用户提供的文章内容，自动生成一套完整的绘本 PPT 并制作可视化展示页面：
【任务要求】
请分三步完成：
第一步：分析文章并生成 AI 绘画提示词（纯中文）
- 深入分析文章的核心主题和关键要点
- 提炼出 4-6 个最重要的知识点或章节
- **重要：根据每个知识点的内容特征，灵活选择最合适的布局方式**
- 为每个知识点生成一个详细且独特的中文 AI 绘画提示词
第二步：调用 Nano Banana Pro 生成图片
- 使用生成的提示词调用 API 生成所有 PPT 配图
- 保存生成的图片 URL
第三步：制作可视化 PPT 展示页面
- 创建一个全屏的 HTML 页面
- 图片完全占满整个屏幕，无边距无留白（img { width: 100vw; height: 100vh; object-fit: cover; margin: 0; padding: 0; border-radius: 0; }）
- 实现左右切换查看 PPT 图片
- 支持键盘、鼠标、触摸操作
- 精美的过渡动画和控制界面
【核心设计原则】
1. **灵活布局 - 根据内容选择**
**布局方案 A - 横向三分栏**（适合并列对比的概念）
- 示例：三种不同类型、三个平行要素
- 左中右三个区域，每个独立展示
**布局方案 B - 竖向三栏**（适合三个层次或维度）
- 示例：财富/幸福/智慧三个维度
- 三个竖长区域，每个包含多个要点
**布局方案 C - 上下结构**（适合总分关系）
- 上部：核心概念 + 大插画
- 下部：2-3个细分要点
**布局方案 D - 中心扩散**（适合一个核心多个延伸）
- 中央：核心概念 + 主插画
- 四周：4-6个相关要点围绕
**布局方案 E - 流程式**（适合步骤或过程）
- 左到右或上到下的流程展示
- 箭头连接，步骤清晰
**布局方案 F - 分层金字塔**（适合层级关系）
- 上层：顶层概念
- 中层：支撑要素
- 底层：基础元素
**布局方案 G - 对比式**（适合对比两个概念）
- 左右分屏，中间分隔线
- 每侧展示不同内容
2. **内容密度 - 根据信息量调整**
**密集型**（信息量大）：
- 3-4个区域，每个包含多行文字
- 插画较小，文字为主
- 适合：知识点列表、详细说明
**平衡型**（信息量中等）：
- 2-3个区域
- 插画和文字各占一半
- 适合：概念解释、要点总结
**视觉型**（信息量少但重要）：
- 1-2个区域
- 大插画配简短文字
- 适合：核心概念、引言页
3. **插画风格 - 根据主题变化**
**场景类**：完整的小场景（人物+环境）
**图标类**：简洁的象征性图标组合
**人物类**：以人物动作为主
**物品类**：以物品展示为主
**抽象类**：图形、箭头、流程图
【必须遵循的统一风格元素】
✓ 16:9 横屏比例
✓ 温暖治愈的手绘插画风格
✓ 奶油色系背景（米黄到奶油白渐变）
✓ 顶部花朵藤蔓装饰框架
✓ 丝带横幅或装饰性标题框
✓ 手绘线条，棕色描边
✓ 柔和的配色（浅橙、浅黄、浅粉、浅绿、浅蓝）
✓ 四周散落小花、叶子、星星装饰
✓ Q版可爱的插画风格
✓ 简体中文文字，清晰可读
【可变化的设计元素】
✗ 区域数量（2-6个都可以）
✗ 区域形状（圆角矩形、圆形、不规则形状）
✗ 排列方式（横向、竖向、环绕、对角）
✗ 文字密度（标题式、段落式、列表式）
✗ 插画比重（大插画、小图标、多图标）
✗ 装饰元素位置和密度
✗ 色彩分配（每个区域不同颜色或统一色调）
【中文 AI 绘画提示词生成指南】
每个提示词应该这样构建：
**第一步：分析内容特征**
- 这个知识点有几个要点？（决定区域数量）
- 是并列关系还是层级关系？（决定布局方式）
- 信息量大还是小？（决定文字密度）
- 适合什么插画？（决定插画风格）
**第二步：选择布局方案**
明确说明："本页采用[布局方案X]"
**第三步：详细描述画面**
用自然语言描述整个画面，包括：
- 整体布局结构
- 每个区域的位置、大小、形状、颜色
- 具体的文字内容（逐字写出）
- 具体的插画内容（详细描述）
- 装饰元素的位置和样式
- 整体色调和氛围
**第四步：强调关键细节**
- 文字必须清晰（字号、颜色、位置）
- 插画风格统一
- 符合温暖治愈的整体风格
【输出格式 - 第一步】
---
## PPT 第 1 页
**内容分析：**
- 主题：[主题名称]
- 要点数量：[X个]
- 关系类型：[并列/层级/流程/对比等]
- 信息密度：[密集/平衡/简洁]
**选择的布局方案：** [布局方案X - 原因说明]
**图片包含的所有文字：**
[列出所有要显示的文字内容，包括主标题、副标题、各区域标题和说明]
**完整的中文绘画提示词：**
```
16:9横屏，温暖治愈手绘插画风格，奶油色渐变背景。
[自然流畅地描述整个画面布局]
顶部有手绘花朵藤蔓框架，[描述标题样式和内容]。
[详细描述主体内容的布局方式]
[描述第一个区域/元素的位置、形状、颜色、内容]
[描述第二个区域/元素...]
[描述第三个区域/元素...]
[根据实际需要继续描述]
[描述插画的具体内容和风格]
[描述装饰元素的分布]
所有文字使用简体中文，清晰可读，[描述文字样式]。整体氛围温馨治愈。
```
---
## PPT 第 2 页
[同样的格式，但内容和布局完全不同...]
---
【示例：不同布局的提示词】
**示例1（横向三分栏）：**
```
16:9横屏，温暖手绘插画风格。顶部花朵藤蔓框架中有丝带横幅写着"三种财富杠杆"。画面中央横向排列三个圆角矩形区域。左侧浅橙色区域顶部标签"资本杠杆"，中间是宝箱和金币的插画，底部写"用钱生钱，投资获得回报"。中间浅黄色区域标签"媒体杠杆"，插画是录制视频的人，底部写"创作内容，一次制作无限传播"。右侧浅绿色区域标签"劳动力杠杆"，插画是团队协作场景，底部写"组建团队，协同创造价值"。四周散落小花和星星装饰。
```
**示例2（竖向三栏 - 列表型）：**
```
16:9横屏，温暖手绘插画风格。顶部装饰框内标题"纳瓦尔的人生智慧"。画面中央分为三个竖长区域。左侧浅橙色拱门形状，顶部大标题"财富"，下方金币图标配文字"打造资产"，书籍图标配文字"积累知识"，帆船图标配文字"长期思维"，天平图标配文字"风险管理"。中间浅黄色拱门，标题"幸福"，包含太阳、莲花、茶杯等图标，每个配简短说明。右侧浅绿色拱门，标题"智慧"，包含大脑、望远镜、猫头鹰等图标配说明。
```
**示例3（上下结构 - 核心+要点）：**
```
16:9横屏，温暖手绘风格。顶部标题"幸福的本质"。中上部大圆角矩形对话框，人物盘腿冥想在云朵上，旁边写着"幸福是一种可以培养的内在能力，而非外部条件的简单叠加"。下方三个横向并列的小圆角矩形，浅橙色"减少欲望"配简约生活插画，浅黄色"活在当下"配闻花香插画，浅粉色"管理情绪"配天气变化插画。底部一排四个小图标"充足睡眠、适度运动、良好关系、健康饮食"。
```
【生成要求 - 第一步】
1. **多样化布局**：6张PPT应该有至少4种不同的布局方式
2. **内容驱动设计**：根据内容特点选择最合适的表现形式
3. **保持风格统一**：虽然布局不同，但整体风格必须协调一致
4. **文字内容丰富**：每页都要有足够的文字信息
5. **视觉层次清晰**：主次分明，重点突出
6. **创意且实用**：既要美观也要易于理解
【生成参数 - 第二步】
- 模型：Nano Banana Pro
- 尺寸：1456×816（16:9横屏）
- 为每个提示词调用 API 生成图片
- 收集所有生成的图片 URL
【可视化展示页面设计规范 - 第三步】
创建一个全屏 PPT 展示页面，要求如下：
1. **整体布局：**
- 全屏显示（100vw × 100vh）
- 深色背景（#1a1a1a 或 #2d2d2d）
- 图片居中显示，保持 16:9 比例
- 图片周围有适当留白
2. **PPT 图片显示：**
- 图片宽度和高度：占满全屏（img { width: 100vw; height: 100vh; object-fit: cover; margin: 0; padding: 0; border-radius: 0; }）
- 自动计算高度保持 16:9 比例
- 图片圆角：0px
- 图片阴影：0 10px 40px rgba(0,0,0,0.3)
- 图片加载时显示加载动画
- 支持图片缩放查看（可选）
3. **导航控制：**
- 左右箭头按钮：
* 位置：屏幕两侧，垂直居中
* 样式：半透明圆形按钮（直径 60px）
* 背景：rgba(255,255,255,0.15)，玻璃态效果
* 图标：白色箭头（← →）
* 悬停：背景变为 rgba(255,255,255,0.25)
* 点击：轻微缩放动画
* 第一页隐藏左箭头，最后一页隐藏右箭头
- 键盘支持：
* ← 键：上一页
* → 键：下一页
* 空格键：下一页
* Home键：第一页
* End键：最后一页
- 触摸支持（移动端）：
* 左右滑动切换页面
* 滑动距离超过 50px 触发切换
* 平滑过渡动画
4. **进度指示器（底部中央）：**
- 页码显示："3 / 6"
* 字体 18px，字重 500
* 颜色 rgba(255,255,255,0.8)
* 背景：rgba(0,0,0,0.3)，圆角 20px
* 内边距 10px 20px
- 进度点导航（页码下方）：
* 每页一个小圆点
* 未激活：直径 8px，rgba(255,255,255,0.3)
* 已激活：直径 10px，rgba(255,255,255,0.9)
* 点击圆点可跳转到对应页面
* 圆点间距 12px
* 悬停：放大 1.2 倍
5. **顶部控制栏（可选）：**
- 位置：顶部右侧
- 包含按钮：
* 全屏切换（Maximize/Minimize 图标）
* 自动播放（Play/Pause 图标）
* 下载 PPT（Download 图标，可选）
* 分享（Share 图标，可选）
- 样式：半透明背景，圆角按钮
- 鼠标不动 3 秒后自动隐藏，移动时显示
6. **切换动画：**
- 默认动画：淡入淡出 + 轻微位移
* 当前页淡出并向左/右移动
* 新页面从右/左淡入
* 动画时长 0.4 秒
- 可选动画效果（可切换）：
* 滑动：水平滑动切换
* 缩放：当前页缩小消失，新页放大出现
* 翻页：3D 翻页效果
* 立方体：立方体旋转效果
7. **自动播放功能（可选）：**
- 点击播放按钮开始自动播放
- 每页停留 5 秒（可配置）
- 自动播放时显示暂停按钮
- 手动切换时暂停自动播放
- 播放到最后一页后停止
8. **响应式设计：**
- 桌面端：显示所有控制元素
- 平板端：简化控制栏，支持触摸
- 手机端：
* 隐藏箭头按钮
* 仅保留滑动和进度指示
* 图片宽度 95vw
* 双击图片放大查看
9. **加载状态：**
- 初始加载：显示加载动画（旋转圆圈或进度条）
- 图片加载中：显示骨架屏或模糊预览
- 加载完成：淡入显示图片
- 预加载下一张：提升切换流畅度
10. **性能优化：**
- 懒加载：仅加载当前页和前后各一页
- 图片预加载：提前加载下一页图片
- 防抖处理：避免快速点击导致的问题
- 使用 CSS transform 而非 position 实现动画
【技术实现要求 - 第三步】
- 使用纯 HTML + CSS + JavaScript（不使用框架）
- 从 CDN 引入 lucide icons（用于控制按钮图标）：
https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js
- 使用 Flexbox 居中布局
- CSS transition 实现平滑过渡
- 事件监听处理键盘、鼠标、触摸操作
- 代码结构清晰，注释完整
【最终输出格式】
第一步输出：
- 生成所有 PPT 页面的绘画提示词
第二步输出：
- 调用 API 生成图片
- 显示所有图片的 URL
第三步输出：
- 生成完整的 HTML 文件（包含内嵌的 CSS 和 JavaScript）
- HTML 中的图片 URL 数组包含所有生成的图片链接
- 可以直接在浏览器中打开使用
【完整工作流程】
1. 分析文章内容
2. 为每个知识点生成独特的绘画提示词
3. 调用 Nano Banana Pro API 生成所有图片
4. 创建可视化展示页面，将图片嵌入
5. 输出完整的 HTML 文件代码
请现在开始执行完整流程，生成从内容分析到最终可视化展示的完整解决方案。
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
