Flow spec · 交給開發團隊
四格漫畫創作器 × AR 照片拍攝
四格漫畫創作器 × AR 照片拍攝
使用流程草案
兩個功能的學生端流程、每一步的畫面與系統行為、以及需要工程處理的例外情況。設計上刻意讓「先對話、後創作」——學生要先想清楚內容，AI 才幫他表達出來。
四格漫畫創作器
學習目標用「起—承—轉—合」四格結構整理一件事，並學會向 AI 準確描述畫面。
核心設計先與 AI 數字人對話問出故事重點，對話結果自動變成四格分鏡草稿。
最終產出一張四格漫畫（可下載 / 貼上展覽場串）＋一份對話紀錄。
1
選數字人夥伴
畫面：avatar-select.html（沿用現有選角頁）
學生看到3–5 個角色（例：小記者 Modo、歷史學者 Modo、社區阿姨），每個角色寫明「他會問你什麼」。
系統做什麼載入該角色的提問腳本（由 Modo 團隊定制，老師不可改），帶入老師任務的題目與指示。
帶到下一步的資料
roleId、assignmentId（若由任務進入）↓
2
對話：問出故事
畫面：chat.html（對話 + 右側「已收集的重點」欄）
學生看到數字人按腳本逐條問，例如：
- 這件事在哪裡發生？
- 最開始發生了什麼？
- 中間有什麼轉折？
- 最後你有什麼感受？
系統做什麼每回答一條就把重點抽成一張「重點卡」（地點／人物／事件／轉折／結尾），顯示在右欄讓學生可即時修改。
完成條件四張核心重點卡（起／承／轉／合）都有內容才亮起「生成分鏡」按鈕。
例外：學生答得太短（少於 5 字）→ 數字人追問一次；連續兩次仍過短則提供三個範例答案讓他選。
↓
3
自動生成四格分鏡（文字）
畫面：comic-storyboard（新畫面）
學生看到四個格子，每格有一句畫面描述＋一句對白，全部可以直接改字、可拖動調換順序。
系統做什麼把重點卡轉成四格分鏡文字（畫面描述 + 對白），並套用學校的班本素材（角色、校服、校園背景）。
為什麼要這一步先確認文字才畫圖，減少「生成十次都不對」的挫敗感，也省 API 成本。
↓
4
選畫風 → 出圖
畫面：create.html（風格選擇 + 生成中動畫）
學生看到3–4 種畫風（像素、粉筆、水彩、漫畫線稿），選一種後按「生成四格」；生成期間 Modo 做動畫並顯示進度。
系統做什麼四格一次生成，保持角色一致性（同一角色描述 + 固定 seed）；失敗的格子可單格重生成，不用整張重畫。
限制每則任務可重生成 3 次（單格重生成不計），避免無限刷圖。
例外：生成超時或內容被安全機制擋下 → 顯示「Modo 想再試一次」＋建議改寫描述，不顯示技術錯誤訊息。
↓
5
加標題與對白框
畫面：create-result.html（編輯模式）
學生看到四格圖已排好版，可加標題、拖動對白泡泡、換字體大小；一鍵套用校本相框。
系統做什麼合成最終圖片（含對白層），產生縮圖與可下載 PNG。
↓
6
提交 / 貼上展覽場串
畫面：create-result.html（完成狀態）→ board.html
學生看到三個選擇：貼到我的創作串、提交給老師、下載。若由老師任務進入，預設「提交給老師」。
系統做什麼寫入作品、更新任務進度為 100%／待批改、累加 Comic Artist 徽章進度、把對話紀錄一併存檔供老師查看。
給開發團隊的備註
- 對話 → 重點卡的抽取建議用結構化輸出（
{place, characters, start, turn, ending}），前端只負責顯示與編輯，方便日後換模型。 - 分鏡（步驟 3）與出圖（步驟 4）要分開儲存：
storyboard可重用，重生成時不用再跑對話。 - 角色一致性：同一次創作固定
seed+ 角色描述前綴；單格重生成時只改該格的畫面描述。 - 整個流程要可中斷續做：每一步完成即存草稿（
draftId），學生下課回家可以續做。 - 老師端需要看到「對話紀錄 + 分鏡 + 成品」三層，用來評估思考過程而不只看圖。
AR 照片拍攝
學習目標把學習成果放進真實場景拍攝，練習構圖與口頭說明。
核心設計AR 疊加校本素材（吉祥物、相框、作品）到相機畫面，即拍即用。
最終產出一張 AR 合成照＋一句說明（可加語音），貼上展覽場串。
1
選 AR 素材
畫面：ar-picker（新畫面）
學生看到三類素材頁籤：
- 校本角色（吉祥物、校慶 IP）
- 我的作品（自己之前生成的圖／四格漫畫）
- 主題相框（節慶、學科主題）
系統做什麼從班本素材庫與學生作品庫載入清單；素材需已由老師／Modo 上架。
↓
2
開相機、擺放素材
畫面：ar-camera（相機全螢幕）
學生看到即時相機畫面，素材可拖動、雙指縮放旋轉；底部有「換素材／加第二個素材／切前後鏡」。
系統做什麼請求相機權限；素材以平面貼合方式跟隨畫面（不需要完整 3D 追蹤，第一版用螢幕空間定位即可）。
無相機時改為「上傳一張相片」再疊素材，功能其餘部分相同。
例外：學生拒絕相機權限 → 直接進上傳模式，並在畫面說明「之後可在設定重新允許」。校內平板共用時不記住個別權限。
↓
3
拍照與重拍
畫面：ar-camera（快門狀態）
學生看到大快門鈕、3 秒倒數（方便自拍合照）、拍完即時預覽「用這張 / 重拍」。
系統做什麼合成相機畫面＋素材層輸出單張圖；保留最近 3 張暫存讓學生挑。
↓
4
加相框與說明
畫面：create-result.html（AR 模式）
學生看到套用校本相框、輸入一句說明（或按住錄一段 15 秒語音）、可加日期與班別標籤。
系統做什麼合成最終圖、儲存語音檔、產生 QR code 供家長下載原圖。
↓
5
貼上展覽場串 / 提交
畫面：board.html（自己的創作串）
學生看到貼到自己的創作串（作為過程紀錄的一則）、提交給老師、或下載。
系統做什麼若展覽場設了需審核，貼文標為待審核；更新任務進度與徽章進度。
給開發團隊的備註
- 第一版不做 SLAM／平面偵測：素材用螢幕空間定位（拖放＋縮放）已足夠，成本與失敗率都低很多。
- 相機用
getUserMedia，合成用canvas；iPad Safari 要處理playsinline與方向變化重繪。 - 素材需提供透明 PNG 與建議尺寸；班本素材上傳時就要做透明底檢查。
- 照片一律先在裝置端壓縮（長邊 1600px）再上傳，校園 Wi-Fi 頻寬有限。
- 肖像權：拍到其他同學的照片，若展覽場開了「需審核」，一律等老師通過才公開。
