Spaces:
Running
Running
| title: 豆维 · 可扫码的拼豆 宣传片 | |
| emoji: 🟡 | |
| colorFrom: yellow | |
| colorTo: pink | |
| sdk: static | |
| app_file: index.html | |
| pinned: false | |
| # 豆维 · 可扫码的拼豆 —— 宣传片工作室 | |
| 在网页中播放宣传片，可选「和 AI / 豆包 AI / WorkBuddy 一起写」三个版本， | |
| 浏览器内导出 MP4（横屏 B 站 1920×1080 / 竖屏抖音 1080×1920，24/30/60 fps）， | |
| 附横竖封面与抖音、B 站发布文案。 | |
| - `BeadQR/`：小程序源码 | |
| - 根目录中文命名文件：原始素材 | |
| - `media/`、`vo/`：宣传片用到的转码素材与旁白 | |
| - `assets/`：网页播放器 / 渲染器 / 导出器（构建产物） | |
| --- | |
| ## 第 3 轮修改 · 工作计划（先写计划，再动手；每完成一个大动作推送一次） | |
| ### 0. 现状分析 | |
| - Space 中只有 Vite 构建产物（`assets/App-*.js`），原始 TS 源码未入库。 | |
| - 方案：把 `App-*.js` 用 prettier 展开为可读代码，在其上直接修改场景（Canvas 2D 渲染器）、 | |
| 时间轴、旁白表、豆子绘制函数；修改后以新文件名发布并更新 `index-*.js` 的引用（避免 CDN 缓存旧文件）。 | |
| - 关键结构：`of` = 场景表（hook → scan → title → problem → algo → step1 → step2 → palette → check → | |
| step3 → hands → iron → scan2 → peel → ai → end）；`nf` = 旁白分句时间表；`mr/Rd` = 豆子精灵绘制； | |
| 各场景绘制函数通过 `switch(scene.id)` 分发。 | |
| ### 1. 开场「有没有一种可能」（00:00） | |
| - 问题：画面卡顿；画面上用了真实二维码。 | |
| - 做法： | |
| - 去掉开场里逐帧生成/重绘的真实二维码与大量逐格绘制，改为**极简矢量图标**： | |
| - AI = 圆角方块 + 「AI」字样 + 小星光（sparkle） | |
| - 二维码 = 极简 QR 图标（三个定位角 + 少量点，不可扫描，仅示意） | |
| - 艺术二维码 = 定位角图标 + 渐变/花纹填充 | |
| - 拼豆 = 三颗圆豆图标 | |
| - 所有图标预渲染进离屏 canvas 缓存，每帧只做 drawImage + 变换，消除卡顿。 | |
| - 动画：图标依次弹入（ease-out-back），“+ / =” 渐显，第二行「拼豆 + 二维码 = ？」。 | |
| ### 2. 豆维登场（原 00:19） | |
| - 去掉微信小程序码周围的豆子环。 | |
| - 小程序码恢复为**原始的圆角方形**卡片（不再裁成圆形）。 | |
| ### 3. 调整顺序：想法 → 用 AI 实现 → 豆维登场 | |
| - 新顺序：`hook(想法) → scan(扫码读出) → ai(和 AI 一起写) → title(豆维登场) → problem → … → peel → end` | |
| - 「顺便一提」不再适合放在前面，重新生成 AI / 豆包 AI / WorkBuddy 三个版本旁白： | |
| 「于是，我和 X 一起写代码，把这个想法变成了一个小程序。」并重新对齐字幕分句时间。 | |
| - 同步修改：配乐能量曲线、转场、发布文案中的描述顺序。 | |
| ### 4. 第二步 · 选一张照片 | |
| - 换成用户上传的照片（文件：`media/user_photo.jpg`）； | |
| - 同时在网页上增加「替换照片」按钮，可直接选本地照片实时替换（导出视频也会使用它）。 | |
| ### 5. 豆子美化 | |
| - 重写豆子精灵：圆柱短管造型（外圈 + 中心孔）， | |
| - 径向渐变体积光、顶部柔和高光、内孔暗部 + 内壁反光、轻微环境光遮蔽与柔和投影； | |
| - 颜色按明度自适应（浅色豆不过曝，深色豆不发灰）； | |
| - 精灵按颜色+尺寸缓存，保证性能。 | |
| ### 6. 验证与发布 | |
| - 本地起静态服务 + headless Chrome 截取每个改动场景的关键帧，检查画面和无报错； | |
| - 推送到 Ethscriptions/cut，线上页面再次检查。 | |
| ### 进度 | |
| - [x] 计划写入 README | |
| - [x] 1 开场重做（极简图标、去卡顿；图标与豆子精灵加载时预热） | |
| - [x] 2 豆维登场小程序码（去掉豆子环，恢复圆角方形卡片） | |
| - [x] 3 场景顺序 + 新旁白（想法 → 和 AI 一起写 → 豆维登场；三版本旁白重录） | |
| - [x] 4 照片替换（支持 `media/user_photo.jpg` 自动加载 + 页面「替换照片」按钮；已换成用户上传的照片 `media/user_photo.jpg`（原图存档于 `BeadQR/docs/source-photo.jpeg`）） | |
| - [x] 5 豆子美化（果冻质感：左上受光体积、通透内孔、双层高光、柔和接触阴影；精灵 200px 缓存） | |
| - [x] 6 验证与发布 | |
| - 用离线渲染器（node + Skia canvas）逐 2.5 秒渲染横屏、逐 4 秒渲染竖屏全片，16 个场景全部无报错； | |
| - 线上 `ethscriptions-cut.static.hf.space` 已更新到 `App-v3561c02df.js`，与本地文件逐字节一致； | |
| - 未在真实浏览器中测试「替换照片」按钮和完整 MP4 导出（沙箱缺少 Chrome 运行库）。 | |
| ### 如何换成你的照片 | |
| 1. 把照片命名为 `user_photo.jpg`，上传到 Space 的 `media/` 目录，页面会自动用它（居中裁成正方形）； | |
| 2. 或者在网页播放器工具栏点「替换照片」，直接选本地照片，预览和导出都会用这张照片。 | |
| ### 修复记录 · 页面报 “Failed to load dependencies” | |
| - 原因：上一版发布的 `App-*.js` 里，仍在引用已经改名删除的 `index-Pz9S9NhM.js` | |
| 和 `mediabunny-aac-encoder-Bj5AxWWW.js`。这两个文件返回 404，导致入口加载失败。 | |
| - 修复：统一改为新文件名（`*-v3b174138.js`），并逐个检查 `assets/` 中所有相对引用都能找到对应文件。 | |
| 用 Node 实际加载了 App 和 AAC 编码器两个模块，模块之间的导入导出都能正确对上。 | |
| - 发布流程：以后每次发布前都先跑这个引用检查脚本，避免再次出现缺文件。 | |
| ### 更新 · 第二步照片已替换 | |
| - 用户上传的像素小牛图：去掉外圈约 8px 的细灰边框，裁成正方形，缩放为 1200×1200，保存为 `media/user_photo.jpg`； | |
| - 页面加载时自动使用这张照片。「选一张照片」、照片融合成拼豆二维码、MARD 配色、扫码自检这几段画面，都改为基于这张照片生成； | |
| - 用离线渲染器检查了横屏、竖屏的第二步画面；线上文件可正常访问，允许跨域读取。 | |