add webui and readme

Author: warmshao

.env.example

@@ -12,4 +12,7 @@ AZURE_OPENAI_API_KEY=
 ANONYMIZED_TELEMETRY=true
 
 # LogLevel: Set to debug to enable verbose logging, set to result to get results only. Available: result | debug | info
-BROWSER_USE_LOGGING_LEVEL=info
+BROWSER_USE_LOGGING_LEVEL=info
+
+CHROME_PATH=
+CHROME_USER_DATA=

README.md

@@ -0,0 +1,47 @@
+# Browser-Use WebUI
+
+## Background
+
+This project builds upon the foundation of the [browser-use](https://github.com/browser-use/browser-use), which is designed to make websites accessible for AI agents. We have enhanced the original capabilities by providing:
+
+1.  **A Brand New WebUI:** We offer a comprehensive web interface that supports a wide range of `browser-use` functionalities. This UI is designed to be user-friendly and enables easy interaction with the browser agent.
+
+2.  **Expanded LLM Support:** We've integrated support for various Large Language Models (LLMs), including: Gemini, OpenAI, Azure OpenAI, Anthropic etc. And we plan to add support for even more models in the future.
+
+3.  **Custom Browser Support:** You can use your own browser with our tool, eliminating the need to re-login to sites or deal with other authentication challenges. This feature also supports high-definition screen recording.
+
+4.  **Customized Agent:** We've implemented a custom agent that enhances `browser-use` with Optimized prompts.
+
+<video src="https://github.com/user-attachments/assets/cc4ca59f-e4a5-43d8-86db-bb0e6edbedef" controls="controls" width="500" height="300" >Your browser does not support playing this video!</video>
+
+## Environment Installation
+
+1.  **Python Version:** Ensure you have Python 3.11 or higher installed.
+2.  **Install `browser-use`:**
+    ```bash
+    pip install browser-use
+    ```
+3.  **Install Playwright:**
+    ```bash
+    playwright install
+    ```
+4.  **Install Dependencies:**
+    ```bash
+    pip install -r requirements.txt
+    ```
+5.  **Configure Environment Variables:**
+    - Copy `.env.example` to `.env` and set your environment variables, including API keys for the LLM.
+    - **If using your own browser:**
+      - Set `CHROME_PATH` to the executable path of your browser (e.g., `C:\Program Files\Google\Chrome\Application\chrome.exe` on Windows).
+      - Set `CHROME_USER_DATA` to the user data directory of your browser (e.g.,`C:\Users\<YourUsername>\AppData\Local\Google\Chrome\User Data`).
+
+## Usage
+
+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:**
+    - 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.

requirements.txt

@@ -1,3 +1,4 @@
 browser-use
 langchain-google-genai
 pyperclip
+gradio

src/utils/utils.py

@@ -6,6 +6,8 @@
 # @FileName: utils.py
 
 import base64
+import os
+
 from langchain_openai import ChatOpenAI, AzureChatOpenAI
 from langchain_anthropic import ChatAnthropic
 from langchain_google_genai import ChatGoogleGenerativeAI
@@ -19,32 +21,64 @@ def get_llm_model(provider: str, **kwargs):
     :return:
     """
     if provider == 'anthropic':
+        if not kwargs.get("base_url", ""):
+            base_url = "https://api.anthropic.com"
+        else:
+            base_url = kwargs.get("base_url")
+
+        if not kwargs.get("api_key", ""):
+            api_key = os.getenv("ANTHROPIC_API_KEY", "")
+        else:
+            api_key = kwargs.get("api_key")
+
         return ChatAnthropic(
             model_name=kwargs.get("model_name", 'claude-3-5-sonnet-20240620'),
             temperature=kwargs.get("temperature", 0.0),
-            base_url=kwargs.get("base_url", "https://api.anthropic.com"),
-            api_key=kwargs.get("api_key", None)
+            base_url=base_url,
+            api_key=api_key
         )
     elif provider == 'openai':
+        if not kwargs.get("base_url", ""):
+            base_url = "https://api.openai.com/v1"
+        else:
+            base_url = kwargs.get("base_url")
+
+        if not kwargs.get("api_key", ""):
+            api_key = os.getenv("OPENAI_API_KEY", "")
+        else:
+            api_key = kwargs.get("api_key")
+
         return ChatOpenAI(
             model=kwargs.get("model_name", 'gpt-4o'),
             temperature=kwargs.get("temperature", 0.0),
-            base_url=kwargs.get("base_url", "https://api.openai.com/v1/"),
-            api_key=kwargs.get("api_key", None)
+            base_url=base_url,
+            api_key=api_key
         )
     elif provider == 'gemini':
+        if not kwargs.get("api_key", ""):
+            api_key = os.getenv("GOOGLE_API_KEY", "")
+        else:
+            api_key = kwargs.get("api_key")
         return ChatGoogleGenerativeAI(
             model=kwargs.get("model_name", 'gemini-2.0-flash-exp'),
             temperature=kwargs.get("temperature", 0.0),
-            google_api_key=kwargs.get("api_key", None),
+            google_api_key=api_key,
         )
     elif provider == "azure_openai":
+        if not kwargs.get("base_url", ""):
+            base_url = os.getenv("AZURE_OPENAI_ENDPOINT", "")
+        else:
+            base_url = kwargs.get("base_url")
+        if not kwargs.get("api_key", ""):
+            api_key = os.getenv("AZURE_OPENAI_API_KEY", "")
+        else:
+            api_key = kwargs.get("api_key")
         return AzureChatOpenAI(
             model=kwargs.get("model_name", 'gpt-4o'),
             temperature=kwargs.get("temperature", 0.0),
             api_version="2024-05-01-preview",
-            azure_endpoint=kwargs.get("base_url", ""),
-            api_key=kwargs.get("api_key", None)
+            azure_endpoint=base_url,
+            api_key=api_key
         )
     else:
         raise ValueError(f'Unsupported provider: {provider}')

tests/test_browser_use.py

@@ -106,7 +106,7 @@ async def test_browser_use_custom():
     )
 
     controller = CustomController()
-    use_own_browser = True
+    use_own_browser = False
     disable_security = True
     playwright = None
     browser_context_ = None