Buckets:

hf-doc-build
/

doc-dev

Files
xet
hf-doc-build/doc-dev / openenv /pr_1241 /en /tutorials /browsergym-harness.html
HuggingFaceDocBuilder
12 days ago
download
raw
28.7 kB
<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;White-Box: Train a Web Agent on BrowserGym&quot;,&quot;local&quot;:&quot;white-box-train-a-web-agent-on-browsergym&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;What You’ll Build&quot;,&quot;local&quot;:&quot;what-youll-build&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Install Dependencies&quot;,&quot;local&quot;:&quot;install-dependencies&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;The Environment Class&quot;,&quot;local&quot;:&quot;the-environment-class&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Reward and Trainer&quot;,&quot;local&quot;:&quot;reward-and-trainer&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Run It&quot;,&quot;local&quot;:&quot;run-it&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Learn More&quot;,&quot;local&quot;:&quot;learn-more&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}"/>
		<link href="/docs/openenv/pr_1241/en/_app/immutable/entry/start.CGChGopW.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/chunks/DqUQG25m.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/chunks/BSuxAqoA.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/entry/app.D6cVSmeA.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/chunks/Ds_1Ru_R.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/chunks/CSRSXRby.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/chunks/DsnmJJEf.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/chunks/BAUKCucN.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/nodes/0.BIVgSZ83.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/chunks/CR5HsSXT.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/nodes/63.C9j9lpbU.js" rel="modulepreload">
		<link href="/docs/openenv/pr_1241/en/_app/immutable/chunks/C07d6Hje.js" rel="modulepreload">
		<!--1h0co43--><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;White-Box: Train a Web Agent on BrowserGym&quot;,&quot;local&quot;:&quot;white-box-train-a-web-agent-on-browsergym&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;What You’ll Build&quot;,&quot;local&quot;:&quot;what-youll-build&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Install Dependencies&quot;,&quot;local&quot;:&quot;install-dependencies&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;The Environment Class&quot;,&quot;local&quot;:&quot;the-environment-class&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Reward and Trainer&quot;,&quot;local&quot;:&quot;reward-and-trainer&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Run It&quot;,&quot;local&quot;:&quot;run-it&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Learn More&quot;,&quot;local&quot;:&quot;learn-more&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}"/><!---->
		<link href="/docs/openenv/pr_1241/en/_app/immutable/assets/0.tn0RQdqM.css" rel="modulepreload"> <!--[--><!--[0--><!--[--><!--[0--><!--[--><p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg><!----></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg><!----></button></div> <!--[-1--><!--]--></div><!----> <!--[0--><h1 class="relative group"><a id="white-box-train-a-web-agent-on-browsergym" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#white-box-train-a-web-agent-on-browsergym"><span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg><!----></span></a> <span>White-Box: Train a Web Agent on BrowserGym</span></h1><!--]--><!----> <p>This tutorial trains a model to complete web tasks in <a href="../environments/browsergym">BrowserGym</a> with TRL’s <code>GRPOTrainer</code>. It is the <strong>white-box</strong> harness path: the trainer, here TRL, owns the agent loop. It samples every turn, parses the tool calls, runs them against the environment and feeds the results back, so it has the token ids and logprobs of everything the model generated without capturing anything. <a href="harnesses">Harnesses in OpenEnv</a> compares it to the other paths, and <a href="../guides/training">Training with OpenEnv</a> lists the other frameworks that train on OpenEnv environments.</p> <p>The full script is TRL’s <a href="https://github.com/huggingface/trl/tree/main/examples/grpo_browsergym" rel="nofollow"><code>examples/grpo_browsergym/grpo_browsergym.py</code></a>. This page walks through its parts.</p> <!--[1--><h2 class="relative group"><a id="what-youll-build" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#what-youll-build"><span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg><!----></span></a> <span>What You’ll Build</span></h2><!--]--><!----> <ul><li>An environment class whose methods are the browser actions the model can call.</li> <li>A reward function that reads the task’s result from the environment.</li> <li>A <code>GRPOTrainer</code> that runs multi-turn episodes against the hosted BrowserGym Space.</li></ul> <!--[1--><h2 class="relative group"><a id="install-dependencies" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#install-dependencies"><span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg><!----></span></a> <span>Install Dependencies</span></h2><!--]--><!----> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600  " title="code excerpt" type="button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg><!----> <div class=" absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0 "><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent;"></div> Copied</div><!----></button><!----></div> <pre class="language-bash "><!---->pip install -U <span class="hljs-string">&quot;trl[vllm]&quot;</span> trackio
pip install <span class="hljs-string">&quot;openenv-browsergym-env @ git+https://huggingface.co/spaces/openenv/browsergym_env&quot;</span><!----></pre></div><!----> <p>The script connects to the hosted Space at <code>https://openenv-browsergym-env.hf.space</code>, so the browser runs there and not on your machine.</p> <!--[1--><h2 class="relative group"><a id="the-environment-class" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#the-environment-class"><span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg><!----></span></a> <span>The Environment Class</span></h2><!--]--><!----> <p><code>environment_factory</code> takes a class with no constructor arguments. TRL creates one instance per rollout and calls <code>reset()</code> at the start of each episode. Every other public method becomes a tool, and its docstring’s <code>Args:</code> section gives the tool’s schema. Each method here sends one BrowserGym action and returns what the page looks like afterwards:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600  " title="code excerpt" type="button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg><!----> <div class=" absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0 "><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent;"></div> Copied</div><!----></button><!----></div> <pre class="language-python "><!----><span class="hljs-keyword">from</span> browsergym_env <span class="hljs-keyword">import</span> BrowserGymAction, BrowserGymEnv


<span class="hljs-keyword">class</span> <span class="hljs-title class_">BrowserGymVLMEnv</span>:
    <span class="hljs-keyword">def</span> <span class="hljs-title function_">__init__</span>(<span class="hljs-params">self</span>):
        <span class="hljs-variable language_">self</span>.client = BrowserGymEnv(base_url=<span class="hljs-string">&quot;https://openenv-browsergym-env.hf.space&quot;</span>)
        <span class="hljs-variable language_">self</span>.reward = <span class="hljs-number">0.0</span>
        <span class="hljs-variable language_">self</span>.done = <span class="hljs-literal">False</span>

    <span class="hljs-keyword">def</span> <span class="hljs-title function_">reset</span>(<span class="hljs-params">self, **kwargs</span>) -&gt; <span class="hljs-built_in">str</span> | <span class="hljs-literal">None</span>:
        <span class="hljs-variable language_">self</span>.reward = <span class="hljs-number">0.0</span>
        <span class="hljs-variable language_">self</span>.done = <span class="hljs-literal">False</span>
        result = <span class="hljs-variable language_">self</span>.client.reset(task_name=<span class="hljs-string">&quot;click-test&quot;</span>)
        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">self</span>._format_observation(result.observation)  <span class="hljs-comment"># the goal and the page&#x27;s accessibility tree</span>

    <span class="hljs-keyword">def</span> <span class="hljs-title function_">click</span>(<span class="hljs-params">self, bid: <span class="hljs-built_in">str</span></span>) -&gt; <span class="hljs-built_in">list</span>:
        <span class="hljs-string">&quot;&quot;&quot;Click an element on the page.

        Args:
            bid: The BrowserGym ID of the element to click.

        Returns:
            The updated page observation with screenshot.
        &quot;&quot;&quot;</span>
        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">self</span>._do_action(<span class="hljs-string">f&quot;click(&#x27;<span class="hljs-subst">{bid}</span>&#x27;)&quot;</span>)

    <span class="hljs-comment"># fill, send_keys, scroll and noop follow the same pattern</span>

    <span class="hljs-keyword">def</span> <span class="hljs-title function_">_do_action</span>(<span class="hljs-params">self, action_str: <span class="hljs-built_in">str</span></span>) -&gt; <span class="hljs-built_in">list</span>:
        result = <span class="hljs-variable language_">self</span>.client.step(BrowserGymAction(action_str=action_str))
        step_reward = <span class="hljs-built_in">float</span>(result.reward <span class="hljs-keyword">or</span> <span class="hljs-number">0.0</span>)
        <span class="hljs-variable language_">self</span>.done = result.done
        <span class="hljs-keyword">if</span> <span class="hljs-variable language_">self</span>.done:
            <span class="hljs-variable language_">self</span>.reward = <span class="hljs-number">1.0</span> <span class="hljs-keyword">if</span> step_reward &gt; <span class="hljs-number">0</span> <span class="hljs-keyword">else</span> <span class="hljs-number">0.0</span>
        <span class="hljs-keyword">else</span>:
            <span class="hljs-variable language_">self</span>.reward = step_reward
        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">self</span>._format_observation_multimodal(result.observation)  <span class="hljs-comment"># screenshot + text</span><!----></pre></div><!----> <p>The string returned by <code>reset()</code> is appended to the prompt. The tools return a list of content blocks, a screenshot and the page’s text, so a vision-language model sees the page after each action. The full script also caps the episode length and resizes the screenshots.</p> <!--[1--><h2 class="relative group"><a id="reward-and-trainer" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#reward-and-trainer"><span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg><!----></span></a> <span>Reward and Trainer</span></h2><!--]--><!----> <p>The reward function receives the environment instances, so it reads the result the episode left behind:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600  " title="code excerpt" type="button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg><!----> <div class=" absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0 "><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent;"></div> Copied</div><!----></button><!----></div> <pre class="language-python "><!----><span class="hljs-keyword">from</span> datasets <span class="hljs-keyword">import</span> Dataset
<span class="hljs-keyword">from</span> trl <span class="hljs-keyword">import</span> GRPOConfig, GRPOTrainer


<span class="hljs-keyword">def</span> <span class="hljs-title function_">reward_completion</span>(<span class="hljs-params">completions, environments, **kwargs</span>) -&gt; <span class="hljs-built_in">list</span>[<span class="hljs-built_in">float</span>]:
    <span class="hljs-keyword">return</span> [env.reward <span class="hljs-keyword">for</span> env <span class="hljs-keyword">in</span> environments]


dataset = Dataset.from_dict({<span class="hljs-string">&quot;prompt&quot;</span>: [[
    {<span class="hljs-string">&quot;role&quot;</span>: <span class="hljs-string">&quot;system&quot;</span>, <span class="hljs-string">&quot;content&quot;</span>: SYSTEM_PROMPT},  <span class="hljs-comment"># how to read the page and which tools exist</span>
    {<span class="hljs-string">&quot;role&quot;</span>: <span class="hljs-string">&quot;user&quot;</span>, <span class="hljs-string">&quot;content&quot;</span>: <span class="hljs-string">&quot;Complete the web task successfully.&quot;</span>},
]] * <span class="hljs-number">1000</span>})

trainer = GRPOTrainer(
    model=<span class="hljs-string">&quot;Qwen/Qwen3.5-2B&quot;</span>,
    reward_funcs=reward_completion,
    train_dataset=dataset,
    args=GRPOConfig(
        num_generations=<span class="hljs-number">4</span>,
        max_completion_length=<span class="hljs-number">1024</span>,
        chat_template_kwargs={<span class="hljs-string">&quot;enable_thinking&quot;</span>: <span class="hljs-literal">False</span>},
        report_to=<span class="hljs-string">&quot;trackio&quot;</span>,
    ),
    environment_factory=BrowserGymVLMEnv,
)
trainer.train()<!----></pre></div><!----> <!--[1--><h2 class="relative group"><a id="run-it" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#run-it"><span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg><!----></span></a> <span>Run It</span></h2><!--]--><!----> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600  " title="code excerpt" type="button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg><!----> <div class=" absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0 "><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent;"></div> Copied</div><!----></button><!----></div> <pre class="language-bash "><!----><span class="hljs-comment"># Transformers generation, one GPU</span>
python examples/grpo_browsergym/grpo_browsergym.py

<span class="hljs-comment"># vLLM on the training GPU</span>
python examples/grpo_browsergym/grpo_browsergym.py --use-vllm

<span class="hljs-comment"># vLLM server on one GPU, training on another</span>
CUDA_VISIBLE_DEVICES=0 VLLM_SERVER_DEV_MODE=1 vllm serve Qwen/Qwen3.5-2B --host 0.0.0.0 --port 8000 \
    --weight-transfer-config <span class="hljs-string">&#x27;{&quot;backend&quot;: &quot;nccl&quot;}&#x27;</span> \
    --logprobs-mode processed_logprobs \
    --max-logprobs -1
CUDA_VISIBLE_DEVICES=1 python examples/grpo_browsergym/grpo_browsergym.py --use-vllm --vllm-mode server<!----></pre></div><!----> <p><code>--task-name</code> picks another MiniWoB task, and <code>--model-id</code> another model.</p> <!--[1--><h2 class="relative group"><a id="learn-more" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#learn-more"><span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg><!----></span></a> <span>Learn More</span></h2><!--]--><!----> <ul><li>TRL’s OpenEnv guide: <a href="https://huggingface.co/docs/trl/openenv#how-environmentfactory-works" rel="nofollow">how <code>environment_factory</code> works</a>, <a href="https://huggingface.co/docs/trl/openenv#multi-environment-training" rel="nofollow">training on several environments at once</a>, and <a href="https://huggingface.co/docs/trl/openenv#environmentfactory-vs-rolloutfunc" rel="nofollow">when to write a <code>rollout_func</code> instead</a>.</li> <li><a href="wordle-grpo">Wordle with TRL</a>, the same pattern on a text game.</li> <li><a href="https://huggingface.co/spaces/FineEnvs/multi-harness-rl" rel="nofollow">The ultimate guide to multi-harness RL</a>, on when the white-box loop is enough and when to train a real agent instead.</li></ul> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/openenv/blob/main/docs/source/tutorials/browsergym-harness.md" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg><!----> <span><span class="underline">Update</span> on GitHub</span></a><!----> <p></p><!--]--><!----><!--]--><!--]--><!--]--> <!--[-1--><!--]--><!--]-->
			
			<script>
				{
					__sveltekit_114fwm1 = {
						base: "/docs/openenv/pr_1241/en",
						assets: "/docs/openenv/pr_1241/en"
					};
					const element = document.currentScript.parentElement;
					Promise.all([
						import("/docs/openenv/pr_1241/en/_app/immutable/entry/start.CGChGopW.js"),
						import("/docs/openenv/pr_1241/en/_app/immutable/entry/app.D6cVSmeA.js")
					]).then(([kit, app]) => {
						kit.start(app, element, {
							node_ids: [0, 63],
							data: [null,null],
							form: null,
							error: null
						});
					});
				}
			</script>
		
Xet Storage Details

Size:: 28.7 kB
Xet hash:: 9b01f9bf1046adc729e65a7d92a2984606b143a3182d40d64800e1bbee237c57
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.