KI-gestütztes Web Scraping mit llm-scraper

In diesem Leitfaden erfahren Sie mehr:

• Was llm-scraper ist
• Schritt-für-Schritt-Anleitung zur Verwendung der Software
• Wie man es für die Codegenerierung verwendet
• Die wichtigsten Alternativen für LLM-basiertes Scraping
• Die wichtigsten Einschränkungen und wie sie überwunden werden können

Lasst uns eintauchen!

Was ist llm-scraper?

llm-scraper ist eine TypeScript-Bibliothek, die LLMs verwendet, um strukturierte Daten aus jeder Webseite zu extrahieren.
Anstatt benutzerdefinierte Parsing-Logik für jede Website zu schreiben, definieren Sie einfach ein Schema, und das Paket setzt eine LLM ein, um es intelligent zu füllen, indem es den Inhalt der Seite analysiert.

Die Bibliothek wurde erstmals Mitte 2024 veröffentlicht, ist also noch recht neu. Sie hat jedoch bereits über 4.000 Sterne auf GitHub erhalten, was zeigt, wie schnell sie populär wird:

Es ist ideal für dynamische oder inkonsistente Websites (wie E-Commerce), bei denen herkömmliche Scraper oft versagen. In diesen Szenarien glänzt das LLM-Scraping.

Die wichtigsten von llm-scraper unterstützten Funktionen sind im Einzelnen

• Integration mit mehreren LLM-Anbietern: Funktioniert mit lokalen Modellen (wie Ollama oder GGUF) und Cloud-Anbietern (wie OpenAI und Vercel AI SDK).
• Schemabasierte Datenextraktion: Definieren Sie, was Sie extrahieren möchten, indem Sie Zod-Schemata für eine starke Struktur und Validierung verwenden.
• Vollständige Typsicherheit: Entwickelt für TypeScript, so dass Sie eine vollständige Typüberprüfung zur Kompilierungszeit erhalten.
• Basiert auf Playwright: Verwendet Playwright unter der Haube zur Steuerung des Browsers und zum Abrufen von Seiteninhalten.
• Unterstützung von Streaming: Sie können Objekte während des Scrapings streamen, anstatt auf den Abschluss der vollständigen Extraktion zu warten.
• Code-Generierung: Kann Scraping-Code dynamisch auf der Grundlage Ihres Schemas und Ziels generieren.
• Mehrere Optionen zur Formatierung des Seiteninhalts: Sie können wählen, wie der Seiteninhalt an das LLM gesendet werden soll

Wie man llm-scraper für Web Scraping verwendet

In diesem Tutorial lernen Sie, wie Sie die Bibliothek llm-scraper verwenden, um einen KI-gesteuerten Scraper zu erstellen. Die Zielseite wird eine E-Commerce-Produktseite von der ToScrape-Website sein:

Dies ist ein großartiges Beispiel, denn das Scraping von E-Commerce-Websites kann schwierig sein. Ihre Seitenstrukturen ändern sich oft, und verschiedene Produkte können unterschiedliche Layouts und Informationen haben. Aus diesem Grund ist das Schreiben einer statischen Parsing-Logik schwierig und nicht sehr effektiv. Daher kann KI definitiv helfen.

Folgen Sie den nachstehenden Schritten, um einen LLM-gesteuerten Scraper zu bauen!

Voraussetzungen

Für diese Anleitung benötigen Sie:

• Node.js auf Ihrem Rechner installiert
• Ein OpenAI-API-Schlüssel (oder ein Schlüssel von einem ähnlichen Anbieter wie Groq)
• Grundlegendes Verständnis von TypeScript und asynchroner Programmierung

Schritt 1: Projekt einrichten

Bevor Sie beginnen, sollten Sie sicherstellen, dass Sie die neueste LTS-Version von Node.js lokal installiert haben. Falls nicht, laden Sie sie von der offiziellen Website herunter und installieren Sie sie.

Erstellen Sie nun ein Projekt für Ihren Scraper und rufen Sie es im Terminal auf:

