出國旅行的時候，最容易遇到的困擾之一，就是「看不懂當地的文字」。不管是地鐵站的告示牌、餐廳的菜單，還是路邊的注意事項，如果完全看不懂，常常會讓人焦慮、甚至錯過重要資訊。因此，我想要來嘗試 —— 「旅遊翻譯小助手」。也是參考YT的DongStudio的影片!!
透過這個小工具，旅客可以直接在 LINE 上傳圖片（例如標示、菜單）或輸入文字，即時獲得翻譯結果。如果是圖片類型的輸入，除了翻譯之外，還會附上簡單的含義與注意事項，讓使用者不只是看懂字面意思，更能理解背後要傳達的訊息。
在實作上，我把功能分成兩個工作流：

1. 實用句子翻譯：將中文翻譯成英文，方便旅客直接應用在旅途中，例如點餐、問路、購物。
2. 旅遊標示翻譯：針對標示、告示牌、菜單等，提供翻譯 + 注意事項。

實作-實用句子翻譯

1. 建立Webhook節點(設定與前幾篇設定LINE相同)

2. 建立Edit Fields節點

   1. 將chatInput的JSON填入(方法與前一篇相同)
   2. 這次沒有保留sessionId是因為沒有需要記憶的功能
      

3. 建立AI Agent節點

   1. system prompt

你是一個專業的翻譯與語言學習小幫手。
使用者會輸入一句話，並可能指定要翻譯成某種語言（例如「翻譯成英文：...」或「翻譯成中文：...」）。請清楚翻譯整句話。

注意事項：

• 如果使用者沒有指定目標語言，請自動判斷並翻譯成英文。
• 回覆要簡潔，不要多餘贅詞。

4. 建立HTTP Request來打API用的

   1. Method設為POST(傳送資料)
   2. URL填入回覆訊息的API https://api.line.me/v2/bot/message/reply (可以到LINE開發者文件去複製各種所需的API)
   3. Authentication點選Generic Credential Type
   4. Generic AuthType 選擇Header Auth
   5. 新增credential，value填入 【bearer + access token】
   6. 勾選Send body
   7. Specify Body點選Using JSON
   8. 填入JSON (在LINE開發者文件)，並將output拉入

      {
          "replyToken": "{{$('Webhook').first().json.body.events.last().replyToken}}",
          "messages":[
              {
                  "type": "text",
                  "text": "{{ $json.output.replaceAll('\n','').replaceAll('*','') }}"
              }
          ]
      }
      

5. 成果
   

實作-旅遊標示翻譯

1. 建立Webhook節點(設定與前幾篇設定LINE相同)

2. 建立HTTP Request節點，來取得傳送的圖片

   1. 這裡概念是我們在LINE傳送圖片後，LINE會將圖片轉成圖片ID透過Webhook方式傳給n8n
   2. Method設為GET
   3. URL填入回覆訊息的API https://api-data.line.me/v2/bot/message/圖片ID/content
   4. Authentication點選Generic Credential Type
   5. Generic AuthType 選擇Header Auth
   6. 新增credential，value填入 【bearer + access token】
      

3. 建立Edit Fields節點來將LINE接收的訊息轉換成可以傳送的資料格式

   1. 將chatInput的JSON填入

4. 建立AI Agent節點

   1. system prompt

你是一位專業的旅遊翻譯小幫手。你的任務是協助使用者理解在國外旅遊時遇到的各種標示、菜單、告示或一般句子。

回覆規則：
當使用者提供圖片（例如標示、菜單、告示）或說明其內容時：

• 請先辨識內容並翻譯。
• 回覆需包含：
  • 翻譯結果：清楚翻譯整句話或文字。
  • 含義/注意事項：用簡單、友善的語氣解釋內容，必要時補充背景知識或旅遊提醒。
• 回覆總長度控制在 300 字以內。
• 回覆格式為好閱讀有條例。

1. 不要使用 Markdown 格式，回覆要簡潔清楚。

5. 建立HTTP Request來打API用的
   1. Method設為POST(傳送資料)
   2. URL填入回覆訊息的API https://api.line.me/v2/bot/message/reply (可以到LINE開發者文件去複製各種所需的API)
   3. Authentication點選Generic Credential Type
   4. Generic AuthType 選擇Header Auth
   5. 新增credential，value填入 【bearer + access token】
   6. 勾選Send body
   7. Specify Body點選Using JSON
   8. 填入JSON (在LINE開發者文件)，並將output拉入

{
        "replyToken": "{{$('Webhook').first().json.body.events.last().replyToken}}",
        "messages":[
                {
                    "type": "text",
                    "text": "{{ $json.output.replaceAll('\n','').replaceAll('*','') }}"
                }
        ]
}

6. 成果
   

參考資料

https://youtu.be/PXinHfk1Zrw?si=Up6xeNviqvm3-uo3
https://youtu.be/Ygh0v3zIa9k?si=bANdQUzSu0aV0rzN
https://youtu.be/NMoZcwERJ64?si=fOS7xZlFot4GQMt_