From 65c2f7cbe7423a9f329ad2b12e07db96e95600b6 Mon Sep 17 00:00:00 2001 From: karylab_agents Date: Thu, 6 Aug 2026 11:00:29 +0800 Subject: [PATCH 1/2] P0/P1: ack+dedupe, reconnect/rejoin, restart-game, crypto, socket limits + tests --- client/src/App.vue | 5 +- client/src/components/GameTable.vue | 18 +- client/src/components/Lobby.vue | 9 +- client/src/stores/game.js | 121 ++++++-- .../minimax-ai-game-visual/00_總覽索引.md | 46 +++ .../01_minimax-h3影片生成調查.md | 183 ++++++++++++ .../02_ai角色繪製素材生成.md | 151 ++++++++++ .../03_靜態轉動態動畫化.md | 182 ++++++++++++ .../04_網頁素材整合技術.md | 242 +++++++++++++++ .../05_角色一致性深化.md | 174 +++++++++++ .../06_卡牌牌桌視覺與風格指引.md | 249 ++++++++++++++++ .../07_成本部署與生成管線.md | 200 +++++++++++++ .../08_商用授權與法律.md | 245 ++++++++++++++++ .../09_案例與落地路線圖.md | 150 ++++++++++ .../minimax-ai-game-visual/raw/models.txt | 141 +++++++++ .../raw/pricing_paygo.txt | 193 ++++++++++++ .../raw/pricing_video.txt | 37 +++ .../raw/video_guide.txt | 266 +++++++++++++++++ .../raw/video_prompt.txt | 277 ++++++++++++++++++ docs/接手修改與測試紀錄.md | 95 ++++++ docs/網頁遊戲實作研究與改進建議.md | 121 ++++++++ scripts/run_all_tests.ps1 | 4 + scripts/run_e2e_local.js | 20 +- scripts/test_reconnect.js | 96 ++++++ server/game/engine.js | 10 +- server/game/room.js | 33 ++- server/index.js | 195 +++++++----- 27 files changed, 3363 insertions(+), 100 deletions(-) create mode 100644 docs/research/minimax-ai-game-visual/00_總覽索引.md create mode 100644 docs/research/minimax-ai-game-visual/01_minimax-h3影片生成調查.md create mode 100644 docs/research/minimax-ai-game-visual/02_ai角色繪製素材生成.md create mode 100644 docs/research/minimax-ai-game-visual/03_靜態轉動態動畫化.md create mode 100644 docs/research/minimax-ai-game-visual/04_網頁素材整合技術.md create mode 100644 docs/research/minimax-ai-game-visual/05_角色一致性深化.md create mode 100644 docs/research/minimax-ai-game-visual/06_卡牌牌桌視覺與風格指引.md create mode 100644 docs/research/minimax-ai-game-visual/07_成本部署與生成管線.md create mode 100644 docs/research/minimax-ai-game-visual/08_商用授權與法律.md create mode 100644 docs/research/minimax-ai-game-visual/09_案例與落地路線圖.md create mode 100644 docs/research/minimax-ai-game-visual/raw/models.txt create mode 100644 docs/research/minimax-ai-game-visual/raw/pricing_paygo.txt create mode 100644 docs/research/minimax-ai-game-visual/raw/pricing_video.txt create mode 100644 docs/research/minimax-ai-game-visual/raw/video_guide.txt create mode 100644 docs/research/minimax-ai-game-visual/raw/video_prompt.txt create mode 100644 docs/網頁遊戲實作研究與改進建議.md create mode 100644 scripts/test_reconnect.js diff --git a/client/src/App.vue b/client/src/App.vue index 4726815..9de02a4 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -5,7 +5,7 @@

🎰 騙子酒館

