使用LLMs、Playwright和瀏覽器技術來建立AI瀏覽器代理

教學

瀏覽器使用是一種工具或平台，旨在使AI代理（如OpenAI的GPT模型或其他大型語言模型）能夠以智能和自動化的方式與網絡瀏覽器進行交互和控制。它本質上橋接了AI能力和現實世界瀏覽器互動之間的差距，使AI系統能夠執行像導航網站、提取數據、填寫表單、點擊按鈕等任務 – 就像人類用戶一樣。

瀏覽器使用的主要目標 是通過抽象化瀏覽器自動化的複雜性，使網站對AI代理可訪問且可操作。瀏覽器使用簡化了這一過程，而不是要求開發人員編寫複雜的腳本來定位和交互網頁元素，它通過提取所有交互元素（如按鈕、輸入字段、鏈接等）並為AI代理提供結構化接口來進行交互。

瀏覽器使用的關鍵特徵

AI驅動自動化

瀏覽器使用利用AI來理解並與網頁互動。例如，它可以分析網頁的內容，識別相關操作（如點擊按鈕或填寫表單），並自主執行這些操作。

視覺+HTML提取

它結合了視覺理解（識別屏幕上的元素）和HTML結構提取（解析網頁的底層代碼）。這種雙重方法確保了AI代理可以與靜態和動態網頁元素進行交互，即使它們沒有明確的標識符，如ID或類。

多標籤管理

瀏覽器使用可以同時處理多個瀏覽器分頁，使得 AI 代理能夠執行涉及與多個網頁同時互動的複雜工作流程。

該工具追蹤 AI 代理執行的確切操作（例如點擊按鈕或填寫表單），並且能夠一致地複製這些操作，即使網站佈局稍有變化。這對於在 QA 自動化中創建自我修復測試非常有用。

自定義操作

用戶可以通過添加自定義操作（例如將數據保存到文件、執行數據庫操作、發送通知或在自動化過程的特定步驟處理人類輸入）來擴展瀏覽器使用的功能。

自我校正

瀏覽器使用包括智能錯誤處理和自動恢復機制。如果自動化過程中出現問題（例如缺少元素或網絡超時），該工具可以檢測問題並嘗試自動恢復，確保工作流程不中斷。

與多個 LLM 的兼容性

瀏覽器使用支持各種大型語言模型（LLMs），包括 OpenAI 的 GPT-4、Anthropic 的 Claude 和 Meta 的 Llama 2。這種靈活性允許用戶為其特定需求選擇最佳的 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是一個由瀏覽器使用的瀏覽器自動化庫。

要安裝它，運行以下命令：

Shell

 

瀏覽器使用WebUI的本地設置指南

完成瀏覽器使用的安裝步驟後，您可以開始在本地運行WebUI。本指南將引導您啟動應用程序，自定義其設置，並在需要時配置它以使用您自己的瀏覽器。

運行WebUI

完成安裝步驟後，您可以通過運行以下命令來啟動瀏覽器使用WebUI：

Shell

 

WebUI提供了幾個選項來自定義其行為。以下是可用標誌的詳細說明：

  • --ip– 綁定WebUI的IP地址
    • 默認值 – 127.0.0.1（本地主機）
  • --port– 綁定WebUI的端口
    • 默認值 – 7788
  • --主題 – 用戶界面的主題

訪問 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’，點擊搜尋並給我第一個網址。

在下面的屏幕截圖中，您可以看到當我們運行提示時，它將打開Chromium瀏覽器並與頁面的整個 DOM 互動。

最後，它將在搜索框中輸入 Playwright，您可以看到下面的屏幕截圖。

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

在後端，您可以看到所有日誌都被執行；無論代理正在執行什麼日誌，所有日誌都在後端。

結果

在結果選項卡中，您可以看到最終結果、模型動作、模型思路、跟踪文件和代理歷史。

視頻

您可以點擊提供的鏈接下載視頻。您也可以在“錄製”選項卡下看到附加的視頻。當您運行視頻時，您將看到代理執行的所有步驟。

以下是視頻的一些屏幕截圖。

結論

整合LLMs、Playwright和瀏覽器使用代表了瀏覽器自動化和人工智能驅動工作流程的新飛躍。結合這些工具將使您能夠創建能夠執行複雜任務的智能瀏覽器代理，只需極少的人工干預。從自動化重複性流程到實現動態QA測試和即時決策，可能性是無限的。

參考

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