浏览器智能体-browser use理解与配置

项目地址:https://github.com/browser-use/web-ui.git
browser use自动化浏览器操作。首先说明一下浏览器智能体的工作原理:
整体架构与核心流程：采用分层架构，包含 DOM 操作、浏览器控制、AI 代理相关模块。核心流程从浏览器上下文入口开始，调用 DOM 服务获取可点击元素，DOM 服务层构建元素树并标注，最后由 JavaScript 执行标注并呈现效果。
DOM就是我们常见的html的树:

所以就是这两个核心部分:
1.DOM 树遍历与分析：通过递归深度遍历 DOM 树，获取每个节点信息。同时，从可交互性和可见性两方面分析元素，判断其是否符合标注条件，为精准标注提供依据。
2.视觉标注实现：先创建独立标注容器，避免与页面冲突。接着生成标注框和标签，利用 CSS 样式设置外观，通过 JavaScript 动态生成标注内容。
接下来我们复现一下web ui的browser use.主要包括下载uv,克隆源码,安装依赖,配置api,以及最后的运行测试.

这是项目的结构:
browser_use/
├── dom/ # DOM操作相关
│ ├── buildDomTree.js # 核心标注实现
│ ├── service.py # DOM服务层
│ └── views.py # 数据模型定义
├── browser/ # 浏览器控制
│ ├── context.py # 浏览器上下文
│ └── browser.py # 浏览器实例
└── agent/ # AI代理
└── service.py # 代理服务

下载uv

https://docs.astral.sh/uv/

选择windows电脑的安装方式.可以运行:

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

或者运行安装特定的版本的(如0.6.14):

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/0.6.14/install.ps1 | iex"

然后查看是否安装成功:

(安装完之后应该是已经添加到环境变量中的uv,可以去环境变量中确认一下,尽量不要有多个uv的版本出现,比如我之前下载过uv.exe了)

克隆源码

git clone https://github.com/browser-use/web-ui.git
cd web-ui

安装依赖

首先要创建一个虚拟环境:

uv venv --python 3.11

貌似对于cmd和powershell的激活方式不一样:
Windows (Command Prompt):

.venv\Scripts\activate

Windows (PowerShell):

.\.venv\Scripts\Activate.ps1

但是其实都可以直接通过activate来激活:

然后安装依赖:

uv pip install -r requirements.txt

安装playwright浏览器:

playwright install

然后去修改一下API配置,我们先去获取一个大模型的api,这里我们使用deepseek官方的模型,使用deepseek-v3模型(即deepseek-chat)

复制一个这个文件,修改为.env,然后填写对应的deepseek的api:

然后就可以启动了:

python webui.py --ip 127.0.0.1 --port 7788

然后选择使用的是deepseek的模型，注意，deepseek的模型是不支持视觉大模型，所以还需要关闭这里的use vision

然后就能使用了：

智能体部分负责去规划各种agent的任务：
任务启动：

INFO [agent] 🚀 任务开始，任务内容为访问谷歌网站（google.com），在搜索框中输入 “OpenAI”，点击搜索按钮，然后给出搜索结果中的第一个网址。
步骤 1：
INFO [src.agent.custom_agent] 🤷 评估当前状态为未知，因为是从一个空白页面开始任务的。
INFO [src.agent.custom_agent] 🧠 新的记忆为空（因为刚开始）。
INFO [src.agent.custom_agent] 🤔 思考得出任务需要先访问谷歌网站，进行 “OpenAI” 的搜索并获取第一个网址。目前处于空白页面，所以首先要导航到谷歌网站。
INFO [src.agent.custom_agent] 🎯 下一个目标是导航到谷歌网站以开始搜索流程。
INFO [src.agent.custom_agent] 🛠采取的行动是访问网址 “https://www.google.com”。
INFO [controller] 🔗 控制器显示已成功导航到谷歌网站。

