Het bouwen van een webagent die een persoonlijk computerapparaat rechtstreeks kan besturen om taken te automatiseren, is aanzienlijk uitdagender dan het bouwen van een traditionele functie-aanroepende agent. Hier is de reden waarom:

• Complexiteit van taken: Zelfs een eenvoudige taak als het verzenden van een e-mail vereist voor een webagent meerdere stappen - het openen van de Gmail-website, het klikken op de zoekbalk, het typen van de e-mail, het klikken op de antwoordknop en ten slotte het klikken op verzenden. Elk van deze stappen heeft de potentie voor fouten, waardoor de agent sterkere geheugen- en redeneervermogen nodig heeft.

• Begrip van de interface: De agent moet de gebruikersinterface nauwkeurig begrijpen, hetzij door de HTML/XML-structuur te parseren, hetzij door screenshots te analyseren met behulp van computervisiemethoden. Het extraheren van de relevante informatie en het beslissen over de volgende actie is een complexe uitdaging.

• Nauwkeurigheid van positionering: Het nauwkeurig lokaliseren van de juiste UI-elementen om mee te interacteren, zoals knoppen of invoervelden, is cruciaal voor het succes van de agent. Technieken zoals het gebruik van OCR en het combineren van meerdere modellen hebben veelbelovende resultaten laten zien, maar dit blijft een aanzienlijke hindernis.

• Snelheid en efficiëntie: De aard van dit type agent, waarbij zelfs voor eenvoudige taken meerdere stappen moeten worden doorlopen, maakt het inherent minder efficiënt dan traditionele agents. Het verbeteren van de snelheid en de algehele taakafronding is een belangrijk doel.

• Nauwkeurigheid en betrouwbaarheid: Ervoor zorgen dat de agent taken nauwkeurig kan uitvoeren zonder vast te lopen in oneindige lussen of fouten te maken, is cruciaal voor toepassingen in de praktijk. Het aanpakken van deze uitdagingen op het gebied van nauwkeurigheid en betrouwbaarheid is een belangrijk aandachtspunt.

Ongeacht deze uitdagingen zijn de potentiële voordelen van een webagent die een breed scala aan persoonlijke en werkgerelateerde taken kan afhandelen aanzienlijk. Voortdurend onderzoek en ontwikkeling op gebieden als computervision, taalmodellen en taakplanning dragen bij aan de vooruitgang op dit gebied.

Er zijn drie hoofdbenaderingen die webagents gebruiken om gebruikersinterfaces te begrijpen en ermee te interacteren:

1. HTML/XML-gebaseerde benadering:

   • De agent extraheert de HTML- of XML-structuur van de website en gebruikt deze informatie om de lay-out en interactieve elementen te begrijpen.
   • De agent kan vervolgens deze kennis gebruiken om specifieke UI-elementen, zoals invoervelden, knoppen en links, te lokaliseren en ermee te interacteren.
   • Deze benadering is relatief volwassen, maar heeft beperkingen bij het omgaan met complexe of slecht gestructureerde websites.

2. Visie-gebaseerde benadering:

   • De agent gebruikt computervisionmodellen om screenshots of afbeeldingen van de gebruikersinterface te analyseren.
   • Hierdoor kan de agent UI-elementen identificeren en lokaliseren, zelfs bij het ontbreken van schone HTML/XML-gegevens.
   • Technieken zoals Saliency Mapping en Optical Character Recognition (OCR) worden gebruikt om de exacte coördinaten van interactieve elementen te bepalen.
   • Het combineren van visiemodellen met taalmodellen (bijv. GPT-4) kan de nauwkeurigheid van deze benadering verbeteren.

3. Hybride benadering:

   • Dit combineert de sterke punten van de HTML/XML-gebaseerde en visie-gebaseerde benaderingen.
   • De agent gebruikt zowel de gestructureerde gegevens van de website als de visuele informatie van screenshots om de interface te begrijpen.
   • Deze benadering kan een bredere range aan websitestructuren aan en biedt nauwkeurigere interactie met UI-elementen.

De belangrijkste uitdagingen bij het bouwen van effectieve webagents zijn:

1. Snelheid: De multi-stap aard van webinteracties kan webagents trager maken dan traditionele functie-aanroepende agents.
2. Nauwkeurigheid: Het nauwkeurig lokaliseren en interacteren met UI-elementen is een complexe taak die geavanceerde computervision- en taalvaardigheden vereist.
3. Taakafronding: Het behouden van context en het voorkomen van oneindige lussen zijn belangrijk om ervoor te zorgen dat webagents complexe taken met succes kunnen voltooien.

