Ontgrendelen van AI-webagenten: GPT-4V en Puppeteer versterken autonome browsing

Ontgrendel krachtige AI-webagenten met GPT-4V en Puppeteer! Ontdek autonoom browsen, web scrapers en geavanceerde AI-aangedreven webonderzoek. Ontdek hoe deze geavanceerde AI-assistenten taken kunnen revolutioneren, van RPA tot klantenondersteuning.

14 februari 2025

party-gif

Ontgrendel de kracht van AI-aangedreven webautomatisering met deze innovatieve aanpak die GPT-4V en Puppeteer combineert. Ontdek hoe u een AI-agent kunt bouwen die het web kan doorbladeren, gegevens kan extraheren en complexe taken met gemak kan uitvoeren, waardoor uw werkstroom wordt revolutionair en nieuwe mogelijkheden worden ontgrendeld.

Gebruikscasus en marktmogelijkheden voor AI-webagenten

Een manier om naar de potentiële gebruiksgevallen en marktmogelijkheden voor AI-webagenten te kijken, is om eerdere pogingen om soortgelijke systemen op te bouwen, hun beperkingen en hoe nieuwe technologieën of veranderingen de dynamiek mogelijk kunnen veranderen, te onderzoeken.

Een directe marktcategorie is Robotic Process Automation (RPA), een categorie software die bedrijven helpt geautomatiseerde bots te bouwen om repetitieve en gestandaardiseerde taken zoals facturenverwerking of gegevensverwerking af te handelen. De beperkingen van RPA-oplossingen zijn echter duidelijk - ze worstelen met niet-gestandaardiseerde of voortdurend veranderende processen en vereisen hoge opstartkosten voor elke specifieke automatisering.

In tegenstelling daarmee zijn AI-webagenten die de computer en browser rechtstreeks kunnen bedienen, opwindend omdat ze in theorie veel complexere situaties kunnen afhandelen met veel lagere opstartkosten. In plaats van specifieke automatiseringen op te bouwen, kan de agent gewoon websites navigeren, gegevens extraheren en taken voltooien, ongeacht formatwijzigingen, omdat de agent de nodige beslissingen kan nemen.

Beyond alleen automatisering kunnen deze AI-agenten ook verder gaan dan traditionele RPA om meer intelligente taken zoals klantenondersteuning, verkoop en marketing uit te voeren. Door toegang te krijgen tot meer systemen en hun besluitvormingsvaardigheden te benutten, kunnen deze AI-'werknemers' worden ingezet voor een bredere waaier aan gebruiksgevallen, inclusief consumentenapplicaties met een lager volume.

Een belangrijke uitdaging bij het leveren van nuttige AI-werkersoplossingen is echter niet alleen het technische begrip, maar ook de end-to-end-werkstroomkennis voor specifieke functiegebieden. Een recent onderzoeksrapport van Hotspot dat meer dan 1.400 wereldwijde salesleiders ondervroeg, biedt waardevolle inzichten in de moderne salesworkflow en AI-gebruiksgevallen, die zeer nuttig kunnen zijn voor het bouwen van AI-agenten voor verkoopdoeleinden.

Samenvattend zijn de belangrijkste kansen voor AI-webagenten:

  • Afhandelen van complexere, niet-gestandaardiseerde taken in vergelijking met traditionele RPA
  • Verlagen van opstartkosten voor automatiseringen
  • Uitbreiden voorbij alleen automatisering naar meer intelligente taken zoals klantenondersteuning en verkoop
  • Gebruik maken van diepgaande werkstroomkennis voor specifieke functiegebieden om effectievere AI-agenten op te bouwen

Twee benaderingen voor het bouwen van AI-webagenten

