前端大模型入门:使用Transformers.js实现纯网页版RAG(一)

news/2024/11/17 7:31:38/

我将使用两篇文章的篇幅,教大家如何实现一个在网页中运行的RAG系统。本文将其前一半功能:深度搜索。

通过这篇文章,你可以了解如何在网页中利用模型实现文本相似度计算、问答匹配功能,所有的推理都在浏览器端本地执行,无需依赖服务器。

RAG搜索与传统搜索的不同之处在于:它不再是关键字匹配,而且基于高纬向量(768至数千维)空间的距离,所以匹配时不需要全词命中等。对一些说法不一样但意思一样的搜索有奇效,例如RAG搜索土豆可以得出马铃薯、洋芋相关的结果,因为它们的高纬空间距离很近

1 测试页面概述

以下是我创建的一个简单测试的HTML页面,核心功能包括用户输入问题,系统会基于预定义的问答库进行向量检索,并返回最相关的问题和答案:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>网页RAG</title></head><body><div id="app"><div><input type="text" id="question" /><button id="search">搜索</button></div><div id="info"></div></div><script type="module">import {pipeline,env,cos_sim,} from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/transformers.min.js";env.remoteHost = "https://hf-mirror.com";</script></body>
</html>

2 核心功能解析

2.1 知识库

我们首先定义了一组预先设置好的问题和对应的正确答案,分别存储在questionsground_truth数组中。这个系统的工作原理是:用户输入的问题将与这些已知问题进行相似度匹配,找到最相似的问题,然后返回对应的答案。

      const questions = ["洛基在征服地球的尝试中使用了什么神秘的物体?","复仇者联盟的哪两名成员创造了奥创?","灭霸如何实现了他在宇宙中消灭一半生命的计划?","复仇者联盟用什么方法扭转了灭霸的行动?","复仇者联盟的哪位成员牺牲了自己来打败灭霸?",];const ground_truth = ["六角宝","托尼·斯塔克(钢铁侠)和布鲁斯·班纳(绿巨人浩克)。","通过使用六颗无限宝石","通过时间旅行收集宝石。","托尼·斯塔克(钢铁侠)",];

2.2 初始化配置-向量库+查询管道

      const verctorStore = [];const task = "feature-extraction";const model = "Xenova/bge-base-zh-v1.5";const infoEl = document.getElementById("info");const pipe = pipeline(task, model, {progress_callback: (d) => {infoEl.innerHTML = JSON.stringify(d);},});

transformers.js我已经在上一篇文章前端大模型入门:Transformer.js 和 Xenova进行了介绍,此次使用了Xenova/bge-base-zh-v1.5模型进行特征提取-词嵌入。

2.3 向量存储与构建

为了提高性能,我们在用户第一次查询时,将所有预定义问题的特征向量一次性生成并存储在verctorStore中。后续查询时,直接基于这些预生成的向量进行相似度计算。

      const buildVector = async () => {if (!verctorStore.length) {const embedding = await pipe;const output = await embedding(questions, {pooling: "mean",normalize: true,});questions.forEach((q, i) => {verctorStore[i] = output[i];});}};

2.4 相似度计算与答案匹配

当用户输入问题时,系统将问题向量化,并与存储的预定义问题向量进行余弦相似度(cosine similarity)计算。最后,返回得分最高的问题及其对应的答案。

      const search = async () => {const embedding = await pipe;const question = document.getElementById("question").value;const [qVector] = await embedding([question], {pooling: "mean",normalize: true,});await buildVector();const scores = verctorStore.map((q, i) => {return {score: cos_sim(qVector.data, verctorStore[i].data),question: questions[i],index: i,};});const max = scores.reduce((a, b) => (a.score > b.score ? a : b));infoEl.innerHTML = JSON.stringify(`最相似问题:${max.question} - 答案:${ground_truth[max.index]}`);};document.querySelector("#search").onclick = search;

2.5 效果测试

3 网页端 RAG 应用场景

在浏览器内直接运行基于 RAG,能够大幅提高用户的交互体验,我们可以在用户的浏览器中实时执行自然语言处理任务,而不必依赖外部 API 或服务器。以下是一些适合网页端 RAG 模型应用的场景:

3.1 列表搜索和过滤

在许多现代网页应用中,用户往往需要在庞大的列表数据中找到自己感兴趣的条目。传统的搜索方式可能是基于关键词的匹配,但这对于一些复杂查询或上下文相关的搜索可能效果不佳。通过在浏览器中使用 RAG 模型,用户可以直接输入自然语言问题,系统可以检索并生成更符合语义的答案。例如:

  • 电商平台商品列表搜索:用户可以用自然语言提出复杂查询,比如“价格低于100美元的蓝色连衣裙”,RAG 模型能够根据查询生成符合条件的商品列表,并准确筛选出符合条件的商品。
  • 文件或文章列表的智能检索:在教育或工作环境中,用户可能需要从大量文件中找到特定信息,例如“找到包含人工智能技术应用的文章”。RAG 可以快速检索列表并为用户生成最相关的结果。

3.2 网页功能搜索和导航

对于复杂的网页或应用,用户在寻找某一特定功能时,可能很难记住具体的按钮位置或操作流程。通过使用 RAG,用户可以直接在搜索框中输入自然语言命令,模型会根据查询生成详细的功能位置或直接执行相应操作。例如:

  • 设置页面的功能搜索:用户可以在设置页面内输入“如何更改密码”或“开启暗黑模式”,RAG 模型可以快速定位到相关设置选项,甚至生成具体的操作步骤或自动跳转到对应功能页面。
  • 复杂 SaaS 系统的导航:在企业级 SaaS 系统中,功能模块繁多且设置复杂。用户可以通过自然语言查询,快速找到如何执行某个任务,例如“如何导出销售报告”或“查看上月的财务报表”,提高用户的操作效率。

