一句话总览（先给结论）
前端 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
文生图展示
中断、状态管理、体验优化
