当前位置：首页 > news >正文

Tarsier：为Web自动化智能体提供结构化视觉感知的开源工具

news 2026/4/26 3:48:56

1. 项目概述：Tarsier，为Web智能体装上“眼睛”

如果你最近在尝试用大语言模型（LLM）来自动化网页操作，比如让AI帮你填表单、点按钮、查信息，那你大概率会卡在第一步：怎么让这个“纯文本”的AI看懂网页？你可能会把整个网页的HTML源码扔给它，结果发现它根本分不清哪个是导航栏，哪个是提交按钮。或者，你尝试用GPT-4V这类多模态模型，直接把网页截图喂给它，但实测下来，对于需要精确点击、输入的操作，它的“视力”还是太模糊，经常指错地方。

这正是我们团队在开发Reworkd平台时，处理了数万个真实网页任务后，遇到的核心痛点。为了解决它，我们开源了Tarsier。你可以把它理解为一套专为Web交互智能体设计的“视觉感知”工具包。它的核心任务就一个：把复杂的网页视觉和结构信息，翻译成LLM能精确理解和操作的“语言”。

简单来说，Tarsier做了两件关键事：

元素标记：它能自动识别网页上所有可交互的元素（按钮、输入框、链接），并为每个元素打上一个独一无二的标签，比如[23]。这样，你的LLM只需要发出CLICK [23]这样的指令，Tarsier就能帮你精准定位并操作。
OCR文本化：它将整个网页的截图，通过我们优化的OCR算法，转换成一个结构清晰、类似“字符画”的文本描述。这个描述保留了页面的视觉布局信息（比如元素上下左右的关系），让即使没有视觉能力的纯文本LLM（如GPT-3.5），也能“脑补”出页面的大致样子，从而做出更合理的决策。

在我们的内部测试中，纯文本的GPT-4配合Tarsier生成的文本描述，其任务成功率比拥有视觉能力的GPT-4V配合原始截图还要高出10-20%。这恰恰说明了，在需要精确操作的Web自动化场景下，一个结构化的、机器友好的“文本地图”，比一张人眼看起来清晰、但对AI而言信息冗余且模糊的“图片”，要有效得多。

接下来，我将以一个Web自动化开发者的视角，带你深入拆解Tarsier的设计思路、核心原理、具体用法，并分享我们在集成和使用过程中积累的实战经验与避坑指南。

2. 核心设计思路：为什么是“标记”+“文本化”？

在深入代码之前，理解Tarsier为什么选择“视觉标记”和“OCR文本化”这条技术路径至关重要。这决定了它能否真正解决Web自动化的核心难题。

2.1 网页感知的三大挑战与Tarsier的解法

当我们试图让AI操作网页时，本质上是希望它完成一个“感知-决策-执行”的闭环。Tarsier主要解决“感知”环节的三大挑战：

挑战一：信息过载与结构丢失。直接把整个HTML文档（动辄几千行）扔给LLM，就像让人在一团乱麻里找一根针。HTML包含了大量渲染无关的脚本、样式、元数据，而关键的视觉层级和交互状态（如元素是否可见、是否可点击）却难以直接体现。Tarsier的解法是进行针对性过滤和增强。它利用浏览器引擎（如Playwright）提供的可访问性树（Accessibility Tree）和DOM状态，只提取当前可见且可交互的元素，并为其注入视觉标签，极大减少了信息噪音。

挑战二：动作指令与页面元素的映射难题。即使LLM知道要“点击登录按钮”，它也无法直接告诉浏览器去执行这个操作。因为浏览器需要的是一个精确的CSS选择器或XPath。Tarsier通过引入唯一ID标签系统，建立了一个中间层。它将每个可交互元素映射到一个如[$42]的标签，并同时记录该标签对应的精确XPath。LLM只需输出CLICK [$42]，Tarsier的后端执行器就能根据预存的映射关系，找到并操作正确的元素。

