30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度大家好我是专注于技术分享的博主。今天我们来深入探讨一个近期在开发者社区引发热议的话题AI Agent智能体的落地实践。这个话题源于阿里开源的一个名为Page Agent的项目它为我们提供了一个绝佳的、可实操的案例来理解如何将一个AI大模型如GPT系列的能力具体应用到解决实际业务问题如网页信息提取上。同时围绕GPT-5.6等大模型的风波也提醒我们在技术选型时需要关注稳定性和生态。本文将抛开新闻视角从工程实践出发手把手带你理解Page Agent的原理并基于其开源代码构建一个属于自己的、可运行的网页信息智能提取工具。1. 背景与核心概念从AI新闻到工程实践最近技术圈有两件事热度很高一是阿里开源了Page Agent二是关于GPT-5.6的发布再生变数。对于开发者而言前者是一个实实在在可以“拿来即用”或“学习借鉴”的开源项目后者则是一个需要持续观察的技术动态。我们的重点将放在前者因为开源代码是学习AI工程化最好的教材。那么Page Agent到底是什么简单来说Page Agent是一个基于大语言模型LLM的网页信息提取与交互智能体。它的核心目标是给定一个网页URLAgent能够理解网页内容并根据用户的自然语言指令精准地提取、总结或操作网页中的信息。它解决了什么问题信息提取自动化传统上我们需要编写复杂的爬虫规则XPath、CSS Selector来抓取网页数据规则脆弱且难以维护。Page Agent利用LLM对网页语义的理解能力可以用自然语言描述需要什么信息大大降低了技术门槛。处理动态与复杂页面对于大量JavaScript渲染的现代网页SPA传统爬虫很难处理。Page Agent可以通过无头浏览器如Playwright获取渲染后的完整DOM再交给LLM分析。任务导向的交互它不仅仅能“读”还能模拟“操作”。例如你可以指令它“找到这个商品的价格并加入购物车”Agent可以尝试解析页面元素并执行点击操作。为什么开发者需要关注因为Page Agent清晰地展示了一个AI Agent的标准架构感知获取网页- 认知LLM理解与规划- 行动提取或交互- 反馈。学习它就等于学习如何将LLM API如GPT、通义千问与具体的工具浏览器、计算器结合构建解决垂直领域问题的智能应用。这比单纯调用ChatGPT的Completion接口更有工程价值。2. 环境准备与版本说明在开始动手之前我们需要准备好开发环境。Page Agent项目通常采用Python作为开发语言结合Playwright进行网页操控并调用大模型API。基础环境要求操作系统Windows 10/11, macOS, 或 Linux (Ubuntu 20.04 推荐)。本文演示基于 Ubuntu 22.04。Python版本 3.8 - 3.11。建议使用3.9或3.10以获得最佳兼容性。我们将使用venv创建虚拟环境。包管理工具pip(21.0)版本控制Git (用于克隆开源代码)IDE/编辑器VS Code, PyCharm 或任何你熟悉的编辑器。核心依赖版本说明由于开源项目迭代快以下版本是一个稳定的参考组合具体请以项目官方requirements.txt为准。# 核心框架与工具 playwright1.40.0 # 无头浏览器用于网页渲染与自动化 beautifulsoup44.12.0 # HTML解析库备选方案 lxml4.9.0 # 高效的XML/HTML解析器 # 大模型调用与Agent框架 langchain0.1.0 # Agent开发框架Page Agent可能基于或类似其思想 openai1.0.0 # 调用OpenAI API (如GPT-4)。如果使用阿里云百炼等需对应SDK。 # 或使用兼容OpenAI API的SDK例如 dashscope (阿里通义千问) # 其他工具 python-dotenv1.0.0 # 管理环境变量如API密钥 requests2.31.0 # HTTP客户端重要提示关于大模型服务你可以选择OpenAI GPT系列需准备有效的API Key并注意网络可访问性。国内替代方案如阿里云百炼、通义千问、智谱AI等。它们大多提供了与OpenAI API兼容的接口只需替换base_url和api_key。本文示例将采用一种兼容模式编写方便你替换。3. 核心原理与架构拆解在编码之前理解Page Agent的“大脑”如何工作至关重要。其核心架构可以抽象为以下流程这本质上是一个ReAct (Reasoning Acting)模式的典型应用。用户输入自然语言指令如“获取知乎热榜标题” | v [Agent核心] 调用LLM进行任务规划与工具选择 | v [工具执行] 使用Playwright导航到目标URL获取页面内容HTML/截图/可访问性树 | v [内容处理] 可能对原始HTML进行清洗、简化或关键信息抽取以减少LLM的Token消耗 | v [LLM分析] 将处理后的页面内容与用户指令再次提交给LLM要求其提取或回答 | v [结果解析与输出] Agent解析LLM的返回生成结构化数据如JSON或自然语言答案关键组件解析网页内容获取器 (Fetcher/Reader)职责根据URL获取网页内容。简单页面可用requestsBeautifulSoup复杂页面必须用Playwright或Selenium渲染。Playwright优势能执行JS获取完整DOM能模拟用户操作点击、输入能生成页面截图供多模态模型分析。内容处理器 (Processor)职责原始HTML可能很大且杂乱广告、脚本、样式。直接扔给LLM成本高且效果差。常见策略提取主内容使用readability或trafilatura等库提取文章正文。构建简化DOM树只保留关键标签如h1,h2,p,a,table及其文本和属性生成一个结构化的文本摘要。可访问性树Playwright可以获取页面的可访问性树page.accessibility.snapshot()它本身就是一个语义化的结构非常适合LLM理解。智能体核心 (Agent Core)职责协调整个流程。它利用LLM的推理能力来决定“做什么”和“用什么工具做”。实现模式基于LangChain利用其提供的AgentExecutor,Tool,ReactAgent等高级抽象可以快速搭建。自定义实现直接调用LLM API通过设计特定的Prompt让模型以固定格式如JSON输出下一步的行动计划Action和输入Input。工具集 (Tools)浏览工具 (navigate_to_url)打开网页。提取工具 (extract_content)获取页面文本/结构。交互工具 (click_element, fill_form)与页面元素交互。计算/判断工具可能需要其他工具辅助决策。提示词工程 (Prompt Engineering)这是Agent的“灵魂”。Prompt需要清晰定义Agent的角色、可用工具、输出格式以及如何解析网页内容。一个坏的Prompt会导致LLM输出混乱无法控制。4. 完整实战构建简易版Page Agent现在我们抛开复杂的框架从零开始构建一个核心功能完整的简易Page Agent。这个Agent能接收一个URL和自然语言指令并返回指令要求的信息。4.1 项目初始化与依赖安装首先创建项目目录并设置虚拟环境。# 创建项目目录 mkdir simple-page-agent cd simple-page-agent # 创建虚拟环境 (Linux/macOS) python3 -m venv venv source venv/bin/activate # Windows 使用 venv\Scripts\activate # 升级pip pip install --upgrade pip # 安装核心依赖 pip install playwright beautifulsoup4 lxml python-dotenv openai # 安装Playwright的浏览器驱动 playwright install chromium创建项目文件结构simple-page-agent/ ├── .env # 存放环境变量API密钥 ├── requirements.txt # 依赖列表 ├── config.py # 配置文件 ├── web_fetcher.py # 网页获取与处理模块 ├── agent_core.py # Agent核心逻辑 ├── tools.py # 工具定义 └── main.py # 主程序入口4.2 配置管理与工具函数编写1. 配置文件 (config.py)这里我们设置模型参数。为了灵活性我们设计成兼容OpenAI格式的API。# config.py import os from dotenv import load_dotenv load_dotenv() # 加载 .env 文件中的环境变量 class Config: # 大模型API配置 - 以兼容OpenAI的格式为例 # 如果你用OpenAI只需设置OPENAI_API_KEY # 如果你用阿里云百炼base_url和api_key都需要改 LLM_API_TYPE os.getenv(LLM_API_TYPE, openai) # openai, dashscope, zhipu... LLM_API_BASE os.getenv(LLM_API_BASE, https://api.openai.com/v1) LLM_API_KEY os.getenv(LLM_API_KEY, ) LLM_MODEL os.getenv(LLM_MODEL, gpt-3.5-turbo) # 或 gpt-4, qwen-max等 # Agent配置 MAX_TOKENS 2000 TEMPERATURE 0.1 # 低温度输出更确定 # 网页获取配置 PLAYWRIGHT_HEADLESS True # 是否无头模式 PAGE_LOAD_TIMEOUT 30000 # 页面加载超时(毫秒) config Config()2. 环境变量文件 (.env)请将你的API密钥放在这里切勿提交到版本控制系统# .env LLM_API_TYPEopenai LLM_API_BASEhttps://api.openai.com/v1 LLM_API_KEYsk-your-openai-api-key-here LLM_MODELgpt-3.5-turbo # 如果使用阿里云百炼示例 # LLM_API_TYPEdashscope # LLM_API_BASEhttps://dashscope.aliyuncs.com/compatible-mode/v1 # LLM_API_KEYsk-your-dashscope-api-key-here # LLM_MODELqwen-max3. 网页获取器 (web_fetcher.py)我们实现一个使用Playwright获取并简化网页内容的类。# web_fetcher.py import asyncio from playwright.async_api import async_playwright from bs4 import BeautifulSoup import logging logging.basicConfig(levellogging.INFO) logger logging.getLogger(__name__) class WebPageFetcher: def __init__(self, headlessTrue, timeout30000): self.headless headless self.timeout timeout async def fetch_with_playwright(self, url): 使用Playwright获取渲染后的页面HTML和简化内容 async with async_playwright() as p: # 启动浏览器推荐Chromium browser await p.chromium.launch(headlessself.headless) context await browser.new_context() page await context.new_page() try: logger.info(f正在导航到: {url}) # 导航到目标URL await page.goto(url, timeoutself.timeout, wait_untilnetworkidle) # 等待网络空闲 # 获取页面HTML html_content await page.content() # 可选获取页面文本内容更简洁 # text_content await page.text_content(body) # 对HTML进行简化处理提取主要元素 simplified_content self._simplify_html(html_content) return { url: url, raw_html: html_content[:5000] ... if len(html_content) 5000 else html_content, # 只留一部分 simplified_content: simplified_content, status: success } except Exception as e: logger.error(f获取页面失败: {e}) return { url: url, error: str(e), status: error } finally: await browser.close() def _simplify_html(self, html): 使用BeautifulSoup提取关键标签内容生成给LLM看的文本 soup BeautifulSoup(html, lxml) # 移除脚本、样式等无关标签 for script in soup([script, style, meta, link]): script.decompose() # 提取可能包含重要信息的标签 elements [] tags_to_keep [h1, h2, h3, h4, h5, h6, p, a, li, td, th, span, div] for tag in soup.find_all(tags_to_keep): text tag.get_text(stripTrue) if text and len(text) 3: # 过滤过短的文本 # 给标题加个前缀方便LLM识别结构 if tag.name.startswith(h): elements.append(f[标题 {tag.name}] {text}) elif tag.name a: href tag.get(href, ) href f ({href}) if href else elements.append(f[链接] {text}{href}) else: elements.append(text) # 合并并限制长度防止超出LLM上下文 simplified_text \n.join(elements[:100]) # 取前100个元素 if len(elements) 100: simplified_text f\n...还有{len(elements)-100}个元素未显示 return simplified_text # 同步方法包装方便在非异步环境中调用 def fetch(self, url): 同步接口 return asyncio.run(self.fetch_with_playwright(url)) if __name__ __main__: # 测试代码 fetcher WebPageFetcher(headlessTrue) result fetcher.fetch(https://news.cnblogs.com) if result[status] success: print(简化后的内容预览:) print(result[simplified_content][:500])4.3 Agent核心与大模型交互4. 大模型客户端 (llm_client.py)创建一个通用的LLM客户端兼容不同提供商。# llm_client.py import openai from openai import OpenAI import logging from config import config logging.basicConfig(levellogging.INFO) logger logging.getLogger(__name__) class LLMClient: def __init__(self): self.api_type config.LLM_API_TYPE self.api_key config.LLM_API_KEY self.base_url config.LLM_API_BASE self.model config.LLM_MODEL # 初始化客户端 self.client OpenAI( api_keyself.api_key, base_urlself.base_url, ) def create_chat_completion(self, messages, temperatureNone, max_tokensNone): 发送聊天补全请求 try: response self.client.chat.completions.create( modelself.model, messagesmessages, temperaturetemperature or config.TEMPERATURE, max_tokensmax_tokens or config.MAX_TOKENS, ) return response.choices[0].message.content except Exception as e: logger.error(f调用LLM API失败: {e}) # 这里可以添加重试逻辑或降级策略 raise5. Agent核心逻辑 (agent_core.py)这里我们实现一个简单的、非循环的Agent。它接收用户指令和网页内容让LLM直接提取信息。# agent_core.py import json import logging from llm_client import LLMClient logging.basicConfig(levellogging.INFO) logger logging.getLogger(__name__) class SimplePageAgent: def __init__(self): self.llm_client LLMClient() def generate_extraction_prompt(self, user_query, page_content): 构建信息提取的Prompt prompt f 你是一个专业的网页信息提取助手。你的任务是从提供的网页内容中精确找出用户需要的信息。 用户的问题是{user_query} 以下是网页的简化内容包含标题、段落、链接等关键元素{page_content}请根据网页内容直接回答用户的问题。要求 1. 答案必须严格基于提供的网页内容不要编造不存在的信息。 2. 如果网页中没有相关信息请明确回答“在提供的网页内容中未找到相关信息”。 3. 如果信息存在请用清晰、简洁的语言总结出来。 4. 如果用户要求提取特定结构如列表、价格、日期请尽量以结构化的方式呈现。 你的回答 return prompt def extract_information(self, user_query, page_content): 执行信息提取 prompt self.generate_extraction_prompt(user_query, page_content) messages [ {role: system, content: 你是一个准确、严谨的网页内容分析助手。}, {role: user, content: prompt} ] logger.info(正在调用LLM分析网页内容...) response self.llm_client.create_chat_completion(messages) logger.info(信息提取完成。) return response4.4 主程序与运行示例6. 主程序入口 (main.py)将以上所有模块串联起来。# main.py import argparse from web_fetcher import WebPageFetcher from agent_core import SimplePageAgent import logging logging.basicConfig(levellogging.INFO, format%(asctime)s - %(name)s - %(levelname)s - %(message)s) logger logging.getLogger(__name__) def main(): parser argparse.ArgumentParser(description简易网页信息提取Agent) parser.add_argument(--url, requiredTrue, help目标网页URL) parser.add_argument(--query, requiredTrue, help你的问题或指令例如总结这篇文章的主要观点列出页面上的所有产品名称和价格。) parser.add_argument(--headless, actionstore_true, defaultTrue, help是否使用无头浏览器模式默认是) args parser.parse_args() logger.info(f开始处理: URL{args.url}, Query{args.query}) # 1. 获取网页内容 fetcher WebPageFetcher(headlessargs.headless) logger.info(正在抓取网页内容...) page_data fetcher.fetch(args.url) if page_data[status] ! success: logger.error(f网页抓取失败: {page_data.get(error)}) return # 2. 使用Agent提取信息 agent SimplePageAgent() logger.info(正在使用AI分析并提取信息...) answer agent.extract_information(args.query, page_data[simplified_content]) # 3. 输出结果 print(\n *50) print( 网页信息提取结果) print(*50) print(f目标网址: {args.url}) print(f用户指令: {args.query}) print(-*50) print( AI 分析结果:) print(-*50) print(answer) print(*50) if __name__ __main__: main()4.5 运行与验证现在让我们运行这个简易的Page Agent来体验一下。示例1提取新闻标题列表# 在项目根目录下执行 python main.py \ --url https://news.cnblogs.com \ --query 列出当前页面上最重要的5条新闻标题及其简要描述。预期输出 程序会先启动无头浏览器访问博客园新闻页然后提取简化内容最后调用LLM。你会看到类似以下的输出2024-06-26 10:00:00 - root - INFO - 开始处理: URLhttps://news.cnblogs.com, Query列出当前页面上最重要的5条新闻标题及其简要描述。 2024-06-26 10:00:01 - root - INFO - 正在抓取网页内容... 2024-06-26 10:00:05 - web_fetcher - INFO - 正在导航到: https://news.cnblogs.com 2024-06-26 10:00:08 - root - INFO - 正在使用AI分析并提取信息... 2024-06-26 10:00:12 - root - INFO - 信息提取完成。 网页信息提取结果 目标网址: https://news.cnblogs.com 用户指令: 列出当前页面上最重要的5条新闻标题及其简要描述。 -------------------------------------------------- AI 分析结果: -------------------------------------------------- 1. **标题OpenAI发布新一代模型架构** 描述OpenAI宣布了其下一代基础模型在推理能力和多模态理解上有显著提升。 2. **标题阿里云开源其大规模分布式训练框架** 描述阿里云将内部使用的AI训练框架开源旨在帮助社区更高效地训练百亿参数模型。 3. **标题PyTorch 2.3 正式版发布强化编译性能** 描述PyTorch团队推出了2.3稳定版重点优化了torch.compile的性能和动态图支持。 4. **标题欧盟通过《人工智能法案》对通用AI模型施加严格义务** 描述欧洲议会最终批准了全球首部综合性AI监管法律对GPT-4等强大模型提出透明度等要求。 5. **标题谷歌DeepMind新研究AI在数学奥林匹克竞赛中接近铜牌水平** 描述DeepMind团队开发的新系统在IMO几何问题上表现出色展示了AI在复杂推理上的进展。 示例2提取特定信息python main.py \ --url https://github.com/microsoft/playwright-python \ --query 这个GitHub仓库是关于什么的它有多少个star通过这两个例子你已经实现了一个具备核心功能的Page Agent。它能够理解你的自然语言指令并从网页中提取出关键信息。5. 常见问题与排查思路在实际运行中你可能会遇到一些问题。以下是常见问题的排查指南。问题现象可能原因解决思路ModuleNotFoundError: No module named openai依赖未正确安装。1. 确认虚拟环境已激活 (source venv/bin/activate)。2. 重新运行pip install -r requirements.txt。playwright._impl._errors.Error: Executable doesnt exist at ...Playwright 浏览器未安装。运行playwright install chromium。网页抓取超时 (TimeoutError)目标网站加载慢或需要复杂交互。1. 增加PAGE_LOAD_TIMEOUT值在config.py中。2. 检查wait_until参数可尝试domcontentloaded替代networkidle。3. 目标网站可能有反爬机制。LLM API调用返回错误 (如401,429)API密钥错误、额度不足、网络问题或接口格式不对。1. 检查.env文件中的LLM_API_KEY是否正确。2. 确认API服务是否可用以及账户是否有余额。3. 如果使用国内服务确认base_url和model名称是否正确。4. 查看完整的错误信息通常会有提示。LLM返回的内容与网页无关或胡言乱语1. 网页简化内容丢失了关键信息。2. Prompt设计不够清晰。3. 模型温度 (temperature) 设置过高。1. 检查web_fetcher.py中_simplify_html函数调整提取的标签或增加长度限制。2. 优化agent_core.py中的Prompt给出更明确的指令和格式示例。3. 将config.py中的TEMPERATURE调低如0.1。程序运行缓慢1. 每次启动都打开新浏览器。2. 网页内容过大LLM处理耗时。3. 网络延迟。1. 考虑复用浏览器实例高级优化。2. 进一步优化网页内容简化策略减少Token数量。3. 使用更快的模型如gpt-3.5-turbo或本地模型。无法处理登录后才能访问的页面当前Agent未处理认证状态。1. 使用Playwright的storage_state保存登录后的Cookie并在后续请求中加载。2. 在代码中模拟登录流程需提供账号密码注意安全风险。6. 进阶优化与工程最佳实践我们上面实现的是一个最基础的版本。要将其用于生产环境或更复杂的场景需要考虑以下优化点1. 内容处理优化智能分块与摘要对于长文章可以先用LLM对每个部分进行摘要再将摘要交给最终的Agent处理避免上下文长度限制。多模态支持除了文本还可以使用Playwright截图并将图片传入支持视觉的大模型如GPT-4V实现“看图说话”式的信息提取。可访问性树优先page.accessibility.snapshot()返回的语义树比原始HTML更干净是更好的信息源。2. Agent架构升级引入ReAct循环实现更复杂的Agent让其能够自主决定下一步操作如“点击下一页”、“在搜索框输入关键词”。这需要设计更复杂的Prompt和工具调用解析逻辑。使用LangChain对于复杂Agent直接使用LangChain框架是更高效的选择。它内置了ReAct、Plan-and-Execute等多种Agent类型以及丰富的工具集成。# 示例使用LangChain构建Agent的伪代码思路 from langchain.agents import initialize_agent, AgentType from langchain.tools import Tool from langchain_openai import ChatOpenAI # 将我们的fetch函数封装成Tool tools [Tool(name网页浏览, funcfetch_webpage, description根据URL获取网页内容)] llm ChatOpenAI(modelgpt-3.5-turbo, temperature0) agent initialize_agent(tools, llm, agentAgentType.ZERO_SHOT_REACT_DESCRIPTION, verboseTrue) result agent.run(去知乎热榜把排名前3的问题标题和链接给我。)3. 性能与稳定性异步并发主程序使用asyncio提高I/O密集型任务如网络请求的效率。错误重试与降级为API调用和网页抓取添加重试机制如tenacity库。当主要模型失败时可以降级到更便宜、更快的模型。结果缓存对相同的URL和查询进行缓存避免重复调用LLM节省成本和时间。4. 安全与合规密钥管理永远不要将API密钥硬编码在代码中。使用.env文件或专业的密钥管理服务如AWS Secrets Manager, HashiCorp Vault。遵守Robots协议在抓取前检查robots.txt尊重网站的爬虫规则。速率限制对目标网站和LLM API的调用实施速率限制避免被封禁。用户隐私如果处理用户提供的URL需考虑隐私政策避免抓取敏感或个人数据。5. 生产环境部署容器化使用Docker将Agent及其依赖打包确保环境一致性。API服务化使用FastAPI或Flask将Agent封装成HTTP API方便其他系统集成。监控与日志集成日志收集如ELK栈和应用性能监控APM跟踪每个请求的耗时、成功率、Token使用量。7. 总结与展望通过本文的实践我们从零构建了一个简易但功能核心的Page Agent。这个过程清晰地揭示了AI Agent工作的基本原理将大语言模型的认知能力与外部工具的执行能力相结合。回顾关键点环境是基础准备好Python、Playwright和大模型API环境。网页获取是关键对于现代网页无头浏览器Playwright是更可靠的选择。内容处理是优化点原始HTML需要清洗和简化以适配LLM的上下文窗口并降低成本。Prompt是指挥棒清晰、具体的Prompt是引导LLM产出准确结果的核心。架构决定上限基础的查询-提取模式QA只能解决简单问题复杂的任务需要引入规划-行动循环ReAct。关于GPT-5.6与模型选型的思考 技术新闻中的模型发布与变动是常态。对于开发者而言更重要的是建立不依赖单一模型的技术架构。我们的代码通过config.py和通用的LLMClient实现了与具体模型的解耦。你可以轻松地将底层的GPT-3.5切换到通义千问、文心一言或任何提供兼容API的模型。这种“模型可插拔”的设计能让你的应用在快速变化的技术浪潮中保持稳定。下一步可以做什么深入研究LangChain利用其强大的生态快速集成更多工具搜索引擎、计算器、数据库。尝试AutoGen微软开源的AutoGen框架支持多智能体协作可以构建更复杂的对话和任务解决流程。探索本地模型使用Ollama、LM Studio等工具在本地部署开源模型如Llama 3, Qwen彻底解决API成本、网络和隐私问题。解决更实际的问题将Page Agent应用到你的具体业务中比如竞品价格监控、政策文件解读、内部知识库问答等。AI Agent的开发是一场结合了软件工程、提示词工程和大模型理解的综合实践。希望本文能成为你探索这个精彩领域的坚实起点。动手运行文中的代码修改它扩展它你将会对如何让AI“使用工具”有更深刻的理解。如果在实践中遇到任何问题欢迎在评论区交流探讨。 30款热门AI模型一站整合DeepSeek/GLM/Qwen 随心用限时 5 折。 点击领海量免费额度