欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

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

2026-01-28 分类：服务器技术 阅读(46) 评论(0)

[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

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

    在这里插入图片描述

    2. 拉取项目安装依赖

    # 从github拉取项目
    git clone https://github.com/browser-use/web-ui.git
    cd web-ui

    # 搭建该项目的python虚拟环境，这里python环境使用3.11
    uv venv –python 3.11

    # 初始化虚拟环境配置
    source .venv/bin/activate

    # 安装python依赖
    uv pip install -r requirements.txt

    ## 安装浏览器依赖，大家根据自己情况选择即可
    # 仅安装Chrome依赖
    playwright install –with-deps chromium
    # 安装所有浏览器依赖
    playwright install

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

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

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

    # 拷贝示例配置文件
    copy .env.example .env

    # 1. 配置浏览器位置：CHROME_PATH。这里以chrome为例
    CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

    # 2. 配置浏览器用户数据
    CHROME_USER_DATA="/Users/你自己的用户名/Library/Application Support/Google/Chrome"

    # 3. 配置大模型API参数【我这里使用Deepseek】
    DEEPSEEK_ENDPOINT=https://api.deepseek.com
    DEEPSEEK_API_KEY=xxxx

    # 这里也可以使用本地通过ollama配置的大模型
    OLLAMA_ENDPOINT=http://localhost:11434

    使用

    # 运行项目
    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循环调用执行器，直到任务最终完成 在这里插入图片描述

    • 赞(0)
    未经允许不得转载：171主机测评 » [AI]browser-use + web-ui 大模型实现自动操作浏览器
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(65154)#python(21700)#开发语言(18057)#java(16623)#运维(16356)#linux(15807)#大数据(15467)#服务器(13788)#算法(12415)#前端(11798)#ai(10494)#网络(10018)#数据库(9656)#c++(8779)#学习(7258)#课程设计(7058)#机器学习(7046)#区块链(6077)#后端(5621)#OpenClaw(5425)#spring boot(5361)#深度学习(5319)#c语言(4582)#安全(4580)#毕业设计(4415)#数据结构(4362)#架构(4237)#docker(4148)#javascript(4008)#大模型(3984)

    热门文章

    最新文章

    归档

    分类