企业官网建设流程全解析

1️⃣ AI 前端是什么

AI 前端指的是直接在前端（网页、移动端、桌面端）集成 AI 功能的开发方式。它可以是用户直接操作的界面，也可以是通过前端调用 AI 模型提供智能服务。

特点：

• 无需后端复杂处理：前端直接调用 AI API（例如 OpenAI、Anthropic、Azure OpenAI）就能生成文本、图像或做分析。

• 实时交互：用户操作和 AI 响应几乎是即时的。

• 典型场景：

  • 聊天机器人（ChatGPT 风格的对话）
  • 文本生成 / 代码生成 / 自动文案
  • 图片生成、智能推荐
  • 表单自动填写、智能校验

示例（React 前端直接调用 AI）：

constresponse=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:"写一段前端代码"}]})});constdata=awaitresponse.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）。现在有几个原因让前端可以直接接入：

1. API 化服务：大模型部署在云端，前端只需要通过 HTTP/HTTPS 调用即可。
2. 轻量 SDK：比如OpenAI JS SDK或者LangChain JS，可以直接在前端使用。
3. 推理开销转移到云端：前端只负责请求和展示，模型计算在云端完成。
4. 安全性：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 用于保留上下文信息