关于前端:如何无需编码便可为您的网站构建AI聊天机器人

背景

聊天机器人正在变成咱们不可或缺的工具，扭转了现在的工作形式。甚至有人开玩笑说 2023 Web 开发者做的 HelloWorld 我的项目不再是 TodoList了而是 AI 聊天机器人，然而它还是被认为具备很高的开发门槛，被认为只有开发者能力构建出利用。但本文将教你如何无需编写任何代码创立本人的聊天机器人，在几分钟内训练任何网站数据，提供的思路和办法也实用于解决其余数据和其余场景。

LangChain 介绍

随着 OpenAI 的公布，大型语言模型 (Large Language Model即 LLM) 正在成为一种变革性技术而席卷了世界，使开发人员可能构建他们以前无奈构建的应用程序，然而独自应用这些 LLM 往往不足以创立一个真正弱小的应用程序，然而当能够将它们与其余计算或常识起源相结合时，就有真的价值了。LangChain 旨在帮忙开发人员充分利用 LLM 的全副后劲，用于宽泛的应用程序。LangChain 围绕将不同组件“链接”在一起的外围概念构建，简化了与 GPT-3、GPT-4 等 LLM 单干的过程，使得咱们能够轻松实现聊天机器人、生成式问答、文本摘要等性能。

在这里你能够看到目前 LangChain 曾经集成的模块

快乐的是，LangChain不仅有 python 版本，还提供了 JS/TS 版本。

Flowise介绍

Flowise 是基于🦜️🔗 LangChainJS构建的可收费供商业和集体应用的收费开源我的项目，它有着一个十分易用的图形用户界面，旨在让人们轻松地可视化和构建 LLM 应用程序，也就是 nocode 开发 LLM 利用。相似的工具比这个还早的有 langflow，然而因为Flowise 它有着难看的 UI 界面以及这个我的项目就是 js 开发的，因而我抉择Flowise。举个例子，上面的应用程序展现了一个根本的翻译机器人，同时也演示了如何格式化提醒值，而实现上面这个你只须要简略拖拽就能够实现。

而本文要构建网站聊天机器人，实质上和很常见的与已有 pdf 或者 doc 文档对话原理是统一的，这里援用一篇文章的示例图片

实质上原理大抵是：

• 将源文件切成多个文本片段，创立Embeddings 而后存到向量数据库
• 将用户发问也创立Embeddings，将它和上一步创立好的向量比照，通过相近搜寻找到最相干的文本片段，它的特点是能发现文本相关性，比方汽车和公路
• 把问题和历史聊天还有相干片段一起发送给 **LLM** 它便能从中总结出答复

自部署

应用 Flowise 很简略，留神：node要求是最新版18

npm install -g flowise
npx flowise start

执行下面命令后，关上 http://localhost:3000 就能够应用了，然而如果是生产环境应用，就须要本人部署一份了，官网文档提供了多种部署形式，包含 Render、Railway、Replit 等云服务商各自部署形式，对于无服务器能够尝试下。

