[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功能点：

  1. 提供了全新的网页界面，简单好用，方便操作。
  2. 支持更多大语言模型，比如 Gemini、OpenAI、Azure 、国产大模型 DeepSeek、通义千问等。
  3. 支持用自己的浏览器，不用再反复登录，还能录屏。
  4. 定制了更智能的 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. 使用内置浏览器

  1. 配置浏览器参数：
    在这里插入图片描述

  2. 下发指令执行任务：

输入指令，然后点击运行

在这里插入图片描述

  1. 查看浏览器效果：

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

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

在这里插入图片描述

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

  1. 控制台成功输出结果：
    在这里插入图片描述

2. 使用本地浏览器

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

  1. 打开本地浏览器开关
    在这里插入图片描述

  2. 比如我们这里输入自己的要求
    在这里插入图片描述

  3. 大模型已经识别到了我们的需求，并开始操作浏览器元素：
    在这里插入图片描述

  4. 最后页面效果：
    在这里插入图片描述

  5. 查看控制台日志，也正常拆解并完成了任务
    在这里插入图片描述
    在这里插入图片描述

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

3. 深度搜索模式

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

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

  1. 这里让模型帮我们做一个旅游规划
    在这里插入图片描述

  2. 模型会查询网上内容
    在这里插入图片描述

  3. 最后会给我们一个可下载的Markdown文档
    在这里插入图片描述

Tips

1. 浏览器免登录

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

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

2. 项目原理

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

在这里插入图片描述

  1. 将任务拆分为具体的动作，比如通过百度打开咪咕视频，浏览器需要在搜索栏输入百度网址，然后输入框输入咪咕视频，并点击搜索
    在这里插入图片描述

  2. 分析完后，操作页面元素，执行对应动作，搜索框输入文字，点击对应按钮等
    在这里插入图片描述

  3. for循环调用执行器，直到任务最终完成
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/78965.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Springboot请求静态资源时，request.getServletPath() 返回error

Springboot请求静态资源时，request.getServletPath() 返回error

大家好，我是 程序员码递夫。 SpringBoot请求静态资源时，request.getServletPath() 返回error， 明明我的目录文件是存在的怎么就报错了呢？ 如我请求 http://127.0.0.1:9090/Hanfu/upload/1647161536390.png 通常是因为请求的资…
阅读更多...
在开发板上如何处理curl: (60) SSL certificate problem

在开发板上如何处理curl: (60) SSL certificate problem

目录 引言 问题解析 解决方法 跳过证书验证 采用证书认证 结语 引言 最近一直推荐学生们在课程实验中使用curl及其libcurl。curl 是一个强大的命令行工具，用于在命令行中进行数据传输。它支持多种协议，如 HTTP、HTTPS、FTP、FTPS、SCP、SFTP 等。…
阅读更多...
CSRF请求伪造

CSRF请求伪造

该漏洞主要是关乎于用户，告诫用户不可乱点击链接，提升自我防范，才能不落入Hacker布置的陷阱！ 1. cookie与session 简单理解一下两者作用 1.1. 🍪 Cookie：就像超市的会员卡 存储位置：你钱包里…
阅读更多...
Python循环与遍历详解：从入门到进阶

Python循环与遍历详解：从入门到进阶

在Python编程中，循环和遍历是最基础但极其重要的知识点。理解并掌握这部分内容，是编写高效、清晰代码的前提。本文将从for循环和while循环的基本语法出发，逐步深入探讨range、enumerate、zip、列表推导式、字典遍历等Python中常见的遍历技巧&…
阅读更多...
Python-MCPServer开发

Python-MCPServer开发

Python-MCPServer开发 使用FastMCP开发【SSE模式的MCPServer】，熟悉【McpServer编码过程】【McpServer调试方法】 1-核心知识点 1-熟悉【SSE模式的MCPServer】开发2-熟悉【stdio模式的MCPServer】开发3-熟悉【启动MCPServer】的三种方式 3.1-直接启动:python mcp_s…
阅读更多...
高级项目管理

高级项目管理

在信息系统项目管理工作中，组织管理者和项目管理者，有时还会面临多项目的管理，或组织级的项目管理、项目的量化管理等课题。 其中，项目集管理、项目组合管理和组织级项目管理，为多项目管理和组织级管理提供有效指导&a…
阅读更多...
tarjan缩点+强联通分量

tarjan缩点+强联通分量

【模板】缩点https://www.luogu.com.cn/problem/P3387 首先我们要理解这道题为什么要用缩点 题目说的是有向图，如果无环的话就可以用DP来解决了 由于可以走重复的点，所以一个环上的点可以看成是一个点，它的点权就等于该环上所有点的点权之…
阅读更多...
OSCP：获取全交互式 Windows 反向 Shell

OSCP：获取全交互式 Windows 反向 Shell

简介 在本文中，我们将探讨获取完全交互式 Windows 反向 Shell 的各种方法，从利用内置工具到采用先进技术以获得更好的控制和功能。 通过 Invoke-ConPtyShell 我获取完全交互式 Windows 反向 Shell 的首选方法是通过 Invoke-ConPtyShell 脚本。当 Wind…
阅读更多...
免费超好用的电脑操控局域网内的手机（多台，无线）

免费超好用的电脑操控局域网内的手机（多台，无线）

使用 第一步 解压QtScrcpy压缩包，并运行QtScrcpy.exe 第二步 2.1 手机开启开发者模式（设置>关于本机>版本信息>连点10下“版本号”） 2.2 开启 USB调试 和 无线调试（设置>开发者选项> USB调试 无线调试&#xf…
阅读更多...
Go语言内存管理

Go语言内存管理

本章节，就来学习一下go语言的内存模型，看一下内存的分配，存储都是如何实现的，与此同时，在正式开始今天的主题之前，首先先来学习操作系统基于这一方面的内容，来看看是如何管理内存的吧 本章及节…
阅读更多...
【docker】启动临时MongoDB容器、挂载数据卷运行数据库服务，并通过备份文件恢复MongoDB数据库备份数据

【docker】启动临时MongoDB容器、挂载数据卷运行数据库服务，并通过备份文件恢复MongoDB数据库备份数据

‌启动临时 MongoDB 容器、挂载数据卷运行数据库服务，并通过备份文件恢复数据 1.命令分解与功能说明1.1.启动一个临时 MongoDB 容器‌，并进入交互式终端（1）执行命令（2）实现功能‌（3）…
阅读更多...
【最新 MCP 战神手册 08】工具使用详解：实现 AI 行动

【最新 MCP 战神手册 08】工具使用详解：实现 AI 行动

文章目录 1. 开始啦！2. 第一部分：设计高效且安全的工具3. 第二部分：定义工具蓝图——参数、输出与约束条件4. 第三部分：弥合差距：LLM 兼容性（函数调用）5. 第四部分：实施与测试的最佳实践1. 开始啦！ 在前几章中，我们将工具介绍为 AI 模型在 MCP 客户端引导下向 MCP 服…
阅读更多...
介绍 IntelliJ IDEA 快捷键操作

介绍 IntelliJ IDEA 快捷键操作

IntelliJ IDEA 快捷键操作 1. 编辑与导航2. 查找与替换3. 调试与运行4. 导航与视图5. 重构与生成6. 高级快捷键（提高效率）注意事项 IntelliJ IDEA 是一款功能强大的集成开发环境，掌握其常用快捷键可以显著提升开发效率。但是有些小伙伴并不清…
阅读更多...
Javascript 中作用域的理解?

Javascript 中作用域的理解?

一、作用域的类型 1. 全局作用域（公司大门外） 范围：整个 JavaScript 文件变量：像贴在公告栏上的信息，所有人可见例子：const companyName "阿里"; // 全局变量，任何地方都能访问 fu…
阅读更多...
Leetcode刷题记录22——滑动窗口最大值

Leetcode刷题记录22——滑动窗口最大值

题源：https://leetcode.cn/problems/sliding-window-maximum/description/?envTypestudy-plan-v2&envIdtop-100-liked 题目描述： 思路一： 暴力遍历法，通过一个长度为k的滑动窗口遍历nums，将其中最大的数依次记…
阅读更多...
Apache Flink的架构设计与运行流程说明

Apache Flink的架构设计与运行流程说明

在大数据领域，实时计算的重要性随着业务需求的爆发式增长愈发凸显。从电商的实时销量监控到金融的高频交易风控，从物联网设备的实时告警到社交平台的热点追踪，企业对“秒级甚至毫秒级”数据处理能力的需求已成为刚需。在众多实时计算框架中&a…
阅读更多...
经典算法 最长单调递增子序列

经典算法 最长单调递增子序列

最长单调递增子序列 问题描述 找出由n个数组成的序列的最长单调递增子序列。 示例输入 9 2 1 5 3 6 4 8 9 7示例输出 5示例输入 6 5 6 7 1 2 8示例输出 4c代码(动态规划 O(n^2)) #include<bits/stdc.h>using namespace std;int main() {int n, ans 0;cin >&g…
阅读更多...
【语法】C++继承中遇到的问题及解决方法

【语法】C++继承中遇到的问题及解决方法

目录 1.子类构造函数中初始化父类成员 2.子类显式调用父类的析构函数 第一种说法&#xff1a;重定义 反驳&#xff1a; 第二种说法&#xff1a;operator~ 3.因编译器版本过低而出现错误 贴主在学习C的继承时&#xff0c;遇到了很多问题&#xff0c;觉得很变态&#xff0c…
阅读更多...
前缀和 后缀和 --- 寻找数组的中心下标

前缀和 后缀和 --- 寻找数组的中心下标

题目链接 寻找数组的中心下标 给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端&#xff0c;那么左侧数之和视为 0 &#xff0c;因为…
阅读更多...
NVIDIA --- 端到端自动驾驶

NVIDIA --- 端到端自动驾驶

前言 参加了NVIDIA 高级辅助驾驶开发者实验室的活动&#xff0c;本次活动基于 NVIDIA 汽车行业的端到端解决方案——DRIVE AGX™ 平台&#xff0c;实现高级别智能和安全性的软硬件开发工具和 AV 基础设施。并且NVIDIA自动驾驶实验室推出了一系列自动驾驶算法最新的前沿研究视频…
阅读更多...
最新文章

Copyright @ 2022~2023