Ten eerste realiseerde ik me snel dat dit type web-, mobiele of desktop-agent dat het persoonlijke computerapparaat rechtstreeks kan besturen, vele malen moeilijker is dan de normale functie-aanroepende agents die we bouwen. Stel dat we een eenvoudige inbox manager-agent bouwen die acties kan uitvoeren zoals het verzenden van een e-mail. Met een normale functie-aanroepende agent hoef je alleen maar een vooraf gedefinieerde functie 'e-mail verzenden' aan te roepen en de e-mailinhoud door te geven, en de taak is klaar. Er is niet veel ruimte voor fouten.

Als we echter proberen een webagent de eenvoudige taak van het verzenden van een e-mail te laten uitvoeren, moet hij ten minste vier verschillende stappen doorlopen. Hij moet eerst Gmail.com openen in de webbrowser, op de zoekbalk klikken, zoeken naar de specifieke e-mail om op te reageren, op de juiste e-mail in de zoekresultaten klikken, op de antwoordknop klikken, de reactie typen en op Verzenden klikken. Het kost dus veel meer stappen om zelfs een eenvoudige taak uit te voeren. Er is veel meer ruimte voor fouten in dit proces, omdat de agent elke stap verkeerd kan doen. De agent heeft ook een sterkere geheugen- en redeneervaardigheid nodig om te onthouden wat hij eerder heeft gedaan om dezelfde fouten niet te herhalen.

Kort samengevat is het veel uitdagender om te bouwen, maar als deze vaardigheid wordt bereikt, is het super opwindend en opent het mogelijkheden voor meerdere enorme markten.

Hoe werkt dit systeem eigenlijk? Er zijn drie belangrijke manieren waarop we dit kunnen benaderen:

1. HTML- of XML-gebaseerde benadering: We proberen het HTML-bestand van elke website te extraheren en deze HTML DOM-elementen als context aan de agent te geven, zodat de agent de structuur van de website kan begrijpen en vervolgens kan beslissen wat hij moet doen. Dit is de meest volwassen methode, maar heeft beperkingen, zoals het niet kunnen omgaan met taken die afbeeldingen betreffen.

2. Visie-gebaseerde benadering: In plaats van de oorspronkelijke HTML-code aan de agent te voeden, kunnen we een screenshot maken en deze naar een multimodaal model sturen, waar het kan begrijpen, redeneren en de volgende stap plannen. Het moeilijkste deel van deze benadering is het nauwkeurig lokaliseren van het exacte UI-element waarmee moet worden geïnteracteerd.

3. Hybride benadering: Sommige teams hebben de sterke punten van zowel de HTML/XML-gebaseerde als de visie-gebaseerde benaderingen gecombineerd, waarbij ze een combinatie van taalmodellen en optische tekenherkenning (OCR) gebruiken om de nauwkeurigheid te verbeteren.

De ontwikkeling van webagents die persoonlijke computerapparaten rechtstreeks kunnen besturen om taken te automatiseren, is een complexe uitdaging, met verschillende belangrijke problemen die moeten worden overwonnen:

1. Snelheid: De aard van dit type agent vereist het doorlopen van meerdere stappen om zelfs eenvoudige taken uit te voeren, waardoor ze inherent minder efficiënt zijn dan traditionele functie-aanroepende agents.

2. Nauwkeurigheid: Het nauwkeurig lokaliseren en interacteren met specifieke UI-elementen op websites en applicaties is een aanzienlijke uitdaging. Benaderingen zoals het gebruik van HTML/XML-structuur, multimodale modellen en combinaties van technieken als OCR en CLIP hebben vooruitgang laten zien, maar er is nog ruimte voor verbetering.

3. Taakafronding: Webagents kunnen vaak vast komen te zitten in oneindige lussen, de stappen die ze eerder hebben genomen vergeten en steeds opnieuw dezelfde problemen tegenkomen. Het oplossen van dit probleem van het behouden van context en taakafronding is cruciaal voor het vergroten van de adoptie van deze agents.

Om deze problemen aan te pakken, zijn verschillende technieken en tools onderzocht:

• HTML/XML-gebaseerde benadering: Het extraheren en opschonen van de HTML-structuur om de agent een beter hanteerbare context te geven, heeft veelbelovende resultaten laten zien, maar is beperkt in het omgaan met taken die afbeeldingen betreffen en slecht ontworpen websites.

• Multimodale benadering: Het gebruik van computervisiemethoden zoals schermanalyse, OCR en CLIP om de UI te begrijpen en interactieve elementen te lokaliseren, heeft de nauwkeurigheid verbeterd, maar kampt nog steeds met uitdagingen bij complexe of dichtbezaaide interfaces.

