宋词情境交互 HTML 课件生成器
★★ 先分流：A线还是B线？（读完这段再往下走）
- A线 · 情境课件：用户要"某首词的课件/情境页"——有信笺词作、意象动效、赏析。走下面标准七步。
- B线 · 数字人访谈：用户说"会动的李清照/苏轼""把XX请来对话/采访XX/和XX面对面""数字人"——单人物极简访谈页，不要信笺不要赏析不要预设题。直接读
references/digital-human.md（完整技术手册）+ 读样板examples/数字人访谈样板-李清照.html的代码，按手册流水线做。B线界面铁律：只有人物+名字+对话框+麦克风+联网灯，其他一律不加（用户原话级要求）。 - 拿不准就问用户一句要哪种。
★ 新手操作守则（第一次用先读这里，5 步照做即可）
> 一个完全陌生的人，只要按下面 5 步走，就能做出合格的课件。每步怎么选、选什么最好，都写清了。
第 1 步 · 问清楚要做什么（别急着动手）
用户可能只说一句话，比如"做苏轼的课件"。你必须先问清这几件事，用选项+推荐项的方式问：
- 做谁的、哪一首词？（用户只说词人没说篇目时，主动列出他的 3—5 首代表作让用户选）
- 画风？（推荐「墨骨晕染明丽」）
- 词人形象气质？（要和他写这首词时的年龄+心境匹配）
- 年级？（默认初中）
- 要不要对话+语音？（默认要）
第 2 步 · 查资料（不能凭印象）
查证：原文一字不差、词牌、写作时间+词人当时年龄（这个最影响人物形象，比如《渔家傲》李清照46岁不是少女）、背景主旨。
第 3 步 · 主动构思 + 给文字设计稿（先写文字，别画图）
把"背景画什么、人物长什么样、什么动效、怎么布局"用一段文字写清楚给用户看，并列出"意象—出处"表。让用户回"要改/要补充/没问题"。
第 4 步 · 用户确认后才动手
用户明确说"没问题/确认"了，才开始生成图片、组装 HTML。没确认前禁止生成图片、禁止写代码。
第 5 步 · 照着样板复刻 + 交付
生成人物图（用 examples/参考画风-如梦令人物.png 做 image-to-image）→ 抠图工具 抠图 → 加白光 → 组装单文件 HTML（动效、信笺、对话、晓晓音色全按黄金样板复刻）→ 自检 → 本地+线上交付。
> 一句话心法：先问、先查、先写设计稿、确认了再做；动效元素必须出自词句、形态要画得像；人物年龄要对、表情不能凶。
〇、开工前必读（最高优先级，先读样板再动手）
本 Skill 已内置黄金样板成品与参考画风图，在 examples/ 目录。动手前必须先做这一步，否则必返工：
- 用 Read 工具打开
examples/黄金样板-渔家傲.html，看整体品质标杆（这是用户亲口认可"非常好非常满意"的成品）。重点看：7 个 keyframes 动效、8 个结构层、信笺三件套.poem/.line/.seal的具体实现。 - 读
examples/README.md，它把每个样板/参考图的用途和读法都写清楚了。 - 人物立绘必须用
examples/参考画风-如梦令人物.png做 image-to-image，不要用文字描述画风/颜色。
> 一句话：先照着标杆复刻，再换内容。不是凭文字想象"品质基准"，而是直接打开标杆文件读它的真实代码与画风。
一、核心原则（最高优先级，每次必守）
- 黄金样板只有两个：《如梦令·常记溪亭日暮》《渔家傲·天接云涛连晓雾》，已作为成品存进
examples/。它们是"品质基准"，不是"内容模板"。 - 先提问、主动构思、文字确认、再生成——四段式铁律。任何一步未经用户确认，禁止进入"生成图片/组装HTML"的实质动作。
- 换词只换"内容与意象"，不换"画风品质、动效精度、交互精度、文字可读性、图片形态"。
- 样板里的具体意象（溪亭、藕花、鸥鹭、舟、荷花花瓣 / 云涛、晓雾、星河、千帆、星光）只属于各自的词，不得默认套到新词上。
- 每个视觉意象必须能指出出自哪句词。出现词中不存在的意象，视为失败。
- 硬信息必须查证（原文、词牌、写作时间、词人当时年龄、背景、主旨），不得凭印象瞎编——尤其"词人写这首词时几岁"，直接影响人物形象定位。
二、七步工作流
第 1 步 · 问方向（先锁定大方向，避免方向性返工）
用提问形式（带选项 + 默认值），一次问清以下信息。用户说"你看着办"时，也要列出默认设定请其确认。
- Q1 词人：做谁？（李清照/苏轼/辛弃疾/李白/其他）
- Q2 词作：做哪一篇？——如果用户只给了词人、没给具体词作，必须列出该词人的几首代表词作让用户选（如苏轼：水调歌头/念奴娇·赤壁怀古/江城子）。这是生成"相关背景图"的前提。
- Q3 画风：默认"墨骨晕染明丽"。可选（差异要拉开）：墨骨晕染明丽（默认）/ 水墨淡雅 / 动漫 / 动漫Q版 / 工笔重彩 / 浅绛山水 / 写实。用户也可直接发参考图。
- Q4 词人形象气质：温柔/豪迈/沉郁/庄重/清雅/你看着办——注意气质要与"该词人写这首词时的年龄+心境"匹配。
- Q5 年级与文字量：初中（默认，赏析80—150字）/ 小学 / 高中。
- Q6 是否需要对话+语音：要（默认，含情境对话+晓晓音色+语音输入）/ 只要静态展示。
第 2 步 · 考据（必做，不能跳）
- 查证词作原文（一字不差）、词牌、作者。
- 查证写作时间 + 词人当时年龄（这是人物形象定位的关键，例：《渔家傲》作于1130年，李清照46岁，非少女）。
- 查证背景、主旨、赏析要点、注释典故。
- 输出"意象—出处"对照表：每个视觉元素必须标出出自哪一句。
第 3 步 · 主动构思（发挥智能，创意发起方是我，不是用户）
根据词的内容，主动完成以下设计，不要等用户给创意：
- 提取 3—5 个核心意象，列"意象—出处"表。
- 主动设计创意动效——这是本 Skill 的灵魂。逐句拆词，给出"词句—意象—动效"对照表，并说明"为什么用它、呼应哪句词"：
- 《如梦令》"误入藕花深处" → 漂浮的荷花花瓣
- 《渔家傲》"星河欲转千帆舞" → 闪耀漂浮的星星、星点缓缓升腾
- 《定风波》"穿林打叶声 / 竹杖 / 山头斜照" → 斜雨丝 + 竹叶 + 斜照光晕
- 《渔家傲·秋思》"衡阳雁去 / 长烟落日 / 霜满地" → 人字雁阵 + 烽烟 + 霜花
- 其他词映射：云雾、落叶、雨丝、雪粒、萤火、烛光、鹤、雁、烽烟、霜花……
- 禁止无脑套用样板的花瓣/星光，必须贴合本词内容。
- 同时明确"禁用清单"：这首词里不能出现的元素（如边塞秋思词禁用花瓣/星光/竹叶）。 - 定配色方案（给出具体色值思路，克制不超 4 色）。
- 定人物气质一句话 + 定图片形态。
第 4 步 · 文字设计稿（文字先行，供用户审阅）
用一段完整的文字把整个画面设计描述给用户看，包含：
- 背景图：画什么、什么意象、什么氛围
- 人物：年龄、气质、服饰、朝向、边缘白光
- 配色：主色调
- 动效：什么元素、怎么动、幅度速度
- 布局：人物/文字/交互怎么排
请用户反馈：要改 / 要补充 / 没问题。
第 5 步 · 确认生成（闸门）
用户明确确认"没问题/确认生成"后，才真正开始生成图片、组装 HTML。在此之前禁止调用图片生成工具、禁止写最终 HTML。
第 6 步 · 生成 + 中途微调
- 背景图：用 ImageGen 根据词内容生成；能生成动态图更好，不能则静态图即可（不强求动态）。
- 人物图：优先用参考图/已认可图做 image-to-image 生成 → 抠图工具 人像分割模型 抠透明底 → 压缩到合理尺寸 → 边缘加白色柔光。
- 每生成一张图都自检（见"图片铁律"）。
- 中途可随时再问：如"这张人物凶不凶？要不要加白光？动效强度够不够？"——让用户选，避免最后返工。
第 7 步 · 交付 + 自检
- 组装成单文件 HTML（纯静态离线可跑）：信笺词作 + 情境对话 + 晓晓音色 + 语音输入 + 上传资料入口。
- 逐条过自检清单（见下）。
- 本地 + 线上双交付。
三、图片铁律（优先级最高）
透明人物图（正确姿势，避免烂抠图）
- 透明 PNG 人物用 抠图工具（人像分割模型 模型）抠图，不是"颜色阈值白底转透明"的土办法。抠图工具 抠得干净、发丝完整，效果等同"直接生成透明图"。
- 流程：ImageGen 生成"简洁浅色纯背景 + 人物完整清晰"的原图 →
remove(img, session=new_session('人像分割模型'))→getbbox()裁剪 → 缩到高约 900 → 内嵌编码 内嵌。 - 人物边缘加半透明白色柔光（多层 drop-shadow 白光），既与背景区分、又增强存在感：
css filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 18px rgba(255,255,255,.32)) drop-shadow(0 0 40px rgba(255,255,255,.18)) drop-shadow(0 8px 20px rgba(0,0,0,.35)); - 抠图自检：四角 alpha 全 0、无残留白底、无透黑、发丝完整。不合格重抠。
画风铁律
- 画风不能用文字描述，必须用参考图做 image-to-image——说"鲜明点"会跳俗艳、说"淡雅点"会跳灰暗。参考图已内置：
examples/参考画风-如梦令人物.png（首选基准），备选examples/参考画风-20.jpg。用 ImageGen 的image1+input_fidelity="medium"一比一迁移色彩，提示词里只描述「身份/年龄/气质/朝向/表情」，不描述颜色。 - 默认画风"墨骨晕染明丽"：水彩晕染、颜色鲜活明亮、边缘柔和、宣纸质感，不灰暗、不俗艳。
- "豪迈"≠凶：豪迈体现在词境与衣袂气势上，面部表情要温润平和、端庄大气、眉目舒展、可带淡笑，严禁凌厉、凶、紧绷、严肃的表情。
- 人物年龄必须与考据结果一致（中年词人不能画成少女）。
背景图铁律
- 背景图根据词内容用 ImageGen 生成，与词中意象严格对应。
- 色彩与人物、信笺协调，不喧宾夺主。
- 能生成动态图（GIF/视频）更佳，但不强求，静态图完全可以。
四、视觉硬规范
- 底色米白宣纸或与词境匹配的浅色，CSS/SVG 做淡纸纹，不用纯白。
- 主色克制（淡墨、赭石、浅青、细红等，不超 4 色）。
- 标题楷体/毛笔感，正文不小于 16px，清晰可读。
- 细红线可作笺纸装饰，不喧宾夺主。
- 词作信笺：一首词一页看全 + 朱丝栏红竖线等高 + 毛笔竖排 + 方形印章。
五、动效规范
- 漂浮、呼吸、淡入为主，幅度小速度慢。
- 人物轻微呼吸浮动，衣袖发丝轻柔飘动（或按词意改为劲飘）。
- 动效元素从本词核心意象里选，创意由我主动提出，不照搬样板。
- 文字淡入，不弹跳、不闪烁、不遮挡阅读。
- 动画服务内容，不抢文字。
动效铁律（重中之重，最容易翻车）
- 元素必须逐句从词句里抠，并列出"词句—意象—动效"对照表。例：范仲淹《渔家傲·秋思》→「衡阳雁去无留意」=大雁南飞、「长烟落日孤城闭」=烽烟升起、「羌管悠悠霜满地」=霜花飘落。
- 元素形态必须"画得像"，禁止用通用图形糊弄（历史翻车：把"竹叶"做成了圆椭圆叶，用户一眼看穿）。正确形态举例：
- 竹叶 = 细长尖削、带中脉、成"个/介"字形簇，青绿色
- 大雁 = 排"人"字/一字形、翅膀扇动、成队列
- 霜花 = 六角/细小白点，稀疏
- 花瓣 = 有花瓣轮廓（荷花花瓣船形、梅花五瓣），不是随便的椭圆
- 雨丝 = 斜细线，带透明渐变
- 星光 = 十字/圆点闪烁
- 落叶 = 黄/红色、有叶形与叶脉 - 每个动效都要写清"呼应哪句词"，说明为什么用它。
- 禁用清单：词里没有的元素一律不得出现。尤其——边塞苍凉词（秋思类）禁用花瓣、星光、竹叶等明艳/不相关元素，否则意境彻底串味。
- 动效元素优先用 SVG 画（细长竹叶、人字雁阵、六角霜花都比 CSS 圆角块更逼真），再套用黄金样板的 keyframes（drift/rise/twinkle/rainFall 等）做位移旋转。
常用"意象→动效"参考映射（仅作启发，仍须逐词核对）
- "衡阳雁去" → 人字雁阵南飞
- "长烟落日" → 烽烟袅袅上升 + 落日余晖
- "霜满地" → 霜花缓落/凝结
- "穿林打叶" → 斜雨丝
- "竹杖" → 细长竹叶飘落
- "藕花深处" → 荷花花瓣
- "星河欲转" → 星点缓升闪烁
- "萧萧落木" → 黄叶飘落
- "惊起鸥鹭" → 白鹭飞起
六、对话与语音（如需对话版）
> 两条已验证的连线方案，按产品线选：
> - A线（情境课件）：可沿用 server.py 代理 + edge-tts 晓晓音色（老样板做法）。
> - B线（数字人访谈）：浏览器直连，无 server.py——DeepSeek 对话直连（实测 CORS 通过，temperature 1.15 保证答案多样，失败重试1次+离线多样兜底+开机 ping 自检联网状态）；朗读走阿里云 DashScope cosyvoice-v3-flash（实测可用音色：女声 longxiaochun_v3、男声 longfei_v3，响应 j.output.audio_url，http 转 https），失败降级 speechSynthesis 系统女声。完整代码抄 examples/数字人访谈样板-李清照.html。
- 系统提示词人设：身份、自称规范（如李清照自称「我/易安」，禁「小生/老夫」）、语气贴合年龄心境。
- 人设铁律（用户反感套话）：直接回答问题本身、一般不超过三句；绝不写客套开场白、绝不自我介绍套话、绝不复述学生的问题、结尾不反问。
- A线音色默认晓晓（zh-CN-XiaoxiaoNeural），语速 -8%、音调 +2Hz。
- 晓晓音色要硬编码进
<select>第一项，且loadEdgeVoices()必须有调用点（历史 bug：漏调用导致永远走系统音色）。 - 语音输入用 webkitSpeechRecognition，用独立变量隔离避免文字累积。
- 密钥已在对话用的模型接口由运行环境提供；用户自己的密钥在页面首次打开时粘贴一次（存浏览器本地），绝不写进任何文件或文档。
七、自检清单（交付前逐条检查）
- □ 是否先读了
examples/黄金样板与参考画风图？（未读样板直接生成=失败） - □ 是否先提问并给选项/默认值？
- □ 是否查证了原文、写作时间、词人当时年龄？
- □ 是否输出了"意象—出处"对照表？
- □ 是否输出了"词句—意象—动效"对照表 + 禁用清单？
- □ 动效创意是否由我主动设计、且呼应本词句（而非照搬样板）？
- □ 动效元素形态是否"画得像"（竹叶细长带中脉、大雁排人字、霜花六角…，不是通用圆块糊弄）？
- □ 是否输出了文字设计稿并请用户确认？
- □ 是否在用户确认后才开始生成？
- □ 人物年龄是否与考据一致？
- □ 人物表情是否温和平和、无凶相？
- □ 透明 PNG 是否用 抠图工具 人像分割模型 抠图、四角 alpha 全 0、无残留？
- □ 人物边缘是否有白色柔光？
- □ 背景图是否来自本词意象？
- □ 页面是否出现词中不存在的意象？
- □ 配色是否克制、画风是否"墨骨晕染明丽"（无俗艳、无灰暗）？
- □ 晓晓音色是否硬编码、loadEdgeVoices 是否有调用点？
- □ 是否无外链、断网可跑？
- □ 文字是否清晰可读、赏析是否 80—150 字？
- □ 是否无弹跳、闪烁、遮挡阅读？
八、输出要求
严格按七步走，不得跳过提问直接写代码。用户说"你看着办"时，也须先列出默认设定（含文字设计稿）请其确认，确认后再生成。
完成后交付：
1. 单文件 HTML（双击可看，联网需走 server.py 一键启动）
2. server.py（从 assets/server.py 复制，改 HTML_FILE 与 Key）+ requirements.txt
3. （可选）在线链接（发布时须传 startCmd="python server.py"）
九、可复用资源
examples/（最重要，开工前先读）：examples/README.md——每份样板/参考图的用途与读法examples/数字人访谈样板-李清照.html——B线品质标杆（用户"非常满意"终版：绿幕抠图数字人+写实书房+DeepSeek直连+龙小淳朗读，密钥已烧写）examples/黄金样板-渔家傲.html——A线品质标杆成品（用户认可"非常好"的那版）examples/黄金样板-如梦令.html——另一套标杆（看年龄不同→气质不同的差异）examples/参考画风-如梦令人物.png——人物立绘 image-to-image 的画风基准图examples/参考画风-20.jpg——备选画风基准图examples/黄金样板-渔家傲人物.png——已抠好透明 PNG 成品，看"抠图+白光"该有的样子references/digital-human.md：B线数字人完整技术手册（绿幕→逐帧抠图→边缘净化配方→动画WebP编码、渲染铁律防残影/悬空、背景构图铁律、说话系统、密钥位置、自检清单）references/image-generation.md：ImageGen + 抠图工具 抠图 + 白色柔光的详细步骤与自检方法references/visual-style.md：画风、配色、人物气质、动效的详细规范references/courseware-structure.md：单文件 HTML 的完整结构（信笺、对话、语音、上传）与关键代码要点assets/server.py：通用代理服务器模板（已去写死，只需改 HTML_FILE 与 Key；B线不需要）assets/requirements.txt：发布依赖（edge-tts）
