[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功能點：
- 提供了全新的網頁界面，簡單好用，方便操作。
- 支持更多大語言模型，比如 Gemini、OpenAI、Azure 、國產大模型 DeepSeek、通義千問等。
- 支持用自己的瀏覽器，不用再反復登錄，還能錄屏。
- 定制了更智能的 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. 使用內置瀏覽器
-
配置瀏覽器參數：
-
下發指令執行任務：
輸入指令，然后點擊運行
- 查看瀏覽器效果：
在主界面，上方的設置導航中選擇 Agent Settings，如果你本地部署的大模型不支持視覺識別，可以把這個使用視覺【Use Vision】取消勾選，不然后續讓 AI 執行任務時會報錯。
- 我這里支持，因此我勾選后，瀏覽器頁面出現如下：
該項目原理就是將瀏覽器頁面上所有的元素都標記下來（打上編號），然后把元素編號以及元素代表的含義，告訴AI，由AI來判斷用戶需求需要操作哪些元素，然后調用API去操作對應元素。
- 控制臺成功輸出結果：
2. 使用本地瀏覽器
即：使用我們在.env配置的本地瀏覽器
注意：使用本地Chrome瀏覽器時，需要把自己本地Chrome瀏覽器關閉，由AI去打開。
-
打開本地瀏覽器開關
-
比如我們這里輸入自己的要求
-
大模型已經識別到了我們的需求，并開始操作瀏覽器元素：
-
最后頁面效果：
-
查看控制臺日志，也正常拆解并完成了任務
可以看到效果還是挺不錯的，只要模型好，這里可玩性還是挺高的。比如：針對頁面操作實現自動化測試等
3. 深度搜索模式
提出需求，最后會根據我們的需求，輸出一個文檔，適合做旅游規劃，周報日報等。
- 會默認進行三次的深度查找，最后把查找到的結果輸出一個md文檔
-
這里讓模型幫我們做一個旅游規劃
-
模型會查詢網上內容
-
最后會給我們一個可下載的Markdown文檔
Tips
1. 瀏覽器免登錄
我們可以通過使用自己的瀏覽器，然后配置上對應的cookie信息，實現免登錄
- 瀏覽器插件安裝edit cookies（或其他cookie管理插件）
- 導出cookie信息
- web-ui.py文件中添加cookie信息
- 重新運行項目，同時使用自己本地的瀏覽器，就可以看到我們瀏覽器訪問某些頁面時是登錄狀態了
2. 項目原理
- 根據用戶輸出，拆分任務（規劃任務：完成這個任務需要哪幾步）
-
將任務拆分為具體的動作，比如通過百度打開咪咕視頻，瀏覽器需要在搜索欄輸入百度網址，然后輸入框輸入咪咕視頻，并點擊搜索
-
分析完后，操作頁面元素，執行對應動作，搜索框輸入文字，點擊對應按鈕等
-
for循環調用執行器，直到任務最終完成
 返回error)
 SSL certificate problem)
