414 lines
13 KiB
HTML
414 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>sgClaw 指令执行全链路解析</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--bg-color: #f8fafc;
|
||
--text-main: #0f172a;
|
||
--text-muted: #64748b;
|
||
--card-bg: #ffffff;
|
||
--border-color: #e2e8f0;
|
||
--blue: #3b82f6;
|
||
--blue-light: #eff6ff;
|
||
--blue-dark: #1e3a8a;
|
||
--orange: #f97316;
|
||
--orange-light: #fff7ed;
|
||
--orange-dark: #7c2d12;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
background-color: var(--bg-color);
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
color: var(--text-main);
|
||
line-height: 1.6;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ============ 页头 ============ */
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
.header h1 {
|
||
font-size: 2.2rem;
|
||
font-weight: 800;
|
||
margin-bottom: 12px;
|
||
color: var(--text-main);
|
||
}
|
||
.header p {
|
||
font-size: 1.05rem;
|
||
color: var(--text-muted);
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ============ 主流程容器 ============ */
|
||
.flow-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 40px;
|
||
}
|
||
|
||
/* ============ 卡片通用 ============ */
|
||
.flow-card {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 20px;
|
||
padding: 32px 28px;
|
||
box-shadow: 0 8px 28px rgba(0,0,0,0.04);
|
||
}
|
||
|
||
.flow-title {
|
||
font-size: 1.35rem;
|
||
font-weight: 800;
|
||
color: var(--text-main);
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.flow-desc {
|
||
font-size: 0.95rem;
|
||
color: var(--text-muted);
|
||
text-align: center;
|
||
margin-bottom: 28px;
|
||
line-height: 1.6;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* ============ 路由卡：中性色 ============ */
|
||
.card-router {
|
||
border-left: 5px solid #a855f7;
|
||
}
|
||
.card-router .flow-title { color: #6b21a8; }
|
||
|
||
/* ============ 简单指令卡：蓝色 ============ */
|
||
.card-simple {
|
||
border-left: 5px solid var(--blue);
|
||
}
|
||
.card-simple .flow-title { color: var(--blue-dark); }
|
||
|
||
/* ============ 复杂指令卡：橙色 ============ */
|
||
.card-complex {
|
||
border-left: 5px solid var(--orange);
|
||
}
|
||
.card-complex .flow-title { color: var(--orange-dark); }
|
||
|
||
/* ============ 图表包装器 ============ */
|
||
.mermaid-wrapper {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
background: #fcfcfc;
|
||
border-radius: 12px;
|
||
padding: 24px 8px;
|
||
border: 1px dashed #cbd5e1;
|
||
}
|
||
.mermaid {
|
||
min-width: 500px;
|
||
}
|
||
|
||
/* ============ 对比表格 ============ */
|
||
.compare-section {
|
||
margin-bottom: 40px;
|
||
}
|
||
.compare-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.92rem;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
|
||
}
|
||
.compare-table th {
|
||
padding: 14px 20px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
font-size: 0.95rem;
|
||
}
|
||
.compare-table td {
|
||
padding: 12px 20px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
vertical-align: middle;
|
||
}
|
||
.compare-table tr:last-child td { border-bottom: none; }
|
||
.compare-table tbody tr:hover { background: #f8fafc; }
|
||
|
||
.th-dim { background: #f1f5f9; color: #475569; text-align: left; }
|
||
.th-simple { background: var(--blue-light); color: var(--blue-dark); }
|
||
.th-complex { background: var(--orange-light); color: var(--orange-dark); }
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 3px 10px;
|
||
border-radius: 6px;
|
||
font-size: 0.82rem;
|
||
font-weight: 700;
|
||
}
|
||
.badge-blue { background: var(--blue-light); color: var(--blue); border: 1px solid #bfdbfe; }
|
||
.badge-orange { background: var(--orange-light); color: var(--orange); border: 1px solid #fed7aa; }
|
||
.badge-green { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
|
||
.badge-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
|
||
|
||
/* ============ 底部说明 ============ */
|
||
.footer-note {
|
||
margin-top: 16px;
|
||
padding: 18px 24px;
|
||
background: #eff6ff;
|
||
border-left: 4px solid var(--blue);
|
||
border-radius: 8px;
|
||
font-size: 0.95rem;
|
||
color: var(--blue-dark);
|
||
line-height: 1.7;
|
||
}
|
||
.footer-note strong { color: #1d4ed8; }
|
||
code {
|
||
background: #e0e7ff;
|
||
color: #3730a3;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 0.88rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="container">
|
||
|
||
<!-- 页头 -->
|
||
<div class="header">
|
||
<h1>sgClaw 指令执行全链路解析</h1>
|
||
<p>同一个 Agent 框架，面对"简单直调"与"复杂规划"两类指令走完全不同的路径。本文拆解两条路径的内部时序，帮助研发与业务团队建立准确认知。</p>
|
||
</div>
|
||
|
||
<div class="flow-container">
|
||
|
||
<!-- ===== 0. 指令路由决策 ===== -->
|
||
<div class="flow-card card-router">
|
||
<h2 class="flow-title"><span style="font-size:1.5rem;">🔀</span> 0. 指令路由：走哪条路？</h2>
|
||
<p class="flow-desc">
|
||
sgClaw 在执行任何操作前，先由引擎分析指令语义，判断是否能从技能库中直接命中一个 Skill。<br>
|
||
<strong>命中率高 → 跳过大模型，走简单路径；</strong> <strong>需要拆解 → 交由大模型规划，走复杂路径。</strong>
|
||
</p>
|
||
<div class="mermaid-wrapper">
|
||
<div class="mermaid">
|
||
flowchart LR
|
||
Input(["💬 用户指令"])
|
||
Router{"🔍 引擎意图分析\n（语义匹配技能库）"}
|
||
Simple["⚡ 简单路径\nSingle-Skill Direct\n无 LLM 调用"]
|
||
Complex["🧠 复杂路径\nReAct Planning Loop\n动态拆解 + 多轮 LLM"]
|
||
|
||
Input --> Router
|
||
Router -->|"Skill 命中率高\n单一、明确意图"| Simple
|
||
Router -->|"无匹配 Skill\n模糊或组合目标"| Complex
|
||
|
||
style Simple fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e3a8a
|
||
style Complex fill:#fff7ed,stroke:#f97316,stroke-width:2px,color:#7c2d12
|
||
style Router fill:#faf5ff,stroke:#a855f7,stroke-width:2px,color:#6b21a8
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== 对比速览表 ===== -->
|
||
<div class="compare-section">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="th-dim">对比维度</th>
|
||
<th class="th-simple">⚡ A. 简单指令（Single-Skill）</th>
|
||
<th class="th-complex">🧠 B. 复杂指令（ReAct Planning）</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>典型场景</strong></td>
|
||
<td>提取当前页面表格、截图保存</td>
|
||
<td>对比A/B公司财报、跨系统数据同步</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>大模型调用次数</strong></td>
|
||
<td><span class="badge badge-green">0 次</span>（无需LLM）</td>
|
||
<td><span class="badge badge-orange">2 ~ 8+ 次</span>（规划 + 每步评估）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>预计完成时间</strong></td>
|
||
<td><span class="badge badge-blue">< 1 秒</span></td>
|
||
<td><span class="badge badge-orange">5 ~ 30 秒</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Skill 调用数量</strong></td>
|
||
<td>1 个 Skill（直接命中）</td>
|
||
<td>N 个 Skill（动态加载）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>记忆系统使用</strong></td>
|
||
<td>不写入记忆（一次性操作）</td>
|
||
<td>每步写入 L1 短期记忆，汇总写入 L2</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>失败恢复</strong></td>
|
||
<td>无 Critic，直接报错返回</td>
|
||
<td>Critic 评估后可自动纠错重试</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>适用前提</strong></td>
|
||
<td>技能库中已有对应 Skill</td>
|
||
<td>技能库有原子 Skill，需 LLM 组合编排</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ===== A. 简单指令 ===== -->
|
||
<div class="flow-card card-simple">
|
||
<h2 class="flow-title"><span style="font-size:1.5rem;">⚡</span> A. 简单指令执行 (Single-Skill)</h2>
|
||
<p class="flow-desc">
|
||
当用户输入目的极其明确的指令（如"提取当前表格"），引擎直接命中对应的预设 Skill，
|
||
<strong>全程零 LLM 调用，执行延迟 < 1 秒</strong>。Skill 在 Deno Core 沙箱中运行，直接向浏览器内核下发 CDP 动作。
|
||
</p>
|
||
|
||
<div class="mermaid-wrapper">
|
||
<div class="mermaid">
|
||
sequenceDiagram
|
||
autonumber
|
||
actor U as 👤 用户
|
||
participant UI as 💻 UI面板(P4)
|
||
participant Core as ⚙️ 引擎(P1a+P1b)
|
||
participant Sandbox as 📦 Skill沙箱(Deno)
|
||
participant Browser as 🌐 浏览器内核(P2)
|
||
|
||
U->>UI: "提取当前页面表格"
|
||
UI->>Core: 发送执行请求（含页面上下文）
|
||
|
||
rect rgb(239, 246, 255)
|
||
Note over Core,Sandbox: 语义匹配：命中 TableExtract_Skill，跳过大模型
|
||
Core->>Sandbox: 加载并 Ed25519 验签 TableExtract_Skill
|
||
Sandbox-->>Core: 验签通过，JS 沙箱就绪
|
||
end
|
||
|
||
Sandbox->>Browser: 下发 BrowserAction：CDP 获取 DOM 结构
|
||
Browser-->>Sandbox: 返回页面 HTML / 表格节点
|
||
|
||
Sandbox-->>Core: Skill 执行完毕，返回结构化数据
|
||
Core-->>UI: 格式化结果（JSON → 可读表格）
|
||
UI-->>U: 界面展示提取结果 ✅
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== B. 复杂指令 ===== -->
|
||
<div class="flow-card card-complex">
|
||
<h2 class="flow-title"><span style="font-size:1.5rem;">🧠</span> B. 复杂指令执行 (ReAct Planning)</h2>
|
||
<p class="flow-desc">
|
||
面对模糊或组合型任务（如"对比A、B公司最新财报"），引擎依赖大模型进行<strong>动态拆解</strong>，并多次调用不同 Skill。
|
||
每一步执行后经 <strong>Critic 评估器</strong>判断是否继续或纠错，同时将中间结果写入记忆系统。
|
||
</p>
|
||
|
||
<div class="mermaid-wrapper">
|
||
<div class="mermaid">
|
||
sequenceDiagram
|
||
autonumber
|
||
actor U as 👤 用户
|
||
participant UI as 💻 UI面板(P4)
|
||
participant Core as ⚙️ 引擎(P1a+P1b)
|
||
participant LLM as 🤖 大模型底座
|
||
participant Memory as 🗄️ 记忆系统(L0/L1/L2)
|
||
participant Sandbox as 📦 Skill沙箱(Deno)
|
||
participant Browser as 🌐 浏览器内核(P2)
|
||
|
||
U->>UI: "对比 A 和 B 公司最新财报"
|
||
UI->>Core: 发送复杂任务请求
|
||
|
||
rect rgb(255, 247, 237)
|
||
Note over Core,LLM: Think 阶段：大模型拆解目标
|
||
Core->>LLM: 意图分析 + 生成执行计划 (Plan)
|
||
LLM-->>Core: 返回步骤列表：① 搜 A 财报 → ② 搜 B 财报 → ③ 对比汇总
|
||
end
|
||
|
||
rect rgb(254, 242, 242)
|
||
Note over Core,Browser: ReAct 循环：逐步执行，每步评估
|
||
loop 针对每个拆解步骤（Step 1..N）
|
||
Core->>Sandbox: Act：加载当前步骤对应的 Skill
|
||
Sandbox->>Browser: 执行 BrowserAction（操作页面）
|
||
Browser-->>Sandbox: 返回页面反馈（Observation）
|
||
Sandbox-->>Core: Skill 执行结果
|
||
Core->>Memory: 写入 L1 短期记忆（RingBuffer）
|
||
Core->>LLM: Critic 评估：当前步骤是否成功？
|
||
LLM-->>Core: 决断：✅ 继续下一步 / ⚠️ 纠错重试
|
||
end
|
||
end
|
||
|
||
Core->>LLM: 汇总所有步骤结果，生成最终报告
|
||
LLM-->>Core: 输出多维度财报对比分析
|
||
Core->>Memory: 将成功路径写入 L2 长期记忆（SQLite）
|
||
Core-->>UI: 返回完整分析报告
|
||
UI-->>U: 界面展示多维度对比结果 ✅
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /.flow-container -->
|
||
|
||
<div class="footer-note">
|
||
<strong>💡 架构启示：</strong><br>
|
||
两条路径共享同一套底层基础设施（Pipe 通信 + Skill 沙箱 + 浏览器内核），区别仅在于<strong>是否经过 LLM 规划层与 Critic 评估层</strong>。
|
||
这意味着：① <code>P1a Pipe 通信稳定性</code> 是两条路径的共同命脉；
|
||
② <code>P1b Prompt 工程质量</code> 决定了复杂路径的拆解准确率与 Critic 纠错能力；
|
||
③ <code>P3 Skill 覆盖度</code> 决定了有多少指令可以走成本更低的简单路径。
|
||
三者互相支撑，缺一不可。
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
mermaid.initialize({
|
||
startOnLoad: true,
|
||
theme: 'base',
|
||
securityLevel: 'loose',
|
||
themeVariables: {
|
||
fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
|
||
fontSize: '14px',
|
||
primaryColor: '#ffffff',
|
||
primaryTextColor: '#1e293b',
|
||
primaryBorderColor: '#cbd5e1',
|
||
lineColor: '#64748b',
|
||
secondaryColor: '#f1f5f9',
|
||
tertiaryColor: '#f8fafc',
|
||
activationBorderColor: '#3b82f6',
|
||
activationBkgColor: '#eff6ff',
|
||
sequenceNumberColor: '#64748b',
|
||
},
|
||
sequence: {
|
||
useMaxWidth: false,
|
||
actorMargin: 50,
|
||
messageMargin: 30,
|
||
boxMargin: 12,
|
||
noteMargin: 12,
|
||
mirrorActors: false,
|
||
},
|
||
flowchart: {
|
||
useMaxWidth: false,
|
||
htmlLabels: true,
|
||
curve: 'basis',
|
||
nodeSpacing: 60,
|
||
rankSpacing: 50,
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|