Page Assist新范式：浏览器侧边栏无缝对话本地AI模型
引言：本地AI与浏览器的无缝融合
你是否厌倦了依赖云端AI服务时的隐私顾虑与网络延迟？是否渴望在浏览网页时获得即时的智能辅助，却不必担心数据泄露？Page Assist的出现彻底改变了这一现状。作为一款开源浏览器扩展，Page Assist突破性地将本地AI模型（如Ollama、LM Studio）直接集成到浏览器侧边栏，实现了无需云端支持的智能交互体验。本文将深入剖析这一创新范式，从核心架构到实际应用，全方位展示如何利用Page Assist释放本地AI的潜能，重塑你的网页浏览与知识管理流程。
读完本文，你将能够：
- 掌握Page Assist的安装配置与多模型管理技巧
- 理解本地AI与浏览器集成的技术实现原理
- 构建基于个人知识库的智能网页交互系统
- 解决常见的本地模型连接与性能优化问题
- 探索企业级部署与自定义开发的进阶路径
核心功能解析：重新定义浏览器AI交互
Page Assist的革命性在于其将强大的AI能力以最轻量的方式融入日常浏览场景。通过深度整合浏览器原生能力与本地模型优势，构建了一套完整的智能交互生态系统。
多维度交互入口：无缝切换的用户体验
侧边栏即时交互
默认通过Ctrl+Shift+Y快捷键唤醒的侧边栏，实现了"即开即用"的无干扰体验。无论是阅读学术论文时需要即时解释专业术语，还是购物时对比产品参数，侧边栏都能作为常驻智能助手提供即时响应。其精巧的UI设计确保在不遮挡网页内容的前提下，提供完整的对话历史与上下文管理功能。
独立Web UI工作区
对于需要更专注的AI交互场景，Ctrl+Shift+L快捷键可打开独立的Web UI界面。该界面提供更丰富的功能选项，包括模型切换、对话导出、高级参数配置等，适合进行复杂的文本生成、代码编写等任务。Web UI采用响应式设计，支持从移动设备到桌面显示器的全尺寸适配。
上下文感知的交互模式
Page Assist最具创新性的功能在于其上下文感知能力。通过"与网页对话"模式，系统能自动提取当前页面内容作为上下文，使AI回答与正在浏览的网页内容深度关联。无论是分析新闻文章、解读技术文档还是总结视频脚本，这种上下文感知能力都能显著提升AI响应的相关性与准确性。
本地优先的AI架构：隐私与性能的平衡之道
多模型兼容体系
Page Assist构建了灵活的模型抽象层，原生支持多种本地AI解决方案：
| 模型类型 | 核心优势 | 典型应用场景 | 性能需求 |
|---|---|---|---|
| Ollama | 模型管理便捷，支持多实例 | 日常对话、内容生成 | 中高 |
| LM Studio | 图形化配置界面，适合新手 | 文本摘要、创意写作 | 中 |
| llamafile | 单文件部署，便携性强 | 临时分析、现场演示 | 中低 |
| Chrome AI | 浏览器内置，零配置 | 快速问答、简单任务 | 低 |
这种多模型架构使Page Assist能够适应不同用户的硬件条件与使用需求，从低配笔记本到高性能工作站都能找到合适的运行方案。
知识Base本地化存储
Page Assist的知识Base功能允许用户上传PDF、DOCX、CSV等多种格式文件（最大支持200MB单文件），通过本地嵌入模型（推荐使用nomic-embed-text）处理后存储在浏览器IndexedDB中。这种设计确保敏感数据不会离开用户设备，同时通过智能分块与向量检索技术，实现高效的知识问答体验。
flowchart LR
A[用户上传文件] --> B{文件类型检测}
B -->|PDF| C[PDF解析器提取文本]
B -->|DOCX| D[DOCX解析器提取文本]
B -->|CSV| E[表格结构识别]
C & D & E --> F[文本分块处理]
F --> G[本地嵌入模型生成向量]
G --> H[存储至浏览器IndexedDB]
H --> I[向量检索引擎]
J[用户查询] --> K[查询向量化]
K --> I
I --> L[相关片段提取]
L --> M[本地LLM生成回答]
M --> N[展示给用户]
技术架构深度剖析：从代码到交互的实现之路
Page Assist的技术架构体现了现代浏览器扩展开发的最佳实践，通过模块化设计实现了功能的灵活扩展与高效维护。
核心模块设计
模型抽象层
在src/models/目录下，Page Assist定义了统一的模型接口，使不同AI提供商的集成变得简单。以Ollama集成为例，ChatOllama.ts实现了完整的对话逻辑：
export class ChatOllama extends SimpleChatModel<ChatOllamaCallOptions> implements ChatOllamaInput {
model = "llama2"; // 默认模型
baseUrl = "http://localhost:11434"; // Ollama默认地址
constructor(fields: OllamaInput & BaseChatModelParams) {
super(fields);
this.model = fields.model ?? this.model;
this.baseUrl = fields.baseUrl?.endsWith("/")
? fields.baseUrl.slice(0, -1)
: fields.baseUrl ?? this.baseUrl;
// 其他参数初始化...
}
// 核心对话方法
async *_streamResponseChunks(
input: BaseMessage[],
options: this["ParsedCallOptions"],
runManager?: CallbackManagerForLLMRun
): AsyncGenerator<ChatGenerationChunk> {
const stream = await createOllamaChatStream(
this.baseUrl,
{
...this.invocationParams(options),
messages: this._convertMessagesToOllamaMessages(input),
},
{ ...options, headers: this.headers }
);
for await (const chunk of stream) {
if (!chunk.done) {
yield new ChatGenerationChunk({
text: chunk.message.content,
message: new AIMessageChunk({ content: chunk.message.content }),
});
await runManager?.handleLLMNewToken(chunk.message.content ?? "");
}
}
}
// 消息格式转换
protected _convertMessagesToOllamaMessages(messages: BaseMessage[]): OllamaMessage[] {
return messages.map((message) => {
let role;
if (message._getType() === "human") role = "user";
else if (message._getType() === "ai") role = "assistant";
else if (message._getType() === "system") role = "system";
else throw new Error(`Unsupported message type: ${message._getType()}`);
return { role, content: message.content.toString(), images: [] };
});
}
}
这种设计不仅实现了与Ollama的高效通信，还通过继承SimpleChatModel统一了不同AI模型的调用接口，使上层业务逻辑无需关心具体模型实现。
网页对话引擎
src/chain/chat-with-website.ts实现了Page Assist的核心特色功能——与网页对话。该模块采用检索增强生成（RAG）架构：
export const createChatWithWebsiteChain = ({
llm, question_llm, retriever, question_template, response_template
}) => {
// 创建检索链处理用户查询
const retrieverChain = createRetrieverChain(question_llm, retriever, question_template);
// 构建上下文处理流程
const context = RunnableMap.from({
context: RunnableSequence.from([
({ question, chat_history }) => ({
question,
chat_history: formatChatHistoryAsString(chat_history),
}),
retrieverChain,
RunnableLambda.from(formatDocs).withConfig({ runName: "FormatDocumentChunks" }),
]),
question: RunnableLambda.from((input) => input.question),
chat_history: RunnableLambda.from((input) => input.chat_history),
});
// 构建响应生成流程
const prompt = ChatPromptTemplate.fromMessages([
["system", response_template],
new MessagesPlaceholder("chat_history"),
["human", "{question}"],
]);
const responseSynthesizerChain = RunnableSequence.from([
prompt, llm, new StringOutputParser()
]);
return RunnableSequence.from([
{
question: (input) => input.question,
chat_history: RunnableLambda.from(serializeHistory),
},
context,
responseSynthesizerChain,
]);
};
该实现巧妙地将用户查询转换为检索指令，从当前网页内容中提取相关信息片段，再结合对话历史生成上下文感知的回答。这种架构既保证了回答的相关性，又避免了将整个网页内容一次性传递给LLM带来的token限制问题。
前端组件架构
Page Assist采用React+TypeScript构建UI组件，通过组件化设计实现代码复用与功能解耦。核心组件包括：
- ModelSelect.tsx：模型选择器，允许用户在不同AI模型间快速切换
- Markdown.tsx：支持渲染富文本回答，包括代码高亮、表格、数学公式等
- Mermaid.tsx：集成Mermaid图表渲染，支持流程图、时序图等可视化展示
- Settings/：配置面板集合，处理模型参数、快捷键、存储等设置
这种组件化架构不仅使UI开发更高效，还确保了在Chrome、Firefox等不同浏览器环境下的一致性体验。
安装与配置指南：从零开始的本地AI之旅
环境准备
Page Assist的安装部署需要以下环境依赖：
- 浏览器环境：Chrome 110+、Firefox 109+、Edge 110+或其他基于Chromium的现代浏览器
- 运行时依赖：Bun（推荐）或Node.js/npm
- 本地AI服务：Ollama（推荐）、LM Studio或其他OpenAI兼容API服务
兼容性提示：根据官方测试数据，Opera和Arc浏览器暂不支持侧边栏功能，但Web UI可正常使用。完整浏览器支持列表请参考项目文档。
快速安装步骤
1. 安装本地AI服务
以推荐的Ollama为例：
- 访问Ollama官网下载对应操作系统的安装包
- 安装完成后，运行
ollama pull llama2拉取默认模型（约4.5GB） - 验证服务是否正常运行：访问
http://localhost:11434应看到Ollama API接口信息
2. 安装Page Assist扩展
有两种安装方式可选：
方式一：通过应用商店（推荐）
- Chrome/Edge用户：访问Chrome Web Store搜索"Page Assist"
- Firefox用户：访问Firefox Add-ons商店搜索"Page Assist"
- 点击"添加至浏览器"完成安装
方式二：手动构建安装
适合开发者或希望体验最新特性的用户：
# 克隆仓库
git clone https://gitcode.com/GitHub_Trending/pa/page-assist
cd page-assist
# 安装依赖
bun install # 或 npm install
# 构建扩展
bun run build # 或 npm run build
# 加载扩展（Chrome示例）
# 1. 打开chrome://extensions
# 2. 启用"开发者模式"
# 3. 点击"加载已解压的扩展程序"
# 4. 选择项目根目录下的build文件夹
基础配置与优化
首次启动设置
安装完成后首次启动Page Assist，系统会引导完成基础配置：
- 检测本地AI服务（默认检查Ollama在
localhost:11434的服务） - 选择默认模型（推荐初次使用llama2或mistral）
- 配置快捷键（可选自定义）
- 设置知识Base存储位置（默认浏览器IndexedDB）
解决常见连接问题
若遇到Ollama连接失败，可尝试以下解决方案：
-
设置OLLAMA_ORIGIN环境变量（推荐）：
# Linux/MacOS export OLLAMA_ORIGIN="*" # Windows（管理员命令提示符） setx OLLAMA_ORIGIN "*"设置后需重启Ollama服务使配置生效。
-
修改Page Assist高级设置：
- 打开扩展设置页面
- 进入"OpenAI兼容API"选项卡
- 点击"添加提供商"，选择"Ollama"
- 输入自定义Ollama URL（如
http://localhost:11434） - 保存后重新连接
-
检查防火墙设置： 确保本地防火墙未阻止浏览器访问
localhost:11434端口。
实战应用场景：释放本地AI的生产力潜能
Page Assist不仅是一个技术演示，更是能显著提升日常工作效率的实用工具。以下是几个典型应用场景：
学术研究辅助
研究人员在阅读论文时，可利用Page Assist的"与网页对话"功能快速提取关键信息：
- 总结研究方法与实验结果
- 解释复杂的数学公式或专业术语
- 对比多篇论文的研究结论
- 生成文献综述初稿
操作步骤：
- 打开论文网页（如arXiv论文页面）
- 按下
Ctrl+Shift+Y打开侧边栏 - 点击"网页对话"模式按钮
- 输入问题："总结本文的核心贡献与实验结果"
- 系统将分析当前页面内容并生成结构化总结
代码学习与调试
开发者浏览技术文档或GitHub代码库时，Page Assist可作为即时编程助手：
- 解释陌生API的用法与参数含义
- 提供代码示例的详细注释
- 识别潜在的bug或性能问题
- 建议代码重构方案
示例工作流：
sequenceDiagram
participant User
participant Browser
participant PageAssist
participant Ollama
participant CodeBase
User->>Browser: 浏览GitHub代码页面
User->>PageAssist: 打开侧边栏，切换至"代码解释"模式
User->>PageAssist: 提问"这段代码的时间复杂度是多少？"
PageAssist->>Browser: 请求当前页面代码内容
Browser->>PageAssist: 返回提取的代码片段
PageAssist->>PageAssist: 处理代码，生成查询向量
PageAssist->>Ollama: 发送带代码上下文的查询请求
Ollama->>PageAssist: 返回分析结果（时间复杂度O(n log n)）
PageAssist->>User: 展示结果，包含复杂度分析与优化建议
个人知识库构建
Page Assist的知识Base功能可帮助用户构建本地私有知识库：
- 上传个人文档（支持PDF、DOCX、CSV等格式）
- 系统自动处理并生成向量嵌入
- 通过自然语言查询知识库内容
- 支持多轮对话深入探索知识关联
知识Base使用技巧：
- 对大型PDF文档（如技术手册），建议先拆分为章节再上传
- 使用CSV格式管理结构化数据（如产品清单、研究数据），支持表格查询
- 定期清理不再需要的知识库条目，释放浏览器存储资源
- 重要知识库可通过"导出"功能备份，防止数据丢失
高级应用与定制开发
多模型协同工作流
Page Assist支持同时配置多个本地AI模型，通过模型互补提升整体智能水平：
场景：专业文档处理
- 使用
nomic-embed-text模型处理文档嵌入（擅长语义理解） - 使用
llama2:13b进行复杂推理（擅长逻辑分析） - 使用
mistral进行快速问答（响应速度快，适合简单查询）
配置方法：
- 在Ollama中拉取所需模型：
ollama pull nomic-embed-text ollama pull llama2:13b ollama pull mistral - 打开Page Assist设置 → "模型管理" → "添加模型"
- 为每个模型配置名称、API地址和默认参数
- 在知识库设置中指定专用嵌入模型
自定义快捷键与手势
Page Assist支持高度个性化的快捷键配置，满足不同用户习惯：
| 功能 | 默认快捷键 | 可自定义范围 |
|---|---|---|
| 打开/关闭侧边栏 | Ctrl+Shift+Y | 支持组合键 |
| 打开Web UI | Ctrl+Shift+L | 支持组合键 |
| 切换对话模式 | Ctrl+E | 支持组合键 |
| 发送消息 | Enter | 可改为Ctrl+Enter |
| 聚焦输入框 | Shift+Esc | 支持组合键 |
配置路径：扩展管理页面 → "键盘快捷键" → 找到Page Assist进行自定义
企业级部署方案
对于团队或企业用户，Page Assist可构建私有AI辅助系统：
部署架构：
graph TD
subgraph 企业内部网络
Server[私有Ollama服务器集群]
ModelRepo[内部模型仓库]
User1[员工A浏览器]
User2[员工B浏览器]
User3[远程员工浏览器]
end
ModelRepo-->Server: 模型同步
User1-->Server: API请求
User2-->Server: API请求
User3-->|内部网络连接|Server: API请求
Server-->User1: AI响应
Server-->User2: AI响应
Server-->User3: AI响应
优势：
- 集中管理模型版本与访问权限
- 保护企业敏感数据不离开内部网络
- 优化硬件资源利用，避免重复投资
- 统一配置与策略管理
实施步骤：
- 部署私有Ollama服务器并配置访问控制
- 设置内部模型仓库，管理定制化模型
- 批量部署Page Assist扩展（通过企业浏览器管理工具）
- 配置扩展指向私有Ollama服务器地址
- 建立模型更新与安全审计流程
插件开发与功能扩展
开发者可通过Page Assist的插件接口扩展功能：
扩展点示例：
- 自定义文件解析器（支持更多文档格式）
- 添加新的AI模型集成（如本地部署的开源模型）
- 开发专用对话模板（如法律分析、医疗咨询）
- 实现自定义数据导出格式
插件开发入门：
- 参考
src/loader/目录下的现有文件加载器 - 实现
FileLoader接口处理新文件类型 - 注册
Kimi-K2.5Kimi K2.5 是一款开源的原生多模态智能体模型，它在 Kimi-K2-Base 的基础上，通过对约 15 万亿混合视觉和文本 tokens 进行持续预训练构建而成。该模型将视觉与语言理解、高级智能体能力、即时模式与思考模式，以及对话式与智能体范式无缝融合。Python00
GLM-4.7-FlashGLM-4.7-Flash 是一款 30B-A3B MoE 模型。作为 30B 级别中的佼佼者，GLM-4.7-Flash 为追求性能与效率平衡的轻量化部署提供了全新选择。Jinja00
VLOOKVLOOK™ 是优雅好用的 Typora/Markdown 主题包和增强插件。 VLOOK™ is an elegant and practical THEME PACKAGE × ENHANCEMENT PLUGIN for Typora/Markdown.Less00
PaddleOCR-VL-1.5PaddleOCR-VL-1.5 是 PaddleOCR-VL 的新一代进阶模型，在 OmniDocBench v1.5 上实现了 94.5% 的全新 state-of-the-art 准确率。 为了严格评估模型在真实物理畸变下的鲁棒性——包括扫描伪影、倾斜、扭曲、屏幕拍摄和光照变化——我们提出了 Real5-OmniDocBench 基准测试集。实验结果表明，该增强模型在新构建的基准测试集上达到了 SOTA 性能。此外，我们通过整合印章识别和文本检测识别（text spotting）任务扩展了模型的能力，同时保持 0.9B 的超紧凑 VLM 规模，具备高效率特性。Python00
KuiklyUI基于KMP技术的高性能、全平台开发框架，具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意：本仓库为Github仓库镜像，PR或Issue请移步至Github发起，感谢支持！Kotlin07
compass-metrics-modelMetrics model project for the OSS CompassPython00
项目优选
kernel
docs
pytorch
ops-math
kernel
flutter_flutter
nop-entropy
RuoYi-Vue3
leetcode
ohos_react_native