前端不能直接运行大模型，必须通过fetch调用本地api服务（如ms-swift）来实现，因浏览器无法加载4–5gb的7b模型权重，且缺乏cuda支持，强行运行会导致卡死或内存溢出。
前端不能直接运行大模型，但可以调用本地或私有部署的推理服务生成内容——关键在于用标准 fetch 发送 OpenAI 兼容格式的请求，而非在浏览器里加载模型权重。
为什么必须走后端服务（哪怕它就在你本机）
7B 参数的量化模型（如 qwen-7b）最小也要 4–5GB 内存占用，浏览器 JS 引擎既不支持 CUDA 加速，也无法 mmap 加载大文件。强行尝试会导致页面卡死、内存溢出或 RangeError: Array buffer allocation failed 错误。
- 真正可行的路径是：HTML 页面 →
fetch到本地运行的 API 服务（如http://localhost:23333/v1/chat/completions）→ 服务端加载模型并返回结果 - 这个服务可以是
ms-swift、vLLM或llama.cpp启动的，只要它暴露/v1/chat/completions路径且响应结构匹配 OpenAI 格式 - 不要试图用
WebAssembly或ONNX.js跑 LLM —— 当前生态下，它们只适合极小模型（
fetch 请求怎么写才不出错
最简可用的 fetch 模板长这样，但细节极易翻车：
async function generateContent(prompt) {
const res = await fetch('http://localhost:23333/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_KEY' // 若服务启用了鉴权
},
body: JSON.stringify({
model: 'qwen-7b-chat',
messages: [{ role: 'user', content: prompt }],
max_tokens: 256,
temperature: 0.7
})
});
const data = await res.json();
return data.choices[0].message.content;
}
-
model字段必须与服务实际加载的模型名一致（查GET /v1/models确认），写错会返回404 Not Found或空响应 - 若服务没开 CORS，默认拒绝跨域请求；开发时可在启动命令加
--cors-origins="*"，上线务必改成具体域名 -
body中省略messages或格式不对（比如用prompt字段代替messages）会导致400 Bad Request - 流式响应（
stream: true）需用response.body.getReader()处理，不能直接res.json()
动态插入生成内容时 DOM 操作的坑
拿到 content 后，别直接往 innerHTML 里塞——尤其当模型输出含 HTML 标签时，可能触发 XSS 或破坏原有结构。
- 安全做法：用
textContent渲染纯文本，再用DOMPurify.sanitize()处理可信 HTML 片段 - 避免重复追加：多次调用
generateContent()后，用element.replaceChildren()替换旧内容，而不是appendChild() - 加载中状态必须显式控制：模型响应慢（2–5s 常见），要禁用按钮、显示 loading 动画，否则用户连续点击会发一堆并发请求
- 移动端注意：iOS Safari 对
fetch的 keep-alive 支持弱，频繁请求可能触发连接复用失败，建议加个简单重试逻辑
真正难的不是调通第一行 fetch，而是让生成内容稳定嵌入业务流程：输入校验、错误降级（比如 fallback 到静态文案）、token 截断处理、以及模型输出格式与前端模板的对齐——这些没法靠改一两个参数解决，得在每次 content 返回后做针对性清洗和适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
