大模型与智能体：从技术原理到前端开发实战入门指南

1次阅读

没有评论

共计 1846 个字符，预计需要花费 5 分钟才能阅读完成。

传统前端开发在实现复杂交互时面临三大挑战：

静态逻辑局限：业务规则硬编码导致需求变更需重新部署
自然交互缺失：表单式交互难以满足语音 / 语义化操作需求
上下文感知弱：无法根据用户历史行为动态调整界面

智能体技术带来新可能：某电商平台接入对话式搜索后，用户停留时长提升 40%，转化率提高 18%（数据来源：2023 Web Almanac）

Transformer 架构：自注意力机制处理长文本依赖

Prompt 工程：通过提示词控制输出格式与内容

# 结构化输出示例 prompt
""" 请以 JSON 格式返回包含以下字段的餐厅推荐：- name: 餐厅名称
- rating: 评分(1-5)
- reason: 推荐理由 """

ReAct 框架 ：推理(Reasoning)+ 行动(Action) 循环
工具集成：通过 API 调用实现计算 / 搜索等扩展能力

方案	延迟(ms)	适用场景
REST	300-500	简单问答
WebSocket	50-200	实时对话
Server-Sent	150-300	流式响应

Token 计数：限制输入长度节省 API 成本
流式渲染 ：采用分块传输编码(chunked) 提升感知速度
本地缓存：对确定性结果进行 IndexedDB 存储

// ChatComponent.jsx
import {useState, useRef, useEffect} from 'react';

const ChatComponent = ({apiKey}) => {const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const wsRef = useRef(null);

  // WebSocket 连接管理
  useEffect(() => {wsRef.current = new WebSocket(`wss://api.example.com/chat?key=${apiKey}`);

    wsRef.current.onmessage = (event) => {const data = JSON.parse(event.data);
      if(data.type === 'chunk') {setMessages(prev => [...prev.slice(0, -1), 
          {role: 'bot', content: prev[prev.length-1]?.content + data.text }]);
      }
    };

    return () => wsRef.current?.close();
  }, [apiKey]);

  const handleSend = async (userInput) => {setIsLoading(true);
    setMessages(prev => [...prev, 
      {role: 'user', content: userInput},
      {role: 'bot', content: ''}]);

    wsRef.current.send(JSON.stringify({
      prompt: userInput,
      max_tokens: 150
    }));
  };

  return (
    <div className="chat-container">
      {messages.map((msg, i) => (<div key={i} className={`message ${msg.role}`}>
          {msg.content}
        </div>
      ))}
      {isLoading && <div className="typing-indicator"> 思考中...</div>}
    </div>
  );
};