Skip to content

Commit

Permalink
add keep browser open and docker setup to readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@vvincent1234
vvincent1234 committed Jan 10, 2025
1 parent 48659b4 commit 1d8b29d
Showing 1 changed file with 73 additions and 110 deletions.
183 changes: 73 additions & 110 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,37 @@ We would like to officially thank [WarmShao](https://github.com/warmshao) for hi

## Installation Options

### Option 1: Docker Installation (Recommended)
### Option 1: Local Installation

Read the [quickstart guide](https://docs.browser-use.com/quickstart#prepare-the-environment) or follow the steps below to get started.

> Python 3.11 or higher is required.
First, we recommend using [uv](https://docs.astral.sh/uv/) to setup the Python environment.

```bash
uv venv --python 3.11
```

and activate it with:

```bash
source .venv/bin/activate
```

Install the dependencies:

```bash
uv pip install -r requirements.txt
```

Then install playwright:

```bash
playwright install
```

### Option 2: Docker Installation

1. **Prerequisites:**
- Docker and Docker Compose installed on your system
Expand All @@ -32,8 +62,8 @@ We would like to officially thank [WarmShao](https://github.com/warmshao) for hi
2. **Setup:**
```bash
# Clone the repository
git clone <repository-url>
cd browser-use-webui
git clone https://github.com/browser-use/web-ui.git
cd web-ui

# Copy and configure environment variables
cp .env.example .env
Expand All @@ -55,38 +85,47 @@ We would like to officially thank [WarmShao](https://github.com/warmshao) for hi

Default VNC password is "vncpassword". You can change it by setting the `VNC_PASSWORD` environment variable in your `.env` file.

### Option 2: Local Installation

Read the [quickstart guide](https://docs.browser-use.com/quickstart#prepare-the-environment) or follow the steps below to get started.

> Python 3.11 or higher is required.
First, we recommend using [uv](https://docs.astral.sh/uv/) to setup the Python environment.

```bash
uv venv --python 3.11
```

and activate it with:

```bash
source .venv/bin/activate
```

Install the dependencies:

```bash
uv pip install -r requirements.txt
```

Then install playwright:

```bash
playwright install
```

## Usage

### Local Setup
1. Copy `.env.example` to `.env` and set your environment variables, including API keys for the LLM. `cp .env.example .env`
2. **Run the WebUI:**
```bash
python webui.py --ip 127.0.0.1 --port 7788
```
4. WebUI options:
- `--ip`: The IP address to bind the WebUI to. Default is `127.0.0.1`.
- `--port`: The port to bind the WebUI to. Default is `7788`.
- `--theme`: The theme for the user interface. Default is `Ocean`.
- **Default**: The standard theme with a balanced design.
- **Soft**: A gentle, muted color scheme for a relaxed viewing experience.
- **Monochrome**: A grayscale theme with minimal color for simplicity and focus.
- **Glass**: A sleek, semi-transparent design for a modern appearance.
- **Origin**: A classic, retro-inspired theme for a nostalgic feel.
- **Citrus**: A vibrant, citrus-inspired palette with bright and fresh colors.
- **Ocean** (default): A blue, ocean-inspired theme providing a calming effect.
- `--dark-mode`: Enables dark mode for the user interface.
3. **Access the WebUI:** Open your web browser and navigate to `http://127.0.0.1:7788`.
4. **Using Your Own Browser(Optional):**
- Set `CHROME_PATH` to the executable path of your browser and `CHROME_USER_DATA` to the user data directory of your browser.
- Windows
```env
CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
CHROME_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data"
```
> Note: Replace `YourUsername` with your actual Windows username for Windows systems.
- Mac
```env
CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
CHROME_USER_DATA="~/Library/Application Support/Google/Chrome/Profile 1"
```
- Close all Chrome windows
- Open the WebUI in a non-Chrome browser, such as Firefox or Edge. This is important because the persistent browser context will use the Chrome data when running the agent.
- Check the "Use Own Browser" option within the Browser Settings.
5. **Keep Browser Open(Optional):**
- Set `CHROME_PERSISTENT_SESSION=true` in the `.env` file.

### Docker Setup
1. **Environment Variables:**
- All configuration is done through the `.env` file
Expand Down Expand Up @@ -139,83 +178,7 @@ playwright install
docker compose down
```

### Local Setup
1. **Run the WebUI:**
```bash
python webui.py --ip 127.0.0.1 --port 7788
```
2. **Access the WebUI:** Open your web browser and navigate to `http://127.0.0.1:7788`.
3. **Using Your Own Browser:**
- Close all chrome windows
- Open the WebUI in a non-Chrome browser, such as Firefox or Edge. This is important because the persistent browser context will use the Chrome data when running the agent.
- Check the "Use Own Browser" option within the Browser Settings.

### Options:

### `--theme`

- **Type**: `str`
- **Default**: `Ocean`
- **Description**: Specifies the theme for the user interface.
- **Options**:
The available themes are defined in the `theme_map` dictionary. Below are the options you can choose from:
- **Default**: The standard theme with a balanced design.
- **Soft**: A gentle, muted color scheme for a relaxed viewing experience.
- **Monochrome**: A grayscale theme with minimal color for simplicity and focus.
- **Glass**: A sleek, semi-transparent design for a modern appearance.
- **Origin**: A classic, retro-inspired theme for a nostalgic feel.
- **Citrus**: A vibrant, citrus-inspired palette with bright and fresh colors.
- **Ocean** (default): A blue, ocean-inspired theme providing a calming effect.

**Example**:

```bash
python webui.py --ip 127.0.0.1 --port 7788 --theme Glass
```

### `--dark-mode`

- **Type**: `boolean`
- **Default**: Disabled
- **Description**: Enables dark mode for the user interface. This is a simple toggle; including the flag activates dark mode, while omitting it keeps the interface in light mode.
- **Options**:
- **Enabled (`--dark-mode`)**: Activates dark mode, switching the interface to a dark color scheme for better visibility in low-light environments.
- **Disabled (default)**: Keeps the interface in the default light mode.

**Example**:

```bash
python webui.py --ip 127.0.0.1 --port 7788 --dark-mode
```

## (Optional) Configure Environment Variables

Copy `.env.example` to `.env` and set your environment variables, including API keys for the LLM. With

```bash
cp .env.example .env
```

**If using your own browser:** - Set `CHROME_PATH` to the executable path of your browser and `CHROME_USER_DATA` to the user data directory of your browser.

You can just copy examples down below to your `.env` file.

### Windows

```env
CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
CHROME_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data"
```

> Note: Replace `YourUsername` with your actual Windows username for Windows systems.

### Mac

```env
CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
CHROME_USER_DATA="~/Library/Application Support/Google/Chrome/Profile 1"
```

## Changelog

- [x] **2025/01/06:** Thanks to @richard-devbot, a New and Well-Designed WebUI is released. [Video tutorial demo](https://github.com/warmshao/browser-use-webui/issues/1#issuecomment-2573393113).
- [x] **2025/01/10:** Thanks to @casistack. Now we have Docker Setup option and also Support keep browser open between tasks.[Video tutorial demo](https://github.com/browser-use/web-ui/issues/1#issuecomment-2582511750).
- [x] **2025/01/06:** Thanks to @richard-devbot. A New and Well-Designed WebUI is released. [Video tutorial demo](https://github.com/warmshao/browser-use-webui/issues/1#issuecomment-2573393113).

0 comments on commit 1d8b29d

Please sign in to comment.