知识中心

这一篇是第五阶段总结，覆盖 Day 41–50：重点是 复杂 Chain、任务工作流、多 Agent 协同、多模态知识中心，更偏“产品级系统设计”。

一、阶段目标：从“一个页面”升级到“一套系统”

这一阶段我给自己的目标是：

把之前的 RAG / Agent 能力，组合成可配置的工作流（巡检、日报、任务流）；
在前端做到：多 Agent 轨迹可视化、工作流配置、任务监控；
为后面“大一点的知识系统 / 控制台”打好基础。

二、Day 41–43：复杂 Chain 和任务工作流

1. LangChain 复杂 Chain（Day 41）

理解了几个高级模式：
- Router Chain：根据问题类型路由到不同子链：
  - 普通 QA → qa_chain
  - 代码类问题 → code_chain
  - 报表/指标问题 → report_chain
- Parallel / Map-Reduce：
  - Parallel：对多个文档/输入并行跑相同的子链；
  - Map-Reduce：先对每个 chunk 做局部处理（map），再汇总所有结果（reduce）。
前端视角的关键：
对我来说，最终只要一个 /smart-chat 接口，内部到底是 Router 还是 Map-Reduce，都交给后端 Chain 决定。

2. 多 Agent 策略与协同（Day 42）

总结了三类典型协作模式：
1. 专家 Agent：
  - frontendAgent：前端/JS/React/Vue；
  - analyticsAgent：报表/指标/SQL；
  - docAgent：文档整理/写作。
2. 协调者 Agent（Coordinator）：
  - 不直接干活，只负责：
    - 看问题 → 拆成子任务；
    - 把子任务丢给合适的专家 Agent；
    - 收集结果 → 总结成最终答案。
3. 流水线 Agent（Pipeline）：
  - Step1：需求理解；
  - Step2：方案设计；
  - Step3：生成代码 / 报告；
  - 每一步的输出是下一步的输入。

定义了一个简单的 Agent 配置结构（前端用来展示和记录）：

interface AgentConfig {
  id: string
  name: string
  description: string
  skills: string[]     // ['frontend','react','typescript']
  backendKey: string   // 后端实际路由用的 key
}

3. 任务工作流（Day 43）

从“单次调用”升级到“任务工作流”：
例如“每日质量巡检/日报”可以拆成：
1. 收集数据（collect）；
2. 分析指标（analyze）；
3. 生成报告（report）。

抽象了 Task & Step 类型（前端监控用）：

type TaskStatus = 'pending' | 'running' | 'success' | 'failed'

interface TaskStep {
  id: string
  type: 'collect' | 'analyze' | 'report'
  agentId: string
  status: TaskStatus
  inputSummary: string
  outputSummary?: string
  startedAt?: number
  finishedAt?: number
}

interface Task {
  id: string
  name: string
  status: TaskStatus
  createdAt: number
  updatedAt: number
  steps: TaskStep[]
  finalReport?: string
}

前端可以基于这个结构做出一个“任务详情页”：
时间线展示每个步骤的状态 + 简要输入/输出。

三、Day 44–45：工作流配置器 & 运行监控

1. 工作流可视化配置（Day 44）

把工作流拆成“模板”与“实例”：
- 模板（Workflow）：配好要执行的步骤链；
- 实例（Instance）：某一天实际跑了一次的执行记录。

工作流模板结构（线性版）：

type WorkflowStepType = 'collect' | 'analyze' | 'report' | 'notify'

interface WorkflowStep {
  id: string
  name: string
  type: WorkflowStepType
  agentId: string
  config: Record<string, any>
}

interface Workflow {
  id: string
  name: string
  steps: WorkflowStep[]
}

做了一个简单的“工作流编辑器”：
- 左边：步骤列表（支持增加 / 删除 / 上下移动）；
- 中间：配置当前步骤（类型、Agent、简单参数如时间范围）；
- 右边：预览 JSON（便于对接后端）。

2. 工作流嵌入产品 & 实例监控（Day 45）

实例结构（一次执行）：

type InstanceStatus = 'pending' | 'running' | 'success' | 'failed'

interface WorkflowInstance {
  id: string
  workflowId: string
  name: string
  status: InstanceStatus
  createdAt: number
  updatedAt: number
  stepResults: { stepId:string; status:InstanceStatus; outputSummary?:string }[]
  finalReport?: string
}