- {{ isConnected ? '已連線' : '未連線' }} + {{ isConnected ? '已連線' : (reconnectAttempts > 0 ? '重連中（第 ' + reconnectAttempts + ' 次）' : '未連線') }}
@@ -16,6 +16,7 @@ + {{ error }} diff --git a/client/src/stores/game.js b/client/src/stores/game.js index 0026264..71620d6 100644 --- a/client/src/stores/game.js +++ b/client/src/stores/game.js @@ -5,6 +5,8 @@ export const useGameStore = defineStore('game', { state: () => ({ socket: null, playerId: null, + originalPlayerId: null, + joinedOnce: false, roomId: null, gameState: null, room: null, @@ -12,26 +14,49 @@ export const useGameStore = defineStore('game', { lastMessage: '', lastChallenge: null, // { challengedGroup, isBluff, challengerId, shooterId, systemChallenge } isConnected: false, + reconnectAttempts: 0, + actionPending: false, + requestSeq: 0, error: null }), actions: { - // 連線到伺服器 + // 連線到伺服器（socket.io 會自動重連） connect() { const serverUrl = import.meta.env.VITE_SERVER_URL || 'http://localhost:3000' this.socket = io(serverUrl, { - transports: ['websocket'] + transports: ['websocket', 'polling'] }) this.socket.on('connect', () => { - this.playerId = this.socket.id + const newId = this.socket.id + if (!this.originalPlayerId) this.originalPlayerId = newId + // 若之前在房裡（頁面重整 / 暫時斷線），嘗試回座位 + if (this.joinedOnce && this.roomId && this.originalPlayerId) { + this.socket.emit('rejoin', { roomId: this.roomId, playerId: this.originalPlayerId }, (res) => { + if (res && res.error) { this.error = res.error } + }) + } + this.playerId = newId this.isConnected = true + this.reconnectAttempts = 0 console.log('已連線:', this.playerId) }) - this.socket.on('disconnect', () => { + this.socket.on('disconnect', (reason) => { this.isConnected = false - console.log('斷線') + console.log('已斷線:', reason) + }) + + // socket.io 內建自動重連；記錄次數供 UI 顯示 + this.socket.io.on('reconnect_attempt', (attempt) => { + this.reconnectAttempts = attempt + }) + + this.socket.on('connect_error', (err) => { + this.isConnected = false + this.error = '無法連線到伺服器：' + err.message + console.error('連線錯誤:', err.message) }) this.socket.on('error', (data) => { @@ -39,21 +64,55 @@ export const useGameStore = defineStore('game', { console.error('錯誤:', data.message) }) - // 房間事件 + // 建立房間 this.socket.on('roomCreated', (room) => { this.room = room this.roomId = room.id + this.joinedOnce = true + this.error = null }) this.socket.on('playerJoined', (room) => { this.room = room this.roomId = room.id + this.joinedOnce = true + this.error = null + }) + + // 其他玩家重連回來 + this.socket.on('playerRejoined', (data) => { + this.room = data.room + this.lastMessage = '有玩家重新連線，繼續遊戲。' + }) + + // 其他玩家離線 / 離場 + this.socket.on('playerDisconnected', (data) => { + this.room = data.room + if (data.reconnecting) { + this.lastMessage = '有玩家離線，等待重連……' + return + } + if (data.gameState) this.gameState = data.gameState + if (data.gameState && data.gameState.isGameOver && data.gameState.winnerId) { + this.lastMessage = '遊戲結束，勝利者：' + data.gameState.winnerId.substring(0, 8) + '...' + } + }) + + // 重連成功後的完整狀態回補 + this.socket.on('resync', (data) => { + this.room = data.room + if (data.room && data.room.id) this.roomId = data.room.id + if (data.gameState) this.gameState = data.gameState + this.lastChallenge = null + this.error = null + this.lastMessage = '已重新連線，繼續遊戲。' }) this.socket.on('gameStarted', (gameState) => { this.gameState = gameState this.lastChallenge = null this.lastMessage = '' + this.error = null }) this.socket.on('cardPlayed', (data) => { @@ -99,42 +158,68 @@ export const useGameStore = defineStore('game', { } }) - this.socket.on('playerDisconnected', (data) => { - this.room = data.room - }) - // 私密手牌：只送給自己 this.socket.on('yourHand', (hand) => { this.yourHand = hand || [] }) }, + // 產生每動作唯一 requestId（搭配伺服端去重） + nextRequestId() { + this.requestSeq += 1 + return this.requestSeq + }, + // 建立房間 createRoom() { - this.socket.emit('createRoom') + this.socket.emit('createRoom', { requestId: this.nextRequestId() }, () => {}) }, // 加入房間 joinRoom(roomId) { - this.socket.emit('joinRoom', { roomId }) + this.socket.emit('joinRoom', { roomId, requestId: this.nextRequestId() }, (res) => { + if (res && res.error) this.error = res.error + }) }, // 開始遊戲 startGame() { - this.socket.emit('startGame', { roomId: this.roomId }) + if (!this.socket || this.actionPending) return + this.actionPending = true + this.socket.emit('startGame', { roomId: this.roomId, requestId: this.nextRequestId() }, (res) => { + this.actionPending = false + if (res && res.error) { this.error = res.error; this.lastMessage = res.error } + }) + }, + + // 再來一局 + restartGame() { + if (!this.socket || this.actionPending) return + this.actionPending = true + this.socket.emit('restartGame', { roomId: this.roomId, requestId: this.nextRequestId() }, (res) => { + this.actionPending = false + if (res && res.error) { this.error = res.error; this.lastMessage = res.error } + }) }, // 出牌 playCard(cardIndices) { - this.socket.emit('playCard', { - roomId: this.roomId, - cardIndices + if (!this.socket || this.actionPending) return + this.actionPending = true + this.socket.emit('playCard', { roomId: this.roomId, cardIndices, requestId: this.nextRequestId() }, (res) => { + this.actionPending = false + if (res && res.error) { this.error = res.error; this.lastMessage = res.error } }) }, // 質疑 challenge() { - this.socket.emit('challenge', { roomId: this.roomId }) + if (!this.socket || this.actionPending) return + this.actionPending = true + this.socket.emit('challenge', { roomId: this.roomId, requestId: this.nextRequestId() }, (res) => { + this.actionPending = false + if (res && res.error) { this.error = res.error; this.lastMessage = res.error } + }) }, // 斷開連線 @@ -146,4 +231,4 @@ export const useGameStore = defineStore('game', { } } } -}) +}) \ No newline at end of file diff --git a/docs/research/minimax-ai-game-visual/00_總覽索引.md b/docs/research/minimax-ai-game-visual/00_總覽索引.md new file mode 100644 index 0000000..b7e1ea0 --- /dev/null +++ b/docs/research/minimax-ai-game-visual/00_總覽索引.md @@ -0,0 +1,46 @@ +# MiniMax H3 × AI 繪圖 — 遊戲視覺探索調查總覽 + +> 調查日期：2026-08-06 +> 產出：9 份 subagent 調查報告 + 本總覽 +> 專案：Liar's Bar（騙子酒館）網頁版 — 8 個 AI 擬人角色 + 卡牌唬牌 +> 技術棧：Vue 3 + Vite + Pinia + Naive UI / Node + Socket.IO + +## 結論速覽（60 秒版） + +**核心策略：建置期批量預生成 + 前端合成 + 誠實揭露，不做運行期即時生成。** + +1. **靜態美術幾乎免錢**：FLUX.2 / Nano Banana 2 有原生多參考圖一致性，8 角色定稿成本極低（image-01 ¥0.025/張、FLUX-schnell $0.003/張）。 +2. **動態素材主力 = MiniMax H3**：768P ¥0.50/秒、2K ¥0.80/秒，8 角色待機動畫約 ¥200–600；但 H3 是非同步 API（延遲數十秒~分鐘），只適合預生成，不適合遊玩中即時產。 +3. **一致性 = 「1 支畫風 LoRA × 8 支角色 LoRA」疊加**：沿用既有 ComfyUI + IP-Adapter 管線，或改用 FLUX.2 / Nano Banana 多參考圖免訓練。 +4. **上線格式 = WebM(VP9/AV1/alpha) / Animated WebP / sprite sheet**，搭配 Socket.IO→Pinia→CSS/WAAPI 架構防卡 UI。 +5. **授權紅線**：FLUX dev 版不可商用（用 schnell 或付費 API）；8 個品牌角色建議改原創名 + 自訂配色 + 人工終製留足跡（商標風險）。 +6. **落地順序**：Phase 1 CSS 打底 → 2 靜態美術 → 3 待機動畫 → 4 過場/動態 → 5 打磨。 + +## 報告索引 + +| # | 檔案 | 主題 | 價值標記 | 大小 | +|---|------|------|----------|------| +| 01 | `01_minimax-h3影片生成調查.md` | MiniMax H3（海螺）能力、規格、API、競品、應用點 | 高 | 18 KB | +| 02 | `02_ai角色繪製素材生成.md` | 2025-26 文生圖工具比較、立繪/卡牌工作流、LoRA | 高 | 16 KB | +| 03 | `03_靜態轉動態動畫化.md` | 圖生影片（H3/SVD/EBsynth/Live2D）+ 網頁格式分工 | 高 | 19 KB | +| 04 | `04_網頁素材整合技術.md` | WebM/WebP/APNG/Lottie/精靈圖、Vue 載入、防卡頓架構 | 高 | 21 KB | +| 05 | `05_角色一致性深化.md` | 9 種一致性方法對比、畫風LoRA×角色LoRA、SOP | 高 | 21 KB | +| 06 | `06_卡牌牌桌視覺與風格指引.md` | 風格推薦、卡面/牌背/木桌提示詞模板、避弊技巧 | 高 | 20 KB | +| 07 | `07_成本部署與生成管線.md` | 影片/圖 API 成本、API vs 自架、MVP/完整版預算 | 高 | 16 KB | +| 08 | `08_商用授權與法律.md` | 各模型商用授權對照、著作權、品牌角色侵權風險 | 高 | 27 KB | +| 09 | `09_案例與落地路線圖.md` | 真實案例、Steam AI 政策、Phase 1-5 落地路圖 | 高 | 21 KB | + +（補充：`raw/` 為 07 號調查保留的 MiniMax 官方定價/文檔原文快照，供原始資料查證。） + +## 建議行動路線（詳見 09） + +- **Phase 1**：CSS 浮動 + Vue Transition 打底（零成本、當天可做） +- **Phase 2**：FLUX.2 / Nano Banana 定 8 角色 → 批量卡面（約數美元） +- **Phase 3**：MiniMax H3 圖生視訊做 8 角色待機迴圈 → WebM/APNG（約 ¥200–600） +- **Phase 4**：翻牌/過場 WebM + Lottie/GSAP 演出 +- **Phase 5**：Live2D 擬人互動（選配）、行銷素材 + +## 注意事項 +- 所有價格/規格/條款均出自子代理即時抓取的官方來源；查不到的項目各報告內已明確標註「未查到」。 +- 08 號為研究調查摘要，**非法律意見**；正式跨國商用前建議再核對官方最新條款並諮詢律師。 +- 部分調查為並行執行（07 與 09 同時進行），09 引用時 07 尚未就緒，故 09 正文未引用 07 的預算數字，請以 07 為準。 diff --git a/docs/research/minimax-ai-game-visual/01_minimax-h3影片生成調查.md b/docs/research/minimax-ai-game-visual/01_minimax-h3影片生成調查.md new file mode 100644 index 0000000..f9d8943 --- /dev/null +++ b/docs/research/minimax-ai-game-visual/01_minimax-h3影片生成調查.md @@ -0,0 +1,183 @@ +# MiniMax H3（海螺 Hailuo）影片生成模型調查報告 — 應用於「騙子酒館」網頁卡牌遊戲畫面 + +**調查日期：2026-08-06** + +--- + +## 摘要 + +MiniMax H3 是 MiniMax 於 **2026-07-31** 正式發布的「開放通用多模態影片生成模型」（海螺影片生成系列第三代旗艦模型**（前代為 Hailuo 01、Hailuo 02）。它不是單純的文生影片工具，而是**統一理解「文字＋圖片＋影片＋音訊」四種模態、並同時生成「影片＋原生立體聲」的全能多模態影片模型**。官方規格：輸出 **768P / 2K**、時長 **4–15 秒**、支援 **9 種寬高比**、原生立體聲、`[运镜]` 指令控制運鏡、首幀/尾幀/多模態參考等多種生成模式。官方提供完整 RESTful API（`/v2/video_generation`，非同步任務制）及公開定價（2K **0.80 元/秒**、768P **0.50 元/秒**，人民幣，按量計費）。競品方面，**OpenAI Sora 已於 2026 年停止服務**（App 4/26、API 9/24），故 H3 的實際可比對象是 **Google Veo 3.1/Gemini Omni Flash、快手 Kling 3.0、Runway Gen-4.5、Pika 2.5**。對「騙子酒館」卡牌網頁遊戲，**H3 最適合「建置時預生成資產」而非「遊玩中即時生成」**：角色表情循環、卡面動畫、過場、背景循環、行銷大片皆可低成本預製；即時對戰時建議改用 CSS/Canvas/Lottie/WebM 短資產。完整建議與限制見文末「可行動建議」。 + +--- + +## 1. 它是什麼、最新版本與發布時間 + +- **它是什麼**：MiniMax H3（海螺 Hailuo 影片生成第三代）是一個「通用多模態生成模型」，能統一理解文字、圖片、影片、音訊四種模態的上下文，並生成帶**原生立體聲**的影片。官方定位涵蓋廣告、品牌、電商、產品設計、UI/UX、遊戲等商用內容創作（官方部落格明列「gaming」為目標場景）。 +- **最新版本**：目前開放平台影片生成僅有 **`MiniMax-H3`** 一個可呼叫模型（API schema 中 `model` 欄位 enum 僅此一值）；另有配套的 **`MiniMax-H3-Regeneration`**（768P→2K 再生）與 **`MiniMax-H3-Context-IR`**（提示詞增強）兩個治理/輔助介面。 +- **發布時間**：官方部落格與開放平台模型發布頁均標記 **2026-07-31**；MiniMax 官網旗艦模型區標記「2026-07」。 +- **前代脈絡**：Hailuo 01（打底）、Hailuo 02（架構/資料/規模）、H3（統整任務與模態）。官方表示**近期計畫開源模型權重**（視法律法規而定，尚未給出確切日期）。 + +來源： +- MiniMax H3 官方部落格：https://www.minimax.io/blog/minimax-h3 （標題副題「Open Model Breaking the Boundaries Between Tasks and Modalities」，日期 2026-07-31） +- MiniMax 官網旗艦模型頁：https://www.minimax.com/ +- MiniMax 開放平台「模型發布」：https://platform.minimaxi.com/docs/release-notes/models.md （「2026 年 7 月 31 日 — MiniMax H3」） +- 官方 API OpenAPI 規格：https://platform.minimaxi.com/docs/api-reference/video/generation/api/v2-video-generation.json + +--- + +## 2. 核心能力規格 + +以下皆以官方文件為準（影片生成指南 + API schema，見來源）。 + +### 2.1 生成模式（文生/圖生/參考/編輯） +| 模式 | 輸入 | 用途 | 官方 API 對應 | +|---|---|---|---| +| 文生影片（t2va） | 純文字 prompt | 從零描述生成 | `content` 僅含一個 `text` | +| 圖生影片（i2va） | 首幀圖（或尾幀圖／首尾幀兩張）＋文字 | 讓靜態圖「動起來」、指定起/終畫面 | `role=first_frame` / `last_frame` | +| 多模態參考生成（r2va） | 文字＋參考影像(≤9)／參考影片(≤3)／參考音訊(≤3) | 參考角色、動作、鏡頭、風格、聲音、剪輯節奏；支援 V2V 動作遷移（motion transfer） | `role=reference_image/video/audio` | +| 影片再生 | 已生成之 768P 影片 | 768P → 2K 升級 | `MiniMax-H3-Regeneration`，`role=base_video` | +| 上下文提示詞增強 | 文字＋圖／影／音 | 深度理解多模態上下文，輸出結構化增強 prompt（不產影片） | `MiniMax-H3-Context-IR` | + +- **圖生影片與多模態參考互斥**：`content` 中不能同時混用 `reference_*` 與 `first/last_frame`。 +- 每個請求**必須**含一個非空 `text`（prompt 必填，≤7000 字元）。 + +### 2.2 解析度、時長、寬高比、幀率 +- **解析度（resolution）**：僅 `768P` 或 `2K`（原生 2K；H3-VAE 高壓縮率是 2K 直出關鍵）。``輸出影片幀率官方範例為 **24 fps**``（在再生規格中明確「幀率 24 fps」）。 +- **時長（duration）**：`4`–`15` 秒，**僅整數**（enum 4..15）。 +- **寬高比（ratio）**：`adaptive`（自動）、`21:9`、`16:9`、`4:3`、`1:1`、`3:4`、`9:16`。文生影片不可用 `adaptive`（必填具體比例）；圖生影片恆為 `adaptive`（由輸入圖決定）。 +- **音訊**：生成內容**含原生立體聲**（人聲＋音效＋配樂一起建模，非分離處理）。 + +### 2.3 運動控制／塗鴉控制／可控性 +- **運鏡控制**：官方支援——在文字描述中加入 `[运镜]` 指令引導鏡頭調度；範例「鏡頭上移、slow push in」等。 +- **首/尾幀控制**：指定起點與結束畫面，可讓「靜態卡面動起來」或補完中段過渡。 +- **V2V 動作遷移**：以參考影片遷移動作、鏡頭、節奏（官方部落格「V2V motion transfer」明列為 H3 亮點）。 +- **精準指令遵循／品牌文字渲染**：官方宣稱擅長「大字幕、品牌資訊精準渲染」，適合卡面/標題文字。 +- **塗鴉（sketch/doodle）控制**：**在官方文件中「未查到」** 公開的專用塗鴉/骨架/逐格控制介面。H3 目前的可控手段是文字、首尾幀、多模態參考與再生，**沒有像某些工具那樣的圖層塗鴉/關鍵格控制參數**。（標記：未查到，請勿假設存在） + +### 2.4 輸入限制（硬性約束） +- 圖片：JPG/JPEG/PNG/WEBP/HEIC/HEIF，單檔 ≤30MB，寬高 `[256, 5760]px`，寬高比 `0.4–2.5`。 +- 影片（僅參考情境）：MP4/MOV，H.264/H.265＋AAC/MP3，單檔 ≤50MB，`≤3` 段，每段 `2–15s`、總長 ≤15s。 +- 音訊（僅參考情境）：WAV/MP3，單檔 ≤15MB，`≤3` 段、每段 `2–15s`。 +- 混合總輸入上限 **12 個檔案**；請求體 ≤64MB（大檔建議用公網 URL 而非 Base64）。 + +來源： +- 官方影片生成指南（完整規格表＋限制表）：https://platform.minimaxi.com/docs/guides/video-generation.md +- H3 亮點功能示例（三大能力：原生多模態理解、多模態精準編輯與控制、商用多場景內容生成）：https://platform.minimaxi.com/docs/guides/video-prompt.md +- API schema（resolution/duration/ratio/content/role enum 全量）：https://platform.minimaxi.com/docs/api-reference/video/generation/api/v2-video-generation.json + +--- + +## 3. 官方 API 服務 + +- **是否提供 API**：是，完整公開。**非同步任務制**：`POST /v2/video_generation` 建立任務 → 回傳 `task_id` → 輪詢 `GET /v2/query/video_generation/{task_id}`（官方建議間隔 10 秒）→ 成功後取 `content.url` 下載成片。另有 `DELETE`（取消/刪除）、列表查詢、`callback_url` 事件回呼（需先回應 `challenge` 驗證）、AIGC 浮水印開關。 +- **驗證方式**：`Authorization: Bearer `；Base URL `https://api.minimaxi.com`；提供 OpenAPI 3.1 規格與官方 Python 範例。 +- **其他整合**：提供 MiniMax MCP（Model Context Protocol）工具，支援語音合成、音色克隆、影像與影片生成等多模態能力。 +- **結果保留**：僅查詢最近 7 天任務；下載連結有時效，需及時轉存。 +- **傳輸模式**：非同步輪詢，**不支援串流/即時**。這直接影響「遊玩中即時生成」的可行性（見 §6 限制）。 + +### 3.1 定價（按量計費，人民幣，官方刊例價） +| 項目 | 計費 | 官方價格 | +|---|---|---| +| MiniMax-H3 輸出 | 按秒 | **2K：0.80 元/秒；768P：0.50 元/秒** | +| 輸入圖片 | 按張 | **5 張內免費**，超出 0.20 元/張 | +| 輸入影片 | 按輸入秒數 | 2K 0.80 元/秒、768P 0.50 元/秒 | +| 輸入音訊 | — | **免費** | +| H3-Regeneration | 按再生輸出秒數 | 0.30 元/秒 | +| H3-Context-IR | 按 tokens | 輸入 5.80 元/百萬、輸出 23.00 元/百萬 | + +- **注意**：**影片資源包（訂閱制）目前「暫不支援 MiniMax H3」**，僅支援 Hailuo 系列（例：Hailuo-2.3-Fast 768p/6s 扣 0.7 點）。H3 現階段只能**按量計費（pay-as-you-go）**。 +- 成本速算（參考，非官方換算）：一條 **5 秒 768P 短片 ≈ 2.50 元（約 US$0.35）**；一條 **5 秒 2K 短片 ≈ 4.00 元（約 US$0.57）**。 + +來源： +- 按量計費定價頁：https://platform.minimaxi.com/docs/guides/pricing-paygo.md +- 影片資源包定價頁（載明「暫不支援 MiniMax H3」）：https://platform.minimaxi.com/docs/guides/pricing-video.md +- MiniMax MCP 指南：https://platform.minimaxi.com/docs/guides/mcp-guide.md + +--- + +## 4. 與競品比較（2026-08 公開資料） + +> 請注意：競品規格/價格變動極快，下表僅為調查當下之可查證公開資料；查不到的欄位已標「未查到」。 + +| 項目 | **MiniMax H3** | **OpenAI Sora** | **Google Veo 3.1 / Gemini Omni Flash** | **快手 Kling 3.0** | **Runway Gen-4.5** | **Pika 2.5** | +|---|---|---|---|---|---|---| +| 是否可用 | ✅ 可用 | ❌ **已停用** | ✅ 可用 | ✅ 可用 | ✅ 可用 | ✅ 可用 | +| 發布狀態 | 2026-07-31 正式版 | 官方宣布停用（App 2026-04-26，API 2026-09-24） | 在建置中/GA（Gemini API 付費層） | Kling 3.0 系列（VIDEO 3.0 / Omni，原生音訊） | Gen-4.5 系列 | Pika 2.5（2026） | +| 解析度 | **768P / 2K** | 已停用（原支援 720p/1080p） | Omni Flash 720p；Veo 3.1 更高 | 1080p（細節未完整查到） | 多檔（1080p/4K 升頻） | 基礎方案僅 480p | +| 最大時長 | **15 秒** | （已停用） | 8 秒級別（未查到確切上限） | 10 秒級（未查到確切上限） | 短篇（未查到確切上限） | 短篇 | +| 音訊 | **原生立體聲** | （已停用） | Veo 3.1 原生音訊 | 原生音訊 | 可用（另有音訊工具） | 未查到 | +| 運動/首尾幀控制 | ✅ 首尾幀＋`[运镜]`＋V2V 遷移 | — | ✅ 幀指定/圖導向/場景延伸 | ✅ Motion Control＋分鏡控制 | ✅ | ✅ Pikatwists 等 | +| 塗鴉/關鍵格控制 | 未查到 | — | 未查到 | 未查到 | 未查到 | 未查到 | +| 定價模式 | 按秒 2K 0.80 元 / 768P 0.50 元 | — | Omni Flash ≈ **$0.10/秒**（720p，5792 token/秒，輸出 $17.5/M） | 訂閱/點數（確切單價未查到） | 訂閱 $12–28/月起，點數制 | 訂閱點數制（10–80 點/片） | +| API | ✅ 完整 REST＋OpenAPI＋MCP | — | ✅ Gemini API | ✅ API 平台 | ✅ | ✅ API | + +**判讀**： +- **Sora 已退場**，商用影片生成的主要開放 API 選擇落在 **H3、Veo/Gemini Omni Flash、Kling**。三人中 H3 在「**統一多模態理解（圖+影+音同時給）＋原生立體聲＋2K**」與「**按秒計費最細粒度**」上是最突出的差異點；Veo/Gemini Omni 的 `$0.10/秒 720p` 為最便宜的純文字→720p 選項；Kling 3.0 偏重「長分鏡敘事＋原生音訊＋Motion Control」。 +- Runway/Pika 是**訂閱/點數制**且不主打 2K 統一多模態，較適合「人數少、品質要頂」的商剪，不適合高頻逐資產呼叫。 + +來源： +- OpenAI Sora 停用公告（Help Center）：https://openai.com/sora/ +- Google Gemini 影片生成文件（Veo 3.1／Gemini Omni Flash）：https://ai.google.dev/gemini-api/docs/video +- Google Gemini API 定價頁（Omni Flash 影片輸出 $17.5/M、≈$0.10/秒 720p）：https://ai.google.dev/gemini-api/docs/pricing +- Kling AI 官網（Kling 3.0 系列、Motion Control、原生音訊）：https://kling.ai/ +- Runway 定價頁（Gen-4.5、訂閱 $12–28/月、點數制、代管 Veo 3.1 與 Kling 3.0）：https://runwayml.com/pricing +- Pika 定價頁（Pika 2.5、480p、點數制）：https://pika.art/pricing + +--- + +## 5. 對「騙子酒館」卡牌網頁遊戲的應用點與限制 + +遊戲背景：網頁版卡牌唬騙遊戲，桌上有多個 AI 擬人角色（Grok/Kimi/Qwen/GPT/Gemini 等品牌角色），目前角色只有靜態視覺。目標：讓畫面變好看。 + +### 5.1 可行應用點（H3 很適合「預生成」） +| 用途 | 用 H3 的哪種模式 | 建議規格 | 為何合適 | +|---|---|---|---| +| **角色動態表情循環** | 圖生影片（角色立繪為首幀） | 768P，4–5s，1:1/3:4，做成 loop WebM | 把「靜態立繪」變成眨眼/挑眉/奸笑循環，直接提升對戰沉浸感 | +| **卡面動態（Card Face / 金卡/Live2D 風）** | 圖生影片（卡面為首幀）＋`[运镜]` | 768P，4s，1:1/3:4 | 唬牌「亮牌」瞬間可播 1–2 秒動卡面 | +| **過場動畫（Cinematic）** | 文生影片／多模態參考 | 2K，5–8s，21:9/16:9 | 回合切換、決鬥高潮、揭穿唬牌的「大片式」過場 | +| **背景循環（Ambient loop）** | 文生影片 | 768P，5s，21:9/16:9，loop | 酒館火光、雨夜窗景等循環背景，替代靜態底圖 | +| **GIF/短動畫** | 圖生或文生後轉 GIF | 768P 短片段轉 GIF | 表情包、聊天欄情緒貼圖、勝利/失敗短動畫 | +| **行銷/宣傳大片** | 多模態參考＋Context-IR | 2K | 商店頁、巴哈/Steam 頁、社群 Banner（官方明列 gamer 場景） | +| **背景音樂** | 搭配 **Music 3.0** 模型 | 音訊 | 酒館主題曲／回合 BGM（音樂生成本身是另一模型，見 §4 附註） | + +### 5.2 硬性限制（務必正視） +1. **延遲（最大殺手）**：API 是非同步任務制，官方輪詢間隔 10 秒起跳，實際「送出→拿到」通常數十秒至數分鐘。**完全無法在對戰回合內即時生成**。→ 只能「先建後用」。 +2. **成本**：逐資產呼叫要錢（768P 0.50 元/秒、2K 0.80 元/秒）。8 個角色 × 每角 3–5 個表情 × 5s ≈ 數十元等級的小規模資產庫尚可接受；若追求每個玩家客製化即時生成則成本爆炸。 +3. **可控性**：沒有塗鴉/關鍵格控制（未查到），「精準讓某根手指動」做不到；只能靠文字＋首尾幀＋參考逼近。遊戲角色的一致性要靠「同一張立繪反覆當首幀 + 明確角色描述」維持，仍可能有細微漂移。 +4. **資源包不支援 H3**：訂閱式影片資源包不含 H3，只能按量付費，需管理餘額與扣款。 +5. **格式**：輸出為 MP4 影片（24fps）；要 WebM loop / GIF 需自行轉檔，前端需處理影片載入與播放（避免阻斷首載）。 +6. **7 天保留**：下載連結有時效，資產需建置時立即轉存到自家 CDN/物件儲存。 + +### 5.3 對我們的可行動建議（可直接落地） +> 核心口訣：**「建置時用 H3 大量預製，遊玩時用前端輕量播放」— 不要在任何對戰路徑上同步等 H3。** + +1. **只做「預生成資產庫」**：在發版/內容管線中（非玩家遊玩時）批次呼叫 H3，產出表情循環、動卡面、過場、循環背景，轉成**短 WebM（H.264 web-compatible，建議 ≤2–4s、768P）或 Lottie/APNG**，放自家 CDN。 +2. **角色一致性策略**：為每個 AI 角色鎖定「一張官方立繪」當首幀，統一一個角色風格描述前綴，每個表情生成 2–3 個候選再人工挑選，避免角色「漂移」。 +3. **動卡面只在小情境用**：亮牌、唬牌成功/失敗、決鬥高潮等「觸發即播 1–2s」的場合用影片；其餘常駐畫面（棋盤、計分板）維持 CSS/Canvas 動效，保持 60fps 流暢。 +4. **過場與行銷用 2K**、**常駐循環用 768P**，控制檔大小與成本。 +5. **BGM/SFX 分工**：對話與特效音效可用 H3 原生立體聲或多模態參考生成；背景音樂用 **MiniMax Music 3.0** 單獨產生（官方明列支援遊戲 BGM 場景）。 +6. **順序建議（ROI 排序）**：① 角色表情循環（立即有感）→ ② 動卡面亮牌 → ③ 過場動畫 → ④ 背景循環 → ⑤ 行銷大片。 +7. **若想要「玩家端即時動態表情」**，請改用前端方案（Live2D/CSS/Canvas/WebGL 或預先切片好的 sprite 動態），不要走 H3。 + +--- + +## 6. 資料來源清單（皆為調查當下已開之官方/可查證頁面） + +- MiniMax H3 官方部落格（發布 2026-07-31、規格、設計哲學、開源計畫）：https://www.minimax.io/blog/minimax-h3 +- MiniMax 官網旗艦模型（H3 標示 2026-07）：https://www.minimax.com/ +- 海螺影片創作入口（H3 選項、2K/5s/21:9）：https://hailuoai.com/video +- 開放平台「影片生成」指南（模式/規格/輸入限制/API 範例）：https://platform.minimaxi.com/docs/guides/video-generation.md +- 開放平台「H3 亮點功能示例」：https://platform.minimaxi.com/docs/guides/video-prompt.md +- 開放平台「按量計費」定價（H3 2K 0.80元/s、768P 0.50元/s、Context-IR、再生）：https://platform.minimaxi.com/docs/guides/pricing-paygo.md +- 開放平台「影片資源包」定價（註明暫不支援 H3）：https://platform.minimaxi.com/docs/guides/pricing-video.md +- 開放平台「模型發布」（2026-07-31 H3、Music-3.0 等）：https://platform.minimaxi.com/docs/release-notes/models.md +- 官方 OpenAPI 3.1 規格（resolution/duration/ratio/role 全量 enum）：https://platform.minimaxi.com/docs/api-reference/video/generation/api/v2-video-generation.json +- MiniMax MCP 指南：https://platform.minimaxi.com/docs/guides/mcp-guide.md +- OpenAI Sora 停用說明（Help Center）：https://openai.com/sora/ +- Google Gemini 影片生成文件（Veo 3.1 / Gemini Omni Flash）：https://ai.google.dev/gemini-api/docs/video +- Google Gemini API 定價（Omni Flash ≈$0.10/s 720p）：https://ai.google.dev/gemini-api/docs/pricing +- Kling AI 官方（Kling 3.0、Motion Control、原生音訊）：https://kling.ai/ +- Runway 定價（Gen-4.5、$12–28/月、代管 Veo/Kling）：https://runwayml.com/pricing +- Pika 定價（Pika 2.5、480p、點數制）：https://pika.art/pricing + +> 查證聲明：MiniMax H3 之規格、模式、API、定價均直接取自上述官方文件；競品比較欄目以各官方頁面當下公開內容為準並各附來源，未能查到之細節（如 Kling/Pika 確切單價、H3 塗鴉控制、Veo 最大時長）均已明確標示「未查到」，未做臆測補值。 diff --git a/docs/research/minimax-ai-game-visual/02_ai角色繪製素材生成.md b/docs/research/minimax-ai-game-visual/02_ai角色繪製素材生成.md new file mode 100644 index 0000000..3864d7c --- /dev/null +++ b/docs/research/minimax-ai-game-visual/02_ai角色繪製素材生成.md @@ -0,0 +1,151 @@ +# 2025–2026 AI 繪圖工具與工作流調查報告：為 Liar's Bar 網頁遊戲生成角色與卡牌美術 + +**調查日期：** 2026-08-06 +**調查者：** Hermes 研究子代理 +**目的：** 評估最新文生圖／圖生圖工具能否為我們的網頁版「騙子酒館（Liar's Bar）卡牌唬牌遊戲」產出高品質角色與卡牌美術（桌上有 8 個 AI 品牌擬人角色 + 卡牌系統，技術棧 Vue3 + Node/Socket.IO；已具備 ComfyUI + IP-Adapter + ControlNet DWpose 的角色一致性管線筆記）。 + +--- + +## 摘要 + +截至 2026 年 8 月，AI 繪圖領域已明顯進入「多模態 + 原生一致性的時代」，對「角色一致性」這個我們最大的痛點，已經出現**直接可用的原生方案**，不必再只靠傳統 LoRA/IP-Adapter 硬扛： + +- **FLUX.2**（Black Forest Labs，open weight 版 2025-11-22 釋出）主打「multi-reference control（最多 10 張參考圖）」，官方主打**同一個角色、同一畫風、量產數百張素材仍保持一致**，這幾乎是為我們的「8 個固定角色」量身打造；另有 FLUX.3（2026-07）多模態。 +- **Google Nano Banana 家族**（gemini-3.1-flash-image 等）同樣主打多參考圖一致性與 4K，且附 SynthID 浮水印，API 按圖計費。 +- **Midjourney** 已進到 V8.2（2026-07-24），有 `--cref` 角色參考，但仍是訂閱制服務、非彈性 API，較不適合我們的自動化管線。 +- **ByteDance Seedream** 最新為 **Seedream 5.0 Pro**（多模態、互動編輯、圖層分離）；早期 Seedream 4.0 之透明背景（RGBA）與主體／角色參考為其知名賣點。 +- **開源自架**（ComfyUI + FLUX.2-dev / SD3.5 / Seedream + LoRA）仍是控制權、成本與資料隱私最佳，但需要 GPU。 + +**對我們最務實的路徑：** 用「代表性角色圖 + 多參考圖一致性」的方式（FLUX.2 API 或 Nano Banana 2），先在少數幾個角色上驗證噴數十張卡面樣張；高品質「最終卡面」再用更具風格控制的開源管線（ComfyUI + FLUX.2-dev + 自訓 LoRA）精修，並以透明背景輸出供前端合成。 + +> ⚠️ **誠實聲明：** 本報告所有事實均取自下列即時來源，重要規格附 URL。凡未能查證或來源不明的細節，已明確標註「未查到」或「依公開報導，建議再以官方文件確認」。**本報告未編造任何未查證的價格或規格。** + +--- + +## 一、當前主流文生圖模型／服務比較（2026 年 8 月現況） + +| 方案 | 廠商 | 型號／狀態 | 角色一致性 | 關鍵要點 | 授權／價格 | +|---|---|---|---|---|---| +| **FLUX.2** | Black Forest Labs | [pro]/[flex]/[max]/[dev]（open weight 版 **2025-11-22**） | **多參考圖（最多 10 張）**，官方明言「同角色同畫風、量產一致」 | 4MP 輸出、任意長寬比、精確文字、brand color hex 對色、JSON 控制、<10s、生成/擴展；FLUX.2-dev open weights | API「Pay as you go」；dev/klein 授權含 Fine-tuning & LoRA rights（見下方來源） | +| **FLUX 3** | Black Forest Labs | 2026-07-23（多模態：圖像/影片/音訊/動作預測） | 多模態，主打真實感 | 單一模組多種輸出；另有一系列工具（Erase、Outpainting、VTO） | API；本遊戲暫以純圖像為主，未必需要 | +| **Nano Banana 2 / Pro** | Google Gemini | gemini-3.1-flash-image（NB2）、gemini-3.1-flash-lite-image（NB2 Lite）、gemini-3-pro-image（NB Pro） | **多參考圖處理與一致性為其強項**、4K | 對話式生圖/編輯、可靠文字渲染、SynthID 浮水印 | 按 token/圖計費（見下方價格） | +| **Imagen 4** | Google | imagen-4（Fast/Standard/Ultra） | 一般 | 傳統商業生圖 API | Fast $0.02 / Standard $0.04 / Ultra $0.06 每圖 | +| **Seedream 5.0 Pro** | ByteDance Seed | 2026 現行旗艦 | 主體／角色參考、互動編輯、圖層分離 | 多模態、高密度資訊圖、依空間註記/草圖精確編輯 | 火山方舟 API / seed.bytedance.com | +| **Seedream 4.0** | ByteDance | 於 2025 年中後釋出（含 open weights） | 主體／角色特徵參考；透明背景（RGBA）為其賣點 | 中英文等多語文字渲染 | 依公開報導；細節建議以火山方舟文生圖文件確認 | +| **Stable Diffusion 3.5 / SDXL** | Stability AI | SD3.5 Large/Medium/Large Turbo、SDXL 皆為 open weights（HF `stabilityai/stable-diffusion-3.5-large`） | 靠 LoRA/IP-Adapter 達成 | 2019–2024 開源先驅；Stability 近年重組，現主推 API + Stable Audio；open-weight 領先地位漸被 FLUX.2-dev 取代 | SD3.5 採 **Community License**（營收超門檻需另行授權，見來源） | +| **Midjourney** | Midjourney Inc. | **V8.2（2026-07-24）**、V8（2026-03）、V7（2025-04） | `--cref` 角色參考 | 審美/美術品質口碑佳；訂閱制服務（Discord/網頁），非彈性 REST API，較難自動化量產 | 訂閱制（每月方案，確切分級價格請以官網為準 — 未查到單一權威即時報價頁） | + +**價格實況（Google，取自官方 pricing 頁，較明確）：** +- **Nano Banana Pro（gemini-3-pro-image）**：1K/2K 圖約 **$0.134／張**、4K 圖約 **$0.24／張**。 +- **Imagen 4**：Fast **$0.02**、Standard **$0.04**、Ultra **$0.06**／張。 +- Nano Banana 2 Lite：小解析度（0.5K≈$0.045 到 4K≈$0.151／張，依定價文件區間）。 +- **FLUX API 單張確切單價：未查到明確公布數字**——官方採「Pay as you go + 定價計算機」與企業/Builder/Platform 訂閱授權（Builder/Platform 階含 Fine-tuning & LoRA rights）。實際 API 每張費用請以 BFL 官方 Pricing 頁與 API 文件為準。 + +--- + +## 二、生成「遊戲用角色立繪」的最佳做法 + +1. **透明背景 PNG（去背）**： + - 最省事：直接要求「native transparent background / RGBA PNG」——**Seedream 系列**以此聞名；**FLUX.2** 可用 JSON/指令控制搭配輸出後處理。 + - 穩健做法：**先在白/綠幕或純色背景生成，再用 ComfyUI 的 Inpaint/Matting 節點（如 rembg）切出 Alpha**，前端以 ``/Pixi 合成即可。這是現有 ComfyUI 管線最不變動的加法。 +2. **角色三視圖／設定圖**： + - 用**多參考圖系**（FLUX.2 multi-reference、Nano Banana 2）一次丟正面/半身樣張，指示「同一角色正面/側面/背面上半身」；或 Prompts 明寫 "character turnaround sheet, three views"（Seedream 5.0 官網即展示多視角藍圖/角色介面範例）。 + - 配上現有 **ControlNet DWpose** 固定姿勢，再以參考圖管角色外觀，即可穩定產出「同角不同姿勢」的立繪。 +3. **一致畫風**： + - 最強：**FLUX.2（同角色/同畫風量產）與 Nano Banana 2（多參考圖一致性）** 的原生一致性。 + - 次佳：**LoRA**（把某個角色/畫風固化成小模型，見第四章）＋ **IP-Adapter** 控制外觀／風格圖。 + - 地面做法：每個角色固定一份**文字描述模板（character sheet JSON）+ 種子（seed）+ 風格關鍵字**，降低每次生成漂移。 + +--- + +## 三、適合卡牌遊戲的生成工作流 + +因我們是「牌面 + 背景 + UI 元素」三種素材，建議分三條工作流： + +1. **卡面（角色立繪）**：以角色一致性方案（FLUX.2 多參考 / Nano Banana 2 或自訓 LoRA）生成透明背景的**角色半身/全身像**，輸出 PNG。 +2. **背景／場景**：用文生圖（FLUX.2 / Imagen 4 / Midjourney V8）獨立做**無角色、適合唬牌酒館氛圍的背景**（酒館內部、暗色牌桌、霓虹），與角色分層，前端疊合 → 彈性、可重複使用。Seedream 5.0 的「互動編輯/圖層分離」適合把角色合成進多種場景。 +3. **UI 元素**：**文字與 UI 精準度是現代模型的強項**——FLUX.2 主打「Production-Ready Text + 精確 UI mockup」，Seedream 5.0 Pro 主打高密度 UI/資訊圖；可生成牌框、按鈕、牌背、字型標題底圖。但**遊戲按鈕/交互元件仍建議用前端 CSS/SVG/Naive UI 元件**，AI 只做「美術圖層」（紋理、鉚釘、牌背花紋），避免每次改字重繪。 + +> 通用建議：**維持「AI 生圖層」與「前端元件層」分離**——AI 負責美術素材，UI 佈局/文字/互動交給 Vue/Naive UI，素材即可快取於靜態 CDN/`assets/`，不必每次請求重新生成，也省 API 成本。 + +--- + +## 四、LoRA 微調角色的流程與成本 + +- **原理**：用 15–50 張同一角色的圖片（多角度、多表情、一致性高）訓練小型 LoRA，將該角色/畫風「固化」成數十 MB 的 adapter，之後任何 prompt 都能穩定復現。 +- **工具**：開源社群主流為 **ostris/ai-toolkit**（GitHub，2026 維持維護、HTTP 200 可查證）、kohya_ss、以及 ComfyUI 內建的 Flux 訓練；SD/SDXL 亦支援 LoRA。 +- **流程**： + 1. 準備並清洗 20–50 張角色圖（標註文字描述）； + 2. 用 ai-toolkit / kohya 在 GPU（建議 12–24GB VRAM；或租雲端 A100/H100 按時計費）訓練 LoRA； + 3. 輸出 `.safetensors`，掛進 ComfyUI Checkpoint/LoraLoader，與 IP-Adapter/ControlNet 併用。 +- **成本**：FLUX.2 的 **dev 授權本身含「Fine-tuning & LoRA rights」**（BFL 官方授權頁列明），即 open weight 版可合法自訓/商用；訓練成本＝GPU 時數（本機 GPU 電費 或 雲端 $1–$3/小時量級，**具體報價依租賃商，未逐一查證**）。HF 上已有現成 **遊戲素材 LoRA**，例如 `gokaygokay/Flux-Game-Assets-LoRA-v2`，可先套用看畫風，再決定是否自訓品牌擬人 LoRA。 + +--- + +## 五、免費／開源 vs 付費 API 的取捨 + +| 面向 | 免費／開源（自架） | 付費 API（FLUX.2 API / Nano Banana / Seedream / Imagen） | +|---|---|---| +| 成本 | 一次性 GPU 電費/月租；FLUX.2-dev、SD3.5、Seedream open weights 免費下載 | 按張計費（Nano Banana Pro 約 $0.13–$0.24/張、Imagen 4 $0.02–$0.06/張、FLUX 依官方定價） | +| 一致性 | 強（自行訓 LoRA + IP-Adapter + 多參考），但需調校 | **強且省事**（FLUX.2/Nano Banana 2 原生多參考一致性） | +| 控制／品質 | 最高（可控每個節點、姿勢 ControlNet） | 高（模型更新即得最強引擎），但黑箱 | +| 隱私／資料 | 全在本機，適合角色設計稿不外洩 | 需上雲，受服務條款與浮水印（SynthID）約束 | +| 自動化整合 | ComfyUI API → 後端 Node 呼叫 | REST API，對 Node/Socket.IO 後端整合更直接 | + +**建議組合（混用）：** +- 早期概念/探索、角色定稿 → **FLUX.2 或 Nano Banana 2 API**（最強一致性、最快出樣張）。 +- 遊戲正式素材批量生產 → 若自備 GPU，用 **ComfyUI + FLUX.2-dev + 自訓 LoRA** 自產（成本攤平、隱私最佳）；無 GPU 再回到 API。 +- 透明底、去背、合成 → ComfyUI 後處理或直接要求 RGBA。 + +--- + +## 六、對我們需求的務實建議（8 個 AI 品牌擬人角色 + 卡牌） + +1. **先用 FLUX.2（或 Nano Banana 2）做「角色定稿」**：因官方主打「同角色/同畫風量產一致」，最適合把 8 個角色（Grok-4 橘髮、Kimi 銀白長髮、Qwen3 粉短髮、GPT-5 黑長髮、Gemini 紫短髮、Deepseek 淺藍短髮、Doubao 深棕短髮、Claude 橘短髮，各自主題色與配件）各產 2–3 張「帶透明底的全身/半身立繪」作為視覺錨點。 +2. **沿用既有 ComfyUI 管線當主力、API 當加速器**：把現有 IP-Adapter + ControlNet DWpose 管線的基底模型升級到 **FLUX.2-dev**（仍支援 ControlNet 類外掛），相容性最高；FLUX.2 的「多參考圖」直接解決 8 個角色間不互相混淆的問題（每張卡明確定義「用角色 X 的參考圖」）。 +3. **卡面與背景分層**：角色（透明 PNG）＋ 酒館/牌桌背景（獨立生成）分開生產，前端 Vue 疊合；UI 元件（牌框、牌背、按鈕底圖）交給 **FLUX.2 的「production-ready text / UI」** 或 **Seedream 5.0 Pro**，交互文字仍走 Naive UI。 +4. **行有餘力再自訓品牌擬人 LoRA**：待 8 角色視覺定稿後，各收 20–30 張樣張，用 ai-toolkit 訓 FLUX.2-dev LoRA，把角色「固化」，日後任何季節卡面/表情都一致且無需每張帶參考圖。FLUX.2 dev 授權已含 LoRA 權利。 +5. **預算導向**：若 API 預算有限，先用 **Imagen 4 / Nano Banana 2 Lite**（$0.02–$0.07/張）出量產草圖，最終定稿再用 Pro 級（$0.13–$0.24/張）或開源自架精修。 +6. **風險與合規**：AI 生成商業素材請檢視各模型**商用授權**（FLUX.2 dev 需依 BFL 授權、SD3.5 Community License 有營收門檻）；角色為「AI 品牌擬人」，須注意品牌商標／外觀仿冒之法律風險（本報告不構成法律意見）。若輸出要賣／商用，另確認 SynthID 浮水印與服務條款。 + +--- + +## 資料來源連結清單（皆於調查當日存取） + +**Black Forest Labs（FLUX）** +- 模型總覽（FLUX 3 / FLUX.2 Max / FLUX.2 / FLUX.2 Klein / Flux Tools）：https://blackforestlabs.ai/models/ +- 公司成立與 FLUX.1 發布（2024-08-01）：https://blackforestlabs.ai/announcing-black-forest-labs/ +- FLUX.2 產品頁（4MP、multi-reference、json 控制、四變體）：https://blackforestlabs.ai/models/flux-2 +- FLUX 3 頁面（多模態）：https://blackforestlabs.ai/models/flux-3 +- 部落格（FLUX 3 公告 2026-07-23、VTO/Erase/Outpainting 等）：https://blackforestlabs.ai/blog/ +- 定價與授權（Builder/Platform/Professional 階含 Fine-tuning & LoRA rights；Open Weights）：https://blackforestlabs.ai/pricing/ +- GitHub：https://github.com/black-forest-labs/flux +- Hugging Face：FLUX.2-dev（open weights，created 2025-11-22，gated、下載 116 萬+）：https://huggingface.co/black-forest-labs/FLUX.2-dev ；FLUX.2-klein-9B/4B：https://huggingface.co/models?search=FLUX.2 + +**Google（Gemini image / Nano Banana / Imagen）** +- 圖像生成文件（Nano Banana 家族四型號 + SynthID）：https://ai.google.dev/gemini-api/docs/image-generation +- 定價（Nano Banana Pro $0.134/$0.24、Imagen 4 $0.02/$0.04/$0.06 等）：https://ai.google.dev/gemini-api/docs/pricing + +**ByteDance Seed（Seedream）** +- Seedream 5.0 Pro（多模態、互動編輯、圖層分離）：https://seed.bytedance.com/en/seedream5_0_pro +- ByteDance Seed 官網（Models → Seedream 5.0 Pro）：https://seed.bytedance.com/ +- 火山方舟（Volcengine Ark）文生圖 API 文件（Seedream 於火山方舟提供；透明底/角色參考細節建議查詢此處）：https://www.volcengine.com/docs/82379 + +**Stability AI（Stable Diffusion）** +- HF SD3.5 Large（Community License）：https://huggingface.co/stabilityai/stable-diffusion-3.5-large +- 官網（現主推 Stable Audio 3.0 / API / Self-Hosted License）：https://stability.ai/ + +**Midjourney** +- 版本歷史（V7 2025-04-04、V8 2026-03-17、V8.1 2026-04-14、V8.2 2026-07-24）與 --cref 角色參考：https://en.wikipedia.org/wiki/Midjourney +- 官網：https://www.midjourney.com/ + +**開源工作流／LoRA** +- ComfyUI（本機開源引擎，API 節點支援 Nano Banana/Seedream 等）：https://github.com/comfyanonymous/ComfyUI （README：https://raw.githubusercontent.com/comfyanonymous/ComfyUI/master/README.md） +- ostris/ai-toolkit（LoRA/微調訓練工具，存續可查）：https://github.com/ostris/ai-toolkit +- 現成遊戲素材 LoRA 範例：https://huggingface.co/gokaygokay/Flux-Game-Assets-LoRA-v2 +- 其他：IP-Adapter 與 ControlNet 為現有 ComfyUI 生態既有節點（延用既有筆記），此處不再另列。 + +**未查到／需再確認事項（誠實標註）** +- FLUX API「每張圖」確切單價：未查到官方單一數字，請以 BFL Pricing 頁與 API 文件為準。 +- Midjourney 各訂閱分級（Basic/Standard/Pro/Mega）當季確切月費：未查到權威即時報價頁，請以官網為準。 +- Seedream 4.0 的「原生透明背景（RGBA）」與「角色特徵/主體參考」細節：依公開報導，建議以火山方舟文生圖官方文件確認。 diff --git a/docs/research/minimax-ai-game-visual/03_靜態轉動態動畫化.md b/docs/research/minimax-ai-game-visual/03_靜態轉動態動畫化.md new file mode 100644 index 0000000..2bbb467 --- /dev/null +++ b/docs/research/minimax-ai-game-visual/03_靜態轉動態動畫化.md @@ -0,0 +1,182 @@ +# 靜態 AI 圖片轉動態素材：技術路徑調查報告（適用於 Liar's Bar 網頁卡牌唬牌遊戲） + +**調查日期**：2026-08-06 + +## 摘要 + +本報告調查「把靜態 AI 角色立繪／卡面變成瀏覽器可流暢播放的輕量動畫」的技術路徑，涵蓋：(1) 圖生視訊工具現況（MiniMax H3、Kling、Runway、免費線上方案）、(2) 靜態立繪做「小動作動畫」的方法（Live2D、EbSynth、Runway Motion Brush、Kling 3.0 Motion Control、開源 Stable Video Diffusion）、(3) 可放入 Vue 網頁的格式（GIF / WebP / APNG / AVIF / WebM / MP4 / 精靈圖 sprite sheet）、(4) 卡牌遊戲常見動態效果哪些該用 AI、哪些該用 CSS／手寫動畫、(5) 各路徑成本與品質比較、(6) 給我們的務實方案組合建議。 + +**核心結論**：把「角色立繪做眨眼／髮絲／微笑的小動作」用 AI 圖生視訊最划算，其中 **MiniMax H3 的 First/Last-Frame Image-to-Video**（第一幀=立繪，末幀=同一立繪，讓靜態圖自然「活起來」，768P 每 0.08 美元/秒、4–15 秒、24fps）與開源的 **Stable Video Diffusion（在自家 ComfyUI 免費跑，25 幀 1024×576@6fps，營收 <100 萬美元可免費商用）** 是兩條最務實路線；而「抽卡亮光、卡面光影、進場／翻牌動畫」等瞬態 UI 效果用 **CSS／手寫動畫** 更務實（確定性高、零成本、可縮放）。Live2D 品質最高但需要把立繪人工拆層綁骨，工作量大，建議列為後期選項。產出優先輸出 **WebM（VP9/AV1）或 APNG**（支援透明背景、體積小），GIF 作為萬用備援。 + +--- + +## 1. 圖生視訊（Image-to-Video）工具現況 + +### 1.1 MiniMax H3（本文建議的主力候選） + +- **定位**：MiniMax 官方 API 文件標示 H3 為「next-gen **open** general-purpose multimodal video model（新一代開放通用多模態視訊模型）」，支援 Text-to-Video、**First/Last-Frame Image-to-Video**、參考（Reference）生成與視訊編輯。 +- **輸出規格**（官方 Models / Video Generation 文件）：輸出解析度 **768P / 2K**；時長 **4–15 秒（僅整數）**；**24 fps**。 +- **圖生視訊模式**：First/Last-Frame 模式輸入 0–2 張圖（起／末幀）；官方明言用途即「**bring a specific frame naturally to life（讓指定靜態幀自然活起來）**」——正適合把角色立繪變成眨眼／擺動／微笑的小動畫。 +- **輸入限制**：參考圖 ≤9 張、影片 ≤3 段（每段 2–15s）、圖片寬高 256–5760、支援 JPG/PNG/WEBP/HEIC 等，單張 ≤30MB。 +- **計價（官方 Pay-as-You-Go）**： + - 輸出：**768P 每 0.08 美元/秒；2K 每 0.13 美元/秒**。 + - 輸入素材：圖片**前 5 張免費，之後每張 0.04 美元**；純文字提示免費。 + - 範例：一段 5 秒 768P = 約 0.40 美元；一個角色做 5–8 段備選再挑最好的一段，成本極低。 + - 另有企業預付「Video Packages」：1,000 美元 / 3,760 視訊點、2,500 美元 / 9,920 點、4,500 美元 / 18,900 點、6,000 美元 / 26,780 點（標準/Pro/Scale/Business，1 個月有效）——對我們的用量不需用到。 +- **來源**： + - Models 頁面：https://platform.minimax.io/docs/guides/models-intro + - Video Generation 文件：https://platform.minimax.io/docs/guides/video-generation + - Pay-as-You-Go 計價：https://platform.minimax.io/docs/guides/pricing-paygo + - Video Packages 計價：https://platform.minimax.io/docs/guides/pricing-video + +### 1.2 Kling AI（快手可靈） + +- **定位**：提供 Text-to-Video / **Image-to-Video** / Motion Control / 口型同步等；目前主推 **Kling 3.0 / 3.0 Omni**（官方稱同步影音、智慧分鏡、元素參考，2026-02-05 發布 3.0）。 +- **圖生視訊能力**：Kling 官方開發者首頁宣稱可將文字、圖片、參考轉成多模態創意內容；其「Motion Control」可「**用參考幀的動作來讓一張靜態圖動起來**」（此敘述同時見於 Runway 對 Kling 3.0 Motion Control 的工具說明）。 +- **計價**：**確切美元單價未查到**——官方定價／訂閱頁（app.klingai.com 的 Subscription／API Pricing）需登入才能看，未登入無法取得實價。已知：Kling 提供**免費額度**（新用戶有免費 credits，並有每日／訂閱制 credits 系統）；另可透過 Runway 內建 Kling 3.0 使用（詳見 1.3）。 +- **來源**： + - Kling 官方站：https://klingai.com/ + - Kling Developer 首頁：https://klingai.com/global/dev/document-api/guide/pricing + - Kling 3.0 Model 頁（kling.art）：https://kling.art/model + +### 1.3 Runway + +- **定位**：整合多家模型於一站的 AI 影像／視訊工作台，目前在 Runway 內可用 **Gen-4.5、Gen-4 Turbo、Aleph 2.0、Seedance 2.0、Kling 3.0、Nano Banana Pro（Gemini）** 等。 +- **計價（官方 Pricing，年繳價）**： + - **Free**：0 美元，一次性 125 credits（不逾期）、5GB 儲存。 + - **Standard**：月繳 15 美元／年繳 12 美元，每月 625 credits。 + - **Pro**：月繳 35 美元／年繳 28 美元，每月 2,250 credits（另有 500GB 儲存、自訂語音）。 + - **Max**：月繳 95 美元／年繳 76 美元，每月 9,500 credits（未用 credits 可展延 1 個月）。 + - **官方換算**：Gen-4.5 = **12 credits/秒**（625 credits ≈ 52 秒）；「Gen-4.5 60 credits/5s」→ 以 5 秒為 60 credits。Pro 月額 2,250 credits 約可做 187 秒 Gen-4.5。 +- **Motion Brush 現況（重要）**：Runway Help 明載 **「Motion Brush 是 Gen-2 模型專屬功能，Gen-2 已淘汰（Gen-2 Deprecation）」**，即 **Runway 傳統 Motion Brush 已停用**。現行替代為 Runway 內建的 **Kling 3.0 Motion Control**（第三方模型）：「以參考幀的動作來動畫化一張靜態圖」+ 選擇性 motion effects。另 Runway 的舊「video project editor」已於 **2026-07-30 退役**。 +- **來源**： + - Runway Pricing：https://runwayml.com/pricing + - Runway Help（Motion Brush=Gen-2 已停用、Kling 3.0 Motion Control）：https://help.runwayml.com/hc/en-us/search?query=motion+brush + +### 1.4 免費線上免費工具／免費額度現況 +- **MiniMax**：圖生視訊輸入圖片前 5 張免費；消費端 Hailuo 生態另有免費試用額度（確切額度以官方當期公告為主，本調查僅確認 API 端前 5 圖免費）。 +- **Runway**：Free 方案一次性 125 credits（約 10 秒 Gen-4.5 影片）可試玩。 +- **Kling**：提供新用戶／訂閱 credits（確切數值未查到，需登入）。 +- **EbSynth**：完全免費（見 2.3）。 +- **開源 SVD**：免費下載權重、可自架（見 2.5）。 + +--- + +## 2. 靜態立繪「小動作動畫」的方法論 + +### 2.1 圖生視訊（第一/末幀）+ 迴圈化 +最貼合「一張立繪活起來」的路線：以立繪當第一幀，末幀也設為同一張（或近似的閉合姿態），提示詞寫「眨眼、髮絲輕擺、微笑、呼吸」等微動作，模型補出中間幀。→ **MiniMax H3**（最便宜、官方明確支持「bring a frame to life」）、**Kling Image-to-Video**、**Runway Gen-4.5**、**SVD（自架）** 皆可做。此種產出是「短片」，想當卡面／角色待機動畫需**迴圈播放**；AI 短片未必完美閉合，實務上挑幾版取最接近可迴圈的一版，或短迴圈即可接受。 + +### 2.2 Live2D Cubism +- **原理**：把原畫**拆成獨立部件（髮、眼、眉、口、頭、身…）綁骨骼／變形器**，用參數（呼吸、眨眼、視線、口型）驅動「隨時可即時互動」的擬人動畫。品質最高、能做到視線追蹤與口型，是 VTuber／抽卡角色待機的主流。 +- **工具與價格**：Live2D **Cubism Editor** 有 FREE 版與 PRO 版；PRO 可免費試用 42 天，之後降為 FREE 版（功能受限）。網頁整合用 **Cubism Web SDK**（JS/TS，.moc3/.model3.json 載入 Vue 可用）。 +- **關鍵取捨**：我們的 8 個角色立繪是「一整張 AI 圖」，**沒有分層零件**；Live2D 需要**人工把圖拆成可動部件並逐角色綁骨**，是高度的手工建模工作（每個角色數小時到數天），**不是自動化**。短期不建議、中期若追求「待機呼吸+視線」的高品質再導入。 +- **來源**：https://www.live2d.com/en/ （Cubism Editor FREE vs PRO、42 天試用、Web SDK 均見於官方站） + +### 2.3 EbSynth +- **原理**：VFX 軟體，**「透過編輯一格來改變整段影片」**——它需要一段**「已有動作的底片影片」**，把某幾格畫上（或 AI 生成）關鍵幀，再用**紋理合成（非生成式 AI）**傳播到整段。官方強調其傳播「不使用生成式模型、不依賴外部資料集訓練」。 +- **價格**：**免費**（官方標示 Free，支援 720p，可上 4K）。 +- **對我們的關鍵限制**：**它不能無中生有**。我們只有靜態立繪、沒有角色影片底片，因此 EbSynth 單獨無法把靜態圖變動畫；除非先由圖生視訊產生一段「已有微動作」的底片再交給 EbSynth 加強，疊加使用才有意義。 +- **來源**：https://ebsynth.com/ + +### 2.4 Runway Motion Brush（已停用）與 Kling 3.0 Motion Control +- 見 1.3：Runway 傳統 **Motion Brush 屬 Gen-2 且已停用**；現行對應功能為 **Kling 3.0 Motion Control**（以參考幀／運動效果動畫化靜態圖）。本調查確認「在 Runway 上已沒有可用的傳統 motion brush」。 + +### 2.5 開源 Stable Video Diffusion（SVD）— 自架免費路線 +- **模型**：Stability AI 的 **stable-video-diffusion-img2vid-xt-1-1（SVD 1.1 Image-to-Video）**，HuggingFace 開放下載，條件輸入單張圖生成短片。 +- **規格**：**25 幀、1024×576、預設 6 FPS**（≈4 秒），採樣 Motion Bucket；需 GPU＋相關 python 環境。 +- **授權（重要，對商業遊戲關鍵）**：**Stability AI Community License**——研究／非商用免費；**商用：年營收 <100 萬美元可免費使用，但須至 stability.ai 註冊**；超過 100 萬美元需向 Stability 取得授權；並須標註「Powered by Stability AI」。 +- **對我們的意義**：我們已有 **ComfyUI 環境**，可用 SVD 在本地把立繪轉成短片，**零 API 費用**（成本=GPU 電費／算力），完全符合「小團隊營收 <100 萬美元」的免費商用範圍——唯一成本是 GPU 時間與 6fps／短時長／較低解析度的品質折衷。 +- **來源**： + - Model Card：https://huggingface.co/stabilityai/stable-video-diffusion-img2vid-xt-1-1 + - 授權（Community License）：https://stability.ai/community-license + +--- + +## 3. 可放入 Vue 網頁的格式（GIF / WebM / APNG / 影片 / 精靈圖） + +依據 MDN（Mozilla Developer Network）格式指引整理： + +| 格式 | 特性 | 適合 | 注意 | +|---|---|---|---| +| **GIF** | 通用、8-bit（256 色）、檔大 | 萬用備援、舊瀏覽器 | 有損色彩、體積大，MDN 建議動畫優先改用 WebP/AVIF/APNG | +| **APNG** | 無損動畫 PNG，支援透明 | 無損小動畫、貼圖、進度動畫 | 所有現代瀏覽器（Chrome/Edge/FF/Safari）支援 | +| **WebP（動畫）** | 壓縮佳、支援透明 | 一般動畫預設優選；壓縮優於 PNG/GIF | 現代瀏覽器全面支援 | +| **AVIF（動畫）** | 壓縮最佳（中位數約 50% vs JPG，優於 WebP） | 高壓縮動畫 | Safari16.1+/Firefox113+；支援較窄，用 `` 附 WebP 備援 | +| **WebM（VP9/AV1）** | 真正的視訊編碼、品質/體積比最佳、支援透明(VP9 alpha) | **適合較長的立繪動畫／卡面影片**，用 `