UI Theming & CLI Options
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Browser Use WebUI provides a customizable interface for interacting with AI browser agents. It utilizes the Gradio framework to offer a variety of visual themes and configuration options that can be managed through Command Line Interface (CLI) arguments, environment variables, or persistent configuration files. This system allows users to tailor the visual experience and operational parameters of the agent to their specific needs, whether running locally or within containerized environments.
The UI acts as the primary orchestration layer, bridging user inputs from the web interface to the underlying browser-use agent logic. It supports multiple LLM providers, browser persistence modes, and real-time interaction monitoring.
Sources: webui.py:1-25, README.md:15-30
CLI Options & Initialization
The application entry point in webui.py uses the argparse module to handle initial startup configuration. These options define the network binding, port, and the initial aesthetic state of the Gradio interface.
Available CLI Arguments
| Argument | Type | Default | Description |
|---|---|---|---|
--ip | string | 127.0.0.1 | The IP address the WebUI server binds to. |
--port | integer | 7788 | The port the WebUI server listens on. |
--theme | string | Ocean | The visual theme applied to the Gradio interface. |
--dark-mode | flag | False | Enables dark mode for the user interface. |
Sources: webui.py:657-662, README.md:105-115
Startup Logic Flow
When the application starts, it parses the CLI arguments, loads the default configuration settings, and initializes the Gradio UI with the specified theme.
The flow shows how CLI arguments directly influence the create_ui function and the subsequent server launch.
Sources: webui.py:657-668
UI Theming System
The WebUI leverages Gradio's theming engine. A theme_map dictionary maps string identifiers to specific Gradio theme classes, allowing for dynamic visual changes during initialization.
Theme Definitions
The system supports several predefined themes:
- Default: Standard balanced design.
- Soft: Muted color scheme for relaxed viewing.
- Monochrome: Minimalist grayscale focus.
- Glass: Modern semi-transparent design.
- Origin: Retro-inspired aesthetic.
- Citrus: Vibrant and bright palette.
- Ocean: Blue, calming theme (Default).
Sources: webui.py:588-598, README.md:108-115
Theme Implementation Code
theme_map = {
"Default": Default(),
"Soft": Soft(),
"Monochrome": Monochrome(),
"Glass": Glass(),
"Origin": Origin(),
"Citrus": Citrus(),
"Ocean": Ocean(),
"Base": Base()
}
Sources: webui.py:588-598
Configuration Management
Configurations can be managed through the "Configuration" tab in the UI, which allows saving and loading settings as serialized .pkl files.
Default Settings Architecture
The default_config() function provides the baseline state for all UI components, including agent behavior (max steps, vision), LLM parameters, and browser settings.
This diagram illustrates the relationship between the configuration data structure and the persistence methods used to handle .pkl files.
Sources: src/utils/default_config_settings.py:8-35, webui.py:623-650
Containerized Environment Options
When running via Docker, configuration is primarily handled through environment variables defined in docker-compose.yml and managed by supervisord.conf.
Docker Configuration Parameters
| Variable | Default | Description |
|---|---|---|
CHROME_PERSISTENT_SESSION | false | Keeps the browser open between tasks. |
RESOLUTION | 1920x1080x24 | Sets the virtual display resolution for Xvfb. |
VNC_PASSWORD | vncpassword | Security credential for the noVNC interface. |
Sources: docker-compose.yml:25-35, supervisord.conf:7-15
Supervisord Orchestration
supervisord.conf manages the lifecycle of the WebUI and its dependencies (Xvfb, VNC, and the browser).
The diagram represents the service dependency chain defined in the supervisor configuration to ensure the UI has a valid display and browser environment.
Sources: supervisord.conf:1-100
Summary
The UI Theming & CLI Options system provides a flexible framework for both developers and end-users. By combining CLI arguments for network and theme setup, Gradio's native theming for visual customization, and a robust configuration persistence layer, the WebUI ensures a consistent but tailorable experience across local and containerized deployments.
Sources: webui.py:657-670, README.md:105-120