前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索

本文涉及的产品
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 1个月
OpenSearch LLM智能问答版免费试用套餐,存储1GB首月+计算资源100CU
简介: 本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。

 本文将之前的文章,实现一个场景的实战应用,包含代码等内容。利用纯前端实现增强的列表搜索,抛弃字符串匹配,目标是使用番茄关键字可以搜索到西红柿

1 准备工作

1.1 了解llm和web开发

web端的ai开发参考 前端大模型入门:使用Transformers.js手搓纯网页版RAG(二)前端大模型入门:使用Transformers.js实现纯网页版RAG(一)

前端框架使用的vue3+antdv,最好是懂相关代码,读懂即可。

1.2 开发环境和工具

  • node20+
  • vite

1.3 工程准备

// init.sh
// 创建vite vue-ts项目
yarn create vite test-ra-list --template vue-ts
// 进入工程目录
cd test-ra-list
// 安装依赖
yarn add ant-design-vue @xenova/transformers

image.gif

1.4 本地模型目录准备

在public下面创建一个models目录,然后创建各个模型的子目录,以便后续将模型文件放入其中

image.gif

1.5 下载模型文件

在hf-mirror找到想用模型,本文用到的在Xenova/bge-base-zh-v1.5 at main (hf-mirror.com),点击各个文件的下载图标,然后存储在对应目录下

image.gif 编辑

下载模型文件,默认是quantized,除非你配置加载高精模型,也可以三个都下载,记得在1.4模型名的目录下新建一个onnx目录

image.gif 编辑

最后public目录如下图所示

image.gif

1.6  创建模拟数据

在public目录下创建一个data.json

[{"name":"PC1","id":"5F62AD98-9BAF-0B46-A506-D8EF3749D325"},{"name":"PC2","id":"58CE02BF-6F95-3F4C-9BF6-450E355BBD94"},{"name":"西红柿","id":"8FF8BC68-6BF3-0A4C-AD87-668C1CED3234"},{"name":"aaa11","id":"E6B61EFC-9730-4945-84C8-0C1FCF068AB6"},{"name":"地瓜-0","id":"3B26D363-6720-B241-AB1A-AE7C3BB1A989"},{"name":"地瓜-1","id":"A79DE23B-6A53-354A-90EA-3BAF90E43629"},{"name":"西红柿-10","id":"E3C781BF-F6ED-364E-923C-B9CA3C38BEA1"},{"name":"洋芋-100","id":"81E42720-3C18-9C4F-A302-D86C6AF51989"},{"name":"西红柿-101","id":"A98E902D-3ECB-A748-A3E6-2F4C2D36FD55"},{"name":"洋芋-102","id":"6B02AC77-55D4-7C40-98A3-383D52D72929"},{"name":"番茄-103","id":"D6E45494-BD47-5848-8492-287437155A3D"},{"name":"马铃薯-104","id":"7C4CB80B-6C0D-EC4A-A5BD-52E65D8EC2FF"},{"name":"土豆-104","id":"1C3829C0-8356-024E-AF90-9BC456A78E29"},{"name":"马铃薯-105","id":"5560C41C-46B2-BC44-9141-92E83B62D5C8"},{"name":"地瓜-106","id":"20598CEC-5E31-3F49-A578-A6F026018CC0"},{"name":"红薯-107","id":"E1061811-0886-0840-B387-A1321DA5212D"},{"name":"马铃薯-108","id":"D302EF74-0402-1F43-A4FD-FBF2CE852B5E"},{"name":"红薯-109","id":"608D7A1C-C265-9A4B-99D6-A08EBBDD08EF"},{"name":"番茄-11","id":"A19882CE-2B37-D64C-95E2-A8BC769D9A06"},{"name":"洋芋-110","id":"6D80D92B-540B-2A4D-AF2F-A15C8B04EB3F"},{"name":"番茄-111","id":"6F229077-AF25-D241-BEB4-0E53852EAF61"},{"name":"马铃薯-12","id":"A108EDCD-42D0-0B4E-9691-62FB8572ECF8"},{"name":"地瓜-13","id":"FB31B7D1-4CD3-F44C-9ED4-C659EDB58B25"}]

