docs: replace legacy plan with 八观六验 production brief

README.md

@@ -1,489 +1,103 @@
 ---
-title: 收猴子的故事 · 子木土土讲经济学
-emoji: 🐒
-colorFrom: yellow
-colorTo: red
+title: 观人 · 八观六验
+emoji: 👁️
+colorFrom: gray
+colorTo: indigo
 sdk: static
 app_file: index.html
 pinned: false
 ---
 
-<!-- SANBENGZI:START -->
-# 🛺 新项目：《三蹦子大奖赛》· 3D 网页实时渲染视频
+# 观人 · 八观六验
 
-> 入口：**[/sanbengzi/index.html](https://ethscriptions-rongduan.static.hf.space/sanbengzi/index.html)** · 源码：`sanbengzi/source/`
->
-> 本项目为**全新制作**，以**新增目录** `sanbengzi/` 的方式加入仓库；没有参考、也没有删除/修改仓库里已有项目（根目录「收猴子的故事」、`teacher/`「在人间做老师」）的任何代码与资源。上传时使用 `upload_folder(path_in_repo="sanbengzi")` 增量提交，从不调用删除。
+> 一部以《吕氏春秋·季春纪·论人》为思想锚点的可交互网页短片。
+> 画面、音乐、音效、字幕与导出工具均在浏览器中实时生成；不依赖外部图片或现成视频素材。
 
----
-
-## 0. 题材理解与风格
-
-一场“QQ 飞车”式的 3D 卡通赛车大赛——只不过参赛的是**三蹦子**（电动三轮）。六位车手个个“有故事”，比赛过程状况百出，最终**无一完赛**，遗憾谢幕。
-
-- **视觉**：明亮饱和的卡通 3D（低多边形 + 柔和阴影 + 天空渐变 + 光晕），QQ 飞车式 HUD（排名栏、速度表、氮气条、小地图、倒计时大字、选手名片）。
-- **语气**：双解说体育直播腔——主解说“大刘”激情高亢，嘉宾“老周”冷面吐槽，一捧一逗。
-- **底线**：结尾明确声明“纯属娱乐，情节虚构，切勿当真”。
-
-## 1. 需求拆解与实现方式
-
-| # | 需求 | 实现 |
-|---|------|------|
-| 1 | 全新制作、只增不删 | 新目录 `sanbengzi/`，增量上传 |
-| 2 | 画面 3D、QQ 飞车风格 | **Three.js** 实时渲染：程序化建模的赛道、看台、花坛、高台、直角弯围墙、鱼塘、水泥墩、6 辆造型各异的三蹦子、8 个 Q 版角色；PBR 材质 + 阴影 + 雾 + Bloom 光晕 |
-| 3 | 六大段落 | 片头 → 选手登场 → 赛道巡礼 → 倒计时 → 正赛 → 慢镜回放（+ 遗憾谢幕/免责声明） |
-| 4 | 旁白解说（必须） | **ElevenLabs** `eleven_v3`（带情绪标签 [excited]/[sarcastic]/[shouting]…）中文单人解说：大刘（Charlie，激情；吐槽句用 [deadpan] 冷面语气）——按反馈由双解说改为单解说；ffmpeg 去首尾静音、压缩长停顿、变速不变调、响度归一逐句生成 mp3 + 精确时长 → `timeline.json`，动画关键帧全部挂在台词时间点上，音画对位 |
-| 5 | 音效 | **ElevenLabs Sound Effects** 生成真实音效（知了、观众欢呼/惊呼/哄笑、撞击、碎裂、刹车尖啸、灭火器、门把手、收银“叮”、倒车提示、落水……），并辅以 Web Audio 合成音效（倒计时哔声、引擎电机声、风声、嗖） |
-| 6 | 背景音乐 | Web Audio **程序化作曲**（无版权风险）：片头号角 → 登场 Funk 律动 → 巡礼电子 → 倒计时鼓滚 → 正赛高能 → 回放慢板 → 谢幕“悲伤长号”；解说时自动闪避（ducking） |
-| 7 | 网页看视频 | 自研播放器：播放/暂停/拖动/章节跳转/全屏/字幕开关，横屏 16:9 与**手机竖屏 9:16** 一键切换（竖屏自动重排 HUD、加宽镜头 FOV） |
-| 8 | 浏览器本地导出 MP4 | **WebCodecs** `VideoEncoder`(H.264) + `AudioEncoder`(AAC) + `mp4-muxer`；**逐帧确定性离屏渲染**（不是录屏），`OfflineAudioContext` 离线混音，音画严格同步 |
-| 9 | 帧率 / BGM 可选 | 24 / 30 / 60 fps；“带背景音乐 / 不带背景音乐”（旁白与音效始终保留）；横屏 1080p / 竖屏 1080×1920 |
-| 10 | 文案 | 小红书（标题≤20字、≤10话题）、抖音（≤30字、≤5话题）、视频号（≤16字、话题不限）、B站（≤80字、≤10话题），一键复制，实时字数校验 |
-| 11 | 封面 | 4:3 / 3:4 / 16:9 三种比例 × 多款设计（3D 实拍镜头 + 大字标题），网格预览、**多选**，单张或打包 ZIP 下载 |
-| 12 | 进度监督 | 每完成一个大动作就推送一次 Space，提交信息标注阶段 |
-
-## 2. 技术架构
-
-```
-sanbengzi/                      ← 构建产物（静态网页，Space 直接打开）
-  index.html  assets/
-  sbz/voice/line_XX.mp3         ← 解说配音（ElevenLabs）
-  sbz/sfx/*.mp3                 ← 音效（ElevenLabs Sound Effects）
-sanbengzi/source/
-  frontend/src/sbz/
-    script.json   ← 剧本（台词 / 说话人 / 所属分镜），唯一真相源
-    timeline.json ← 配音生成后的时间轴（每句起止、分镜起止、关键帧锚点）
-    world.ts      ← 3D 世界：赛道、环境、看台、道具
-    cars.ts       ← 6 辆三蹦子（可拆卸零件：后轴、车轮、踏板、雷达、车门…）
-    people.ts     ← Q 版角色（6 车手 + 灭火大爷 + 招手观众）
-    fx.ts         ← 火焰 / 泡沫 / 碎屑 / 烟尘 / 水花（全部按时间 t 解析计算，可逐帧复现）
-    director.ts   ← 导演：t → 摆放所有物体与摄像机（纯函数）
-    hud.ts        ← 2D 叠加层：字幕、名片、倒计时、排名、速度表、小地图、回放边框、片尾
-    audio.ts      ← 程序化音乐 + 音效编排 + 离线混音
-    exporter.ts   ← WebCodecs + mp4-muxer 导出
-    covers.ts     ← 封面生成
-    copy.ts       ← 四平台文案
-sanbengzi/source/tools/
-    gen_audio.py  ← 调 ElevenLabs 生成配音/音效并写出 timeline.json
-```
-
-**核心原则：时间即真相。** 画面每一帧都是 `render(t)` 的纯函数结果（粒子用种子随机数 + 解析运动），所以预览、拖动、导出得到的画面完全一致；导出时按帧号逐帧推进，不依赖实时性能。
-
-## 3. 剧情大纲（完善版）
-
-| 段落 | 内容 |
-|---|---|
-| **片头** | 航拍掠过整条赛道：起点七车道、右侧绿化花坛、高台、90° 直角弯与围墙、墙外鱼塘、满场水泥墩；晴天、看台、彩旗、热气球。大字砸出“第一届 草台杯 三蹦子大奖赛”。 |
-| **选手登场** | QQ 飞车车库式旋转展台 + 聚光灯 + 选手名片（趣味属性条）。① 蜡笔：“铁皮侠”外国车手，车身珠光漆，镜头钻进车里——毛坯房（水泥墙、裸电线、灯泡）；② 蚊子：土味老板（墨镜、金链、腋下夹包），知了声中“哇，遥遥领先”，车灯里晃水、毫米波雷达“哐当”掉地；③ 咪咪：爽文男主（黑风衣、金色气场），车型“有点像保时捷”；④ 栗子：中年奶爸（背娃、保温杯），车标数字 6→7→8→9 变来变去，车长得一模一样；⑤ 鳟鱼：另一位土味老板（白西装、雪茄、大金表），金色满钻车身，贴纸翘边露出泡沫板；⑥ 滴滴：出租车司机（鸭舌帽、毛巾、茶杯），车顶“空车”灯 + 计价器。 |
-| **赛道巡礼** | 低空沿赛道飞行，标注：花坛（伏笔）、高台（伏笔）、直角弯 + 围墙（伏笔）、水泥墩（伏笔）。 |
-| **倒计时** | 七条跑道六位选手，栗子斜停骑线占两道；蚊子/栗子/咪咪/蜡笔车身冒“火焰特效”→“可能是充值的道具包”；灭火大爷冲上场“呲呲呲”全灭；车手 QQ 飞车式小跑上车，蚊子/咪咪/蜡笔拉不开隐藏门把手→“现场出现一点小状况，我们马上回来”（技术故障画面）→ 回来时三人是从车窗爬进去的；红灯 3：蜡笔抢跑（把刹车当油门），尴尬倒车回位；2、1、GO：咪咪起步直接窜进绿化花坛。 |
-| **正赛** | ① 鳟鱼不躲水泥墩直接撞上，车头碎成“石膏”白粉；② 直角弯前鳟鱼一脚把刹车踏板踩断（高速摄像机特写慢放），撞穿围墙飞进鱼塘——“鳟鱼，回家了”；③ 蜡笔刹车失灵，毛坯房里找不到应急拉手，顺着同一个洞飞出去——“前车之鉴，后车照搬”；④ 蚊子开智驾双手离盘，AEB 不刹，撞墩报废；⑤ 栗子高台飞跃，落地后轴断裂，两个后轮自己跑了；⑥ 观众进场招手，滴滴（刹车灯全程常亮）停车载客、收钱、掉头逆向开走。 |
-| **慢镜回放** | REPLAY 胶片边框 + 慢动作：断踏板、穿墙、轮子分家、载客掉头。 |
-| **谢幕** | 成绩榜全部 DNF（附原因），“冠军：空缺”，遗憾谢幕；免责声明“本视频纯属娱乐，情节虚构，切勿当真”。 |
+## 项目实现计划 / 大纲 / 步骤
 
-## 4. 实施步骤（每步完成即推送）
+### 1. 目标与边界
 
-1. ✅ 写本计划并推送
-2. ✅ 定稿剧本 → ElevenLabs 生成双解说配音与音效 → 生成 `timeline.json` → 推送音频与脚本
-3. ✅ Three.js 3D 世界：赛道/环境/6 车/角色/特效 → 推送阶段性构建
-4. ✅ 导演分镜 + HUD + 字幕 → 推送
-5. ✅ 程序化配乐 + 混音 + 播放器（横竖屏）→ 推送
-6. ✅ 浏览器本地 MP4 导出（24/30/60fps、可选 BGM）→ 推送
-7. ✅ 四平台文案 + 多比例多款封面（多选下载）→ 推送
-8. ✅ 全面检查（生产构建、页面渲染、导出验证）→ 推送最终版
-9. ✅ 按反馈升级：QQ 飞车式地图（753 m 环形高架赛道 + 360° 回环 + 倾斜弯 + 霓虹护栏 + 加速带 + 道具箱 + 拱门 + 海滨乐园）；**Blender** 无头程序化建模 16 个 GLB（摩天轮、灯塔、城堡、浮空岛、小镇、棕榈树…）；**Three.js** 画质（环境光照 PMREM、4×MSAA HDR、Bloom、调色+暗角、实例化渲染）；**Tripo** 接入（`tools/tripo_gen.py`，有 API Key 即可生成更精细模型并自动替换）→ 推送
-10. ✅ 按反馈调整：解说改为单人（全部台词重新配音、时间轴与音效点重算）；画面调暗（曝光、泛光、环境光、天空与雾色、调色暗角）；模型精细化（Blender：棕榈羽状叶、分叉树干+多团簇树冠+花朵、房屋墙角线/十字窗棂/百叶窗/花箱/雨棚/台阶/屋脊/烟囱、灯塔护栏与礁石、城堡城垛/旗帜/拱窗/城门拱、浮空岛瀑布与花丛、摩天轮横撑与售票亭；三蹦子：胎壁+胎纹+刹车盘+五辐轮毂、挡泥板、后视镜、雨刮、腰线、侧裙、灯框、格栅、排气管）→ 推送
-11. ✅ 车手与赛车模型重做（游戏级）：**Blender** 无头精细建模 `tools/sbz/blender_chars.py` → `chars.glb`（雕刻式头部：下颌/颧骨/鼻翼/耳廓、眼白+虹膜+瞳孔+高光+睫毛+眼睑；7 款发型由数百根发束曲线生成；4 款服装躯干：衬衫纽扣、西装+口袋巾、铁皮盔甲铆钉、T 恤；带五指的手、长短袖、裤腿、运动鞋（鞋带/条纹/鞋底）与皮鞋（金属扣））+ `car_*.glb` 4 款车壳（高段数倒角车身、窗框胶条、钣金缝、镀铬饰条、皮质座椅缝线、仪表台）；**PBR**：程序化法线贴图（车漆金属片、皮革、布料、皮肤毛孔），Three.js 物理材质（皮肤 sheen 次表面感、头发光泽、车漆清漆层 + 金属片底漆）；**Magnific AI** 贴图放大通道 `tools/sbz/magnific_upscale.py`（填入 Freepik/Magnific API Key 即可把贴图放大 2–16 倍并原位替换）→ 推送
-12. ✅ 车手形象实验（蜡笔·铁皮侠，QQ 飞车 Q 版）：**Blender MCP**（官方 blender-mcp 服务 + Blender 插件，无头模式下手动驱动插件命令队列）由 AI 分 8 步下指令建模（`tools/sbz/laibi_mcp/01…08`：材质库 → 头部五官 → 飞机头发型 → 红金盔甲/方舟反应堆/推进器 → 头盔 → 展台灯光 → Cycles 渲染 4 视角 → 导出 GLB），网页新增「车手模型」页：渲染图 + 360° 实时查看；**Tripo AI**：Key 有效但 API 余额为 0（code 2010 余额不足），生成脚本 `tools/sbz/tripo_char.py` 已就绪，充值后运行即自动出现在对比页 → 推送
-13. ✅ 其余车手形象（继续用 **Blender + Blender MCP**）：通用 Q 版车手库 `tools/sbz/chars_mcp/people_lib.py`（同一套头部/发型/身体/配件流程，按角色参数切换），分步脚本 `01…08`；① 土味老板（蚊子、鳟鱼共用）：大背头、金框墨镜、金牙、雪茄、粗金链、啤酒肚、手包、金表；② 咪咪·爽文男主：银发碎刘海、金瞳 V 脸、黑长风衣 + 红围巾、长靴；③ 栗子·中年奶爸：地中海、圆眼镜、格子衬衫、胸前背娃、保温杯、白球鞋；④ 滴滴·出租车司机：鸭舌帽、胡茬、蓝短袖制服、白毛巾、工牌、玻璃茶杯。「车手模型」页新增角色切换（渲染 4 视角 + 360° 实时查看）→ 推送
-14. ✅ 按设定图重做蜡笔（车手 + 专属三轮赛车，**Blender + Blender MCP**）：参照用户提供的《蜡笔赛车角色设定概念板》——车手：棕色上扬刺发、黑色包围式墨镜、山羊胡 + 胡茬、坏笑；红黑金赛车夹克（立领、金色滚边、肩章）内搭黑 T、胸口蓝色六边形发光反应堆；露指红黑手套、黑色工装裤 + 红金护膝护胫、红黑金高帮靴、手持红金头盔。赛车 `tools/sbz/laibi2_mcp/`（10 车身 → 11 车轮 → 12 细节 → 13 渲染 → 14 导出）：前 1 后 2 三轮布局、红珍珠漆 + 金色饰线、LED 大灯、金色轮毂 + 刹车卡钳、大尾翼、镀铬排气（蓝色尾焰）、“01”号码与“蜡笔”车牌，座舱为剧情梗「毛坯房」（水泥地、裸露电线、吊灯泡）。「车手模型」页新增「蜡笔 · 设定图版」：设定图对照、车手 4 视角 + 360°、赛车 3 视角 + 360°、人车合影 → 推送
-15. ✅ 按设定图做鳟鱼（车手 + 专属三轮豪车，**Blender + Blender MCP**）：参照用户提供的《鳟鱼三轮赛车概念设计图》——车手（`people_lib.py` 新角色 `zunyu`）：圆胖脸 + 鼓腮 + 双下巴、黑色蓬松大背头、黑框大墨镜（金铰链）、得意微笑；夏威夷花衬衫（程序生成四方连续贴图：藏青底 + 红/粉扶桑花 + 墨绿叶，世界坐标柱面 UV 保证各部件花朵大小一致，可随 GLB 导出）、敞开古巴领、两圈粗金链、右手金表 + 左手金手串 + 金戒指；黑色运动短裤（白色侧条）、白色中筒袜、白灰运动鞋。赛车 `tools/sbz/zunyu_mcp/`（20 车身 → 21 车轮 → 22 细节 → 23 渲染 → 24 导出）：前 1 后 2、亮黑车身 + 香槟金饰条；金色大鼻子车头 + 镀铬直瀑格栅 + 大灯（“豪华车头，实际廉价”）、皇冠徽标；侧板黑底金框 + 金色鳟鱼标（鱼身/鱼尾/背鳍/鳞线/鱼眼）+“鳟鱼”字样；黑色分段软包沙发座椅（“塑料皮”）+ 扶手 + 头枕、金色护栏；仪表台双屏（山寨感）；后储物箱开盖（矿泉水 + 零食）；尾灯、“鳟鱼”车牌；前轮镀铬多辐 + 后轮宽胎枪灰多辐 + 金卡钳。「车手模型」页新增「鳟鱼 · 设定图版」（设定图分区对照、车手 4 视角 + 360°、赛车 3 视角 + 360°、人车合影）→ 推送
-16. ✅ 按四张设定��做栗子 / 滴滴 / 蚊子 / 咪咪（车手 + 各自专属三轮车，**Blender + Blender MCP**）：车手全部加进通用车手库 `people_lib.py`（新角色 `lizi` / `didi2` / `wenzi` / `mimi2`，新增棒球帽发型 + 贴标文字、凌乱碎发、多口袋马甲、挂绳工牌、红色印花衬衫贴图、雪茄、狗牌项链等部件）；三轮车在 `tools/sbz/boards_mcp/`（`car_lib.py` 通用：冲压钢圈车轮、铁丝车筐、弧形挡泥板、锈斑/油污、卡通头像贴纸、农用货运三轮生成器）——栗子：蓝色锈迹货运三轮 + 白色“栗子”大字 + 男孩头像贴纸 + 加高护栏 + 栗子麻袋/工具箱/铁锹/麻绳；滴滴：黄橙嘟嘟车 + 黑顶棚黄立柱 + TAXI 灯牌 + “滴滴”圆标 + 棋盘格条 + 前后座椅；蚊子：墨绿货运三轮 + 顶棚 + 4 灯射灯排 + “财”字吊饰 + 金色“蚊子”与卷草贴花 + 油污；咪咪：在蜡笔赛车基础上改为白黑红配色 + 蓝色 LED + 黑轮毂红卡钳 + 双拉花 + 鸭尾 + 贯穿尾灯 + MIMI + 盾形徽标 + “打不开的车门”。通用 `render.py` / `export.py` 按角色 id 输出到 `lab/<id>/`。「车手模型」页新增四个「设定图版」→ 推送
-17. ✅ 按《三蹦子竞速大赛赛道全景图》制作赛道地图模型（**Blender + Blender MCP**，`tools/sbz/track_mcp/`：`map_lib.py` 中心线/高度/材质库 → 30 地形·大海·天空 → 31 赛道 → 32 道具 → 33 布景 → 34 渲染 → 35 导出）：海滨城市赛道共 6 段——① 大直道（起点门“三蹦子竞速大赛”、棋盘格起跑线、发车格、红白水马）；② 水泥墩子障碍物（S 弯 + 交错摆放的新泽西水泥墩 + 红白路肩）；③ 爬坡（爬上高架平台、黄色箭头）；④ 高起落（橙色跳台 → 腾空空档 → 下坡落地区）；⑤ 直角转弯（90° 急弯 + 外侧黄色箭头牌 + 弯外“鱼塘”剧情伏笔）；⑥ 直路冲刺（终点门“终点 · 冲线”）；沿线蓝白护墙、白边线黄中线、桥墩、路段编号牌、广告牌（草台杯 / 冲鸭！/ 滴滴出行 / 栗子糖炒 / 鳟鱼豪车 / 蚊子五金）、彩旗、路灯；布景：带窗户贴图的城市天际线 + 玻璃塔楼、电视高塔、摩天轮、半岛红白灯塔、沙滩棕榈树、红顶小屋、灌木小树、山脚松林、远山、帆船、码头栈桥、“三蹦子竞速大赛”飞艇、云朵。网页新增「赛道地图」页：模型渲染全景/俯视/六段特写与原图逐一对照 + 可拖动的 3D 地图（map.glb）；待确认后再替换进视频 → 推送
-18. ✅ 用新地图 + 设定图版车手/赛车重做整部视频（`frontend/src/sbz2/`，旧版 `sbz/` 完整保留）：新剧本单人解说重新配音（约 4 分 17 秒）；六位选手、七条跑道，栗子赛车加宽占两道并斜停压线；赛前逐一展示车辆与车手；蚊子/栗子/咪咪/蜡笔车底起火（“官方道具包”）；车手走到车边跳进驾驶位，滴滴车门拉不开（滴滴车新增可动车门）→ 爬车窗进车；倒计时 3 时蜡笔抢跑并倒回（抢跑警告）；咪咪从最外侧冲上边缘高台挂住；鳟鱼直接撞碎水泥墩（石膏碎屑）一马当先；蚊子自动驾驶连躲几块后 AEB 失灵撞墩报废；栗子飞跃落地后轴断裂、两只后轮滚走；鳟鱼直角弯踩断刹车踏板（特写棚 + 高速摄像机 ×0.1 慢放）撞穿外墙落入池塘；蜡笔刹车失灵、应急拉手找不到（特写）从同一洞口飞出；滴滴全程刹车灯常亮、又稳又慢，终点前观众闯入招手→坐上后座给钱→滴滴掉头逆向开走；谢幕回顾 + 成绩单（无人完赛）。实时名次、小地图（新赛道 + 水泥墩）、速度表、配乐与音效全部按新剧情重排；导出与封面同步更新 → 推送
-19. ✅ 按修改意见调整：标题副题改为“全程直播 · Live”；赛道标牌文字放大；修复开场 11–12 秒（水泥墩镜头）卡顿（启动时预热渲染）；栗子赛车恢复正常尺寸（仅斜停压两道）；车手卡片只显示名字；车底火焰改为写实火焰（火芯/火舌/火星/烟/闪烁光，随车速拖尾）；咪咪取消坡道、高台降低，起步动力过猛甩出跑道挂上高台；车内摄像机机位更真实（脚坑特写 + 抖动）；整体车速大幅提升、加强速度感；换用新解说稿重新配音（ElevenLabs 额度用尽，暂用 edge-tts 云健音色，充值后可一键换回“大刘”）→ 推送
-20. ✅ 画面改成直播 / 电影式：赛道边固定长焦机位跟摇 + 自动变焦（车在画面里大小稳定）、沿赛道平滑追车（不再跟车头左右甩）、侧面高位跟拍、弯道内侧一镜到底看撞穿落水；片头航拍不再在直角弯急甩、发车与倒计时同机位连续；所有镜头经自动检查（出画 / 遮挡 / 贴地 / 急甩）。解说改为“先看到再解说”：撞墩、AEB 撞车、起飞落地、踩断踏板、蜡笔加速、滴滴停车等都提前到对应解说之前约半秒发生 → 推��
-21. ✅ 去掉“未卜先知”+ 修穿模：车辆与车手展示改为镜头从上往下扫（从车顶俯视落到车身与车手）；先上车、后起火——车手全部坐进车里发动引擎，车底才冒火，解说先惊讶“起火了？”再解释成“官方道具包”；直角弯改为先看到鳟鱼没减速直接撞穿护墙飞进池塘，解说喊出来之后才切车内摄像机回放踩断踏板；整片逐个事件核对“先发生、后解说”（上车、拉车门、爬车窗、抢跑、撞墩、起飞落地、踏板断、蜡笔加速、观众招手、滴滴停车等）；穿模修复：车手绕过车头再沿车侧走到驾驶位、先抬腿再跨进车里，滴滴同样绕车头走到车门，蜡笔与蚊子在水泥墩段拉开车距不再重叠，栗子断轴后车身贴合下坡路面不再插进地里；封面取景时间同步新时间轴 → 推送
+- 主题：研究“识人之术”，重点讲清《吕氏春秋》中的 **八观六验**，并把古代文本翻译为今天可观察、可验证的行为线索。
+- 形式：一个可以直接打开观看的静态网页视频工作台，而不是预先渲染好的 MP4。
+- 风格：黑曜石底色、黛青与鎏金色彩、宣纸颗粒、篆刻印章、环形观测轨道、克制的高级感；避免廉价国风模板化。
+- 伦理边界：八观六验是观察框架，不是“看一眼就给人定性”的心理测谎术；人物判断应保留情境、时间与证据。
 
-22. ✅ 画质 / 模型全面优化：户外天空环境光（车漆、镀铬、玻璃、水面能映出蓝天和太阳，替代原来的室内环境光）；渐变天空背景（地平线浅、天顶深，与远处雾色一致）；光照方向与天空中的太阳一致；阴影贴图 4096 + 随镜头远近自适应范围（特写阴影更清晰）；车漆加清漆层高光、金属/镀铬/金色件反光增强、玻璃与车灯高光、轮胎布料等哑光件去油光；贴图各向异性过滤拉满（斜看路面/牌子不糊）；后期：轻微锐化、极淡胶片颗粒、镜头边缘微色散、调色微调；网页预览暂停时按 1920 高清渲染静帧 → 推送
+### 2. 已完成的资料研究
 
-23. ✅ 重新生成发布文案与封面：四个平台（小红书 / 抖音 / 视频号 / B站）文案按最新正片重写——海滨站全程直播、六位车手各自的名场面（抢跑、撞墩、自动驾驶最后一块没躲过、后轮离家出走、直角弯不减速飞进鱼塘 + 车内回放踏板断了、把刹车当油门、终点前接单掉头），B站附最新时间轴；标题字数与话题数均在平台限制内（旧文案保留不用）。封面按最新时间轴重选画面并扩充到 9 款（片名 / 直角弯撞穿 / 踏板踩断 / 后轮离家出走 / 自动驾驶撞墩 / 刹车当油门 / 一发动就着火 / 车门打不开 / 终点前接单）× 16:9、4:3、3:4 三种比例，在网页「封面」页一键生成、可多选打包下载；“下载剧本全文”同步为最新剧本顺序与时间 → 推送
+本项目以可核对的一手文本为主，并将“八观”与“六验”分开呈现：
 
-24. ✅ 新增「动漫」画风（同一套剧情、镜头、配音，播放器右下角一键切换「写实 / 动漫」，网址加 `?style=anime` 直接打开动漫版；导出 MP4 与封面都跟随所选画风，文件名带“动漫版”）。工具选型：在工具箱里对比后选用 **Three.js 自写着色器**（与现有 3D 场景、镜头、配音完全复用，逐帧确定性渲染可直接导出），用 **Playwright** 无头浏览器逐帧自检。动漫效果：赛璐璐分层上色（三阶硬明暗 + 角色硬边轮廓光）；墨线描边（法线 + 深度边缘检测，按画面大小淡出，长焦远景也有线，线色随底色）；手绘动漫天空（积云分层阴影 + 卷云）与动漫调色（冷色阴影、暖色高光、高饱和、柔和泛光）；冲击帧（撞墩、AEB 撞车、高台落地、撞穿护墙、踏板断裂、蜡笔飞出的瞬间黑白 / 红黑反相 1~2 帧）；集中线 + 速度线（一拍二抖动）；拟声字（呼——！嗖——！咣！！砰！！哐当——！！起飞——！咚！咔！轰隆！！噗通！咔嚓！！吱——叮～）跟随事件位置弹出，全部在画面事件发生时出现、早于解说；赛璐璐火焰与烟；阳光星芒光晕；选手登场的代表色斜切色带 + 网点；章节转场斜切色带扫屏；动漫字幕（白字深紫描边 + 渐变名牌）。自检：9 个关键镜头描边覆盖 2%~3.4%，亮度与写实版相当，写实版不受影响 → 推送
+- 《吕氏春秋》传统编排为十二纪、八览、六论；“论人”位于 **季春纪第三**。
+- 原文关键段：
+  > 凡论人，通则观其所礼，贵则观其所进，富则观其所养，听则观其所行，止则观其所好，习则观其所言，穷则观其所不受，贱则观其所不为。
+  > 喜之以验其守，乐之以验其僻，怒之以验其节，惧之以验其特，哀之以验其人，苦之以验��志。
+- 原文还给出“六戚四隐”：父母、兄弟、妻子；交友、故旧、邑里、门郎。视频将其作为“多源交叉验证”的收束，而非额外编造的第九、十条观察。
+- 一手文本来源：维基文库《呂氏春秋》卷三（可在页面内进入“季春纪—论人”）：
+  https://zh.wikisource.org/wiki/呂氏春秋/卷三
+- 交叉核对来源：国学网《吕氏春秋·季春纪第三》、中华经典/古籍检索页面以及公开搜索结果中的原文片段。网络文章只用于确认现代常见的“八观六验”称呼，不替代古籍原文。
+- 资料处理原则：视频旁白明确区分“原文”“今译”“现代延伸”；现代职场/社交案例是创作性转译，不冒充先秦原意。
 
-25. ✅ 新增「2D 动画」画风（播放器右下角三选一：写实 / 3D 动漫 / 2D 动画；网址 `?style=2d` 直接打开；导出 MP4 与封面跟随所选画风，文件名带“2D动画版”）。做法：不再渲染 3D，改用 Canvas 2D 逐帧手绘（`frontend/src/sbz2/flat/`：`ink.ts` 描线平涂画笔、`people.ts` 车手、`cars.ts` 赛车、`scene.ts` 横版场景与分镜），仍沿用同一套剧情时钟、车辆位置、事件、配音、字幕与提示条，所以“先看到再解说”的节奏完全一致。画面：横版 2.5D 侧视镜头（近大远小、车道纵深、平移跟拍、远景视差）；六位车手按设定集手绘（发型 / 墨镜 / 帽子 / 服装 / 体型、动漫大眼、眨眼、表情随剧情变化：惊吓 / 大喊 / 开心）；六台赛车按设定集手绘（蜡笔红金尾翼赛车、咪咪白红蓝灯赛车、鳟鱼黑金大鼻子豪车、滴滴黄橙嘟嘟车 + TAXI 顶灯 + 会被拽动的车门、栗子蓝色锈迹货运三轮 + 栗子麻袋 + 小男孩贴纸、蚊子墨绿货运三轮 + 顶棚 + 四联射灯 + “财”字吊饰），车轮转动 / 高速拖影 / 刹车灯发光 / 悬挂颠簸 / 速度拖线；场景：手绘天空积云、远景海湾城市（电视塔、摩天轮、灯塔、帆船）、看台观众欢呼、棕榈树、路灯、六块广告牌、路段牌、起终点拱门、蓝白护墙、红白路肩、爬坡高架与桥墩、橙色跳台与腾空段、直角弯外的鱼塘与芦苇、咪咪挂上的高台、水泥墩；剧情：赛前斜向错开的发车格、开合跳热身、走到车边跳进驾驶位、滴滴拽车门（车门晃动）后爬车窗、发动后车底赛璐璐火焰、蜡笔抢跑急停扬尘、咪咪甩出跑道挂上高台、鳟鱼撞碎石膏般的水泥墩、蚊子撞墩车头撞扁冒烟、栗子飞跃落地后轮先走一步并拖出火花、鳟鱼撞穿护墙落水（墙洞碎块、水花、涟漪）、车内回放踏板特写（脚踩下、踏板断裂掉落、火花、取景框 + REC）、蜡笔从同一个洞飞进鱼塘、滴滴刹车灯常亮、观众闯入招手→坐上后座递钱（钞票飞到司机手里）→掉头开走；选手登场为动漫立绘卡（代表色斜切背景 + 放射线 + 网点 + 大号号码 + 半身立绘 + 赛车）；沿用动漫版的拟声字、集中线、速度线、冲击帧（2D 黑白 / 红黑反相）、章节斜切转场与动漫字幕。自检：无头浏览器逐帧渲染无报错、每帧约 0.3~0.9 秒（远快于 3D），单独绘制每台车 / 每个人量尺寸，并把画面转成色块字符图逐一核对构图（车、人、护墙、路面、天空位置） → 推送
-
-## 5. 进度日志
-
-- 2026-10-13：阶段 1 —— 计划与大纲完成，推送。
-- 2026-10-13：阶段 2 —— 剧本定稿（30 个分镜、67 句双人解说），ElevenLabs 生成配音 67 条 + 音效 29 个，生成 `timeline.json`（总长约 6 分 50 秒）。
-  - 说明：试验发现 `eleven_multilingual_v2` + 英文预置声线读中文会出现“遥遥领先→妖猫领先”等错读（用 ElevenLabs Scribe 语音识别回测），免费账户又无法调用中文社区声线，因此改用 `eleven_v3`，回测识别全部准确。
-- 2026-10-13：阶段 3–8 —— 完成并推送：
-  - 3D 世界（赛道、雨林、泥塘、隧道墙、加油站、6 辆三蹦子与车手、火焰/烟尘/水花特效），整片每一帧都是时间 t 的纯函数，播放与导出逐帧一致；
-  - 导演分镜（29 个镜头，含倒计时、正赛、慢镜回放、谢幕）+ HUD（速度表、小地图、排名板、名片、倒计时灯、REPLAY 边框、成绩榜、免责声明）+ 双解说字幕；
-  - 音效时间表 `cues.json`（135 条，由 `tools/gen_cues.ts` 从比赛事件自动生成）+ 程序化配乐（OfflineAudioContext 一次性合成，解说时自动压低）；
-  - 网页播放器：横屏/竖屏、字幕开关、BGM 开关、章节跳转、全屏、键盘快捷键；
-  - 浏览器本地 MP4 导出（WebCodecs H.264 + AAC，1080/720，24/30/60fps，BGM 可选、解说始终保留，可选烧录字幕，支持直接写盘）；
-  - 小红书/抖音/视频号/B站 四平台文案（标题字数与话题数均在平台限制内，带一键复制）；
-  - 封面：16:9、4:3、3:4 各 6 款共 18 张，可多选打包下载；
-  - 检查：TypeScript 无错误、生产构建通过、`tools/smoke.ts` 全片 0.25s 步长无报错/NaN。
-- 2026-10-13：第 9 步完成——赛道换成 QQ 飞车风格环形高架地图（主直道剧情段不变，搞笑桥段位置保持），Blender 生成场景模型、Three.js 画质升级、预留 Tripo 模型替换通道。
-- 2026-10-13：第 10 步完成——单人解说、画面调暗、模型精细化。
-- 2026-10-13：第 11 步完成——车手与赛车模型重做（Blender 精细建模 + PBR 材质 + Magnific 贴图放大通道）；加载完成后自动替换，原剧情动作/配件不变。
-- 2026-10-14：第 12 步——蜡笔车手形象对比页（Blender MCP 建模完成；Tripo 待 API 充值）。
-- 2026-10-14：第 13 步——土味老板（蚊子/鳟鱼）、咪咪、栗子、滴滴四套车手模型（Blender MCP）上线「车手模型」页，待确认后替换进视频。
-- 2026-10-14：第 14 步——按设定图重做蜡笔车手 + 三轮赛车（Blender MCP），上线「车手模型 · 蜡笔 · 设定图版」，待确认后替换进视频。
-- 2026-10-14：第 15 步——按设定图做鳟鱼车手 + 黑金三轮豪车（Blender MCP），上线「车手模型 · 鳟鱼 · 设定图版」，待确认后替换进视频。
-- 2026-10-14：第 16 步——按设定集做栗子 / 滴滴 / 蚊子 / 咪咪车手 + 各自专属三轮车（Blender MCP），上线「车手模型」四个「设定图版」，待确认后替换进视频。
-- 2026-10-14：第 17 步——按赛道全景图制作赛道地图模型（Blender MCP），上线「赛道地图」页，待确认后替换进视频。
-- 2026-10-14：第 18 步——新地图 + 设定图版车手/赛车正式替换进视频，按新剧情（起火道具包、爬车窗、抢跑、挂高台、撞墩、断轴、踩断踏板、撞穿落水、观众接单逆行）全部重拍。
-- 2026-10-14：修复——导出 MP4 时报错“cannot call stop without calling start first”（音效排程顺序问题），导出恢复正常。
-- 2026-10-14：修复——导出卡在“生成配乐 0%”：配乐改为分段生成再拼接（进度真实显示、内存更小）；配乐或音频万一失败不再无限等待，自动按无配乐继续导出。
-
-- 2026-10-15：第 19 步——按修改意见调整：Live 副题、标牌放大、开场卡顿修复、栗子正常尺寸、卡片只留名字、写实火焰、咪咪起步甩出跑道上高台、车内摄像机、全面提速、新解说（暂用 edge-tts 配音）。
-
-- 2026-10-15：第 20 步——机位改为直播/电影风格（长焦跟摇、平滑追车、高位跟拍、一镜到底），事件全部先于解说发生，告别“预言家”解说。
-
-- 2026-10-15：第 21 步——展示镜头从上到下；发动后才起火、解说再解释为道具；鳟鱼先撞穿飞出、再看车内回放；全片去除“未卜先知”；修复上车走位、车辆重叠、车身陷地等穿模。
-
-- 2026-10-15：第 22 步——画质与模型全面优化：天空环境反射、渐变天空、清晰阴影、车漆清漆层、金属玻璃反光、锐化与胶片质感、暂停高清静帧。
-
-- 2026-10-15：第 23 步——发布文案按最新正片重写；封面重选画面扩充为 9 款 × 3 比例；剧本全文同步更新。
-
-- 2026-10-15：第 24 步——新增动漫画风：赛璐璐上色、墨线描边、手绘天空、冲击帧、集中线/速度线、拟声字、转场与动漫字幕；一键切换，导出与封面同步。
-
-- 2026-10-15：第 25 步——新增 2D 动画画风：手绘车手与赛车、横版侧视镜头、手绘海滨赛道与全部剧情事件；写实 / 3D 动漫 / 2D 动画三选一，导出与封面同步。
-
-
----
-<!-- SANBENGZI:END -->
+### 3. 视频分镜与旁白大纲
 
+预计时长约 90 秒，时间轴由 `APP.scenes` 统一驱动画面、字幕与旁白：
 
-# 🍂 新项目：《在人间做老师》· 网页实时渲染视频（2026-10-12 新增）
+1. **序章｜观人，不是窥人**：粒子、印章、标题出现；提出问题。
+2. **文本坐标｜季春纪·论人**：展示书卷索引，说明篇章位置与“反诸己”。
+3. **八观｜看人在不同处境中的选择**：八个观测点以环形轨道逐个点亮：通/礼、贵/进、富/养、听/行、止/好、习/言、穷/受、贱/为。
+4. **六验｜把人放进情绪压力测试**：喜、乐、怒、惧、哀、苦；强调“情境反应”，不是故意操控他人。
+5. **六戚四隐｜不要只看一个切片**：将亲属、朋友、故旧、乡里等关系网络可视化为多源节点。
+6. **古法的现代翻译｜记录、复核、延迟判断**：三条当代使用原则，反对贴标签。
+7. **结尾｜先观己，再观人**：回到《吕氏春秋·先己》的思想线索，给出克制的结语与来源卡片。
 
-> 入口：**[/teacher/index.html](https://ethscriptions-rongduan.static.hf.space/teacher/index.html)** · 源码：`teacher/source/`
->
-> 说明：��项目是**全新制作**、**新增**在仓库 `teacher/` 目录下的独立项目。没有参考、也没有删除仓库里已有的「收猴子的故事」代码（根目录 `index.html`、`assets/`、`source/`、`voice/`、`covers/` 均原样保留）。
+旁白稿采用短句、低速、留白式节奏；默认使用浏览器中文语音合成预览，并同步显示逐句字幕。没有预装外部配音文件，避免版权与下载体积问题。
 
-## 0. 题材理解
+### 4. 技术方案
 
-一位教书多年的老师在 10 月 12 日 20:17 写下 520 字随笔，分四段：
-1. **学生**——"知识改变命运"不再被认可，缺少内驱力，网络让个性压过集体；
-2. **家长**——能共情老师的少，有的质疑权威以凸显"爱孩子"，有的做甩手掌柜；
-3. **环境**——舆论不站在老师一边，学校间竞争把成绩压力压到一线，琐碎与人打交道的时刻在消耗身心；
-4. **自己**——课堂+班主任身心俱疲；做好老师需要强大的内心、适时的冷漠、没有期待、聪明的大脑、过硬的专业素质——"全部要求放在一个人身上，实在是太沉重了"。
+- **零构建静态应用**：原生 HTML / CSS / JavaScript，适合 Hugging Face Spaces 的 `sdk: static`。
+- **视频画面**：单一 Canvas 作为实时舞台；`renderScene(ctx, t, options)` 是接近纯函数的时间驱动渲染器，因此预览、拖动、封面生成与导出使用同一套视觉逻辑。
+- **视觉系统**：程序化粒子、光晕、轨道、书卷线框、印章、网格、胶片颗粒与中英文排版；横屏 16:9 和手机竖屏 9:16 自动调整构图。
+- **音乐/音效**：Web Audio API 程序化生成低频 drone、钟击、纸张/翻页式噪声与段落提示音，不加载第三方音乐素材。预览时音效与旁白在章节切换时触发。
+- **旁白**：`SpeechSynthesis` 选择中文 voice，支持播放/暂停/重播单句；浏览器不允许把系统语音直接无损写入 Canvas 导出流时，导出会明确提示“系统旁白仅在预览中播放”，而不是假装已嵌入。
+- **导出**：逐帧把同一 Canvas 捕获为视频流，支持 2K / 1080P / 720P、24 / 30 / 60 fps，以及“带 / 不带背景音乐”。优先使用浏览器支持的 MP4 MIME；若浏览器不提供 MP4 编码器，则走 WebM 回退并提示兼容性，避免伪造 MP4 扩展名。
+- **封面**：按 4:3、3:4、16:9 生成多款程序化封面卡；可多选并逐张下载 PNG。封面与视频共享色板和视觉母题。
+- **平台文案**：内置小红书、抖音、微信视频号、哔哩哔哩四套标题/描述/标签；实时显示标题字数与话题数量，一键复制。
 
-**基调**：不煽情、不控诉、不鸡汤。克制、安静、真实——像深夜台灯下一个人把话说完。视觉语言选择"**夜晚教室 / 黑板 / 粉笔 / 台灯 / 纸张**"，主色为墨绿黑板 + 暖黄台灯 + 粉笔白 + 一抹批改红。
+### 5. 实施步骤（每个大动作完成后提交到 Space）
 
-## 1. 需求拆解与实现方式
+- [x] 0. 清空旧项目代码，写入本 README 作为新项目计划并同步。
+- [ ] 1. 完成研究卡片、旁白稿、章节数据与引用来源。
+- [ ] 2. 完成 Canvas 电影舞台、横竖屏构图、字幕与时间轴控制。
+- [ ] 3. 完成程序化音乐、音效与浏览器旁白控制。
+- [ ] 4. 完成浏览器本地视频导出：分辨率、帧率、BGM 开关、兼容性提示。
+- [ ] 5. 完成四平台元数据、一键复制、字数/话题限制、比例多选封面。
+- [ ] 6. 完成移动端适配、无障碍标记、错误提示与空状态。
+- [ ] 7. 运行静态检查和本地服务验证，修复后推送最终版。
 
-| # | 需求 | 实现 |
-|---|------|------|
-| 1 | 全新制作、只增加不删除 | 新目录 `teacher/`；用 `huggingface_hub.upload_folder(path_in_repo="teacher")` 增量上传，**从不调用删除** |
-| 2 | 旁白解说 | 中文神经网络 TTS（本地 Kokoro v1.1 中文模型 / sherpa-onnx，女声 sid=10，语速 0.86；原计划 edge-tts 因服务端 403 改用本地模型）逐句生成 mp3 + 精确时间轴 JSON；字幕逐句同步 |
-| 3 | 音乐 | Web Audio **程序化作曲**：钢琴 + 弦乐 pad + 低频大提琴，按四个段落切换和声与情绪（静夜→压抑→喧嚣→疲惫→温柔收尾），无版权风险 |
-| 4 | 音效 | 全部算法合成：粉笔书写沙沙声、黑板擦、翻页、手机提示音、消息"叮"声潮、钟表滴答、心跳、铅笔折断、台灯开关、风声等 |
-| 5 | 网页直接看视频 | 自研 Canvas 2D 动画引擎 + 播放器（播放/暂停/拖动/章节/全屏/横竖屏切换/字幕开关） |
-| 6 | 浏览器本地导出 MP4 | WebCodecs `VideoEncoder`(H.264) + `AudioEncoder`(AAC) + `mp4-muxer`；**逐帧确定性离屏渲染**（非录屏）+ `OfflineAudioContext` 离线混音，音画严格同步 |
-| 7 | 帧率可选 | 24 / 30 / 60 fps；码率可选 |
-| 8 | 手机竖屏 | 横屏 1920×1080（B站/视频号）与竖屏 1080×1920（抖音/小红书/视频号）两套布局，竖屏含平台 UI 安全区，可打开安全区参考线 |
-| 9 | 标题/描述/标签 | 小红书（标题≤20字、≤10话题）、抖音（≤30字、≤5话题）、视频号（≤16字、话题不限）、B站（≤80字、≤10话题）；每项一键复制，页面实时显示字数校验 |
-| 10 | 封面 | 4:3 / 3:4 / 16:9 三种比例 × 多套设计，网格预览、**多选**、单张下载或打包 ZIP |
-| 11 | 实况图（Live Photo） | 按 LiveCanvas 流程：同一套 Canvas 引擎在 Node（@napi-rs/canvas）逐帧渲染 1080×1440 / 30fps / 3 秒动效卡 → ffmpeg 编码 H.264 → `pair_live_photo.py` 写入 Apple 配对元数据（JPEG MakerApple 17 + MOV content.identifier + still-image-time）→ 每张输出 `jpg + mov`，打包 ZIP 供网页下载 |
-| 12 | 进度监督 | 每完成一个大动作推送一次本 Space，提交信息注明阶段 |
+### 6. 运行与验收
 
-## 2. 技术架构
-
-```
-teacher/                       ← 构建产物（静态网页，直接在 Space 打开）
-  index.html  assets/
-  voice/line_XX.mp3            ← 旁白配音
-  fonts/                       ← 中文字体子集（霞鹜文楷 / 思源宋体，仅含用到的字，体积小）
-  live/在人间做老师-实况图.zip  ← 实况图 jpg+mov 打包
-teacher/source/
-  frontend/src/teacher/
-    script.ts      ← 旁白与分镜（唯一真相源）
-    timeline.json  ← TTS 生成的逐句时间轴
-    engine.ts      ← 缓动、随机数、绘图工具（纯函数）
-    scenes.ts      ← 分镜场景：render(ctx, t, layout) 纯函数
-    audio.ts       ← 程序化音乐 + 音效 + 离线混音
-    exporter.ts    ← WebCodecs + mp4-muxer 导出
-    covers.ts      ← 封面设计（多比例多款）
-    live.ts        ← 实况图动效卡（浏览器与 Node 共用）
-    copy.ts        ← 四平台发布文案
-  tools/
-    gen_voice.py   ← Kokoro 本地 TTS 生成配音 + 时间轴
-    render_live.ts ← Node 端逐帧渲染实况图
-    make_live.sh   ← ffmpeg 编码 + LiveCanvas 配对 + 打包
+```bash
+python -m http.server 4173
+# 浏览器访问 http://localhost:4173
 ```
 
-**核心原则：画面是时间 t 的纯函数。** 预览时 t 取自音频时钟；导出时 t = 帧号 / fps。因此 24/30/60 帧导出的画面与预览完全一致，帧率只影响流畅度。
-
-## 3. 分镜大纲（约 2 分 40 秒）
-
-| 段 | 时长 | 画面 | 声音 |
-|----|------|------|------|
-| 序 | ~14s | 夜。空教室，台灯"咔哒"亮起；手写日期"10月12日 20:17"；标题粉笔字《在人间做老师》 | 台灯开关、粉笔书写、钢琴单音 |
-| 一 · 学生 | ~32s | 黑板上"知识改变命运"被一点点擦淡；课桌上亮起一块块手机屏；整齐的点阵中一个点挣脱、拉扯队形 | 黑板擦、手机提示音、低音 pad |
-| 二 · 家长 | ~38s | 家长群消息气泡如潮水涌上屏幕；"？"越来越多；天平一端"爱孩子的人设"；最后一张空椅子"甩手掌柜" | 消息"叮"声潮、心跳渐强 |
-| 三 · 环境 | ~38s | 舆论评论弹幕刮过；学校之间的排名柱子上升，压力箭头落到一个小小的粉笔人身上；"教书育人"四个大字被无数细线牵扯 | 风声、钟表滴答、弦乐紧张 |
-| 四 · 自己 | ~44s | 深夜批改，作业本堆成山，时钟转过午夜；五个要求（强大的内心/适时的冷漠/没有期待/聪明的大脑/过硬的专业素质）化作砝码逐一压在一支粉笔上——粉笔"啪"地断了 | 粉笔折断、静默、钢琴回归 |
-| 尾 | ~16s | 半截粉笔仍在黑板上写下："致每一位，在人间做老师的人。"台灯熄灭 | 温柔和弦收束 |
-
-## 4. 实施步骤与推送节点
-
-1. ✅ 写本计划 → **推送 #1**
-2. ✅ 旁白文案定稿 + TTS 配音 + 时间轴 + 字体子集 → **推送 #2**
-3. ✅ 动画引擎与六个分镜（横屏/竖屏）+ 程序化音乐音效 + 播放器 → **推送 #3**
-4. ✅ 浏览器 MP4 导出（24/30/60fps，横/竖屏）→ **推送 #4**
-5. ✅ 四平台文案 + 4:3/3:4/16:9 多款封面多选下载 → **推送 #5**
-6. ✅ 实况图（jpg+mov）生成、配对校验、ZIP 打包 → **推送 #6**
-7. ✅ 生产构建、整体验收、最终推送 → **推送 #7**
-
-## 5. 进度日志
-
-- 2026-10-12 · 推送 #1：完成计划与大纲。
-- 2026-10-12 · 推送 #2~#5（合并）：40 句旁白（Kokoro 本地 TTS，总时长 4:03）+ 逐句时间轴 + 字体子集（霞鹜文楷 / 思源宋体 Black）；
-  Canvas 引擎与六个分镜（序 / 一 学生 / 二 家长 / 三 环境 / 四 自己 / 尾声），横屏 16:9 + 竖屏 9:16 两套构图；
-  OfflineAudioContext 程序化配乐（钢琴/铺底/贝斯，按章节换和弦，旁白自动闪避）+ 20 余种合成音效；
-  WebCodecs + mp4-muxer 浏览器本地导出 MP4（24/30/60fps、横/竖屏、可选烧录字幕）；
-  四平台标题/描述/话题（字数与话题数已校验）+ 4 款 × 3 比例共 12 张封面（多选 ZIP 下载）。
-  在线���览：https://ethscriptions-rongduan.static.hf.space/teacher/index.html
-- 2026-10-12 · 推送 #6：5 组实况图（1080×1440 · 30fps · 3s，静帧 2.6s）：bun + @napi-rs/canvas 渲染 → ffmpeg H.264 无声编码 →
-  livecanvas `pair_live_photo.py` 写入 Apple Content Identifier 并自检通过 → 打包 `teacher/live/在人间做老师-实况图.zip`（JPG+MOV+使用说明）。
-  注：为兼容 ffprobe 7.x，对 pair_live_photo.py 做了一处只读校验字段回退补丁（见 source/tools/livecanvas/PATCH_NOTE.txt）。
-- 2026-10-12 · 推送 #7（最终）：无头 Chromium 实机验收与优化——
-  - **加载提速**：浏览器实时合成 4 分钟音轨实测需 ~58 秒 → 改为用同一套合成代码离线预渲染 `teacher/audio/soundtrack.mp3`（tools/bake_soundtrack.mjs），
-    页面约 1 秒就绪（不含网络下载）；经互相关校验，浏览器解码后与原始波形 **0 采样偏移**，音画严格同步。文件缺失时自动回退实时合成（`?synth=1` 可强制）。
-  - **导出兼容**：优先 H.264 + AAC（Mac 上 Chrome / Safari）；浏览器无 H.264/AAC 编码器时自动回退 VP9/AV1 + Opus（仍为 MP4），界面显示实际编码。
-  - 实测：竖屏 30fps、横屏 60fps 导出帧数/时长精确（180 帧/6s、240 帧/4s），音量正常（均值 −16.8 dB，峰值 −2.5 dB）；手机 390px 宽默认竖屏、无横向溢出；
-    封面 12 张全选 ZIP 下载正常；实况图 ZIP 可下载；控制台零报错。
-  - 在线地址：https://ethscriptions-rongduan.static.hf.space/teacher/index.html
-
-
----
-
-> 以下为仓库中原有项目的说明（原样保留）
-
-
-# 🐒 收猴子的故事 —— 子木土土动画讲解（网页实时渲染版）
-
-> 一个用代码"画"出来的经济学科普动画：网页打开即播放，可在浏览器本地导出 MP4（B站横屏 / 抖音竖屏，多帧率可选），附带发布文案与封面图。
-
----
-
-## 一、项目目标（需求拆解）
-
-| # | 需求 | 实现方式 |
-|---|------|----------|
-| 1 | 清空 HuggingFace 仓库 `Ethscriptions/rongduan`，之后每个大动作都推送 | `huggingface_hub` Python API：先删除全部旧文件，再分阶段 `upload_folder` 提交，提交信息标注阶段 |
-| 2 | 动画讲述经济学寓言"收猴子的故事" | 原创分镜脚本 + 纯 Canvas 2D 矢量动画引擎（无视频素材、无图片素材，全部代码绘制） |
-| 3 | 博主"子木土土"出镜讲解 | 代码绘制的卡通主播形象：眨眼、口型随配音音量实时开合、手势、表情切换 |
-| 4 | 旁白解说 | 中文神经网络 TTS 预生成配音（逐句 mp3 + 精确时间轴 JSON），字幕逐句同步 |
-| 5 | 背景音乐 + 音效 | Web Audio API **程序化合成**：原创 BGM（分段情绪：田园→狂热→悬疑→崩盘→反思），音效（金币、铃铛、猴叫、锣、鼓点、嗖声、崩塌）全部算法生成，无版权风险 |
-| 6 | 网页上直接看到视频效果 | 自研播放器：播放/暂停/进度拖动/章节跳转/横竖屏切换/全屏 |
-| 7 | 浏览器本地导出 MP4 | WebCodecs `VideoEncoder`(H.264) + `AudioEncoder`(AAC) + `mp4-muxer` 封装；逐帧离屏确定性渲染（非录屏），音频用 `OfflineAudioContext` 离线混音，保证音画同步、不掉帧 |
-| 8 | 横屏（B站）1920×1080 | 16:9 布局：左侧舞台 + 右下主播小窗 + 底部字幕 |
-| 9 | 竖屏（抖音）1080×1920 | 9:16 专属布局；**安全区**：顶部预留刘海/状态栏/搜索栏，底部预留文案/进度条/评论框，右侧预留点赞/评论/分享按钮列；可开启"安全区参考线"预览 |
-| 10 | 帧率可选 | 24 / 25 / 30 / 50 / 60 fps，码率可选 |
-| 11 | 发布文案 | 抖音 & B站 各自的标题 / 简介 / 标签，一键复制 |
-| 12 | 封面图 | 横屏 1920×1080、竖屏 1080×1920（另附 B站 4:3 封面）一键导出 PNG |
-
----
-
-## 二、技术架构
-
-```
-frontend/
-  public/voice/            ← TTS 预生成配音 line_XX.mp3
-  src/video/
-    script.ts              ← 分镜 + 旁白文案（单一真相源）
-    timeline.json          ← 由工具脚本生成：每句配音起止时间
-    engine.ts              ← 时间轴、缓动函数、随机数、绘图工具
-    characters.ts          ← 子木土土 / 收猴人 / 助手 / 村民 / 猴子 绘制
-    scenes.ts              ← 各分镜场景绘制（按时间 t 纯函数渲染）
-    layout.ts              ← 横屏 / 竖屏 布局与安全区
-    audio.ts               ← BGM + 音效合成、离线混音
-    exporter.ts            ← WebCodecs + mp4-muxer 导出
-  src/components/          ← 播放器 UI、导出面板、文案面板、封面面板
-tools/
-  gen_voice.py             ← edge-tts 生成配音 + 时间轴
-```
-
-**核心设计：渲染是时间 t 的纯函数** `render(ctx, t, layout)`。
-- 实时预览：`requestAnimationFrame` 按音频时钟取 t；
-- 导出：按 `frame / fps` 逐帧取 t，结果与预览一致且与帧率无关。
-
----
-
-## 三、故��分镜大纲（原创脚本）
-
-1. **开场**：子木土土打招呼，抛出问题——"为什么有人明知道价格离谱，还会抢着买？"
-2. **猴子山村**：山脚小村，林子里满是猴子，村民平时嫌它们捣乱。
-3. **神秘商人**：西装商人进村贴告示：一只猴子 10 元收购！村民半信半疑→真拿到钱。
-4. **第一轮**：全村上山抓猴，商人照单全收，笼子越堆越高。
-5. **涨价**：猴子变少，商人宣布 20 元、再到 25 元；村民放下农活全职抓猴。
-6. **天价**：林子里几乎找不到猴子，商人宣布 50 元！但自己要进城，留下助手。
-7. **助手的提议**：助手悄悄说："笼子里的猴子 35 元卖给你们，等老板回来 50 元卖给他。"
-8. **疯狂抢购**：村民掏空积蓄、借钱、卖牛，把猴子全部买回。
-9. **人去笼空**：第二天，商人和助手都消失了，村里只剩满地猴子和一屋子欠条。
-10. **复盘（数据板）**：价格曲线 & 资金流向图——商人赚了多少，村民亏了多少。
-11. **经济学解读**：投机泡沫、博傻理论（Greater Fool）、庄家控盘、流动性陷阱、信息不对称。
-12. **现实映射**：郁金香狂热、炒作的"资产"、高杠杆追涨……如何识别"收猴子的人"。
-13. **结尾**：子木土土总结三句话 + 互动号召（点赞关注）。
-
----
-
-## 四、开发步骤与推送节点
-
-| 阶段 | 内容 | 推送 |
-|------|------|------|
-| P0 | 清空仓库，提交本 README（计划） | ✅ commit: `P0: 清空仓库 + 项目计划` |
-| P1 | 旁白脚本 + TTS 配音 + 时间轴 | commit: `P1: 旁白脚本与配音` |
-| P2 | 动画引擎 + 角色 + 全部场景 + 播放器 | commit: `P2: 动画引擎与场景` |
-| P3 | 程序化 BGM 与音效、混音 | commit: `P3: 音乐与音效` |
-| P4 | MP4 导出（横/竖屏、帧率、码率） | commit: `P4: MP4 本地导出` |
-| P5 | 发布文案 + 封面图 | commit: `P5: 发布文案与封面` |
-| P6 | 构建、验证、发布静态站点 | commit: `P6: 最终版本` |
-
-每一阶段都会把**可直接打开的静态网页**（`index.html` + `assets/`）与源码（`source/`）一起推送到 Space，以便随时检查进度。
-
----
-
-## 五、使用方法
-
-1. 打开页面 → 点击播放即可观看（首次需点击以允许声音）。
-2. 播放器右下角切换 **横屏 / 竖屏**，竖屏可点"扫描线"按钮显示抖音遮挡区域（仅预览，不会导出）。快捷键：空格 播放/暂停，←/→ 快退/快进 5 秒，F 全屏。
-3. 在"导出 MP4"面板选择画面（B站横屏 1920×1080 / 抖音竖屏 1080×1920）、帧率（24/25/30/50/60）与画质 → 点击 **导出 MP4**，浏览器本地逐帧渲染并下载（推荐 Chrome / Edge 最新版）。
-4. "发布文案"中一键复制抖音 / B站 标题、简介、标签。
-5. "封面图"中下载横屏 / 竖屏封面 PNG。
-
-## 六、进度日志
-
-- [x] P0 计划与仓库清空
-- [x] P1 旁白脚本（40 句，4 种角色配音：子木土土/商人/助手/村民），总时长约 4 分 26 秒，字幕按词边界精确对齐
-- [x] P2 动画引擎与场景：纯函数 `renderFrame(t)` 逐帧绘制 13 个场景、主播"子木土土"（口型跟随真实配音音量）、商人/助手/村民/猴子等角色；横屏与竖屏两套版式，竖屏避开刘海、右侧按钮与底部文案区
-- [x] P3 音乐与音效：13 段场景配乐（古筝感拨弦、笛子、钢琴、鼓组）+ 24 种程序化音效，旁白自动闪避，全部在浏览器内实时合成
-- [x] P4 播放器 + 本地 MP4 导出：WebCodecs H.264 + AAC（不支持时自动改用 Opus）+ mp4-muxer，帧率 24/25/30/50/60 可选、三档画质、进度/剩余时间/取消
-- [x] P5 发布文案（抖音/B站 标题、描述、标签、置顶评论、章节时间轴，一键复制）与 4 种封面（B站 16:9 / 4:3，抖音 9:16 / 3:4，PNG 下载）
-
-- [x] P6 验证：浏览器实测加载→播放→导出（横屏/竖屏、60fps 样片封装校验通过），封面 PNG 已导出到 `covers/` 目录
-
-### 封面预览
-
-| B站 16:9 | B站 4:3 | 抖音 9:16 | 抖音 3:4 |
-|---|---|---|---|
-| ![](covers/cover_bili169_1920x1080.png) | ![](covers/cover_bili43_1440x1080.png) | ![](covers/cover_dy916_1080x1920.png) | ![](covers/cover_dy34_1080x1440.png) |
-
-<!-- MINGJIAN_RESEARCH_VIDEO:START -->
-# 新增项目：《观人于微》· 八观识人术 / 《吕氏春秋》网页视频工作台
-
-> 本项目是全新制作的独立目录 `mingjian/`：不参考、不改写、不删除仓库已有的「收猴子的故事」、`teacher/`、`sanbengzi/` 及其任何代码、文案与资源；所有新增内容只进入 `mingjian/`。
->
-> 入口（完成后）：`/mingjian/index.html` · 源码：`mingjian/source/`
-
-## 一、项目实现计划（先行方案）
-
-### 1. 研究与内容边界
-
-1. 研究《吕氏春秋》“论人”篇的原文，核对“八观六验”以及《吕氏春秋》的成书与结构；优先引用维基文库原典、光明网学者文章等可追溯来源。
-2. 视频不把古代方法包装成“读心术”或确定性心理诊断：将“观其所礼 / 所进 / 所养 / 所行 / 所好 / 所言 / 所不受 / 所不为”解释为**长期、情境化的行为观察**，并在结尾加入“不可用单次表现给人定性”的现代边界。
-3. 全新原创叙事：主题定为“真正的识人，不是看他会说什么，而是看他在关系、利益、失意与诱惑里，反复做什么”。时长目标约 3 分钟，含 10 个镜头章节。
-
-### 2. 视觉与导演设计
-
-- 视觉主题：墨黑宣纸、矿物青、朱砂橙、冷金；东方书房与现代行为观察界面叠化。
-- 画面：Canvas 2D 实时渲染，采用纸张纹理、山水剪影、竹简、印章、细线网格、粒子尘埃、呼吸式光晕，不依赖外部图片或旧项目素材。
-- 导演：开场以“观察者之眼”建立悬念；中段用八观形成环形观察盘；六验用六次情绪/压力脉冲表现；结尾从“看别人”转向“先看自己”。
-- 适配：16:9 桌面 / 9:16 手机竖屏 / 4:3 封面与导出安全区，移动端使用更大的字幕与触控按钮。
-
-### 3. 声音设计
-
-- 旁白：全新中文旁白，逐句生成并进入 `mingjian/voice/`，字幕与时间轴同步。
-- 音乐：浏览器 Web Audio 程序化生成“古琴泛音 + 低频鼓点 + 纸页颗粒”的无版权背景音乐；旁白出现时自动 ducking。
-- 音效：翻页、竹简展开、朱砂落印、低频心跳、风声、脉冲、钟磬与收束音，全部由 Web Audio 合成，预览与导出使用同一时间轴。
-
-### 4. 网页视频工作台
-
-1. 播放器：播放 / 暂停 / 时间轴拖动 / 章节跳转 / 字幕开关 / 静音 / 全屏。
-2. 画幅：16:9 与 9:16 一键切换，预览画布随画幅变化，竖屏重新排版标题、字幕与八观盘。
-3. 本地导出：浏览器内逐帧渲染 Canvas，使用 WebCodecs + `mp4-muxer` 封装 MP4；不上传视频、不依赖服务器渲染。
-4. 导出参数：2K（2560×1440 或 1440×2560）/ 1080P / 720P，24 / 30 / 60 fps，背景音乐是否导出；旁白与音效保持独立可选轨道逻辑。
-5. 发布物料：四平台标题 / 描述 / 标签一键复制，实时显示字数和话题数量限制；封面按 4:3、3:4、16:9 各生成多张，支持多选与逐张下载。
-
-### 5. 技术结构
-
-```text
-mingjian/
-  index.html                 # 静态入口
-  source/frontend/            # React + Vite 源码
-    src/App.tsx               # 工作台布局与交互
-    src/index.css             # 暗色东方视觉系统
-    src/video/script.ts       # 全新文案、章节与八观数据
-    src/video/render.ts       # 时间 t -> Canvas 纯函数画面
-    src/video/audio.ts        # Web Audio 音乐 / 音效 / 混音
-    src/video/exporter.ts     # WebCodecs + mp4-muxer 导出
-    src/video/copy.ts         # 四平台发布文案
-    src/video/covers.ts       # 多比例封面画面
-  voice/                      # 本项目独立旁白音频
-  covers/                     # 本项目封面素材（若有）
-```
-
-### 6. 实施步骤与验收标准
-
-- **阶段 1｜计划与研究**：完成本节、来源记录、内容大纲并推送。
-- **阶段 2｜剧本与时间轴**：完成原创旁白、镜头表、字幕、章节跳转并推送。
-- **阶段 3｜视觉引擎**：完成横竖屏画面、八观盘、转场、粒子与字幕，并推送。
-- **阶段 4｜声音系统**：完成旁白、程序化音乐、音效、自动闪避，并推送。
-- **阶段 5｜工作台与导出**：完成控制器、导出参数、WebCodecs MP4、下载进度，并推送。
-- **阶段 6｜封面与发布物料**：完成 3 比例多张封面、平台限制校验、一键复制，并推送。
-- **阶段 7｜测试与最终同步**：生产构建、静态入口检查、移动端布局检查、浏览器能力降级提示、最终推送。
-
-每完成一个阶段，都向 Hugging Face Space `Ethscriptions/rongduan` 做一次增量提交；只新增 `mingjian/` 内容，不使用删除操作，不触碰原项目。
-
-## 二、研究摘要与可追溯来源（阶段 1）
-
-- 维基文库，《吕氏春秋》：https://zh.wikisource.org/wiki/呂氏春秋
-  - 原典页面包含“纪部十二、览部八、论部六”的目录结构，并标注先秦作品为公有领域。
-- 《吕氏春秋·论人》原文（经 Chinese Text Project 搜索结果与维基文库目录交叉核对）：
-  - “凡论人，通则观其所礼，贵则观其所进，富则观其所养，听则观其所行，近则观其所好，习则观其所言，穷则观其所不受，贱则观其所不为。”
-  - “喜之以验其守，乐之以验其僻，怒之以验其节，惧之以验其特，哀之以验其仁，苦之以验其志。八观六验，此贤主之所以论人也。”
-  - 版本间“听 / 近”“特 / 持”“仁 / 人”等字存在异文，本项目采用维基文库 / CText 搜索结果中更连贯的版本，并在网页“研究札记”中提示异文，不将异文伪装成唯一答案。
-- 光明网《〈吕氏春秋〉与〈吕览〉》（2020-03-28，张涅）：https://news.gmw.cn/2020-03/28/content_33693020.htm
-  - 文章据《史记·吕不韦列传》说明吕不韦召集门客编成“八览、六论、十二纪”；并讨论“十二纪”与“八览、六论”的结构差异及“吕览”的称呼问题。
-- 研究结论：视频使用《吕氏春秋》原典的八观六验作为核心文本；关于成书年代、编纂主体与篇章分部，使用“据某来源 / 学界有不同整理”的谨慎表达，不把后世网络转述当成原典。
-
-## 三、首版视频大纲
-
-| 时间 | 章节 | 画面主意象 | 旁白目标 |
-|---|---|---|---|
-| 00:00 | 开场·你真的看懂一个人吗 | 黑场、眼、尘埃、金线 | 抛出“识人不是读心” |
-| 00:16 | 不是看他说什么 | 纸上字迹被风吹散 | 从语言转向行为 |
-| 00:32 | 八观·关系 | 礼、所进、所养三枚印 | 观察关系与选择 |
-| 00:58 | 八观·行动 | 足迹、器物、重复轨迹 | 观察言行与嗜好 |
-| 01:25 | 八观·逆境 | 断桥、空匣、留白 | 观察不受与不为 |
-| 01:52 | 六验·情绪 | 六次色彩脉冲 | 喜乐怒惧哀苦中看守、节、志 |
-| 02:20 | 别把一次表现当结论 | 镜面分裂再合拢 | 情境与时间是必要条件 |
-| 02:39 | 先识自己 | 镜中人、朱砂落印 | 从评判他人回到自省 |
-| 02:56 | 收束·观人于微 | 古今线条合成一轮 | 给出可实践的三问 |
-
-<!-- MINGJIAN_RESEARCH_VIDEO:END -->
-
-### 2026-10-25：新增《观人于微》阶段 2–4
-
-- 完成全新剧本与镜头时间轴：9 个章节、10 段中文旁白、八观 / 六验 / 现代边界的古今对读；没有复用仓库已有视频文案。
-- 完成独立 Canvas 2D 视觉引擎：墨黑宣纸、矿物青、朱砂金、观察盘、六验情绪环、镜面、自省收束；横屏 16:9 与手机竖屏 9:16 使用不同布局。
-- 完成声音系统：新增 `mingjian/voice/` 旁白；Web Audio 程序化古琴泛音 / 低频脉冲 / 纸页与钟磬音效，预览时旁白与音乐自动闪避。
-- 完成独立入口 `mingjian/index.html`、发布物料与研究札记页；静态服务器检查通过，源码模块均通过 Node 语法检查。
-
-### 2026-10-25：新增《观人于微》阶段 5–7（最终同步前）
-
-- 完成浏览器本地 MP4 导出链路：WebCodecs H.264 + AAC、`mp4-muxer` 本地打包；2K / 1080P / 720P、24 / 30 / 60 FPS、BGM 开关、导出进度与能力检测均已接入。
-- 完成封面实验室：4:3 / 3:4 / 16:9 各 3 款程序化封面，支持多选、预览、单张下载与所选批量下载。
-- 完成四平台文案：小红书≤20字/≤10话题、抖音≤30字/≤5话题、微信视频号≤16字/话题不限、哔哩哔哩≤80字/≤10话题；标题、描述、标签均可复制。
-- 完成静态 smoke check：入口、脚本、CSS、MP4 muxer、10 段旁白均可访问；源码 Node 语法检查通过；旧项目与旧资源未删除。
-
-### 2026-10-25：最终修复——旁白离线可用性
-
-- 静态托管对新增 MP3 可能返回 Git-LFS 指针；为保证网页预览与 MP4 导出不依赖该行为，10 段全新旁白已作为本地 data fallback 编入 `mingjian/assets/app.js`，音频加载会优先读取本地资源，检测到指针时自动切换内嵌版本。
-- 最终 smoke check：线上入口 `https://ethscriptions-rongduan.static.hf.space/mingjian/index.html`、CSS、bundle、mp4-muxer 可访问；源码语法检查通过；目录仍只新增 `mingjian/`，仓库原有项目未删除。
+验收清单：
+
+- 页面首屏能直接看到视频舞台与“播放预览”入口；
+- 横屏/竖屏切换不裁切主要标题；
+- 时间轴拖动能重绘同一时刻；
+- 中文旁白、字幕、章节按钮可用；
+- 分辨率、帧率、BGM 选项实际影响导出配置；
+- 4:3、3:4、16:9 封面可多选并下载；
+- 四个平台文案可复制且约束提示真实；
+- 在不支持 MP4 的浏览器中不误报，给出清晰回退说明。
+
+## 进度记录
+
+| 阶段 | 状态 | 说明 |
+|---|---:|---|
+| 计划与资料框架 | 已完成 | 本文件；已同步至 Space |
+| 研究内容与分镜 | 进行中 | 依据《吕氏春秋·卷三·论人》 |
+| 视觉舞台 | 待完成 | 程序化 Canvas |
+| 音频与旁白 | 待完成 | Web Audio + SpeechSynthesis |
+| 导出工具 | 待完成 | Canvas capture + 浏览器编码能力检测 |
+| 封面与平台文案 | 待完成 | 多比例、多选、复制 |
+| 最终检查 | 待完成 | 静态服务与交互验收 |