AI 核心概念融合指南
这不仅仅是概念堆砌，这是构建 AI 应用的工程视图。我们将 AI 的黑盒拆解为清晰的四层架构，每一层都对应着具体的前端技术实现。
第一部分：逻辑层 (Logic Layer) —— 大脑与决策
这一层决定了 AI 如何思考、如何行动以及如何扩展知识边界。
0. LLM (Large Language Model)
- 本质：它是生成器，不是查询机。它在做概率接龙，而非检索真理。这就是为什么它会一本正经地胡说八道（幻觉），因为它并不真正理解真理，只是在预测下一个词。
- 前端视角：一个输入 Prompt 输出 Text 的超重型异步函数。
1. Function Calling (函数调用)
- 定义：让 AI 从“聊天机器人”进化为“按按钮的操作员”。
- 前端映射：
Router/Dispatcher+JSON-RPC。 - 工作流：
- 你告诉 AI：“我手里有
search_weather(city)和send_email(to, body)这两个函数”。 - 用户说：“帮我发个邮件给老板”。
- AI 不执行代码，而是返回一个 JSON 对象：
{ "function": "send_email", "args": { "to": "boss", "body": "..." } }。 - 你的前端代码拿到 JSON，执行真正的
send_email函数，把结果再喂回给 AI。
- 你告诉 AI：“我手里有
- 核心价值：它连接了 AI 的“大脑”和你业务系统的“手脚”。
2. Agent (智能体)
- 定义：LLM (大脑) + Tools (手脚) + Loop (运行机制)。
- 前端映射：服务端运行的
While循环。 - 核心循环：
- Ask: 前端把任务发给 AI。
- Think: AI 思考，返回一个 JSON，说“我要调用 GoogleSearch 函数”。
- Act: 代码执行这个函数。
- Observe: 把函数运行结果（HTML/JSON）喂回给 AI。
- Loop: 回到第2步，直到 AI 说“我做完了”。
- 观察 -> 思考 -> 行动 -> 观察 的死循环，就是 Agent 的本质。
3. Chain of Thought (CoT, 思维链)
- 定义：强制模型展示推理过程，减少逻辑跳跃带来的错误。
- 前端映射：
console.log调试模式 /Verbose Mode。 - 原理：如果你直接问结果，AI 容易错（就像代码写在一行里容易出 Bug）。如果你强制它“一步步思考（Let's think step by step）”，它会把中间推理过程打印出来。
- 应用：在 UI 上展示“AI 正在思考...”，并把 CoT 的过程折叠显示，增加用户的信任感。
4. RAG (Retrieval-Augmented Generation, 检索增强) vs. Fine-tuning
- Fine-tuning (微调)：
- 映射：修改源码并重新编译 (
npm build)。把知识“烧录”进模型的大脑里。 - 缺点：贵、慢、更新麻烦。除非你是行业巨头，否则别碰。
- 映射：修改源码并重新编译 (
- RAG (检索增强)：
- 映射：运行时查阅文档 (
Runtime Lookup)。给 AI 开卷考试。 - 场景：AI 的数据只截止到2023年，且不知道你公司的私有 PRD 文档。
- 数据流：User Input -> Vector DB Search -> Get Context -> Construct Prompt (Query + Context) -> LLM -> Response。
- 优势：实时、廉价、数据隐私可控。企业级应用的首选方案。
- 映射：运行时查阅文档 (
第二部分：交互层 (Interaction Layer) —— 数据流转与协议
这一层处理 AI 与用户、与前端应用的数据交互方式。
5. Prompt Engineering (提示词工程)
- 定义：一种特殊的 API 参数封装技术。前端调用 API 传
params，Prompt 就是传给 AI 这个万能 API 的params。 - System Prompt (系统提示词)：
- 映射：全局配置 (
Global Config) /constructor()。 - 作用：在会话开始前设定人设与规则。
const system_prompt = "你是一个严谨的资深工程师";它定义了整个 Session 的基调。
- 映射：全局配置 (
- User Prompt：对应具体的
Request Body，即用户的每一次提问。
6. Streaming (流式输出)
- 定义：降低 TTFB (Time to First Byte)，提升感知性能。
- 前端映射：
Server-Sent Events (SSE)/WebSocket/ReadableStream。 - 原理：AI 不是一次性把 1000 字吐出来，而是像打字机一样，一个 Token 一个 Token 地吐。
- 痛点：你需要处理流式解析，不再是简单的
await fetch()，这能极大降低用户的心理等待时间。
7. Generative UI (生成式 UI)
- 定义：AI 返回的不再是 Markdown 文本，而是可渲染的 UI 组件代码。
- 前端映射：服务端组件 (
RSC) 动态流式传输。 - 趋势：意图导向编程。用户说“我要看销量趋势”，AI 直接返回一个
<Recharts />组件并在前端渲染，而非一段文字描述。
第三部分：配置层 (Configuration Layer) —— 控制随机性
通过参数调整模型的输出风格，平衡“严谨”与“创意”。
8. Temperature (温度)
- 定义：控制采样概率分布的平滑程度。
- 前端映射：
Math.random()的熵值 / 随机种子。 - 数值含义：
0：代码模式。绝对理性，每次回答都一样（幂等性）。适合写代码、数据提取。> 0.8：创意模式。放飞自我，AI 会尝试那些“概率没那么高”的词，产生新奇结果。适合写小说、头脑风暴。
9. Top-P (Nucleus Sampling)
- 定义：基于累积概率切断候选词。
- 映射：候选词的动态“白名单”过滤器。
- 工程建议：通常
Temperature和Top-P只调一个，不要同时乱动。
第四部分：数据层 (Data Layer) —— 计算单位与语义理解
这是机器理解世界的底层数据结构。
10. Tokens (词元)
- 定义：模型理解文本的最小单位，Token ≠ Character。
- 换算：大约 1000 个 Token ≈ 750 个英文单词 ≈ 400-500 个汉字。
- 前端意义：
- 计费：API 是按 Token 算钱的（输入算钱，输出也算钱）。
- 性能：Token 越多，延迟 (Latency) 越高，首字生成时间 (TTFT) 越慢。
- 验证：输入框限制不能只看
string.length，需估算 Token 数以免爆 API 限制。
11. Context Window (上下文窗口)
- 定义：AI 的短期记忆容量限制。
- 前端映射：浏览器的
sessionStorage/LRU Cache(环形缓冲区)。 - 原理：AI 是无状态的。你每一次发给 AI 的请求，实际上都把之前的聊天历史重新打包发了一遍。
- 用户：你好 -> 服务器
- 用户：我在做前端 -> 服务器（其实发的是：“你好” + “AI回复” + “我在做前端”）
- 瓶颈：当对话太长，超过了模型的窗口（比如 128k），最早的信息就会被“挤出去”，AI 就失忆了。必须在应用层写代码截断 (
Truncate) 历史记录。
12. Embeddings (向量)
- 定义：将文本转化为高维数学坐标（如
[0.1, -0.5, 0.8, ...]）。 - 前端映射：多维数组坐标 / 特征提取。
- 原理：AI 不认识文字，只认识数字。Embedding 就是把一段话（比如“低趴的轿跑”）变成一组坐标。
- 神奇之处：意思相近的话，在数学空间里的距离就很近。
- 核心价值：语义搜索。
- 你搜“低趴”，向量搜索能匹配到“姿态好的车”，因为它们在向量空间靠得近，而不需要关键词完全匹配。
第五部分：架构优化层 (Architecture & Optimization Layer) —— 性能与规模
这一层是区分普通开发者与 AI 架构师的分水岭，涉及成本、速度与质量的权衡。
13. KV Cache (键值缓存)
- 本质：Transformer 的空间换时间策略。
- 前端痛点：为什么长文本越聊越慢？
- 原理：生成第 100 个 Token 时，不需要重新计算前 99 个 Token 的注意力矩阵。我们把中间计算结果（Key 和 Value 矩阵）存起来。
- 代价：显存占用极大。这就是为什么长上下文 (Long Context) 这么贵。
14. MoE (Mixture of Experts, 混合专家模型)
- 定义：三个臭皮匠顶个诸葛亮。
- 映射：微服务架构 / 动态路由。
- 原理：模型内部不是一个巨大的神经网络，而是包含成百上千个“小专家”网络。对于每个 Token，路由网关只激活其中 2 个专家进行处理。
- 优势：推理速度极快（只激活部分参数），但知识储备巨大（总参数量极大）。如 GPT-4, Mixtral 8x7B。
15. Speculative Decoding (投机采样)
- 定义：大小模型配合，预测未来。
- 前端映射：乐观 UI 更新 (Optimistic UI)。
- 原理：小模型（运行快但笨）先猜出接下来的 5 个词，大模型（运行慢但聪明）并行验证这 5 个词。如果全对，一次性输出 5 个词；如果错了，回滚修正。
- 结果：将流式输出速度提升 2-3 倍，这也是为什么有些 API 快得离谱。
16. Evals (评估体系)
- 定义：AI 应用的单元测试与集成测试。
- 映射：Jest / Cypress。
- 痛点：凭感觉调整 Prompt 是工程大忌。
- 方案：建立数据集，用另一个更强的模型（如 GPT-4）作为裁判 (LLM-as-a-Judge)，给你的模型输出打分。没有 Evals，任何优化都是盲人摸象。
17. GraphRAG (图谱增强检索)
- 定义：超越向量相似度的逻辑关联检索。
- 原理：普通的 RAG 只能找到“含有关键词的片段”。GraphRAG 先提取实体构建知识图谱。
- 场景：问“A公司和B公司有什么资金往来？”，向量搜索可能失效（因为文档没直接提），但图谱能沿着“A -> 子公司C -> 供应商D -> B”的路径找到答案。
总结：前端工程师的进阶路径
- 不仅仅是调 API：理解数据流，掌握 RAG 拼接逻辑，处理 Context Window 截断，你就是架构师。
- 交互是瓶颈：聊天框是最烂的 AI 交互。探索 Generative UI，让 AI 生成界面。
- 意图导向：从“点击触发函数”转变为“识别意图 -> 自动组合函数”。
- 关注性能细节：理解 Token 成本、KV Cache 对延迟的影响，才能设计出既快又省钱的系统。