image.gif

2 实现方法

首先分析和分解任务:1 列表呈现数据;2 高级搜索功能

2.1 数据加载和列表数据展示

这部分使用antdv的table可以很快速的展示数据,数据加载就使用fetch即可

type RawInfo = {
  name: string;
  id: string;
};
const loading = ref(false);
const items = ref<RawInfo[]>([]);
onMounted(() => {
  fetch("data.json")
    .then((res) => res.json())
    .then((list) => (items.value = list));
});
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    customRender: (e: { index: number }) => {
      return h("span", {}, e.index + 1);
    },
    width: 84,
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  }
] as ColumnsType<any>;

image.gif

<Table :loading="loading" :dataSource="items" :columns="columns" />

image.gif

2.2 搜索数据显示

为了动态显示搜索结果和原始结果,使用一个searchKey来切换显示的数据源。

const searchKey = ref("");
const showItems = computed(() => {
  return searchKey.value ? result.value : items.value;
});
const search = async (e: string) => {
  searchKey.value = e || "";
  if (!e) {
    return;
  }
  // 待完成搜索
};

image.gif

<InputSearch placeholder="请输入搜索内容" @search="search" />
<Table :loading="loading" :dataSource="showItems" :columns="columns" />

image.gif

2.3 模型参数准备

  • 模型加载路径即为之前创建的public下的/models目录
  • topK表示结果最多显示10个
  • 使用minScore指定最低的相似度
import { cos_sim, env, pipeline } from "@xenova/transformers";
env.remoteHost = "/models/";
const topK = 10;
const minScore = 0.6;
const pipe = pipeline("feature-extraction", "bge-base-zh-v1.5", {
  progress_callback: (d: any) => {
    console.log(d);
  },
});

image.gif

2.4 向量数组构建

深度搜索的核心就是高位空间的相似度(距离)匹配,所以需要将数据全部进行Emebdding

const buildVector = async () => {
  if (!items.value.length) return;
  const list = items.value;
  loading.value = true;
  vectors.length = list.length;
  await nextTick();
  const embedding = await pipe;
  const questions = list.map((item) => item.name);
  const output = (await embedding(questions, {
    pooling: "mean",
    normalize: true,
  })) as any;
  console.log(output);
  questions.forEach((q, i) => {
    vectors[i] = output[i];
  });
  loading.value = false;
};

image.gif

2.5 相似度计算

将关键词/字进行向量化,然后依次计算相似度,而不是使用子字符串/包含关系的匹配。

const embedding = await pipe;
  const [vector] = await embedding([e], {
    pooling: "mean",
    normalize: true,
  });
  if (!vectors.length) {
    await buildVector();
  }
  const scores = vectors.map((q, i) => {
    return {
      score: cos_sim(vector.data, vectors[i].data),
      index: i,
    };
  });

image.gif

2.6 结果筛选

最后,根据匹配度排序,过滤掉相似度过低的,再取相似度最高的topK项

scores.sort((a, b) => b.score - a.score);
  console.log(scores);
  result.value = scores
    .filter((e) => e.score > minScore)
    .slice(0, topK)
    .map((s) => items.value[s.index]);
  console.log(
    `搜索到${result.value.length}条记录:topK=${topK} minScore=${minScore}`
  );

image.gif

3 实际效果

3.1 番茄 - 可搜索到西红柿

image.gif 编辑

3.2 红薯-可搜索到地瓜

image.gif 编辑

4 待改进点

4.1 模型精度

目前使用的是最小的模型,以便于都能体验,效果会有一点差,但整体结果还算理想

4.2 最低相似度和topK控制

这两个参数对结果的影响也不小,实际上我想去掉相似度过滤,而是直接选出topK可能好一点

