一句话总览（先给结论）
前端 AI 的本质不是“训练模型”，而是：
- 调用大模型 / 图像模型 API
- 处理 流式数据（Streaming）
- 实时渲染结果（文本 / 图片）
一、前端如何开发「AI 生成图片」
1️⃣ 核心架构（必懂）
前端
↓ prompt
后端（BFF）
↓
AI 模型（文生图）
↓
图片 URL / Base64
↓
前端展示
📌 前端不直接调用模型（安全 & Key）
2️⃣ 主流文生图模型（你只要知道）
| 模型 | 特点 |
|---|---|
| Stable Diffusion | 最常见 |
| SDXL | 高清 |
| DALL·E | 简单易用 |
| Midjourney | 效果好（非 API） |
3️⃣ 前端调用方式（核心）
✅ 方式一：返回图片 URL（最常见）
{
"url": "https://xxx/image.png"
}
<img src={url} />
✔ 省内存
✔ 易缓存
✅ 方式二：Base64（实时生成）
<img src={`data:image/png;base64,${base64}`} />
📌 用于：
- 私有图片
- 临时生成
4️⃣ 前端体验优化（加分点）
🔥 loading + 占位图
Skeleton / Spinner
🔥 多图生成
n = 4
🔥 Prompt 参数化
{
prompt,
size,
style,
seed
}
5️⃣ 面试高分总结（你直接说）
前端负责 Prompt 构建、任务状态、图片展示和用户交互，
生成过程放在后端或云服务。
二、前端如何实现「AI 流式回答」（重点）
这是 ChatGPT 那种“一个字一个字出来”效果。
1️⃣ 核心原理（一定要懂）
HTTP 长连接 + 分段返回
技术本质
- Server-Sent Events（SSE）
- 或 Fetch Stream
- 或 WebSocket（少用）
2️⃣ 后端返回的数据形式（示例）
data: 你
data: 好
data: ，
data: 世
data: 界
3️⃣ 前端实现方式一（SSE，最常见）
前端代码（核心）
const eventSource = new EventSource('/api/chat');
eventSource.onmessage = (e) => {
setText(prev => prev + e.data);
};
eventSource.onerror = () => {
eventSource.close();
};
✔ 简单
✔ 稳定
✔ ChatGPT 同款
4️⃣ 前端实现方式二（Fetch Stream，最推荐）
适合 React / Next.js
const res = await fetch('/api/chat');
const reader = res.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { value, done } = await reader.read();
if (done) break;
setText(prev => prev + decoder.decode(value));
}
🔥 优点：
- 可控性强
- 易和业务结合
5️⃣ 流式 UI 体验优化（面试加分）
✅ 打字机效果
- requestAnimationFrame
- 节流更新
✅ 自动滚动
scrollIntoView()
✅ 中断生成
controller.abort();
三、图片生成 + 流式回答组合实战
场景：AI 助手 + 图片生成
- 用户输入 Prompt
- 文本 → 流式输出
- 检测到「生成图片意图」
- 触发文生图
- 图片异步插入
📌 真实产品都这么做
四、前端 AI 项目真实技术栈（你可以直接说）
React / Next.js
Fetch Stream / SSE
Markdown 渲染
代码高亮
图片懒加载
虚拟列表
五、面试官必追问 & 标准答案
Q1：为什么不用 WebSocket？
SSE / Fetch 更轻量，符合请求-响应模型。
Q2：流式回答会影响性能吗？
会，需要节流、批量更新。
Q3：如何防止用户重复请求？
禁用按钮 + AbortController。
Q4：前端安全吗？
Key 全部在后端，前端只拿结果。
六、面试总结话术（直接背）
前端 AI 的核心是流式交互和用户体验，
图片生成和文本生成本质都是异步任务，
前端通过流式渲染让用户“感觉更快”。
