Picture book skill

儿童绘本生成器

把一个主题变成一本孩子能看、能翻页、能听朗读的绘本，最终交付一个 HTML 文件。文字、插画和可选的音频都嵌入该文件；成品不加载外部图片、字体、脚本或网页资源。

朗读说明： 没有嵌入音频时，成品会尝试使用浏览器的 Web Speech API 朗读。不同浏览器和设备是否有对应语言语音、是否能离线朗读，并不完全一致。若需要可靠的离线语音，请在生成阶段创建音频并嵌入到 audio 字段中。

工作流程

1. 确定故事框架

先确定语言：用户明说了就照做；没明说则跟随用户提问的语言（默认中文）。把语言写入 book.json 的 lang 字段："zh-CN" 或 "en-US"。模板会自动切换按钮文字和朗读语音。

根据主题决定目标年龄和页数。默认目标年龄为 3–6 岁：

• 简单概念（颜色、动物、习惯养成）：4–8 页正文。
• 有情节起伏的故事（友谊、成长、冒险）：8–12 页正文。
• 另加封面和结尾页。

先写简短大纲：主角是谁、遇到什么、怎么解决、传达什么。儿童文案要求：

• 每页 1–3 个短句，口语化，读出来有节奏。
• 多用重复句式和拟声词，例如“咚咚咚”“呼——”“tap-tap-tap”。
• 主角有名字，情绪具体。不要只说“很难过”；要表现出孩子能理解的反应。
• 结尾温暖、点题，但不要说教。

2. 定义视觉规格（画之前必须做）

插画使用内联 SVG。在画第一页前，先固定以下内容：

• 主角的形状构成，例如“小刺猬 = 棕色半圆身体 + 三角刺 + 圆脸 + 豆豆眼”。
• 每个角色 3–4 个固定色值。
• 全书统一调色板：建议奶油底、暖橙、草绿、天蓝等低饱和颜色。
• 每页构图有变化（远景、近景、俯视），但角色形状组合必须复用。

开始画前先读 references/svg_guide.md。它说明如何避免把插画画成几何图形堆砌。

3. 朗读：真实音频优先，浏览器朗读兜底

每页播放按钮都应可用。按以下顺序处理：

1. 可选的内嵌真实音频。 只有在运行环境已经允许安装依赖、且可以联网时，才使用 edge-tts 或其他合规工具生成音频。音频必须转为 base64，并填写到该页的 audio 字段，形式为 data:audio/mpeg;base64,...。生成阶段使用在线语音服务时需要网络。
2. 浏览器朗读。 将 audio 留空。模板会尝试调用浏览器 Web Speech API 朗读页面文字。它不需要额外写播放器逻辑，但离线可用性取决于用户设备。

不要在陌生或受控的系统中自动执行 pip install，更不要使用 --break-system-packages。需要安装依赖时，使用隔离环境，例如：

python -m venv .venv
# Windows PowerShell
.venv\Scripts\Activate.ps1
python -m pip install edge-tts

若真实音频不可用，正常交付浏览器朗读版本；不要因此阻塞绘本生成。

4. 组装 HTML

不要手写整个 HTML。先写一个 book.json，再用打包脚本生成：

python scripts/build_book.py book.json output/book.html

book.json 结构：

{
  "title": "小刺猬的拥抱",
  "subtitle": "一个关于分享的故事",
  "age": "3–6岁",
  "lang": "zh-CN",
  "cover_svg": "<svg viewBox=\"0 0 800 600\" ...>封面插画</svg>",
  "pages": [
    {
      "text": "本页文案",
      "svg": "<svg viewBox=\"0 0 800 600\" ...>本页插画</svg>",
      "audio": ""
    }
  ],
  "end_text": "结尾页寄语（可选）"
}

脚本会校验必填字段、SVG 的 viewBox、内嵌音频格式、重复 SVG ID，以及明显的外部资源或可执行内容。模板已经包含翻页动画、页码圆点、单页朗读、自动朗读、键盘方向键翻页和音频/浏览器朗读双模式播放器。

5. 交付

把生成的 HTML 保存到输出目录并交给用户。说明：双击即可在浏览器中打开；点击每页的“🔊 点我听故事”按钮听朗读，或点击“自动朗读整本”。

安全与质量自检

• 不处理来路不明的 book.json 或 SVG。脚本会拦截常见危险内容，但这不是完整的安全审计。
• 成品不应加载外部图片、字体、脚本、音频或网页资源。
• 生成阶段若使用在线 TTS，必须说明那一步需要网络。
• SVG 数量 = 正文页数 + 封面；每个 SVG 都必须有 viewBox。
• 每个 id="..." 在全书所有内联 SVG 中必须唯一；不要重复使用 id="hero"。角色容器优先使用 class="hero"。
• 每页文字与插画必须对应；角色的色值和基本形状必须保持一致。
• 打开生成的 HTML，确认上一页、下一页、朗读和自动朗读按钮都能正常工作。