Web Agent技术揭秘:如何让DeepSeek接管与控制你的浏览器?-技术文章-莫方教程网

Web Agent是这样一种特殊的智能体：它借助AI自动控制你的浏览器，并完成你“交代”的任务。比如帮你挑选一部最新的iPhone或者到旅行网站预订机票。这样的智能数字助手，无论是对生活还是工作，未来无疑都具有重大的意义。当前有大量的研究正针对这种Agent展开，本文就来聊聊其最新进展及DeepSeek的应用。

Web Agent是什么？
Web Agent的工作原理
Web Agent的实现技术
介绍两个Web Agent框架
实现基于DeepSeek的Web Agent并测试

Web Agent是什么

Web Agent是一种工作在UI层的AI智能体。在当前语境下，你可以认为它就是由大模型所驱动（LLM/VLM，大语言模型/多模态的视觉语言模型），能够自主的理解任务、推理并模拟人类在浏览器中的操作，最终完成任务目标。比如一个简单的任务：

“到Apple公司网站上了解最新的iPhone16e的价格信息"

这样一个任务需要Web Agent自动完成如下任务步骤：

如果你了解RPA（机器人流程自动化），可以把Web Agent看作是一种大模型驱动的更灵活的RPA机器人。

Web Agent的工作原理

Web Agent的工作过程与原理看下图，如果你熟悉ReAct范式的Agent应该会似曾相识，即通过Thought（思考）->Action（行动）->Observation（观察）这样的推理循环来逐步完成任务，在过程中会不断的动态调整自己的行为。

但Web Agent与我们熟知的ReAct Agent的差异主要在于：

Observation：ReAct Agent需要观察的对象更多是前置任务已经获得的数据，比如API调用结果；而Web gent需要观察的对象则为屏幕上呈现出的页面内容，更不可预期且结构更复杂。
Thought：ReAct Agent推理的下一步一般为LLM调用或者工具使用；而Web Agent的下一步则为交互动作，如点击按钮、输入文字、打开网址等。
Action：Web Agent可以使用的工具并非简单的函数或者Restful API，而是浏览器。为了控制浏览器，通常会借助前端的自动化框架，比如Selenium、Playwright。

其他的一些差异总结：

Web Agent的实现技术

针对Web Agent上述的能力要求，你需要有不同于传统Agent的解决方案：

Observation

这是Web Agent的“眼睛”。其作用是把看到的屏幕内容（WebUI）转化为可以让“大脑”（LLM/VLM）用来推理出预期操作的结构化信息。

为什么简单的多模态模型的推理是不够的？
你可能会想到直接把屏幕动态截图让VLM来推理行动，但这是不够的。因为Agent需要推理的下一步动作，不能仅仅是简单的语言描述。如：
“点击屏幕右边的搜索按钮进入下一步”，
而是可以让浏览器接口来执行的更精准的结构化信息，如：
{ "description":"启动搜索",
"type":"click",
"position":{"xpath":"按钮的xpath路径"}
}
而这里的很多信息比如元素位置，是直接的屏幕截图无法提供的。

目前可以看到两种解决方案：

【深层的页面解析】：借助Playwright或者Selenium的浏览器控制API提取页面的DOM与HTML内容，经过解析处理后，对页面的不同节点进行组织与“标识”，最终构造一个详细的页面结构信息，交给推理模块使用。
为了协助后续的大模型更精准的推理，可以同时把界面截图作为辅助信息传入（需要多模态模型）。以下是一个动态标识过的页面：

【纯视觉识别与定位】直接通过计算机视觉AI模型来识别页面截图上的元素与内容，做图像分类、目标检测、相对定位、文本识别等，从而形成供后续推理使用的结构化信息，通常包含识别出的元素坐标、文字描述、作用等。这种方案常用到的一些视觉模型比如：YOLO、DeepLab、CLIP以及OCR模型等。

Thought

推理是大模型发挥作用的地方。其目的是根据观察到的结果（Observation提供的结构化页面信息），来推理出下一步交互动作。这通常也有两种选择：

普通模型LLM：根据纯文本的结构化信息推理。
多模态模型VLM：输入UI截图协助，获得更精准的推理结果。

Action

Web Agent的动作执行是借助浏览器来实现自动化的web访问与操作，通常借助一些浏览器控制工具（常被用于自动化测试）：

Selenium：最广泛使用的浏览器自动化工具之一，可以精确控制浏览器行为，模拟用户点击、表单、滚动等操作。
Playwright：微软开发的被广泛使用的自动化测试框架。支持多种浏览器与多操作系统，支持复杂的页面操作。

介绍两个Web Agent框架

如果你需要尝试构建一个Web Agent，这里首先介绍两个工具：

OmniParser

