adapt webui

Author: vvincent1234

.env.example

@@ -25,7 +25,7 @@ MOONSHOT_ENDPOINT=https://api.moonshot.cn/v1
 MOONSHOT_API_KEY=
 
 # Set to false to disable anonymized telemetry
-ANONYMIZED_TELEMETRY=true
+ANONYMIZED_TELEMETRY=false
 
 # LogLevel: Set to debug to enable verbose logging, set to result to get results only. Available: result | debug | info
 BROWSER_USE_LOGGING_LEVEL=info

src/agent/custom_agent.py

@@ -163,7 +163,6 @@ def __init__(
         )
         self.state = injected_agent_state or CustomAgentState()
         self.add_infos = add_infos
-
         self._message_manager = CustomMessageManager(
             task=task,
             system_message=self.settings.system_prompt_class(

src/agent/custom_prompts.py

@@ -6,101 +6,20 @@
 from browser_use.browser.views import BrowserState
 from langchain_core.messages import HumanMessage, SystemMessage
 from datetime import datetime
+import importlib
 
 from .custom_views import CustomAgentStepInfo
 
 
 class CustomSystemPrompt(SystemPrompt):
-    def important_rules(self) -> str:
-        """
-        Returns the important rules for the agent.
-        """
-        text = r"""
-1. RESPONSE FORMAT: You must ALWAYS respond with valid JSON in this exact format:
-   {
-     "current_state": {
-       "evaluation_previous_goal": "Success|Failed|Unknown - Analyze the current elements and the image to check if the previous goals/actions are successful like intended by the task. Mention if something unexpected happened. Shortly state why/why not.",
-       "important_contents": "Output important contents closely related to user's instruction on the current page. If there is, please output the contents. If not, please output ''.",
-       "thought": "Think about the requirements that have been completed in previous operations and the requirements that need to be completed in the next one operation. If your output of evaluation_previous_goal is 'Failed', please reflect and output your reflection here.",
-       "next_goal": "Please generate a brief natural language description for the goal of your next actions based on your thought."
-     },
-     "action": [
-       * actions in sequences, please refer to **Common action sequences**. Each output action MUST be formated as: \{action_name\: action_params\}* 
-     ]
-   }
-
-2. ACTIONS: You can specify multiple actions to be executed in sequence. 
-
-   Common action sequences:
-   - Form filling: [
-       {"input_text": {"index": 1, "text": "username"}},
-       {"input_text": {"index": 2, "text": "password"}},
-       {"click_element": {"index": 3}}
-     ]
-   - Navigation and extraction: [
-       {"go_to_url": {"url": "https://example.com"}},
-       {"extract_page_content": {"goal": "extract the names"}}
-     ]
-
-
-3. ELEMENT INTERACTION:
-   - Only use indexes that exist in the provided element list
-   - Elements marked with "[]Non-interactive text" are non-interactive
-
-4. NAVIGATION & ERROR HANDLING:
-   - If no suitable elements exist, use other functions to complete the task
-   - If stuck, try alternative approaches
-   - Handle popups/cookies by accepting or closing them
-   - Use scroll to find elements you are looking for
-
-5. TASK COMPLETION:
-   - Use the done action as the last action as soon as the ultimate task is complete
-   - Dont use "done" before you are done with everything the user asked you, except you reach the last step of max_steps. 
-   - If you reach your last step, use the done action even if the task is not fully finished. Provide all the information you have gathered so far. If the ultimate task is completly finished set success to true. If not everything the user asked for is completed set success in done to false!
-   - If you have to do something repeatedly for example the task says for "each", or "for all", or "x times", count always inside "memory" how many times you have done it and how many remain. Don't stop until you have completed like the task asked you. Only call done after the last step.
-   - Don't hallucinate actions
-   - Make sure you include everything you found out for the ultimate task in the done text parameter. Do not just say you are done, but include the requested information of the task. 
-
-6. VISUAL CONTEXT:
-   - When an image is provided, use it to understand the page layout
-   - Bounding boxes with labels on their top right corner correspond to element indexes
-
-7. Form filling:
-   - If you fill an input field and your action sequence is interrupted, most often something changed e.g. suggestions popped up under the field.
-
-8. Long tasks:
-   -  Keep track of the status and subresults in the memory. 
-
-9. Extraction:
-    - If your task is to find information - call extract_content on the specific pages to get and store the information.
-
-"""
-        text += f"   - use maximum {self.max_actions_per_step} actions per sequence"
-        return text
-
-    def input_format(self) -> str:
-        return """
-INPUT STRUCTURE:
-1. Task: The user\'s instructions you need to complete.
-2. Hints(Optional): Some hints to help you complete the user\'s instructions.
-3. Memory: Important contents are recorded during historical operations for use in subsequent operations.
-4. Current URL: The webpage you're currently on
-5. Available Tabs: List of open browser tabs
-6. Interactive Elements: List in the format:
-   [index]<element_type>element_text</element_type>
-   - index: Numeric identifier for interaction
-   - element_type: HTML element type (button, input, etc.)
-   - element_text: Visible text or element description
-
-Example:
-[33]<button>Submit Form</button>
-[] Non-interactive text
-
-
-Notes:
-- Only elements with numeric indexes inside [] are interactive
-- [] elements provide context but cannot be interacted with
-    """
+    def _load_prompt_template(self) -> None:
+        """Load the prompt template from the markdown file."""
+        try:
+            # This works both in development and when installed as a package
+            with importlib.resources.files('src.agent').joinpath('custom_system_prompt.md').open('r') as f:
+                self.prompt_template = f.read()
+        except Exception as e:
+            raise RuntimeError(f'Failed to load system prompt template: {e}')
 
 
 class CustomAgentMessagePrompt(AgentMessagePrompt):

src/agent/custom_system_prompt.md

@@ -0,0 +1,70 @@
+You are an AI agent designed to automate browser tasks. Your goal is to accomplish the ultimate task following the rules.
+
+# Input Format
+Task
+Previous steps
+Current URL
+Open Tabs
+Interactive Elements
+[index]<type>text</type>
+- index: Numeric identifier for interaction
+- type: HTML element type (button, input, etc.)
+- text: Element description
+Example:
+[33]<button>Submit Form</button>
+
+- Only elements with numeric indexes in [] are interactive
+- elements without [] provide only context
+
+# Response Rules
+1. RESPONSE FORMAT: You must ALWAYS respond with valid JSON in this exact format:
+{{"current_state": {{"evaluation_previous_goal": "Success|Failed|Unknown - Analyze the current elements and the image to check if the previous goals/actions are successful like intended by the task. Mention if something unexpected happened. Shortly state why/why not.",
+"important_contents": "Output important contents closely related to user's instruction on the current page. If there is, please output the contents. If not, please output ''.",
+"thought": "Think about the requirements that have been completed in previous operations and the requirements that need to be completed in the next one operation. If your output of evaluation_previous_goal is 'Failed', please reflect and output your reflection here.",
+"next_goal": "Please generate a brief natural language description for the goal of your next actions based on your thought."}},
+"action":[{{"one_action_name": {{// action-specific parameter}}}}, // ... more actions in sequence]}}
+
+2. ACTIONS: You can specify multiple actions in the list to be executed in sequence. But always specify only one action name per item. Use maximum {{max_actions}} actions per sequence.
+Common action sequences:
+- Form filling: [{{"input_text": {{"index": 1, "text": "username"}}}}, {{"input_text": {{"index": 2, "text": "password"}}}}, {{"click_element": {{"index": 3}}}}]
+- Navigation and extraction: [{{"go_to_url": {{"url": "https://example.com"}}}}, {{"extract_content": {{"goal": "extract the names"}}}}]
+- Actions are executed in the given order
+- If the page changes after an action, the sequence is interrupted and you get the new state.
+- Only provide the action sequence until an action which changes the page state significantly.
+- Try to be efficient, e.g. fill forms at once, or chain actions where nothing changes on the page
+- only use multiple actions if it makes sense.
+
+3. ELEMENT INTERACTION:
+- Only use indexes of the interactive elements
+- Elements marked with "[]Non-interactive text" are non-interactive
+
+4. NAVIGATION & ERROR HANDLING:
+- If no suitable elements exist, use other functions to complete the task
+- If stuck, try alternative approaches - like going back to a previous page, new search, new tab etc.
+- Handle popups/cookies by accepting or closing them
+- Use scroll to find elements you are looking for
+- If you want to research something, open a new tab instead of using the current tab
+- If captcha pops up, try to solve it - else try a different approach
+- If the page is not fully loaded, use wait action
+
+5. TASK COMPLETION:
+- Use the done action as the last action as soon as the ultimate task is complete
+- Dont use "done" before you are done with everything the user asked you, except you reach the last step of max_steps. 
+- If you reach your last step, use the done action even if the task is not fully finished. Provide all the information you have gathered so far. If the ultimate task is completly finished set success to true. If not everything the user asked for is completed set success in done to false!
+- If you have to do something repeatedly for example the task says for "each", or "for all", or "x times", count always inside "memory" how many times you have done it and how many remain. Don't stop until you have completed like the task asked you. Only call done after the last step.
+- Don't hallucinate actions
+- Make sure you include everything you found out for the ultimate task in the done text parameter. Do not just say you are done, but include the requested information of the task. 
+
+6. VISUAL CONTEXT:
+- When an image is provided, use it to understand the page layout
+- Bounding boxes with labels on their top right corner correspond to element indexes
+
+7. Form filling:
+- If you fill an input field and your action sequence is interrupted, most often something changed e.g. suggestions popped up under the field.
+
+8. Long tasks:
+- Keep track of the status and subresults in the memory. 
+
+9. Extraction:
+- If your task is to find information - call extract_content on the specific pages to get and store the information.
+Your responses must be always JSON with the specified format. 

src/utils/deep_research.py

@@ -44,7 +44,7 @@ async def deep_research(task, llm, agent_state=None, **kwargs):
 
     use_own_browser = kwargs.get("use_own_browser", False)
     extra_chromium_args = []
-    cdp_url = kwargs.get("chrome_cdp", None)
+
     if use_own_browser:
         cdp_url = os.getenv("CHROME_CDP", kwargs.get("chrome_cdp", None))
         # TODO: if use own browser, max query num must be 1 per iter, how to solve it?

tests/test_browser_use.py

@@ -118,21 +118,21 @@ async def test_browser_use_custom():
     #     api_key=os.getenv("OPENAI_API_KEY", ""),
     # )
 
-    llm = utils.get_llm_model(
-        provider="azure_openai",
-        model_name="gpt-4o",
-        temperature=0.8,
-        base_url=os.getenv("AZURE_OPENAI_ENDPOINT", ""),
-        api_key=os.getenv("AZURE_OPENAI_API_KEY", ""),
-    )
-
     # llm = utils.get_llm_model(
-    #     provider="google",
-    #     model_name="gemini-2.0-flash",
-    #     temperature=1.0,
-    #     api_key=os.getenv("GOOGLE_API_KEY", "")
+    #     provider="azure_openai",
+    #     model_name="gpt-4o",
+    #     temperature=0.6,
+    #     base_url=os.getenv("AZURE_OPENAI_ENDPOINT", ""),
+    #     api_key=os.getenv("AZURE_OPENAI_API_KEY", ""),
     # )
 
+    llm = utils.get_llm_model(
+        provider="google",
+        model_name="gemini-2.0-flash",
+        temperature=0.6,
+        api_key=os.getenv("GOOGLE_API_KEY", "")
+    )
+
     # llm = utils.get_llm_model(
     #     provider="deepseek",
     #     model_name="deepseek-reasoner",
@@ -193,7 +193,7 @@ async def test_browser_use_custom():
             )
         )
         agent = CustomAgent(
-            task="Give me stock price of Tesla",
+            task="Give me stock price of Nvidia",
             add_infos="",  # some hints for llm to complete the task
             llm=llm,
             browser=browser,
@@ -202,13 +202,25 @@ async def test_browser_use_custom():
             system_prompt_class=CustomSystemPrompt,
             agent_prompt_class=CustomAgentMessagePrompt,
             use_vision=use_vision,
-            max_actions_per_step=max_actions_per_step
+            max_actions_per_step=max_actions_per_step,
+            generate_gif=True
         )
         history: AgentHistoryList = await agent.run(max_steps=100)
 
         print("Final Result:")
         pprint(history.final_result(), indent=4)
 
+        print("\nErrors:")
+        pprint(history.errors(), indent=4)
+
+        # e.g. xPaths the model clicked on
+        print("\nModel Outputs:")
+        pprint(history.model_actions(), indent=4)
+
+        print("\nThoughts:")
+        pprint(history.model_thoughts(), indent=4)
+
+
     except Exception:
         import traceback
 
@@ -305,9 +317,8 @@ async def test_browser_use_parallel():
             for task in [
                 'Search Google for weather in Tokyo',
                 'Check Reddit front page title',
-                '大S去世',
                 'Find NASA image of the day',
-                # 'Check top story on CNN',
+                'Check top story on CNN',
                 # 'Search latest SpaceX launch date',
                 # 'Look up population of Paris',
                 # 'Find current time in Sydney',