3.3 文档或产品说明的智能查询

对于一些技术文档、产品说明书或者服务条款等长篇文字内容,用户通常需要花费较多时间来查找具体的信息。而通过在网页端集成 RAG 模型,用户可以直接提出问题,模型会从相关文档中检索出最相关的内容并生成精确的回答。例如:

  • 技术文档的问答:在开发者平台或在线帮助文档中,用户可以输入自然语言问题,如“如何在项目中集成 API”,RAG 模型可以立即生成与该问题相关的文档片段,并提供详细的操作指引。
  • 产品说明的快速解答:对于电子产品或软件产品的用户,可能会有具体功能或使用上的疑问。用户可以直接在产品页面输入问题,如“如何启用手写识别功能”,RAG 可以从产品说明书中检索并生成详细的使用说明。

3.4 智能表单填写助手

在许多应用场景中,用户需要填写复杂的表单,如申请表、注册表或调查问卷。通过 RAG 模型,可以为用户提供智能化的表单填写建议。用户可以输入自然语言描述,模型生成相应的表单字段内容,自动填充或提供填写建议。例如:

  • 在线申请表单:用户可以输入“我住在纽约,我的邮政编码是10001”,RAG 模型可以自动填写地址相关的表单字段,减少用户的手动操作。
  • 复杂调查问卷:在调查问卷中,RAG 模型可以根据用户提供的信息生成智能化建议,如“我想投资科技领域”,模型可以根据此生成相关的问卷选项或建议答案。

4 小结

通过阅读本文,相信你已经学会在浏览器端实现一个深度搜索功能,让用户不必严格按照某些格式等输入内容便能实现搜索、过滤等,尤其是文本多,大列表的场景。接下来的一章,我将会教你如何实现后部分的生成功能。

代码比较粗糙,但可以跑起来的,希望看完的你能够下载页面,自己修改一些内容参数等跑一跑哈~


http://www.ppmy.cn/news/1531465.html

相关文章

Paddlets时间序列集成模型回测实战:MLPRegressor、NHiTSModel与RNNBlockRegressor

好的,我们继续深入理解代码的每个部分。以下是每个主要模块的详细解释: 1. 导入模块和库 import json import os import glob import pandas as pd from tqdm import tqdm from paddlets.datasets import TSDataset from paddlets.transform import StandardScaler from pa…

推荐3个AI论文、AI查重、AI降重工具

什么是AI论文、AI查重、AI降重工具&#xff1f; AI论文 AI论文指的是以人工智能&#xff08;AI&#xff09;相关主题为研究对象的学术论文。这类论文通常包含以下内容&#xff1a; 研究问题&#xff1a;针对某个特定的AI问题或领域的研究。方法&#xff1a;介绍用于解决问题…

嵌入式的核心能力-Debug调试能力(一)

一、栈回溯 引入&#xff1a;调试程序时&#xff0c;经常会发生这类错误&#xff1a; 读写某个地址&#xff0c;程序报错&#xff1b;调用某个空函数&#xff0c;导致程序报错等等。 解决方法是&#xff0c;可以利用异常处理函数去打印出“发生错误瞬间”的所有寄存器地址 …

828华为云征文|部署漫画杂志媒体服务器 Komga

828华为云征文&#xff5c;部署漫画杂志媒体服务器 Komga 一、Flexus云服务器X实例介绍二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置2.4 Docker 环境搭建 三、Flexus云服务器X实例部署 Komga3.1 Komga 介绍3.2 Komga 部署3.3 Komga 使用 四、总结 一、…

获取交易软件【热度排行数据】2024年9月26日,一股淡淡的牛味

2024年9月26日&#xff0c;一股淡淡的牛味 概念热度的排行榜和行业热度排行榜。 像是这种类型的数据&#xff0c;能不能加到我们的量化模型里面&#xff0c;作为选股和下单指令的判断条件之一呢&#xff1f; 下面图片&#xff0c;有很多数据接口&#xff0c;可以1对1帮助您解…

【解密 Kotlin 扩展函数】扩展函数的导入和使用(十七)

导读大纲 1.1.1 将 joinToString 函数作为 String 类型的扩展函数1.1.2 导入和使用扩展函数 1.1.1 将 joinToString 函数作为 String 类型的扩展函数 在之前的教程中, 我们已经基本实现 joinToString 函数 自定义joinToString 函数–传送门<1> 将原本第一个参数collecti…

【资源一号04A卫星(中巴地球资源卫星04A星)】

资源一号04A卫星&#xff08;中巴地球资源卫星04A星&#xff09; 资源一号04A卫星&#xff0c;全称为中巴地球资源卫星04A星&#xff08;CBERS-04A&#xff09;&#xff0c;是中国与巴西两国合作研制的第六颗地球资源卫星。以下是对该卫星的详细介绍&#xff1a; 一、基本信…

从0-1搭建海外社媒矩阵,详细方案深度拆解

做买卖&#xff0c;好的产品质量固然是关键&#xff0c;但如何让更多的消费者知道&#xff1f;营销推广是必不可少的。在互联网时代&#xff0c;通过社交媒体推广已经成为跨境电商卖家常用的广告手段。 如何通过海外社交媒体矩阵扩大品牌影响力&#xff0c;实现营销目标&#…