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

// 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

[{"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"}]

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>;

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

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="请输入搜索内容" @search="search" />
<Table :loading="loading" :dataSource="showItems" :columns="columns" />

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);
  },
});

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;
};

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,
    };
  });

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}`
  );