十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

cua-bench 环境脚手架完全指南:用装饰器与 HTML 构建计算机使用 RL 基准任务

cua-bench 环境脚手架完全指南:用装饰器与 HTML 构建计算机使用 RL 基准任务 cua-bench 环境脚手架完全指南用装饰器与 HTML 构建计算机使用 RL 基准任务【免费下载链接】cuaScale computer-use 2.0 with open-source drivers, cross-OS fleets, and benchmarks for training, evaluation, and data generation.项目地址: https://gitcode.com/GitHub_Trending/cua/cuacua-bench 是当前仓库libs/cua-bench中用于评测与训练 Computer-Use Agent 的框架其核心任务环境采用Python 装饰器 HTML GUI的轻量脚手架结构。本文以 typing-input 任务的脚手架文档为主体结合仓库源码decorators.py、actions.py、core.py 等与真实任务实现typing-input/main.py系统讲解如何从零编写一个可被强化学习RL训练循环消费的计算机使用任务环境。读完本文你将掌握cb.tasks_config、cb.setup_task、cb.solve_task、cb.evaluate_task四个装饰器的职责与用法、动作类型与屏幕尺寸的选择、以及 GUI 侧的window.__score/window.__next_move()约定能够独立开发属于自己的 cua-bench 任务。一、环境脚手架的整体结构cua-bench 创建的计算机使用 RL 环境遵循一个非常精简的目录约定。以libs/cua-bench/datasets/cua-bench-basic/下的任一任务为例每个任务文件夹固定包含四个文件main.pyPython 装饰器承载全部任务逻辑任务定义、环境搭建、求解、评估gui/HTML/CSS/JS 构成的 UI模板中自动包含 Tailwind 与 Iconifypyproject.toml项目元数据与依赖其中[tool.cua-bench]段声明任务描述、难度、类别CLAUDE.md脚手架编写规范文档。从源码看任务被加载时make()会通过importlib动态加载任务目录下的main.py模块再由Environment.make_from_module从模块中读取被装饰器标记的函数见 core.py。cb.tasks_config、cb.setup_task、cb.solve_task、cb.evaluate_task四个装饰器会把函数注册进一个以环境路径为键的全局注册表分别对应tasks_config/setup_task/solve_task/evaluate_task四个槽位见 decorators.py。每个装饰器都支持两种用法裸用cb.tasks_config或带参cb.tasks_config(splittrain)split参数默认值为train用于区分训练/测试数据划分。二、cb.tasks_config定义任务清单与元数据cb.tasks_config装饰的函数负责返回list[cb.Task]。每个Task由三部分构成见 core.py 中Task数据类的字段定义descriptionAgent 听到的任务指令例如Play 2048、Book a hotel、Type \Hello World\ into the Username input field.metadata任务参数难度、尺寸、OS、轮数等供 setup / solve / evaluate 阶段读取用于生成变体computer可选的计算环境配置包含provider与setup_config见下文屏幕尺寸一节。return [cb.Task(descriptionPlay 2048, metadata{size: 4, os_type: linux})]实际任务中该函数通常使用列表推导式批量生成变体。看 typing-input/main.py 的实现它定义了 5 种打字场景用户名、邮箱、密码、验证码、长文本再与操作系统类型当前仅linux注释中预留了macos、win11、win10做笛卡尔积一次性生成 5 个任务并为每个任务声明了provider: native、width: 1024、height: 768以及背景色#c0c0c0。三、cb.setup_task搭建沙箱并启动 WebView 窗口cb.setup_task装饰的函数在任务开始时被调用负责创建沙箱并启动 webview 窗口。规范要求此阶段保持最小化——只做环境搭建不要掺入任何求解逻辑。global pid env.create_sandbox(providercomputer, setup_config{os_type: linux, width: 800, height: 600}) pid env.launch_window(htmlhtml_content, titleGame, width400, height400) # create webview windowenv.create_sandbox(...)创建目标操作系统沙箱。在 environment.py 中实现setup_config决定操作系统与屏幕分辨率如果任务在Task.computer中声明了provider与setup_config甚至可以省略显式调用源码在reset()阶段会自动调用见 environment.py。env.launch_window(html..., title..., width..., height...)在桌面环境中打开一个渲染 HTML 的 webview 窗口返回窗口句柄pid。不同 provider 有各自的实现如 computers/remote.py 基于 pywebview。typing-input任务的 setup 展示了模板渲染这一典型手法先从gui/index.html读取 HTML 模板用str.replace把{{FIELD_LABEL}}占位符替换为当前任务的字段标签再以 400x300 的窗口尺寸启动见 typing-input/main.py。注意这里定义的pid是模块级全局变量——因为main.py中 setup/solve/evaluate 三个函数各自运行在独立的进程/协程上下文中需要通过global pid共享窗口句柄。四、gui/任务 UI 的实现规范gui/目录承载所有游戏/任务逻辑。其 HTML 会被渲染在一个Tailwind Iconify 模板内的桌面 webview 窗口中因此不要写html或body标签——只需给出内容片段。脚手架文档明确了以下关键模式语义化 HTML ARIA使用语义元素main、section、button、nav等并为可交互元素补充aria-label、aria-describedby、role属性。这既服务无障碍访问也让 Agent 能更可靠地识别目标元素。紧凑响应式布局使用最小化内边距/外边距p-1、p-2、gap-1、gap-2布局需能适配从弹窗尺寸300x200到全屏桌面避免固定高度/宽度使用min-h-0、overflow-auto保证视口缩小时关键元素依然可见。全局状态将当前得分存到window.__score0.0~1.0 区间供 RL 奖励使用。AI 基线用 JavaScript 实现 AI 策略通过window.__next_move()暴露给求解层。窗口尺寸根元素使用classflex h-full w-full撑满整个窗口。图标使用iconify-icon iconprefix:name/iconify-icon。以 typing-input/gui/index.html 为真实范例根节点main使用flex flex-col h-full w-full p-6内部是max-w-md mx-auto的居中容器输入框带aria-labelText input field信息提示区用iconify-icon iconmdi:information图标。脚本部分通过监听输入框的input与blur事件把当前值写入window.__inputValue这个全局变量即后续评估的可观测状态——注意这里任务未使用window.__next_move()而是把值直接暴露给 Python 求解层读取两种模式都是允许的。五、cb.solve_taskAI 求解主循环cb.solve_task装饰的函数负责从 GUI 的 AI 策略获取下一步动作并通过env.step或env.bot执行。脚手架文档给出的完整循环模式如下global pid action env.execute_javascript(pid, window.__next_move()) while action is not None and action[type] ! done: if not action or action[type] wait: env.step(WaitAction(seconds1.0)) elif action[type] click_element: env.bot.click_element(pid, f#{action[element_id]}) # safest way to click an element elif action[type] click_absolute: env.step(ClickAction(xaction[x], yaction[y])) # x,y must be in screen coordinates (requires offsetting by window.screenX and window.screenY) elif action[type] type: env.step(TypeAction(textaction[text])) action env.execute_javascript(pid, window.__next_move()) env.step(DoneAction())该循环与window.__next_move()构成求解器 ↔ GUI 策略之间的协议规范中有几条硬性约束只能通过env.step或env.bot执行真正改变环境的动作env.execute_javascript只能用于执行返回最优动作信息的辅助函数如目标元素、或实现了最优策略的 AI 输出GUI 中的window.__next_move()只应返回下一步动作不得自行执行动作或修改环境/状态——实际动作由env.step/env.bot执行window.__next_move()仅在任务未完成时返回下一步动作通常被cb.solve_task中的循环持续调用直到任务解决。typing-input的 solve 实现展示了更简洁的写法先session.click_element(pid, #text-input)聚焦输入框再session.execute_action(cb.TypeAction(text...))键入目标文本见 typing-input/main.py。两种写法本质等价env.bot系列辅助方法自带可行动性actionability逻辑会自动等待元素变为可点击因此除非任务必须如等待页面加载应避免使用WaitAction。六、cb.evaluate_task从 GUI 状态计算奖励cb.evaluate_task装饰的函数在任务结束时调用从 GUI 状态读取结果并返回奖励列表global pid score env.execute_javascript(pid, window.__score) return [float(score)] # 0.0-1.0 range preferredtyping-input的评估同样直观通过execute_javascript读取window.__inputValue与任务元数据中的期望文本做精确比对匹配返回[1.0]否则返回[0.0]见 typing-input/main.py。这种二值奖励 全局状态暴露的模式是 cua-bench 基础任务的标准做法对于需要更细粒度反馈的任务可返回 0.0~1.0 之间的连续分数。七、可用动作类型一览env.step()支持的动作类定义于 actions.py类型定义在 types.py按类别归纳如下鼠标类动作参数说明ClickAction(x, y)屏幕坐标单击RightClickAction(x, y)屏幕坐标右键单击DoubleClickAction(x, y)屏幕坐标双击DragAction(from_x, from_y, to_x, to_y, duration1.0)起止坐标 时长拖拽ScrollAction(directionup\|down, amount100)方向 滚动量滚轮滚动源码中还额外支持MiddleClickAction与MoveToAction见 actions.py。键盘类动作参数说明TypeAction(texthello)字符串逐字键入文本KeyAction(keyEnter)键名按下单个按键HotkeyAction(keys[ctrl, c])键名列表组合键控制类动作参数说明DoneAction()无声明任务完成结束 episodeWaitAction(seconds1.0)秒数等待默认 1.0 秒在 worker 服务器 / 训练数据管线中这些动作对象还会被序列化为字符串或字典进行传输与解析repr_to_action解析ClickAction(x100, y200)这类 repr 格式snake_case_to_action解析click(0.5, 0.5)这类简洁格式parse_action_string自动探测并分派到对应解析器见 actions.py。八、Iconify 图标系统GUI 内可直接使用iconify-icon元素引入可缩放矢量图标iconify-icon iconeva:people-outline/iconify-icon iconify-icon iconmingcute:ad-circle-line width24 height24/iconify-icon iconify-icon iconmdi:play classtext-blue-500 stylefont-size: 2rem;/iconify-icon图标会被自动处理并替换为内联 SVG支持全部 Iconify 图标集eva、mingcute、mdi 等。仓库在 iconify.py 中实现了图标处理逻辑并有对应单元测试 test_iconify.py 保障替换正确性。九、屏幕尺寸选择屏幕尺寸通过env.create_sandbox的setup_config参数指定脚手架文档给出了完整的StandardScreenSize可选集合StandardScreenSize Union[ # Standard Desktop Resolutions tuple[Literal[1920], Literal[1080]], # Full HD (current default) tuple[Literal[1366], Literal[768]], # HD (laptop standard) tuple[Literal[2560], Literal[1440]], # 2K/QHD tuple[Literal[3840], Literal[2160]], # 4K/UHD tuple[Literal[1280], Literal[720]], # HD Ready tuple[Literal[1600], Literal[900]], # HD tuple[Literal[1920], Literal[1200]], # WUXGA tuple[Literal[2560], Literal[1600]], # WQXGA tuple[Literal[3440], Literal[1440]], # Ultrawide QHD tuple[Literal[5120], Literal[1440]], # Super Ultrawide # Mobile/Tablet Resolutions tuple[Literal[1024], Literal[768]], # iPad (portrait) tuple[Literal[768], Literal[1024]], # iPad (landscape) tuple[Literal[360], Literal[640]], # Mobile portrait tuple[Literal[640], Literal[360]], # Mobile landscape # Legacy Resolutions tuple[Literal[1024], Literal[600]], # Netbook tuple[Literal[800], Literal[600]], # SVGA tuple[Literal[640], Literal[480]], # VGA # Additional Common Resolutions tuple[Literal[1440], Literal[900]], # Custom laptop tuple[Literal[1680], Literal[1050]], # WSXGA tuple[Literal[1920], Literal[1440]], # Custom 4:3 ratio tuple[Literal[2560], Literal[1080]], # Ultrawide Full HD tuple[Literal[3440], Literal[1440]], # Ultrawide QHD tuple[Literal[3840], Literal[1080]], # Super Ultrawide Full HD ]选择原则根据任务类型与环境挑选合适的屏幕尺寸。桌面应用类任务如打字、表单、电子表格通常使用 1024x768 或 1920x1080移动端场景则选择 360x640 等竖屏尺寸。同时注意pyproject.toml中[tool.cua-bench]可声明difficulty如easy与category如grounding帮助任务归类与筛选见 typing-input/pyproject.toml。十、最佳实践总结保持main.py最小化——只放装饰器与基本逻辑环境搭建、任务加载等所有玩法逻辑放进gui/的 JavaScriptAI 策略放在 GUI 侧通过window.__next_move()暴露RL 奖励状态放在window.__score0.0~1.0 区间用 Task metadata 参数化变体——难度、尺寸、操作系统、轮数等都作为 metadata 传入一份代码生成一组任务避免滥用WaitAction——env.bot辅助方法自带可行动性逻辑等待元素可点击仅在任务确实需要如等待页面加载时才显式等待所有x,y坐标均为屏幕坐标屏幕左上角为原点(0,0)需要跨浏览器视口偏移时使用window.screenX与window.screenY计算偏移量。十一、动手运行从交互调试到完整评测编写完成的任务可通过以下命令交互式运行验证见 cua-bench-basic READMEpython -m cua_bench.interact task-folder/main.py # 示例 python -m cua_bench.interact typing-input/main.pyinteract会以非 headless 模式加载环境、打印动作轨迹并展示截图实现见 core.py方便人工核对 Agent 的行为是否符合预期。安装开发依赖后还可运行框架自身的测试套件验证动作解析、worker 客户端/服务端、gym 接口等核心机制见 cua-bench READMEuv pip install -e .[dev,browser,server,rl] uv run --with pytest pytest cua_bench/tests/ -vcua-bench-basic 数据集共包含 13 类基础交互任务——从click-button、fill-form、typing-input、spreadsheet-cell到select-dropdown、color-picker、date-picker、drag-slider、toggle-switch、video-player、right-click-menu、drag-drop等。它们共用本文所述的同一套脚手架规范理解typing-input的完整链路后其余任务以及你自己的新任务都可以按同样的四装饰器模式快速搭建为训练、评估与数据生成提供标准化的计算机使用环境。【免费下载链接】cuaScale computer-use 2.0 with open-source drivers, cross-OS fleets, and benchmarks for training, evaluation, and data generation.项目地址: https://gitcode.com/GitHub_Trending/cua/cua创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表