mkdir llm-scraper-project
cd llm-scraper-project

Führen Sie innerhalb Ihres Projekts den folgenden Befehl aus, um ein leeres Node.js-Projekt zu initialisieren:

npm init -y

Öffnen Sie die Datei package.json, die mit dem obigen Befehl erstellt wurde, und stellen Sie sicher, dass sie Folgendes enthält:

"type": "module"

Laden Sie den Projektordner llm-scraper-project in Ihre bevorzugte TypeScript-IDE, z. B. Visual Studio Code.

Als nächstes installieren Sie TypeScript als Entwicklungsabhängigkeit:

npm install typescript --save-dev

Wenn TypeScript installiert ist, initialisieren Sie Ihr TypeScript-Projekt, indem Sie es ausführen:

npx tsc --init

Eine tsconfig.json-Datei wird im Ordner Ihres Projekts erscheinen. Öffnen Sie sie, und ersetzen Sie sie durch:

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Fügen Sie nun eine scraper.ts-Datei zu Ihrem Projekt hinzu:

Diese Datei wird bald die Logik für die Datenextraktion von llm-scraper enthalten. Da das Skript asynchrone TypeScript-Logik verwenden wird, initialisieren Sie darin eine asynchrone Funktion:

async function llmScraping() {
  // your LLM scraping logic...
}

llmScraping()

Wunderbar! Sie sind nun vollständig eingerichtet und können mit dem Aufbau Ihres KI-gesteuerten Scrapers beginnen.

Schritt #2: Installieren Sie die gescrapten Bibliotheken

Um zu funktionieren, benötigt llm-scraper die folgenden zwei zusätzlichen Bibliotheken:

• Zod: Eine TypeScript-first Schema-Deklarations- und Validierungsbibliothek.
• Playwright: Eine Bibliothek zur Automatisierung von Chromium-, Firefox- und WebKit-Browsern mit einer einzigen API.

Installieren Sie sie zusammen mit llm-scraper mit dem folgenden Befehl:

npm install zod playwright llm-scraper

Playwright benötigt einige zusätzliche Abhängigkeiten (z. B. die Browser-Binärdateien). Installieren Sie sie mit:

npx playwright install

Jetzt importieren Sie Zod und Playwright in scraper.ts:

import { z } from "zod"
import { chromium } from "playwright"
import LLMScraper from "llm-scraper"

Großartig! Sie haben nun alle erforderlichen Bibliotheken, um mit LLM Web Scraping in TypeScript zu beginnen.

Schritt #3: OpenAI einrichten

llm-scraper unterstützt mehrere LLM-Anbieter, darunter OpenAI, Groq, Ollama und GGUF. In diesem Fall werden wir OpenAI verwenden. Falls Sie dies noch nicht getan haben, stellen Sie sicher, dass Sie Ihren OpenAI-API-Schlüssel erhalten.

Installieren Sie zunächst den OpenAI JavaScript-Client:

npm install @ai-sdk/openai

Importieren Sie sie dann in Ihren Code und verwenden Sie sie zur Initialisierung Ihres LLM-Modells innerhalb der Funktion llmScraping():

// other imports...
import { openai } from "@ai-sdk/openai"

// ...

const llm = openai.chat("gpt-4o")

Für eine andere Integration lesen Sie bitte die offizielle Dokumentation von llm-scraper.

Um zu vermeiden, dass der OpenAI-Schlüssel in Ihrem Code hart kodiert wird, installieren Sie dotenv:

npm install dotenv

Importieren Sie dotenv in Ihre scraper.ts-Datei und rufen Sie dotenv.config() auf, um die Umgebungsvariablen zu laden:

// other imports...
import * as dotenv from "dotenv"

// ...

dotenv.config()

Dies ermöglicht es Ihnen, Umgebungsvariablen, wie Ihren OpenAI API-Schlüssel, aus einer .env-Datei zu laden. Fügen Sie also eine .env-Datei zu Ihrem Projekt hinzu:

