L1层:浏览器插件架构
L1层架构定位: L1层(采购意图采集层)是智能采购平台四层架构的最前端,直接与用户交互。本层主要职责包括:
- 意图识别:提取商品页面信息,调用服务端AI进行内容理解
- 用户交互:提供简洁直观的采购意图录入界面
- 数据采集:将用户采购需求结构化为标准数据格式
- 安全认证:确保用户身份和数据传输的安全性
- 跨平台适配:支持主流电商平台的页面结构识别
技术特点:
- 浏览器插件使用DOM API提取页面商品信息
- 通过HTTP API调用服务端AI服务进行内容识别和理解
- 采用Manifest V3规范确保插件安全性和性能
- 数据不在本地存储,实时传输到后端处理
3.1 L1层功能与交互设计
浏览器插件作为智能采购平台的L1层(采购意图采集层),负责在电商平台上捕获用户的采购意图并提供直观的交互体验:
3.1.1 L1层插件激活与界面
界面设计要点:
- 非侵入式:仅在识别到商品页面时显示小巧的浮动按钮
- 快速激活:一键弹出采集界面,无需页面跳转
- 信息预填:自动填充商品信息,减少用户输入
- 即时反馈:提交后立即显示成功状态和后续流程
3.1.2 核心交互流程
| 步骤 | 用户操作 | 插件行为 | 预期结果 |
|---|---|---|---|
| 1 | 浏览商品页面 | 后台检测页面内容 | 识别商品信息 |
| 2 | 点击”代购”按钮 | 弹出采集面板 | 显示商品详情 |
| 3 | 确认/修改信息 | 实时验证输入 | 确保数据完整 |
| 4 | 点击提交 | 数据加密传输 | 后端接收处理 |
| 5 | 等待反馈 | 显示处理状态 | 提示操作结果 |
3.2 L1层智能采集策略(基于 Browser-Use 的国产AI智能识别)
3.2.1 国产AI模型驱动的智能识别方案
采用 Browser-Use 工具进行商品信息的智能识别,相比传统DOM选择器更加稳定和智能:
Browser-Use 集成架构:
// Browser-Use 商品信息提取示例
import { BrowserUse } from 'browser-use';
class ProductExtractor {
constructor() {
this.browserUse = new BrowserUse({
model: 'qwen-vl-plus', // 使用阿里通义千问视觉模型
headless: true
});
}
async extractProductInfo(url) {
const task = `
分析当前商品页面,提取以下信息:
1. 商品标题
2. 商品价格
3. 商品规格/型号
4. 店铺名称
5. 商品图片链接
6. 库存状态
返回JSON格式的结构化数据
`;
const result = await this.browserUse.execute(task, {
url: url,
format: 'json'
});
return this.validateAndClean(result);
}
}3.2.2 国产AI智能识别优势
国产AI模型选型优势:
| 模型提供商 | 模型名称 | 核心优势 | 适用场景 |
|---|---|---|---|
| 阿里云 | 通义千问-VL | 中文理解优秀,成本低廉 | 主力商品识别模型 |
| 百度 | 文心一言-视觉版 | 本土化定制,合规性好 | 备用识别引擎 |
| 智谱AI | GLM-4V | 推理能力强,响应速度快 | 复杂页面解析 |
相比国外模型的优势:
- 合规性保障:符合国内数据安全和隐私保护法规
- 成本优势:调用费用普遍低于国外同类产品50%以上
- 中文优化:对中文商品描述理解更准确
- 本土化支持:更好的技术服务和定制化能力
- 网络稳定性:国内部署,避免网络延迟和封禁风险
相比传统选择器的技术优势:
| 对比维度 | 传统DOM选择器 | Browser-Use+国产AI方案 |
|---|---|---|
| 页面适应性 | 页面结构变化易失效 | AI理解语义,适应性强 |
| 维护成本 | 需频繁更新选择器 | 自适应,几乎无维护 |
| 准确性 | 依赖固定规则 | AI智能判断,准确性高 |
| 扩展性 | 新平台需重新适配 | 通用性强,快速支持新平台 |
| 中文支持 | 需要额外处理 | 原生中文优化 |
| 容错性 | 选择器失效即无法工作 | 多种策略自动切换 |
3.2.3 淘宝平台专用适配策略
主要适配目标:
- 淘宝平台:主要目标平台,重点支持
- 多平台支持:架构支持京东、拼多多等平台扩展
淘宝平台特殊优化:
- 重点适配淘宝商品页面结构
- 优化对淘宝价格显示规则的理解
- 支持淘宝特有的SKU规格选择
- 适配淘宝店铺信息提取
平台语义模板示例:
const platformTemplates = {
taobao: {
context: "这是淘宝商品页面",
instructions: `
重点关注:
- 商品标题通常在页面顶部
- 价格信息在右侧详情区
- 规格选择在价格下方
- 店铺信息在价格附近
`,
validation: {
priceFormat: /^¥?\d+\.?\d*$/,
titleLength: { min: 5, max: 200 }
}
},
jd: {
context: "这是京东商品页面",
instructions: `
重点关注:
- 商品名称在左上角
- 价格显示为红色数字
- 商品型号在基本信息中
`,
validation: {
priceFormat: /^¥\d+\.?\d*$/,
shopPattern: /.*店$/
}
}
};3.2.4 数据质量保证
多层验证机制:
- 语义验证:AI判断提取内容是否符合商品信息特征
- 格式验证:检查价格、标题等字段格式正确性
- 完整性验证:确保必需字段都已提取
- 合理性验证:价格范围、标题长度等合理性检查
- 一致性验证:多次提取结果的一致性对比
容错与重试策略:
class ProductExtractorWithRetry {
async extractWithRetry(url, maxRetries = 3) {
for (let i = 0; i < maxRetries; i++) {
try {
const result = await this.extractProductInfo(url);
if (this.validateResult(result)) {
return result;
}
// 调整策略重试
await this.adjustStrategy(i);
} catch (error) {
console.log(`提取失败,第${i+1}次重试:`, error);
if (i === maxRetries - 1) {
// 最后一次失败,返回部分数据或使用备用方案
return await this.fallbackExtraction(url);
}
}
}
}
async fallbackExtraction(url) {
// 备用方案:使用传统选择器或用户手工输入
return await this.manualFallback(url);
}
}3.2.5 基本稳定性保证
基本容错机制:
- 提取失败时自动重试(最多3次)
- 超时保护(单次请求60秒超时)
- 异常情况下支持手动补充
质量控制机制:
- 必填字段检查(商品名称、价格)
- 数据格式验证(价格数值合理性)
- 用户确认机制(提交前二次确认)
3.3 L1层OAuth认证集成
采用标准OAuth 2.0协议进行用户身份认证,确保安全可靠。
OAuth认证优势:
- 安全性高:用户密码不经过插件,避免泄露风险
- 标准化:采用成熟的OAuth 2.0标准协议
- 易集成:支持企业现有SSO系统集成
- 自动刷新:Refresh Token机制,无需用户重复登录
3.4 L1层安全与合规设计
3.4.1 数据安全策略
数据安全原则:
- 不存储原则:插件不在本地存储任何采集数据
- 加密传输:所有数据传输均采用HTTPS协议
- 最小化采集:只采集业务必需的商品信息
- 脱敏处理:敏感信息进行脱敏或加密处理
安全措施:
- 数据最小化:只采集业务必需的信息
- 传输安全:全程HTTPS + TLS1.3加密
- 访问控制:基于OAuth的权限管理
- 直接传输:数据不在插件内存储
3.4.2 隐私保护措施
| 保护措施 | 实施方法 | 效果 |
|---|---|---|
| 数据匿名化 | 用户ID哈希处理 | 无法追溯个人身份 |
| 脱敏处理 | 敏感字段加星号处理 | 保护个人隐私 |
| 透明告知 | 明确告知采集目的和范围 | 符合法规要求 |
| 权限最小化 | 仅申请必要的浏览器权限 | 降低权限滥用风险 |
| 用户控制 | 提供数据删除功能 | 增强用户数据自主权 |
| 透明度 | 清晰的隐私政策说明 | 提升用户信任度 |
3.4.3 合规性设计
插件商店规范:
- 遵循Chrome Web Store政策
- 详细的权限说明和使用目的
- 定期安全审核和更新
- 用户反馈和问题处理机制
企业合规要求:
- 支持企业级安全策略配置
- 提供详细的操作审计日志
- 兼容企业数据分类标准
- 支持合规性检查和报告
技术实现要点:
- 轻量化部署:插件包体积控制在2MB以内
- 性能优化:后台运行不影响浏览器性能
- 更新机制:支持自动更新和灰度发布
- 错误处理:完善的异常捕获和用户提示