探讨了 AI 在前端开发中的多种应用场景。包括自定义 GPT 交互（SSE 流式传输、Markdown 渲染）、知识库问答（RAG、MCP 协议）、提效工具（代码提示、编辑器、设计稿转码、自动化测试）以及纯前端模型部署（TensorFlow、Web Worker、WASM）。此外还涉及 AI 在软实力方面的辅助（数据生成、PPT、纪要），并对 AI 代码维护、上下文管理及能源消耗进行了思考。旨在说明 AI 是提升效率的工具而非替代人员，需合理使用以平衡成本与维护性。
在 AI 的高速发展中，前端开发也在 AI 工具中发挥着举足轻重的作用。合理利用工具，能在工作中提升效率。本文介绍一些前端与 AI 结合的场景，不限于接入，也包含一些工具的使用。
在自定义 GPT 场景中，前端的核心职责是搭建'用户 - 自定义 GPT'的交互入口，同时支撑 GPT 的个性化配置、功能扩展与数据可视化，需围绕'交互体验、配置能力、集成适配'三大核心展开工作。
Ant Design 提供给前端开发者快速开发 AI 相关的 UI 组件库：https://ant-design-x.antgroup.com
SSE（Server-Sent Events）是一种基于 HTTP 协议的数据传输方式，它允许服务端向客户端推送数据。前端可以通过 SSE 实现 GPT 的实时对话，用户输入问题，GPT 返回结果。选择这种方式是因为 GPT 返回结果通常较长，流式传入能让用户体验更友好；而 WebSocket 长连接占用资源过多，服务器长连接数有限。
可以直接使用微软的 SSE 库：https://github.com/microsoft/fetch-event-source
npm install @microsoft/fetch-event-source
使用也很简单，注意处理 onerror，否则发生错误后还会一直尝试请求。
import { fetchEventSource } from '@microsoft/fetch-event-source';
fetchEventSource(`${process.env.API_MOLSCI_URL}/v1/chat`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
openWhenHidden: true,
onopen() {
console.log('连接成功');
},
onmessage(event) {
console.log('传输内容', event);
},
onclose() {
console.log('连接关闭');
return false;
},
onerror(err) {
console.error('连接错误', err);
throw err; // 抛出错误，不处理的话发生错误后还会一直尝试请求
},
});
GPT 对话框，用户输入问题，GPT 返回结果。用户刷新后，能查看到聊天记录。
我们可以封装 Chat 的 Hooks，实现这些通用的数据处理逻辑：
export function useChat() {
// 存储历史记录，游标分页
const [historyList, setHistoryList] = React.useState([]);
// 存储当前输入和 SSE 接受的数据合并成动态 messageList
const [messageList, setMessageListState] = React.useState([]);
// 渲染列表
const renderList = [...historyList, ...messageList];
/**
* 处理 SSE 接受数据等逻辑
* 处理滚动
* 处理 loading 状态
* 主动断开 SSE 连接使用 new AbortController()
* ......
*/
return { renderList };
}
GPT 有时候返回的是纯文本，有时候是 markdown，所以需要处理 markdown。
npm install react-markdown
import ReactMarkdown from 'react-markdown';
<ReactMarkdown>{str}</ReactMarkdown>
划词翻译、解释，前端开发需要实现划词翻译、解释，用户输入问题，GPT 返回结果。用户刷新后，能查看到聊天记录。
利用 window?.getSelection 来获取划词文本，然后传入 Chat 进行后续对话。
const SelectableText = () => {
const [selectedText, setSelectedText] = useState('');
const [isShowChatTranslateDrawer, setIsShowChatTranslateDrawer] = useState(false);
const debounceHandlerMouseup = _lodash.debounce(handlerMouseup, 200);
useEffect(() => {
window.addEventListener('mouseup', debounceHandlerMouseup);
window.addEventListener('click', handleOnWindowClick);
return () => {
window.removeEventListener('mouseup', debounceHandlerMouseup);
window.removeEventListener('click', handleOnWindowClick);
};
}, []);
function handlerMouseup(event) {
const selectedText = window?.getSelection ? window?.getSelection()?.toString() || '' : '';
initCardPos(event);
setSelectedText(selectedText);
}
function handleOnWindowClick() {
setIsShowChatTranslateDrawer(false);
}
// 划词解释框为了能一直保持在屏幕内，可以计算划词位置与屏幕边界的距离，计算之后设置坐标
function initCardPos(event) { }
};
export default SelectableText;
在纯调模型的基础上，与企业自己数据库结合，使用 RAG、MCP 等技术接入自己的数据。现在很多企业都在做自己的知识库，利用企业内部数据库与大模型结合，实现知识库的检索。这时候，前端开发需要实现 GPT 对话框，让用户输入问题，然后通过 API 调用 GPT 模型，返回结果。
RAG (Retrieval-Augmented Generation，检索增强生成) 是融合检索技术与生成模型的人工智能框架。
通俗地讲，就是在调用 GPT 模型时，先调用向量数据库，获取相关的数据，作为 GPT 的预设，然后调用 GPT 模型，返回结果。比如：我们系统中有一些专业术语的翻译，如果不告知 GPT，那么就是纯靠运气，它返回什么就是什么了，RAG 的作用就是先告诉 GPT 这些专业术语的翻译是什么，那么 GPT 就会按照这个翻译进行翻译，而不是纯靠运气。
MCP（Model Context Protocol，模型上下文协议），2024 年 11 月底，由 Anthropic 推出的一种开放标准，旨在统一大模型与外部数据源和工具之间的通信协议。MCP 的主要目的在于解决当前 AI 模型因数据孤岛限制而无法充分发挥潜力的难题，MCP 使得 AI 应用能够安全地访问和操作本地及远程数据，为 AI 应用提供了连接万物的接口。
通俗地讲，MCP 的作用就是让 GPT 模型在自身功能无法实现，可以调用提供给它的工具，比如：数据库、文件、API、工具等。MCP 协议规范了参数的格式，所有企业与大模型都遵守这个规范，那么就能随意切换任何模型使用，算是统一了标准。
RAG 是纯后端预设向量数据库，基本与前端无关。MCP 工具调用，前端需要在 SSE 中捕获到工具调用的指令时，处理工具调用，然后调用工具，带上工具的参数，再次调用 GPT，继续对话，直至完成对话结果。
/** 约定工具调用 flag，遇到 flag 时，再度调用接口，由接口去处理工具调用，返回结果，继续对话 */
具体实现方案可根据业务需求调整，通向罗马的路不止一条。
在日常工作中，确实很多 AI 工具能助力我们提效。
高度适配 AI 模型的编辑器，市面上也有几种。
总结: 总的来说，目前 AI 在将设计稿转成代码时，还是无法达到交付效果的，并且大型项目及维护，还是需要专业的技术人员。AI 并不是替代人员，而是让开发更高效，将重复率高、高复用的轮子共享。
其实前端还是不太好搭上模型的车，毕竟模型吃配置，直接在客户端运行模型很耗内存，所以只能通过服务端运行模型，然后通过 SSE 将结果返回给前端。但是服务端运行的成本随用户量递增，这时候如果能把小的模型放在前端，无疑为企业节省很多成本，那么这个思路就出现了。
比较经典的库了，支持在浏览器端运行神经网络模型，适用于图像分类、表单自动填充等场景。需注意模型体积需控制在合理范围内以避免页面加载延迟。
举个例子：
// 使用预训练的 MobileNet 实现图像分类
import * as mobilenet from '@tensorflow-models/mobilenet';
async function classifyImage(imageElement) {
// 加载模型（首次加载较慢）
const model = await mobilenet.load();
// 执行分类
const predictions = await model.classify(imageElement);
// 处理结果
return predictions.map(pred => ({
label: pred.className,
probability: (pred.probability * 100).toFixed(2) + '%'
}));
}
// 使用示例
const img = document.getElementById('product-image');
img.onload = async () => {
const results = await classifyImage(img);
console.log('识别结果:', results);
};
Web Worker 是 JavaScript 的一个内置对象，允许我们创建一个线程来执行任务，从而提高应用程序的性能。当我们在客户端加载模型，使用 Web Worker 时，模型会运行在另一个线程中，不会阻塞主线程，从而提高应用程序的性能。
const worker = new Worker('worker.js');
worker.postMessage({ type: 'init' });
worker.onmessage = (e) => {
if (e.data.predictions) {
console.log('Worker 返回结果:', e.data.predictions);
}
};
WebAssembly 是一种用于在浏览器中运行二进制代码的格式，它可以在浏览器中运行 JavaScript 代码，并且与 JavaScript 兼容。
可以将模型转换成 WebAssembly 格式，然后使用 WebAssembly 来运行模型。
还有些复杂运算 JS 不太适合去做，这时候很多前端选择 Rust 来编写，然后编译成 WebAssembly，然后通过 WebAssembly 来运行。
Rust 有插件可以直接生成 WebAssembly。
wasm-pack build --target web
import init, { add, fib } from './math_ops.js';
// 加载 ES 模块
async function run() {
await init(); // 初始化 Wasm 模块
// 调用加法函数
const sum = add(3, 5);
console.log('3 + 5 =', sum); // 输出：8
}
run();
其实工作中，一些事情让 AI 帮忙，能事半功倍。
比如使用 DeepSeek 或任何 GPT，让其生成一组测试数据，有的甚至能要求给 Excel。
以下是一个例子，比较符合现在 GPT 的 prompt：
你是一名测试工程师 你现在正在编写测试用例，请生成 2 条用户数据，包含姓名、手机号、邮箱、地址 以 JSON 格式返回
以下就是生成的结果：
[
{"姓名": "陈宇", "手机号": "13812345678", "邮箱": "[email protected]", "地址": "广州市天河区珠江新城华穗路 263 号"},
{"姓名": "林晓", "手机号": "1398754321", "邮箱": "[email protected]", "地址": "杭州市西湖区文三路 98 号东方通信大厦 15 层"}
]
可以利用 DeepSeek 生成 PPT 的大纲，然后使用 Kimi 来生成 PPT。
比如：让 DeepSeek 生成一个高级前端工程师年度述职的 PPT 大纲。
你是一名高级前端工程师 你这一年完成的工作内容有：Q1 1. 创建了 1000 个页面 Q2 1. 创建了 5000 个组件 Q3 1. 创建了 10000 个接口 Q4 1. 创建了 50000 个测试用例 你要生成一个年度述职 PPT 的大纲
然后再把这个大纲给 Kimi，Kimi 会生成 PPT。
可以利用 GPT 生成会议纪要，钉钉、飞书之类的办公软件都有会议纪要的功能。 视频会议还能通过纪要定位到视频播放位置。
如果一个公司要求全用 AI 对话式编码，那么这个公司就会失去代码维护的技能。业界常有观点认为用 AI 的话，2 个小时能做出一个什么样的程序出来，但是这个程序后续没法维护的，功能基本是什么样就什么样了。
就像我用 Trae，让他用 Rust 实现一个将 html 字符串转成 word 的功能，尽管向他提出问题后，都能不断去改，但是依然无法达到预期，而且它设计的代码，根本无法二次开发。
还有就是前端代码，如果直接从设计稿用 AI 转成代码，会用上 unocss，也无法从全局层面考虑问题，只能逐个组件考虑。这样的 AI 代码，如果被某公司的外包部门买回去，然后招开发进去维护，简直比裁缝机还惨。
如果要和 AI 对话，那么上下文很重要，如果上下文不够，那么 AI 就会重复回答，或者回答错误。之后根据上下文内容，AI 才能理解到语义，从而给出更好的答案。
但是很多用户都是全用一个窗口和 AI 对话，那么全部的上下文都会被保存，里面的内容太杂太乱，就会导致搜索困难，或者搜索结果不准确。所以我会根据问题的类型，开启新对话，而普通用户恐怕就不知道了。
上下文越多，对 tokens 的消耗就越高，然后对服务器的 CPU 计算，内存消耗，带宽的消耗，都会增加。
AI 对全球电力的消耗呈现快速增长趋势，预计到 2030 年数据中心用电量可能翻倍。大多企业都在自建数据中心，但是自建数据中心需要耗费大量电，而 AI 的计算能力也受电力限制。
AI 图形训练需要大量显存，导致现在英伟达的显卡价格已经比 CPU 高了，这也是需要能源消耗。
7B 参数模型：FP16 精度下需要约 14GB 显存，INT4 量化后可降至 3.5-4.9GB 显存。推荐配置为 NVIDIA RTX 3060(8GB 显存) 或更高，32GB 内存，1TB NVMe SSD 13B 参数模型：FP16 需要 26GB 显存，INT4 量化后约 6.5-9.1GB 显存。推荐 NVIDIA RTX 3090(24GB 显存) 或 A4000(16GB 显存)，64GB 内存 70B 参数模型：FP16 需要 140GB 显存，INT4 量化后约 35-49GB 显存。通常需要多 GPU 配置，如 2×NVIDIA A100 80GB 或 4×RTX 4090(通过 NVLink 并联)
DeepSeek 之所以能火，就是它在实现 8-90% 的能力基础上，对硬件的运用能力进行了优化，大幅降低了成本。
现在 AI 的发展，基本都是在软件层面突飞猛进，在硬件层面却很缓慢，宇树科技制造的机器人确实让人眼前一亮。我们不是希望重复枯燥的事情交给机器人去做，而内容创作，具有创造力的事情人类自己做，然而这个发展势头却恰恰相反。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online