• Gespecialiseerde modellen: Projecten zoals Cook Agent, een visueel taalmodel dat specifiek is ontworpen voor het begrijpen en interacteren met GUI-screenshots, hebben betere prestaties laten zien bij web- en mobiele taakafronding.

• Web QL: Deze open-source bibliotheek biedt een manier om eenvoudig queries te definiëren om UI-elementen te lokaliseren en ermee te interacteren, waardoor het proces van het bouwen van nauwkeurige webagents wordt vereenvoudigd.

Eén van de belangrijkste uitdagingen bij web scrapen is de noodzaak om voor elke website op maat gemaakte scrapers te onderhouden, aangezien hun structuur en lay-out vaak veranderen. De opkomst van webagents die de gebruikersinterface van een webbrowser rechtstreeks kunnen besturen, opent echter nieuwe mogelijkheden voor het bouwen van meer universele en robuuste web scrapers.

Deze webagents maken gebruik van geavanceerde AI-modellen, zoals grote taalmodellen en computervisiemethoden, om web-interfaces op een meer menselijke manier te begrijpen en ermee te interacteren. Door echte gebruikersinteracties zoals klikken, scrollen en typen te simuleren, kunnen deze agents navigeren en gegevens extraheren uit een breed scala aan websites zonder de noodzaak van op maat gemaakte code.

Eén dergelijk open-source project, genaamd WebQL, biedt een krachtig hulpmiddel voor het bouwen van deze webagents. WebQL stelt u in staat om queries te definiëren die de UI-elementen specificeren waarmee u wilt interacteren, zoals invoervelden, knoppen en productlijsten. De bibliotheek gebruikt vervolgens computervision en andere technieken om deze elementen nauwkeurig te lokaliseren en ermee te interacteren, zelfs op complexe en dynamische websites.

Met behulp van WebQL kunt u snel universele web scrapers bouwen die kunnen worden toegepast op verschillende e-commercesites, bijvoorbeeld om productinformatie zoals naam, recensies, prijs en verzendkosten te extraheren. Hetzelfde script kan worden hergebruikt voor verschillende sites, wat de onderhoudskosten aanzienlijk vermindert in vergelijking met traditionele web scraping-benaderingen.

Beyond web scraping kunnen deze webagents ook worden gebruikt om een breed scala aan web-gebaseerde taken te automatiseren, zoals het boeken van vluchten, het beheren van e-mail en het interacteren met productiviteitstools. Door de flexibiliteit van deze agents te combineren met de nauwkeurigheid en betrouwbaarheid van bibliotheken als Playwright, kunnen ontwikkelaars krachtige persoonlijke assistenten creëren die complexe, multi-stap workflows op het web kunnen afhandelen.

Hoewel er nog enkele uitdagingen moeten worden overwonnen, zoals het waarborgen van betrouwbare taakafronding en het verbeteren van de snelheid en nauwkeurigheid van de agents, is het potentieel van deze technologie duidelijk. Naarmate de onderliggende AI-modellen en integratie-technieken zich blijven ontwikkelen, kunnen we in de nabije toekomst meer innovatieve toepassingen van webagents verwachten.

Om een universele e-commerce scraper te bouwen met behulp van WebQL, volgen we deze stappen:

1. Installeer de vereiste bibliotheken:

   • pip install webql
   • pip install playwright

2. Stel de WebQL API-sleutel in in een .env-bestand.

3. Maak een Python-script met de naam ecommerce_scraper.py met de volgende code:

import os
from dotenv import load_dotenv
from webql import WebQL
from playwright.sync_api import sync_playwright
import csv
import json

load_dotenv()

def save_json_to_csv(data, filename):
    columns = ['product_name', 'num_reviews', 'price', 'rating']
    with open(filename, 'w', newline='') as csvfile:
        writer = csv.DictWriter(csvfile, fieldnames=columns)
        writer.writeheader()
        for product in data['results']['products']:
            writer.writerow({
                'product_name': product['name'],
                'num_reviews': product['num_reviews'],
                'price': product['price'],
                'rating': product['rating']
            })

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()

    webql = WebQL(os.getenv('WEBQL_API_KEY'))
    session = webql.create_session(page)

    home_query = {
        'search_box': 'input[name="q"]',
        'search_button': 'button[type="submit"]'
    }
    home_elements = session.query(home_query)
    home_elements['search_box'].fill('coffee machine')
    home_elements['search_button'].click()

    search_query = {
        'products': ['name', 'num_reviews', 'price', 'rating']
    }
    search_results = session.query(search_query)

    save_json_to_csv(search_results, 'ecommerce_products.csv')

    browser