Skip to content

Web资源Loader

· 5 min

Web Loader#

CheerioWebBaseLoader 作用是抓取指定网页并解析 HTML 内容，提取需要的纯文本数据。

这个 Loader 底层依赖 cheerio，语法类似 jQuery，可以方便地选择 HTML 元素并提取内容，适用于解析静态 HTML 网页。

Terminal window
pnpm add @langchain/community cheerio

快速上手示例

import { CheerioWebBaseLoader } from '@langchain/community/document_loaders/web/cheerio'


const loader = new CheerioWebBaseLoader('https://tech.meituan.com/')


const result = await loader.load()


console.log(result)

可以通过配置 selector，提取特定 HTML 标签内容。

例如只提取所有二级标题：

const loader = new CheerioWebBaseLoader('https://tech.meituan.com/', {
  selector: 'h2', // 只提取网页中的 <h2> 元素
})

Github loader#

经常有这样的需求，希望大模型理解某个项目的结构和实现细节，例如：

这种场景下，直接将整个 GitHub 仓库的代码作为数据源加载进来，是一种非常实用的做法。

GithubRepoLoader 来一键抓取 GitHub 项目的内容，并自动转换成 Document 对象。

该 Loader 依赖 ignore 包，所以需要先安装这个包。

Terminal window
pnpm add ignore

快速上手示例

import { GithubRepoLoader } from '@langchain/community/document_loaders/web/github'


const loader = new GithubRepoLoader('https://github.com/vuejs/vue', {
  branch: 'main', // 指定分支（注意有的项目是 main）
  recursive: false, // 是否递归子目录（建议测试时设为 false）
  unknown: 'warn', // 遇到未知类型文件是否告警
  ignorePaths: ['*.md', '*.json', 'yarn.lock'], // 忽略部分文件
})


const result = await loader.load()


console.log(result)

SearchAPI#

在很多场景中，希望 AI 应用回答一些最新的问题，比如：

这类问题往往无法依赖本地知识库解决，需要实时从网络搜索并提取信息。

LangChain 中提供了多个工具：

  1. SearchApiLoader：背后用到的服务商为 https://www.searchapi.io/
  2. SerpAPILoader：背后用到的服务商为 https://serpapi.com/

这两个都是第三方的 SERP 抓取/解析 API 提供商，无论哪一个，注册后每月都有免费额度。

快速上手案例

import { SerpAPILoader } from '@langchain/community/document_loaders/web/serpapi'


const apiKey =
  '3a816e810e17b00076d3741542bfdcbe0b655abc820b79164eaf2397e5712641'


const q = '什么是Copilot？'


const loader = new SerpAPILoader({
  q,
  apiKey,
})


const result = await loader.load()


console.log(result)

结果示例：

Document {
    pageContent: '{"position":3,"title":"Microsoft Copilot - 维基百科，自由的百科全书","link":"https://zh.wikipedia.org/zh-hans/Microsoft_Copilot","redirect_link":"https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://zh.wikipedia.org/zh-hans/Microsoft_Copilot&ved=2ahUKEwj119iQoYyPAxUbQkEAHfXxGHQQFnoECB0QAQ","displayed_link":"https://zh.wikipedia.org › zh-hans","favicon":"https://serpapi.com/searches/689edd28e396eb9df8d729b3/images/5b60cc0865d240ae4182a4285f2cc79bf636de7c82bdc214e8ff7938fe4e383a.png","snippet":"Microsoft Copilot是由微软开发的基于大型语言模型的聊天机器人，于2023年2月7日推出。 它被视为Cortana的后继产品。 Microsoft Copilot在Microsoft Bing和Microsoft Edge ...","source":"维基百科"}',
    metadata: { source: 'SerpAPI', responseType: 'organic_results' },
    id: undefined
 },

metadata.responseType 常见的类型如下表：

responseType含义适合用途
knowledge_graph权威定义、结构化知识实体解释、百科内容
organic_results正常网页搜索结果拓展背景、内容召回
people_also_ask相关问题列表多轮对话生成、问题推荐
related_questions延伸相关问题拓展性回答、导航引导
top_stories新闻报道实时事件聚合、更新动态
videos视频资源多模态输出、学习材料推荐

SerpAPI 会返回各种类型的信息，无法直接在 SerpAPILoader 初始化时指定返回哪几种 responseType。

因为 SerpAPILoader 的行为是调用 SerpAPI 的搜索接口，该接口的行为就是返回一个包含多类型搜索结果的完整 JSON，然后由 LangChain 封装为多个 Document 实例，每个带有不同的 metadata.responseType。

拿到结果后简单过滤一下：

const loader = new SerpAPILoader({ q: 'github copilot 是什么', apiKey })
const allDocs = await loader.load()


// 只保留 knowledge_graph 类型
const kgDocs = allDocs.filter(
  (doc) => doc.metadata.responseType === 'knowledge_graph'
)


// 只取网页正文类型（普通搜索结果）
const organicDocs = allDocs.filter(
  (doc) => doc.metadata.responseType === 'organic_results'
)

现在获取到的仅仅是搜索结果，需要进一步去拿到搜索结果对应链接的正文。

import { SerpAPILoader } from '@langchain/community/document_loaders/web/serpapi'
import { CheerioWebBaseLoader } from '@langchain/community/document_loaders/web/cheerio'


const apiKey =
  '3a816e810e17b00076d3741542bfdcbe0b655abc820b79164eaf2397e5712641'


const q = '什么是Copilot？'


const loader = new SerpAPILoader({
  q,
  apiKey,
})


const result = await loader.load()


const jsonResult = JSON.parse(result[1].pageContent)


const link = jsonResult.link


// console.log(link)


const webLoader = new CheerioWebBaseLoader(link)


const webContent = await webLoader.load()


console.log(webContent)