README.md

metadata

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，线上页面再次检查。

进度

• 计划写入 README
• 1 开场重做（极简图标、去卡顿；图标与豆子精灵加载时预热）
• 2 豆维登场小程序码（去掉豆子环，恢复圆角方形卡片）
• 3 场景顺序 + 新旁白（想法 → 和 AI 一起写 → 豆维登场；三版本旁白重录）
• 4 照片替换（支持 media/user_photo.jpg 自动加载 + 页面「替换照片」按钮；已换成用户上传的照片 media/user_photo.jpg（原图存档于 BeadQR/docs/source-photo.jpeg））
• 5 豆子美化（果冻质感：左上受光体积、通透内孔、双层高光、柔和接触阴影；精灵 200px 缓存）
• 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 配色、扫码自检这几段画面，都改为基于这张照片生成；
• 用离线渲染器检查了横屏、竖屏的第二步画面；线上文件可正常访问，允许跨域读取。