Aanpak 1: GPT-4V-aangedreven webschraper

  1. Gebruik een Node.js-bibliotheek zoals Puppeteer om schermafbeeldingen van webpagina's te maken en de webbrowser te bedienen.
  2. Maak een Python-script dat de JavaScript-bestand aanroept om schermafbeeldingen te maken en vervolgens GPT-4V gebruikt om gegevens uit de schermafbeeldingen te extraheren.
  3. Het Python-script definieert functies om de afbeelding naar base64 te converteren, schermafbeeldingen te maken en GPT-4V te gebruiken om informatie uit de schermafbeeldingen te extraheren.
  4. Het script verbindt deze functies met elkaar om een krachtige webschraper te maken die websites kan benaderen die normaal gesproken schraapdiensten blokkeren.

Aanpak 2: Een webAI-agent bouwen

  1. Maak een Node.js-bestand dat verschillende bibliotheken importeert en een OpenAI-instantie en een opdrachtregel-interface instelt.
  2. Implementeer een highlightLinks-functie die alle interactieve elementen op een webpagina identificeert en er een speciaal kenmerk aan toevoegt.
  3. Definieer een hoofdfunctie die een Puppeteer-browser maakt, een systeembericht voor GPT-4V instelt en in een lus gaat waarin het:
    • Een reactie van GPT-4V krijgt op basis van de gebruikersinvoer en de huidige staat van de webpagina.
    • Als de reactie aangeeft dat er op een link moet worden geklikt, vindt het het overeenkomstige element en klikt erop.
    • Als de reactie aangeeft dat er een nieuwe URL moet worden bezocht, navigeert het naar die URL en markeert de links.
    • Als de reactie een regulier bericht is, toont het het resultaat aan de gebruiker.
  4. Deze webAI-agent kan door meerdere websites navigeren, op links klikken en complexe onderzoekstaken uitvoeren door gebruik te maken van de mogelijkheden van GPT-4V.

Bei de benaderingen laten zien hoe je grote taalmodellen zoals GPT-4V kunt gebruiken om krachtige webautomatiserings- en onderzoeksinstrumenten te bouwen. De eerste aanpak richt zich op webscrapen, terwijl de tweede aanpak een meer interactieve webagent creëert die kan navigeren en taken op het web kan uitvoeren.

Een GPT-4V-aangedreven webcrawler bouwen

Om een GPT-4V-aangedreven webschraper te bouwen, gebruiken we een Node.js-bibliotheek genaamd Puppeteer om de webbrowser te bedienen en schermafbeeldingen te maken. Hier is een stapsgewijze handleiding:

  1. Maak een nieuw bestand met de naam screenshot.js en importeer de benodigde bibliotheken:
const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');
  1. Definieer de URL die je wilt scrapen en een time-outwaarde:
const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60 seconden
  1. Maak een asynchrone functie om de browser te starten, naar de URL te navigeren en een schermafbeelding te maken:
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. In dit voorbeeld gebruiken we de puppeteer-extra-plugin om de browser minder detecteerbaar te maken voor websites.

  2. Voer de takeScreenshot()-functie uit om de schermafbeelding vast te leggen:

takeScreenshot();

Nu kun je het script uitvoeren met node screenshot.js en wordt er een schermafbeelding van de Wikipedia-homepage opgeslagen in het bestand screenshot.jpg.

Vervolgens maken we een Python-script dat de schermafbeelding en GPT-4V gebruikt om gegevens uit de website te extraheren:

  1. Maak een nieuw bestand met de naam vision_scraper.py en importeer de benodigde bibliotheken:
import os
import subprocess
import base64
import openai
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
  1. Definieer functies om de afbeelding naar base64 te converteren en een schermafbeelding te maken met behulp van het screenshot.js-script:
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. Maak een functie om GPT-4V te gebruiken om informatie uit de schermafbeelding te extraheren:
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. Verbind alles in een vision_query()-functie:
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. Je kunt nu de vision_query()-functie gebruiken om informatie uit een website te extraheren:
result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extract the work experience section from the profile.")
print(result)

In dit voorbeeld wordt er een schermafbeelding gemaakt van het opgegeven LinkedIn-profiel en gebruikt GPT-4V om de werkervaring te extraheren. Je kunt de prompt aanpassen om verschillende soorten informatie uit de website te extraheren.

FAQ