【112】AI一键将报告/论文转PPT的prompt

目标： 基于提供的源文档（例如，财务报告、分析报告、产品信息、毕业论文），生成一个单一、完整、可直接运行的 HTML 文件，该文件模拟PPT 演示文稿的风格，每页（幻灯片）为 16:9 比例，用户可以通过垂直滚动平滑地在幻灯片之间切换。文件必须动态地、可视化地呈现文档中的核心发现、关键数据和结构化信息，并特别优化单页（幻灯片）的内容密度，将辅助性或详细内容组织在可按需弹出的浮窗/模态框中。

核心要求：

1. 单一 HTML 文件输出：
   • 最终交付物必须是一个 .html 文件，包含所有必要的 HTML 结构、CSS 样式（通过 <style> 标签或内联 Tailwind 类）和 JavaScript（通过 <script> 标签，包括 CDN 引入和初始化逻辑）。
   • 不允许使用外部 CSS 或 JS 文件，只允许在 HTML 文件内部使用 CDN 链接。
2. PPT 风格与切换：
   • 将文档内容组织成一系列逻辑上的“幻灯片”（slides）。
   • 每张幻灯片必须强制保持 16:9 的宽高比例。
   • 整个 HTML 页面应设置为一个可垂直滚动的容器。
   • 利用 CSS 的 scroll-snap 特性，实现平滑的、页面级的垂直滚动吸附效果，使用户在滚动时能准确停留在每张幻灯片（即一个完整的 16:9 区域）的开头。
   • 幻灯片应占据或接近占据整个视口宽度，高度根据 16:9 比例计算，并利用视口单位（vh, vw）进行响应式调整，确保在不同屏幕尺寸下保持比例和良好的观看体验。
3. 内容密度与详细信息处理（核心优化）：
   • 提升单页密度： 在每张幻灯片 16:9 的区域内，充分利用迷你卡片网络来呈现多个并列的核心要点、数据点或特性。这是在有限空间内提高信息密度的主要方式。
   • 引入浮窗/模态框 (Modal/Overlay) 机制：
     • 目的： 用于展示较长、详细但非核心、或者适合按需查看的内容（例如：完整的代码示例、详细的数据表格、某个复杂概念的详细解释、背景信息、引用原文等）。
     • 实现： 为这些详细内容创建独立的 HTML 结构，该结构最初是隐藏的。它应包含一个覆盖整个屏幕的半透明背景（用于遮罩和聚焦）和一个居中或占据屏幕主要区域的内容面板。内容面板内包含详细内容和一个清晰的关闭按钮（例如右上角的“X”图标）。
     • 触发： 在相关的幻灯片内容区域（例如在某个迷你卡片下方、一个段落旁边或一个关键数据点旁边）添加一个清晰的触发元素（按钮或链接，例如“查看详情”、“完整代码”、“数据表格”）。
     • JavaScript 交互：
       • 使用 JavaScript 监听触发元素的点击事件。
       • 点击时，使对应的浮窗/模态框结构显示 (display: block 或调整 visibility/opacity)，并可能阻止背景滚动。
       • 监听浮窗背景区域的点击事件或关闭按钮的点击事件。
       • 点击浮窗背景或关闭按钮时，使浮窗/模态框结构隐藏 (display: none 或恢复 visibility/opacity)，并恢复背景滚动。
     • 内容识别： AI 必须能够智能识别源文档中哪些内容属于“详细、非核心、适合按需查看”的类别，并将它们从主幻灯片内容中剥离出来，放入浮窗结构中，同时在幻灯片原文位置生成相应的触发按钮。

视觉设计与布局：

1. 整体风格：
   • 参考 Apple 官网及发布会风格——简洁、现代，具有清晰的信息层级。
2. 幻灯片内布局：
   • 每张幻灯片是独立的 16:9 容器。
   • 幻灯片内部可以包含一个或多个内容块，这些块可以是全宽的，或者根据设计需求布局在 16:9 区域内。
   • 迷你卡片 / 要点卡片 (Mini-Cards / Point-Cards) (幻灯片内关键布局元素)：
     • 目的： 专门用于拆分和展示包含多个要点、风险、建议、特性、步骤或并行信息（例如，“关键发现”、“风险”、“建议”、“特性”）的段落或列表。
     • AI 任务： 深入理解这些内容的语义。提取每个逻辑上独立、并列的核心要点。将每个要点转换为一个独立的迷你卡片。
     • 布局： 将这些迷你卡片排列在一个响应式网格中（例如，grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4，根据 16:9 的空间限制，可能需要更紧凑的布局，目标是在单页内尽可能多地展示迷你卡片，同时保持可读性）。
     • 嵌套： 幻灯片内的内容块可以包含迷你卡片网格。
