1、上传本地文档，并帮助用户汇总和分析内容的工具，例如chatpdf。
2、根据网页内容或视频，汇总分析信息的浏览器插件，例如new bing的Monica。
我们期望参考这些工具的逻辑来实现一个目标：用户只需投喂需求文档或接口文档，便能自动生成可用的前端页面代码。
我们后面做的所有操作都是基于openAI的，需要提前在它官网申请API keys。
每个账号会送 5 美元的额度，对于普通的学习研究也够用一段时间了。
在使用的过程中，发现了chatGPT的AI模型存在的一些问题：
大文本超出openai token数量超出限制。目前openai的模型，基本都是4k、8k、16k的token数量。如果直接调用openai接口，会直接报token超出的错误。
无法联网，获取不到实时的信息。
短期记忆。token超出模型的限制后，ai会记不住之前的设定。
多任务支持较差。如果你让AI一下子做很多事，它会很困惑，而且不知道任务优先级及先后顺序
引用一句非常形象的话：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数据，不涉及到敏感信息）。
接口文档的信息如图中所示（注意圈出的信息，后面代码会对应上）
通过代码返回的结果可以看到，langchain成功加载了word文档且能找到问题对应的信息。
接口地址
字段
header
请求方式(示例中为post请求)
再以axios的写法输出。可以看到输出结果和文档中的各项信息都是完全符合的，且代码是可用的。
看了示例之后，你可能会疑惑：之前不是提到AI模型有token数量的限制吗？怎么这么大一个文档，可以直接读取呢？
可以看到代码里面有 2 个比较关键的调用splitter（文本切割）和vectorStore（向量存储）。比如要使用一个最大token限制为4k的model去读取一个字符串长度为1w的文本，可以通过以下步骤：
在开头提到的chatpdf，也是使用了类似的流程，感兴趣的可以去github看一下chatpdf的源码。
前面也提到，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将代码写入到项目的文件中
这里会涉及到一个重要的参数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需要设置合适的等待时间，或者监听标志性的元素出现，否则无法爬取到想要的内容。
nodejs中还有一个常用的web页面处理库就是cheerio了。虽然在爬取页面的功能上没有puppeteer强大，但是可以用它来对html进行各种格式化操作。
为了获取更有效的内容，我们需要使用cheerio过滤掉html的内容，只留下文本。
即使只保留有效内容，爬取到的文本内容，还是可能会超过 4k 的token限制。所以我们需要调用langchain的api对文本进行切割 + 向量存储，然后就可以在【搜寻问答链】中提取想要的信息。
创建RetrievalQAChain（搜寻问答链）
这里会涉及到一个重要的参数verbose，它可以把AI调用链的流程和思考过程输出到控制台，我们可以根据这些信息更好地调整prompt，从而得到更准确地输出。
'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的结束，确保用户知道何时任务完成。
这项并不是必须的，如果需要根据上下文来输出结果，必须把上下文放在开头或结尾，否则输出答案的质量会差很多。
这里可以参考我写的其中一个模板：
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";import 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);}
和第一次输出的文本进行对比后可以发现，这个prompt中的每一条语句都命中了！
生成的内容只有代码，没有其他多余的描述，而且代码质量非常高！这个代码质量和变量命名可以超越70%的手写代码！
拿到想要的结果后，再使用nodejs的fs api就可以把文本生成到项目的文件中了。
粤ICP备14082021号
免费POC，
零成本试错
