40 lines
1.3 KiB
Markdown
40 lines
1.3 KiB
Markdown
# Demo 5：AI 操作 Web 的三种路径
|
||
|
||
<div class="mt-8">
|
||
|
||
```mermaid {scale: 0.82}
|
||
flowchart LR
|
||
A[用户一句话任务] --> B{Agent 如何操作网页?}
|
||
B --> C[看截图<br/>Vision]
|
||
B --> D[读结构<br/>DOM / A11y]
|
||
B --> E[调工具<br/>WebMCP]
|
||
C --> F[慢 / 贵 / UI 敏感]
|
||
D --> G[更结构化 / 仍易误点]
|
||
E --> H[语义工具 / 参数明确 / 可控]
|
||
```
|
||
|
||
</div>
|
||
|
||
<div class="grid grid-cols-3 gap-5 mt-8">
|
||
|
||
<div class="card-red">
|
||
<div class="font-semibold mb-2">视觉识别</div>
|
||
<div class="text-sm text-gray-500">通用，不改页面；但每一步都要观察、推理、点击，token 与耗时容易升高。</div>
|
||
</div>
|
||
|
||
<div class="card-green">
|
||
<div class="font-semibold mb-2">DOM / A11y</div>
|
||
<div class="text-sm text-gray-500">比截图更结构化；但复杂组件、隐藏状态、错误点击仍然会影响可靠性。</div>
|
||
</div>
|
||
|
||
<div class="card-blue">
|
||
<div class="font-semibold mb-2">WebMCP</div>
|
||
<div class="text-sm text-gray-500">页面主动暴露工具，Agent 调业务能力，不再猜按钮和表单。</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="mt-8 card-amber text-sm">
|
||
示例任务：创建“订单管理”模块，包括词条、菜单、角色权限绑定。案例数据只说明趋势，不承诺所有项目都有相同收益。
|
||
</div>
|