欢迎来到, 潘的playGround
《两个主体，一张桌子》 探索面向 AI 的交互边界
AI 工作台
Weave 精灵图板 · AI 创作画布
浏览器里的 AI 创作工作台：素材和 AI 动作连成一张能回看的图，AI 画的虚线随时能改回实线——不装客户端、不接后端。
技术栈7
技术难点3
- 静默失败最难查：无密钥或对应模型留空时会产出本地占位物，画布上看不出是假的
- 关系必须是唯一数据层，画布上的连线只能作它的投影，否则连线会变成第二份真相
- Agent 发起的动作要和人类操作完全同构，否则「人类接管」这件事没有落点
技术亮点6
- 人画实线，AI 画虚线
- 拖端点即翻回实线
- 打开标注模式框出组件
- 悬停术语高亮组件
- 标注随平移缩放一起走
- 关掉网络还能打开
线上 App
Zifo 知否 · 课文逐词朗读
课文 mp3 同步逐词高亮 + 波形进度，像 Apple Music 歌词那样听课本——加一课只放两个文件，首启约 1 秒。
技术栈9
技术难点5
- Whisper 吐出的是整段词流，课本却要按句分组——得按原句词数切回来，零时长的词还要插值补上
- TTML 用 itunes 命名空间，时间还有 0.2s 与 00:00:01.540 两种写法，都得认
- 用户手动滚歌词时播放器仍在推高亮，两者抢同一个滚动位置
- 页面到 Unit 的映射写死了两份（前端一份、离线脚本一份），加一课必须同时改
- 演示要在 iframe 里自动播放：需要宿主委派权限 + 用户手势，而选页与解码都是异步的
技术亮点6
- 运行时零推理，Whisper 只在离线跑
- TTML 既是产物，也是人能改的文件
- 加一课 = 两个文件 + 一个数组
- 波形自算自画，不引波形库
- 点任意一句跳回重听
- demo 入口零侵入，主应用一行没改
网页工具
Pinbod 平铺 · 手写无限画布
从零手写的一块无限画布：拖形状、连箭头、画手绘线，导出 PNG / SVG / JSON——不登录、数据不离开浏览器。
技术栈7
技术难点4
- 撤销重做要能同步，就不能用快照——整体覆盖会抹掉远端刚做的修改
- 吸附没有滞回会在边界反复吸放，得命中后锁线、拖离超过 12px 才解锁
- 箭头端点要贴着轮廓，矩形 / 椭圆 / 菱形 / 多边形各需一套求交
- Canvas 画形状、DOM 接交互分两层，但两层必须共用同一套视口变换
技术亮点6
- 引擎纯 TypeScript，零 Vue 依赖
- AI 的改动进同一条撤销栈
- 语义导出只取连线骨架
- 一键写好 MCP 配置，不用手抄 JSON
- 基准否掉空间索引：2000 形状 1.46ms
- 无账号，数据存 IndexedDB
Excalibur 誓约之剑
俯视角自动射击：你只管走位，攻击自己发生，一波一波打下去——纯静态目录，不装环境，打开就玩。
技术栈5
技术难点3
- 战争迷雾每帧都要重算视野，全图两万多格全扫会拖垮帧率
- 子弹、敌人、掉落物高频创建销毁，GC 抖动会让帧率忽高忽低
- Service Worker 写死缓存名 + cache-first，重建后页面会指向已删除的资源，而且无法自愈
技术亮点6
- 战争迷雾 22500 → 3800 格
- 手写对象池，池内数量可观测
- 加一种敌人只加一条配置
- 零运行时依赖，纯静态目录
- 被嵌入时不注册 Service Worker
- WASD 走位，攻击自动发生