解鎖 AI 網路代理人:GPT-4V 和 Puppeteer 賦予自主瀏覽能力

使用 GPT-4V 和 Puppeteer 解鎖強大的 AI 網路代理! 探索自主瀏覽、網頁爬蟲和複雜的 AI 驅動網路研究。發現這些先進的 AI 助手如何革新任務,從 RPA 到客戶支援。

2025年2月19日

party-gif

利用結合 GPT-4V 和 Puppeteer 的創新方法,解鎖 AI 驅動的網頁自動化的力量。探索如何建立一個 AI 代理,能夠瀏覽網頁、提取數據,並輕鬆完成複雜的任務,革新您的工作流程,開啟全新的可能性。

AI 網路代理的使用案例和市場機會

從探討人工智慧網路代理的潛在用例和市場機會的角度來看,我們可以檢視之前建立類似系統的嘗試、其局限性,以及新技術或變化如何可能改變動態。

一個直接的市場類別是機器人流程自動化(RPA),這是一類幫助企業建立自動化機器人來處理重複和標準化任務(如發票處理或資料輸入)的軟體。然而,RPA解決方案的局限性相當明顯 - 它們難以處理非標準化或不斷變化的流程,並且需要為每個特定自動化設置高昂的成本。

相比之下,可以直接控制電腦和瀏覽器的人工智慧網路代理令人興奮,因為它們理論上可以處理更複雜的情況,而且設置成本更低。代理不需要為每個網站結構建立特定的自動化,而是可以瀏覽網站、擷取資料並完成任務,無論格式如何變化,因為代理可以自行做出必要的決策。

除了自動化之外,這些人工智慧代理還可以超越傳統的RPA,完成更智慧的任務,如客戶支援、銷售和行銷。通過訪問更多系統並利用其決策能力,這些人工智慧「工人」可以部署於更廣泛的用例,包括低量的消費者應用程式。

然而,提供有用的人工智慧工人解決方案的關鍵挑戰不僅在於技術理解,還在於特定工作職能的端到端工作流程知識。Hotspot最近的一份研究報告調查了1,400多位全球銷售主管,提供了有關現代銷售工作流程和人工智慧用例的寶貴見解,這對於建立銷售職能的人工智慧代理非常有幫助。

總之,人工智慧網路代理的主要機會包括:

  • 相比傳統RPA,能夠處理更複雜、非標準化的任務
  • 降低自動化的設置成本
  • 擴展到不僅僅是自動化,還包括更智慧的任務,如客戶支援和銷售
  • 利用特定工作職能的深入工作流程知識,建立更有效的人工智慧代理

建立 AI 網路代理的兩種方法

方法1: 基於GPT-4V的網頁爬蟲

  1. 使用Node.js庫Puppeteer來截取網頁截圖並控制網頁瀏覽器。
  2. 創建一個Python腳本,調用JavaScript檔案來截取截圖,然後使用GPT-4V從截圖中提取資料。
  3. Python腳本定義了將圖像轉換為base64、截取截圖以及使用GPT-4V從截圖中提取資訊的函數。
  4. 該腳本將這些函數連接起來,創建一個強大的網頁爬蟲,可以訪問通常阻擋爬蟲服務的網站。

方法2: 構建一個網路人工智慧代理

  1. 創建一個Node.js檔案,導入各種庫並設置一個OpenAI實例和命令行界面。
  2. 實現一個highlightLinks函數,識別網頁上的所有互動元素並為它們添加一個特殊屬性。
  3. 定義一個主函數,創建一個Puppeteer瀏覽器,為GPT-4V設置一個系統消息,並進入一個循環,其中它:
    • 根據用戶的提示和當前網頁的狀態從GPT-4V獲取響應。
    • 如果響應指示應該點擊一個鏈接,它會找到相應的元素並點擊。
    • 如果響應指示應該訪問一個新的URL,它會導航到該URL並突出顯示鏈接。
    • 如果響應是一般消息,它會將結果顯示給用戶。
  4. 這個網路人工智慧代理可以瀏覽多個網站,點擊鏈接,並通過利用GPT-4V的功能來完成複雜的研究任務。

建立一個由 GPT-4V 驅動的網頁爬蟲

要構建一個基於GPT-4V的網頁爬蟲,我們將使用一個名為Puppeteer的Node.js庫來控制網頁瀏覽器並截取截圖。以下是逐步指南:

  1. 創建一個名為screenshot.js的新檔案,並導入必要的庫:
const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');
  1. 定義要爬取的URL和超時值:
const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60 seconds
  1. 創建一個異步函數來啟動瀏覽器,導航到URL並截取截圖:
async function takeScreenshot() {
  const browser = await puppeteerExtra.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
  await browser.close();
}
  1. 在這個例子中,我們使用puppeteer-extra插件來使瀏覽器更難被網站檢測到。

  2. 運行takeScreenshot()函數來捕捉截圖:

takeScreenshot();

現在,您可以運行腳本node screenshot.js,它將把維基百科首頁的截圖保存到screenshot.jpg檔案中。

接下來,我們將創建一個Python腳本,使用截圖和GPT-4V從網站中提取資料:

  1. 創建一個名為vision_scraper.py的新檔案,並導入必要的庫:
import os
import subprocess
import base64
import openai
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
  1. 定義將圖像轉換為base64和使用screenshot.js腳本捕捉截圖的函數:
def image_to_b64(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode("utf-8")

def url_to_screenshot(url):
    if os.path.exists("screenshot.jpg"):
        os.remove("screenshot.jpg")
    try:
        subprocess.run(["node", "screenshot.js"], check=True)
        return "screenshot.jpg"
    except subprocess.CalledProcessError:
        return None
  1. 創建一個使用GPT-4V從截圖中提取資訊的函數:
def vision_extract(image_b64, prompt):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "You are a web scraper. Your job is to extract information based on a screenshot of a website and user instructions."},
            {"role": "user", "content": prompt},
            {"role": "user", "content": image_b64}
        ],
        max_tokens=2048,
        n=1,
        stop=None,
        temperature=0.7,
    )
    return response.choices[0].message.content.strip()
  1. vision_query()函數中綜合所有內容:
def vision_query(url, prompt):
    screenshot_path = url_to_screenshot(url)
    if screenshot_path:
        image_b64 = image_to_b64(screenshot_path)
        return vision_extract(image_b64, prompt)
    else:
        return "Error: Unable to capture screenshot."
  1. 您現在可以使用vision_query()函數從網站中提取資訊:
result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extract the work experience section from the profile.")
print(result)

這個示例將捕捉指定LinkedIn個人資料的截圖,並使用GPT-4V提取工作經驗部分。您可以自定義提示,從網站中提取不同類型的資訊。

常問問題