挑战三：纯文本LLM的“视觉盲区”。像GPT-3.5或Llama 2这类纯文本模型，完全无法理解截图。而多模态模型（如GPT-4V）在细粒度元素识别和空间关系理解上仍不成熟，成本也更高。Tarsier的OCR文本化功能，创造性地将视觉空间信息编码进文本。它不只是识别文字，更通过字符的排列、缩进和空白，来模拟元素的相对位置（哪个在上，哪个在左），为纯文本LLM提供了宝贵的“空间感”上下文。

2.2 技术选型背后的权衡

Tarsier的架构选择体现了实用主义的权衡：

Playwright作为底层驱动：相较于Selenium，Playwright提供了更强大、更稳定的浏览器自动化能力，特别是在处理现代单页应用（SPA）和动态内容时。它内置的等待机制和丰富的选择器，为Tarsier准确捕获页面状态打下了坚实基础。这也是为什么官方示例首选Playwright。
支持多OCR服务商：光学字符识别是文本化功能的核心。Tarsier没有选择捆绑单一服务，而是抽象出OCRService接口，首批支持了Google Cloud Vision和Microsoft Azure Computer Vision。这种设计给了开发者根据成本、精度和区域可用性进行选择的灵活性。例如，Google Vision在通用场景下识别率可能更高，而Azure在某些特定语言或字体上可能有优势。
TypeScript + Python的混合架构：核心的标记逻辑（如元素遍历、ID生成、样式注入）用TypeScript编写，并通过npm构建为JavaScript包供Python调用。这充分利用了前端生态对DOM操作的成熟工具链。而Python层则负责OCR服务集成、流程编排和与主流AI框架（如LangChain、LlamaIndex）的对接，这是AI应用开发最活跃的生态位。

这种解耦设计意味着，如果你只需要元素标记功能，甚至可以尝试在纯Node.js环境中运行其JS核心部分。

3. 核心功能深度解析与实操要点

理解了“为什么”，我们来看“怎么做”。Tarsier的核心功能主要围绕Tarsier这个主类展开，其魔力在于page_to_text方法。

3.1 元素标记：让每个交互点都有“身份证”

当调用await tarsier.page_to_text(page)时，Tarsier在幕后执行了一系列精密的操作：

