如何配置 CAMEL HybridBrowserToolkit 的 Full Visual Mode 让视觉模型按像素坐标操作浏览器【免费下载链接】camel CAMEL: The first and the best multi-agent framework. Finding the Scaling Law of Agents. https://www.camel-ai.org项目地址: https://gitcode.com/GitHub_Trending/ca/camel当你让视觉模型如文档示例中的GPT_4O驱动浏览器时默认路径是模型读取页面快照拿到元素的refID如e15再用browser_click(refe15)这类调用操作元素。但有些场景下你希望模型直接看图操作——从截图像素上判断位置用(x, y)坐标点击和输入。CAMEL 的HybridBrowserToolkit通过full_visual_modeTrue提供这一能力启用后浏览器操作工具自动切换为像素坐标签名截图会叠加像素标尺帮助视觉模型准确定位点击位置。本文基于仓库文档 docs/key_modules/browsertoolkit.md 讲解完整配置与验证方式。准备条件与安装Full Visual Mode 在 TypeScript 模式默认和 Python 模式下均受支持文档的模式对比表均标注 Supported。两种安装路径# 安装 CAMEL 的 browser 支持 pip install camel-ai[browser] # TypeScript 模式推荐默认首次使用时 toolkit 自动安装 Node.js 依赖 # Python 模式需要另外安装 Playwright 浏览器 playwright install chromium如果你的浏览器起不来先按文档的排查项检查TypeScript 模式确认 Node.js 可用Python 模式执行playwright install chromium。启用 Full Visual Mode 创建 toolkit关键只有一处改动在HybridBrowserToolkit初始化时传入full_visual_modeTrue该参数默认值为False。文档给出的配置如下示例中的350、200、400、150等坐标和邮箱地址均为文档示例值实际任务中由视觉模型根据截图自行给出from camel.toolkits import HybridBrowserToolkit toolkit HybridBrowserToolkit( full_visual_modeTrue, headlessFalse, ) # 获取带像素标尺的截图用于坐标识别 screenshot await toolkit.browser_get_screenshot() # 按像素坐标点击该模式下 ref 参数不可用 await toolkit.browser_click(x350, y200) # 在指定坐标输入文本 await toolkit.browser_type(x400, y150, textuserexample.com)启用后工具签名会发生什么变化这是 Full Visual Mode 的核心行为来自文档的说明1. 工具签名自动切换为像素版。原本使用refID 的工具自动改为像素参数且 docstring 同步更新——模型在工具列表中只能看到像素版签名而不是两个版本并存工具标准模式Full Visual Modebrowser_clickclick(refe15)click(x350, y200)browser_typetype(refe8, text...)type(x350, y200, text...)browser_mouse_dragdrag(from_refe1, to_refe2)drag(from_x100, from_y100, to_x300, to_y200)2. 无像素替代方案的工具被自动剔除。以下三个工具仅依赖ref且没有像素版会从工具列表中自动排除browser_select、browser_get_page_snapshot、browser_get_som_screenshot。也就是说视觉模型不再拿 Set-of-Marks 标注截图而是依赖纯截图加标尺。3. 截图叠加像素标尺。启用后browser_get_screenshot返回的截图会在顶部和左侧边缘添加标尺标尺内容为每 100 像素一个带数字标注的主刻度每 50 和 10 像素一个中等刻度每 5 像素一个次要刻度对应源码中tick_interval100的_add_rulers_to_image处理见 hybrid_browser_toolkit_ts.py。另外源文件 hybrid_browser_toolkit.py 的参数文档说明full_visual_modeTrue时click、browser_open、visit_page等浏览器动作会返回full visual mode形式的快照而不是实际页面内容但browser_get_page_snapshot方法本身仍会返回真实页面快照——只是该工具不会暴露给 agent。接入 ChatAgent 执行完整浏览器任务toolkit 配置好后按标准方式挂到ChatAgent上即可工具通过toolkit.get_tools()提供。以下组合了文档中 Quick Start 的 agent 写法与 Full Visual Mode 的 toolkit 配置import asyncio from camel.agents import ChatAgent from camel.models import ModelFactory from camel.toolkits import HybridBrowserToolkit from camel.types import ModelPlatformType, ModelType async def main(): # 启用 Full Visual Mode 的 toolkit toolkit HybridBrowserToolkit( full_visual_modeTrue, headlessFalse, ) # 文档示例使用 GPT-4O需为视觉可用模型 model ModelFactory.create( model_platformModelPlatformType.OPENAI, model_typeModelType.GPT_4O, ) agent ChatAgent( modelmodel, toolstoolkit.get_tools(), max_iteration15, ) try: response await agent.astep( Go to example.com, take a screenshot, then click the target link and type into the input field. ) print(response.msgs[0].content) finally: await toolkit.browser_close() asyncio.run(main())任务提示词怎么写、迭代次数设多少文档没有给出针对 Full Visual Mode 的专门建议上面只是按文档ChatAgent集成示例max_iteration15组装的结构示例toolstoolkit.get_tools()会带出当前模式下签名已切换后的工具集。更完整的自定义工具选择写法可参考 examples/toolkits/hybrid_browser_toolkit_example.py该示例展示的是标准模式的enabled_tools用法。验证配置是否生效文档给出了三个可以实际核对的点1. 检查工具签名。打印toolkit.get_tools()中browser_click的 docstringFull Visual Mode 下应出现Clicks at the specified pixel coordinates on the page... provide the x,y coordinates这类像素版描述而不再是 ref 版描述。文档明确指出你只会看到像素签名。2. 检查截图带标尺。调用browser_get_screenshot返回的图片顶部和左侧边缘应有刻度标尺且每 100 像素处有数字标注。3. 利用无效点击反馈自校验。文档说明当一次点击没有改变页面内容快照保持不变时toolkit 会将其识别为可能无效的点击并返回包含距离最近的 5 个可交互元素及其可点击坐标的反馈帮助模型不用重新截图就能修正点击位置。文档示例标注为文档示例数值仅供理解格式Click at (350, 200) may be ineffective - page content unchanged. Nearest interactive elements: 1. [button] Submit - click at (380, 195), area: (340, 180) to (420, 210) 2. [link] Learn more - click at (290, 240), area: (250, 230) to (330, 250) 3. [textbox] Email - click at (400, 150), area: (300, 140) to (500, 160) ...任务最终成功的判定与文档中其他浏览器任务一致agent.astep(...)返回的response.msgs[0].content中包含模型对任务结果的描述结束时务必调用await toolkit.browser_close()清理浏览器进程。限制与边界三个工具不可用browser_select下拉选择、browser_get_page_snapshot、browser_get_som_screenshot在 Full Visual Mode 下被自动排除模型无法按 ref 选择下拉项或读取文本快照这类交互只能靠截图加坐标完成。坐标来源是截图像素签名版 docstring 要求先用browser_get_screenshot视觉定位再给出x, y其中x为从视口左边缘起的水平像素位置y为从视口上边缘起的垂直像素位置不要脱离带标尺的截图凭空给坐标。模式选择文档的对比表将 TypeScript 模式默认modetypescript列为生产推荐Full Visual Mode 两种模式均支持如用 Python 模式初始化时加modepython并完成playwright install chromium。需要排查会话细节时可配合文档的日志参数browser_log_to_fileTrue、log_dir、session_id日志默认写入browser_log目录。完整的工具清单DEFAULT_TOOLS/ALL_TOOLS、超时参数与 CDP 连接等其余配置项可继续查阅 docs/key_modules/browsertoolkit.md。【免费下载链接】camel CAMEL: The first and the best multi-agent framework. Finding the Scaling Law of Agents. https://www.camel-ai.org项目地址: https://gitcode.com/GitHub_Trending/ca/camel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何配置 CAMEL HybridBrowserToolkit 的 Full Visual Mode 让视觉模型按像素坐标操作浏览器？
如何配置 CAMEL HybridBrowserToolkit 的 Full Visual Mode 让视觉模型按像素坐标操作浏览器【免费下载链接】camel CAMEL: The first and the best multi-agent framework. Finding the Scaling Law of Agents. https://www.camel-ai.org项目地址: https://gitcode.com/GitHub_Trending/ca/camel当你让视觉模型如文档示例中的GPT_4O驱动浏览器时默认路径是模型读取页面快照拿到元素的refID如e15再用browser_click(refe15)这类调用操作元素。但有些场景下你希望模型直接看图操作——从截图像素上判断位置用(x, y)坐标点击和输入。CAMEL 的HybridBrowserToolkit通过full_visual_modeTrue提供这一能力启用后浏览器操作工具自动切换为像素坐标签名截图会叠加像素标尺帮助视觉模型准确定位点击位置。本文基于仓库文档 docs/key_modules/browsertoolkit.md 讲解完整配置与验证方式。准备条件与安装Full Visual Mode 在 TypeScript 模式默认和 Python 模式下均受支持文档的模式对比表均标注 Supported。两种安装路径# 安装 CAMEL 的 browser 支持 pip install camel-ai[browser] # TypeScript 模式推荐默认首次使用时 toolkit 自动安装 Node.js 依赖 # Python 模式需要另外安装 Playwright 浏览器 playwright install chromium如果你的浏览器起不来先按文档的排查项检查TypeScript 模式确认 Node.js 可用Python 模式执行playwright install chromium。启用 Full Visual Mode 创建 toolkit关键只有一处改动在HybridBrowserToolkit初始化时传入full_visual_modeTrue该参数默认值为False。文档给出的配置如下示例中的350、200、400、150等坐标和邮箱地址均为文档示例值实际任务中由视觉模型根据截图自行给出from camel.toolkits import HybridBrowserToolkit toolkit HybridBrowserToolkit( full_visual_modeTrue, headlessFalse, ) # 获取带像素标尺的截图用于坐标识别 screenshot await toolkit.browser_get_screenshot() # 按像素坐标点击该模式下 ref 参数不可用 await toolkit.browser_click(x350, y200) # 在指定坐标输入文本 await toolkit.browser_type(x400, y150, textuserexample.com)启用后工具签名会发生什么变化这是 Full Visual Mode 的核心行为来自文档的说明1. 工具签名自动切换为像素版。原本使用refID 的工具自动改为像素参数且 docstring 同步更新——模型在工具列表中只能看到像素版签名而不是两个版本并存工具标准模式Full Visual Modebrowser_clickclick(refe15)click(x350, y200)browser_typetype(refe8, text...)type(x350, y200, text...)browser_mouse_dragdrag(from_refe1, to_refe2)drag(from_x100, from_y100, to_x300, to_y200)2. 无像素替代方案的工具被自动剔除。以下三个工具仅依赖ref且没有像素版会从工具列表中自动排除browser_select、browser_get_page_snapshot、browser_get_som_screenshot。也就是说视觉模型不再拿 Set-of-Marks 标注截图而是依赖纯截图加标尺。3. 截图叠加像素标尺。启用后browser_get_screenshot返回的截图会在顶部和左侧边缘添加标尺标尺内容为每 100 像素一个带数字标注的主刻度每 50 和 10 像素一个中等刻度每 5 像素一个次要刻度对应源码中tick_interval100的_add_rulers_to_image处理见 hybrid_browser_toolkit_ts.py。另外源文件 hybrid_browser_toolkit.py 的参数文档说明full_visual_modeTrue时click、browser_open、visit_page等浏览器动作会返回full visual mode形式的快照而不是实际页面内容但browser_get_page_snapshot方法本身仍会返回真实页面快照——只是该工具不会暴露给 agent。接入 ChatAgent 执行完整浏览器任务toolkit 配置好后按标准方式挂到ChatAgent上即可工具通过toolkit.get_tools()提供。以下组合了文档中 Quick Start 的 agent 写法与 Full Visual Mode 的 toolkit 配置import asyncio from camel.agents import ChatAgent from camel.models import ModelFactory from camel.toolkits import HybridBrowserToolkit from camel.types import ModelPlatformType, ModelType async def main(): # 启用 Full Visual Mode 的 toolkit toolkit HybridBrowserToolkit( full_visual_modeTrue, headlessFalse, ) # 文档示例使用 GPT-4O需为视觉可用模型 model ModelFactory.create( model_platformModelPlatformType.OPENAI, model_typeModelType.GPT_4O, ) agent ChatAgent( modelmodel, toolstoolkit.get_tools(), max_iteration15, ) try: response await agent.astep( Go to example.com, take a screenshot, then click the target link and type into the input field. ) print(response.msgs[0].content) finally: await toolkit.browser_close() asyncio.run(main())任务提示词怎么写、迭代次数设多少文档没有给出针对 Full Visual Mode 的专门建议上面只是按文档ChatAgent集成示例max_iteration15组装的结构示例toolstoolkit.get_tools()会带出当前模式下签名已切换后的工具集。更完整的自定义工具选择写法可参考 examples/toolkits/hybrid_browser_toolkit_example.py该示例展示的是标准模式的enabled_tools用法。验证配置是否生效文档给出了三个可以实际核对的点1. 检查工具签名。打印toolkit.get_tools()中browser_click的 docstringFull Visual Mode 下应出现Clicks at the specified pixel coordinates on the page... provide the x,y coordinates这类像素版描述而不再是 ref 版描述。文档明确指出你只会看到像素签名。2. 检查截图带标尺。调用browser_get_screenshot返回的图片顶部和左侧边缘应有刻度标尺且每 100 像素处有数字标注。3. 利用无效点击反馈自校验。文档说明当一次点击没有改变页面内容快照保持不变时toolkit 会将其识别为可能无效的点击并返回包含距离最近的 5 个可交互元素及其可点击坐标的反馈帮助模型不用重新截图就能修正点击位置。文档示例标注为文档示例数值仅供理解格式Click at (350, 200) may be ineffective - page content unchanged. Nearest interactive elements: 1. [button] Submit - click at (380, 195), area: (340, 180) to (420, 210) 2. [link] Learn more - click at (290, 240), area: (250, 230) to (330, 250) 3. [textbox] Email - click at (400, 150), area: (300, 140) to (500, 160) ...任务最终成功的判定与文档中其他浏览器任务一致agent.astep(...)返回的response.msgs[0].content中包含模型对任务结果的描述结束时务必调用await toolkit.browser_close()清理浏览器进程。限制与边界三个工具不可用browser_select下拉选择、browser_get_page_snapshot、browser_get_som_screenshot在 Full Visual Mode 下被自动排除模型无法按 ref 选择下拉项或读取文本快照这类交互只能靠截图加坐标完成。坐标来源是截图像素签名版 docstring 要求先用browser_get_screenshot视觉定位再给出x, y其中x为从视口左边缘起的水平像素位置y为从视口上边缘起的垂直像素位置不要脱离带标尺的截图凭空给坐标。模式选择文档的对比表将 TypeScript 模式默认modetypescript列为生产推荐Full Visual Mode 两种模式均支持如用 Python 模式初始化时加modepython并完成playwright install chromium。需要排查会话细节时可配合文档的日志参数browser_log_to_fileTrue、log_dir、session_id日志默认写入browser_log目录。完整的工具清单DEFAULT_TOOLS/ALL_TOOLS、超时参数与 CDP 连接等其余配置项可继续查阅 docs/key_modules/browsertoolkit.md。【免费下载链接】camel CAMEL: The first and the best multi-agent framework. Finding the Scaling Law of Agents. https://www.camel-ai.org项目地址: https://gitcode.com/GitHub_Trending/ca/camel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考