AI 前端是什么
1️⃣ AI 前端是什么
AI 前端指的是直接在前端（网页、移动端、桌面端）集成 AI 功能的开发方式。它可以是用户直接操作的界面，也可以是通过前端调用 AI 模型提供智能服务。
特点：
- 无需后端复杂处理：前端直接调用 AI API（例如 OpenAI、Anthropic、Azure OpenAI）就能生成文本、图像或做分析。
- 实时交互：用户操作和 AI 响应几乎是即时的。
- 典型场景：
- 聊天机器人（ChatGPT 风格的对话）
- 文本生成 / 代码生成 / 自动文案
- 图片生成、智能推荐
- 表单自动填写、智能校验
示例（React 前端直接调用 AI）：
const response =awaitfetch("https://api.openai.com/v1/chat/completions",{ method:"POST", headers:{"Content-Type":"application/json","Authorization":`Bearer ${API_KEY}`}, body:JSON.stringify({ model:"gpt-4", messages:[{ role:"user", content:"写一段前端代码"}]})});const data =await response.json(); console.log(data.choices[0].message.content);前端调用 API，AI 返回结果，前端直接展示，无需自己训练模型。
2️⃣ 什么是大模型（LLM, Large Language Model）
大模型是指参数量巨大、训练在海量数据上的 AI 模型。
- **LLM（Large Language Model）**是一类大模型，专门用来处理和生成自然语言。
- 特点：
- 能理解文本上下文（Context）
- 能生成连贯、有逻辑的文本
- 能处理多种任务：翻译、写作、问答、摘要、代码生成等
- 示例模型：
- OpenAI GPT 系列（GPT-3, GPT-4）
- LLaMA, MPT, Claude 等
3️⃣ 为什么前端可以直接接入 AI
以前 AI 模型很大，前端无法承载，需要专门的服务器做推理（inference）。现在有几个原因让前端可以直接接入：
- API 化服务：大模型部署在云端，前端只需要通过 HTTP/HTTPS 调用即可。
- 轻量 SDK：比如
OpenAI JS SDK或者LangChain JS，可以直接在前端使用。 - 推理开销转移到云端：前端只负责请求和展示，模型计算在云端完成。
- 安全性：API Key 可通过代理或后端中转保护，也可以直接在前端用受限 Key。
4️⃣ 核心概念：Prompt、Token、Embedding、Context
4.1 Prompt
Prompt = “输入给 AI 的指令或问题”。
- 可以是自然语言、代码、结构化文本。
例子：
写一段 JavaScript 函数，计算数组中最大值 4.2 Token
Token = AI 模型理解的最小单元。
- 一个 token 大概等于 4 个英文字符或 1 个汉字。
- 模型按 token 计算上下文长度和消耗（计费单位）。
例：
"Hello, world!" → 可能被分成 4 个 token 4.3 Embedding
Embedding = 将文本、图像或其他数据转成 向量（数字数组） 的表示方式。
- 目的是让计算机可以量化理解文本或语义相似度。就像计算机不理解你写的代码，但是他理解二进制。
- 用途：
- 文本检索（找相似问题）
- 语义搜索
- 聚类或推荐
例：
"我喜欢苹果" → [0.12, 0.98, ...] （向量表示） 4.4 Context
Context = AI 在生成回答时能“看到”的信息范围。
- 对话中，context 就是之前所有消息的集合。
- 作用：让 AI 根据历史信息生成连贯回答。
- 注意：模型有最大上下文长度，超出就会被截断。
🔹 总结关系：
前端 → 发送 Prompt → 模型按 Token 处理 → 生成结果 Embedding 用于语义理解或检索 Context 用于保留上下文信息