diff --git a/packages/website/src/components/ui/api-reference.tsx b/packages/website/src/components/APIReference.tsx similarity index 91% rename from packages/website/src/components/ui/api-reference.tsx rename to packages/website/src/components/APIReference.tsx index a505cd6..6b6f651 100644 --- a/packages/website/src/components/ui/api-reference.tsx +++ b/packages/website/src/components/APIReference.tsx @@ -5,10 +5,9 @@ */ import * as React from 'react' +import { Badge } from '@/components/ui/badge' import { cn } from '@/lib/utils' -import { Badge } from './badge' - // ============================================================================ // Types // ============================================================================ @@ -35,6 +34,8 @@ export interface APIReferenceProps { description?: React.ReactNode /** Property definitions */ properties: PropDefinition[] + /** Display variant: 'properties' for fields, 'methods' for methods */ + variant?: 'properties' | 'methods' /** Additional CSS classes */ className?: string } @@ -43,7 +44,14 @@ export interface APIReferenceProps { // Component // ============================================================================ -export function APIReference({ title, description, properties, className }: APIReferenceProps) { +export function APIReference({ + title, + description, + properties, + variant = 'properties', + className, +}: APIReferenceProps) { + const isMethodsVariant = variant === 'methods' return (
{title && ( @@ -58,10 +66,10 @@ export function APIReference({ title, description, properties, className }: APIR - Property + {isMethodsVariant ? 'Method' : 'Property'} - Type + {isMethodsVariant ? 'Return Type' : 'Type'} Default @@ -120,7 +128,7 @@ function PropRow({ name, type, required, defaultValue, description, status }: Pr {/* Type */} - + {type} diff --git a/packages/website/src/components/CodeEditor.tsx b/packages/website/src/components/CodeEditor.tsx index 3e23b4e..c16ebd0 100644 --- a/packages/website/src/components/CodeEditor.tsx +++ b/packages/website/src/components/CodeEditor.tsx @@ -42,7 +42,7 @@ const CodeEditor: React.FC = ({ return (
{/* 编辑器顶部栏 */} {showHeader && ( diff --git a/packages/website/src/pages/docs/Layout.tsx b/packages/website/src/pages/docs/Layout.tsx index 8477ca1..0a4210f 100644 --- a/packages/website/src/pages/docs/Layout.tsx +++ b/packages/website/src/pages/docs/Layout.tsx @@ -34,10 +34,6 @@ export default function DocsLayout({ children }: DocsLayoutProps) { title: isZh ? '故障排查' : 'Troubleshooting', path: '/introduction/troubleshooting', }, - { - title: '🚧 ' + (isZh ? '最佳实践' : 'Best Practices'), - path: '/integration/best-practices', - }, ], }, { @@ -50,7 +46,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) { { title: isZh ? 'Chrome 扩展' : 'Chrome Extension', path: '/features/chrome-extension' }, { title: isZh ? '接入第三方 Agent' : 'Third-party Agent', - path: '/integration/third-party-agent', + path: '/features/third-party-agent', }, ], }, @@ -59,10 +55,11 @@ export default function DocsLayout({ children }: DocsLayoutProps) { items: [ { title: 'PageAgent', path: '/advanced/page-agent' }, { title: 'PageAgentCore', path: '/advanced/page-agent-core' }, + { title: 'PageController', path: '/advanced/page-controller' }, { title: isZh ? '自定义 UI' : 'Custom UI', path: '/advanced/custom-ui' }, { title: '🚧 ' + (isZh ? '安全与权限' : 'Security & Permissions'), - path: '/integration/security-permissions', + path: '/advanced/security-permissions', }, ], }, diff --git a/packages/website/src/pages/docs/advanced/custom-ui/page.tsx b/packages/website/src/pages/docs/advanced/custom-ui/page.tsx index dc0381a..95fb832 100644 --- a/packages/website/src/pages/docs/advanced/custom-ui/page.tsx +++ b/packages/website/src/pages/docs/advanced/custom-ui/page.tsx @@ -1,6 +1,6 @@ +import { APIDivider, APIReference } from '@/components/APIReference' import CodeEditor from '@/components/CodeEditor' import { Heading } from '@/components/Heading' -import { APIDivider, APIReference } from '@/components/ui/api-reference' import { useLanguage } from '@/i18n/context' export default function CustomUIDocs() { diff --git a/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx b/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx index 7f41371..9fca4fe 100644 --- a/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx +++ b/packages/website/src/pages/docs/advanced/page-agent-core/page.tsx @@ -1,6 +1,8 @@ +import { Link } from 'wouter' + +import { APIDivider, APIReference, TypeRef } from '@/components/APIReference' import CodeEditor from '@/components/CodeEditor' import { Heading } from '@/components/Heading' -import { APIDivider, APIReference, TypeRef } from '@/components/ui/api-reference' import { useLanguage } from '@/i18n/context' export default function PageAgentCoreDocs() { @@ -50,19 +52,13 @@ const agent = new PageAgentCore({ baseURL: 'https://api.openai.com/v1', apiKey: 'your-api-key', model: 'gpt-5.2', - language: 'en-US', }) // Listen to events for UI display - agent.addEventListener('statuschange', () => { console.log('Status:', agent.status) }) -agent.addEventListener('historychange', () => { - console.log('History:', agent.history) -}) - agent.addEventListener('activity', (e) => { const activity = (e as CustomEvent).detail console.log('Activity:', activity.type) @@ -75,14 +71,54 @@ const result = await agent.execute('Fill in the form with test data')`} - {/* LLM Configuration */} + {/* Configuration */}
- LLMConfig + PageAgentCoreConfig

{isZh - ? '配置与大语言模型的连接参数。支持 OpenAI 兼容的 API。' - : 'Configure connection parameters for the language model. Supports OpenAI-compatible APIs.'} + ? 'PageAgentCoreConfig = AgentConfig & { pageController: PageController }。AgentConfig 包含以下配置项：' + : 'PageAgentCoreConfig = AgentConfig & { pageController: PageController }. AgentConfig contains the following options:'}

+ + {/* PageController */} +

+ PageController +

+ + + PageController + {' '} + 实例，用于 DOM 操作和元素交互。 + + ) : ( + <> + + PageController + {' '} + instance for DOM operations and element interaction. + + ), + }, + ]} + /> + + {/* LLM Config */} +

+ {isZh ? 'LLM 配置' : 'LLM Config'} +

-
- {/* Agent Configuration */} -
- AgentConfig -

- {isZh - ? '配置 Agent 的行为、生命周期钩子和扩展能力。' - : 'Configure agent behavior, lifecycle hooks, and extension capabilities.'} -

+ {/* Agent Config */} +

+ {isZh ? 'Agent 配置' : 'Agent Config'} +

-

InstructionsConfig

- string | undefined | null', - description: isZh - ? '动态页面级指令回调，在每个步骤前调用' - : 'Dynamic page-level instructions callback, called before each step', - }, - ]} - /> -
- - {/* Lifecycle Hooks */} -
- {isZh ? '生命周期钩子' : 'Lifecycle Hooks'} + {/* Lifecycle Hooks */} +

+ {isZh ? '生命周期钩子' : 'Lifecycle Hooks'} + + experimental + +

- ⚠️ {isZh ? '警告' : 'Warning'}:{' '} {isZh - ? '这些接口高度实验性，可能在未来版本中发生变化。建议优先使用事件系统（Events）来监听 Agent 状态。' - : 'These APIs are highly experimental and may change in future versions. Prefer using the Events system for monitoring agent state.'} + ? '这些接口高度实验性，可能在未来版本中发生变化。' + : 'These APIs are highly experimental and may change in future versions. '}

-

- {isZh - ? '所有生命周期钩子都接收 agent 实例作为第一个参数，便于在回调中访问 Agent 状态和方法。' - : 'All lifecycle hooks receive the agent instance as first parameter, making it easy to access agent state and methods in callbacks.'} -

void | Promise', + type: '(agent, stepCount) => void | Promise', description: isZh ? '每个步骤执行前调用' : 'Called before each step execution', - status: 'experimental', }, { name: 'onAfterStep', - type: '(agent: PageAgentCore, history: HistoricalEvent[]) => void | Promise', + type: '(agent, history) => void | Promise', description: isZh ? '每个步骤执行后调用' : 'Called after each step execution', - status: 'experimental', }, { name: 'onBeforeTask', - type: '(agent: PageAgentCore) => void | Promise', + type: '(agent) => void | Promise', description: isZh ? '任务开始前调用' : 'Called before task starts', - status: 'experimental', }, { name: 'onAfterTask', - type: '(agent: PageAgentCore, result: ExecutionResult) => void | Promise', + type: '(agent, result) => void | Promise', description: isZh ? '任务结束后调用' : 'Called after task ends', - status: 'experimental', }, { name: 'onDispose', - type: '(agent: PageAgentCore, reason?: string) => void', + type: '(agent, reason?) => void', description: isZh ? 'Agent 销毁时调用' : 'Called when agent is disposed', - status: 'experimental', - }, - ]} - /> -
- - {/* PageController Configuration */} -
- PageControllerConfig -

- {isZh - ? '配置 DOM 提取、元素交互和视觉反馈。' - : 'Configure DOM extraction, element interaction, and visual feedback.'} -

- Element))[]', - description: isZh ? '要排除的交互元素列表' : 'Elements to exclude from interaction', - }, - { - name: 'interactiveWhitelist', - type: '(Element | (() => Element))[]', - description: isZh - ? '要强制包含的交互元素列表' - : 'Elements to force include for interaction', - }, - { - name: 'includeAttributes', - type: 'string[]', - description: isZh - ? '在 DOM 提取中包含的额外属性' - : 'Additional attributes to include in DOM extraction', }, ]} /> @@ -378,16 +331,24 @@ const result = await agent.execute('Fill in the form with test data')`}
{isZh ? '方法' : 'Methods'} ', description: isZh ? '执行任务并返回结果。包含 success、data 和 history 字段。' : 'Execute a task and return result. Contains success, data, and history fields.', }, { - name: 'dispose(reason?: string)', + name: 'stop()', + type: 'void', + description: isZh + ? '停止当前任务。Agent 仍可复用。' + : 'Stop the current task. Agent remains reusable.', + }, + { + name: 'dispose()', type: 'void', description: isZh ? '销毁 Agent 并清理资源' @@ -452,11 +413,8 @@ const result = await agent.execute('Fill in the form with test data')`} @@ -476,50 +434,21 @@ const result = await agent.execute('Fill in the form with test data')`} />
- - - {/* Headless Usage */} + {/* InstructionsConfig */}
- {isZh ? '无头模式' : 'Headless Mode'} -

