纯前端视角下的 RAG:解析、分块、检索、引用溯源一条龙

6 阅读2分钟

目一句话介绍

这是一个面向「本地文档」的 RAG(检索增强生成) 工具:解析 → 分块 → 向量化 → 检索 → 生成回答 → 引用溯源,侧重先把闭环跑通,适合个人整理资料、小团队验证场景、以及对 AI 应用感兴趣的同学练手。


核心能力

  • 多格式文档:TXT / Markdown / PDF / Word,上传后解析文本
  • 分块 + 向量:把长文档切成可检索片段,再入库
  • 混合检索思路:语义 + 关键词辅助(具体策略可按场景调参)
  • 对话问答:支持多轮上下文(便于连续追问)
  • 引用溯源:回答可展开参考片段与来源,便于核对可信度
  • 知识库与会话管理:文档分组、预览、删除;多会话切换
  • 本地持久化:IndexedDB,刷新页面数据仍在

技术选型(为什么这样搭)

  • Vue 3 + Vite:上手快、部署简单
  • Pinia:会话与知识库状态管理
  • IndexedDB(Dexie):前端本地存储向量与文档元数据
  • 线上部署:静态站点 + Serverless(便于隐藏密钥、做简单统计)

实现要点

一次提问的典型链路是:

  1. 用户输入问题
  2. 从向量库检索相关片段(可按文档/标签收窄范围)
  3. 把检索结果拼进上下文,调用大模型生成回答
  4. 前端展示回答,并附带「参考来源」

对我来说,引用溯源不是锦上添花,而是这个类产品能不能「用得放心」的分水岭。


线上 Demo 与访问说明

完整体验入口在这里:

www.ragclaw.help/

你可以按这个最短路径体验:

  1. 打开站点 → 进入主应用
  2. 上传一份你自己的文档(制度、手册、笔记都可以)
  3. 提一个具体问题 → 展开查看引用来源是否对齐你的材料

局限与诚实边界(发文加分项)

纯前端方案非常适合 MVP / Demo / 内部小范围试用,但如果你有这些诉求,就要规划后端能力:

  • 强账号体系与权限审计
  • 按 IP / 用户维度的严格配额与风控
  • 高并发与集中式运营数据

我会在后续文章里拆一版「从前端 MVP 平滑升级到可控生产形态」的路线。


结语 & 互动引导

如果你也想做一个「能演示、能迭代」的 RAG 小工具,可以先从这个 Demo 体验入手:

👉 立即在线体验:RAG 智能知识库

欢迎在评论区聊聊:

  • 你最希望知识库优先支持哪种文档或场景?
  • 你更看重「回答速度」还是「引用可追溯」?
  • 如果你部署了自己的版本,遇到了哪些坑?

若反馈多,我会整理一篇 部署清单 + 常见问题 FAQ,方便后来者一键复现。