README.md

---
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 配色、扫码自检这几段画面，都改为基于这张照片生成；
- 用离线渲染器检查了横屏、竖屏的第二步画面；线上文件可正常访问，允许跨域读取。