🏠 完全本地化的文档聊天

是的，又是一个基于文档的聊天应用实现……但这一次完全在本地运行！

你可以通过三种不同的方式来运行它：

• 🦙 通过 Ollama 将端口暴露给你在桌面端运行的本地大模型。
• 🌐 将模型权重下载到浏览器中，并通过 WebLLM 运行。
• ♊ 加入 Chrome 实验性内置 Gemini Nano 模型 的早期预览计划，直接使用它！

这是一个 Next.js 应用，它会读取上传的 PDF 文件内容，将其分块后存入向量数据库，并在客户端完成 RAG 流程。甚至在网站加载完成后，你也可以关闭 WiFi。

你可以在 https://webml-demo.vercel.app 上查看实时版本。

用户可以选择以下任一选项来进行推理：

🦙 Ollama

你可以使用 Ollama 的桌面应用，在浏览器之外运行更强大、更通用的模型。用户需要下载并设置好环境，然后执行以下命令，以允许该站点访问本地运行的 Mistral 实例：

Mac/Linux

$ OLLAMA_ORIGINS=https://webml-demo.vercel.app OLLAMA_HOST=127.0.0.1:11435 ollama serve

然后，在另一个终端窗口中：

$ OLLAMA_HOST=127.0.0.1:11435 ollama pull mistral

Windows

$ set OLLAMA_ORIGINS=https://webml-demo.vercel.app
set OLLAMA_HOST=127.0.0.1:11435
ollama serve

然后，在另一个终端窗口中：

$ set OLLAMA_HOST=127.0.0.1:11435
ollama pull mistral

🌐 完全在浏览器中运行（WebLLM）

你可以通过 WebLLM 在浏览器中运行整个堆栈。所使用的模型是小型的、具有 38 亿参数的 Phi-3.5。

你无需离开当前页面即可完成设置——只需上传一个 PDF 文件即可开始！

请注意，首次开始聊天时，应用会下载并缓存模型权重。这个下载文件大小可能达到几 GB，因此需要一些时间，请确保你的网络连接良好。

♊ 内置 Gemini Nano

你也可以使用 Chrome 内置的 Gemini Nano 模型的实验性预览版。你需要加入早期预览计划才能使用此模式。按照官方指南中的说明安装 Chrome 后，你就可以开始使用了。

需要注意的是，内置的 Gemini Nano 模型目前仍处于实验阶段，且未针对对话场景进行优化，因此结果可能会有所不同。

⚡ 技术栈

该项目使用了以下技术：

• Voy 作为向量数据库，完全在浏览器中以 WASM 运行。
• Ollama、WebLLM 或 Chrome 内置 Gemini Nano 来在本地运行大模型，并将其暴露给 Web 应用。
• LangGraph.js 和 LangChain.js 用于调用模型、执行检索操作，并协调各个组件的工作。
• Transformers.js 用于在浏览器中运行开源的 Nomic 嵌入模型。
  • 如果需要更高品质的嵌入，可以在 app/worker.ts 中切换到 "nomic-ai/nomic-embed-text-v1"。

虽然目标是尽可能多地在浏览器中运行应用，但你也可以用 Ollama 嵌入 替代 Transformers.js。

🔱 分叉项目

要自行运行或部署该项目，只需分叉本仓库，并使用 yarn 安装所需的依赖项。

该项目没有必需的环境变量，但在本地开发时，你可以选择设置 LangSmith 跟踪，以帮助调试提示词和链路流程。将 .env.example 文件复制为 .env.local 文件：

# 无需任何环境变量！

# 从 Web Worker 启用 LangSmith 跟踪。
# 警告：仅用于开发目的。请勿在上线版本中启用这些变量，
# 因为这会导致你的 LangChain API 密钥泄露。
NEXT_PUBLIC_LANGCHAIN_TRACING_V2="true"
NEXT_PUBLIC_LANGCHAIN_API_KEY=
NEXT_PUBLIC_LANGCHAIN_PROJECT=

请务必不要在生产环境中启用这些设置，否则你的 LangChain API 密钥将会暴露在前端！

📖 更多阅读

如果你想深入了解这个主题，可以阅读我的 关于 Ollama 的博客文章 或我在 Google Summit 上关于在浏览器中构建 LLM 应用的演讲。

🙏 感谢

特别感谢以下几位：

