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

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

这一篇是第五阶段总结，覆盖 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: stringname: stringdescription: stringskills: 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: stringtype: 'collect' | 'analyze' | 'report'agentId: stringstatus: TaskStatusinputSummary: stringoutputSummary?: stringstartedAt?: numberfinishedAt?: number
  }interface Task {id: stringname: stringstatus: TaskStatuscreatedAt: numberupdatedAt: numbersteps: TaskStep[]finalReport?: string
  }
  

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

---

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

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

• 把工作流拆成“模板”与“实例”：

  • 模板（Workflow）：配好要执行的步骤链；
  • 实例（Instance）：某一天实际跑了一次的执行记录。

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

  type WorkflowStepType = 'collect' | 'analyze' | 'report' | 'notify'interface WorkflowStep {id: stringname: stringtype: WorkflowStepTypeagentId: stringconfig: Record<string, any>
  }interface Workflow {id: stringname: stringsteps: WorkflowStep[]
  }
  

• 做了一个简单的“工作流编辑器”：

  • 左边：步骤列表（支持增加 / 删除 / 上下移动）；
  • 中间：配置当前步骤（类型、Agent、简单参数如时间范围）；
  • 右边：预览 JSON（便于对接后端）。

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

• 实例结构（一次执行）：

  type InstanceStatus = 'pending' | 'running' | 'success' | 'failed'interface WorkflowInstance {id: stringworkflowId: stringname: stringstatus: InstanceStatuscreatedAt: numberupdatedAt: numberstepResults: { 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: stringkind: InputKindcreatedAt: number// text / file / data 等字段按 kind 扩展
  }
  

• 前端好处：

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

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

• 为文档增加版本维度：

  interface DocumentVersion {id: stringversion: numbercontent: stringcreatedAt: numberauthor?: stringchangeLog?: string
  }interface Document {id: stringtitle: stringcurrentVersion: numberversions: DocumentVersion[]
  }
  

• 前端可以：

  • 在文档详情页显示“当前 v3，最近一次修改人/时间”；
  • 点开旧版本，查看历史内容，甚至做简单 diff。

• RAG 回答 meta 中可带 docVersion，让用户知道“这条回答基于哪一版文档”。

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

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

  interface CorrectionFeedback {id: stringquestion: stringoriginalAnswer: stringcorrectedAnswer: stringreason?: stringcreatedAt: numberuserId?: string
  }
  

• 前端可提供简单编辑器：

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

4. Embedding 可视化（Day 49）

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

  interface EmbeddingPoint {id: stringx: number  // 0~1y: numberlabel?: stringcluster?: number
  }
  

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

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

• 设计了一个一体化知识页面的布局：

  • 左：搜索 + 筛选 + 搜索结果列表；
  • 中：选中的文档内容（支持版本信息）；
  • 右/底：基于当前文档的 RAG 问答区。

• 这让 RAG 不再只是“一个问答框”，而是和文档浏览/搜索真正整合起来。

---

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

1. 从“一个对话框”扩展为“工作流 + 控制台 + 知识中心”的系统级思维

   • 不再局限于 Chat 页面，而是围绕 AI 能力构建多页面、多角色的应用。

2. 前端真正成为 AI 系统的“驾驶舱”

   • 配置工作流、观察执行轨迹、管理知识版本、可视化 Embedding，这些都非常偏前端长处。

3. 多模态、版本、纠错，让系统更“可持续”

   • 多模态让信息输入更自然；
   • 版本管理 + 纠错反馈，让知识库与回答质量能持续进化。