Erschließen von KI-Webanwendungen: GPT-4V und Puppeteer ermöglichen autonomes Surfen

Erschließen Sie leistungsfähige KI-Webanwendungen mit GPT-4V und Puppeteer! Entdecken Sie autonomes Surfen, Webscraper und anspruchsvolle, KI-gesteuerte Webrecherche. Erfahren Sie, wie diese fortschrittlichen KI-Assistenten Aufgaben von RPA bis zum Kundenservice revolutionieren können.

21. Februar 2025

party-gif

Erschließen Sie die Kraft der KI-gesteuerten Webautomatisierung mit diesem innovativen Ansatz, der GPT-4V und Puppeteer kombiniert. Entdecken Sie, wie Sie einen KI-Agenten aufbauen können, der im Internet surfen, Daten extrahieren und komplexe Aufgaben mühelos erledigen kann, um Ihren Arbeitsablauf zu revolutionieren und neue Möglichkeiten zu erschließen.

Anwendungsfall und Marktchancen für KI-Webanwendungen

Eine Möglichkeit, die potenziellen Anwendungsfälle und Marktchancen für KI-Webagenten zu betrachten, ist es, frühere Versuche zum Aufbau ähnlicher Systeme, deren Grenzen und wie neue Technologien oder Veränderungen die Dynamik möglicherweise ändern können, zu untersuchen.

Eine direkte Marktkategorie ist die Robotic Process Automation (RPA), eine Kategorie von Software, die Unternehmen dabei unterstützt, automatisierte Bots zu erstellen, um sich wiederholende und standardisierte Aufgaben wie Rechnungsbearbeitung oder Dateneingabe zu erledigen. Die Grenzen von RPA-Lösungen sind jedoch recht klar - sie haben Schwierigkeiten mit nicht standardisierten oder sich ständig ändernden Prozessen und erfordern hohe Einrichtungskosten für jede spezifische Automatisierung.

Im Gegensatz dazu sind KI-Webagenten, die den Computer und den Browser direkt steuern können, aufregend, da sie theoretisch viel komplexere Situationen mit viel geringeren Einrichtungskosten bewältigen können. Anstatt spezifische Automatisierungen zu erstellen, kann der Agent einfach Websites navigieren, Daten extrahieren und Aufgaben unabhängig von Formatänderungen erledigen, da der Agent die notwendigen Entscheidungen treffen kann.

Jenseits der reinen Automatisierung können diese KI-Agenten auch über die traditionelle RPA hinausgehen, um intelligentere Aufgaben wie Kundenservice, Vertrieb und Marketing zu erfüllen. Durch den Zugriff auf mehr Systeme und die Nutzung ihrer Entscheidungsfähigkeiten können diese KI-"Mitarbeiter" für eine breitere Palette von Anwendungsfällen eingesetzt werden, einschließlich Verbraucheranwendungen mit geringerem Volumen.

Eine Schlüsselherausforderung bei der Bereitstellung nützlicher KI-Arbeitslösungen ist jedoch nicht nur das technische Verständnis, sondern auch das End-to-End-Workflow-Wissen für bestimmte Aufgabenbereiche. Ein aktueller Forschungsbericht von Hotspot, der über 1.400 globale Vertriebsleiter befragte, liefert wertvolle Einblicke in den modernen Vertriebsworkflow und KI-Anwendungsfälle, die beim Aufbau von KI-Agenten für Vertriebsfunktionen sehr hilfreich sein können.

Zusammengefasst sind die Schlüsselchancen für KI-Webagenten:

  • Bewältigung komplexerer, nicht standardisierter Aufgaben im Vergleich zur traditionellen RPA
  • Reduzierung der Einrichtungskosten für Automatisierungen
  • Erweiterung über reine Automatisierung hinaus zu intelligenteren Aufgaben wie Kundenservice und Vertrieb
  • Nutzung von tiefem Workflow-Wissen für bestimmte Aufgabenbereiche, um effektivere KI-Agenten zu erstellen

Zwei Ansätze zum Aufbau von KI-Webanwendungen