• @dawchihliou，感谢你创造了 Voy。
• @jmorgan 和 @mchiang0610，感谢你们创建了 Ollama 并提供了宝贵的反馈。
• @charlie_ruan，感谢你为 WebLLM 所做的卓越工作。
• @xenovacom，感谢你开发了 Transformers.js。
• @jason_mayes 和 @nfcampos，感谢你们的启发以及精彩的交流。

更多内容，请关注我在 Twitter 上的账号 @Hacubu！

fully-local-pdf-chatbot 快速上手指南

fully-local-pdf-chatbot 是一个完全在本地运行的文档问答工具。它基于 Next.js 构建，支持上传 PDF 文件，通过向量化存储和 RAG（检索增强生成）技术，在无需联网（加载完成后）的情况下实现与文档的对话。

环境准备

系统要求

• 操作系统：macOS, Linux, 或 Windows
• 浏览器：现代浏览器（推荐 Chrome 以支持内置模型或 WebLLM）
• 网络：首次运行需联网下载模型权重（数 GB），后续可离线使用

前置依赖

• Node.js (推荐 v18+)
• Yarn 包管理器
• 可选后端：若选择 Ollama 模式，需安装 Ollama 桌面应用

注意：本项目主要依赖浏览器端计算（WASM），对本地内存和显卡有一定要求。国内用户若遇到模型下载缓慢，建议配置网络加速工具。

---

安装步骤

1. 克隆项目与安装依赖

首先 Fork 或克隆仓库，然后安装依赖：

git clone <your-forked-repo-url>
cd fully-local-pdf-chatbot
yarn install

2. 配置环境变量（可选）

项目无需强制配置环境变量即可运行。若需在开发阶段调试 Prompt 和链路，可启用 LangSmith 追踪：

cp .env.example .env.local

编辑 .env.local 填入你的 Key（警告：仅限本地开发，切勿部署到生产环境，否则会导致 API Key 泄露）：

NEXT_PUBLIC_LANGCHAIN_TRACING_V2="true"
NEXT_PUBLIC_LANGCHAIN_API_KEY=your_key_here
NEXT_PUBLIC_LANGCHAIN_PROJECT=your_project_name

3. 启动开发服务器

yarn dev

访问 http://localhost:3000 即可使用。

---

基本使用

本工具提供三种推理模式，用户可根据需求选择：

模式一：完全浏览器运行 (WebLLM) - 最简单

无需额外配置后端，所有计算在浏览器内完成。

1. 打开网页，直接上传 PDF 文件。
2. 首次使用时，浏览器会自动下载并缓存 Phi-3.5 (3.8B) 模型权重（约几 GB，请保持网络连接）。
3. 下载完成后，即可开始对话。此时断开 WiFi 仍可正常使用。

模式二：连接本地 Ollama - 性能更强

适合需要运行更大、更通用模型的场景。

第一步：启动 Ollama 服务 允许网页访问本地 Ollama 实例。

Mac/Linux:

OLLAMA_ORIGINS=https://webml-demo.vercel.app OLLAMA_HOST=127.0.0.1:11435 ollama serve

(注：若在本地运行，请将 https://webml-demo.vercel.app 替换为你的本地地址 http://localhost:3000)

Windows (CMD):

set OLLAMA_ORIGINS=http://localhost:3000
set OLLAMA_HOST=127.0.0.1:11435
ollama serve

第二步：拉取模型 新开一个终端窗口，下载 Mistral 模型：

Mac/Linux:

OLLAMA_HOST=127.0.0.1:11435 ollama pull mistral

Windows (CMD):

set OLLAMA_HOST=127.0.0.1:11435
ollama pull mistral

第三步：使用 刷新网页，选择 Ollama 模式，上传 PDF 即可调用本地强大的模型进行问答。

模式三：Chrome 内置 Gemini Nano (实验性)

1. 确保你已加入 Chrome 内置 AI 早期预览计划。
2. 按照官方指南安装特定版本的 Chrome。
3. 在网页中选择该模式即可直接使用（注意：该模型未经过专门的聊天微调，效果可能波动）。

---

技术栈概览

• 向量数据库: Voy (浏览器端 WASM)
• 大模型推理: Ollama / WebLLM / Chrome Gemini Nano
• 编排框架: LangGraph.js & LangChain.js
• 嵌入模型: Transformers.js (默认运行 Nomic 开源嵌入模型)