Nettoyer le contenu HTML pour une génération augmentée par récupération avec Readability.js

Le Web scraping est une méthode courante de collecte de contenu pour votre application de génération augmentée par récupération (RAG). Cependant, l'analyse du contenu d'une page Web peut s'avérer difficile.

La bibliothèque open source Readability.js de Mozilla offre une solution pratique pour extraire uniquement les parties essentielles d'une page Web. Explorons son intégration dans un pipeline d'ingestion de données pour une application RAG.

Extraire des données non structurées à partir de pages Web

Les pages Web sont de riches sources de données non structurées, idéales pour les applications RAG. Cependant, les pages Web contiennent souvent des informations non pertinentes telles que des en-têtes, des barres latérales et des pieds de page. Bien qu'utile pour la navigation, ce contenu supplémentaire nuit au sujet principal de la page.

Pour des données RAG optimales, le contenu non pertinent doit être supprimé. Bien que des outils tels que Cheerio puissent analyser le HTML en fonction de la structure connue d'un site, cette approche est inefficace pour supprimer diverses mises en page de sites Web. Une méthode robuste est nécessaire pour extraire uniquement le contenu pertinent.

Exploiter la fonctionnalité Reader View

La plupart des navigateurs incluent une vue lecteur qui supprime tout sauf le titre et le contenu de l'article. L'image suivante illustre la différence entre la navigation standard et le mode lecteur appliqué à un article de blog DataStax :

Mozilla fournit Readability.js, la bibliothèque derrière le mode lecteur de Firefox, en tant que module open source autonome. Cela nous permet d'intégrer Readability.js dans un pipeline de données pour supprimer le contenu non pertinent et améliorer les résultats du scraping.

Scraping de données avec Node.js et Readability.js

Illustrons le contenu d'un article de scraping d'un article de blog précédent sur la création d'intégrations vectorielles dans Node.js. Le code JavaScript suivant récupère le HTML de la page :

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

Cela inclut tout le code HTML, y compris la navigation, les pieds de page et d'autres éléments courants sur les sites Web.

Vous pouvez également utiliser Cheerio pour sélectionner des éléments spécifiques :

npm install cheerio

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());

Cela donne le titre et le texte de l'article. Cependant, cette approche repose sur la connaissance de la structure HTML, ce qui n'est pas toujours réalisable.

Une meilleure approche consiste à installer Readability.js et jsdom :

npm install @mozilla/readability jsdom

Readability.js fonctionne dans un environnement de navigateur, ce qui nécessite que jsdom simule cela dans Node.js. Nous pouvons convertir le HTML chargé en document et utiliser Readability.js pour analyser le contenu :

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);

L'objet article contient divers éléments analysés :

Cela inclut le titre, l'auteur, l'extrait, l'heure de publication et à la fois le HTML (content) et le texte brut (textContent). textContent est prêt pour le regroupement, l'intégration et le stockage, tandis que content conserve les liens et les images pour un traitement ultérieur.

La fonction isProbablyReaderable permet de déterminer si le document est adapté à Readability.js :

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

Les pages inappropriées doivent être signalées pour examen.

Intégrer la lisibilité avec LangChain.js

Readability.js s'intègre parfaitement à LangChain.js. L'exemple suivant utilise LangChain.js pour charger une page, extraire du contenu avec MozillaReadabilityTransformer, diviser le texte avec RecursiveCharacterTextSplitter, créer des intégrations avec OpenAI et stocker des données dans Astra DB.

Dépendances obligatoires :

npm install cheerio

Vous aurez besoin des informations d'identification Astra DB ( ASTRA_DB_APPLICATION_TOKEN, ASTRA_DB_API_ENDPOINT) et d'une clé API OpenAI (OPENAI_API_KEY) comme variables d'environnement.

Importer les modules nécessaires :

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());

Initialiser les composants :

npm install @mozilla/readability jsdom

Charger, transformer, diviser, intégrer et stocker des documents :

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);

Amélioration de la précision du Web Scraping avec Readability.js

Readability.js, une bibliothèque robuste qui alimente le mode lecteur de Firefox, extrait efficacement les données pertinentes des pages Web, améliorant ainsi la qualité des données RAG. Il peut être utilisé directement ou via le MozillaReadabilityTransformer de LangChain.js.

Ce n'est que la première étape de votre pipeline d'ingestion. Le regroupement, l'intégration et le stockage Astra DB sont les étapes suivantes de la création de votre application RAG.

Utilisez-vous d'autres méthodes pour nettoyer le contenu Web dans vos applications RAG ? Partagez vos techniques !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!