0721-brower-use框架

转载学习：AI操作网页：browser-use和AI大模型互动解析
开源的 AI 驱动的浏览器自动化框架browser-use：https://github.com/browser-use/browser-use

browser-use框架的核心功能

• 自动化浏览器任务
  
  
  
  • 支持复杂操作：购物结账、LinkedIn数据同步、简历投递、文档生成等。
    
  • 开源框架，通过AI代理实现网页操作自动化，如将杂货商品添加到购物车并完成结账等。
    
  
  

技术实现解析

高效的大模型交互设计

• SystemMessage：定义AI角色与规则，使用Markdown结构化提示（如输入格式、响应规则）。
  
• HumanMessage：动态传递任务指令、历史记录（标记[Task history memory]）、当前页面状态（URL、交互元素等）。
  
• AIMessage：输出严格遵循JSON格式，包含状态评估（evaluation_previous_goal）、记忆（memory）、下一步目标（next_goal）及操作序列（action）。
  
• ToolMessage：调用浏览器操作工具（如点击、输入），记录执行结果。
  

关键交互技巧

• 结构化输出控制：通过LangChain的with_structured_output强制AI返回预设JSON结构。
  
• 动态任务拆分：将复杂任务分解为原子操作（如“打开网址→输入密码→点击登录”）。
  
• 多模态输入支持：结合文本描述与页面截图（标注交互元素索引），提升操作准确性。
  
• 状态跟踪：memory字段记录进度（如“已完成2/5步骤”），避免任务中断。
  

可复用的交互设计Tips

• Markdown结构化提示：提升系统指令可读性。
  
• 输入标准化：在SystemMessage中定义特殊数据结构（如交互元素[index]Submit）。
  
• 记忆管理：通过current_state.memory让AI自主记录关键信息。
  
• 消息分段：用标记分隔历史记录与实时状态（如[Current state starts here]）。
  
• 示例引导：用AIMessage展示预期输出格式。
  
• 工具链集成：ToolMessage实现外部操作（如浏览器控制）。
  
• 输出强约束：利用LangChain严格限制AI响应结构。
  

识别页面内容

结构化文本描述

• 交互元素标记：页面元素被转化为带索引的标记格式
  1. [index]<type>text</type>

  复制代码
  （如
  1. [10]<button>账号登录</button>

  复制代码
  ），其中：
  
  
  
  • index：唯一数字标识符（如10）
    
  • type：HTML元素类型（如按钮、输入框）
    
  • text：元素描述文本
    
  
  
• 非交互元素标注：无索引标记（如 []Non-interactive text）仅提供上下文信息。
  
• 页面边界标识：通过 [Start of page] 和 [End of page] 明确页面内容范围。
  

视觉辅助（截图+标注）

• 图像输入：提供页面截图，并在图片中直接标注元素索引（如将索引号显示在元素右上角）。
  
• 多模态支持：视觉信息帮助大模型理解页面布局，尤其对复杂组件（如嵌套表单）识别更精准。
  

动态状态反馈

• 当前页面信息：实时提供
  
  
  
  • URL地址
    
  • 打开的标签页列表
    
  • 可视区域内所有交互元素列表
    
  • 当前步骤进度（如 Current step: 2/100）
    
  
  

历史记忆与上下文

• 任务历史标记：通过
  1. [Your task history memory starts here]

  复制代码
  和
  1. [Task history memory ends]

  复制代码
  分隔历史记录，确保大模型跟踪操作流程。
  
  
  
  
• 记忆字段：在输出中设计 memory 字段，要求大模型主动记录进度（如“已完成3/10个步骤”）。
  

严格的输出约束

• JSON结构化输出：强制大模型返回固定格式的JSON，包含
  1. {
  2.   "current_state": {
  3.     "evaluation_previous_goal": "状态分析",
  4.     "memory": "进度记忆",
  5.     "next_goal": "下一步目标"
  6.   },
  7.   "action": [{"操作类型": {"参数": "值"}}] // 如点击、输入文本
  8. }

  复制代码
• LangChain工具支持：使用 with_structured_output 方法强制输出符合预定结构。
  

关键优势

• 非多模态兼容：仅凭文本描述即可完成任务（无截图时仍可操作）。
  
• 防误操作机制：仅允许通过索引号操作标记为交互的元素，避免误触非交互内容。
  
• 容错设计：当元素缺失时，提示大模型尝试替代方案（如后退、新标签页搜索）。
  

示例：在登录页面中，大模型通过索引定位到 [5]账户名（用户名框）、[6]密码（密码框）、[10]<button>账号登录</button>（提交按钮），并生成操作序列：输入文本→输入密码→点击登录。

这种结合结构化描述、视觉辅助和严格输出控制的方法，使大模型能高效准确地识别并操作网页组件。
总结

browser-use通过精细的提示工程和多角色消息协作（System/Human/AI/ToolMessage），实现了复杂网页任务的自动化。其核心是将自然语言指令转化为可执行的浏览器操作序列，并通过状态跟踪、结构化输出确保任务可靠性。提出的7条交互设计原则（如Markdown提示、动态记忆管理）可泛化至其他AI代理场景。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！