4.3 嵌入改进 - 非阻塞

目前在初次计算向量组(列表元素向量)是比较耗资源的,会造成页面卡顿,这部分可考虑在worker或者做成单条异步运算,而不是一次性计算出所有条目的嵌入向量



相关文章
|
1月前
|
文字识别 算法 语音技术
基于模型蒸馏的大模型文案生成最佳实践
本文介绍了基于模型蒸馏技术优化大语言模型在文案生成中的应用。针对大模型资源消耗高、部署困难的问题,采用EasyDistill算法框架与PAI产品,通过SFT和DPO算法将知识从大型教师模型迁移至轻量级学生模型,在保证生成质量的同时显著降低计算成本。内容涵盖教师模型部署、训练数据构建及学生模型蒸馏优化全过程,助力企业在资源受限场景下实现高效文案生成,提升用户体验与业务增长。
328 23
|
2月前
|
人工智能 自然语言处理 开发工具
统一多模态 Transformer 架构在跨模态表示学习中的应用与优化
本文介绍统一多模态 Transformer(UMT)在跨模态表示学习中的应用与优化,涵盖模型架构、实现细节与实验效果,探讨其在图文检索、图像生成等任务中的卓越性能。
统一多模态 Transformer 架构在跨模态表示学习中的应用与优化
|
1月前
|
人工智能 JavaScript 测试技术
Cradle:颠覆AI Agent 操作本地软件,AI驱动的通用计算机控制框架,如何让基础模型像人一样操作你的电脑?
Cradle 是由 BAAI‑Agents 团队开源的通用计算机控制(GCC)多模态 AI Agent 框架,具备视觉输入、键鼠操作输出、自主学习与反思能力,可操作各类本地软件及游戏,实现任务自动化与复杂逻辑执行。
174 6
|
18天前
|
机器学习/深度学习 人工智能 JSON
微软rStar2-Agent:新的GRPO-RoC算法让14B模型在复杂推理时超越了前沿大模型
Microsoft Research最新推出的rStar2-Agent在AIME24数学基准测试中以80.6%的准确率超越超大规模模型DeepSeek-R1,展现“思考更聪明”而非“更长”的AI推理新方向。
90 8
微软rStar2-Agent:新的GRPO-RoC算法让14B模型在复杂推理时超越了前沿大模型
|
2天前
|
人工智能 自然语言处理 算法
现代AI工具深度解析:从GPT到多模态的技术革命与实战应用
蒋星熠Jaxonic,AI技术探索者,深耕代码生成、多模态AI与提示词工程。分享AI工具架构、实战应用与优化策略,助力开发者提升效率,共赴智能编程新纪元。
19 4
|
13天前
|
机器学习/深度学习 人工智能 测试技术
探索 Qwen2.5-Max 的智能:大规模 MoE 模型的飞跃
Qwen2.5-Max 是通义实验室推出的最先进MoE模型,在推理、知识和代码任务中表现卓越,已在超20万亿token上预训练,并通过SFT和RLHF优化。在多项基准测试中领先,如Arena-Hard达89.4,MMLU-Pro为76.1,性能超越DeepSeek V3、GPT-4o等模型,成为当前最佳开源模型。可通过Qwen Chat和API使用,适用于开发者、研究者及AI爱好者探索前沿AI能力。
95 2
|
1月前
|
数据采集 人工智能 定位技术
分享一个开源的MCP工具使用的AI Agent 支持常用的AI搜索/地图/金融/浏览器等工具
介绍一个开源可用的 MCP Tool Use 通用工具使用的 AI Agent (GitHub: https://github.com/AI-Agent-Hub/mcp-marketplace ,Web App https://agent.deepnlp.org/agent/mcp_tool_use,支持大模型从Open MCP Marketplace (http://deepnlp.org/store/ai-agent/mcp-server) 的1w+ 的 MCP Server的描述和 Tool Schema 里面,根据用户问题 query 和 工具 Tool描述的 相关性,选择出来可以满足