Instruction
请根据用户提供的文章内容，自动生成一套完整的绘本 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 文件代码
请现在开始执行完整流程，生成从内容分析到最终可视化展示的完整解决方案。
Agent