元素发现与过滤：它首先通过Playwright获取当前页面的完整DOM树和可访问性树。然后，它应用一套启发式规则来筛选“可交互元素”。默认情况下，这包括：
- 所有button元素。
- 所有a（链接）元素。
- 所有类型为text,search,email,password等的input元素，以及textarea。
- 所有select下拉框。
- 关键是，这些元素必须是视觉上可见的（非display: none，非visibility: hidden，在视口内）。
智能标签注入：Tarsier不是简单地从1开始编号。它采用了一种更智能的方式，为不同类型的元素赋予不同的标签前缀，形成一套视觉语法：
- [#ID]：文本输入域。如<input type="text">,<textarea>。这个#符号像一个小光标，提示LLM这里可以输入文字。
- [@ID]：超链接。如<a href="...">。@符号让人联想到“at”或链接，非常直观。
- [$ID]：其他交互元素。主要是按钮 (button) 和下拉框 (select)。$符号常与“动作”、“价值”关联，暗示可点击。
- [ID]：纯文本元素（需设置tag_text_elements=True）。用于标注非交互的文本块，帮助LLM理解页面内容结构。
这种前缀系统极大地降低了LLM的认知负担。当它看到[@12]时，立刻就知道这是一个链接，可能的动作是CLICK或NAVIGATE；看到[#5]时，就知道应该用TYPE [#5] some text来填写。
映射关系持久化：注入标签的同时，Tarsier会为每个标签计算一个稳健的XPath（或CSS选择器），并将标签 -> XPath的映射关系返回给用户（tag_to_xpath字典）。这个字典是你后续执行操作的关键，必须妥善保存，与后续的LLM决策和Playwright执行器共享。

实操心得：标签的稳定性网页的动态加载可能导致元素ID或类名变化，但XPath通常基于元素在DOM树中的相对位置生成，稳定性更高。Tarsier生成的XPath倾向于使用元素类型、可识别属性和位置索引的组合，以在动态内容和静态结构间取得平衡。但在极端动态的页面（如无限滚动列表），建议在每次重大页面更新后重新运行page_to_text以刷新映射。

3.2 OCR文本化：将截图转化为LLM的“思维导图”

这是Tarsier最具创新性的部分。page_to_text方法返回的page_text字符串，就是OCR文本化的成果。这个过程分为几步：

截图捕获：使用Playwright对当前页面视口进行截图。
OCR识别：将截图发送到你配置的OCR服务（如Google Vision），获取所有识别出的文本块及其边界框（坐标）。
空间结构重建：这是核心算法所在。Tarsier不会简单地把所有识别出的文字按行输出。它会根据每个文本块的坐标，在二维平面上重建它们的布局。算法会计算行和列，通过插入适当数量的空格和换行符，生成一个保持原始视觉对齐关系的文本表示。

例如，一个顶部有标题、左侧有导航菜单、中间是主内容的页面，在page_text中可能会呈现为：

[Main Site Logo] [@1:Login] [@2:Sign Up] -------------------------------------------------------------------- [$3:Home] | Welcome to Our Platform [$4:Products] | This is the main content area where you [$5:Services] | can find all the latest updates and | information about our services. | | [@6:Learn More]

（注：为清晰说明，此处简化了格式，实际输出是连续的、用空格控制对齐的文本流）。

这种表示方式，让纯文本LLM能够推断出[@1:Login]按钮在右上角，[@6:Learn More]链接在主内容区域下方。视觉信息被编码进了文本的拓扑结构里。

注意事项：OCR精度与页面复杂度OCR的质量直接决定了文本化输出的可用性。对于字体奇特、背景复杂、文字重叠或极度依赖图标按钮的页面，OCR可能出错。Tarsier的默认设置更适合文字信息为主的页面（如新闻站、文档、管理后台）。对于图形化界面，你可能需要：
考虑启用tag_text_elements=True，让元素标记来补充交互信息。
尝试不同的OCR服务商，调整其配置（如Google Vision可以指定语言提示）。
将OCR文本输出与元素标记输出结合使用，为LLM提供双重线索。

3.3 集成到AI智能体工作流

Tarsier本身不执行AI推理，它是一个完美的“感知模块”。你需要将它嵌入到一个更大的智能体循环中。典型的工作流如下：

# 伪代码展示智能体循环 async def web_agent_loop(start_url: str, objective: str): # 1. 初始化浏览器和Tarsier browser = await p.chromium.launch() page = await browser.new_page() await page.goto(start_url) tarsier = Tarsier(ocr_service) # 2. 感知阶段：获取当前页面理解 page_text, tag_to_xpath = await tarsier.page_to_text(page) # 3. 决策阶段：将页面信息和目标交给LLM # 构建给LLM的提示词(Prompt) prompt = f""" 你是一个网页操作助手。当前页面如下： {page_text} 你的目标是：{objective}。 你可以执行以下动作：CLICK [标签], TYPE [标签] [文本], NAVIGATE [url]。 请根据当前页面，输出下一步要执行的动作指令。 """ llm_response = await call_llm(prompt) # 例如: “CLICK [@1]” # 4. 解析与执行阶段 action, tag, *args = parse_llm_response(llm_response) if action == "CLICK": xpath = tag_to_xpath[tag] # 从映射字典中找到真正的XPath await page.click(xpath) elif action == "TYPE": xpath = tag_to_xpath[tag] await page.fill(xpath, args[0]) # ... 处理其他动作 # 5. 等待页面更新，回到第2步，形成循环 await page.wait_for_load_state("networkidle") # 跳转回第2步，继续感知-决策-执行...

在这个循环中，Tarsier在步骤2提供了标准化的页面感知输出 (page_text,tag_to_xpath)，使得步骤3的LLM提示词构建和步骤4的指令解析变得异常简单和统一。

4. 从零开始：完整集成与配置实战

让我们抛开简单的示例，从头构建一个更健壮、可用于生产环境原型的Tarsier集成方案。我们将以Google Cloud Vision OCR为例，并集成到LangChain智能体中。

4.1 环境准备与依赖安装

首先，确保你的Python环境在3.8以上。我们使用poetry进行依赖管理，但用pip也同样清晰。

# 1. 创建项目目录并进入 mkdir tarsier-web-agent && cd tarsier-web-agent # 2. 创建虚拟环境（推荐） python -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate # Windows # 3. 安装核心依赖 pip install tarsier playwright langchain-openai langchain # 4. 安装Playwright浏览器 playwright install chromium

关键点解释：

tarsier: 核心库。
playwright: 浏览器自动化驱动，Tarsier依赖它来获取页面内容和截图。
langchain-openai&langchain: 这里选用LangChain作为智能体框架，并使用OpenAI的LLM。你可以替换为其他LLM或框架（如LlamaIndex）。

4.2 配置OCR服务凭证（以Google Cloud Vision为例）

这是最容易出错的一步。请严格按照以下步骤操作：

创建Google Cloud项目并启用API：
- 访问 Google Cloud Console 。
- 创建一个新项目（或选择现有项目）。
- 在左侧导航栏找到“API和服务” > “库”。
- 搜索“Cloud Vision API”，点击进入并“启用”。
创建服务账号并下载密钥：
- 进入“API和服务” > “凭证”。
- 点击“创建凭证”，选择“服务账号”。
- 填写服务账号名称（如tarsier-ocr），角色选择“项目” > “所有者”（或为安全起见，创建自定义角色，仅授予cloudvision.images.annotate权限）。
- 点击“完成”后，在服务账号列表中找到刚创建的账号，点击其邮箱进入详情页。
- 切换到“密钥”标签页，点击“添加密钥” > “创建新密钥”，密钥类型选择JSON。
- 密钥文件会自动下载到你的电脑，将其重命名为google_service_acc_key.json，并妥善保存（切勿提交到版本库！）。

设置环境变量（可选但推荐）：将JSON文件路径或内容作为环境变量管理，更安全。

# 在.bashrc或.zshrc中设置，或在运行脚本前设置 export GOOGLE_APPLICATION_CREDENTIALS="/path/to/your/google_service_acc_key.json"

这样，在代码中就可以直接初始化OCR服务，而无需在代码里硬编码文件路径：

from tarsier import GoogleVisionOCRService ocr_service = GoogleVisionOCRService() # 会自动从环境变量读取凭证

4.3 构建一个简单的自治Web智能体

下面是一个结合了Tarsier、LangChain和OpenAI GPT-4的完整示例。这个智能体的目标是自动在Hacker News上找到当前排名第一的新闻标题并点击进入。

import asyncio import json import os from typing import Dict, Tuple from langchain.agents import AgentExecutor, create_openai_tools_agent from langchain_openai import ChatOpenAI from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder from langchain.tools import Tool from langchain_core.messages import SystemMessage, HumanMessage from playwright.async_api import async_playwright, Page from tarsier import Tarsier, GoogleVisionOCRService # 1. 定义Tarsier包装工具，让LangChain智能体可以调用 class TarsierWebPerceptionTool: """一个工具，用于获取当前网页的文本化表示和元素映射。""" def __init__(self, tarsier: Tarsier, page: Page): self.tarsier = tarsier self.page = page self._tag_to_xpath_cache: Dict[str, str] = {} async def perceive_page(self) -> Tuple[str, Dict[str, str]]: """调用Tarsier感知页面，并缓存映射关系。""" page_text, tag_to_xpath = await self.tarsier.page_to_text(self.page) self._tag_to_xpath_cache = tag_to_xpath return page_text, tag_to_xpath def get_xpath_by_tag(self, tag: str) -> str: """根据标签获取缓存的XPath。如果不存在则抛出错误。""" xpath = self._tag_to_xpath_cache.get(tag) if not xpath: raise ValueError(f"Tag '{tag}' not found in the current page mapping. Please call `perceive_page` first.") return xpath # 2. 定义执行动作的工具（模拟智能体的“手”） async def click_element(tag: str, tarsier_tool: TarsierWebPerceptionTool, page: Page) -> str: """点击页面上带有指定标签的元素。""" try: xpath = tarsier_tool.get_xpath_by_tag(tag) await page.click(xpath) await page.wait_for_load_state(state="networkidle", timeout=5000) return f"Successfully clicked element with tag '{tag}'." except Exception as e: return f"Failed to click element with tag '{tag}': {str(e)}" async def type_into_element(tag: str, text: str, tarsier_tool: TarsierWebPerceptionTool, page: Page) -> str: """向指定标签的输入框输入文本。""" try: xpath = tarsier_tool.get_xpath_by_tag(tag) await page.fill(xpath, text) return f"Successfully typed '{text}' into element with tag '{tag}'." except Exception as e: return f"Failed to type into element with tag '{tag}': {str(e)}" async def main(): # 初始化OCR服务（假设已设置环境变量） ocr_service = GoogleVisionOCRService() tarsier = Tarsier(ocr_service) # 启动浏览器 async with async_playwright() as p: browser = await p.chromium.launch(headless=False) # 调试时可设为False page = await browser.new_page() await page.goto("https://news.ycombinator.com") # 初始化感知工具 perception_tool = TarsierWebPerceptionTool(tarsier, page) # 首次感知页面 page_text, _ = await perception_tool.perceive_page() print("Initial page perception completed.") # 初始化LLM（请替换为你的OpenAI API Key） llm = ChatOpenAI( model="gpt-4-turbo-preview", # 或 "gpt-3.5-turbo" temperature=0, openai_api_key=os.getenv("OPENAI_API_KEY") # 从环境变量读取 ) # 构建提示词模板 system_prompt = SystemMessage(content="""你是一个网页操作智能体。你的任务是通过观察网页的文本化描述和可操作元素标签来完成目标。 你可以使用的动作指令格式必须是： CLICK [标签] - 例如: CLICK [@12] TYPE [标签] [文本] - 例如: TYPE [#5] hello world 当前页面描述如下，其中`[@ID]`是链接，`[$ID]`是按钮，`[#ID]`是输入框。请根据目标和页面状态，决定下一步动作。""") # 创建LangChain工具列表 tools = [ Tool.from_function( name="GetPageDescription", description="获取当前网页的文本化描述和可操作元素标签。在决定动作前，或页面发生变化后，必须调用此工具重新感知。", func=lambda _: perception_tool.perceive_page(), # 注意：这里简化了，实际需要异步处理 coroutine=perception_tool.perceive_page ), Tool.from_function( name="ClickElement", description="点击一个带有标签的元素。输入是标签字符串，如 '@12' 或 '$7'。", func=lambda tag: click_element(tag, perception_tool, page), coroutine=lambda tag: click_element(tag, perception_tool, page) ), Tool.from_function( name="TypeIntoElement", description="向一个输入框元素（标签以#开头）输入文本。输入格式为 '标签 文本'，如 '#3 search query'。", func=lambda input_str: type_into_element(*input_str.split(' ', 1), perception_tool, page), coroutine=lambda input_str: type_into_element(*input_str.split(' ', 1), perception_tool, page) ) ] # 构建智能体 prompt = ChatPromptTemplate.from_messages([ system_prompt, MessagesPlaceholder(variable_name="chat_history"), HumanMessage(content="当前目标：找到并点击当前Hacker News首页排名第一的新闻标题链接。"), MessagesPlaceholder(variable_name="agent_scratchpad"), ]) agent = create_openai_tools_agent(llm, tools, prompt) agent_executor = AgentExecutor(agent=agent, tools=tools, verbose=True, handle_parsing_errors=True) # 执行智能体 print("Starting agent execution...") result = await agent_executor.ainvoke({ "chat_history": [], "input": "Let's start by perceiving the current page and then find the top news." }) print(f"Agent finished. Result: {result['output']}") # 为了演示，我们也可以手动模拟一次LLM决策和执行 print("\n--- Manual Simulation ---") # 假设LLM观察页面后，发现第一个新闻链接的标签是 [@10] action_result = await click_element("[@10]", perception_tool, page) print(action_result) # 等待新页面加载并再次感知 await page.wait_for_timeout(2000) new_page_text, _ = await perception_tool.perceive_page() print("Navigated to a new page. Perception updated.") await browser.close() if __name__ == '__main__': asyncio.run(main())

代码关键点解析：

工具抽象：我们将Tarsier的感知功能封装成一个Tool，使其能无缝接入LangChain的智能体框架。智能体可以像调用其他工具（如计算器、搜索）一样调用“感知页面”。
映射缓存：TarsierWebPerceptionTool内部缓存了tag_to_xpath映射。这是必须的，因为从LLM发出指令到执行动作之间，页面映射关系必须保持一致。
错误处理：在执行点击或输入时，加入了基本的错误处理。在实际应用中，你需要更健壮的处理，比如重试、回退策略等。
提示词工程：给LLM的SystemMessage至关重要。它明确规定了动作的格式（CLICK [标签]），并解释了标签前缀的含义，极大地减少了LLM的格式错误和理解偏差。

这个示例展示了如何将Tarsier从一个独立的工具，嵌入到一个完整的、可自主决策的Web智能体循环中。

5. 常见问题、性能调优与避坑指南

在实际集成和使用Tarsier的过程中，你会遇到各种预料之外的情况。以下是我们从大量实践中总结出的核心问题和解决方案。

5.1 元素标记与定位问题

问题1：Tarsier没有识别到我想要的元素。

可能原因1：元素非标准或不可见。Tarsier默认只标记标准HTML交互元素且要求可见。检查元素是否是div伪装成的按钮（可能需添加role="button"），或者是否被CSS隐藏（opacity: 0,z-index覆盖）。
解决方案：在初始化Tarsier时，可以传入自定义的element_selector或通过tag_text_elements=True来标记更多元素。对于复杂页面，可能需要结合Playwright的page.evaluate()执行自定义JS来增强元素检测。
可能原因2：页面未完全加载。动态内容（如通过JavaScript异步加载的列表）可能在Tarsier截图时还未出现。
解决方案：在调用page_to_text前，使用Playwright的等待机制，如await page.wait_for_selector('some-selector')或await page.wait_for_load_state('networkidle')，确保目标内容已稳定在DOM中。

问题2：LLM输出的标签在执行时找不到（tag_to_xpath映射失效）。

可能原因：页面状态在感知和执行之间发生了变化。例如，点击一个按钮后，页面局部刷新，旧的XPath可能指向一个已不存在或位置改变的元素。
解决方案：每次页面发生可能导致DOM结构变化的操作后，必须重新调用page_to_text来刷新感知和映射。这是构建稳定智能体的黄金法则。可以将perceive_page工具设计为在每次动作执行后自动调用。

5.2 OCR与文本化质量问题

问题3：OCR识别出的文本杂乱无章，或丢失了重要元素。

可能原因1：截图区域或质量不佳。Playwright默认截取整个视口。如果页面有固定定位的头部、弹窗，可能会遮挡内容。
解决方案：可以在截图前通过Playwright滚动页面，或调整视口大小。更高级的做法是，使用page.locator().screenshot()只对页面主要内容区域截图，再交给Tarsier处理。
可能原因2：OCR服务对特定字体、语言或低对比度文本识别率低。
解决方案：
- 切换OCR引擎：尝试从Google Vision切换到Microsoft Azure，或者等待Tarsier集成Amazon Textract。
- 提供上下文提示：Google Vision API允许在请求中设置language_hints参数。如果你知道页面主要语言，可以在自定义OCR服务时传入，提升准确率。
- 预处理图像：在将图像发送给OCR前，可以在内存中进行简单的图像处理（如提高对比度、二值化），但这需要修改Tarsier源码或在其上游处理。

问题4：page_text输出的空间布局混乱，LLM无法理解。

可能原因：Tarsier的文本化算法对极端复杂的、非网格化的布局（如大量绝对定位、重叠元素）处理不佳。
解决方案：对于这类“视觉设计优先”的页面，依赖元素标记 (tag_to_xpath) 可能比依赖OCR文本化更可靠。可以考虑只为LLM提供元素标签列表和其类型，放弃复杂的空间文本描述。或者，结合两者，在提示词中告诉LLM：“这是一个视觉复杂的页面，请优先关注带有[@],[$],[#]标签的元素。”

5.3 性能与成本优化

问题5：每次调用page_to_text都进行OCR，速度慢且API调用成本高。

分析：OCR（尤其是云服务）是主要的性能瓶颈和成本来源。对于变化不频繁的页面或单次会话中的重复操作，频繁OCR是浪费。
解决方案：实现缓存策略。
- 页面哈希缓存：计算当前页面主要内容的哈希值（如DOM序列化后的MD5）。如果哈希值未变，且tag_to_xpath映射依然有效（可通过抽查几个元素是否存在验证），则直接返回缓存的page_text和映射，跳过OCR和元素检测。
- 本地OCR降级：对于开发、测试或对精度要求不高的场景，可以探索集成轻量级本地OCR引擎（如Tesseract）。虽然精度可能不如云服务，但零成本、零延迟。这需要你实现自己的OCRService类。

问题6：智能体陷入循环或做出无意义操作。

可能原因：LLM基于不完整或误导性的页面描述做出了错误决策。
解决方案：
- 增强提示词：在System Prompt中明确限制动作空间，并加入反思机制。例如：“在每次动作后，观察页面变化。如果连续三次动作没有向目标推进，请总结问题并尝试不同策略。”
- 引入人工验证或回退：对于关键步骤，可以设计智能体暂停并请求人工确认（“是否继续点击这个疑似登录按钮？”）。或者，当检测到异常循环时，自动回退到上一步并尝试替代路径。
- 丰富页面上下文：除了Tarsier提供的文本，可以将页面URL、标题（page.title()）甚至关键元信息也一并提供给LLM，帮助其更好地理解所处环境。

5.4 进阶技巧与扩展思路

自定义标签样式：Tarsier未来计划支持自定义标签样式。目前，如果你需要改变标签的显示方式（例如，觉得[$]不够醒目），可以fork其源码，修改src/tagging.ts中injectTags函数相关的CSS部分，然后重新npm run build。
处理iframe：现代网页常包含iframe。Tarsier默认处理主文档。如果交互目标在iframe内，你需要先用Playwright切换到对应的iframe上下文 (page.frame())，然后对该frame的Page对象调用Tarsier。
与视觉模型结合：虽然Tarsier-Text表现优异，但对于图标按钮、验证码等纯视觉元素，GPT-4V仍有优势。可以设计一个混合策略：先用Tarsier处理大部分结构化交互，对于Tarsier无法标记的特定区域，再调用GPT-4V进行视觉问答（VQA），将结果补充给LLM。
用于测试与监控：除了驱动AI智能体，Tarsier生成的标准化的页面文本描述和元素映射，也是进行自动化视觉回归测试或监控页面关键元素是否正常渲染的绝佳工具。你可以定期对生产页面运行Tarsier，对比page_text的哈希值或关键标签是否存在，来发现未预期的UI变更。