前端转大模型：从工具接入到项目提效

原创于 2026-06-22 16:47:46 发布 · 10 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #前端转型 #大模型 #AI应用 #流式输出

> 分类：职业转型
> 账号：Java 技术那些事

摘要

以前做后台管理系统，我总觉得加个“生成按钮”就是智能化了。直到上个月负责内部知识库助手，我才发现大模型不只是调 API，更是重构交互逻辑。本文不聊底层原理，只讲前端怎么把 AI 能力变成用户体验，重点复盘流式输出的坑和多模态的资源管理，给想转型的同学一些真实的避坑指南。

前端的转型优势

文章插图 1

很多人觉得转大模型得先学 Python 或 PyTorch，其实对于前端来说，最大的杠杆是**交互感知**。

后端同学关注 Token 消耗和推理速度，而前端关注的是用户在那一秒的等待感。去年我们接了一个代码审查工具，起初直接返回 JSON 结果，用户抱怨“没反馈”。后来改成流式打字机效果，虽然后端负载没变，但用户满意度提升了。这就是前端最值钱的地方：你懂怎么在不确定性中建立确定性。

做 AI 应用，本质上是在处理“长连接 + 异步状态”。React 的状态管理机制其实跟 LLM 的 Context Window 很像，都是不断变化的状态流。你不需要成为算法专家，只要学会如何优雅地展示这些状态变化，你就已经超越了大多数只会调用 SDK 的开发者。

有个取舍点要注意：**别过度追求完美响应。** 早期为了追求低延迟，我们强行压缩了提示词长度，导致回答质量下降。后来我们加了个“优化提示词”的中间层，牺牲 200ms 换取回答可用性，这才是工程上的务实做法。

AI 应用交互模式

文章插图 2

现在的 AI 应用早就不是简单的 ChatBot 界面了。我在复盘项目时发现，**输入方式决定了 AI 的价值边界**。

如果只做对话框，用户容易陷入无意义的闲聊。真正好用的产品，是把 AI 嵌入到业务表单里。比如文档编辑器的侧边栏，或者表格数据的智能填充。这种模式下，前端不仅要接收文本，还要传递结构化数据。

这里有个踩坑经历：我们在做一个邮件撰写助手，起初让用户复制粘贴全文再让 AI 改。后来发现上下文太长会溢出。我们改成了“选中文本触发”，利用浏览器 Selection API 截取片段。这样既节省了 Token，又降低了用户的操作成本。

所以，转型的第一步不是背 Prompt 模板，而是思考：**在这个场景下，AI 是来做决策的，还是来辅助输入的？** 如果是前者，你需要设计更严谨的确认流程；如果是后者，你需要做好输入框的智能联想。

CSDN资料领取方式

流式输出

这是前端最容易翻车的地方。以前接口返回是 Promise.all，现在变成了 ReadableStream。

很多新手直接用 `fetch` 然后 `await`，结果等半天才显示第一个字，体验极差。正确的姿势是处理 `response.body.getReader()`。

下面是一个我在项目中实际使用的 Hook 封装，处理了断线重连和 Markdown 渲染冲突的问题：

// hooks/useLLMSSE.js
import { useState, useEffect, useRef } from 'react';

export function useLLMSSE(url, initialPrompt) {
  const [content, setContent] = useState('');
  const [status, setStatus] = useState('idle'); // idle, streaming, error

  useEffect(() => {
    let controller;

    const run = async () => {
      setStatus('streaming');
      try {
        const res = await fetch(url, {
          method: 'POST',
          body: JSON.stringify({ prompt: initialPrompt })
        });

        const reader = res.body.getReader();
        const decoder = new TextDecoder();

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          const chunk = decoder.decode(value);
          // 处理分片拼接，避免单词被切断
          setContent(prev => prev + chunk);
        }
      } catch (err) {
        setStatus('error');
      }
    };

    run();
    return () => { controller?.abort(); };
  }, [url, initialPrompt]);

  return { content, status };
}

这个代码看着简单，实战里坑不少。
1. **光标位置问题**：流式渲染 Markdown 时，编辑器光标乱跳。解决办法是尽量在 DOM 层面控制，或者用专门的流式 Markdown 库（如 `markdown-it-stream`）。
2. **防抖策略**：用户正在打字时不要发起请求，否则流式输出会和输入冲突。我们需要监听输入焦点。
3. **错误恢复**：网络抖动时，流断了怎么办？不能直接报错，要允许用户在界面上点击“重新生成”。