AI框架LangChain实战

原创德钦三七互娱技术团队

背景

如今，各种提高工作效率的AI应用层出不穷。比如：

1、上传本地文档，并帮助用户汇总和分析内容的工具，例如chatpdf。

2、根据网页内容或视频，汇总分析信息的浏览器插件，例如new bing的Monica。

我们期望参考这些工具的逻辑来实现一个目标：用户只需投喂需求文档或接口文档，便能自动生成可用的前端页面代码。

学习与调研

我们后面做的所有操作都是基于openAI的，需要提前在它官网申请API keys。

每个账号会送 5 美元的额度，对于普通的学习研究也够用一段时间了。

在使用的过程中，发现了chatGPT的AI模型存在的一些问题：

大文本超出openai token数量超出限制。目前openai的模型，基本都是4k、8k、16k的token数量。如果直接调用openai接口，会直接报token超出的错误。
无法联网，获取不到实时的信息。
短期记忆。token超出模型的限制后，ai会记不住之前的设定。
多任务支持较差。如果你让AI一下子做很多事，它会很困惑，而且不知道任务优先级及先后顺序

为什么使用langchain

引用一句非常形象的话：AI模型只有强大的 "大脑" 却没有 "手臂" ，无法与外部世界交互。而langchain这个框架给了开发者不同的工具，可以个AI模型装上“手臂”。

正如它名字中的chain，就可以知道，通过这个框架，可以把各种东西“链”起来。它是近几个月才火起来的，是目前github增长速度排第2的仓库。截止2023年7月，已经有54.7k的star了。

它支持nodejs和Python调用，后续的示例的代码，都会使用nodejs进行演示。

读本地文档

langchain 支持 csv, docx, epub, json, markdown, pdf, text 等多种文件加载。这里用word文档演示langchain读取接口文档相关信息（该文档是mock数据，不涉及到敏感信息）。

接口文档的信息如图中所示（注意圈出的信息，后面代码会对应上）

示例1：搜索文档相关信息

通过代码返回的结果可以看到，langchain成功加载了word文档且能找到问题对应的信息。

示例2：总结接口信息

让langchain通过文档中的接口信息得到

接口地址
字段
header
请求方式(示例中为post请求)

再以axios的写法输出。可以看到输出结果和文档中的各项信息都是完全符合的，且代码是可用的。

看了示例之后，你可能会疑惑：之前不是提到AI模型有token数量的限制吗？怎么这么大一个文档，可以直接读取呢？

可以看到代码里面有 2 个比较关键的调用splitter（文本切割）和vectorStore（向量存储）。比如要使用一个最大token限制为4k的model去读取一个字符串长度为1w的文本，可以通过以下步骤：

使用文本切割，把一个字符串长度为1w的文本切割为10个1k长度的文档碎片
使用向量存储把普通文本转换成向量文本
通过向量搜索，就可以搜到相关性最大的文档碎片。
通过AI模型对信息进行提炼和总结，进行输出

在开头提到的chatpdf，也是使用了类似的流程，感兴趣的可以去github看一下chatpdf的源码。

读web网页

前面也提到，chatGPT的AI模型无法联网，它的数据只能到2021年。比如你问它今天天气怎么样？它会瞎编一个结果给你。

2023年7月，chatGPT plus已开放了联网的插件，钞能力可以忽略无法联网这一点。

还有另一种方式，通过爬虫爬取网页信息，对网页内的信息进行整理，再作为上下文提供给大模型。

下面的示例我通过puppeteer进行网页爬取apifox文档：h861y5qddl.apifox.cn/

为了方便演示自动输入和自动点击等操作，我会暂时关掉无头浏览器

完整效果可以查看以下视频：

视频中的内容闪的比较快，可能很多小伙伴没有看完内容，我这里再补充一下图里涉及到哪些操作：

执行node脚本后，puppeteer自动起了一个浏览器
puppeteer自动执行聚焦、点击、输入等操作，爬取所有点击页面的html文本
使用cheerio选择对应的html片段并格式化文本（去掉tag、class、id等内容）
使用langchain进行文本切割，向量存储，搜索关键信息，再通过prompt + LLM进行输出。这里输出的文本只会包含代码，而且代码质量非常高，直接是可以使用的！
使用nodejs的fs将代码写入到项目的文件中

实现步骤

初始化openAI model

这里会涉及到一个重要的参数temperature，它的值区间是0 - 1。

temperature值越低，生成的内容越稳定。这里需要把temperature设置成0，如果AI无法找到匹配回复的内容时，它会直接说"I don't know"，避免了AI胡说八道，很符合我们场景。

如果场景需要一些发散性的内容，比如让AI讲笑话，模拟人工客服之类的，就需要把这个temperature值调高。

初始化无头浏览器

nodejs中比较常用puppeteer进行网页爬取，可以模拟各种交互，功能非常强大。

因为网页中有很多不必要的信息和标签，我们需要先观察页面内容的主要信息是分布在哪些区域中的。

以apifox文档为例，我们要爬取的内都分布在#main这个id中，而且爬取接口的class都是以ui-tree-node开始的。

假如我们需要爬取公告管理的所有接口，可以在puppeteer的函数中执行正则去模糊匹配到对应的html切片，再将切片合并返回。

注意：爬取非SSR（服务端渲染）的页面时，puppeteer需要设置合适的等待时间，或者监听标志性的元素出现，否则无法爬取到想要的内容。

格式化html

nodejs中还有一个常用的web页面处理库就是cheerio了。虽然在爬取页面的功能上没有puppeteer强大，但是可以用它来对html进行各种格式化操作。

为了获取更有效的内容，我们需要使用cheerio过滤掉html的内容，只留下文本。