Öffnen Sie es und fügen Sie Ihren OpenAI-API-Schlüssel wie folgt hinzu:

OPENAI_API_KEY="<YOUR_OPENAI_KEY>"

Ersetzen Sie durch den Wert Ihres Open AI-Schlüssels

Beachten Sie, dass Sie die Variable nicht manuell in Ihrem Code lesen müssen. Das liegt daran, dass @ai-sdk/openai automatisch versucht, die Umgebungsvariable OPENAI_KEY zu lesen.

Erstaunlich! LLM-Integration abgeschlossen.

Schritt #4: Verbinden Sie sich mit der Zielseite

llm-scraper verlässt sich auf Playwright als Browser-Automatisierungs-Engine, um den HTML-Inhalt von Webseiten zu extrahieren. Um loszulegen, fügen Sie die folgenden Codezeilen in llmScraping() ein:

1. Einen Chromium-Browser initialisieren
2. Eine neue Seite öffnen
3. Playwright anweisen, die Zielseite zu besuchen

Erreichen Sie das mit:

const browser = await chromium.launch()
const page = await browser.newPage()

await page.goto("https://books.toscrape.com/catalogue/a-light-in-the-attic_1000/index.html")

Vergessen Sie am Ende nicht, den Browser zu schließen und seine Ressourcen freizugeben:

await page.close()
await browser.close()

Wenn Sie mit diesem Verfahren nicht vertraut sind, lesen Sie unseren Leitfaden zum Playwright Web Scraping.

Schritt Nr. 5: Definieren des Datenschemas

llm-scraper füttert das zugrundeliegende LLM-Modell mit einer Eingabeaufforderung, die auf dem über Playwright aus der Seite extrahierten Inhalt basiert, um strukturierte Daten zu extrahieren, die in einem bestimmten Datenmodell definiert sind.

An dieser Stelle kommt Zod ins Spiel und hilft Ihnen, das Datenmodell in TypeScript zu spezifizieren. Um zu verstehen, wie das Schema Ihrer gescrapten Daten aussehen sollte, öffnen Sie die Zielseite in Ihrem Browser und analysieren Sie zunächst die oberste Ebene der Seite:

Von hier aus sollten Sie sich darauf konzentrieren, die folgenden Daten zu extrahieren:

• Titel
• Preis
• Status der Bestände
• Menge
• Beschreibung

Gehen Sie dann zum letzten Abschnitt der Seite:

Hier werden Sie sich dafür interessieren:

• UPC (Universeller Produktcode)
• Produkttyp
• Steuer
• Anzahl der Bewertungen

Setzt man alles zusammen, erhält man das folgende Produktschema:

const productSchema = z.object({
  title: z.string().describe("The name of the product"),
  price: z.string().describe("The price of the product, typically formatted as a string like '£19.99'"),
  stock: z.string().describe("The availability status of the product, such as 'In Stock' or 'Out of Stock'"),
  quantity: z.string().describe("The specific quantity of products available in stock"),
  description: z.string().describe("A detailed description of the product, including features and specifications"),
  upc: z.string().describe("The Universal Product Code (UPC) to uniquely identify the product"),
  productType: z.string().describe("The category or type of the product, such as 'Books', 'Clothing', etc."),
  tax: z.string().describe("Information about the applicable tax amount for the product"),
  reviews: z.number().describe("The number of reviews the product has received"),
})

Tipp: Vergessen Sie nicht, Ihr Schema zu beschreiben, da dies dem LLM-Modell hilft zu verstehen, was es mit den Daten tun soll.

Fantastisch! Sie sind bereit, die KI-gestützte Scraping-Aufgabe in llm-scraper zu starten.

Schritt 6: Ausführen der Scraping-Aufgabe

Verwenden Sie die LLM-Integration, die Sie in Schritt 3 definiert haben, um ein LLMScraper-Objekt zu erstellen:

const scraper = new LLMScraper(llm)

Dies ist das Hauptobjekt der Bibliothek llm-scraper, das für die Durchführung der KI-gestützten Scraping-Aufgaben zuständig ist.

