轉載學習：AI操作網頁：browser-use和AI大模型互動解析

開源的 AI 驅動的瀏覽器自動化框架browser-use：https://github.com/browser-use/browser-use

browser-use框架的核心功能

1. 自動化瀏覽器任務
   • 支持復雜操作：購物結賬、LinkedIn數(shù)據(jù)同步、簡歷投遞、文檔生成等。
   • 開源框架，通過AI代理實現(xiàn)網頁操作自動化，如將雜貨商品添加到購物車并完成結賬等。

技術實現(xiàn)解析

高效的大模型交互設計

• SystemMessage：定義AI角色與規(guī)則，使用Markdown結構化提示（如輸入格式、響應規(guī)則）。
• HumanMessage：動態(tài)傳遞任務指令、歷史記錄（標記[Task history memory]）、當前頁面狀態(tài)（URL、交互元素等）。
• AIMessage：輸出嚴格遵循JSON格式，包含狀態(tài)評估（evaluation_previous_goal）、記憶（memory）、下一步目標（next_goal）及操作序列（action）。
• ToolMessage：調用瀏覽器操作工具（如點擊、輸入），記錄執(zhí)行結果。

關鍵交互技巧

• 結構化輸出控制：通過LangChain的with_structured_output強制AI返回預設JSON結構。
• 動態(tài)任務拆分：將復雜任務分解為原子操作（如“打開網址→輸入密碼→點擊登錄”）。
• 多模態(tài)輸入支持：結合文本描述與頁面截圖（標注交互元素索引），提升操作準確性。
• 狀態(tài)跟蹤：memory字段記錄進度（如“已完成2/5步驟”），避免任務中斷。

可復用的交互設計Tips

1. Markdown結構化提示：提升系統(tǒng)指令可讀性。
2. 輸入標準化：在SystemMessage中定義特殊數(shù)據(jù)結構（如交互元素[index]<button>Submit</button>）。
3. 記憶管理：通過current_state.memory讓AI自主記錄關鍵信息。
4. 消息分段：用標記分隔歷史記錄與實時狀態(tài)（如[Current state starts here]）。
5. 示例引導：用AIMessage展示預期輸出格式。
6. 工具鏈集成：ToolMessage實現(xiàn)外部操作（如瀏覽器控制）。
7. 輸出強約束：利用LangChain嚴格限制AI響應結構。

識別頁面內容

結構化文本描述

• 交互元素標記：頁面元素被轉化為帶索引的標記格式

  [index]<type>text</type>
  

  （如

  [10]<button>賬號登錄</button>
  

  ），其中：

  • index：唯一數(shù)字標識符（如10）
  • type：HTML元素類型（如按鈕、輸入框）
  • text：元素描述文本

• 非交互元素標注：無索引標記（如 []Non-interactive text）僅提供上下文信息。

• 頁面邊界標識：通過 [Start of page] 和 [End of page] 明確頁面內容范圍。

視覺輔助（截圖+標注）

• 圖像輸入：提供頁面截圖，并在圖片中直接標注元素索引（如將索引號顯示在元素右上角）。
• 多模態(tài)支持：視覺信息幫助大模型理解頁面布局，尤其對復雜組件（如嵌套表單）識別更精準。

動態(tài)狀態(tài)反饋

• 當前頁面信息：實時提供
  • URL地址
  • 打開的標簽頁列表
  • 可視區(qū)域內所有交互元素列表
  • 當前步驟進度（如 Current step: 2/100）

歷史記憶與上下文

• 任務歷史標記：通過

  [Your task history memory starts here]
  

  和

  [Task history memory ends]
  

  分隔歷史記錄，確保大模型跟蹤操作流程。

  

• 記憶字段：在輸出中設計 memory 字段，要求大模型主動記錄進度（如“已完成3/10個步驟”）。

嚴格的輸出約束

• JSON結構化輸出：強制大模型返回固定格式的JSON，包含

  {
    "current_state": {
      "evaluation_previous_goal": "狀態(tài)分析",
      "memory": "進度記憶",
      "next_goal": "下一步目標"
    },
    "action": [{"操作類型": {"參數(shù)": "值"}}] // 如點擊、輸入文本
  }
  

• LangChain工具支持：使用 with_structured_output 方法強制輸出符合預定結構。

關鍵優(yōu)勢

• 非多模態(tài)兼容：僅憑文本描述即可完成任務（無截圖時仍可操作）。
• 防誤操作機制：僅允許通過索引號操作標記為交互的元素，避免誤觸非交互內容。
• 容錯設計：當元素缺失時，提示大模型嘗試替代方案（如后退、新標簽頁搜索）。

示例：在登錄頁面中，大模型通過索引定位到 [5]<input>賬戶名（用戶名框）、[6]<input>密碼（密碼框）、[10]<button>賬號登錄（提交按鈕），并生成操作序列：輸入文本→輸入密碼→點擊登錄。

這種結合結構化描述、視覺輔助和嚴格輸出控制的方法，使大模型能高效準確地識別并操作網頁組件。

總結

browser-use通過精細的提示工程和多角色消息協(xié)作（System/Human/AI/ToolMessage），實現(xiàn)了復雜網頁任務的自動化。其核心是將自然語言指令轉化為可執(zhí)行的瀏覽器操作序列，并通過狀態(tài)跟蹤、結構化輸出確保任務可靠性。提出的7條交互設計原則（如Markdown提示、動態(tài)記憶管理）可泛化至其他AI代理場景。