3. 背景：
   • 纯黑页面背景 (#000000)。
4. 高亮颜色
   • 自动品牌色： 尝试识别内容中主要品牌（例如，“小米”、“华为”）。如果成功，则使用其官方主 VI 色（例如，小米橙 #FF6900）作为唯一的核心高亮色。
   • 备选方案： 如果品牌/颜色识别失败，则使用专业的科技蓝 (#00AEEF) 或亮橙色 (#FFA500)。
   • 应用： 统一应用于幻灯片标题、关键文本（标题、核心数据）、大的强调数字、图标、图表元素、可选边框和渐变色。
5. 科技感渐变 (Tech Gradient)：
   • 仅应用于高亮色： 创建从 rgba(高亮色, 0.7) 到 rgba(高亮色, 0.3) 的透明度渐变。
   • 用途： 用作卡片/区域、图表区域或文本背景的微妙底色。禁止使用多色渐变。
6. 卡片样式 (Card Styling - 幻灯片内内容块与迷你卡片)：
   • 背景： 所有卡片（幻灯片内的主要内容块和迷你卡片）均使用深灰色背景（例如 #1a1a1a 或 #222222）。
   • 圆角： 主要内容块使用较大圆角半径（rounded-xl 或 rounded-2xl），迷你卡片使用较小圆角半径（rounded-lg）。
   • 分隔： 使用细微边框（border: 1px solid #333;）或适合暗黑模式的轻微阴影（shadow-md 或 shadow-lg）。
7. 幻灯片标题强化 (Slide Title Enhancement)：
   • 每张幻灯片应有一个清晰的主标题。使其显著增大（例如，text-4xl 或 text-5xl, font-bold）。
   • 整个演示文稿的总标题可以放在第一张幻灯片。

内容呈现与布局（核心优化）：

1. 内容组织到幻灯片： 将源文档内容按逻辑章节、主题或核心要点组织到不同的幻灯片中。确保每张幻灯片聚焦于一个核心主题或一套紧密相关的要点。
2. 全面的核心数据与要点：
   • 准确提取并展示源文档中的所有关键信息、核心数据点、结论和分析，这些应主要呈现在幻灯片的主体内容或迷你卡片中。
3. 核心要点提取与迷你卡片化（关键）：
   • 语义理解： 超越简单的句子分割。理解逻辑和语义，识别段落或列表内部独立、并列的核心观点/元素。
   • 转换： 将每个提取出的核心要点转化为一个独立的迷你卡片。
   • 目标： 将复杂信息解构成结构化、可视化的迷你卡片网格，使其在 16:9 的幻灯片空间内成为易于扫视的密集信息单元。
4. 迷你卡片内部结构与细节（关键）：
   • 结构优先级：
     • 强调数字优先： 如果核心要点包含一个关键、突出的数字/指标，则将该数字/指标本身作为顶部元素，使用超大、粗体字号（例如 text-5xl 或 text-6xl, font-bold，使用高亮色）。目的是为了最大化视觉冲击力。
     • 文本标题： 如果核心要点是概念性的或数字是次要的，则使用一个简洁、加粗的中文短语（理想情况 3-5 个汉字）作为顶部元素，使用大字号（例如 text-3xl 或 text-4xl, font-bold，白色或高亮色）。
   • 支撑文本： 在大的数字/标题下方，使用较小字号（例如 text-sm, text-gray-400）。
     • 当大元素是数字时： 解释该数字代表什么（例如，“研发费用同比增长”，“营收额”，“市场份额排名”）并提供简要背景。
     • 当大元素是文本标题时： 提供具体细节、解释、数据支撑或影响。
   • 双语副标题：
     • 在适合增强设计感的地方（尤其是在大的中文数字或文本标题下方），可选择添加简洁的英文短语，使用小字号（例如 text-xs 或 text-sm）、常规字重和柔和的颜色（例如 text-gray-500 或 text-gray-400）。注意：审慎地应用以增加视觉风格，不要过于频繁使用。
   • 专注与简洁： 严格遵守“一个卡片，一个核心要点”。大的元素和支撑文本都必须高度简洁。避免在单个迷你卡片中使用长句或包含多个观点。
5. 详细内容的处理（浮窗/模态框）：
   • 识别源文档中的详细、非核心内容。
   • 将这些内容移出主幻灯片结构，放入一个隐藏的浮窗/模态框 HTML 结构内。
   • 在原幻灯片（或相关的迷你卡片）的适当位置，插入一个触发按钮或链接，清晰指示用户点击可查看更多详细内容。为每个需要详细内容的点创建唯一的触发器和对应的浮窗。
6. 强烈的视觉层级：
   • 利用显著的字号差异（幻灯片标题 vs 迷你卡片数字/标题 vs 支撑文本 vs 英文副标题）、字重（font-bold vs font-normal）和颜色（高亮色、白色、灰色系）来在主要信息和次要信息之间以及幻灯片标题、主要内容、迷你卡片之间创建清晰的视觉区分。
7. 语言策略：
   • 主要语言： 使用中文或数字承载核心信息、幻灯片标题（大的中文部分）和迷你卡片的大元素。确保它们在视觉上占主导地位（大字号、加粗）。
   • 次要/装饰性语言： 使用英文作为幻灯片标题的副标题以及可选的、小的迷你卡片副标题。对这些元素使用较小字号和较低的强调度。如果源文档中存在英文术语，为确保技术准确性应予保留。

图形元素与图表：

1. 图标 (Font Awesome)：
   • 来源： 通过 CDN 引入 Font Awesome (v5/v6)。
   • 风格： 偏好简洁、现代的线框风格 (outline-style) 图标。
   • 使用： 放置于幻灯片标题附近，可选择性地（且需微妙地）用于迷你卡片内部（靠近标题处）、列表前缀等。严格禁止使用 Emoji 作为功能性图标。颜色应协调；关键图标可使用高亮色。
2. 数据可视化 (推荐 Chart.js)：
   • 应用场景： 用于展示趋势、增长率、构成（饼图/环形图）、比较（柱状图）等适合的数据。
   • 技术： 通过 CDN 嵌入 Chart.js。
   • 位置： 放置在讨论财务或业务分析的相关幻灯片内部。复杂的、详细的数据表格或图表适合放入浮窗中。
   • 样式： 图表颜色必须与暗黑主题和高亮色保持一致。确保图表清晰、易读且响应式。

技术与动画：

1. 技术栈：
   • HTML5, TailwindCSS 3+ (CDN), 原生 JavaScript (用于 scroll-snap 辅助、浮窗控制、Intersection Observer/图表初始化), Font Awesome (CDN), Chart.js (CDN)。
2. 滚动切换实现 (CSS Scroll Snap)：
   • 主容器设置 scroll-snap-type: y mandatory; 或 y proximity;。
   • 每张幻灯片元素设置 scroll-snap-align: start; 或 center;。
3. 浮窗/模态框实现 (JavaScript)：
   • 使用 JavaScript 编写函数控制浮窗的显示和隐藏，监听触发元素、关闭按钮和浮窗背景的点击事件。
   • 确保浮窗显示时，页面背景固定或不可滚动（可选）。
4. 动画 (CSS Transitions & Intersection Observer/Active Slide)：
   • 触发： 当元素（所有幻灯片内的卡片、内容块）滚动进入当前激活幻灯片的视口时。
   • 效果： 平滑、微妙的淡入/向上滑动效果（模仿 Apple 风格）。可以通过 Intersection Observer API 结合判断当前滚动位置所属的幻灯片索引来触发 CSS 类，或者更简单地，当幻灯片进入视口时（结合 scroll-snap 和 JS 滚动监听判断当前页），为其内的元素应用延迟动画。
   • 为网格项应用轻微延迟以产生交错效果。
5. 响应式设计：
   • 强制要求。使用 Tailwind 的响应式修饰符，特别是针对幻灯片内的网格布局和文字大小，确保在手机、平板和桌面设备上均具有出色的显示效果和可用性，同时保持 16:9 比例。

最终输出：

• 生成一个单一、可运行的 .html 文件，该文件：
  • 精确实现了上述所有要求。
  • 将内容组织成一系列 16:9 的幻灯片，支持垂直滚动吸附切换。
  • 在幻灯片内优先使用卡片布局，最大限度地利用迷你卡片网络提升单页信息密度。
  • 识别并剥离详细、非核心内容到隐藏的浮窗/模态框结构中，并在幻灯片内提供清晰的触发按钮。
  • 通过更大的数字、选择性双语和颜色实现了增强的视觉层级。
  • 整体美学符合 Apple 风格，并应用指定的高亮色和渐变。
  • 包含所有必需的 CSS (Tailwind 类/style 标签) 和 JavaScript (script 标签) 实现滚动切换、浮窗控制、动画触发和图表。