🎬 #94 封面接故事：用 Gemini 2.5 把 MV 封面接成 8 種風格 25 秒分鏡，再用瀏覽器 ffmpeg.wasm 串成短片
#94 封面接故事是給音樂課 / 視藝課 / 媒體素養課的 AI 創作教學駕駛艙。上傳 MV → 抓封面 → AI 接 4-6 段 5 秒分鏡 → 跳 8 大 AI 影片平台產畫面 → 瀏覽器內串成完整短片。
AI 影片生成的「老師沒人教」問題
過去 12 個月，AI 影片生成爆炸式發展：
- Google Veo / Flow — 看圖產影片
- Sora / Sora 2 — 文字產影片
- Runway / Pika / Kling / Hailuo — 各家百花齊放
- Canva AI / Meta AI — 大眾化平台
問題：老師怎麼帶學生用？
學生開 Flow 隨便打「一隻貓在跳舞」→ 產出 3 秒沒邏輯的畫面 → 覺得 AI 很爛 → 退出。
或學生模仿網紅 → 抄 prompt → 沒學到任何東西。
老師真正要教的是 → 「分鏡思考」 + 「prompt 拆解」，但沒有現成工具，傳統影像教學課本還停留在「分鏡圖手繪」階段。
#94 怎麼解？（真實技術設計）
阿凱做了一個 教學駕駛艙級 的 AI 影片工作流工具：
功能 A：影片不上傳（隱私 + 速度）
- 拖曳 MP4 / WebM / MOV 進來（最大 200MB）
- 完全瀏覽器內處理，影片不離開使用者裝置
- 拖時間軸即時挑「最能代表這首歌」的封面那一幀
- 一鍵下載 PNG 封面
功能 B：AI 接續分鏡（核心殺手鐧）
- 封面圖丟給 Gemini 2.5 Flash 多模態看圖 → JSON mode 強制結構化輸出
- 一次產 8 種風格的後續 20-30 秒分鏡：
- 寫實電影級
- Suno 抒情風
- 童趣動畫
- 日系動漫
- 賽博龐克
- 吉卜力風
- 紀錄片
- K-pop MV
- 每風格切 4-6 段每段 5 秒
- 每段附
shot / action / mood / prompt_zh / prompt_en— 中英雙語都有 - 加
full_prompt給支援長 prompt 的平台用
功能 C：跨段角色一致性的 prompt 設計（細節控）
- System prompt 明確要求 「每段 prompt 都要完整重述主角外觀，不可用『同上』」
- 因為各平台一次只能產 3-5 秒，串起來會「換臉」 — 這個設計直接解決問題
- 還明確擋了：不准把歌詞直接寫進 prompt（要轉化成畫面語言）、不准出現「承接上一段」字眼
功能 D：PlatformLauncher 一鍵跳轉
- 點分段下方紫粉按鈕 → 自動複製 prompt 到剪貼簿 + 開新分頁 到：
- Google Flow（影片生成首選）
- Canva AI
- 海螺（Hailuo / 鏡像 AI）
- Anijam
- Runway
- 可靈 Kling
- Pika
- Meta AI
- 學生不用記哪個平台叫什麼，按工具走就對了
功能 E：瀏覽器內 ffmpeg.wasm 串影片
- 學生在各平台產完 N 段 5 秒影片
- 回網站第 5 區塊多選上傳
- 完全瀏覽器內 ffmpeg.wasm 串成一支 mp4（首次下載 30MB，之後快取）
- 零安裝、零上傳、零學習門檻
完整教學駕駛艙（teach.html）
阿凱直接附了 45 分鐘單堂教案：
| 時段 | 活動 |
|---|---|
| 5 分 | 引起動機（放 Suno 學生作品） |
| 7 分 | 講「分鏡 = 影像敘事語言」 |
| 3 分 | 教師示範 |
| 15 分 | 學生實作（必做：填主角外觀 300 字確保跨段一致） |
| 10 分 | 貼回 Flow / Canva 試產 |
| 5 分 | 反思「AI 是創作助手還是主角？誰是作者？」 |
三層學習目標：
- 知識：AI 工作原理
- 技能：把長故事拆成 5 秒分鏡 + 用文字描述運鏡
- 素養：AI 是創作夥伴，不是替代者
內含 6 題學生工作單 + 評量規準三級分。
適用領域 × 教學情境
| 課堂 | 怎麼用 |
|---|---|
| 音樂課 | 學生作詞曲後用 #94 接 MV 分鏡 |
| 視覺藝術 | 影像敘事單元，分鏡思考訓練 |
| 資訊科技 | AI 應用 + prompt engineering |
| 生活科技 | 影音製作流程實作 |
| 綜合活動 | 媒體素養 + AI 倫理討論 |
| 彈性學習 | 跨領域主題式專題 |
安全設計（給未成年用）
- 安全分級拉到
HARM_CATEGORY_SEXUALLY_EXPLICIT = BLOCK_LOW_AND_ABOVE— 比預設嚴格一級，把任何邊緣內容擋掉 - Cloudflare Turnstile 無感人機驗證 + maxInstances=5
- 完全免費、不需登入、不需 API key
實測效果（石門國小六年級 + 某國中跨領域）
| 指標 | 沒用 #94 | 用 #94 |
|---|---|---|
| 學生產出 25 秒短片完成率 | 20%（跨工具卡關） | 85% |
| 「我懂分鏡是什麼」自評 | 30% | 80% |
| prompt 拆解到能跨段一致 | 5% | 70% |
| 反思「AI vs 作者」深度 | 表面 | 觸及版權 + 創作哲學 |
老師 + 學生回饋
「我以前帶 Sora 都是大家亂打，現在學生會問『老師，這段我要不要重複描述主角穿什麼？』 — 他們開始理解 prompt engineering」
— 桃園市某國小資訊老師
「我用 #94 帶六年級拍校歌 MV — 每組產 25 秒接起來放校慶 — 校長看完直接哭出來」
— 五年級導師
「最神的是 ffmpeg.wasm 在瀏覽器跑 — 學生連 CapCut 都不用裝，老師零維護壓力」
— IT 組長
配對工具推薦
- #65 AI 影片創作與教學整合資源 — AI 影片總教學頁
- #66 Sora AI 旅遊全記錄教學網 — Sora 平台使用案例
- #94 封面接故事 — 本篇主角，分鏡 + 串接一條龍
適用對象
- 國小高年級到高中 音樂 / 視藝 / 資訊 / 生活科技老師
- 想帶 AI 倫理 / 媒體素養單元的老師
- 帶跨領域 PBL 專題的彈性學習老師
- 想做 MV / 學校宣傳片的家長
- 對 AI 影片工作流有興趣的學生
想試試？
→ 前往 #94 封面接故事 → 前往 #94 完整教學駕駛艙
第一次用建議從 「給學生一首他喜歡的歌，產 1 種風格分鏡」 開始 — 45 分鐘剛好一堂課。