- {isZh - ? '在非 DOM 环境中，你必须实现自定义的 PageController（例如远程操作页面或 Puppeteer）。' - : 'In non-DOM environments, you must implement a custom PageController (e.g., remote page control or Puppeteer).'} -

+ InstructionsConfig { - console.log('Status:', agent.status) -}) - -agent.addEventListener('historychange', () => { - console.log('History:', agent.history) -}) - -agent.addEventListener('activity', (e) => { - const activity = (e as CustomEvent).detail - console.log('Activity:', activity.type) -}) - -// Execute task -const result = await agent.execute('Fill in the form with test data')`} + /** + * Dynamic page-level instructions callback. + * Called before each step to get instructions for the current page. + */ + getPageInstructions?: (url: string) => string | undefined +}`} />
diff --git a/packages/website/src/pages/docs/advanced/page-agent/page.tsx b/packages/website/src/pages/docs/advanced/page-agent/page.tsx index 3704346..7428223 100644 --- a/packages/website/src/pages/docs/advanced/page-agent/page.tsx +++ b/packages/website/src/pages/docs/advanced/page-agent/page.tsx @@ -2,7 +2,6 @@ import { Link } from 'wouter' import CodeEditor from '@/components/CodeEditor' import { Heading } from '@/components/Heading' -import { APIReference, TypeRef } from '@/components/ui/api-reference' import { useLanguage } from '@/i18n/context' export default function PageAgentDocs() { @@ -14,8 +13,8 @@ export default function PageAgentDocs() {

{isZh - ? 'PageAgent 是带有内置 UI 面板的完整 Agent 类。它继承自 PageAgentCore，并自动创建交互面板。' - : 'PageAgent is the complete Agent class with built-in UI panel. It extends PageAgentCore and automatically creates an interactive panel.'} + ? 'PageAgent 是带有内置 UI 面板的完整 Agent 类。它继承自 PageAgentCore，并自动创建交互面板和 PageController。' + : 'PageAgent is the complete Agent class with built-in UI panel. It extends PageAgentCore and automatically creates an interactive panel and PageController.'}

{/* When to use */} @@ -29,6 +28,11 @@ export default function PageAgentDocs() { : 'In most cases, you should use PageAgent. It provides a complete out-of-the-box experience:'}

    +
  • + {isZh + ? '自动创建 PageController，处理 DOM 提取和元素操作' + : 'Automatically creates PageController for DOM extraction and element actions'} +
  • {isZh ? '内置 UI 面板，显示任务进度、Agent 思考过程和操作结果' @@ -74,9 +78,8 @@ console.log(result.history) // Full execution history`} @@ -90,7 +93,21 @@ console.log(result.history) // Full execution history`} > PageAgentCore - ，所有核心方法和事件都可用。详细的 API 参考请查看 PageAgentCore 文档。 + ，所有核心方法和事件都可用。配置项合并了{' '} + + AgentConfig + {' '} + 和{' '} + + PageControllerConfig + + 。 ) : ( <> @@ -101,71 +118,34 @@ console.log(result.history) // Full execution history`} > PageAgentCore - . All core methods and events are available. See PageAgentCore docs for detailed API - reference. - - )} -

    - - - {/* Configuration */} -
    - {isZh ? '配置' : 'Configuration'} -

    - {isZh - ? 'PageAgent 使用与 PageAgentCore 相同的配置接口。' - : 'PageAgent uses the same configuration interface as PageAgentCore.'} -

    -

    - {isZh ? ( - <> - 完整配置请参考{' '} + . All core methods and events are available. Config merges{' '} - PageAgentCore 配置文档 - - 。 - - ) : ( - <> - See{' '} - - PageAgentCore configuration docs + AgentConfig {' '} - for complete reference. + and{' '} + + PageControllerConfig + + . )}

    - {/* Panel Property */} + {/* Panel */}
    - {isZh ? 'Panel 属性' : 'Panel Property'} + {isZh ? 'UI 面板' : 'UI Panel'}

    {isZh - ? 'PageAgent 自动创建一个 Panel 实例。你可以通过 panel 属性访问它来控制 UI：' - : 'PageAgent automatically creates a Panel instance. You can access it via the panel property to control the UI:'} + ? 'PageAgent 自动创建一个 Panel 实例。你可以通过 panel 属性控制 UI：' + : 'PageAgent automatically creates a Panel instance. You can control the UI via the panel property:'}

    - - - -

    {isZh ? 'Panel 方法' : 'Panel Methods'}

    - {isZh ? 'Headless 模式' : 'Headless Mode'} + {isZh ? '自动创建 PageController' : 'Auto-creates PageController'} - - ✓ + - - {isZh ? '自定义 PageController' : 'Custom PageController'} + {isZh ? 'Headless 模式' : 'Headless Mode'} - ✓ + - ✓ diff --git a/packages/website/src/pages/docs/advanced/page-controller/page.tsx b/packages/website/src/pages/docs/advanced/page-controller/page.tsx new file mode 100644 index 0000000..a955776 --- /dev/null +++ b/packages/website/src/pages/docs/advanced/page-controller/page.tsx @@ -0,0 +1,286 @@ +import { Link } from 'wouter' + +import { APIDivider, APIReference } from '@/components/APIReference' +import CodeEditor from '@/components/CodeEditor' +import { Heading } from '@/components/Heading' +import { useLanguage } from '@/i18n/context' + +export default function PageControllerDocs() { + const { isZh } = useLanguage() + + return ( +
    +

    PageController

    + +

    + {isZh + ? 'PageController 负责 DOM 提取和元素交互，独立于 LLM。它将页面状态结构化为 LLM 可消费的格式，并执行元素级操作。' + : 'PageController handles DOM extraction and element interaction, independent of LLM. It structures page state into LLM-consumable format and executes element-level actions.'} +

    + + {/* Basic Usage */} +
    + {isZh ? '基本用法' : 'Basic Usage'} +

    + {isZh + ? 'PageAgent 接受 PageController 配置项：' + : 'PageAgent accepts PageController options:'} +

    + +

    + {isZh + ? 'PageAgentCore 接受 PageController 实例：' + : 'PageAgentCore accepts a PageController instance:'} +

    + +
    + + + + {/* Configuration */} +
    + PageControllerConfig + Element))[]', + description: isZh + ? '要排除的交互元素列表。支持元素引用或返回元素的函数（延迟求值）。' + : 'Elements to exclude from interaction. Supports element references or functions returning elements (lazy evaluation).', + }, + { + name: 'interactiveWhitelist', + type: '(Element | (() => Element))[]', + description: isZh + ? '要强制包含的交互元素列表。支持元素引用或返回元素的函数。' + : 'Elements to force include for interaction. Supports element references or functions returning elements.', + }, + { + name: 'includeAttributes', + type: 'string[]', + description: isZh + ? '在 DOM 提取中包含的额外 HTML 属性（如 data-testid）。默认已包含常见属性如 role, aria-label 等。' + : 'Additional HTML attributes to include in DOM extraction (e.g. data-testid). Common attributes like role, aria-label are included by default.', + }, + ]} + /> +
    + + + + {/* Methods */} +
    + {isZh ? '方法' : 'Methods'} + +

    {isZh ? '状态查询' : 'State Queries'}

    + ', + description: isZh + ? '获取结构化的浏览器状态（URL、标题、简化 HTML 等），自动调用 updateTree() 刷新 DOM。这是 Agent 在每步使用的主要方法。' + : 'Get structured browser state (URL, title, simplified HTML, etc.), automatically calls updateTree() to refresh DOM. This is the primary method the agent uses each step.', + }, + { + name: 'updateTree()', + type: 'Promise', + description: isZh + ? '刷新 DOM 树并返回简化 HTML。通常不需要手动调用 —— getBrowserState() 会自动调用。' + : 'Refresh DOM tree and return simplified HTML. Usually not needed manually — getBrowserState() calls it automatically.', + }, + { + name: 'getCurrentUrl()', + type: 'Promise', + description: isZh ? '获取当前页面 URL。' : 'Get current page URL.', + }, + ]} + /> + +

    {isZh ? '元素操作' : 'Element Actions'}

    + ', + description: isZh + ? '按索引点击元素。索引来自简化 HTML 中的 [N] 标记。' + : 'Click element by index. Index comes from [N] markers in simplified HTML.', + }, + { + name: 'inputText(index, text)', + type: 'Promise', + description: isZh ? '向输入框元素填入文本。' : 'Input text into a form element.', + }, + { + name: 'selectOption(index, optionText)', + type: 'Promise', + description: isZh ? '在下拉框中选择选项。' : 'Select option in a dropdown element.', + }, + { + name: 'scroll(options)', + type: 'Promise', + description: isZh + ? '垂直滚动页面或指定元素。' + : 'Scroll page or specific element vertically.', + }, + { + name: 'scrollHorizontally(options)', + type: 'Promise', + description: isZh + ? '水平滚动页面或指定元素。' + : 'Scroll page or specific element horizontally.', + }, + ]} + /> + +

    {isZh ? '遮罩控制' : 'Mask Control'}

    + ', + description: isZh + ? '显示视觉遮罩。需要 enableMask: true。' + : 'Show visual mask overlay. Requires enableMask: true.', + }, + { + name: 'hideMask()', + type: 'Promise', + description: isZh ? '隐藏视觉遮罩。' : 'Hide visual mask overlay.', + }, + ]} + /> + +

    {isZh ? '生命周期' : 'Lifecycle'}

    + +
    + + + + {/* BrowserState */} +
    + BrowserState +

    + {isZh + ? 'getBrowserState() 返回的结构化浏览器状态，直接用于构建 LLM prompt。' + : 'Structured browser state returned by getBrowserState(), used directly to build LLM prompts.'} +

    + +
    + + {/* ActionResult */} +
    + ActionResult + +
    + + {/* Custom PageController */} +
    + + {isZh ? '自定义实现' : 'Custom Implementation'} + +

    + {isZh + ? '在非浏览器环境（如 Puppeteer、Playwright），你可以实现自定义 PageController。需要实现 Agent 使用的核心方法：' + : 'In non-browser environments (e.g. Puppeteer, Playwright), you can implement a custom PageController. Implement the core methods used by the agent:'} +

    + +
    +
    + ) +} diff --git a/packages/website/src/pages/docs/integration/security-permissions/page.tsx b/packages/website/src/pages/docs/advanced/security-permissions/page.tsx similarity index 100% rename from packages/website/src/pages/docs/integration/security-permissions/page.tsx rename to packages/website/src/pages/docs/advanced/security-permissions/page.tsx diff --git a/packages/website/src/pages/docs/integration/third-party-agent/page.tsx b/packages/website/src/pages/docs/features/third-party-agent/page.tsx similarity index 85% rename from packages/website/src/pages/docs/integration/third-party-agent/page.tsx rename to packages/website/src/pages/docs/features/third-party-agent/page.tsx index 797ef49..1aef22b 100644 --- a/packages/website/src/pages/docs/integration/third-party-agent/page.tsx +++ b/packages/website/src/pages/docs/features/third-party-agent/page.tsx @@ -105,27 +105,6 @@ const pageAgentTool = {

- -
-

- {isZh ? '⚠️ 注意事项' : '⚠️ Notes'} -

- -
) } diff --git a/packages/website/src/pages/docs/index.tsx b/packages/website/src/pages/docs/index.tsx index 872f229..868f27a 100644 --- a/packages/website/src/pages/docs/index.tsx +++ b/packages/website/src/pages/docs/index.tsx @@ -6,15 +6,15 @@ import CustomUIDocs from './advanced/custom-ui/page' import PageAgentCoreDocs from './advanced/page-agent-core/page' // Advanced import PageAgentDocs from './advanced/page-agent/page' +import PageControllerDocs from './advanced/page-controller/page' +import SecurityPermissions from './advanced/security-permissions/page' // Features import ChromeExtension from './features/chrome-extension/page' import Instructions from './features/custom-instructions/page' import CustomTools from './features/custom-tools/page' import DataMasking from './features/data-masking/page' import Models from './features/models/page' -import BestPractices from './integration/best-practices/page' -import SecurityPermissions from './integration/security-permissions/page' -import ThirdPartyAgent from './integration/third-party-agent/page' +import ThirdPartyAgent from './features/third-party-agent/page' import Limitations from './introduction/limitations/page' // Introduction import Overview from './introduction/overview/page' @@ -80,6 +80,11 @@ export default function DocsRouter() { + + + + + {/* Advanced */} @@ -92,26 +97,21 @@ export default function DocsRouter() { + + + + + - + - - - - - - - - - - {/* Default redirect or 404 */} diff --git a/packages/website/src/pages/docs/integration/best-practices/page.tsx b/packages/website/src/pages/docs/integration/best-practices/page.tsx deleted file mode 100644 index ede493e..0000000 --- a/packages/website/src/pages/docs/integration/best-practices/page.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import BetaNotice from '@/components/BetaNotice' -import CodeEditor from '@/components/CodeEditor' -import { useLanguage } from '@/i18n/context' - -export default function BestPractices() { - const { isZh } = useLanguage() - - return ( -
-

