一句话总览（先给结论）
前端 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 的核心是流式交互和用户体验，
图片生成和文本生成本质都是异步任务，
前端通过流式渲染让用户"感觉更快"。
七、结合你背景的进阶建议（实话）
你如果能在面试中说清楚：
-
Fetch Stream / SSE
-
文生图展示
-
中断、状态管理、体验优化