Windows 中搭建 browser-use WebUI 1.4



1. 背景介绍

背景:想要在 Windows 中复现 browser-use WebUI pickle反序列化漏洞,该漏洞在 v1.7 版本中已经修复,所以需要搭建 小于 1.7 版本的环境,我这里搭建的是 1.4 版本。

项目地址:https://github.com/browser-use/web-ui.git


2. 搭建过程


新建一个目录:WebUI

在这个目录中打开cmd,克隆仓库:git clone https://github.com/browser-use/web-ui.git

进入安装目录:cd web-ui

切换到1.4版本:git checkout v1.4

一定要切换版本,最新版已经修复了,在webui的目录下执行命令:git describe --tags
这个命令会输出你当前所在的 版本 tag(如果在 tag 上),或显示你基于哪个 tag 派生出来的。

在这里插入图片描述



官方建议使用 uv 来管理 Python 环境。

安装 uv:pip install uv

使用 uv:uv venv --python 3.11

激活虚拟环境:.venv\Scripts\activate

在这里插入图片描述



在安装依赖前需要做一些改动。按照直接 clone 下来的 requirements ,最后启动的时候会一直报错错:TypeError: argument of type 'bool' is not iterable

反复试了很多次,最后自己摸索出来的解决办法是修改 requirements.txt 文件,将 gradio 的版本改为 5.23.1:gradio==5.23.1



(在虚拟环境中)安装python依赖:uv pip install -r requirements.txt

在 Windows 的 cmd 命令行中,进入 Python 虚拟环境后的标志通常是在命令行提示符前面看到虚拟环境的名称。前面的 (web-ui) 表示你当前已经激活了名为 web-ui 的虚拟环境(名称取决于你创建虚拟环境时使用的名字),后是你当前所在的目录路径:

在这里插入图片描述

安装浏览器运行环境:playwright install

(安装这个环境的话,使用 web-ui 的时候不选择用自己的浏览器,就会启动现在安装的浏览器环境。如果想用自己的浏览器,就不用安装这个,后面再修改一下配置文件即可。)



(在虚拟环境中)配置环境:copy .env.example .env

配置文件 .env ,可以在里面修改浏览器的地址,设置各种 api 等。



(在虚拟环境中)启用 WebUI:python webui.py --ip 192.168.119.1 --port 7788

在浏览器中访问:http://192.168.119.1:7788

3. 补充


如果前面没有安装浏览器运行环境,想使用自己的浏览器,需要做以下更改。

在 .env 文件中修改:

CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
CHROME_USER_DATA="C:\Users\你的username\AppData\Local\Google\Chrome\User Data"

CHROME_PERSISTENT_SESSION=true

在这里插入图片描述

其中:

CHROME_PATH 是浏览器的执行文件的路径,需要自己做修改,不要直接复制。

CHROME_USER_DATA 是浏览器的数据目录,需要自己做修改,不要直接复制。

CHROME_PERSISTENT_SESSION 是设置让浏览器一直打开,可选项。

接下来:

  • 关闭所有 Chrome 窗口
  • 在非 Chrome 浏览器(如 Firefox 或 Edge)中打开 WebUI (192.168.119.1:7788)。这一点很重要,因为持久性浏览器上下文将在运行代理时使用 Chrome 数据。
  • 选中浏览器设置中的“使用自己的浏览器”选项。

在这里插入图片描述





### 如何在浏览器中使用WebUI 为了实现通过WebUI与浏览器进行交互的功能,可以参考以下方法: #### 1. 使用Browser Use工具 Browser Use 是一种基于AI的技术解决方案,允许开发者创建脚本以自动化浏览器操作。例如,可以通过其API执行诸如自动填写表单、抓取网页数据以及模拟点击等功能[^1]。 以下是简单的集成方式: - 安装 Browser Use 的客户端库。 - 配置可视化界面(如果需要),以便更直观地管理任务流。 ```javascript // 假设这是调用Browser Use API的一个简单例子 const browserUse = require('browser-use'); async function automateTask() { const session = await browserUse.startSession(); await session.navigate('https://example.com'); await session.click('#some-button'); const data = await session.extractText('.content-class'); console.log(data); } automateTask(); ``` #### 2. 统一弹出窗口样式 对于涉及复杂用户界面的应用程序开发,比如ASP.NET Web Forms项目,可以利用XafPopupWindowControl来定义统一的弹出窗口行为和外观[^2]。这有助于提升用户体验的一致性和可维护性。 设置默认宽度高度以及其他参数如下所示: ```csharp using DevExpress.ExpressApp.Web; public class PopupConfigurator : IDisposable { public PopupConfigurator() { XafPopupWindowControl.DefaultWidth = Unit.Pixel(800); XafPopupWindowControl.DefaultHeight = Unit.Pixel(600); XafPopupWindowControl.PopupTemplateType = typeof(CustomPopupTemplate); XafPopupWindowControl.ShowPopupMode = ShowPopupMode.Modal; } public void Dispose() {} } // 在Global.asax.cs文件里初始化配置器实例 protected void Application_Start(object sender, EventArgs e) { var popupConfigurer = new PopupConfigurator(); } ``` #### 3. 构建React组件用于区块链互动 当涉及到现代前端框架如React时,还可以构建自定义控件完成特定功能需求——像链接钱包地址或者部署智能合约这样的场景就可以借助下面这段代码片段展示的方式去达成目标[^3]。 上述提到的例子展示了如何检测MetaMask插件状态并与之通信的过程。一旦成功建立连接,则能够进一步触发其他业务逻辑处理动作。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值