From 730dceb4b64dc2ecbc71729adfae421daccd0ffb Mon Sep 17 00:00:00 2001 From: Yu Gu Date: Wed, 5 Feb 2025 10:48:35 +0800 Subject: [PATCH] Update VAB-CSS.md --- docs/detailed_setups/VAB-CSS.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/docs/detailed_setups/VAB-CSS.md b/docs/detailed_setups/VAB-CSS.md index 8b13789..9794e94 100644 --- a/docs/detailed_setups/VAB-CSS.md +++ b/docs/detailed_setups/VAB-CSS.md @@ -1 +1,26 @@ +# Setup for VAB-CSS +## Installation +The environment setup for VAB-CSS is mostly straightforward. +In most cases, we do not need any external environments for VAB-CSS, because all it involves is editing local CSS files and taking screenshots for local html files using Python playwright library. + +However, there can be one exception that you may need to use a docker image for playwright environment: the default screenshot size (even with a specified viewport size) can be different on some Ubuntu systems. +To check whether you need this step, use [https://github.com/THUDM/VisualAgentBench/blob/main/src/server/tasks/css_agent/screenshot_docker.py](screenshot_docker.py): +``` +python screenshot_docker.py path_to_css_dataset/cinema-world/index.html screenshot.png false +``` +If you get `1280 1421` from the output (this is the default size that we have tested on multiple Linux/macOS systems), then you are good. This should be the expected behavior. If you get other sizes (which is indeed a rare case), then you will need to take screenshots with the provided docker environment. + +To do this, first pull the docker image: +``` +docker pull entslscheia/playwright-screenshot:latest +``` + +Then you can take screenshot using a command like +``` +docker run -it --rm -v [your_local_path_to_screenshot_docker.py]:/app playwright-screenshot:latest python screenshot_docker.py ./cinema-world/index.html screenshot.png false +``` +Then replace the `take_screenshot` method in your code with this command (e.g., calling it by using subprocess in Python). + +## Get Started +Configure everything within [https://github.com/THUDM/VisualAgentBench/blob/main/configs/tasks/css.yaml](configs/tasks/css.yaml).