步骤 2：
INFO [src.agent.custom_agent] ✅ 评估结果为成功，已按预期成功导航到谷歌网站。
INFO [src.agent.custom_agent] 🧠 新的记忆为空（此步骤未添加新的记忆内容）。
INFO [src.agent.custom_agent] 🤔 思考得出现在已经在谷歌主页，下一步是在搜索框中输入 “OpenAI” 并点击搜索按钮来获取搜索结果中的第一个网址。
INFO [src.agent.custom_agent] 🎯 下一个目标是在搜索框中输入 “OpenAI” 并启动搜索。
INFO [src.agent.custom_agent] 🛠   第一个行动是在索引为 5 的位置输入文本 “OpenAI”。
INFO [src.agent.custom_agent] 🛠️第二个行动是点击索引为 8 的元素（原以为是搜索按钮）。
INFO [controller] ⌨ 控制器显示已在索引为 5 的位置输入了 “OpenAI”。
INFO [agent]  在执行完第一个行动后出现了新的内容（搜索建议等）。
步骤 3：
INFO [src.agent.custom_agent] ❌  评估结果为失败，点击索引为 8 的搜索按钮的行动未按预期进行，可能是因为该元素不是正确的搜索按钮。在输入 “OpenAI” 后搜索建议已经出现。
INFO [src.agent.custom_agent] 🧠  新的记忆为空（此步骤未添加新的记忆内容）。
INFO [src.agent.custom_agent] 🤔  思考得出在输入 “OpenAI” 后搜索建议出现了，但点击索引为 8 的按钮操作未成功，正确的搜索按钮可能是索引为 20 的 “Google 搜索” 按钮。
INFO [src.agent.custom_agent] 🎯  下一个目标是点击正确的搜索按钮（索引为 20）来启动 “OpenAI” 的搜索。
INFO [src.agent.custom_agent] 🛠️ 采取的行动是点击索引为 20 的元素。
INFO [controller] 🖱️控制器显示已点击索引为 20 的按钮。
步骤 4：
INFO [src.agent.custom_agent] ✅  评估结果为成功，已成功在谷歌上对 “OpenAI” 进行了搜索并获取了搜索结果页面。
INFO [src.agent.custom_agent] 🧠  新的记忆是搜索结果中的第一个网址为 “https://openai.com”。
INFO [src.agent.custom_agent] 🤔  思考得出任务是在谷歌上搜索 “OpenAI” 并获取第一个网址，现在已经成功完成，因为第一个结果是 OpenAI 的官方网站。
INFO [src.agent.custom_agent] 🎯  下一个目标是通过提供搜索结果中的第一个网址来完成任务。
INFO [src.agent.custom_agent] 🛠  采取的行动是表示任务完成，给出的信息是 “搜索‘OpenAI’的结果中第一个网址是：https://openai.com”，并且任务成功。
INFO [src.agent.custom_agent] 🧠  所有的记忆是搜索结果中的第一个网址为 “https://openai.com”。
INFO [src.agent.custom_agent] 📄  结果是搜索结果中的第一个网址为 “https://openai.com”。
INFO [agent] ✅  任务已完成。
INFO [agent] ✅  任务成功完成。

[agent]负责所有的agent和controller的调用，[custom_agent]有的负责记忆，有的负责评估，有的负责负责动作。其实也就是AI Agent的四大模块，也就是memory，planning，tools和action。

深度搜索测试:
旅行任务:

I need a 7-day Japan itinerary for April 15-23 from Seattle, with a $2500-5000 budget for my fiancée and me. We love historical sites, hidden gems, and Japanese culture (kendo, tea ceremonies, Zen meditation). We want to see Nara's deer and explore cities on foot. I plan to propose during this trip and need a special location recommendation. Please provide a detailed itinerary and a simple HTML travel handbook with maps, attraction descriptions, essential Japanese phrases, and travel tips we can reference throughout our journey.

最后的结果如下: