两个主体，一张桌子
探索面向 AI 的交互边界
AI 工作台
Weave 精灵图板 · AI 创作画布
线上 App
Zifo 知否 · 课文逐词朗读
课文 mp3 同步逐词高亮 + 波形进度，像 Apple Music 歌词那样听课本。
技术栈6
技术难点5
- Whisper 吐出的是整段词流，课本却要按句分组——得按原句词数切回来，零时长的词还要插值补上
- TTML 用 itunes 命名空间，时间还有 0.2s 与 00:00:01.540 两种写法，都得认
- 用户手动滚歌词时播放器仍在推高亮，两者抢同一个滚动位置
- 页面到 Unit 的映射写死了两份（前端一份、离线脚本一份），加一课必须同时改
- 演示要在 iframe 里自动播放：需要宿主委派权限 + 用户手势，而选页与解码都是异步的
技术亮点5
- 运行时零推理——Whisper 只在离线跑一次，时间轴当静态资源发出去
- TTML 既是机器的产物也是人能接着改的中间格式，前端直接喂给歌词组件
- 加一课只需放两个文件、改一个配置数组，不碰后端
- 波形自己算自己画，没有引第三方波形库
- demo 入口零侵入：独立入口 + 多入口构建，主应用一行没改
网页工具
Pinbod 平铺 · 手写无限画布
从零手写的一块无限画布：拖出形状、连上箭头、画手绘线，导出 PNG / SVG / JSON。
技术栈6
技术难点4
- 撤销重做要能同步，就不能用快照——整体覆盖会抹掉远端刚做的修改
- 吸附没有滞回会在边界反复吸放，得命中后锁线、拖离超过 12px 才解锁
- 箭头端点要贴着轮廓，矩形 / 椭圆 / 菱形 / 多边形各需一套求交
- Canvas 画形状、DOM 接交互分两层，但两层必须共用同一套视口变换
技术亮点5
- 引擎是纯 TypeScript、零 Vue 依赖，可以脱离界面单独跑测试
- AI 的操作走和人同一条提交路径，因此天然可撤销、可重放
- 语义导出不靠截图——连线关系本身就是图骨架，噪音一概不导
- 桥侧 Node 探测本机客户端并写好 MCP 配置，用户不用手抄 JSON
- 用可复现基准否掉了空间索引：2000 个形状每帧遍历加裁剪 1.46ms
开发框架
NodePlayer 节点汪 · 连线即执行
把节点连起来，图就自己跑；改一个参数，只重算受影响的那几个。
技术栈6
技术难点4
- 调度就绪判定必须看「入边前驱」——一开始误用了出边，执行顺序整个颠倒
- 缓存命中的节点必须移出 pending，漏了这一步 worker 会死循环
- 没有就绪节点时要等待而不是收尾，否则并发调度会提前宣告完成
- 引擎必须和渲染解耦，节点组件只读状态，否则执行态和界面会互相拉扯
技术亮点5
- 跨运行缓存：节点缓存键是「参数 + 上游输出」的哈希，未变的分支直接复用
- 三种自驱都不用点按钮：加载即执行、连接即运行、改参数即重算
- 引擎与渲染解耦，节点组件只读 state / progress / outputs
- MCP 暴露 8 个工具，外部 AI 能自己把图搭出来，导出的 JSON 可直接导回应用
- elkjs 动态 import —— 1.4 MB 的布局库不进首屏（实测首屏无该请求）
