309 lines
14 KiB
HTML
309 lines
14 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.9.5/dist/mermaid.min.js"></script>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:#0d1117;color:#c9d1d9;line-height:1.8}
|
||
.header{background:linear-gradient(135deg,#0a1628,#16213e,#1a3a5c);padding:3rem 2rem;text-align:center;border-bottom:3px solid #e65100}
|
||
.header h1{font-size:2.2rem;color:#e6edf3;margin-bottom:.5rem}
|
||
.header .subtitle{color:#8b949e;font-size:1rem}
|
||
.container{max-width:1300px;margin:0 auto;padding:2rem}
|
||
.section{background:#161b22;border:1px solid #30363d;border-radius:12px;margin-bottom:2rem;overflow:hidden}
|
||
.section-header{background:linear-gradient(90deg,#1a1a2e,#16213e);padding:1rem 1.5rem;border-bottom:1px solid #30363d;display:flex;align-items:center;gap:.8rem}
|
||
.section-number{background:#e65100;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
|
||
.section-title{font-size:1.2rem;color:#e6edf3;font-weight:600}
|
||
.section-body{padding:1.5rem;overflow-x:auto}
|
||
.mermaid{display:flex;justify-content:center;padding:1rem 0}
|
||
.mermaid svg{max-width:100%;height:auto}
|
||
.desc{background:#1a1a2e;border-left:3px solid #e65100;padding:1rem 1.2rem;margin:1rem 0;border-radius:0 8px 8px 0;font-size:.95rem;color:#8b949e}
|
||
.desc strong{color:#e6edf3}
|
||
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1rem 0}
|
||
.value-card{background:#1a1a2e;border:1px solid #30363d;border-radius:10px;padding:1.2rem}
|
||
.value-card h3{color:#e65100;font-size:1rem;margin-bottom:.5rem}
|
||
.value-card p{color:#8b949e;font-size:.9rem}
|
||
.phase-list{display:flex;flex-direction:column;gap:.8rem;margin:1rem 0}
|
||
.phase-item{display:flex;gap:1rem;align-items:flex-start;background:#1a1a2e;border-radius:10px;padding:1rem;border-left:4px solid #e65100}
|
||
.phase-badge{background:#e65100;color:#fff;padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:600;white-space:nowrap}
|
||
.phase-item h4{color:#e6edf3;font-size:1rem;margin-bottom:.2rem}
|
||
.phase-item p{color:#8b949e;font-size:.9rem}
|
||
.footer{text-align:center;padding:2rem;color:#484f58;font-size:.85rem;border-top:1px solid #21262d}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>sgClaw 智能浏览器自动化平台</h1>
|
||
<div class="subtitle">用自然语言驱动浏览器操作 让业务流程自动执行</div>
|
||
</div>
|
||
<div class="container">
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">1</div>
|
||
<div class="section-title">一句话理解 sgClaw</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="desc">
|
||
<strong>sgClaw 是一个"智能浏览器助手"。</strong>用户用自然语言说出需求（例如"帮我查本月线损率"），sgClaw 自动在浏览器中完成点击、输入、查询、导出等一系列操作，最终将结果呈现给用户。全程无需人工逐步操作浏览器。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">2</div>
|
||
<div class="section-title">整体业务流程 - 从用户指令到结果呈现</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="desc">
|
||
以下是用户使用 sgClaw 的完整流程。用户只需<strong>输入一句话</strong>，剩下的全部自动完成。
|
||
</div>
|
||
<div class="mermaid">
|
||
graph LR
|
||
A["用户输入自然语言指令\n例如: 帮我查本月线损率"] --> B["sgClaw 理解指令意图\n识别是哪个业务场景"]
|
||
B --> C{"是否已知场景?"}
|
||
C -->|是 已知场景| D["直接执行预设流程\n快速通道 无需AI"]
|
||
C -->|否 新场景| E["AI大模型分析理解\n拆解为具体操作步骤"]
|
||
D --> F["自动操作浏览器\n点击 输入 查询 导出"]
|
||
E --> F
|
||
F --> G["将结果呈现给用户\n生成报表 打开Excel"]
|
||
|
||
classDef userInput fill:#1a3a5c,stroke:#4a9eff,color:#e6edf3
|
||
classDef ai fill:#2d1f3d,stroke:#9c27b0,color:#e6edf3
|
||
classDef fast fill:#1f3d2d,stroke:#4caf50,color:#e6edf3
|
||
classDef action fill:#4a2c17,stroke:#e65100,color:#e6edf3
|
||
classDef result fill:#1a3a5c,stroke:#4a9eff,color:#e6edf3
|
||
|
||
class A userInput
|
||
class B ai
|
||
class C ai
|
||
class D fast
|
||
class E ai
|
||
class F action
|
||
class G result
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">3</div>
|
||
<div class="section-title">平台如何与现有业务系统协同工作</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="desc">
|
||
sgClaw <strong>不需要改造现有业务系统</strong>，它像一个坐在电脑前的员工，直接操作浏览器完成工作。
|
||
</div>
|
||
<div class="mermaid">
|
||
graph TB
|
||
User["业务人员\n分公司副主任 线损专责 班组长"]
|
||
|
||
subgraph Platform["统一业务平台"]
|
||
S1["线损大数据系统\n查询线损率 统计分析"]
|
||
S2["95598客服系统\n故障报修 工单处理"]
|
||
S3["其他业务子系统\n..."]
|
||
end
|
||
|
||
subgraph sgClaw["sgClaw 智能助手"]
|
||
SG1["理解用户自然语言指令"]
|
||
SG2["自动操作浏览器完成任务"]
|
||
SG3["安全保障 权限管控"]
|
||
end
|
||
|
||
Result["最终结果\nExcel报表 Word文档 数据展示"]
|
||
|
||
User -->|"说出需求"| SG1
|
||
SG1 --> SG2
|
||
SG1 --> SG3
|
||
SG2 -->|"自动点击查询"| S1
|
||
SG2 -->|"自动填写表单"| S2
|
||
SG2 -->|"自动导出报表"| S3
|
||
S1 -->|"数据返回"| SG2
|
||
S2 -->|"数据返回"| SG2
|
||
S3 -->|"数据返回"| SG2
|
||
SG2 -->|"生成报表文件"| Result
|
||
Result -->|"展示给用户"| User
|
||
|
||
classDef people fill:#1a3a5c,stroke:#4a9eff,color:#e6edf3
|
||
classDef plat fill:#2d1f3d,stroke:#9c27b0,color:#e6edf3
|
||
classDef sg fill:#4a2c17,stroke:#e65100,color:#e6edf3
|
||
classDef out fill:#1f3d2d,stroke:#4caf50,color:#e6edf3
|
||
|
||
class User people
|
||
class Platform,S1,S2,S3 plat
|
||
class sgClaw,SG1,SG2,SG3 sg
|
||
class Result out
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">4</div>
|
||
<div class="section-title">安全管控体系</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="desc">
|
||
sgClaw 建立了<strong>三道安全防线</strong>，确保即使在AI驱动下，所有操作也在可控范围内。
|
||
</div>
|
||
<div class="mermaid">
|
||
graph TB
|
||
A["第一道防线\n身份确认: 确保通信双方可信"] --> B["第二道防线\n规则校验: 只能访问允许的系统和页面"]
|
||
B --> C["第三道防线\n二次复核: 操作前再次确认合法性"]
|
||
C --> D["最终结果\n所有操作可追溯 可审计"]
|
||
|
||
classDef l1 fill:#1a3a5c,stroke:#4a9eff,color:#e6edf3
|
||
classDef l2 fill:#4a2c17,stroke:#e65100,color:#e6edf3
|
||
classDef l3 fill:#2d1f3d,stroke:#9c27b0,color:#e6edf3
|
||
classDef ok fill:#1f3d2d,stroke:#4caf50,color:#e6edf3
|
||
|
||
class A l1
|
||
class B l2
|
||
class C l3
|
||
class D ok
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">5</div>
|
||
<div class="section-title">两种运行模式</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="desc">
|
||
sgClaw 支持两种运行方式，适应不同场景需求。
|
||
</div>
|
||
<div class="mermaid">
|
||
graph LR
|
||
subgraph Mode1["模式一: 嵌入式 浏览器子进程模式"]
|
||
M1A["浏览器启动sgClaw"]
|
||
M1B["一问一答式通信"]
|
||
M1C["适合单次任务执行"]
|
||
M1A --> M1B --> M1C
|
||
end
|
||
|
||
subgraph Mode2["模式二: 独立服务模式"]
|
||
M2A["sgClaw作为持久化服务运行"]
|
||
M2B["前端网页随时连接使用"]
|
||
M2C["适合频繁交互使用"]
|
||
M2A --> M2B --> M2C
|
||
end
|
||
|
||
classDef m1 fill:#1a3a5c,stroke:#4a9eff,color:#e6edf3
|
||
classDef m2 fill:#2d1f3d,stroke:#9c27b0,color:#e6edf3
|
||
|
||
class Mode1,M1A,M1B,M1C m1
|
||
class Mode2,M2A,M2B,M2C m2
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">6</div>
|
||
<div class="section-title">技术演进路线</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="phase-list">
|
||
<div class="phase-item">
|
||
<div class="phase-badge">第一阶段</div>
|
||
<div>
|
||
<h4>基础能力构建</h4>
|
||
<p>完成浏览器基础操作能力（点击、输入、导航、读取页面内容），建立安全管控体系，实现与现有业务平台的对接。</p>
|
||
</div>
|
||
</div>
|
||
<div class="phase-item">
|
||
<div class="phase-badge">第二阶段</div>
|
||
<div>
|
||
<h4>AI智能驱动</h4>
|
||
<p>接入AI大模型，支持自然语言理解，用户用日常语言描述需求，AI自动拆解为操作步骤并执行。</p>
|
||
</div>
|
||
</div>
|
||
<div class="phase-item">
|
||
<div class="phase-badge">第三阶段</div>
|
||
<div>
|
||
<h4>业务场景沉淀</h4>
|
||
<p>将高频使用的场景沉淀为标准化技能包（如线损查询、故障统计、周报生成等），实现快速执行，减少对AI的依赖。</p>
|
||
</div>
|
||
</div>
|
||
<div class="phase-item">
|
||
<div class="phase-badge">第四阶段</div>
|
||
<div>
|
||
<h4>平台化服务</h4>
|
||
<p>从单次任务执行升级为持久化服务，支持多用户并发使用，建立完整的技能市场和任务编排体系。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">7</div>
|
||
<div class="section-title">核心价值</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="value-grid">
|
||
<div class="value-card">
|
||
<h3>效率提升</h3>
|
||
<p>原来需要人工逐步操作浏览器完成的任务，现在只需一句话，自动完成查询、导出、报表生成全流程。</p>
|
||
</div>
|
||
<div class="value-card">
|
||
<h3>零改造接入</h3>
|
||
<p>不需要改造现有业务系统，sgClaw像员工一样直接操作浏览器，对现有系统零侵入。</p>
|
||
</div>
|
||
<div class="value-card">
|
||
<h3>安全可控</h3>
|
||
<p>三道安全防线确保所有操作在允许范围内，域名白名单、动作管控、二次复核，全程可追溯。</p>
|
||
</div>
|
||
<div class="value-card">
|
||
<h3>灵活扩展</h3>
|
||
<p>新业务场景通过编写技能包快速接入，已有场景走快速通道无需AI，兼顾效率和灵活性。</p>
|
||
</div>
|
||
<div class="value-card">
|
||
<h3>技术自主</h3>
|
||
<p>核心代码自主可控，基于Rust语言构建，性能优异，不依赖外部SaaS服务，数据安全有保障。</p>
|
||
</div>
|
||
<div class="value-card">
|
||
<h3>持续演进</h3>
|
||
<p>从单任务执行到持久化服务，从人工指令到AI驱动，技术路线清晰，逐步构建平台化能力。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-header">
|
||
<div class="section-number">8</div>
|
||
<div class="section-title">典型使用场景举例</div>
|
||
</div>
|
||
<div class="section-body">
|
||
<div class="desc">
|
||
以下是业务人员日常使用 sgClaw 的真实场景。
|
||
</div>
|
||
<div class="mermaid">
|
||
graph TB
|
||
U1["线损专责\n每月查询线损率统计数据"] -->|"输入: 帮我查本月线损率"| SG1["sgClaw自动完成\n打开线损系统 选择月份 查询数据 导出Excel"]
|
||
U2["供电所班组长\n每周生成线损分析周报"] -->|"输入: 生成上周线损周报"| SG2["sgClaw自动完成\n查询周数据 汇总分析 生成Word报告"]
|
||
U3["客服专责\n处理95598故障工单统计"] -->|"输入: 统计本周故障工单"| SG3["sgClaw自动完成\n登录客服系统 筛选工单 生成统计表"]
|
||
|
||
classDef user fill:#1a3a5c,stroke:#4a9eff,color:#e6edf3
|
||
classDef sg fill:#4a2c17,stroke:#e65100,color:#e6edf3
|
||
|
||
class U1,U2,U3 user
|
||
class SG1,SG2,SG3 sg
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="footer">sgClaw 智能浏览器自动化平台 - 技术路线总览 - 2026年4月</div>
|
||
<script>
|
||
mermaid.initialize({ startOnLoad:true, theme:'dark', securityLevel:'loose', logLevel:'warn' });
|
||
</script>
|
||
</body>
|
||
</html> |