Att låsa upp AI-webbagenter: GPT-4V och Puppeteer ger kraft åt autonom surfning

Lås upp kraftfulla AI-webbagenter med GPT-4V och Puppeteer! Utforska autonom surfning, webbskrapor och avancerad AI-driven webbforskning. Upptäck hur dessa avancerade AI-assistenter kan revolutionera uppgifter, från RPA till kundservice.

20 februari 2025

party-gif

Frigör kraften i AI-driven webbautomation med denna innovativa metod som kombinerar GPT-4V och Puppeteer. Upptäck hur du kan bygga en AI-agent som kan surfa på webben, extrahera data och utföra komplexa uppgifter med lätthet, revolutionera din arbetsprocess och låsa upp nya möjligheter.

Användningsfall och marknadsmöjligheter för AI-webbagenter

Ett sätt att se på de potentiella användningsområdena och marknadsmöjligheterna för AI-webbagenter är att undersöka tidigare försök att bygga liknande system, deras begränsningar och hur nya teknologier eller förändringar kan potentiellt ändra dynamiken.

En direkt marknadskategori är Robotic Process Automation (RPA), vilket är en kategori av programvara som hjälper företag att bygga automatiserade botar för att hantera repetitiva och standardiserade uppgifter som faktureringsbehandling eller dataregistrering. Begränsningarna för RPA-lösningar är dock ganska tydliga - de kämpar med icke-standardiserade eller ständigt föränderliga processer och kräver höga installationskostnader för varje specifik automatisering.

I kontrast är AI-webbagenter som kan kontrollera datorn och webbläsaren direkt spännande eftersom de teoretiskt sett kan hantera mycket mer komplexa situationer med mycket lägre installationskostnad. Istället för att bygga specifika automatiseringar kan agenten helt enkelt navigera på webbplatser, extrahera data och slutföra uppgifter oavsett formatförändringar, eftersom agenten kan fatta de nödvändiga besluten.

Utöver bara automatisering kan dessa AI-agenter också gå utöver traditionell RPA för att utföra mer intelligenta uppgifter som kundservice, försäljning och marknadsföring. Genom att få tillgång till fler system och utnyttja sina beslutsfattande förmågor kan dessa AI-"arbetare" distribueras för ett bredare spektrum av användningsområden, inklusive konsumentapplikationer med lägre volym.

En nyckelutmaning i att leverera användbara AI-arbetarlösningar är dock inte bara den tekniska förståelsen, utan också kunskapen om slutförandearbetsflödet för specifika jobbfunktioner. En ny forskningsrapport från Hotspot som intervjuade över 1 400 globala säljledare ger värdefulla insikter i det moderna försäljningsarbetsflödet och användningsfall för AI, vilket kan vara mycket användbart för att bygga AI-agenter för försäljningsfunktioner.

Sammanfattningsvis inkluderar de viktigaste möjligheterna för AI-webbagenter:

  • Hantera mer komplexa, icke-standardiserade uppgifter jämfört med traditionell RPA
  • Minska installationskostnader för automatiseringar
  • Expandera bortom bara automatisering till mer intelligenta uppgifter som kundservice och försäljning
  • Utnyttja djup arbetsflödeskännedom för specifika jobbfunktioner för att bygga mer effektiva AI-agenter

Två tillvägagångssätt för att bygga AI-webbagenter

Tillvägagångssätt 1: GPT-4V-driven webbskrapare

  1. Använd ett Node.js-bibliotek som Puppeteer för att ta skärmbilder av webbsidor och kontrollera webbläsaren.
  2. Skapa ett Python-skript som anropar JavaScript-filen för att ta skärmbilder och sedan använder GPT-4V för att extrahera data från skärmbilderna.
  3. Python-skriptet definierar funktioner för att konvertera bilden till base64, ta skärmbilder och använda GPT-4V för att extrahera information från skärmbilderna.
  4. Skriptet kopplar samman dessa funktioner för att skapa en kraftfull webbskrapare som kan komma åt webbplatser som normalt blockerar skrapningstjänster.

Tillvägagångssätt 2: Bygga en AI-webbagent

  1. Skapa en Node.js-fil som importerar olika bibliotek och konfigurerar en OpenAI-instans och ett kommandoradsgränssnitt.
  2. Implementera en highlightLinks-funktion som identifierar alla interaktiva element på en webbsida och lägger till ett särskilt attribut till dem.
  3. Definiera en huvudfunktion som skapar en Puppeteer-webbläsare, konfigurerar ett systemmeddelande för GPT-4V och går in i en loop där den:
    • Får ett svar från GPT-4V baserat på användarens fråga och det aktuella tillståndet för webbsidan.
    • Om svaret indikerar att en länk ska klickas, hittar den motsvarande element och klickar på det.
    • Om svaret indikerar att en ny URL ska besökas, navigerar den till den URL:en och markerar länkarna.
    • Om svaret är ett vanligt meddelande, visar den resultatet för användaren.
  4. Denna AI-webbagent kan navigera genom flera webbplatser, klicka på länkar och slutföra komplexa forskningsuppgifter genom att utnyttja GPT-4V:s möjligheter.

Båda tillvägagångssätten visar hur du kan utnyttja stora språkmodeller som GPT-4V för att bygga kraftfulla webbautomatiserings- och forskningsverktyg. Det första tillvägagångssättet fokuserar på webbskrapning, medan det andra tillvägagångssättet skapar en mer interaktiv webbagent som kan navigera och slutföra uppgifter på webben.

Bygga en GPT-4V-driven webbskrapare

För att bygga en GPT-4V-driven webbskrapare kommer vi att använda ett Node.js-bibliotek som heter Puppeteer för att kontrollera webbläsaren och ta skärmbilder. Här är en steg-för-steg-guide:

  1. Skapa en ny fil som heter screenshot.js och importera de nödvändiga biblioteken:
const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');
  1. Definiera den URL du vill skrapa och ett tidsgränsvärde:
const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60 sekunder
  1. Skapa en asynkron funktion för att starta webbläsaren, navigera till URL:en och ta en skärmbild:
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. I det här exemplet använder vi puppeteer-extra-tillägget för att göra webbläsaren mindre identifierbar för webbplatser.

  2. Kör takeScreenshot()-funktionen för att fånga skärmbilden:

takeScreenshot();

Nu kan du köra skriptet med node screenshot.js, och det kommer att spara en skärmbild av Wikipedia-hemsidan till filen screenshot.jpg.

Härnäst kommer vi att skapa ett Python-skript som använder skärmbilden och GPT-4V för att extrahera data från webbplatsen:

  1. Skapa en ny fil som heter vision_scraper.py och importera de nödvändiga biblioteken:
import os
import subprocess
import base64
import openai
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
  1. Definiera funktioner för att konvertera bilden till base64 och ta en skärmbild med hjälp av screenshot.js-skriptet:
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. Skapa en funktion för att använda GPT-4V för att extrahera information från skärmbilden:
def vision_extract(image_b64, prompt):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "Du är en webbskrapare. Din uppgift är att extrahera information baserat på en skärmbild av en webbplats och användarinstruktioner."},
            {"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. Koppla ihop allt i en vision_query()-funktion:
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 "Fel: Det gick inte att ta en skärmbild."
  1. Du kan nu använda vision_query()-funktionen för att extrahera information från en webbplats:
result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extrahera arbetserfarenhetsavsnittet från profilen.")
print(result)

Detta exempel kommer att ta en skärmbild av den angivna LinkedIn-profilen och använda GPT-4V för att extrahera arbetserfarenhetsavsnittet. Du kan anpassa prompten för att extrahera olika typer av information från webbplatsen.

FAQ