[AI]browser-use + web-ui 大模型实现自动操作浏览器

[AI]browser-use + web-ui 大模型实现自动操作浏览器

先容

   官方地址：https://github.com/browser-use/web-ui
  

• browser-use紧张作用是将 AI Agent 与浏览器链接起来从而实现由 AI 驱动的浏览器自动化。
  
• 本日会给大家先容怎样通过browser-use web-ui来搭建并操作browser-use。
  

  browser-use web-ui功能点：

• 提供了全新的网页界面，简单好用，方便操作。
  
• 支持更多大语言模型，比如 Gemini、OpenAI、Azure 、国产大模型 DeepSeek、通义千问等。
  
• 支持用自己的浏览器，不用再反复登录，还能录屏。
  
• 定制了更智能的 Agent，通过优化后的提示让浏览器使用更高效。
  

browser-use与web-ui关系：
   想象 Browser Use 是一个“网页翻译官”：当 AI 必要操作网页时（比如自动订票），传统方法是让 AI“看截图”找按钮，但截图就像一张复杂照片，AI 必要花时间辨认。
  

• Browser Use 的办理方案是：把网页酿成一份“元素清单”，比如“第 1 个是登录按钮，第 8 个是搜刮框……”。AI 只需根据清单编号，快速找到对应位置并点击，就像按菜单点菜一样简单。
  
• Web-UI 则是这个翻译官的“操作面板”：普通用户不用写代码，直接在网页上选择任务（如“帮我搜机票”），选好 AI 模型（比如 ChatGPT），点击运行就能看到浏览器自动执行所有步骤，还能录屏回放操作过程。
  

  情况搭建

   python版本必须在 3.11 以上。
  

• 我这里紧张演示Mac怎样搭建，windows也是类似的操作。
  

  1. 安装uv

1. # 官方推荐使用uv管理
2. brew install uv

复制代码

2. 拉取项目安装依靠

1. # 从github拉取项目
2. git clone https://github.com/browser-use/web-ui.git
3. cd web-ui
5. # 搭建该项目的python虚拟环境，这里python环境使用3.11
6. uv venv --python 3.11
8. # 初始化虚拟环境配置
9. source .venv/bin/activate
11. # 安装python依赖
12. uv pip install -r requirements.txt
14. ## 安装浏览器依赖，大家根据自己情况选择即可
15. # 仅安装Chrome依赖
16. playwright install --with-deps chromium
17. # 安装所有浏览器依赖
18. playwright install

复制代码

3. 配置浏览器及大模型参数

   这里也可以使用本地通过ollama配置的大模型，比如Deepseek r1-14b
  

• Mac本地通过ollama部署大模型
  

1. # 拷贝示例配置文件
2. copy .env.example .env
4. # 1. 配置浏览器位置：CHROME_PATH。这里以chrome为例
5. CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
7. # 2. 配置浏览器用户数据
8. CHROME_USER_DATA="/Users/你自己的用户名/Library/Application Support/Google/Chrome"
10. # 3. 配置大模型API参数【我这里使用Deepseek】
11. DEEPSEEK_ENDPOINT=https://api.deepseek.com
12. DEEPSEEK_API_KEY=xxxx
14. # 这里也可以使用本地通过ollama配置的大模型
15. OLLAMA_ENDPOINT=http://localhost:11434

复制代码

使用

1. # 运行项目
2. python webui.py --ip 127.0.0.1 --port 7788

复制代码

配置模型类型：

1. 使用内置浏览器

• 配置浏览器参数：
  
  
  
  
• 下发指令执行任务：
  

   输入指令，然后点击运行
  

• 查看浏览器效果：
  

   在主界面，上方的设置导航中选择 Agent Settings，如果你本地部署的大模型不支持视觉识别，可以把这个使用视觉【Use Vision】取消勾选，否则后续让 AI 执行任务时会报错。
  

• 我这里支持，因此我勾选后，浏览器页面出现如下：
  

  

   该项目原理就是将浏览器页面上所有的元素都标记下来（打上编号），然后把元素编号以及元素代表的含义，告诉AI，由AI来判定用户需求必要操作哪些元素，然后调用API去操作对应元素。
  

• 控制台成功输出效果：
  
  
  
  

2. 使用本地浏览器

   即：使用我们在.env配置的本地浏览器
注意：使用本地Chrome浏览器时，必要把自己本地Chrome浏览器关闭，由AI去打开。
  

• 打开本地浏览器开关
  
  
  
  
• 比如我们这里输入自己的要求
  
  
  
  
• 大模型已经识别到了我们的需求，并开始操作浏览器元素：
  
  
  
  
• 末了页面效果：
  
  
  
  
• 查看控制台日志，也正常拆解并完成了任务
  
  
  
  
  
  
  

可以看到效果还是挺不错的，只要模型好，这里可玩性还是挺高的。比如：针对页面操作实现自动化测试等
3. 深度搜刮模式

   提出需求，末了会根据我们的需求，输出一个文档，适合做旅游规划，周报日报等。
  

• 会默认进行三次的深度查找，末了把查找到的效果输出一个md文档
  

  

• 这里让模型帮我们做一个旅游规划
  
  
  
  
• 模型会查询网上内容
  
  
  
  
• 末了会给我们一个可下载的Markdown文档
  
  
  
  

Tips

1. 浏览器免登录

   我们可以通过使用自己的浏览器，然后配置上对应的cookie信息，实现免登录
  

• 浏览器插件安装edit cookies（或其他cookie管理插件）
  
• 导出cookie信息
  
• web-ui.py文件中添加cookie信息
  
  
  
  
• 重新运行项目，同时使用自己本地的浏览器，就可以看到我们浏览器访问某些页面时是登录状态了
  

  2. 项目原理

• 根据用户输出，拆分任务（规划任务：完成这个任务必要哪几步）
  

• 将任务拆分为详细的动作，比如通过百度打开咪咕视频，浏览器必要在搜刮栏输入百度网址，然后输入框输入咪咕视频，并点击搜刮
  
  
  
  
• 分析完后，操作页面元素，执行对应动作，搜刮框输入笔墨，点击对应按钮等
  
  
  
  
• for循环调用执行器，直到任务最终完成
  
  
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告