使用 browser-use-webui 进行网页信息填写和录入

引言

在数字化时代，网页信息填写和录入是许多业务流程中的重要环节，例如注册账户、提交在线表单或更新个人信息。这些任务往往耗时且容易出错，而自动化工具的引入可以显著提高效率并减少人为失误。GitHub 上的 browser-use/web-ui 项目为这一需求提供了一个创新且实用的解决方案。

事实上，browser-use 已经提供了一个通用的浏览器自动化工具，但 browser-use/web-ui 更进一步，提供了一个基于 Gradio 构建的 Web 用户界面，并支持多种大型语言模型（LLM），包括 Google、OpenAI、Azure OpenAI、Anthropic、DeepSeek 和 Ollama 等。它允许用户在浏览器中运行 AI 代理，自动完成网页交互任务。该工具的独特功能包括支持自定义浏览器（无需重复登录网站）、高清屏幕录制以及持久化浏览器会话，非常适合需要高效处理网页任务的用户。

本文将详细介绍如何通过本地安装（使用 pip）和 Docker 安装两种方式使用 browser-use/web-ui，并提供完整的操作流程。

效果展示

使用过程

以下是使用 browser-use/web-ui 的两种主要安装和运行方式：本地安装（pip） 和 Docker 安装。请根据您的需求选择适合的方法。

Docker 安装

1. 克隆仓库

与本地安装相同，克隆项目仓库：

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

2. 创建并配置环境文件

复制并编辑环境文件：

• Windows (Command Prompt)：

copy .env.example .env

• macOS/Linux/Windows (PowerShell)：

cp .env.example .env

编辑 .env 文件，添加 API 密钥，例如：

OPENAI_API_KEY=your_openai_key
VNC_PASSWORD=your_vnc_password  # 可选，设置 VNC 密码

3. 运行 Docker

根据需求选择运行模式：

• 默认模式（任务后关闭浏览器）：

docker compose up --build

• 持久化模式（任务间保持浏览器打开）：

CHROME_PERSISTENT_SESSION=true docker compose up --build

4. 访问应用程序

• Web 界面：打开浏览器，访问 http://localhost:7788。
• VNC 查看器（观察浏览器交互）：访问 http://localhost:6080/vnc.html，输入 VNC 密码（默认“youvncpassword”，或 .env 中设置的密码）。

5. 容器管理（可选）

• 后台运行：

docker compose up -d

• 查看日志：

docker compose logs -f

• 停止容器：

docker compose down

本地安装（使用 pip）

克隆仓库

首先，打开终端并运行以下命令，克隆项目仓库到本地：

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

设置 Python 环境

建议使用 Python 3.11，并通过 uv 工具创建虚拟环境。执行以下命令：

uv venv --python 3.11

激活虚拟环境：

• Windows (Command Prompt)：

.venv\Scripts\activate

• Windows (PowerShell)：

.\.venv\Scripts\Activate.ps1

• macOS/Linux：

source .venv/bin/activate

安装依赖

安装项目所需的 Python 包和 Playwright：

uv pip install -r requirements.txt
playwright install

配置环境

复制示例环境文件并编辑，添加您的 API 密钥和其他配置：

• Windows (Command Prompt)：

copy .env.example .env

• macOS/Linux/Windows (PowerShell)：

cp .env.example .env

使用文本编辑器打开 .env 文件，填写必要信息，例如：

OPENAI_API_KEY=your_openai_key
CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"  # Windows 示例
CHROME_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data"  # Windows 示例

运行 Web UI

启动应用程序：

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

访问 Web UI

打开浏览器，导航到 http://127.0.0.1:7788，即可使用 Web 界面。

使用自定义浏览器（可选）

如果需要使用自己的浏览器（如已登录账户的 Chrome），在 .env 文件中设置：

• Windows：

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

• macOS：

CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
CHROME_USER_DATA="/Users/YourUsername/Library/Application Support/Google/Chrome"

关闭所有 Chrome 窗口，在非 Chrome 浏览器（如 Firefox）中打开 Web UI，并在界面中勾选“Use Own Browser”选项。

保持浏览器打开（可选）

若希望在 AI 任务间保持浏览器窗口打开，可在 .env 中设置：

CHROME_PERSISTENT_SESSION=true

使用 VNC 访问浏览器可以连接 5901 端口，而使用 Web UI 访问浏览器可以连接 6080 端口。

结论

browser-use/web-ui 是一个功能强大且灵活的工具，能够有效自动化网页信息填写和录入任务。通过支持多种大型语言模型和自定义浏览器配置，它可以无缝集成到现有工作流程中。无论是选择本地安装（pip）还是 Docker 部署，用户都能通过简单的步骤快速上手，显著提升工作效率并减少错误。对于需要频繁处理网页交互的用户来说，这款工具无疑是一个值得尝试的解决方案。

问题解决

旧版本 docker compose 升级

sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

sudo apt update
sudo apt install docker-compose-plugin

docker compose version

参考

1. browser-use/web-ui GitHub 仓库
2. 项目文档