60天前端 + AI 总结：前端知识点 vs 后端知识点

60 天前端 + AI 总结：前端知识点 vs 后端知识点

0. 总体认知

这 60 天，本质上是在搭一条完整链路：

用户 → 前端体验（Chat/Code/知识中心） → AI 编排层（RAG/Agent/工作流）→ 模型 → 回到前端展示与调试

可以粗分为三块：

• 前端侧：交互、状态管理、流式体验、调试、可视化、SDK 抽象
• 后端/服务侧：RAG 检索、LangChain/Chain、Agent、工作流、权限
• 通用 AI 能力：LLM/Prompt/Embedding/Function Calling，这两端都要理解

下面按这三个维度拆开。

---

一、前端侧知识点（你已经会上手的）

1. 聊天 & 流式体验

• 聊天 UI 设计：
  • 消息模型：{ id, role, content, createdAt, meta }
  • 消息列表 + 输入区 + 顶部 Header + 侧边历史会话
• 流式响应体验（SSE）：
  • fetch + ReadableStream 读取 text/event-stream
  • 流式更新时的自动滚动（尊重用户手动上滑）
  • 流式错误态（中断后不再继续滚动/闪动）

2. hooks / SDK 抽象

• 通用 hooks：
  • useChat：一次性调用，适合短问答
  • useStreamingChat / useSSE：统一 SSE 流式请求封装
  • useThrottledText：流式内容节流合并，减少 re-render
• AI 客户端抽象：
  • AIClient 接口：chat() / streamChat()
  • HttpAIClient 实现，对接不同后端（自研 / OpenAI 网关）

3. 状态管理 & 多会话

• 多会话模型：
  • Session：id/title/updatedAt/archived
  • messagesBySession[sessionId]
• 本地持久化：
  • 使用 localStorage 存储最近 N 个会话 + 消息摘要
• 多 Tab 同步：
  • storage 事件监听，实现多个浏览器 Tab 状态同步

4. 调试 / 实验 / 可视化

• 调试面板（DebugPanel）：
  • 记录：prompt/answer/耗时/模型/是否RAG/是否Agent
  • 列表 + 详情视图，可复制 Prompt，可回放调用
• Prompt 实验台：
  • 多个 PromptVariant（A/B/C）
  • 同一问题 → 多 Prompt 调用 → 展示答案 + 人工评分
• Agent Trace 视觉化：
  • 时间线：Thought / Action / Observation / Final
  • 帮助理解“模型到底做了哪些步骤”
• Embedding 可视化：
  • 接收降维后的 (x,y) → 画散点图，标注 label/cluster

5. 多模态 & 知识中心 UI

• 多模态输入统一组件：
  • 支持文本、图片、文件、结构化 JSON
  • 上传/拖拽/粘贴 + 预览 + 删除
• 知识中心页面：
  • 左：搜索 + 筛选 + 文档列表
  • 中：文档详情 + 版本信息
  • 右：基于当前文档的 RAG 问答

一句话概括前端侧： 你已经能把 AI 服务包装成“真·产品体验”，而不只是一个裸露的文本框。

---

二、后端 / 服务侧知识点（倾向服务/Node/后端）

这些点你前端也理解了原理，但更多是跑在服务端或 LangChain 层：

1. LLM 调用与 Prompt 工程

• LLM Chat API 调用（OpenAI / 本地 Ollama）
• System / User / Assistant 多角色消息组织
• Prompt 模板（模板字符串 + zod 结构化输出）

2. Embedding & RAG 检索

• Embedding 生成 + 简单向量库概念
• RAG 管线：
  • 检索（向量/关键词/Hybrid）
  • 上下文构造（Chunk 策略 / 压缩 / Multi-Vector）
  • 基于上下文回答的 Prompt
• RAG 质量优化：
  • 上下文压缩（Contextual Compression）
  • 引用标注（citations）
  • 自检链（Self-Check）

3. LangChain / Chain / Agent

• Chain：
  • LLMChain / SequentialChain / Parallel / Router / Map-Reduce
  • LCEL（RunnableSequence/Parallel）：声明式 pipeline
• Agent：
  • ReAct：Thought / Action / Observation / Final
  • Function Calling：根据工具 Schema 自动构造调用参数
  • 多 Agent 协同：专家 Agent / 协调者 / 流水线

4. Workflow 工作流

• Workflow 模板：
  • Workflow + WorkflowStep（collect/analyze/report/notify）
• Workflow 实例：
  • WorkflowInstance + stepResults + finalReport
• 典型任务：
  • 每日巡检 / 报表生成 / 批量分析

5. 安全 & 权限（服务侧）

• Prompt 注入防护（system prompt 说明用户/文档“不可信”）
• 权限过滤：
  • 文档元数据加 tenantId/userId/dept/visibility
  • 检索时先按权限过滤，再做相似度搜索
• 日志脱敏：
  • 在落盘前对手机号/身份证/密码/token 做 mask

一句话概括服务侧： 你已经从“会调一个 Chat API”升级到“能用 Chain/Agent/RAG/Workflow 设计一个 AI 服务层”。

---

三、前后端都需要的「通用 AI 知识点」

这部分是既不只属于前端，也不只属于后端，而是 AI 应用品类的通用基础：

• LLM 基础概念：
  • Token / 上下文长度 / Temperature / Top-p / 输出确定性
• Prompt Engineering：
  • System Prompt 设计
  • Few-shot 示例
  • 明确约束（只基于 context，不要编造）
• Embeddings：
  • 文本 → 向量 → 相似度
  • 向量维度与性能/质量的平衡
• Evaluation（评估）：
  • 基准集（Benchmark）
  • 自动/半自动评估（LLM 评分器）
  • A/B 测试与日志分析

这些是你在端到端地做一个 AI 应用时，前后端都应该理解的共同语言。

---

四、怎么在博客/简历里利用“前端 vs 后端”这条线？

简历里可以这样拆：

• 前端侧（技能/项目亮点）

  • SSE 流式聊天、RAG 问答、代码助手、知识中心页面
  • 自研 ai-frontend-kit：useChat/useStreamingChat、DebugPanel、Prompt 实验台、Agent Timeline 等
  • 多会话管理、多 Tab 同步、本地缓存、Embedding/知识库可视化

• 后端/AI 服务侧（理解 & 协作能力）

  • 熟悉 RAG / LangChain / Agent / Function Calling / 工作流
  • 能够沟通设计“NL → 查询意图 → 检索/SQL → 报告”的完整链路
  • 具备 AI 应用的安全意识（Prompt 注入、多租户权限、日志脱敏）

---

五、后续可以怎么继续深挖（前端视角）

• 更“前端”的方向：

  • 把 ai-frontend-kit 正式做成开源库 / 内部基建；
  • 在复杂页面里做更高级的可视化（工作流图、Agent 调用图、Embedding 动画）；
  • 优化移动端/小程序场景下的 AI 交互。

• 相对“全栈”的方向：

  • 更深入 LangChain / LlamaIndex 等框架；
  • 参与一个真实业务的 AI 项目，从需求到落地；
  • 探索模型微调/检索优化等更靠后端的一侧。

---