v#l{>o|V4p?$n^kpZOHlai4#Z5KQ}y0kTgzxJ~HF=_g9FA=@Bu#nv$8ER;=
zYMXR1nE&fjX_<4I@t_|-wRZ~KPUS?V%v-@MWV-Bj);j&%&&-xL8qccMQU&g`T2
z`BByP1ch!uZHh1qX}ox>KIbF)?Gd$;)X}_~=0bT1sH)_@^24SneW~0FOcj^i87k~@
zs1JV8FF>9(=q@_2`_zMVc~15Wticz;nhF~VSxSmR&NLOEKr%8_pvfaR69bCbM)ePU
zWQ^t}M!+w%a87&*#!Q%nqzE`9xl)H@ppza+km$ZQg@>Ju^s&s+{d
zclEh^{YGt`hh`Y}AjZIH)dXFkH@UF`u@~cd(z!YjH&6PWp_b
zy$i9Gf7Y+6MJKw5-*@MVV#L0>hr~Q$6tskJDMKmYCvYj$Fe+@)|KPXkDBcww|K;op
zR*Ui(aK#nNG_C3qyj!)@hIOJoHm#>@&Uj+uJz*}t!K-M=+tF6-xSHA3i=2>u$o>;E
z=f{e(?3Iz}o7c>q83p3%MS*J|&~GEq2+_Y2WtLT&DsBjcu!trV)QI4Ysjx+qwFpto41`dE@!)qod+sbh!i%wV~oonbDo+
zcaQG(cCiX%QiEE`tjN^9Ti@=`L?NM9a$m4|fD)o*`Y=bv#P5w_i*ZvRXw#MHa(o8!Isiw<>
zGWM1d?TW~tkxfRFq!cr5rIW3~Bx%Ow$doh`ns>d=TI+eA^*rD2H?r-#Mfu#a#o5-QHTVX1y6vWy
zk|Da35xoAW=lP2O7FFV8Un8QD{dzNWs;m#wqhd0A7z((ifScv@JWqG!$ih=eQ3
zR$3Sk*{HadA0i45c^`gM!m^kf$5ZrLr;P~1)ERXLv&9Z{uCG)c&=K@!wT;#Ri^7x`
z5!Z-_#~u>V2ZsSg;tkb013D*zhd#EKH%zz^jdFQFJ5JVf89j@tzO#wHJ$kWq1@=@f
z_B7pQ(k>9~u3EwGW8wGg)VE<9>IQ?r)oeo9_AAXvb-9
zw)kgb^{tf1puEPjAzAMmDT77L#_?ribB-o=Mf5n?*{AJ40%sZ_HE{Xv?B%%xp(Z0C
zKZmsTQ}>&ue#woQiC;dLDi*0>4E#6Yq$(ShG-CDnEAhI$!w>fg@#e-9RDs>;74?v}
z*=OKujyWk@XKH@fvYy;S?NW7!CfU#LN{5HTB&-wm&jowPsj12Ic-*f}UbTP|_-lJD
zK5QnSRV$ZfOy5>@q(L$Sg>f0ckNTrCV_pb66>72jmS9*oS~zKjv1$5_vj-r%+A<^1
zR8DQsb#J}uu?fH3nCLk?F5Yu)2^N}WMyuAu)pbYLR@3#4wh08geCQgp-ek(^1#Tk)
zVH=Yg9=fibN!D%7PPyizC(~|%d{2Hj{~j|~1It0`M<7f=3!=GR)Z7|Hgw&xGCBu7E
zWcFa)S(?|$bvYqSQeJT8kb9KVE@%8@*zpGySoyenHVc8_czfNk?vqn^CXyki!g`CJXlS&SaMIcaF`
zbzkR2?quDQX=?`@BOwQubwr+3cU@O9+8k+h@-I
zB@Qa_N+^_L2FJAz@39#_4C$CAQeq}Wx3p!Gc@))JcGG(<;Pd-H1mT-%%`W6OOOky2
zLO1Fg3H^rG^jkHNdOnoQk-F2`rTGO%uuGR0AmB0_{*c#l+;-RGscYZ%G|Zu{yTGF{
zKouZslXcw25*Liw~jpd(MCo+rVe=1K1(BVF=AXzU=FU#C93K`=3=PSk~
zCs7p$wPv)0aB$)+G;`_oHNTi(tV3v+b{=OFw&2nyd2bKS>dY$7@plLH0$BQ`TOhl3p0hSh{`xFCNq{H4H
z>n?mZ0^%#@x{Z|6eltP$T{~bR4*aYVGi@PFdi-G9q#af@&q>>;+gUVF7cLq
z?&)^ad(jVlJc(ir<)02X0e_Mgr|le>u5a(yh*UuGAKoz(Ego3YX{@~Cn-me?g7)ai
zO4V^^4Oc}#l;Bwmg%G@DZ-32;?mH8oJE^KcK1I{I`(>n6Cx2qBE5#EdpWA+|x1Rj|
zLwpuQ%UlQ5_~xO{Aq@~Jxup#@hDVVmOfl6;W=QY|ikKySGPG==YItI)qW#h}br4tb
z@gQF9`{)j
zxtqUoQ6I#+S5v8#ist2xoE*;MBTiQa0bQr^7N?N8=cf@KwYRq~B~)dTvGkmpSB?fk
zFIy|;pL#@6jH{&*Xj29n!L;=R7AKW?icteG{+q;w3I3tCO*;|q0Fa>;D06#-GVMm_
zl5`LwY=xTN#?vVa68tBEgf*L$_Y`ZP6?qUx86o+5&#*Ua0lc~pp=($8-tQf|3oE0b
zwHk=6Zz5(qIpbux)Q6$YPT`K#I%Hxa6x$=
zLm5=h-?)cI!EWTa)2e5%#>gZ_0zFXzb5o#Z4tXK(>nUHY6m45Z0&bKzCeT&=Y+xT_
zG4nIiKT~Jp?imV-%gV?Cv-ARv`emKu$3-T`0!r4D7(sSKL-n9oRAv6#E%cB^AC=$%
zPT7AfTQQ#PdB>nCQGMa?zWzSGQ)?aQR8`iPkFzQgGnh@9f0j^6)=25oE0mAKI$#ZB
zqP&@ukxtH0x3NxHk)Cs~fwb5~0U($zHv`Q#pG(UQvRLwF#R~|jCrBZWy?gm5il-~P
zAJ7Afd~2&Zi~ghhy9#L`s@kNK?|+#Hm76Bbf-LYq;;erw_Vcv@(N9yycXo7{B%@2%
r&;&RzsoLb_q#Y*L!{lc8zjg}K1k77SE+1`_VtURSHaQfoXT<*-4th1#
literal 0
HcmV?d00001
diff --git a/requirements.txt b/requirements.txt
index cdda0d1..1471909 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,5 +2,4 @@ browser-use
langchain-google-genai
pyperclip
gradio
-langchain-ollama
-
+langchain-ollama
\ No newline at end of file
diff --git a/webui.py b/webui.py
index eef1e3c..a1e81b4 100644
--- a/webui.py
+++ b/webui.py
@@ -4,62 +4,56 @@
# @Email : wenshaoguo1026@gmail.com
# @Project : browser-use-webui
# @FileName: webui.py
-import pdb
from dotenv import load_dotenv
load_dotenv()
import argparse
-
-import asyncio
+import os
import gradio as gr
-import asyncio
-import os
-from pprint import pprint
-from typing import List, Dict, Any
-
-from playwright.async_api import async_playwright
+from browser_use.agent.service import Agent
from browser_use.browser.browser import Browser, BrowserConfig
from browser_use.browser.context import (
- BrowserContext,
BrowserContextConfig,
BrowserContextWindowSize,
)
-from browser_use.agent.service import Agent
+from playwright.async_api import async_playwright
-from src.browser.custom_browser import CustomBrowser, BrowserConfig
-from src.browser.custom_context import BrowserContext, BrowserContextConfig
-from src.controller.custom_controller import CustomController
from src.agent.custom_agent import CustomAgent
from src.agent.custom_prompts import CustomSystemPrompt
-
+from src.browser.custom_browser import BrowserConfig, CustomBrowser
+from src.browser.custom_context import BrowserContextConfig
+from src.controller.custom_controller import CustomController
from src.utils import utils
+
async def run_browser_agent(
- agent_type,
- llm_provider,
- llm_model_name,
- llm_temperature,
- llm_base_url,
- llm_api_key,
- use_own_browser,
- headless,
- disable_security,
- window_w,
- window_h,
- save_recording_path,
- task,
- add_infos,
- max_steps,
- use_vision
+ agent_type,
+ llm_provider,
+ llm_model_name,
+ llm_temperature,
+ llm_base_url,
+ llm_api_key,
+ use_own_browser,
+ headless,
+ disable_security,
+ window_w,
+ window_h,
+ save_recording_path,
+ task,
+ add_infos,
+ max_steps,
+ use_vision,
):
# Ensure the recording directory exists
os.makedirs(save_recording_path, exist_ok=True)
# Get the list of existing videos before the agent runs
- existing_videos = set(glob.glob(os.path.join(save_recording_path, '*.[mM][pP]4')) +
- glob.glob(os.path.join(save_recording_path, '*.[wW][eE][bB][mM]')))
+ existing_videos = set(
+ glob.glob(os.path.join(save_recording_path, "*.[mM][pP]4"))
+ + glob.glob(os.path.join(save_recording_path, "*.[wW][eE][bB][mM]"))
+ )
# Run the agent
llm = utils.get_llm_model(
@@ -67,7 +61,7 @@ async def run_browser_agent(
model_name=llm_model_name,
temperature=llm_temperature,
base_url=llm_base_url,
- api_key=llm_api_key
+ api_key=llm_api_key,
)
if agent_type == "org":
final_result, errors, model_actions, model_thoughts = await run_org_agent(
@@ -79,7 +73,7 @@ async def run_browser_agent(
save_recording_path=save_recording_path,
task=task,
max_steps=max_steps,
- use_vision=use_vision
+ use_vision=use_vision,
)
elif agent_type == "custom":
final_result, errors, model_actions, model_thoughts = await run_custom_agent(
@@ -93,14 +87,16 @@ async def run_browser_agent(
task=task,
add_infos=add_infos,
max_steps=max_steps,
- use_vision=use_vision
+ use_vision=use_vision,
)
else:
raise ValueError(f"Invalid agent type: {agent_type}")
# Get the list of videos after the agent runs
- new_videos = set(glob.glob(os.path.join(save_recording_path, '*.[mM][pP]4')) +
- glob.glob(os.path.join(save_recording_path, '*.[wW][eE][bB][mM]')))
+ new_videos = set(
+ glob.glob(os.path.join(save_recording_path, "*.[mM][pP]4"))
+ + glob.glob(os.path.join(save_recording_path, "*.[wW][eE][bB][mM]"))
+ )
# Find the newly created video
latest_video = None
@@ -109,31 +105,34 @@ async def run_browser_agent(
return final_result, errors, model_actions, model_thoughts, latest_video
+
async def run_org_agent(
- llm,
- headless,
- disable_security,
- window_w,
- window_h,
- save_recording_path,
- task,
- max_steps,
- use_vision
+ llm,
+ headless,
+ disable_security,
+ window_w,
+ window_h,
+ save_recording_path,
+ task,
+ max_steps,
+ use_vision,
):
browser = Browser(
config=BrowserConfig(
headless=headless,
disable_security=disable_security,
- extra_chromium_args=[f'--window-size={window_w},{window_h}'],
+ extra_chromium_args=[f"--window-size={window_w},{window_h}"],
)
)
async with await browser.new_context(
- config=BrowserContextConfig(
- trace_path='./tmp/traces',
- save_recording_path=save_recording_path if save_recording_path else None,
- no_viewport=False,
- browser_window_size=BrowserContextWindowSize(width=window_w, height=window_h),
- )
+ config=BrowserContextConfig(
+ trace_path="./tmp/traces",
+ save_recording_path=save_recording_path if save_recording_path else None,
+ no_viewport=False,
+ browser_window_size=BrowserContextWindowSize(
+ width=window_w, height=window_h
+ ),
+ )
) as browser_context:
agent = Agent(
task=task,
@@ -150,18 +149,19 @@ async def run_org_agent(
await browser.close()
return final_result, errors, model_actions, model_thoughts
+
async def run_custom_agent(
- llm,
- use_own_browser,
- headless,
- disable_security,
- window_w,
- window_h,
- save_recording_path,
- task,
- add_infos,
- max_steps,
- use_vision
+ llm,
+ use_own_browser,
+ headless,
+ disable_security,
+ window_w,
+ window_h,
+ save_recording_path,
+ task,
+ add_infos,
+ max_steps,
+ use_vision,
):
controller = CustomController()
playwright = None
@@ -177,14 +177,14 @@ async def run_custom_agent(
no_viewport=False,
headless=headless, # 保持浏览器窗口可见
user_agent=(
- 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 '
- '(KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36'
+ "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
+ "(KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36"
),
java_script_enabled=True,
bypass_csp=disable_security,
ignore_https_errors=disable_security,
record_video_dir=save_recording_path if save_recording_path else None,
- record_video_size={'width': window_w, 'height': window_h}
+ record_video_size={"width": window_w, "height": window_h},
)
else:
browser_context_ = None
@@ -193,17 +193,21 @@ async def run_custom_agent(
config=BrowserConfig(
headless=headless,
disable_security=disable_security,
- extra_chromium_args=[f'--window-size={window_w},{window_h}'],
+ extra_chromium_args=[f"--window-size={window_w},{window_h}"],
)
)
async with await browser.new_context(
- config=BrowserContextConfig(
- trace_path='./tmp/result_processing',
- save_recording_path=save_recording_path if save_recording_path else None,
- no_viewport=False,
- browser_window_size=BrowserContextWindowSize(width=window_w, height=window_h),
+ config=BrowserContextConfig(
+ trace_path="./tmp/result_processing",
+ save_recording_path=save_recording_path
+ if save_recording_path
+ else None,
+ no_viewport=False,
+ browser_window_size=BrowserContextWindowSize(
+ width=window_w, height=window_h
),
- context=browser_context_
+ ),
+ context=browser_context_,
) as browser_context:
agent = CustomAgent(
task=task,
@@ -212,7 +216,7 @@ async def run_custom_agent(
llm=llm,
browser_context=browser_context,
controller=controller,
- system_prompt_class=CustomSystemPrompt
+ system_prompt_class=CustomSystemPrompt,
)
history = await agent.run(max_steps=max_steps)
@@ -223,6 +227,7 @@ async def run_custom_agent(
except Exception as e:
import traceback
+
traceback.print_exc()
final_result = ""
errors = str(e) + "\n" + traceback.format_exc()
@@ -240,10 +245,9 @@ async def run_custom_agent(
return final_result, errors, model_actions, model_thoughts
-import argparse
-import gradio as gr
-from gradio.themes import Base, Default, Soft, Monochrome, Glass, Origin, Citrus, Ocean
-import os, glob
+import glob
+
+from gradio.themes import Citrus, Default, Glass, Monochrome, Ocean, Origin, Soft
# Define the theme map globally
theme_map = {
@@ -253,9 +257,10 @@ theme_map = {
"Glass": Glass(),
"Origin": Origin(),
"Citrus": Citrus(),
- "Ocean": Ocean()
+ "Ocean": Ocean(),
}
+
def create_ui(theme_name="Ocean"):
css = """
.gradio-container {
@@ -283,25 +288,27 @@ def create_ui(theme_name="Ocean"):
}
}
"""
-
- with gr.Blocks(title="Browser Use WebUI", theme=theme_map[theme_name], css=css, js=js) as demo:
+
+ with gr.Blocks(
+ title="Browser Use WebUI", theme=theme_map[theme_name], css=css, js=js
+ ) as demo:
with gr.Row():
gr.Markdown(
"""
# 🌐 Browser Use WebUI
### Control your browser with AI assistance
""",
- elem_classes=["header-text"]
+ elem_classes=["header-text"],
)
-
+
with gr.Tabs() as tabs:
- with gr.TabItem("🤖 Agent Settings", id=1):
+ with gr.TabItem("⚙️ Agent Settings", id=1):
with gr.Group():
agent_type = gr.Radio(
["org", "custom"],
label="Agent Type",
value="custom",
- info="Select the type of agent to use"
+ info="Select the type of agent to use",
)
max_steps = gr.Slider(
minimum=1,
@@ -309,26 +316,33 @@ def create_ui(theme_name="Ocean"):
value=100,
step=1,
label="Max Run Steps",
- info="Maximum number of steps the agent will take"
+ info="Maximum number of steps the agent will take",
)
use_vision = gr.Checkbox(
label="Use Vision",
value=True,
- info="Enable visual processing capabilities"
+ info="Enable visual processing capabilities",
)
with gr.TabItem("🔧 LLM Configuration", id=2):
with gr.Group():
llm_provider = gr.Dropdown(
- ["anthropic", "openai", "gemini", "azure_openai", "deepseek", "ollama"],
+ [
+ "anthropic",
+ "openai",
+ "gemini",
+ "azure_openai",
+ "deepseek",
+ "ollama",
+ ],
label="LLM Provider",
- value="gemini",
- info="Select your preferred language model provider"
+ value="openai",
+ info="Select your preferred language model provider",
)
llm_model_name = gr.Textbox(
label="Model Name",
- value="gemini-2.0-flash-exp",
- info="Specify the model to use"
+ value="gpt-4o",
+ info="Specify the model to use",
)
llm_temperature = gr.Slider(
minimum=0.0,
@@ -336,17 +350,14 @@ def create_ui(theme_name="Ocean"):
value=1.0,
step=0.1,
label="Temperature",
- info="Controls randomness in model outputs"
+ info="Controls randomness in model outputs",
)
with gr.Row():
llm_base_url = gr.Textbox(
- label="Base URL",
- info="API endpoint URL (if required)"
+ label="Base URL", info="API endpoint URL (if required)"
)
llm_api_key = gr.Textbox(
- label="API Key",
- type="password",
- info="Your API key"
+ label="API Key", type="password", info="Your API key"
)
with gr.TabItem("🌐 Browser Settings", id=3):
@@ -355,51 +366,51 @@ def create_ui(theme_name="Ocean"):
use_own_browser = gr.Checkbox(
label="Use Own Browser",
value=False,
- info="Use your existing browser instance"
+ info="Use your existing browser instance",
)
headless = gr.Checkbox(
label="Headless Mode",
value=False,
- info="Run browser without GUI"
+ info="Run browser without GUI",
)
disable_security = gr.Checkbox(
label="Disable Security",
value=True,
- info="Disable browser security features"
+ info="Disable browser security features",
)
-
+
with gr.Row():
window_w = gr.Number(
label="Window Width",
- value=1920,
- info="Browser window width"
+ value=1280,
+ info="Browser window width",
)
window_h = gr.Number(
label="Window Height",
- value=1080,
- info="Browser window height"
+ value=1100,
+ info="Browser window height",
)
-
+
save_recording_path = gr.Textbox(
label="Recording Path",
placeholder="e.g. ./tmp/record_videos",
value="./tmp/record_videos",
- info="Path to save browser recordings"
+ info="Path to save browser recordings",
)
- with gr.TabItem("📝 Task Settings", id=4):
+ with gr.TabItem("🤖 Run Agent", id=4):
task = gr.Textbox(
label="Task Description",
lines=4,
placeholder="Enter your task here...",
value="go to google.com and type 'OpenAI' click search and give me the first url",
- info="Describe what you want the agent to do"
+ info="Describe what you want the agent to do",
)
add_infos = gr.Textbox(
label="Additional Information",
lines=3,
placeholder="Add any helpful context or instructions...",
- info="Optional hints to help the LLM complete the task"
+ info="Optional hints to help the LLM complete the task",
)
with gr.Row():
@@ -414,54 +425,74 @@ def create_ui(theme_name="Ocean"):
with gr.Row():
with gr.Column():
final_result_output = gr.Textbox(
- label="Final Result",
- lines=3,
- show_label=True
+ label="Final Result", lines=3, show_label=True
)
with gr.Column():
errors_output = gr.Textbox(
- label="Errors",
- lines=3,
- show_label=True
+ label="Errors", lines=3, show_label=True
)
with gr.Row():
with gr.Column():
model_actions_output = gr.Textbox(
- label="Model Actions",
- lines=3,
- show_label=True
+ label="Model Actions", lines=3, show_label=True
)
with gr.Column():
model_thoughts_output = gr.Textbox(
- label="Model Thoughts",
- lines=3,
- show_label=True
+ label="Model Thoughts", lines=3, show_label=True
)
# Run button click handler
run_button.click(
fn=run_browser_agent,
inputs=[
- agent_type, llm_provider, llm_model_name, llm_temperature,
- llm_base_url, llm_api_key, use_own_browser, headless,
- disable_security, window_w, window_h, save_recording_path,
- task, add_infos, max_steps, use_vision
+ agent_type,
+ llm_provider,
+ llm_model_name,
+ llm_temperature,
+ llm_base_url,
+ llm_api_key,
+ use_own_browser,
+ headless,
+ disable_security,
+ window_w,
+ window_h,
+ save_recording_path,
+ task,
+ add_infos,
+ max_steps,
+ use_vision,
+ ],
+ outputs=[
+ final_result_output,
+ errors_output,
+ model_actions_output,
+ model_thoughts_output,
+ recording_display,
],
- outputs=[final_result_output, errors_output, model_actions_output, model_thoughts_output, recording_display]
)
return demo
+
def main():
parser = argparse.ArgumentParser(description="Gradio UI for Browser Agent")
- parser.add_argument("--ip", type=str, default="127.0.0.1", help="IP address to bind to")
+ parser.add_argument(
+ "--ip", type=str, default="127.0.0.1", help="IP address to bind to"
+ )
parser.add_argument("--port", type=int, default=7788, help="Port to listen on")
- parser.add_argument("--theme", type=str, default="Ocean", choices=theme_map.keys(), help="Theme to use for the UI")
+ parser.add_argument(
+ "--theme",
+ type=str,
+ default="Ocean",
+ choices=theme_map.keys(),
+ help="Theme to use for the UI",
+ )
parser.add_argument("--dark-mode", action="store_true", help="Enable dark mode")
args = parser.parse_args()
demo = create_ui(theme_name=args.theme)
demo.launch(server_name=args.ip, server_port=args.port)
-if __name__ == '__main__':
+
+if __name__ == "__main__":
main()
-## Background
+