今天要分享一個更進階的案例：使用者輸入一段文字 → Gemini 生成圖像 → 自動上傳到 Discord。這不僅能用於娛樂，還能成為社群小幫手、自動生成插圖的工具。

Workflow 架構

這個流程會用到 4 個主要節點：

1. When chat message received
2. HTTP Request（呼叫 Gemini API）
3. Code in JavaScript（解析 streaming 回應）
4. Discord（發送文字與圖片）

下面我會逐一拆解節點設定。

節點詳細設定

1. When chat message received

這是 Workflow 的觸發器。

• Node Type：@n8n/n8n-nodes-langchain.chatTrigger
• Name：When chat message received
• Webhook ID：系統自動生成（不用改）

這個 node 的作用是讓我們可以在 n8n 的 chat UI（或 webhook）輸入一段 prompt，並將其存放在 {{$json.chatInput}} 變數中。

2. HTTP Request

這個節點用來呼叫 Gemini Streaming Image Generation API。

• Node Type：HTTP Request

• Method：POST

• URL：

  https://aiplatform.googleapis.com/v1/publishers/google/models/gemini-2.0-flash-preview-image-generation:streamGenerateContent?key=YOUR_API_KEY
  

• Headers：

  • Content-Type: application/json

• Body（JSON 模式）：

  {
    "contents": [
      {
        "role": "user",
        "parts": [
          {
            "text": "{{ $json.chatInput }}"
          }
        ]
      }
    ]
  }
  

⚠️ 注意：這裡要換成你自己的 Google API Key。

3. Code in JavaScript

Gemini 的回應是 streaming，可能會包含文字（part.text）和圖片（part.inlineData.data）。這裡需要寫一段 JS 來解析。

程式碼如下：

// 遍歷所有輸入項，因為 Gemini 是 streaming response
let imageData = null;
let textContent = '';
let mimeType = 'image/png';

for (const item of $input.all()) {
  const response = item.json;

  if (!response.candidates || response.candidates.length === 0) continue;

  const candidate = response.candidates[0];
  if (!candidate.content || !candidate.content.parts) continue;

  for (const part of candidate.content.parts) {
    if (part.text) {
      textContent += part.text;
    }
    if (part.inlineData && part.inlineData.data) {
      imageData = part.inlineData.data;
      mimeType = part.inlineData.mimeType || 'image/png';
    }
  }
}

if (!imageData) {
  throw new Error('在所有回應中沒有找到 inlineData 圖片數據');
}

const buffer = Buffer.from(imageData, 'base64');
const extension = mimeType.includes('jpeg') ? 'jpg' : 'png';
const fileName = `gemini_generated.${extension}`;

return {
  json: {
    content: textContent || "Gemini 生成的圖片"
  },
  binary: {
    data: {   // 對應 Discord node 的檔案欄位
      data: buffer,
      mimeType,
      fileName
    }
  }
};

這段程式做的事：

1. 遍歷 streaming 回應的每一個 candidate。
2. 收集文字內容（可能是描述、補充訊息）。
3. 找到 inlineData，取出圖像的 base64，轉成 Buffer。
4. 自動判斷副檔名（png / jpg）。
5. 回傳 json.content（要貼到 Discord 的文字）和 binary.data（圖檔）。

4. Discord

最後一個節點，把文字和圖像送到 Discord。

• Node Type：Discord

• Authentication：Webhook

• Webhook URL：填入 Discord 提供的 Webhook

• Content：

  {{$json["content"]}}
  

• Files：

  • 指向上一個節點輸出的 binary → data

這樣 Discord 就會收到一則訊息，包含一段文字與一張 AI 生成的圖像。

實際效果

1. 在 chat 輸入：

   畫一隻在月球上彈吉他的貓
   

   

2. Workflow 執行，Gemini 生成一張圖片與簡短描述。
   

3. Discord 收到訊息：

   • 文字：Gemini 的文字敘述
   • 圖片：一張由 AI 生成的 PNG。
     

踩坑與心得

• inlineData 不一定存在：有時候 API 只回文字，要額外做錯誤處理。
• 多候選處理：目前只拿第一個 candidate，可以擴充成一次貼多張圖。
• Discord 限制：上傳檔案大小不能超過 8MB（免費版），要注意壓縮或調整 prompt。

今日總結

Day14 完成了一個實用又酷炫的 workflow：輸入一句 prompt，AI 就能生成圖片並自動貼到 Discord。這個流程可以拿來做成 社群小幫手，或是 快速生成貼圖 / 靈感草稿 的工具。

明日預告

Day15 會繼續探索 Gemini AI × 自動化客戶回饋分析與即時警報，學會如何用 AI 把文字資料整理成有用的結構！