微软推出的一个纯视觉方案的屏幕解析工具，帮助把UI屏幕转化为结构化的格式。其核心是一个微调过的视觉模型（不是语言模型），训练数据集来自一些热门的网页截图及其标注信息。

OmniParser的输出是一个经过标注的新图片与结构化的描述：

结构化的描述信息如下：

但是注意OmniParser只是提供了上述“Observation”部分的解决方案，并不是端到端的Agent开发框架，推理与行动需要自行实现，不过在最新的V2版本中提供了Agent例子与工具。

Browser-use

一个端到端的构建Web Agent的框架。其在WebVoyager的基准测试中取得了最好的性能（WebVoyager本身也是一个Web Agent开发框架，但自带了可用于基准测试的任务数据）。官方公布Browser-use的任务准确率对比结果如下：

Browser-use采用的技术栈为：

Observation：页面解析+截图辅助的非视觉方案。
Thought：建议采用gpt-4o作为主模型，目前也支持DeepSeek等模型。
Action：微软Playwright作为浏览器控制框架。

实现基于DeepSeek的Web Agent

实现Web Agent

我们来构建一个采用DeepSeek模型的Web Agent，基于Browser-use可以非常快速的实现这个Agent：

from langchain_openai import ChatOpenAI
from browser_use import Agent
from dotenv import load_dotenv
from browser_use import Agent
from pydantic import SecretStr

load_dotenv()

import asyncio

llm_deepseekv3 = ChatOpenAI(base_url='https://api.deepseek.com/v1',model="deepseek-chat",api_key=SecretStr('sk-*'))

async def main():
    agent = Agent(
        task="Learn about the latest price information for the iPhone 16e on Apple's website.",
        llm=llm_deepseekv3,
        use_vision=False
    )
    result = await agent.run()

    print ("\n===============Final Result===============\n")
    print(result.final_result())

asyncio.run(main())

一个最基本的Web Agent创建就是这么简单！

简单测试

首先看下运行的效果，可以看到Agent会自动打开浏览器窗口，然后去完成这里的简单任务。在任务执行过程中，可以看到每打开一个页面，页面元素随后会被标记（如下面视频中展示的带有不同颜色与数字的小box），这是一个结构化信息转换过程。随后大模型会推理下一个步骤，直到任务完成。

我们在后台跟踪LLM的输出，可以看到每一个步骤（step）的过程，比如Step 2:

这个输出中可以看到：

大模型会根据结构化的页面信息，推理出下一步的目标（goal）与动作（action），及必要的参数。
随后框架会解析推理结果，比如这里知道下一步需要“点击index为17的元素”，以了解更多的信息。

经过多次这样的迭代，最后成功获得了输出：

其他模型测试

我们对一些其他模型进行尝试，结果如下：

gpt-4o/gpt-4o-mini：成功
moonshot-v1-32k: 成功
deepseek-r1满血版: 由于速度过慢，未测试成功
ollama的部分开源模型：基本全部失败

观测到的一些结果与我们的判断包括：

Web Agent对大模型推理与结构化输出能力要求很高，低参数的开源模型，如果不经过针对性的微调，很难直接胜任
作为主推理的deepseek-v3相比deepseek-r1要更适合
对复杂流程的任务能力还不足，很容易失败
对网站访问的一些特殊情形支持不足，比如弹窗
暂时还不支持自动化流程中的人工参与，比如输入验证码

关于deepseek-r1的特殊应用

直接使用deepseek-r1未能成功测试，但Browser-use框架支持一个特性，即允许在主推理模型之外设定一个辅助规划的大模型（Planner_llm）。其作用是在必要的时机（可以设置，比如每3步让Planner_llm参与）充当”参谋”，即根据当前状态分析并给出后续的计划建议，这个计划会被主模型用来参考，以推理真正的行动步骤：

...
planner_llm = ChatOllama(model="deepseek-r1")

async def main():
    agent = Agent(
        ...
        planner_llm=planner_llm,
        planner_interval=3,
        
    )
...

我们让ollama中的deepseek-r1帮助规划，最终也可以测试成功。如果你感兴趣，可以使用browser-use自带的评估程序，来评估增加Planner_llm后是否能够带来复杂任务准确性的提升。

以上我们详细阐述了Web Agent的技术原理，以及一些实现方法，并借助开源框架构建了基于DeepSeek的测试Web Agent。Web Agent是一种有着极高推理能力要求的智能体，在当前条件下，必须承认无论是端到端的性能表现，还是面对复杂任务的稳定性，都还有着巨大的提升空间。期待未来随着多模态大模型及推理模型的不断演进与增强，这些存在的问题都会得到完美的解决。

私信“交流”

一起探讨AI大模型的应用实践

莫方教程网

专业程序员编程教程与实战案例分享

Web Agent技术揭秘:如何让DeepSeek接管与控制你的浏览器?