零代码玩转AI网页自动化：Streamlit可视化界面全攻略

你是否曾因重复的网页操作而烦恼？是否想让AI帮你自动填写表单、提取数据却被复杂代码劝退？本文将带你通过Browser-Use的Streamlit可视化界面，无需编程基础即可实现AI驱动的网页自动化，5分钟上手完成从航班查询到数据提取的复杂任务。

为什么选择Streamlit界面？

Browser-Use作为一款让AI像人类一样浏览网页的开源工具，提供了两种主流UI交互方式：

• Gradio界面：侧重开发者调试，提供详细的步骤解析examples/ui/gradio_demo.py
• Streamlit界面：面向普通用户，注重操作流畅性和结果可视化examples/ui/streamlit_demo.py

Streamlit版本特别适合：

• 运营人员快速配置自动化任务
• 非技术人员实现数据采集需求
• 需要实时展示自动化过程的场景

3步上手使用指南

1. 环境准备

首先克隆项目仓库并安装依赖：

git clone https://gitcode.com/GitHub_Trending/br/browser-use
cd browser-use
pip install -r requirements.txt
pip install streamlit

2. 配置API密钥

支持两种主流AI模型提供商，需提前准备对应API密钥：

• OpenAI：获取API密钥
• Anthropic：获取API密钥

在系统环境变量中设置密钥，或直接在代码中修改：

# 示例：修改streamlit_demo.py设置默认密钥
os.environ['OPENAI_API_KEY'] = '你的API密钥'

3. 启动应用

执行以下命令启动Streamlit界面：

python -m streamlit run examples/ui/streamlit_demo.py

浏览器会自动打开界面，显示如下核心功能区：

• 任务输入框：描述需要AI完成的网页操作
• 模型选择器：切换OpenAI/Anthropic提供商
• 运行按钮：启动自动化任务
• 结果展示区：实时显示AI操作过程

典型应用场景演示

航班信息自动查询

在任务输入框中输入：

访问携程网站，查询从上海到北京的明天航班，提取出发时间、价格和准点率

选择GPT-4.1模型后点击"Run Agent"，系统将自动完成：

1. 打开浏览器访问携程官网
2. 填写出发地、目的地和日期
3. 点击搜索按钮
4. 提取并整理航班信息

社交媒体内容监控

配置任务：

访问Reddit搜索"browser-use"相关帖子，提取标题和链接

系统将使用智能滚动和内容提取技术，自动处理分页加载，最终返回结构化结果。

高级功能解析

多模型切换机制

Streamlit界面实现了灵活的模型切换功能，核心代码位于examples/ui/streamlit_demo.py：

def get_llm(provider: str):
    if provider == 'anthropic':
        from browser_use.llm import ChatAnthropic
        return ChatAnthropic(model='claude-3-5-sonnet-20240620', temperature=0.0)
    elif provider == 'openai':
        from browser_use import ChatOpenAI
        return ChatOpenAI(model='gpt-4.1', temperature=0.0)

支持根据任务复杂度选择合适模型，平衡效果与成本。

自动化过程可视化

通过Streamlit的实时状态更新功能，可直观看到AI的每一步操作：

with st.spinner('Running automation...'):
    await agent.run(max_steps=25)
st.success('Task completed! 🎉')

操作历史和中间结果会实时展示在界面上，便于调试和优化任务描述。

常见问题解决

API密钥错误

若出现API key is not set错误，请检查：

1. 环境变量是否正确配置
2. 密钥是否有足够权限
3. 是否在防火墙后阻止了API访问

任务执行超时

对于复杂任务，可修改代码增加超时限制：

await agent.run(max_steps=50)  # 默认25步，可根据需要增加

浏览器无法启动

确保已安装必要的浏览器驱动，项目提供Docker配置简化环境问题：

docker build -f Dockerfile -t browser-use .
docker run -it browser-use

总结与扩展

通过Streamlit可视化界面，Browser-Use让AI网页自动化变得触手可及。无论是市场调研、数据采集还是流程自动化，都能通过简单的自然语言描述实现。

进阶用户可探索：

• 自定义工具集成：tools/service.py
• 浏览器监控机制：browser/watchdogs/
• 更多示例代码：examples/

现在就动手尝试，让AI成为你的网页操作助手，解放重复劳动！