想為孩子製作個性化教育故事書，卻被複雜的 Prompt 工程嚇退？
AI 繪本魔法師 是一個基於 n8n 的自動化工作流專案，只需輸入一個教育關鍵字（如「誠實」、「分享」），系統便會自動完成故事編排、角色設定、分鏡繪製，並封裝成精美的 HTML 電子書。
Part 1：系統架構與核心功能 #
1. 技術架構概覽 #
本專案使用 n8n 作為自動化編排核心，串接以下服務：
| 階段 | 技術/工具 | 說明 |
|---|---|---|
| 介面層 | Telegram Bot API | 接收使用者指令與回傳成品。 |
| 邏輯層 | n8n (Self-hosted) | 處理 Regex 過濾、資料清洗、流程控制 (Loop)。 |
| 大腦層 | Groq API (Llama 3.3) | 負責故事創作、JSON 格式化輸出、Prompt 工程。 |
| 視覺層 | Replicate (Flux 1.1 Pro) | 執行高指令遵循度的圖像生成。 |
| 封裝層 | Node.js (Code Node) | 動態組裝 HTML/CSS。 |
2. 核心功能特色 #
- 零門檻操作： 透過 Telegram Bot 介面，無需學習複雜指令。
- 結構化敘事： 自動生成包含起承轉合的 4 頁微型故事。
- 角色一致性 (Character Consistency)： 透過代碼鎖定主角與反派特徵，確保不同頁面間的角色形象連貫。
- 即時電子書封裝： 自動生成排版精美的 HTML 網頁檔，提供完整閱讀體驗。
- 智能過濾： 內建 Regex 過濾器，防止機器人誤判閒聊訊息，節省 API 成本。
Part 2：工作流邏輯與實作細節 #
3. 工作流流程 #
Telegram Trigger → Switch Node (Regex Filter) → Groq LLM (Story Generation)
↓
Telegram (Help Message) ← Switch Node ← JSON Parse & Character Locking
↓
SplitInBatches (Loop 4 Pages)
↓
Replicate (Flux Image Gen)
↓
Merge & Collect
↓
HTML Builder (Code Node)
↓
Telegram (Send Document)
4. 輸入過濾 (Input Gatekeeping) #
為了避免閒聊消耗算力，使用 Switch Node 搭配正則表達式進行嚴格篩選：
Regex Rule:
^text=".*"$
說明： 僅接受 text="主題" 格式的輸入，其餘輸入（如 /start 或普通對話）將被導向引導訊息。
5. 結構化輸出 (Strict JSON Output) #
利用 Llama 3.3 的指令遵循能力，在 System Prompt 中強制要求輸出 JSON 格式：
{
"story_title": "故事標題",
"character_bank": {
"villain": "反派外觀描述"
},
"pages": [
{
"page_number": 1,
"story_text": "故事內容",
"image_prompt": "繪圖提示詞"
}
]
}
這使得程式能將「故事文字」與「繪圖提示詞」分離處理。
6. 動態 HTML 組裝 (HTML Assembly) #
系統不依賴第三方 PDF 工具，而是直接透過 Javascript (Code Node) 生成 HTML：
- 內嵌 CSS RWD 樣式，支援手機與電腦閱讀。
- 自動將圖片 URL 與故事文字排版。
- 輸出為單一
.html檔案，方便使用者保存與分享。
Part 3：快速開始指南 #
7. 前置需求 (Prerequisites) #
請確認您已準備以下資源：
- n8n 實例（Desktop 版或 Cloud 版皆可）
- Telegram Bot Token（向 @BotFather 申請）
- Groq API Key（用於 LLM）
- Replicate API Token（用於 Flux 繪圖）
8. 安裝步驟 #
-
下載工作流檔案：
下載本專案的
workflow.json檔案。 -
匯入工作流：
在 n8n 介面選擇 “Import from File”。
-
設定 Credentials：
- 在 Telegram Trigger 與 Send Message 節點填入您的 Telegram Credential。
- 在 HTTP Request (Groq & Replicate) 節點填入對應的 API Key。
-
啟用工作流：
點擊 Activate 啟用工作流。
Part 4：使用指南 #
9. 基本使用方式 #
-
打開您的 Telegram Bot。
-
輸入以下指令格式：
text="你的主題"
範例：
text="勇氣"
text="迷路的太空人"
text="不想刷牙的小鱷魚"
- 等待約 30-60 秒，機器人將回傳一本 HTML 故事書。
Part 5：常見問題與疑難排解 #
| 問題現象 | 診斷與解決方案 |
|---|---|
| Telegram Bot 無回應 | [1] 檢查 Credentials： 確認 Telegram Bot Token 已正確填入 Telegram Trigger 節點。 [2] 檢查工作流狀態： 確認工作流已 Activate。 [3] 查看 n8n 日誌： 檢查是否有錯誤訊息。 |
| 生成的故事格式錯誤 | [1] System Prompt 檢查： 確認 Groq LLM 節點中的 System Prompt 明確要求輸出 JSON 格式。 [2] JSON 解析錯誤： 檢查 JSON Parse 節點是否能正確解析輸出。 |
| 圖片生成失敗 | [1] Replicate API Key： 確認 Replicate API Token 已正確設定且有效。 [2] 圖片 URL 過期： Replicate 生成的圖片 URL 有時效性，確保工作流在時效內完成。 |
| HTML 檔案無法開啟 | [1] 檔案格式檢查： 確認 Code Node 正確生成 HTML 格式。 [2] 圖片 URL 有效性： 確認所有圖片 URL 在發送時仍然有效。 |
Part 6：專案展示與後續優化 #
10. 專案展示流程 #
- 輸入指令： 在 Telegram Bot 中輸入
text="主題"。 - n8n 運作中： 工作流自動執行故事生成、圖片繪製、HTML 封裝。
- 最終成品： 收到精美的 HTML 故事書檔案。
11. 後續優化建議 #
- 增加更多故事模板選項。
- 支援多語言故事生成。
- 優化圖片生成速度（使用快取機制）。
- 添加故事書預覽功能。
授權與致謝：
- Models: Meta Llama 3, Black Forest Labs Flux.1
- Created with ❤️ using n8n automation
📥 工作流配置檔案下載 #
如果您想要在自己的 n8n 實例中使用這個工作流，可以下載以下配置檔案並匯入到您的 n8n 中：
使用說明：
- 下載 JSON 檔案後，在 n8n 中選擇「匯入工作流」
- 上傳此 JSON 檔案
- 請記得更新以下憑證：
- Replicate API Token
- Groq API Key
- Telegram Bot Token
- 根據您的需求調整節點參數
📖 生成範例：繪本故事書 #
以下是一個使用此系統生成的完整繪本範例，展示了系統的實際輸出效果：
說明： 這是一個完整的 HTML 格式繪本，包含 4 頁故事內容和 AI 生成的插圖。您可以直接在瀏覽器中打開查看，或下載後分享給他人。