文本切割 + 向量存储

即使只保留有效内容，爬取到的文本内容，还是可能会超过 4k 的token限制。所以我们需要调用langchain的api对文本进行切割 + 向量存储，然后就可以在【搜寻问答链】中提取想要的信息。

创建RetrievalQAChain（搜寻问答链）

这里会涉及到一个重要的参数verbose，它可以把AI调用链的流程和思考过程输出到控制台，我们可以根据这些信息更好地调整prompt，从而得到更准确地输出。

比如下面我们的搜索信息是：

汇总以下信息:

1.文本中所有接口的地址

2.接口对应的请求参数

得到的对应结果是：

'The API addresses are: \n' +'1. get/api/v1/announce/announce_list\n' +'2. post/api/v1/announce/delete_announce\n' +'3. post/api/v1/announce/update_announce\n' +'4. post/api/v1/announce/add_announce\n' +'\n' +'The request parameters are: \n' +'1. get/api/v1/announce/announce_list: announce_content, start_timestring, end_timestring, page, page_size\n' +'2. post/api/v1/announce/delete_announce: id\n' +'3. post/api/v1/announce/update_announce: id, announce_type, is_top, announce_content, publish_time\n' +'4. post/api/v1/announce/add_announce: announce_type, is_top, announce_content, publish_time'

可以发现，我们需要的信息已经全部汇总出来了。但是输出格式不太理想：

描述不是中文
不是正常的代码，无法运行

我们可以使用langchain结合prompt初始化LLM链，将输出再次格式化。

prompt

一个好的prompt应该包含以下部分，以确保清晰地传达任务要求和期望的输出：

主题或任务描述

明确说明prompt的主题或任务是什么，让用户知道需要做什么。例如："中文翻译成英文"、"生成对话"等。

指令（Instructions）

提供明确的指导，告诉用户如何完成任务。指令应该简洁明了，避免模糊或歧义的表述。

示例（Examples）

提供一些示例，展示期望的输入和输出样式。示例有助于用户理解任务和输出的要求。

限制（Constraints）

确定任务的限制和条件。这些限制可能涉及输出的长度、格式、语言等方面。限制有助于约束任务，使得用户提供的回答更符合预期。

结尾（End of Prompt）

用特定标志或文本明确指示prompt的结束，确保用户知道何时任务完成。

上下文（Context）

这项并不是必须的，如果需要根据上下文来输出结果，必须把上下文放在开头或结尾，否则输出答案的质量会差很多。

这里可以参考我写的其中一个模板：

Context:<article>{formatContent}</article>Prompt: generate ts code by interfaceInstructions:You are a skilled front-end engineer, proficient in TypeScript.Based on the given context, generate the corresponding code.Ignore the "*" symbol in the context.Examples:Input: /api/v1/[xxx]Output: {listRequest}Input: /api/v1/[xxx]Output: {updateRequest}Input: /api/v1/[xxx]Output: {listResponse}Input: /api/v1/[xxx]Output: {listResponse}Input: /api/v1/[xxx]Output: {deleteResponse}Constraints:Do not generate any content other than the code.Do not generate duplicate [typescript interface].Task:Generate TypeScript declarations and corresponding request interfaces.End of Prompt

最终输出

调用LLM后，AI模型会按我的prompt去生成以下代码：

typing.ts

export interface AddDictionaryRequest {  name?: string;  key?: string;  val?: string;}
export interface AddDictionaryResponse {  id?: number;}
export interface DeleteDictionaryRequest {  ids: number[];}
export interface DeleteDictionaryResponse {  object: {};}
export interface EditDictionaryRequest {  id: number;  name?: string;  key?: string;  val?: string;}
export interface EditDictionaryResponse {  id?: number;}
export interface GetDictionaryRequest {  id: number;}
export interface GetDictionaryResponse {  config?: {    id?: number;    name?: string;    key?: string;    val?: string;    created_at?: string;    updated_at?: string;  };}
export interface ListDictionaryRequest {  key?: string;  name?: string;  page?: number;  page_size?: number;}
export interface ListDictionaryResponse {  headers?: {    label?: string;    key?: string;    sort?: boolean;    tips?: string;    merge?: boolean;    mergeField?: string;  }[];  rows?: {};  sums?: {};  counts?: number;}

index.ts

import type {  AddDictionaryRequest,  AddDictionaryResponse,  DeleteDictionaryRequest,  DeleteDictionaryResponse,  EditDictionaryRequest,  EditDictionaryResponse,  GetDictionaryRequest,  GetDictionaryResponse,  ListDictionaryRequest,  ListDictionaryResponse,} from "./typing.ts";// utilsimport request from "@/utils/request";/** * 添加字典信息 */export async function addDictionary_api(  params: AddDictionaryRequest): Promise<AddDictionaryResponse> {  return request.post("/api/waldon/test-dictionary/add", params);}
/** * 删除字典信息 */export async function deleteDictionary_api(  params: DeleteDictionaryRequest): Promise<DeleteDictionaryResponse> {  return request.post("/api/waldon/test-dictionary/delete", params);}
/** * 修改字典信息 */export async function editDictionary_api(  params: EditDictionaryRequest): Promise<EditDictionaryResponse> {  return request.post("/api/waldon/test-dictionary/edit", params);}
/** * 获取字典信息 */export async function getDictionary_api(  params: GetDictionaryRequest): Promise<GetDictionaryResponse> {  return request.get("/api/waldon/test-dictionary/get", params);}
/** * 字典列表 */export async function listDictionary_api(  params: ListDictionaryRequest): Promise<ListDictionaryResponse> {  return request.get("/api/waldon/test-dictionary/list", params);}