import base64 import dataclasses import io import logging import numpy as np import openai from PIL import Image from browsergym.core.action.highlevel import HighLevelActionSet from browsergym.core.action.python import PythonActionSet from browsergym.experiments import AbstractAgentArgs, Agent from browsergym.utils.obs import flatten_axtree_to_str, flatten_dom_to_str, prune_html logger = logging.getLogger(__name__) def image_to_jpg_base64_url(image: np.ndarray | Image.Image): """Convert a numpy array to a base64 encoded image url.""" if isinstance(image, np.ndarray): image = Image.fromarray(image) if image.mode in ("RGBA", "LA"): image = image.convert("RGB") with io.BytesIO() as buffer: image.save(buffer, format="JPEG") image_base64 = base64.b64encode(buffer.getvalue()).decode() return f"data:image/jpeg;base64,{image_base64}" class DemoAgent(Agent): """A basic agent using OpenAI API, to demonstrate BrowserGym's functionalities.""" def obs_preprocessor(self, obs: dict) -> dict: return { "chat_messages": obs["chat_messages"], "screenshot": obs["screenshot"], "goal_object": obs["goal_object"], "last_action": obs["last_action"], "last_action_error": obs["last_action_error"], "open_pages_urls": obs["open_pages_urls"], "open_pages_titles": obs["open_pages_titles"], "active_page_index": obs["active_page_index"], "axtree_txt": flatten_axtree_to_str(obs["axtree_object"]), "pruned_html": prune_html(flatten_dom_to_str(obs["dom_object"])), } def __init__( self, model_name: str, chat_mode: bool, demo_mode: str, use_html: bool, use_axtree: bool, use_screenshot: bool, ) -> None: super().__init__() self.model_name = model_name self.chat_mode = chat_mode self.use_html = use_html self.use_axtree = use_axtree self.use_screenshot = use_screenshot if not (use_html or use_axtree): raise ValueError(f"Either use_html or use_axtree must be set to True.") self.openai_client = openai.OpenAI() self.action_set = HighLevelActionSet( subsets=["chat", "tab", "nav", "bid", "infeas"], # define a subset of the action space # subsets=["chat", "bid", "coord", "infeas"] # allow the agent to also use x,y coordinates strict=False, # less strict on the parsing of the actions multiaction=False, # does not enable the agent to take multiple actions at once demo_mode=demo_mode, # add visual effects ) # use this instead to allow the agent to directly use Python code # self.action_set = PythonActionSet()) self.action_history = [] def get_action(self, obs: dict) -> tuple[str, dict]: system_msgs = [] user_msgs = [] if self.chat_mode: system_msgs.append( { "type": "text", "text": f"""\ # Instructions You are a UI Assistant, your goal is to help the user perform tasks using a web browser. You can communicate with the user via a chat, to which the user gives you instructions and to which you can send back messages. You have access to a web browser that both you and the user can see, and with which only you can interact via specific commands. Review the instructions from the user, the current state of the page and all other information to find the best possible next action to accomplish your goal. Your answer will be interpreted and executed by a program, make sure to follow the formatting instructions. """, } ) # append chat messages user_msgs.append( { "type": "text", "text": f"""\ # Chat Messages """, } ) for msg in obs["chat_messages"]: if msg["role"] in ("user", "assistant", "infeasible"): user_msgs.append( { "type": "text", "text": f"""\ - [{msg['role']}] {msg['message']} """, } ) elif msg["role"] == "user_image": user_msgs.append({"type": "image_url", "image_url": msg["message"]}) else: raise ValueError(f"Unexpected chat message role {repr(msg['role'])}") else: assert obs["goal_object"], "The goal is missing." system_msgs.append( { "type": "text", "text": f"""\ # Instructions Review the current state of the page and all other information to find the best possible next action to accomplish your goal. Your answer will be interpreted and executed by a program, make sure to follow the formatting instructions. """, } ) # append goal user_msgs.append( { "type": "text", "text": f"""\ # Goal """, } ) # goal_object is directly presented as a list of openai-style messages user_msgs.extend(obs["goal_object"]) # append url of all open tabs user_msgs.append( { "type": "text", "text": f"""\ # Currently open tabs """, } ) for page_index, (page_url, page_title) in enumerate( zip(obs["open_pages_urls"], obs["open_pages_titles"]) ): user_msgs.append( { "type": "text", "text": f"""\ Tab {page_index}{" (active tab)" if page_index == obs["active_page_index"] else ""} Title: {page_title} URL: {page_url} """, } ) # append page AXTree (if asked) if self.use_axtree: user_msgs.append( { "type": "text", "text": f"""\ # Current page Accessibility Tree {obs["axtree_txt"]} """, } ) # append page HTML (if asked) if self.use_html: user_msgs.append( { "type": "text", "text": f"""\ # Current page DOM {obs["pruned_html"]} """, } ) # append page screenshot (if asked) if self.use_screenshot: user_msgs.append( { "type": "text", "text": """\ # Current page Screenshot """, } ) user_msgs.append( { "type": "image_url", "image_url": { "url": image_to_jpg_base64_url(obs["screenshot"]), "detail": "auto", }, # Literal["low", "high", "auto"] = "auto" } ) # append action space description user_msgs.append( { "type": "text", "text": f"""\ # Action Space {self.action_set.describe(with_long_description=False, with_examples=True)} Here are examples of actions with chain-of-thought reasoning: I now need to click on the Submit button to send the form. I will use the click action on the button, which has bid 12. ```click("12")``` I found the information requested by the user, I will send it to the chat. ```send_msg_to_user("The price for a 15\\" laptop is 1499 USD.")``` """, } ) # append past actions (and last error message) if any if self.action_history: user_msgs.append( { "type": "text", "text": f"""\ # History of past actions """, } ) user_msgs.extend( [ { "type": "text", "text": f"""\ {action} """, } for action in self.action_history ] ) if obs["last_action_error"]: user_msgs.append( { "type": "text", "text": f"""\ # Error message from last action {obs["last_action_error"]} """, } ) # ask for the next action user_msgs.append( { "type": "text", "text": f"""\ # Next action You will now think step by step and produce your next best action. Reflect on your past actions, any resulting error message, and the current state of the page before deciding on your next action. """, } ) prompt_text_strings = [] for message in system_msgs + user_msgs: match message["type"]: case "text": prompt_text_strings.append(message["text"]) case "image_url": image_url = message["image_url"] if isinstance(message["image_url"], dict): image_url = image_url["url"] if image_url.startswith("data:image"): prompt_text_strings.append( "image_url: " + image_url[:30] + "... (truncated)" ) else: prompt_text_strings.append("image_url: " + image_url) case _: raise ValueError( f"Unknown message type {repr(message['type'])} in the task goal." ) full_prompt_txt = "\n".join(prompt_text_strings) logger.info(full_prompt_txt) # query OpenAI model response = self.openai_client.chat.completions.create( model=self.model_name, messages=[ {"role": "system", "content": system_msgs}, {"role": "user", "content": user_msgs}, ], ) action = response.choices[0].message.content self.action_history.append(action) return action, {} @dataclasses.dataclass class DemoAgentArgs(AbstractAgentArgs): """ This class is meant to store the arguments that define the agent. By isolating them in a dataclass, this ensures serialization without storing internal states of the agent. """ model_name: str = "gpt-4o-mini" chat_mode: bool = False demo_mode: str = "off" use_html: bool = False use_axtree: bool = True use_screenshot: bool = False def make_agent(self): return DemoAgent( model_name=self.model_name, chat_mode=self.chat_mode, demo_mode=self.demo_mode, use_html=self.use_html, use_axtree=self.use_axtree, use_screenshot=self.use_screenshot, )