Readability.js を使用して HTML コンテンツをクリーンアップして検索拡張生成を行う

Web スクレイピングは、検索拡張生成 (RAG) アプリケーションのコンテンツを収集するための一般的な方法です。ただし、Web ページのコンテンツを解析するのは困難な場合があります。

Mozilla のオープンソース Readability.js ライブラリは、Web ページの重要な部分のみを抽出するための便利なソリューションを提供します。 RAG アプリケーションのデータ取り込みパイプラインへの統合を見てみましょう。

Web ページからの非構造化データの抽出

Web ページは非構造化データの豊富なソースであり、RAG アプリケーションに最適です。 ただし、Web ページにはヘッダー、サイドバー、フッターなどの無関係な情報が含まれることがよくあります。ブラウジングには便利ですが、この余分なコンテンツはページの本題から逸れてしまいます。

最適な RAG データを得るには、無関係なコンテンツを削除する必要があります。 Cheerio のようなツールはサイトの既知の構造に基づいて HTML を解析できますが、このアプローチは多様な Web サイトのレイアウトをスクレイピングするには非効率的です。関連するコンテンツのみを抽出するには、堅牢な方法が必要です。

リーダービュー機能の活用

ほとんどのブラウザには、記事のタイトルとコンテンツ以外のすべてを削除するリーダー ビューが含まれています。次の画像は、DataStax ブログ投稿に適用される標準のブラウジング モードとリーダー モードの違いを示しています。

Mozilla は、Firefox のリーダー モードの背後にあるライブラリである Readability.js をスタンドアロンのオープンソース モジュールとして提供しています。これにより、Readability.js をデータ パイプラインに統合して、無関係なコンテンツを削除し、スクレイピングの結果を向上させることができます。

Node.js と Readability.js を使用したデータのスクレイピング

Node.js でのベクター埋め込みの作成に関する以前のブログ投稿から記事コンテンツをスクレイピングする方法を説明します。 次の JavaScript コードは、ページの HTML を取得します:

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

これには、ナビゲーション、フッター、Web サイトで一般的なその他の要素を含む、すべての HTML が含まれます。

また、Cheerio を使用して特定の要素を選択することもできます。

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

これにより、タイトルと記事のテキストが生成されます。 ただし、このアプローチは HTML 構造の知識に依存しており、常に実現可能であるとは限りません。

より良いアプローチには、Readability.js と jsdom をインストールすることが含まれます。

npm install @mozilla/readability jsdom

Readability.js はブラウザ環境内で動作するため、Node.js でこれをシミュレートするには jsdom が必要です。 ロードされた HTML をドキュメントに変換し、Readability.js を使用してコンテンツを解析できます。

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

article オブジェクトには、解析されたさまざまな要素が含まれています:

これには、タイトル、著者、抜粋、発行時刻、HTML (content) とプレーン テキスト (textContent) の両方が含まれます。 textContent はチャンク化、埋め込み、および保存の準備ができていますが、content はさらなる処理のためにリンクと画像を保持します。

isProbablyReaderable 関数は、ドキュメントが 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);

不適切なページにはレビューのためにフラグを立てる必要があります。

可読性を LangChain.js と統合する

Readability.js は LangChain.js とシームレスに統合されます。次の例では、LangChain.js を使用してページを読み込み、MozillaReadabilityTransformer でコンテンツを抽出し、RecursiveCharacterTextSplitter でテキストを分割し、OpenAI で埋め込みを作成し、Astra DB にデータを保存します。

必要な依存関係:

npm install cheerio

環境変数として、Astra DB 認証情報 (ASTRA_DB_APPLICATION_TOKEN、ASTRA_DB_API_ENDPOINT) と OpenAI API キー (OPENAI_API_KEY) が必要です。

必要なモジュールをインポートします:

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

コンポーネントの初期化:

npm install @mozilla/readability jsdom

ドキュメントのロード、変換、分割、埋め込み、保存:

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

Readability.js による Web スクレイピングの精度の向上

Readability.js は、Firefox のリーダー モードを強化する堅牢なライブラリであり、Web ページから関連データを効率的に抽出し、RAG データの品質を向上させます。 直接使用することも、LangChain.js の MozillaReadabilityTransformer 経由で使用することもできます。

これは取り込みパイプラインの初期段階にすぎません。 チャンク化、埋め込み、Astra DB ストレージは、RAG アプリケーションを構築する後続のステップです。

RAG アプリケーションで Web コンテンツをクリーニングするために他の方法を採用していますか? あなたのテクニックをシェアしてください!

以上がReadability.js を使用して HTML コンテンツをクリーンアップして検索拡張生成を行うの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。