浏览器端AI实战：用Ternlight在网页中运行Embedding模型

浏览器端AI实战：用Ternlight在网页中运行Embedding模型

上一篇文章介绍了Ternlight——一个7MB的浏览器端嵌入模型。今天手把手教你如何在自己的网页中集成它，实现完全离线的语义搜索功能。

### 第一步：引入Ternlight

Ternlight通过npm包发布，支持原生ES模块和CDN两种方式：

npm install ternlight

或者在HTML中直接使用CDN：

<script type="module">
import { TernlightModel } from 'https://cdn.jsdelivr.net/npm/ternlight@0.1.0/dist/ternlight.mjs';
</script>

### 第二步：加载模型并生成嵌入向量

const model = new TernlightModel();

// 加载7MB模型文件（支持384维和768维）
await model.load({ dimension: 384 });

// 生成文本嵌入
const embedding = await model.embed('浏览器端AI正在改变前端开发范式');
console.log(embedding); // Float32Array(384)

### 第三步：构建本地语义搜索

// 准备文档库
const documents = [
  'Ternlight是一个浏览器端嵌入模型',
  'WebAssembly让AI在浏览器中运行成为可能',
  '隐私优先是边缘AI的核心价值主张',
  'GPU服务器并不是所有AI场景的必需品',
];

// 生成文档向量
const docEmbeddings = await Promise.all(
  documents.map(doc => model.embed(doc))
);

// 搜索函数
async function search(query, topK = 3) {
  const queryVec = await model.embed(query);
  const scores = docEmbeddings.map((vec, i) => ({
    index: i,
    score: cosineSimilarity(queryVec, vec),
    text: documents[i],
  }));
  return scores.sort((a, b) => b.score - a.score).slice(0, topK);
}

### 第四步：计算余弦相似度

function cosineSimilarity(a, b) {
  let dot = 0, normA = 0, normB = 0;
  for (let i = 0; i < a.length; i++) {
    dot += a[i] * b[i];
    normA += a[i] * a[i];
    normB += b[i] * b[i];
  }
  return dot / (Math.sqrt(normA) * Math.sqrt(normB));
}

**核心思路**：整个搜索过程完全在浏览器中完成——模型加载、向量生成、相似度计算、结果排序。没有网络请求，没有API调用，用户数据从未离开设备。

这个方案尤其适合：企业内部知识库前端、隐私敏感场景（医疗记录检索、法务文档匹配）、离线PWA应用、边缘设备上的轻量AI功能。

进阶优化方向： 对于大规模文档库，可以将向量持久化到IndexedDB，避免每次刷新都重新计算；结合Service Worker可以实现完全离线的AI搜索体验。

### 为什么选择浏览器端AI？

相比传统的”API调用”模式（如OpenAI Embeddings），浏览器端AI有几个独特优势：

1. 零延迟：模型已在本地，不需要等待网络往返——对于输入联想、实时搜索建议等场景，毫秒级响应至关重要

2. 零成本：没有按token付费的API账单，用户量增长不带来额外开销

3. 完全隐私：用户输入永远不会离开设备，这对医疗、金融、法律等行业是合规刚需

4. 离线可用：在网络不稳定或完全断网环境下仍然正常工作

当然，这种方案也有明显的限制：7MB模型的能力上限远低于云端百亿参数模型，在需要深度语义理解、跨语言检索或复杂推理的场景下，API方案仍然是更好的选择。

最佳实践建议：将浏览器端模型作为”第一层过滤”，处理常见的、对精度要求不极端的查询；当本地模型的置信度低于阈值时，再回退到云端API——这是一种兼顾成本、隐私和精度的混合架构。

### 完整的混合搜索架构示例

将上面的组件组合起来，一个生产级的浏览器端AI搜索系统可以这样设计：

// 混合搜索架构伪代码
async function hybridSearch(query) {
  // 第一层：本地模型快速过滤
  const localResults = await localSearch(query, docEmbeddings);
  
  // 置信度检查
  if (localResults[0].score > 0.85) {
    return { results: localResults, source: 'local' };
  }
  
  // 第二层：云端API精确检索（仅在需要时）
  const cloudResults = await fetch('/api/search', {
    method: 'POST',
    body: JSON.stringify({ query, topResults: localResults }),
  }).then(r => r.json());
  
  return { results: cloudResults, source: 'cloud' };
}

这种混合架构将90%的常见查询保留在客户端，大幅减少API调用成本，同时在用户需要高精度答案时仍然提供云端支持。这个模式适用于绝大多数”轻量AI + 偶尔深度推理”的实际业务场景。

— END —
LC 智趣厅 · 科技与生活的交点
ihygg.cn