Dann starten Sie den Scraper wie folgt:

const { data } = await scraper.run(page, productSchema, {
  format: "markdown",
})

Der Parameter format legt fest, wie der Seiteninhalt an den LLM übergeben wird. Die möglichen Werte sind:

• "html": Der rohe HTML-Code der Seite.
• "Text": Der gesamte Textinhalt, der aus der Seite extrahiert wurde.
• "Markdown": Der in Markdown konvertierte HTML-Inhalt.
• "Bereinigung": Eine bereinigte Version des Textes, der aus der Seite extrahiert wurde.
• "Bild": Ein Bildschirmfoto der Seite.

Hinweis: Sie können bei Bedarf auch eine benutzerdefinierte Funktion zur Steuerung der Inhaltsformatierung bereitstellen.

Wie im Leitfaden “Warum entscheiden sich die neuen KI-Agenten für Markdown und nicht für HTML?” erläutert, ist die Verwendung des Markdown-Formats eine kluge Entscheidung, da es hilft, Token zu sparen und den Scraping-Prozess zu beschleunigen.

Schließlich gibt die Funktion scraper.run() ein Objekt zurück, das dem von Ihnen erwarteten Zod-Schema entspricht.

Perfekt! Ihre KI-gestützte Scraping-Aufgabe ist abgeschlossen.

Schritt #7: Exportieren Sie die gescrapten Daten

Derzeit werden die gescrapten Daten in einem JavaScript-Objekt gespeichert. Um die Daten leichter zugänglich zu machen, zu analysieren und weiterzugeben, exportieren Sie sie in eine JSON-Datei (siehe unten):

const jsonData = JSON.stringify(data, null, 4)
await fs.writeFile("product.json", jsonData, "utf8")

Beachten Sie, dass Sie dafür keine externen Bibliotheken benötigen. Stellen Sie einfach sicher, dass Sie den folgenden Import am Anfang Ihrer scraper.ts-Datei hinzufügen:

import { promises as fs } from "fs"

Schritt #8: Alles zusammenfügen

scraper.ts sollte nun enthalten:

import { z } from "zod"
import { chromium } from "playwright"
import LLMScraper from "llm-scraper"
import { openai } from "@ai-sdk/openai"
import * as dotenv from "dotenv"
import { promises as fs } from "fs"

// load the environment variables from the local .env file
dotenv.config()

async function llmScraping() {
  // initialize the LLM engine
  const llm = openai.chat("gpt-4o")

  // launch a browser instance and open a new page
  const browser = await chromium.launch()
  const page = await browser.newPage()

  // navigate to the target e-commerce product page
  await page.goto("https://books.toscrape.com/catalogue/a-light-in-the-attic_1000/index.html")

  // define the product schema
  const productSchema = z.object({
    title: z.string().describe("The name of the product"),
    price: z.string().describe("The price of the product, typically formatted as a string like '£19.99'"),
    stock: z.string().describe("The availability status of the product, such as 'In Stock' or 'Out of Stock'"),
    quantity: z.string().describe("The specific quantity of products available in stock"),
    description: z.string().describe("A detailed description of the product, including features and specifications"),
    upc: z.string().describe("The Universal Product Code (UPC) to uniquely identify the product"),
    productType: z.string().describe("The category or type of the product, such as 'Books', 'Clothing', etc."),
    tax: z.string().describe("Information about the applicable tax amount for the product"),
    reviews: z.number().describe("The number of reviews the product has received"),
  })

  // create a new LLMScraper instance
  const scraper = new LLMScraper(llm)

  // run the LLM scraper
  const { data } = await scraper.run(page, productSchema, {
    format: "markdown", // or "html", "text", etc.
  })

  // conver the scraped data to a JSON string
  const jsonData = JSON.stringify(data, null, 4)
  // populate an output file with the JSON string
  await fs.writeFile("product.json", jsonData, "utf8")

  // close the page and the browser and release their resources
  await page.close()
  await browser.close()
}

llmScraping()

