Transformer 绘本

做一本可翻页的互动儿童绘本（单文件 HTML），主题是用小朋友能理解的故事讲解 Transformer 架构的核心概念。绘本应有可爱的角色、多彩的插图（纯 CSS/SVG 绘制，不使用外部图片）、翻页动画和简洁有趣的文字。至少包含 6 页。请输出完整的单文件 HTML。

制作一本**互动儿童绘本**的单文件 HTML，用讲故事的方式向小朋友介绍 **Transformer 架构**。可以通过 CDN 引入第三方库。 ```` #### 绘本故事要求 请围绕以下 Transformer 核心概念设计故事，每个概念对应 1-2 页绘本。你需要为每个概念找到一个**儿童友好的比喻**，让 5-10 岁的孩子也能理解。以下是概念清单和参考比喻方向（你可以使用自己的创意比喻）： 1. **输入与 Token 化**（第 1-2 页） - 参考比喻：把一句话拆成一个个积木块 / 乐高零件 - 要传达：文字先被拆成小块才能被"理解" 2. **位置编码（Positional Encoding）**（第 3 页） - 参考比喻：给每块积木贴上编号贴纸，这样即使打乱了也知道原来的顺序 - 要传达：词的位置信息很重要 3. **注意力机制（Self-Attention）**（第 4-5 页） - 参考比喻：一群小动物在教室里，每个小动物会转头看看其他小动物，决定谁和自己最相关 - 或者：聚光灯在舞台上移动，照亮最重要的演员 - 要传达：每个词会"看"其他所有词，找出最相关的伙伴 4. **多头注意力（Multi-Head Attention）**（第 6 页） - 参考比喻：好几个小侦探同时调查同一个案件，每人关注不同线索 - 要传达：同时从多个角度理解句子 5. **前馈网络（Feed-Forward Network）**（第 7 页） - 参考比喻：魔法加工厂 / 烘焙坊——原材料进去，美味蛋糕出来 - 要传达：信息经过"加工"变得更有用 6. **编码器与解码器（Encoder-Decoder）**（第 8-9 页） - 参考比喻：翻译官——一个人听懂中文把意思记在心里（编码器），另一个人把心里的意思说成英文（解码器） - 要传达：理解输入 → 生成输出的两阶段过程 7. **输出与生成**（第 10 页） - 参考比喻：魔术师从帽子里一个接一个地变出兔子——每次只变一个，但最终变出一整排 - 要传达：一次生成一个词，最终组成完整的句子 8. **结尾/总结页**（最后一页） - 把所有概念串起来的温馨总结 - 可以有一个完整的流程图（用儿童画风呈现整个 Transformer 流水线） #### 角色设计 - 设计 1-2 个**贯穿全书的主角**，赋予名字和性格（如：好奇的小机器人、爱问问题的小猫等） - 主角在每一页中引导读者理解概念 - 配角和道具应与对应的比喻场景一致 #### 视觉设计 - **整体风格**：温暖、柔和、多彩的儿童绘本风，类似 Eric Carle（毛毛虫）或 Oliver Jeffers 的插画风格 - **插画**：全部使用 CSS 渐变、CSS 形状、SVG 或 Canvas 绘制，不使用外部图片 - 每一页至少有一个主视觉插画/场景 - 角色造型圆润可爱，表情生动 - 背景用柔和的渐变色，不同页面有不同色调 - **排版**： - 大字号、圆润的字体风格 - 文字简短有趣，每页不超过 3-4 句话 - 重要的技术概念用彩色高亮或特殊样式突出 - **色彩**：明亮温暖的儿童画用色——柔和的黄、天蓝、粉红、薄荷绿、橙色等 - **页面布局**：每页上半部分是插画，下半部分是文字（经典绘本布局），或左图右文 #### 交互要求 - **翻页**：支持以下翻页方式： - 页面两侧的翻页箭头 - 键盘左右方向键 - 触摸设备的左右滑动手势 - **翻页动画**：有书页翻转的过渡效果（如 3D 翻转、滑动渐变等），让人感觉真的在翻一本书 - **页码指示器**：底部显示当前页码和总页数（如 "📖 第 3 页 / 共 10 页"） - **微交互（可选加分项）**： - 插画中的小元素有微妙的呼吸动画或浮动效果 - 点击某些元素会有简短的交互动画（如：点击小动物，它会转头"看"其他动物——呼应注意力机制） - 技术概念高亮文字 hover 时显示简短的"大人版"解释气泡 - **封面与封底**： - 第一页是精美的封面，包含书名、作者（可以写 "由 AI 创作"）和一个吸引人的主视觉 - 最后一页是封底，可以有一段温馨的结束语 ````