{isZh ? '最佳实践' : 'Best Practices'}

- -

- {isZh - ? '使用 page-agent 的最佳实践和常见问题解决方案。' - : 'Best practices and common solutions for using page-agent.'} -

- -
- ) -} diff --git a/packages/website/src/pages/docs/introduction/limitations/page.tsx b/packages/website/src/pages/docs/introduction/limitations/page.tsx index 6323d21..ba0278e 100644 --- a/packages/website/src/pages/docs/introduction/limitations/page.tsx +++ b/packages/website/src/pages/docs/introduction/limitations/page.tsx @@ -83,7 +83,7 @@ export default function LimitationsPage() { {/* Interaction Limitations */} - + {isZh ? '交互能力' : 'Interaction Capabilities'}
@@ -128,33 +128,25 @@ export default function LimitationsPage() {
{/* Understanding Limitations */} - + {isZh ? '理解能力' : 'Understanding'} -
-

- {isZh - ? 'Page Agent 不使用多模态模型，不截图，没有视觉能力。仅通过 DOM 结构理解页面。' - : 'Page Agent does not use multimodal models, does not take screenshots, and has no visual capability. It reads pages through DOM structure only.'} -

-

- {isZh - ? '图片、Canvas、WebGL、SVG 等视觉内容无法被识别。页面的语义化程度和可访问性直接影响 AI 的理解准确性。' - : 'Images, Canvas, WebGL, SVG and other visual content cannot be recognized. Page semantic quality and accessibility directly affect AI accuracy.'} -

-
- {/* Website Quality */} - - {isZh ? '网页质量影响' : 'Page Quality Matters'} - -
-

- {isZh - ? '反常识的交互逻辑、纯视觉的操作提示、快速出现消失的元素等都会降低自动化成功率。语义化的 HTML 和良好的可访问性会显著提升效果。' - : 'Counter-intuitive interactions, visual-only cues, and rapidly appearing/disappearing elements reduce automation success. Semantic HTML and good accessibility significantly improve results.'} -

-
+

+ {isZh + ? 'Page Agent 不使用多模态模型，不截图，没有视觉能力。仅通过 DOM 结构理解页面。' + : 'Page Agent does not use multimodal models, does not take screenshots, and has no visual capability. It reads pages through DOM structure only.'} +

+

+ {isZh + ? '图片、Canvas、WebGL、SVG 等视觉内容无法被识别。页面的语义化程度和可访问性直接影响 AI 的理解准确性。' + : 'Images, Canvas, WebGL, SVG and other visual content cannot be recognized. Page semantic quality and accessibility directly affect AI accuracy.'} +

+

+ {isZh + ? '反常识的交互逻辑、纯视觉的操作提示、快速出现消失的元素等都会降低自动化成功率。语义化的 HTML 和良好的可访问性会显著提升效果。' + : 'Counter-intuitive interactions, visual-only cues, and rapidly appearing/disappearing elements reduce automation success. Semantic HTML and good accessibility significantly improve results.'} +

) diff --git a/packages/website/vite.config.js b/packages/website/vite.config.js index 09683dc..d200751 100644 --- a/packages/website/vite.config.js +++ b/packages/website/vite.config.js @@ -27,12 +27,12 @@ const SPA_ROUTES = [ 'docs/features/custom-instructions', 'docs/features/models', 'docs/features/chrome-extension', + 'docs/features/third-party-agent', 'docs/advanced/page-agent', 'docs/advanced/page-agent-core', + 'docs/advanced/page-controller', 'docs/advanced/custom-ui', - 'docs/integration/security-permissions', - 'docs/integration/best-practices', - 'docs/integration/third-party-agent', + 'docs/advanced/security-permissions', ] function spaRoutes() {