帝国cms添加网站地图,网站的维护怎么做,平面设计可以自学吗,博物馆建设网站的目的及功能本文将之前的文章#xff0c;实现一个场景的实战应用#xff0c;包含代码等内容。利用纯前端实现增强的列表搜索#xff0c;抛弃字符串匹配#xff0c;目标是使用番茄关键字可以搜索到西红柿 1 准备工作
1.1 了解llm和web开发
web端的ai开发参考 前端大模型入门#xff… 本文将之前的文章实现一个场景的实战应用包含代码等内容。利用纯前端实现增强的列表搜索抛弃字符串匹配目标是使用番茄关键字可以搜索到西红柿 1 准备工作
1.1 了解llm和web开发
web端的ai开发参考 前端大模型入门使用Transformers.js手搓纯网页版RAG二前端大模型入门使用Transformers.js实现纯网页版RAG一
前端框架使用的vue3antdv最好是懂相关代码读懂即可。
1.2 开发环境和工具
node20vite
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
1.4 本地模型目录准备
在public下面创建一个models目录然后创建各个模型的子目录以便后续将模型文件放入其中 1.5 下载模型文件
在hf-mirror找到想用模型本文用到的在Xenova/bge-base-zh-v1.5 at main (hf-mirror.com)点击各个文件的下载图标然后存储在对应目录下 下载模型文件默认是quantized除非你配置加载高精模型也可以三个都下载记得在1.4模型名的目录下新建一个onnx目录 最后public目录如下图所示 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}]2 实现方法
首先分析和分解任务1 列表呈现数据2 高级搜索功能
2.1 数据加载和列表数据展示
这部分使用antdv的table可以很快速的展示数据数据加载就使用fetch即可
type RawInfo {name: string;id: string;
};
const loading ref(false);
const items refRawInfo[]([]);
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 ColumnsTypeany;
Table :loadingloading :dataSourceitems :columnscolumns /
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;}// 待完成搜索
};
InputSearch placeholder请输入搜索内容 searchsearch /
Table :loadingloading :dataSourceshowItems :columnscolumns / 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);},
});
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;
};
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,};});
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}); 3 实际效果
3.1 番茄 - 可搜索到西红柿 3.2 红薯-可搜索到地瓜 4 待改进点 4.1 模型精度
目前使用的是最小的模型以便于都能体验效果会有一点差但整体结果还算理想
4.2 最低相似度和topK控制
这两个参数对结果的影响也不小实际上我想去掉相似度过滤而是直接选出topK可能好一点
4.3 嵌入改进 - 非阻塞
目前在初次计算向量组列表元素向量是比较耗资源的会造成页面卡顿这部分可考虑在worker或者做成单条异步运算而不是一次性计算出所有条目的嵌入向量 项目开源地址欢迎评论、点赞收藏、forkvue3-antdv-transformer-advc-search-demo:使用vue3AndtvTransformer构建的一个增强表格搜索示例使用ML取代字符串匹配搜索 - GitCodehttps://gitcode.com/m0_38015699/vue3-antdv-transformer-advc-search-demo/overview
