Bereinigen Sie HTML-Inhalte für die Retrieval-Augmented Generation mit Readability.js

Web Scraping ist eine gängige Methode zum Sammeln von Inhalten für Ihre RAG-Anwendung (Retrieval-Augmented Generation). Das Parsen von Webseiteninhalten kann jedoch eine Herausforderung sein.

Mozillas Open-Source-Bibliothek Readability.js bietet eine praktische Lösung zum Extrahieren nur der wesentlichen Teile einer Webseite. Lassen Sie uns die Integration in eine Datenaufnahmepipeline für eine RAG-Anwendung untersuchen.

Unstrukturierte Daten aus Webseiten extrahieren

Webseiten sind reichhaltige Quellen unstrukturierter Daten, ideal für RAG-Anwendungen. Webseiten enthalten jedoch häufig irrelevante Informationen wie Kopfzeilen, Seitenleisten und Fußzeilen. Dieser zusätzliche Inhalt ist zwar nützlich zum Durchsuchen, lenkt jedoch vom Hauptthema der Seite ab.

Für optimale RAG-Daten müssen irrelevante Inhalte entfernt werden. Während Tools wie Cheerio HTML basierend auf der bekannten Struktur einer Website analysieren können, ist dieser Ansatz für das Scraping verschiedener Website-Layouts ineffizient. Um nur relevante Inhalte zu extrahieren, ist eine robuste Methode erforderlich.

Nutzung der Reader View-Funktionalität

Die meisten Browser verfügen über eine Leseransicht, die alles außer dem Titel und Inhalt des Artikels entfernt. Das folgende Bild veranschaulicht den Unterschied zwischen dem Standard-Browsing und dem Lesemodus, der auf einen DataStax-Blogbeitrag angewendet wird:

Mozilla stellt Readability.js, die Bibliothek hinter dem Lesemodus von Firefox, als eigenständiges Open-Source-Modul bereit. Dadurch können wir Readability.js in eine Datenpipeline integrieren, um irrelevante Inhalte zu entfernen und die Scraping-Ergebnisse zu verbessern.

Scraping von Daten mit Node.js und Readability.js

Lassen Sie uns den Scraping-Artikelinhalt aus einem früheren Blogbeitrag über das Erstellen von Vektoreinbettungen in Node.js veranschaulichen. Der folgende JavaScript-Code ruft den HTML-Code der Seite ab:

<code class="language-javascript">const html = await fetch(
  "https://www.datastax.com/blog/how-to-create-vector-embeddings-in-node-js"
).then((res) => res.text());
console.log(html);</code>

Dazu gehört der gesamte HTML-Code, einschließlich Navigation, Fußzeilen und andere auf Websites übliche Elemente.

Alternativ können Sie Cheerio verwenden, um bestimmte Elemente auszuwählen:

<code class="language-javascript">npm install cheerio</code>

<code class="language-javascript">import * as cheerio from "cheerio";

const html = await fetch(
  "https://www.datastax.com/blog/how-to-create-vector-embeddings-in-node-js"
).then((res) => res.text());

const $ = cheerio.load(html);

console.log($("h1").text(), "\n");
console.log($("section#blog-content > div:first-child").text());</code>

Dies ergibt den Titel und den Artikeltext. Dieser Ansatz setzt jedoch die Kenntnis der HTML-Struktur voraus, was nicht immer machbar ist.

Ein besserer Ansatz besteht in der Installation von Readability.js und jsdom:

<code class="language-bash">npm install @mozilla/readability jsdom</code>

Readability.js arbeitet in einer Browserumgebung und erfordert, dass jsdom dies in Node.js simuliert. Wir können den geladenen HTML-Code in ein Dokument konvertieren und Readability.js verwenden, um den Inhalt zu analysieren:

<code class="language-javascript">import { Readability } from "@mozilla/readability";
import { JSDOM } from "jsdom";

const url = "https://www.datastax.com/blog/how-to-create-vector-embeddings-in-node-js";
const html = await fetch(url).then((res) => res.text());

const doc = new JSDOM(html, { url });
const reader = new Readability(doc.window.document);
const article = reader.parse();

console.log(article);</code>

Das article-Objekt enthält verschiedene analysierte Elemente:

Dazu gehören der Titel, der Autor, der Auszug, der Zeitpunkt der Veröffentlichung sowie sowohl HTML (content) als auch einfacher Text (textContent). textContent ist bereit für die Aufteilung, Einbettung und Speicherung, während content Links und Bilder zur weiteren Verarbeitung behält.

Mit der Funktion isProbablyReaderable können Sie feststellen, ob das Dokument für Readability.js geeignet ist:

<code class="language-javascript">const html = await fetch(
  "https://www.datastax.com/blog/how-to-create-vector-embeddings-in-node-js"
).then((res) => res.text());
console.log(html);</code>

Ungeeignete Seiten sollten zur Überprüfung markiert werden.

Integration der Lesbarkeit mit LangChain.js

Readability.js lässt sich nahtlos in LangChain.js integrieren. Das folgende Beispiel verwendet LangChain.js, um eine Seite zu laden, Inhalte mit MozillaReadabilityTransformer zu extrahieren, Text mit RecursiveCharacterTextSplitter zu teilen, Einbettungen mit OpenAI zu erstellen und Daten in Astra DB zu speichern.

Erforderliche Abhängigkeiten:

<code class="language-javascript">npm install cheerio</code>

Sie benötigen Astra DB-Anmeldeinformationen ( ASTRA_DB_APPLICATION_TOKEN, ASTRA_DB_API_ENDPOINT) und einen OpenAI-API-Schlüssel (OPENAI_API_KEY) als Umgebungsvariablen.

Notwendige Module importieren:

<code class="language-javascript">import * as cheerio from "cheerio";

const html = await fetch(
  "https://www.datastax.com/blog/how-to-create-vector-embeddings-in-node-js"
).then((res) => res.text());

const $ = cheerio.load(html);

console.log($("h1").text(), "\n");
console.log($("section#blog-content > div:first-child").text());</code>

Komponenten initialisieren:

<code class="language-bash">npm install @mozilla/readability jsdom</code>

Dokumente laden, transformieren, teilen, einbetten und speichern:

<code class="language-javascript">import { Readability } from "@mozilla/readability";
import { JSDOM } from "jsdom";

const url = "https://www.datastax.com/blog/how-to-create-vector-embeddings-in-node-js";
const html = await fetch(url).then((res) => res.text());

const doc = new JSDOM(html, { url });
const reader = new Readability(doc.window.document);
const article = reader.parse();

console.log(article);</code>

Verbesserte Web-Scraping-Genauigkeit mit Readability.js

Readability.js, eine robuste Bibliothek, die den Lesemodus von Firefox unterstützt, extrahiert effizient relevante Daten aus Webseiten und verbessert so die RAG-Datenqualität. Es kann direkt oder über MozillaReadabilityTransformer.

Dies ist nur die Anfangsphase Ihrer Aufnahmepipeline. Chunking, Einbettung und Astra DB-Speicher sind nachfolgende Schritte beim Erstellen Ihrer RAG-Anwendung.

Verwenden Sie andere Methoden zum Bereinigen von Webinhalten in Ihren RAG-Anwendungen? Teilen Sie Ihre Techniken!

Das obige ist der detaillierte Inhalt vonBereinigen Sie HTML-Inhalte für die Retrieval-Augmented Generation mit Readability.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!