前端页面：
- 实例列表页：显示每次任务的状态（成功/失败/进行中）、名称、时间；
- 实例详情页：兼容 Day 43 的 TaskStep 展示逻辑，方便看到全过程。
从产品视角看：
已经有了一个简单的“AI 工作流引擎”控制台雏形。

四、Day 46–50：多模态统一模型 & 知识中心

1. 多模态输入统一模型（Day 46）

把所有输入类型统一到一个 InputItem：

type InputKind = 'text' | 'image' | 'file' | 'json'

interface InputItem {
  id: string
  kind: InputKind
  createdAt: number
  // text / file / data 等字段按 kind 扩展
}

前端好处：
- 所有上传区/拖拽区/粘贴区都可以复用这一层；
- 发送时统一转成一个 InputPayload[] 给后端。

2. 知识库版本管理与变更可视化（Day 47）

为文档增加版本维度：

interface DocumentVersion {
  id: string
  version: number
  content: string
  createdAt: number
  author?: string
  changeLog?: string
}

interface Document {
  id: string
  title: string
  currentVersion: number
  versions: DocumentVersion[]
}

前端可以：
- 在文档详情页显示“当前 v3，最近一次修改人/时间”；
- 点开旧版本，查看历史内容，甚至做简单 diff。
RAG 回答 meta 中可带 docVersion，让用户知道“这条回答基于哪一版文档”。

3. 前端标注/纠错 UI（Day 48）

针对 AI 回答，增加“我来改一个更好的回答”的入口：

interface CorrectionFeedback {
  id: string
  question: string
  originalAnswer: string
  correctedAnswer: string
  reason?: string
  createdAt: number
  userId?: string
}

前端可提供简单编辑器：
- 显示原回答；
- 用户编辑成自己认可的版本；
- 提交到后端做反馈/训练数据来源。

4. Embedding 可视化（Day 49）

后端先做降维（PCA/TSNE），前端拿到 2D 点：

interface EmbeddingPoint {
  id: string
  x: number  // 0~1
  y: number
  label?: string
  cluster?: number
}

用 SVG/canvas 画散点图，悬浮时展示 label 或文档标题。
有助于理解：哪些文档彼此接近，是否有异常聚类。

5. 知识中心页面（Day 50）

设计了一个一体化知识页面的布局：
- 左：搜索 + 筛选 + 搜索结果列表；
- 中：选中的文档内容（支持版本信息）；
- 右/底：基于当前文档的 RAG 问答区。
这让 RAG 不再只是“一个问答框”，而是和文档浏览/搜索真正整合起来。

五、这一阶段的“三个完成度”

从“一个对话框”扩展为“工作流 + 控制台 + 知识中心”的系统级思维
- 不再局限于 Chat 页面，而是围绕 AI 能力构建多页面、多角色的应用。
前端真正成为 AI 系统的“驾驶舱”
- 配置工作流、观察执行轨迹、管理知识版本、可视化 Embedding，这些都非常偏前端长处。
多模态、版本、纠错，让系统更“可持续”
- 多模态让信息输入更自然；
- 版本管理 + 纠错反馈，让知识库与回答质量能持续进化。

posted @ 2025-12-17 15:03 XiaoZhengTou 阅读(0) 评论(0) 收藏举报

刷新页面返回顶部

前端+AI的结合

前端 + AI 学习记录（Day 41–50）：工作流 / 多 Agent / 知识中心

前端 + AI 学习记录（Day 41–50）：工作流 / 多 Agent / 知识中心

一、阶段目标：从“一个页面”升级到“一套系统”

二、Day 41–43：复杂 Chain 和任务工作流

1. LangChain 复杂 Chain（Day 41）

2. 多 Agent 策略与协同（Day 42）

3. 任务工作流（Day 43）

三、Day 44–45：工作流配置器 & 运行监控

1. 工作流可视化配置（Day 44）

2. 工作流嵌入产品 & 实例监控（Day 45）

四、Day 46–50：多模态统一模型 & 知识中心

1. 多模态输入统一模型（Day 46）

2. 知识库版本管理与变更可视化（Day 47）

3. 前端标注/纠错 UI（Day 48）

4. Embedding 可视化（Day 49）

5. 知识中心页面（Day 50）

五、这一阶段的“三个完成度”

公告