iT邦幫忙

2025 iThome 鐵人賽

DAY 10
0
生成式 AI

30 天生成式 AI 工作流:社群經營者的自動化實戰系列 第 10

Day 10|HTML看不懂?AI幫你自動解析

  • 分享至 

  • xImage
  •  

「當你覺得技術的門檻太高時,不妨交給AI,它常能替你架起通往目標的捷徑。」

在前幾天,我們一步步學會用 HTML 選擇器 去抓網頁上的資訊。

但實話說,這需要對 HTML 有一定程度的理解。對於很多社群人、行銷人來說,看到一堆 <div><a><section> 就會想關掉網頁。

那問題來了:如果我不懂技術,但還是想要把書名或活動標題抓下來怎麼辦?

換個角度想,若你把這串 HTML 原始碼拿給一個路人看,他大概會說:「這看不懂啦,你去問 ChatGPT 吧!」

這就是我們今天的主角 —— 把 AI 直接拉進 n8n 工作流裡

n8n 有一個非常好用的節點:Information Extraction,它能把雜亂的 HTML 交給 AI,自動整理成你想要的結構化資料。

可點此下載模板


Information Extraction 節點

我們接續 Day 8 的結果:

用 HTTP Request 節點把 books.toscrape.com 的 HTML 抓回來。

步驟

  1. 新增節點

    在 HTTP Request 後面加上一個新節點,在 AI 相關的節點裡選擇 Information Extraction

  2. 確認輸入資料

    在「Text」欄位裡要放入上一個節點的 HTML。

    • 如果看不到資料 → 點擊「Execute previous nodes」讓它先跑一次,就會在左邊 INPUT 面板看到結果。

    • 把 INPUT 裡的「data」拖曳到「Text」欄位。

    • 此時欄位會變成「Expression」模式,顯示為:

      {{$json.data}}
      

      下方「Result」就能看到完整的 HTML。

  3. 設定輸出格式

    這裡很重要!我們要告訴 AI 想要怎樣的結果。

    在「Schema Type」選擇 Generate From JSON Example,並貼上以下範例:

    [
      {
        "title": "Book Title 1",
        "url": "https://example.com/book1"
      },
      {
        "title": "Book Title 2",
        "url": "https://example.com/book2"
      },
      {
        "title": "Book Title 3",
        "url": "https://example.com/book3"
      }
    ]
    
  4. 執行測試

    點擊「Execute step」,結果卻跳出錯誤:

    「A Model sub-node must be connected and enabled」

    意思是:Information Extraction 必須搭配一個 大語言模型(LLM) 節點,才能運作。


大語言模型節點 - Gemini

AI模型 就像是這個流程的大腦。沒有大腦,工具根本沒法用。

我們這裡選擇 Google Gemini Chat Model(因為有免費額度,成本低),但其實也可以用 OpenAI 的模型。

步驟

  1. 在 Information Extraction 下方的「Model」拉一個新節點,選擇 Google Gemini Chat Model

  2. 設定憑證

    • 第一次用會需要「Credential」。
    • 點「Create new credential」進去,這時會要求填 API Key。
    • 做法是進入 Google AI Studio → Dashboard → API Keys → 「Create API Key」。
    • 如果你沒有 Google Cloud 專案,Google 會自動幫你建立。
    • 複製這組 API Key,貼回 n8n 的憑證設定。
  3. 選擇模型
    回到Google Gemini Chat Model設定頁面,在 Model 欄位選擇:

    models/gemini-2.5-flash
    

    (有免費額度,適合測試;其他模型也能用,但可能要收費。)


設定完成,開始執行

  1. 回到 Information Extraction,點擊「Execute step」,這次就能看到乾淨的結果:每本書的 標題 + URL
  2. 如果想要存檔,可以加上 Convert to File 節點,把結果下載。

為什麼要在 n8n 裡跑?

你可能會想:為什麼不直接去 Gemini 官網問就好?

答案是:因為 n8n 可以把這些動作「串成一條流程」

單次操作,你當然可以手動複製貼上。

但如果這件事要每週做一次、甚至每天跑一次,n8n 就能幫你自動化,節省大量時間。


✏️ 小作業

試著挑一個自己常逛的網站,把 HTML 抓下來,丟進 Information Extraction,設計一個 JSON 格式的範例。觀察 AI 能不能正確幫你解析出來。


交流

我建立了一個行銷技術交流群,專注討論 SEO、行銷自動化等主題,歡迎有興趣的朋友一起加入交流。

掃QR Code 或點擊圖片加入

https://ithelp.ithome.com.tw/upload/images/20250901/20178495xURUZaqziV.jpg


上一篇
Day 9|網頁資料開箱術(下):HTML 解析入門
下一篇
Day 11|HTTP 抓不到資料?試試用第三方 API 幫你搬運
系列文
30 天生成式 AI 工作流:社群經營者的自動化實戰16
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言