如果是应用云服务商部署，因为我的项目应用了 SQLite，所以须要查阅其文档理解长久化数据的形式，防止服务在重启时数据局部数据失落，同时向量数据库也举荐也应用云服务商的比方[Supabase pgvecto](https://supabase.com/docs/guides/database/extensions/pgvector)r 或者[pinecone](https://www.pinecone.io/)

因为我有腾讯云服务器，并且下面提到的 suapabase 与pinecone会在你一周没有应用或者说是没有申请调用时，会敞开或者或删除你数据库，所以这里我间接应用 docker 本人部署，首先 clone 代码

git clone https://github.com/FlowiseAI/Flowise.git

进入 docker 目录，创立 .env 文件，并填入上面环境变量，其中 port 是服务裸露端口，用户名和明码是为网页拜访增加认证

PORT=3000
FLOWISE_USERNAME=admin
FLOWISE_PASSWORD= 你的明码

而后在这个 docker 目录执行上面命令启动，我的是 docker 最新版，因而和文档有点小区别

docker compose up -d

启动后就能够通过 ip:3000 拜访了，参考我之前的文章，通过 Nginx Proxy Manage 工具，能够轻松为该服务调配一个可拜访域名，这里我设置好后，就能够通过域名 http://flowise.codefe.top/ 来拜访了。

流程图

左侧抉择Chatflows，点击新增流程，在画布左侧增加节点。流程须要 6 个节点，别离找到每一个并拖放到画布上，请参阅上面的残缺画布，他们的作用别离是：

• RecursiveCharacterTextSplitter：文本拆分，用于将咱们收集的文本数据合成为小块，这些小块稍后将提供给咱们的聊天机器人以帮忙其正确答复问题
• Cheerio Web Scrapper：此节点用于读取所选网站中的所有文本。填写您要用作训练数据的 URL。在本教程中，我将应用我的博客地址 https://blog.codefe.top/，如果您想浏览所有页面而不仅仅是主页面，请单击附加参数，而后抉择“相干链接的网页内容”，将链接限度更改为容许的最大页面数。因为OpenAI API 按应用的数据量付费。
• OpenAI Embeddings：Embeddings是一种将单词或句子转换为数学示意的办法，AI 工具能够通过它进行自然语言解决工作的搜寻和应用。
• Faiss Upsert Document: Faiss 是 facebook 开源的向量数据库，这里是将下面Embeddings 后的向量数据存储，后续会依据发问内容从中最近邻搜寻到最匹配的内容
• ChatOpenAI：ChatGPT 语言模型，类似的还有 Azure 对话模型。
• Conversational Retriever QA Chain：这个能够基于已有内容和历史聊天记录进行对话

将下面模块依据各自的输入输出关系通过连接线链接起来，其中 OpenAI Embeddings 和OpenAI对话模型都依赖OpenAI API 密钥，须要正确填写，右上角保留并为此流程抉择一个名称。

💡 值得注意的是，Flowise集成好了 LangChain 很多 loader，比方confluence、pdf、docx、folder with files、github、figma、json 等多种数据格式和数据源解决，根本能够满足各种场景了。

调试

超时

测试运行时，第一个报错就是 504 超时

起因是我的机器在广州，所以间接拜访 Openai Api 是拜访不通的，因而这里须要设置一个代理地址，搭建代理拜访形式很多，这里不在赘述，我之前是通过 Cloudflare Worker 来代理的，比方我的代理地址是 https://wfyapi.ink/v1，将这个地址填写到 OpenAI Embeddings 和ChatOpenAI这两处用到 api 的节点，点击节点的 Additional Parameters 并填入 BasePath 输入框，如下图所示。

设置好后保留重试，然而并不能很好地检索到内容答复，如下图，查看其匹配到的原内容，能够看到，宰割后的内容有大量的无关信息或者说是未经清理的脏数据，这个起因是是这些文本是通过 Notion Api 返回的，原 Notion 文本被转换成了特定的构造，并且为了标识每个块是加粗还是斜体格局，也加了大量的字段，这样就导致了下图中的文本屡次宰割、内容不连贯的问题，因而无奈总结。

晓得问题所在，同时文档在 Web Loader 章节中有一个 Notion Database Loader 可用于从 Notion 页面和数据库加载文档，同时博客内容的数据源也是来自 Notion 数据库，因而这里应用 Notion Database Loader 更适合。

Notion Database Loader

在画布中拖入 Notion Database Loader 替换掉Cheerio Web Scrapper 依照指引如下设置：

1. 获取 Notion Database Id

   我的 Notion 页面地址为 https://wangfengyuan.notion.site/3fdac18030394399ae73a019054ce28f?v=3e95b92e5aea4f9abc999ef7c039690a&pvs=4，那么 3fdac18030394399ae73a019054ce28f 就是这个 database id

2. 获取 Notion Integration Token 参考 Notion 文档生成一个

3. 关联 Token

   而后在第一步页面设置中，点击 Connections 绑定第二步申请的 token

当咱们发问：prisma 有哪些劣势时，能够看到这时候总结答复的还是挺好的，查看匹配到到源文件也是全副是连贯洁净的文本。

集成到网页

点击右上角代码图标，能够看到它提供了间接嵌入你网站的办法，并且能够通过下方 Chat Config 笼罩默认参数来定制局部展现。

同时也提供了 API 的调用形式，那么你能够联合本人场景，赋予了更高的自由度。

然而从它的 github 上能够找到其实有一个对应的 [React 版本的 npm 包](https://github.com/FlowiseAI/FlowiseEmbedReact)的

pnpm install flowise-embed flowise-embed-react

import {BubbleChat} from "flowise-embed-react";

<BubbleChat
  chatflowid="eddfac63-bcc5-4c3b-ab68-e1eaa2f8c5e2"
  apiHost="https://flowise.codefe.top"
/>

而后就胜利的集成到了博客网页，然而当再次发问时，如下图

同样的问题，之前答复始终是用的文章的中文，然而集成后答复被转换成了英文的，也不晓得是为啥，而后这里我的方法是，在预置的 prompt 前面加一句让其用中文答复，如下图：

批改后就达到了与之前画布测试差不多统一的成果，你能够在这体验。

训练和应用独立

最好的生产实践是应用两个流程。一个用于训练机器人，另一个用于应用机器人，这样就能够屡次运行训练局部。下面的流程，应用的是 **Faiss Upsert Document**，是将向量插入向量数据库，所以这其实是用来训练数据的，这一步无需每次都执行，这样也消耗tokens，因而咱们能够再新建一个chatflow 并将 **Faiss Upsert Document** 替换为 **Faiss Load Existing Index** 节点，并填写设置信息。如下图，就从已有的向量数据库执行查问就行，在应用时就用这个流程。

最初将文章中的几种 FlowChat 流程图对应的文件贴一下地址，须要的能够间接点击上面链接导入应用

• 联合 Notion Database Loader 和Faiss Upset Document 训练数据
• 应用Faiss Load Existing Index 应用已有数据

总结

本文介绍了无需编写任何代码仅靠拖拽便可轻松构建 AI 利用的 Flowise 这一弱小工具的部署和应用形式，并以本人博客网站为例，教大家如何在几分钟内训练网站或者文档数据，创立本人的网页聊天机器人。

参考

• Use ChatGPT to Chat & Query with Your Own Files
• 向量数据库技术鉴赏

本文由 mdnice 多平台公布