前端大模型入门：使用Transformers.js实现纯网页版RAG（一）

我将使用两篇文章的篇幅，教大家如何实现一个在网页中运行的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 知识库

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

      const questions = [
        "洛基在征服地球的尝试中使用了什么神秘的物体？",
        "复仇者联盟的哪两名成员创造了奥创？",
        "灭霸如何实现了他在宇宙中消灭一半生命的计划？",
        "复仇者联盟用什么方法扭转了灭霸的行动？",
        "复仇者联盟的哪位成员牺牲了自己来打败灭霸？",
      ];


      const ground_truth = [
        "六角宝",
        "托尼·斯塔克（钢铁侠）和布鲁斯·班纳（绿巨人浩克）。",
        "通过使用六颗无限宝石",
        "通过时间旅行收集宝石。",
        "托尼·斯塔克（钢铁侠）",
      ];

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

javascript 复制代码

      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中。后续查询时，直接基于这些预生成的向量进行相似度计算。

javascript 复制代码

      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）计算。最后，返回得分最高的问题及其对应的答案。

javascript 复制代码

      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 小结

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

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