Wie Sie sehen, können Sie mit llm-scraper ein JavaScript-basiertes Scraping-Skript in einer Handvoll Codezeilen definieren.

Kompilieren Sie Ihr Skript mit diesem Befehl von TypeScript nach JavaScript:

npx tsc

Eine scraper.js-Datei wird im Ordner Ihres Projekts erscheinen. Führen Sie sie mit aus:

node scraper.js

Wenn das Skript ausgeführt wird, erscheint eine Datei namens product.json in Ihrem Projektordner.

Wenn Sie es öffnen, sehen Sie etwa so aus:

{
  "title": "A Light in the Attic",
  "price": "£51.77",
  "stock": "In Stock",
  "quantity": "22",
  "description": "It's hard to imagine a world without A Light in the Attic. This now-classic collection of poetry and drawings from Shel Silverstein celebrates its 20th anniversary with this special edition. Silverstein's humorous and creative verse can amuse the dowdiest of readers. Lemon-faced adults and fidgety kids sit still and read these rhythmic words and laugh and smile and love that Silverstein. Need proof of his genius? Rockabye Rockabye baby, in the treetop Don't you know a treetop Is no safe place to rock? And who put you up there, And your cradle, too? Baby, I think someone down here's Got it in for you. Shel, you never sounded so good.",
  "upc": "a897fe39b1053632",
  "productType": "Books",
  "tax": "£0.00",
  "reviews": 0
}

Diese Datei enthält genau die Informationen, die auf der von Ihnen anvisierten Produktseite angezeigt werden. Wie Sie sehen können, wurden die Daten dank der Leistungsfähigkeit der LLMs extrahiert, ohne dass eine benutzerdefinierte Parsing-Logik erforderlich war. Gut gemacht!

Extra: Code-Generierung mit llm-scraper

llm-scraper ist auch in der Lage, die zugrundeliegende Playwright-Datenparsing-Logik anhand des Schemas zu generieren. Dies wird durch die Funktion generate() ermöglicht.

Ein Beispiel finden Sie im folgenden Ausschnitt:

const { code } = await scraper.generate(page, productSchema)

Wie Sie sehen können, nimmt es das Playwright-Seitenobjekt und das Zod-Schema und gibt dann eine Zeichenfolge zurück, die den generierten Playwright-Code enthält. In diesem Fall lautet die Ausgabe:

(function() {
function extractData() {
const title = document.querySelector('h1').innerText;
const price = document.querySelector('.price_color').innerText;
const stockText = document.querySelector('.instock.availability').innerText.trim();
const stock = stockText.includes('In stock') ? 'In Stock' : 'Out of Stock';
const quantityMatch = stockText.match(/\d+/);
const quantity = quantityMatch ? quantityMatch[0] : '0';
const description = document.querySelector('#product_description ~ p').innerText;
const upc = document.querySelector('th:contains("UPC") + td').innerText;
const productType = document.querySelector('th:contains("Product Type") + td').innerText;
const tax = document.querySelector('th:contains("Tax") + td').innerText;
const reviews = parseInt(document.querySelector('th:contains("Number of reviews") + td').innerText, 10);
    return {
        title,
        price,
        stock,
        quantity,
        description,
        upc,
        productType,
        tax,
        reviews
    };
}

const data = extractData();
console.log(data);
})()

Sie können diesen generierten JavaScript-Code dann programmatisch ausführen und das Ergebnis mit parsen:

const result = await page.evaluate(code)
const data = schema.parse(result)

Das Datenobjekt enthält dasselbe Ergebnis wie die in Schritt 6 des vorherigen Kapitels erzeugten Daten.

llm-scraper Alternativen für LLM Scraping

llm-scraper ist nicht die einzige Bibliothek, die für LLM-gestütztes Scraping verfügbar ist. Einige andere bemerkenswerte Alternativen sind:

