Readability.js를 사용하여 검색 증강 생성을 위한 HTML 콘텐츠 정리

웹 스크래핑은 RAG(검색 증강 생성) 애플리케이션용 콘텐츠를 수집하는 일반적인 방법입니다. 그러나 웹페이지 콘텐츠를 구문 분석하는 것은 어려울 수 있습니다.

Mozilla의 오픈 소스 Readability.js 라이브러리는 웹 페이지의 필수 부분만 추출할 수 있는 편리한 솔루션을 제공합니다. RAG 애플리케이션을 위한 데이터 수집 파이프라인으로의 통합을 살펴보겠습니다.

웹 페이지에서 구조화되지 않은 데이터 추출

웹 페이지는 구조화되지 않은 데이터의 풍부한 소스로 RAG 애플리케이션에 이상적입니다. 그러나 웹페이지에는 헤더, 사이드바, 바닥글 등 관련 없는 정보가 포함되어 있는 경우가 많습니다. 이러한 추가 콘텐츠는 탐색에는 유용하지만 페이지의 주요 주제를 손상시킵니다.

최적의 RAG 데이터를 위해서는 관련 없는 콘텐츠를 제거해야 합니다. Cheerio와 같은 도구는 사이트의 알려진 구조를 기반으로 HTML을 구문 분석할 수 있지만 이 접근 방식은 다양한 웹 사이트 레이아웃을 스크랩하는 데는 비효율적입니다. 관련 콘텐츠만 추출하려면 강력한 방법이 필요합니다.

리더뷰 기능 활용

대부분의 브라우저에는 기사 제목과 내용을 제외한 모든 항목을 제거하는 독자 보기가 포함되어 있습니다. 다음 이미지는 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);

여기에는 탐색, 바닥글 및 웹사이트에서 일반적으로 사용되는 기타 요소를 포함한 모든 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로 향상된 웹 스크래핑 정확도

Firefox의 리더 모드를 지원하는 강력한 라이브러리인 Readability.js는 웹 페이지에서 관련 데이터를 효율적으로 추출하여 RAG 데이터 품질을 향상시킵니다. 직접 사용하거나 LangChain.js의 MozillaReadabilityTransformer.

을 통해 사용할 수 있습니다.

이것은 수집 파이프라인의 초기 단계에 불과합니다. 청킹, 임베딩 및 Astra DB 스토리지는 RAG 애플리케이션 구축의 후속 단계입니다.

RAG 애플리케이션에서 웹 콘텐츠를 정리하기 위해 다른 방법을 사용하시나요? 당신의 기술을 공유하세요!

위 내용은 Readability.js를 사용하여 검색 증강 생성을 위한 HTML 콘텐츠 정리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!