Ansatz 1: GPT-4V-betriebener Webscraper

  1. Verwenden Sie eine Node.js-Bibliothek wie Puppeteer, um Bildschirmfotos von Webseiten zu erstellen und den Webbrowser zu steuern.
  2. Erstellen Sie ein Python-Skript, das die JavaScript-Datei aufruft, um Bildschirmfotos zu erstellen, und dann GPT-4V verwendet, um Daten aus den Bildschirmfotos zu extrahieren.
  3. Das Python-Skript definiert Funktionen zum Konvertieren des Bildes in Base64, zum Erstellen von Bildschirmfotos und zum Verwenden von GPT-4V zum Extrahieren von Informationen aus den Bildschirmfotos.
  4. Das Skript verbindet diese Funktionen, um einen leistungsfähigen Webscraper zu erstellen, der auf Websites zugreifen kann, die normalerweise Scraping-Dienste blockieren.

Ansatz 2: Aufbau eines Web-KI-Agenten

  1. Erstellen Sie eine Node.js-Datei, die verschiedene Bibliotheken importiert und eine OpenAI-Instanz und eine Befehlszeilenschnittstelle einrichtet.
  2. Implementieren Sie eine Funktion highlightLinks, die alle interaktiven Elemente auf einer Webseite identifiziert und ihnen ein spezielles Attribut hinzufügt.
  3. Definieren Sie eine Hauptfunktion, die einen Puppeteer-Browser erstellt, eine Systemnachricht für GPT-4V einrichtet und eine Schleife startet, in der sie:
    • Eine Antwort von GPT-4V basierend auf der Benutzeranfrage und dem aktuellen Zustand der Webseite abruft.
    • Wenn die Antwort angibt, dass ein Link angeklickt werden soll, findet sie das entsprechende Element und klickt darauf.
    • Wenn die Antwort angibt, dass eine neue URL besucht werden soll, navigiert sie dorthin und hebt die Links hervor.
    • Wenn die Antwort eine reguläre Nachricht ist, zeigt sie das Ergebnis dem Benutzer an.
  4. Dieser Web-KI-Agent kann durch mehrere Websites navigieren, auf Links klicken und komplexe Recherche-Aufgaben erledigen, indem er die Fähigkeiten von GPT-4V nutzt.

Aufbau eines von GPT-4V angetriebenen Web-Scrapers

Um einen von GPT-4V angetriebenen Webscraper zu erstellen, verwenden wir eine Node.js-Bibliothek namens Puppeteer, um den Webbrowser zu steuern und Bildschirmfotos zu erstellen. Hier ist eine Schritt-für-Schritt-Anleitung:

  1. Erstellen Sie eine neue Datei namens screenshot.js und importieren Sie die erforderlichen Bibliotheken:
const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');
  1. Definieren Sie die URL, die Sie scrapen möchten, und einen Zeitüberschreitungswert:
const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60 Sekunden
  1. Erstellen Sie eine asynchrone Funktion, um den Browser zu starten, zur URL zu navigieren und ein Bildschirmfoto zu erstellen:
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 diesem Beispiel verwenden wir das puppeteer-extra-Plugin, um den Browser für Websites weniger erkennbar zu machen.

  2. Führen Sie die Funktion takeScreenshot() aus, um das Bildschirmfoto aufzunehmen:

takeScreenshot();

Jetzt können Sie das Skript mit node screenshot.js ausführen, und es wird ein Bildschirmfoto der Wikipedia-Startseite in der Datei screenshot.jpg gespeichert.

Als Nächstes erstellen wir ein Python-Skript, das das Bildschirmfoto und GPT-4V verwendet, um Daten von der Website zu extrahieren:

  1. Erstellen Sie eine neue Datei namens vision_scraper.py und importieren Sie die erforderlichen 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. Definieren Sie Funktionen zum Konvertieren des Bildes in Base64 und zum Erstellen eines Bildschirmfotos mit dem Skript 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. Erstellen Sie eine Funktion, um mit GPT-4V Informationen aus dem Bildschirmfoto zu extrahieren:
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. Verbinden Sie alles in einer 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 "Error: Unable to capture screenshot."
  1. Sie können die Funktion vision_query() nun verwenden, um Informationen von einer Website zu extrahieren:
result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extract the work experience section from the profile.")
print(result)

Dieses Beispiel erstellt ein Bildschirmfoto des angegebenen LinkedIn-Profils und verwendet GPT-4V, um den Abschnitt zur Berufserfahrung zu extrahieren. Sie können die Abfrage anpassen, um verschiedene Arten von Informationen von der Website zu extrahieren.

FAQ