• Crawl4AI: Eine Python-Bibliothek zum Erstellen von blitzschnellen, KI-fähigen Web-Crawling-Agenten und Datenpipelines. Sie ist äußerst flexibel und für Entwickler optimiert, um sie schnell und präzise einzusetzen. In unserem Tutorial über Crawl4AI-Scraping können Sie sie in Aktion sehen.
• ScrapeGraphAI: Eine Python-Bibliothek für Web-Scraping, die LLMs und direkte Graphenlogik kombiniert, um Scraping-Pipelines für Websites und lokale Dokumente (wie XML, HTML, JSON und Markdown) zu erstellen. Sehen Sie sich unseren Leitfaden zum Scraping mit ScrapeGraphAI an.

Einschränkungen bei diesem Ansatz des Web Scraping

ToScrape, die Zielsite, die wir in diesem Artikel verwendet haben, ist – wie der Name schon sagt – nur eine Scraping-Sandbox, die Scraping-Skripte willkommen heißt. Wenn Sie llm-scraper gegen reale Websites einsetzen, wird es leider viel schwieriger…

Warum? Weil E-Commerce-Unternehmen und Online-Händler wissen, wie wertvoll ihre Daten sind, und sie tun alles, um sie zu schützen. Das gilt selbst dann, wenn diese Daten auf ihren Produktseiten öffentlich zugänglich sind.

Daher setzen die meisten E-Commerce-Plattformen Anti-Bot- und Anti-Scraping-Maßnahmen ein, um automatische Crawler zu blockieren. Diese Techniken können sogar Scraper stoppen, die auf Browser-Automatisierungstools wie Playwright basieren – genau wie llm-scraper.

Wir sprechen hier von Abwehrmaßnahmen wie dem berüchtigten Amazon CAPTCHA, das ausreicht, um die meisten Bots zu stoppen:

Selbst wenn es Ihnen gelingt, CAPTCHAs mit Playwright zu umgehen, können andere Herausforderungen wie IP-Sperren, die durch zu viele automatische Anfragen verursacht werden, Ihre Scraping-Operation zum Erliegen bringen.

An diesem Punkt besteht die Lösung nicht darin, Ihr Skript endlos zu optimieren, um es noch komplexer zu machen. Es geht darum, die richtigen Werkzeuge zu verwenden.

Durch die Integration von Playwright mit einem Browser, der speziell für Web Scraping entwickelt wurde – wie Scraping Browser –wird allesviel einfacher. Diese Lösung ist ein Cloud-basierter Browser, der für Scraping optimiert ist. Er bietet IP-Rotation, automatische Wiederholungsversuche, fortschrittliche Anti-Bot-Bypass-Mechanismen und sogar eine integrierte CAPTCHA-Lösung– und das alles, ohne dass Sie die Infrastruktur selbst verwalten müssen.

Integrieren Sie den Scraping-Browser mit Playwright in llm-scraper wie jeden anderen Browser, wie in unseren Dokumenten beschrieben.

Schlussfolgerung

In diesem Blogbeitrag haben Sie erfahren, was llm-scraper zu bieten hat und wie Sie damit ein KI-gestütztes Scraping-Skript in TypeScript erstellen können. Dank der Integration mit LLMs können Sie Websites mit komplexen oder dynamischen Seitenstrukturen scrapen.

Wie wir bereits besprochen haben, ist der effektivste Weg, eine Blockierung zu vermeiden, die Verwendung zusammen mit dem Scraping Browser von Bright Data, der über einen eingebauten CAPTCHA-Löser und viele andere Anti-Bot-Umgehungsfunktionen verfügt.

Wenn Sie daran interessiert sind, einen KI-Agenten direkt auf der Grundlage dieser Lösung zu entwickeln, sollten Sie sich Agent Browser ansehen. Diese Lösung führt agentengesteuerte Workflows auf entfernten Browsern aus, die nie blockiert werden. Sie ist unbegrenzt skalierbar und wird durch das zuverlässigste Proxy-Netzwerk der Welt unterstützt.

Erstellen Sie noch heute ein kostenloses Bright Data-Konto und entdecken Sie unsere Daten- und Scraping-Lösungen für Ihre KI-Reise!