企业官网建设流程全解析

一句话总览（先给结论）

前端 AI 的本质不是“训练模型”，而是：

• 调用大模型 / 图像模型 API

• 处理流式数据（Streaming）

• 实时渲染结果（文本 / 图片）

一、前端如何开发「AI 生成图片」

1️⃣ 核心架构（必懂）

前端 ↓ prompt 后端（BFF） ↓ AI 模型（文生图） ↓ 图片 URL / Base64 ↓ 前端展示

📌前端不直接调用模型（安全 & Key）

2️⃣ 主流文生图模型（你只要知道）

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 助手 + 图片生成

1. 用户输入 Prompt

2. 文本 → 流式输出

3. 检测到「生成图片意图」

4. 触发文生图

5. 图片异步插入

📌真实产品都这么做

四、前端 AI 项目真实技术栈（你可以直接说）

React / Next.js Fetch Stream / SSE Markdown 渲染 代码高亮 图片懒加载 虚拟列表

五、面试官必追问 & 标准答案

Q1：为什么不用 WebSocket？

SSE / Fetch 更轻量，符合请求-响应模型。

Q2：流式回答会影响性能吗？

会，需要节流、批量更新。

Q3：如何防止用户重复请求？

禁用按钮 + AbortController。

Q4：前端安全吗？

Key 全部在后端，前端只拿结果。

六、面试总结话术（直接背）

前端 AI 的核心是流式交互和用户体验，
图片生成和文本生成本质都是异步任务，
前端通过流式渲染让用户“感觉更快”。

七、结合你背景的进阶建议（实话）

你如果能在面试中说清楚：

• Fetch Stream / SSE

• 文生图展示

• 中断、状态管理、体验优化