使用大型语言模型、Playwright 和浏览器构建 AI 浏览器代理

教程

浏览器使用是一个工具或平台，旨在使人工智能代理（如OpenAI的GPT模型或其他大型语言模型）能够以智能和自动化的方式与网页浏览器进行交互和控制。它本质上弥合了人工智能能力与现实世界浏览器交互之间的差距，使人工智能系统能够执行诸如浏览网站、提取数据、填写表单、点击按钮等任务——就像人类用户一样。

浏览器使用的主要目标 是通过抽象浏览器自动化的复杂性，使网站对人工智能代理可访问和可操作。浏览器使用简化了这一过程，无需开发人员编写复杂的脚本来定位和与网页元素交互，而是提取所有交互元素（如按钮、输入字段、链接等），并为人工智能代理提供一个结构化的接口进行交互。

浏览器使用的关键特性

人工智能驱动的自动化

浏览器使用利用人工智能理解和与网页交互。例如，它可以分析网页内容，识别相关操作（如点击按钮或填写表单），并自主执行这些操作。

视觉 + HTML 提取

它将视觉理解（识别屏幕上的元素）与HTML结构提取（解析网页的底层代码）相结合。这种双重方法确保人工智能代理能够与静态和动态网页元素进行交互，即使它们没有像ID或类这样的明确标识符。

多标签管理

浏览器使用可以同时处理多个浏览器选项卡，使AI代理能够执行涉及同时与多个网页交互的复杂工作流程。

该工具跟踪AI代理执行的确切操作（例如，点击按钮或填写表单），并能够始终如一地复制这些操作，即使网站布局略有变化。这在创建自愈测试的质量保证自动化中尤为有用。

自定义操作

用户可以通过添加自定义操作来扩展浏览器使用功能，例如将数据保存到文件、执行数据库操作、发送通知或在自动化过程中某些步骤中处理人类输入。

自我修正

浏览器使用包含智能错误处理和自动恢复机制。如果在自动化过程中出现问题（例如，缺少元素或网络超时），该工具可以检测到问题并尝试自动恢复，确保工作流程不受干扰地继续进行。

与多种大型语言模型的兼容性

浏览器使用支持多种大型语言模型（LLMs），包括OpenAI的GPT-4、Anthropic的Claude和Meta的Llama 2。这种灵活性使用户能够选择最适合其特定需求的AI模型。

浏览器使用的工作原理

浏览器使用扫描网页并提取所有交互元素（按钮、输入字段、链接、表单等）。然后，它提供这些元素的结构化表示，AI代理可以理解并与之交互。

AI交互

一旦识别出交互元素，AI代理可以执行诸如点击按钮、填写表单、在页面之间导航或提取数据等操作。AI代理还可以分析网页内容，并根据其找到的信息做出决策。

自动化工作流程

浏览器使用允许用户创建复杂的自动化工作流程。例如，AI代理可以在电子商务网站上导航，向购物车添加商品并完成购买——所有这些都无需人工干预。

错误处理和恢复

如果在自动化过程中出现问题（例如，缺少元素或页面加载缓慢），浏览器使用可以检测到该问题并尝试自动恢复。这确保了工作流程在不可预测的环境中也能顺利进行。

安装指南

开始使用浏览器使用非常简单，但需要一些初始设置以确保一切顺利运行。以下是基于您提供的先决条件和步骤的详细安装指南。此指南将指导您在本地计算机上设置浏览器使用。

先决条件

在开始之前，请确保您的系统满足以下要求：

  • Python 3.11 或更高版本。你可以通过运行以下命令来检查你的 Python 版本：
    Python

     

  • Git。Git是克隆仓库所必需的

本地安装

步骤1：克隆仓库

Shell

 

步骤2：设置Python环境

我们建议使用uv来管理Python环境（推荐用于Mac）：

Shell

 

1. Create a virtual environment. Run the following command to create a virtual environment with Python 3.11:

Shell

 

2. Activate the virtual environment.
  • Windows（命令提示符）：
    Shell

     

  • macOS/Linux:
    Shell

     

激活后，您应该在终端提示符中看到 .venv，这表示虚拟环境已激活。

步骤 3：安装依赖项

现在您的环境已设置好，是时候安装必要的依赖项了。

安装 Python 包。使用以下命令安装 requirements.txt 中列出的所需 Python 包：

Shell

 

步骤 4：安装 Playwright

Playwright 是一个由 Browser Use 使用的浏览器自动化库。

要安装它，请运行以下命令：

Shell

 

Browser Use WebUI 的本地设置指南

完成 Browser Use 的安装步骤后，您可以开始在本地运行 WebUI。本指南将指导您启动应用程序、自定义其设置，并在需要时配置为使用您自己的浏览器。

运行 WebUI

完成安装步骤后，您可以通过运行以下命令启动 Browser Use WebUI：

Shell

 

WebUI 提供了多个选项来定制其行为。以下是可用标志的详细说明：

  • --ip– 绑定 WebUI 的 IP 地址
    • 默认 – 127.0.0.1（本地主机）
  • --port– 绑定 WebUI 的端口
    • 默认 – 7788
  • --theme – 用户界面的主题

访问 WebUI

一旦 WebUI 运行，打开您的网页浏览器并导航到：

Plain Text

 

Once the above command is executed, you should see the Browser Use interface, where you can interact with the tool and configure AI-driven browser automation tasks.

LLM 配置

在 LLM 配置中，选择一个语言模型，例如 gemini。Gemini 提供免费的 API 密钥。

Generate the API keys from the link attached below.

在下面的截图中，您可以看到我们添加了通过上述链接生成的 API 密钥。

运行代理

在运行代理中，让我们给出提示 “前往 amazon.in 输入 ‘Playwright’ 点击搜索并给我第一个 URL。

在下面的截图中，您可以看到当我们运行提示时，它将打开 Chromium 浏览器并与页面的整个 DOM 进行交互。

最后，它将在搜索框中输入值 Playwright，您可以看到下面的截图。

In the below screenshot, you can see it gives us the first URL.

在后台，您可以看到所有日志的执行；无论代理执行什么日志，所有日志都在后台。

结果

在结果标签中，您可以看到最终结果、模型动作、模型思考、跟踪文件和代理历史记录。

视频

您可以通过点击提供的链接下载视频。您还可以在录音标签下查看附加的视频。当您播放视频时，您将看到代理执行的所有步骤。

以下是一些 视频截图。

结论

LLM、Playwright和浏览器使用的整合代表了浏览器自动化和人工智能驱动工作流程的新飞跃。结合这些工具将使您能够创建智能浏览器代理，能够在最少的人为干预下执行复杂任务。从自动化重复流程到实现动态质量保证测试和实时决策，可能性是无穷无尽的。

参考

Source:
https://dzone.com/articles/build-ai-browser-agent-llms-playwright-browser-use