Home

Awesome

WebArena: A Realistic Web Environment for Building Autonomous Agents

<p align="center"> <img src="media/logo.png" alt="Logo" width="80px"> <br> <b>WebArena is a standalone, self-hostable web environment for building autonomous agents</b> </p> <p align="center"> <a href="https://www.python.org/downloads/release/python-3109/"><img src="https://img.shields.io/badge/python-3.10-blue.svg" alt="Python 3.10"></a> <a href="https://pre-commit.com/"><img src="https://img.shields.io/badge/pre--commit-enabled-brightgreen?logo=pre-commit&logoColor=white" alt="pre-commit"></a> <a href="https://github.com/psf/black"><img src="https://img.shields.io/badge/code%20style-black-000000.svg" alt="Code style: black"></a> <a href="https://mypy-lang.org/"><img src="https://www.mypy-lang.org/static/mypy_badge.svg" alt="Checked with mypy"></a> <a href="https://beartype.readthedocs.io"><img src="https://raw.githubusercontent.com/beartype/beartype-assets/main/badge/bear-ified.svg" alt="bear-ified"></a> </p> <p align="center"> <a href="https://webarena.dev/">Website</a> • <a href="https://arxiv.org/abs/2307.13854">Paper</a> </p>

Overview

Roadmap

News

Install

# Python 3.10+
conda create -n webarena python=3.10; conda activate webarena
pip install -r requirements.txt
playwright install
pip install -e .

# optional, dev only
pip install -e ".[dev]"
mypy --install-types --non-interactive browser_env agents evaluation_harness
pip install pre-commit
pre-commit install

Quick Walkthrough

Check out this script for a quick walkthrough on how to set up the browser environment and interact with it using the demo sites we hosted. This script is only for education purpose, to perform reproducible experiments, please check out the next section. In the nutshell, using WebArena is very similar to using OpenAI Gym. The following code snippet shows how to interact with the environment.

from browser_env import ScriptBrowserEnv, create_id_based_action
# init the environment
env = ScriptBrowserEnv(
    headless=False,
    observation_type="accessibility_tree",
    current_viewport_only=True,
    viewport_size={"width": 1280, "height": 720},
)
# prepare the environment for a configuration defined in a json file
config_file = "config_files/0.json"
obs, info = env.reset(options={"config_file": config_file})
# get the text observation (e.g., html, accessibility tree) through obs["text"]

# create a random action
id = random.randint(0, 1000)
action = create_id_based_action(f"click [id]")

# take the action
obs, _, terminated, _, info = env.step(action)

End-to-end Evaluation

  1. Setup the standalone environment. Please check out this page for details.

  2. Configurate the urls for each website.

export SHOPPING="<your_shopping_site_domain>:7770"
export SHOPPING_ADMIN="<your_e_commerce_cms_domain>:7780/admin"
export REDDIT="<your_reddit_domain>:9999"
export GITLAB="<your_gitlab_domain>:8023"
export MAP="<your_map_domain>:3000"
export WIKIPEDIA="<your_wikipedia_domain>:8888/wikipedia_en_all_maxi_2022-05/A/User:The_other_Kiwix_guy/Landing"
export HOMEPAGE="<your_homepage_domain>:4399" # this is a placeholder

You are encouraged to update the environment variables in github workflow to ensure the correctness of unit tests

  1. Generate config file for each test example
python scripts/generate_test_data.py

You will see *.json files generated in config_files folder. Each file contains the configuration for one test example.

  1. Obtain the auto-login cookies for all websites
mkdir -p ./.auth
python browser_env/auto_login.py
  1. export OPENAI_API_KEY=your_key, a valid OpenAI API key starts with sk-

  2. Launch the evaluation

python run.py \
  --instruction_path agent/prompts/jsons/p_cot_id_actree_2s.json \ # this is the reasoning agent prompt we used in the paper
  --test_start_idx 0 \
  --test_end_idx 1 \
  --model gpt-3.5-turbo \
  --result_dir <your_result_dir>

This script will run the first example with GPT-3.5 reasoning agent. The trajectory will be saved in <your_result_dir>/0.html

To evaluate Lemur on WebArena, please follow the instructions below:

  1. run Lemur with vLLM and then set the environment variable OPENAI_API_BASE and OPENAI_API_KEY like:
export OPENAI_API_BASE=<your vllm api address>
export OPENAI_API_KEY=<arbitrary things to eliminate errors>
  1. run the evaluation like follows
python run.py \
  --instruction_path agent/prompts/jsons/p_cot_id_actree_2s.json \
  --test_start_idx 0 \
  --test_end_idx 1 \
  --setting default \
  --model lemur-70b-chat-v1 \
  --provider vllm \
  --result_dir <your_result_dir>

Note that the scripts above is in default setting (same setting in original WebArena paper). To run in code generation setting as defined in Lemur paper, use the scripts like follows

python run.py \
  --instruction_path agent/prompts/jsons/p_codegen_cot_id_actree_2s.json \
  --test_start_idx 0 \
  --test_end_idx 1 \
  --setting codegen \
  --model lemur-70b-chat-v1 \
  --provider vllm \
  --result_dir <your_result_dir>

Develop Your Prompt-based Agent

  1. Define the prompts. We provide two baseline agents whose correrponding prompts are listed here. Each prompt is a dictionary with the following keys:
prompt = {
  "intro": <The overall guideline which includes the task description, available action, hint and others>,
  "examples": [
    (
      example_1_observation,
      example_1_response
    ),
    (
      example_2_observation,
      example_2_response
    ),
    ...
  ],
  "template": <How to organize different information such as observation, previous action, instruction, url>,
  "meta_data": {
    "observation": <Which observation space the agent uses>,
    "action_type": <Which action space the agent uses>,
    "keywords": <The keywords used in the template, the program will later enumerate all keywords in the template to see if all of them are correctly replaced with the content>,
    "prompt_constructor": <Which prompt construtor is in used, the prompt constructor will construct the input feed to an LLM and extract the action from the generation, more details below>,
    "action_splitter": <Inside which splitter can we extract the action, used by the prompt constructor>
    }
  }
  1. Implement the prompt constructor. An example prompt constructor using Chain-of-thought/ReAct style reasoning is here. The prompt constructor is a class with the following methods:

Citation

If you use our environment or data, please cite our paper:

@article{zhou2023webarena,
  title={WebArena: A Realistic Web Environment for Building Autonomous Agents},
  author={Zhou, Shuyan and Xu, Frank F and Zhu, Hao and Zhou, Xuhui and Lo, Robert and Sridhar, Abishek and Cheng, Xianyi and Bisk, Yonatan and Fried, Daniel and Alon, Uri and others},
  journal={arXiv preprint arXiv:2307.13854},
  year={2023}
}