前言：聊聊为什么要在浏览器里搞RAG

兄弟们，先说一句，今天咱们不聊服务器租的那套老套路。

直接把大模型搬到前端，省流量、免备案、还超酷。

说实话，这玩意儿听起来像科幻，哈哈，但其实Yi经Ke以落地了。

先把Node或者pnpm装好，别跟我说没有环境，我这儿有个小技巧。

然后跑个npm i @mlc-ai/web-llm @langchain/core @langchain/community。

不对不对，应该是npm i mlc-web-llm langchain这种简写也行。

我们选的模型是Qwen1.5‑0.5B，体积不大，上手快。

代码里先实例化一个WebLLM对象：

import { WebLLM } from "mlc-web-llm";
const llm = await WebLLM.create({
    model: "qwen1_5_0_5b",
    wasmPath: "./wasm"
});

别忘了把wasm文件放到public目录，要不然加载会报错。

这里用原生fetch配合DOMParser，省去后端爬虫的麻烦。

async function fetchPage {
    const resp = await fetch;
    const html = await resp.text;
    const parser = new DOMParser;
    const doc = parser.parseFromString;
    // 只要正文区域
    const main = doc.querySelector || doc.body;
    return main.innerText.trim;
}

Ru果找不到#main-content，那就直接返回body的文字——咱们不挑剔。

在浏览器里直接算向量？没错，用MiniLM的tiny版本就行。

import { MiniLMEmbedding } from "mlc-web-llm";
const embedder = await MiniLMEmbedding.create;
function embed {
    return embedder.encode;
}

每段文本切成200字符左右的小块，再分别算向量，这样检索geng精准。

我们用一个数组来存向量和对应文本：

let vectorStore = ;
function addToStore {
    const vec = embed;
    vectorStore.push;
}

检索时遍历计算余弦相似度——虽然不是Zui优，但够用了。

async function ragQuery {
    // 1. 把问题转成向量
    const qVec = embed;
    // 2. 找Zui近的几段文档
    const topK = vectorStore
        .map(item => ({
            text: item.text,
            score: cosine
        }))
        .sort => b.score - a.score)
        .slice;
    // 3. 拼接上下文
    const context = topK.map.join;
    // 4. 调用大模型生成答案
    const prompt = `下面是一段检索到的内容：
${context}
请根据这些信息回答以下问题：
${question}
Ru果不知道，就说“不知道”。`;
    const answer = await llm.generate;
    return answer;
}

function cosine{
   let dot=0, normA=0, normB=0;
   for{
       dot+=a*b;
       normA+=a*a;
       normB+=b*b;
   }
   return dot/Math.sqrt;
}

HTML里随手弄个, , 和一个

显示答案。

加载网页 提问

loadAndIndex

async function loadAndIndex{
   const url=document.getElementById.value;
   const text=await fetchPage;
   // 简单切块
   for{
       addToStore);
   }
   document.getElementById.innerText='✅ 页面Yi索引！';
}

ask

async function ask{
   const q=document.getElementById.value;
   const ans=await ragQuery;
   document.getElementById.innerText=ans;
}

- 有时候fetch跨域会被拦，你Ke以先用CORS代理，或者自己部署一个简单的proxy服务。哈哈，这点我之前踩过坑。

- 向量维度不匹配会报错，不要忘了所有embeddou使用同一个模型实例。

- 浏览器内存有限，大文件要分批处理，否则卡死。这个时候我会建议把文档拆成章节再逐步加载。

A：百度爬虫主要kan服务器返回的HTML结构和robots.txt配置。Ru果你的网站全是纯JS渲染，而没有SSR或预渲染，那么爬虫kan到的可Neng只有一堆空白的