diff --git a/README.md b/README.md index 3017eee6..0aa87413 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,10 @@ lavague --instructions examples/instructions/huggingface.yaml --config examples/ For a step-by-step guide or to run LaVague in a Google Colab, see our [quick-tour](https://docs.lavague.ai/en/latest/docs/get-started/quick-tour/) which will walk you through how to get set-up and launch LaVague with our CLI tool. +## 🎭 Playwright integration + +If you want to get started with LaVague build using Playwright as your underlying automation tool, see our [Playwright integration guide](./docs/docs/get-started/playwright.md) + ## 🙋 Contributing We would love your help in making La Vague a reality. diff --git a/docs/assets/vscode-demo.gif b/docs/assets/vscode-demo.gif index 5de9d609..e1f7b9ba 100644 Binary files a/docs/assets/vscode-demo.gif and b/docs/assets/vscode-demo.gif differ diff --git a/docs/docs/get-started/get-started-vscode-extension.md b/docs/docs/get-started/get-started-vscode-extension.md index f5f6c1d6..6d736d89 100644 --- a/docs/docs/get-started/get-started-vscode-extension.md +++ b/docs/docs/get-started/get-started-vscode-extension.md @@ -18,11 +18,7 @@ You can generate your automation code and directly preview and test the generate Check out what the LaVague VSCode Extension looks like in action: <div> - <figure> - <img src="https://raw.githubusercontent.com/lavague-ai/lavague/main/docs/assets/vscode-demo.gif" alt="LaVague VSCode Extension Example"> - <figcaption><b>LaVague interacting with Hacker News.</b></figcaption> - </figure> - <br><br> + <img src="https://raw.githubusercontent.com/lavague-ai/lavague/main/docs/assets/vscode-demo.gif" alt="LaVague VSCode Extension Example" style="margin-left: 0px;"> </div> ### Getting started diff --git a/docs/docs/get-started/playwright.md b/docs/docs/get-started/playwright.md new file mode 100644 index 00000000..94e056dc --- /dev/null +++ b/docs/docs/get-started/playwright.md @@ -0,0 +1,48 @@ +# Playwright Integration + +In this guide, we're going to show you how you can get started with 'lavague build' with Playwright. + +🔨`lavague build` will take your text instructions and leverage a large action model to create a Python file with the automation code needed to perform that action. + +!!! note "Playright vs Selenium" + + - 🚀 Playwright is faster with better performance than Selenium. + - ⚡ Unlike Selenium, it doesn't require any additional driver installations as cross-browser support is built-in. + - ⏳ However, we currently only support Playwright for the `lavague build` command, due to constraints around supporting an async library with `launch` and the vscode extension. + +| | Playwright | Selenium | +| :---: | :---: | :---: | +lavague build | ✅ | ✅ | +lavague launch | ❌ | ✅ | +VSCode extension | ❌ | ✅ | + +## Getting started with Playwright + +To get started with `lavague build` with Playwright, you need to: + +**Step one:** Download lavague with the optional Playwright dependencies + +``` +pip install lavague[playwright] +``` + +**Step two:** Run your lavague build command with a `Playwright` configuration file + +For example, you can run lavague build with our example Playright configuration file and instructions file with the following command from the root of our LaVague repo: + +`lavague -c examples/configurations/api/openai_api_playwright.py -i examples/instructions/hugginface.yaml build` + +!!! success "Generated automation file" + A new file will be created in your current directory `openai_api_playwright_huggingface_gen.py`, which contains the automation code needed to run the instructions outlined in the `huggingface.yaml` file. + +You can create a new `yaml` file with your own `url` and `instructions` to test different actiosn on new sites! + +!!! abstract "Playright configuration file" + + There are two key configuration options we need to specify to make a LaVague config file compatible with Playright instead of Selenium: + + 1. Set `get_driver` option to our Playwright driver: + `get_driver = default_get_playwright_driver` + + 2. Set `prompt_template` to the default Playwright prompt template: + `prompt_template = PLAYWRIGHT_PROMPT` \ No newline at end of file diff --git a/docs/docs/get-started/setting-up-la-vague.md b/docs/docs/get-started/setting-up-la-vague.md index 582cb5f4..b2af7d91 100644 --- a/docs/docs/get-started/setting-up-la-vague.md +++ b/docs/docs/get-started/setting-up-la-vague.md @@ -1,11 +1,14 @@ -# Installation & set up +# Installation In this section, we're going to walk you through how you can install and set up everything you need to run LaVague locally. > If you just want to test out LaVague without having to install anything locally, you can run our [Quick Tour notebook with Google Colab](https://colab.research.google.com/github/lavague-ai/lavague/blob/main/docs/docs/get-started/quick-tour-notebook/quick-tour.ipynb). -To start using LaVague, we need to install a webdriver and store it in our home directory, so that LaVague can interact with the browser in our environment. We will then also need to install the LaVague package. +To start using LaVague, we need to install a webdriver and store it in our home directory, so that LaVague can interact with the browser using underlying automation tool `Selenium`. We will then also install the LaVague package. + +!!! note "Playwright integration" + Alternatively, we support using Playwright for our `lavague build` command, which does not require webdriver installation. With the `lavague build` CLI command, you can generate Python files with automation code to carry out actions from text instructions! See our [playwright guide](./playwright.md) to see how to get started with Playright. We provide two key installation options: diff --git a/docs/index.md b/docs/index.md index 31a78cf0..2312d9bb 100644 --- a/docs/index.md +++ b/docs/index.md @@ -37,6 +37,10 @@ lavague --instructions examples/instructions/huggingface.yaml --config examples/ For a step-by-step guide or to run LaVague in a Google Colab, see our [quick-tour](https://docs.lavague.ai/en/latest/docs/get-started/quick-tour/) which will walk you through how to get set-up and launch LaVague with our CLI tool. +## 🎭 Playwright integration + +If you want to get started with LaVague build using Playwright as your underlying automation tool, see our [Playwright integration guide](./docs/get-started/playwright.md) + ## 🙋 Contributing We would love your help in making La Vague a reality. diff --git a/mkdocs.yml b/mkdocs.yml index aa670b5b..22a5d823 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -100,6 +100,7 @@ nav: - Quick tour: 'docs/get-started/quick-tour.ipynb' - Alpha VSCode extenstion: 'docs/get-started/get-started-vscode-extension.md' - Customization: 'docs/get-started/customization.md' + - Playwright: 'docs/get-started/playwright.md' - 🤝 Integrations: - Overview: 'docs/integrations/home.md'