当前位置：首页 > news >正文

前端转大模型：Demo能跑就敢投简历？权限日志才是真门槛

news 2026/8/6 20:28:16

《大模型岗位变了，前端工程师该补的还是算法吗？》看起来是个大话题，但真落到项目里，常常就是几个具体选择。下面我尽量按实际开发时会遇到的问题来讲。

摘要

之前帮朋友看简历，前端背景，几个项目都是"接了个API，做了个聊天界面"，问他对权限管理和日志追踪怎么看，直接卡壳。我说这问题在面试里很常见，他说招聘JD上也没写啊。我看了下最近几个大模型岗位的JD，确实没明说，但"可观测性""权限控制""生产环境部署"这些词反复出现。

问题出在哪？前端习惯的是Demo思维，跑通就行。但大模型应用从Demo转向生产，最先卡住的就是权限、日志和可观测性。这不是算法问题，是工程问题。

前端的转型优势，别只盯着交互

前端转大模型，最大的优势不是会写React，而是对交互体验的敏感度。AI应用的交互模式和传统页面很不一样。

传统页面是确定性的，点击按钮，返回结果，页面刷新或局部更新。AI应用是概率性的，模型可能给你三种答案，可能中途失败，可能需要流式输出让用户看到"正在思考"的过程。

前端最擅长的流式输出，在大模型应用里是标配。但你见过几个前端项目里，正确处理了流式中断、错误恢复、超时降级？

另一个优势是多模态。AI应用不只是文本，还有图片、语音、文件上传。前端对这些有天然的理解，知道怎么处理压缩、预览、上传进度。

但优势归优势，不能只靠这个吃饭。企业招大模型工程师，不是招一个会调API的前端。

权限和日志，为什么比调API重要

我之前写爬虫转大模型的时候，提到过权限和日志的问题。前端转过来也一样，甚至更严重。

前端做项目，习惯了本地调试，API Key直接写在代码里，跑通就完事。大模型应用要上线，API Key泄露是小事，权限配置错误才是大问题。

举个例子，一个智能客服Agent，需要读取用户的历史订单。如果权限配置不对，可能泄露其他用户的订单信息。这不是模型的问题，是工程的问题。

日志也是。前端习惯了在控制台看输出，但生产环境里，你需要知道：

用户的输入是什么
模型返回了什么
中间调用了哪些工具
耗时多少，费用多少
哪里出错了

没有这些，上线就是盲飞。

可观测性也是一样。用户反馈"这个Agent不好用"，你怎么知道是模型的问题、工具的问题、还是权限的问题？

AI应用的交互模式，前端有天然的坑

流式输出是很多前端第一个接触的AI交互模式。用SSE（Server-Sent Events）或者fetch的readableStream，把模型输出逐字推给用户。

但真正做项目的时候，会发现很多细节。

比如流式中断。用户中途点"停止生成"，后端怎么知道？前端怎么知道流已经断了？很多Demo里没处理这个问题。

比如错误恢复。流式输出到一半，网络断了，怎么办？是重试，还是显示错误信息？前端怎么知道是网络问题还是模型问题？

比如多轮对话。流式输出是单轮的，多轮对话怎么管理状态？历史消息怎么传递？token怎么计算？

这些都是前端需要解决的问题，但招聘JD上不会写。

多模态体验，别只想着图片识别

多模态是大模型应用的另一个方向。前端对图片、语音的处理有经验，但AI应用的多模态和传统前端不太一样。

传统前端的多模态，是用户上传一张图片，你显示出来，或者用canvas处理一下。AI应用的多模态，是要把图片传给模型，让模型理解图片内容。

比如一个智能文档助手，用户上传PDF，模型需要理解文档内容，然后回答问题。前端需要处理文件上传、格式转换、预览展示，还要知道什么时候该传图片、什么时候该传文本。

再比如语音交互。前端需要处理录音、转写、播放，还要知道延迟是多少，什么时候该打断，什么时候该等待。

这些不是算法问题，是工程问题。前端需要理解整个流程，知道每个环节可能出现的问题。

招聘JD背后的能力要求

最近看了几个大模型应用的岗位，发现一个规律。JD上写的是"熟悉大模型应用开发"，但面试问的是"权限怎么配置"、"日志怎么记录"、"错误怎么处理"。

这不是JD的问题，是企业的需求问题。企业不需要一个会调API的人，需要一个能把Demo变成生产环境的人。

能力要求大致可以分成三层：

第一层是基础。会调API，会写前端页面，能跑通Demo。这是大多数转行的人的起点。

第二层是工程化。知道权限怎么配置，日志怎么记录，错误怎么处理。这是Demo和生产的分水岭。

第三层是可观测性。知道怎么监控应用状态，怎么分析用户行为，怎么优化体验。这是高级工程师的门槛。

学习顺序也很重要。不要一上来就学LangChain、LangGraph，先把基础的API调用、权限配置、日志记录搞明白。

作品集方向，别做玩具项目

前端转大模型，作品集很关键。但很多前端的作品集都是玩具项目，比如"AI聊天机器人"、"AI绘画工具"。

这些项目能展示你的前端能力，但展示不了你的工程能力。

一个更好的方向是做一个有权限管理、日志记录、错误处理的项目。比如一个智能客服系统，需要处理用户登录、权限控制、对话历史、工具调用、日志记录。

或者一个文档分析系统，需要处理文件上传、格式转换、模型调用、结果展示、错误恢复。

这些项目能展示你对工程化的理解，也能让你在面试时有话可说。

简历上不要写"接了个API，做了个聊天界面"。要写"实现了流式输出、权限控制、日志记录，处理了XX种错误场景"。

代码示例：流式输出的权限和日志

写一个简单的流式输出示例，展示权限和日志的处理。

// 流式输出处理，包含权限检查和日志记录 async function callModelWithStreaming({ userInput, userId, apiKey, onToken, onError }) { // 1. 权限检查：验证用户是否有调用权限 const hasPermission = await checkUserPermission(userId, 'model.call'); if (!hasPermission) { logPermissionDenied(userId, 'model.call'); onError(new Error('权限不足')); return; } // 2. 记录请求日志 const requestLog = { timestamp: new Date().toISOString(), userId, input: userInput, model: 'gpt-4', tokens: estimateTokens(userInput) }; logRequest(requestLog); try { // 3. 流式调用 const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }, body: JSON.stringify({ messages: [{ role: 'user', content: userInput }], stream: true }) }); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } // 4. 处理流式输出 const reader = response.body.getReader(); const decoder = new TextDecoder(); let buffer = ''; while (true) { const { done, value } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const lines = buffer.split('\n'); buffer = lines.pop(); // 保留不完整的行 for (const line of lines) { if (line.startsWith('data: ')) { const data = line.slice(6); if (data === '[DONE]') continue; try { const parsed = JSON.parse(data); const token = parsed.choices?.[0]?.delta?.content; if (token) { onToken(token); // 记录token日志 logTokenUsage(userId, token, requestLog.timestamp); } } catch (e) { // 解析错误，继续处理 } } } } // 5. 记录响应日志 logResponse({ ...requestLog, status: 'success', duration: Date.now() - new Date(requestLog.timestamp).getTime() }); } catch (error) { // 6. 记录错误日志 logError({ ...requestLog, error: error.message, timestamp: new Date().toISOString() }); onError(error); } }

这个示例展示了几个关键点：权限检查在调用前，日志记录贯穿整个过程，错误处理覆盖了各种情况。