page-agent + Ollama本地大模型实战：qwen3:14b在RTX3090上跑通GUI Agent-二趣网

page-agent + Ollama本地大模型实战：qwen3:14b在RTX3090上跑通GUI Agent

【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agent

page-agent 是一个跑在网页里的 JavaScript GUI Agent，让你用一句自然语言就能控制网页界面：填表单、点按钮、多步操作，无需 Python、无需无头浏览器。本文带你用 Ollama 在本地部署 qwen3:14b 大模型，在 RTX 3090（24GB 显存）上完全离线、零费用跑通这个网页 AI 智能体，并给出一套可直接照抄的 Ollama 启动参数与连接配置。

为什么要把 GUI Agent 跑在本地大模型上 🤔

用云端 API 当然方便，但本地大模型有三块实打实的好处：

优势	说明
🔒 隐私	页面 DOM 数据、操作指令全程不出内网，敏感后台系统（ERP/CRM）也能放心用
💸 成本	推理免费，跑一天也不心疼 token 账单
📡 离线	断网、内网隔离环境照样工作

page-agent 对本地模型是官方支持场景，它只需一个符合OpenAI 接口规范的baseURL，而 Ollama 恰好就在11434端口提供了这样的服务。

第一步：Ollama 安装与模型拉取 📦

安装 Ollama（建议 0.15+，官方已在 Ollama 0.15 上验证过 qwen3:14b）
拉取模型：

ollama pull qwen3:14b

⚠️选型提醒：项目官方文档明确建议——小于 10B 参数的模型通常效果不佳，且模型必须支持tool_call。qwen3:14b 是本地部署里兼顾效果与显存（14B Q4 量化约 9GB）的甜点选择。

关键一步：Ollama 启动参数（90% 的人卡在这里）

这是最容易翻车的环节。直接用ollama serve启动，浏览器一定会被 CORS 拦下。正确姿势是同时放大上下文窗口并开启跨域访问：

macOS / Linux

OLLAMA_CONTEXT_LENGTH=64000 OLLAMA_HOST=0.0.0.0:11434 OLLAMA_ORIGINS="*" ollama serve

Windows PowerShell

$env:OLLAMA_CONTEXT_LENGTH=64000; $env:OLLAMA_HOST="0.0.0.0:11434"; $env:OLLAMA_ORIGINS="*"; ollama serve

三个参数各管一件事：

OLLAMA_CONTEXT_LENGTH=64000：普通页面往往需要 15k token 左右的上下文，默认的 4k 会把提示词截断，Agent 直接"断片"
OLLAMA_HOST=0.0.0.0:11434：允许局域网访问
OLLAMA_ORIGINS="*"：开启 CORS，否则浏览器请求会被直接拒掉

验证一下服务是否正常：

curl http://localhost:11434/v1/models

能看到qwen3:14b即可进入下一步。

把 page-agent 指向本地模型：最快配置方法 ⚡

方式一：一行 script 快速体验（推荐新手）

在任意网页的 HTML 里加一段脚本，通过 URL 参数把模型指到本地 Ollama：

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.12.3/dist/iife/page-agent.demo.js?autoInit=true&baseURL=http://localhost:11434/v1&model=qwen3:14b&lang=zh-CN" crossorigin="anonymous"></script>

国内访问 jsDelivr 困难时，可换成 npmmirror 镜像源，路径相同。

加载后页面右下角会出现一个对话面板，直接输入「点击登录按钮，用户名填张三」这类指令即可。

方式二：npm 集成到自有项目（推荐生产）

npm install page-agent

import { PageAgent } from 'page-agent' // 本地 Ollama 无需 apiKey const agent = new PageAgent({ baseURL: 'http://localhost:11434/v1', model: 'qwen3:14b', language: 'zh-CN', }) await agent.execute('筛选出待审核订单，逐条点击通过')

核心逻辑都在 PageAgent.ts 中，它由三部分组成：核心 Agent 循环 + DOM 控制器 + 浮动 UI 面板。大模型客户端则封装在 packages/llms/src/index.ts，内置了失败自动重试（默认 2 次），小模型偶发的格式错误通常能自动恢复。

实测：qwen3:14b 在 RTX 3090 上的表现 🚀

官方文档明确记录了这条组合的测试结论：Ollama 0.15 + qwen3:14b 在 RTX 3090 24GB 上测试通过（详见 docs/developer-guide.md 与 models/page.tsx）。

实际体验大致是：

✅单页操作：点按钮、填表单、勾选、切换标签——成功率很高，中文指令理解自然
✅多步任务：「打开设置 → 关闭深色模式 → 保存」这类 3~5 步的链路可以稳定完成
⏱️速度：3090 上 14B 模型每步响应约几秒到十几秒，比云端旗舰模型慢，但日常办公节奏够用
⚠️短板：复杂页面（几百个交互元素）下定位偶有偏差；这是模型能力边界，换更大的 27B/32B 模型会有改善

page-agent 基于文本化 DOM而非截图，所以 14B 级别的模型就够用了——不需要多模态能力，这是本地小显存用户能玩起来的根本原因。

常见问题排查清单 🔧

症状	原因与解法
浏览器控制台报 CORS 错误	没开`OLLAMA_ORIGINS`，重启 Ollama 并带上该环境变量
Agent 中途"断片"、操作错乱	上下文窗口太小，把`OLLAMA_CONTEXT_LENGTH`提到 64000
tool call 格式报错	模型 tool_call 能力偏弱；可确认模型支持函数调用，或换更强的本地模型
面板没出现	检查`autoInit`参数是否为`true`，或手动调用`agent.panel.show()`

请求体结构（含tool_calls、usage 统计等）定义在 types.ts，排查接口问题时可以对照。

企业官网建设流程全解析