ChatGLM3-6B与React前端框架集成构建交互式AI应用界面想给你的React应用加上一个智能对话大脑吗让用户直接在网页上就能和AI助手聊天今天我们就来聊聊怎么把ChatGLM3-6B这个强大的开源大模型和React前端框架无缝集成在一起。你可能已经知道ChatGLM3-6B是个很不错的对话模型部署起来也不难。但光有后端模型还不够用户需要一个好看、好用的界面来和它交互。这就是React的用武之地了——它能帮你快速搭建一个现代化的聊天界面管理对话状态处理用户输入让整个体验流畅自然。这篇文章我会带你一步步走完整个集成过程从后端API搭建到前端组件设计再到状态管理和错误处理。即使你之前没怎么接触过大模型集成跟着做下来也能搞定。1. 先搞清楚我们要做什么在开始写代码之前我们先明确一下目标。我们要构建的是一个完整的AI对话应用前端用React后端用ChatGLM3-6B提供智能回复。整个架构大概是这样的用户在React前端输入问题前端把问题发给后端API后端调用ChatGLM3-6B生成回答再把回答返回给前端显示。听起来简单但里面有不少细节需要注意。为什么选择ReactReact的组件化开发模式特别适合构建这种交互复杂的应用。聊天界面可以拆分成消息列表、输入框、发送按钮等独立组件每个组件只管自己的事代码好维护也容易扩展。ChatGLM3-6B的优势在于它是个开源的中英双语模型对话流畅部署门槛相对较低而且支持工具调用、代码执行等高级功能。对于大多数应用场景来说它的能力已经足够了。2. 后端API服务搭建前端要和模型交互首先得有个后端服务。这里我们用Python的FastAPI框架因为它轻量、快速写起来也简单。2.1 环境准备和模型加载先确保你的环境准备好了。你需要Python 3.8或更高版本还有足够的GPU内存至少13GB来加载模型。如果显存不够可以考虑用4-bit量化这个后面会提到。# 创建项目目录 mkdir chatglm-react-app cd chatglm-react-app # 创建后端目录 mkdir backend cd backend # 创建虚拟环境可选但推荐 python -m venv venv source venv/bin/activate # Linux/Mac # 或者 venv\Scripts\activate # Windows # 安装依赖 pip install fastapi uvicorn transformers torch接下来写后端的主要代码。创建一个app.py文件from fastapi import FastAPI, HTTPException from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel from typing import List, Optional import torch from transformers import AutoTokenizer, AutoModel app FastAPI(titleChatGLM3-6B API) # 允许跨域请求这样前端才能访问 app.add_middleware( CORSMiddleware, allow_origins[http://localhost:3000], # React开发服务器地址 allow_credentialsTrue, allow_methods[*], allow_headers[*], ) # 定义请求和响应的数据结构 class Message(BaseModel): role: str # user 或 assistant content: str class ChatRequest(BaseModel): messages: List[Message] max_length: Optional[int] 2048 temperature: Optional[float] 0.7 top_p: Optional[float] 0.9 class ChatResponse(BaseModel): response: str history: List[List[str]] # 全局变量存储模型和tokenizer tokenizer None model None app.on_event(startup) async def load_model(): 启动时加载模型 global tokenizer, model print(正在加载ChatGLM3-6B模型...) try: # 加载tokenizer和模型 tokenizer AutoTokenizer.from_pretrained( THUDM/chatglm3-6b, trust_remote_codeTrue ) model AutoModel.from_pretrained( THUDM/chatglm3-6b, trust_remote_codeTrue, devicecuda if torch.cuda.is_available() else cpu ) # 设置为评估模式 model model.eval() print(模型加载完成) except Exception as e: print(f模型加载失败: {e}) raise app.post(/chat, response_modelChatResponse) async def chat_completion(request: ChatRequest): 处理聊天请求 if tokenizer is None or model is None: raise HTTPException(status_code503, detail模型未加载完成) try: # 将消息列表转换为ChatGLM3需要的格式 query request.messages[-1].content # 最后一条消息是用户的最新输入 # 构建历史对话格式[[用户消息1, 助手回复1], [用户消息2, 助手回复2], ...] history [] temp_history [] for i in range(0, len(request.messages) - 1, 2): if i 1 len(request.messages): user_msg request.messages[i] assistant_msg request.messages[i 1] if user_msg.role user and assistant_msg.role assistant: temp_history.append([user_msg.content, assistant_msg.content]) history temp_history # 调用模型生成回复 response, updated_history model.chat( tokenizer, query, historyhistory, max_lengthrequest.max_length, temperaturerequest.temperature, top_prequest.top_p ) return ChatResponse( responseresponse, historyupdated_history ) except Exception as e: raise HTTPException(status_code500, detailf生成回复时出错: {str(e)}) app.get(/health) async def health_check(): 健康检查端点 return { status: healthy, model_loaded: model is not None, device: cuda if torch.cuda.is_available() else cpu }这个后端服务做了几件事启动时自动加载ChatGLM3-6B模型提供/chat接口处理聊天请求支持多轮对话历史可以调整生成参数长度、温度等添加了跨域支持方便前端调用2.2 处理显存不足的情况如果你的GPU显存不够13GB可以用量化版本来减少内存占用。修改模型加载部分# 4-bit量化版本显存需求降到约6GB model AutoModel.from_pretrained( THUDM/chatglm3-6b, trust_remote_codeTrue, devicecuda ).quantize(4).cuda()或者用CPU运行速度会慢很多model AutoModel.from_pretrained( THUDM/chatglm3-6b, trust_remote_codeTrue ).float() # 用CPU运行2.3 启动后端服务保存好代码后启动服务cd backend uvicorn app:app --host 0.0.0.0 --port 8000 --reload看到模型加载完成的提示就说明后端准备好了。你可以用浏览器访问http://localhost:8000/docs看看API文档或者用curl测试一下curl -X POST http://localhost:8000/chat \ -H Content-Type: application/json \ -d { messages: [ {role: user, content: 你好介绍一下你自己} ] }3. React前端开发环境搭建后端跑起来了现在来搞前端。我们用Create React App快速搭建项目。3.1 创建React应用# 回到项目根目录 cd .. # 创建React应用 npx create-react-app frontend cd frontend # 安装一些有用的依赖 npm install axios mui/material mui/icons-material emotion/react emotion/styledaxios用来发HTTP请求mui/material是Material-UI组件库能让界面好看一些。当然你也可以用其他UI库或者自己写样式。3.2 项目结构规划好的项目结构能让代码更清晰。我建议这样组织frontend/ ├── src/ │ ├── components/ │ │ ├── ChatInterface.jsx │ │ ├── MessageList.jsx │ │ ├── InputArea.jsx │ │ └── LoadingIndicator.jsx │ ├── services/ │ │ └── api.js │ ├── hooks/ │ │ └── useChat.js │ ├── utils/ │ │ └── helpers.js │ ├── App.js │ ├── App.css │ └── index.js └── package.json4. 核心组件设计与实现现在开始写React组件。我们从最核心的聊天界面开始。4.1 消息列表组件先创建一个显示消息的组件。每个消息要有发送者头像、内容、时间戳。// src/components/MessageList.jsx import React from react; import { Box, List, ListItem, ListItemAvatar, Avatar, ListItemText, Typography, Paper } from mui/material; import { Person as UserIcon, SmartToy as BotIcon } from mui/icons-material; const MessageList ({ messages }) { return ( Box sx{{ flex: 1, overflow: auto, padding: 2, backgroundColor: #f5f5f5 }} List {messages.map((message, index) ( ListItem key{index} alignItemsflex-start sx{{ justifyContent: message.role user ? flex-end : flex-start, marginBottom: 2 }} {message.role assistant ( ListItemAvatar Avatar sx{{ bgcolor: primary.main }} BotIcon / /Avatar /ListItemAvatar )} Paper elevation{1} sx{{ maxWidth: 70%, padding: 2, backgroundColor: message.role user ? #1976d2 : white, color: message.role user ? white : text.primary, borderRadius: 2, marginLeft: message.role user ? auto : 0, marginRight: message.role user ? 0 : auto }} Typography variantbody1 {message.content} /Typography Typography variantcaption sx{{ display: block, textAlign: right, marginTop: 1, opacity: 0.7, color: message.role user ? rgba(255,255,255,0.7) : text.secondary }} {new Date(message.timestamp).toLocaleTimeString([], { hour: 2-digit, minute: 2-digit })} /Typography /Paper {message.role user ( ListItemAvatar sx{{ marginLeft: 2 }} Avatar sx{{ bgcolor: secondary.main }} UserIcon / /Avatar /ListItemAvatar )} /ListItem ))} /List /Box ); }; export default MessageList;这个组件负责显示对话历史。用户消息靠右显示蓝色气泡AI消息靠左显示白色气泡看起来就像真实的聊天应用。4.2 输入区域组件用户需要地方输入问题。这个组件要处理文本输入、发送按钮还有可能的多行输入。// src/components/InputArea.jsx import React, { useState } from react; import { Box, TextField, IconButton, CircularProgress, Tooltip } from mui/material; import { Send as SendIcon } from mui/icons-material; const InputArea ({ onSendMessage, isLoading }) { const [inputText, setInputText] useState(); const [isComposing, setIsComposing] useState(false); const handleSend () { if (inputText.trim() !isLoading) { onSendMessage(inputText.trim()); setInputText(); } }; const handleKeyDown (e) { // 按Enter发送但如果是中文输入法正在组词就不发送 if (e.key Enter !e.shiftKey !isComposing) { e.preventDefault(); handleSend(); } }; return ( Box sx{{ padding: 2, borderTop: 1px solid #e0e0e0, backgroundColor: white }} Box sx{{ display: flex, alignItems: flex-end }} TextField fullWidth multiline maxRows{4} value{inputText} onChange{(e) setInputText(e.target.value)} onKeyDown{handleKeyDown} onCompositionStart{() setIsComposing(true)} onCompositionEnd{() setIsComposing(false)} placeholder输入你的问题...按Enter发送ShiftEnter换行 variantoutlined disabled{isLoading} sx{{ marginRight: 1 }} / Tooltip title发送消息 span IconButton colorprimary onClick{handleSend} disabled{!inputText.trim() || isLoading} sx{{ height: 56, width: 56, backgroundColor: primary.main, color: white, :hover: { backgroundColor: primary.dark }, .Mui-disabled: { backgroundColor: action.disabledBackground } }} {isLoading ? ( CircularProgress size{24} colorinherit / ) : ( SendIcon / )} /IconButton /span /Tooltip /Box Typography variantcaption colortext.secondary sx{{ display: block, marginTop: 1 }} 支持多轮对话AI会记住之前的聊天内容 /Typography /Box ); }; export default InputArea;输入框支持多行文本按Enter发送ShiftEnter换行。还考虑了中文输入法的兼容性。4.3 加载指示器AI生成回复需要时间得给用户一个等待提示。// src/components/LoadingIndicator.jsx import React from react; import { Box, Typography, CircularProgress } from mui/material; const LoadingIndicator () { return ( Box sx{{ display: flex, alignItems: center, justifyContent: center, padding: 2, color: text.secondary }} CircularProgress size{20} sx{{ marginRight: 1 }} / Typography variantbody2 AI正在思考中... /Typography /Box ); }; export default LoadingIndicator;4.4 API服务层把和后端的通信封装成一个独立的服务这样组件里就不用直接写HTTP请求了。// src/services/api.js import axios from axios; const API_BASE_URL http://localhost:8000; const api axios.create({ baseURL: API_BASE_URL, timeout: 30000, // 30秒超时大模型生成可能需要时间 headers: { Content-Type: application/json, } }); export const chatAPI { // 发送聊天消息 async sendMessage(messages, options {}) { try { const response await api.post(/chat, { messages, max_length: options.maxLength || 2048, temperature: options.temperature || 0.7, top_p: options.topP || 0.9 }); return response.data; } catch (error) { console.error(API请求失败:, error); throw new Error( error.response?.data?.detail || error.message || 请求失败请检查网络连接和后端服务 ); } }, // 检查服务健康状态 async checkHealth() { try { const response await api.get(/health); return response.data; } catch (error) { console.error(健康检查失败:, error); return { status: unhealthy, model_loaded: false }; } } }; export default api;5. 状态管理与自定义HookReact应用的状态管理很重要。我们用自定义Hook来管理聊天状态。5.1 创建useChat Hook// src/hooks/useChat.js import { useState, useCallback, useRef } from react; import { chatAPI } from ../services/api; const useChat () { const [messages, setMessages] useState([]); const [isLoading, setIsLoading] useState(false); const [error, setError] useState(null); const abortControllerRef useRef(null); // 发送消息 const sendMessage useCallback(async (content, options {}) { if (!content.trim()) return; // 取消之前的请求如果有 if (abortControllerRef.current) { abortControllerRef.current.abort(); } // 创建新的AbortController abortControllerRef.current new AbortController(); // 添加用户消息 const userMessage { role: user, content: content.trim(), timestamp: new Date().toISOString() }; setMessages(prev [...prev, userMessage]); setIsLoading(true); setError(null); try { // 准备发送给API的消息格式 const apiMessages [ ...messages.map(msg ({ role: msg.role, content: msg.content })), { role: user, content: content.trim() } ]; // 调用API const response await chatAPI.sendMessage(apiMessages, { signal: abortControllerRef.current.signal, ...options }); // 添加AI回复 const assistantMessage { role: assistant, content: response.response, timestamp: new Date().toISOString() }; setMessages(prev [...prev, assistantMessage]); } catch (err) { // 如果是用户取消的请求不显示错误 if (err.name AbortError) { console.log(请求被取消); return; } setError(err.message || 发送消息失败); console.error(发送消息失败:, err); } finally { setIsLoading(false); abortControllerRef.current null; } }, [messages]); // 清空对话 const clearMessages useCallback(() { setMessages([]); setError(null); // 取消进行中的请求 if (abortControllerRef.current) { abortControllerRef.current.abort(); abortControllerRef.current null; } setIsLoading(false); }, []); // 重试最后一条消息 const retryLastMessage useCallback(() { if (messages.length 0) return; const lastUserMessage [...messages] .reverse() .find(msg msg.role user); if (lastUserMessage) { // 移除最后一条用户消息和之后的AI回复如果有 const lastUserIndex messages.lastIndexOf(lastUserMessage); const newMessages messages.slice(0, lastUserIndex); setMessages(newMessages); // 重新发送 setTimeout(() { sendMessage(lastUserMessage.content); }, 100); } }, [messages, sendMessage]); return { messages, isLoading, error, sendMessage, clearMessages, retryLastMessage, setError }; }; export default useChat;这个Hook封装了所有聊天相关的逻辑发送消息、管理状态、错误处理、取消请求等。组件里用起来会很干净。6. 主聊天界面组件把前面做的组件和Hook组合起来就是完整的聊天界面了。// src/components/ChatInterface.jsx import React from react; import { Box, Container, Paper, Typography, Button, Alert, Snackbar, IconButton } from mui/material; import { Clear as ClearIcon, Refresh as RefreshIcon } from mui/icons-material; import MessageList from ./MessageList; import InputArea from ./InputArea; import LoadingIndicator from ./LoadingIndicator; import useChat from ../hooks/useChat; const ChatInterface () { const { messages, isLoading, error, sendMessage, clearMessages, retryLastMessage, setError } useChat(); const handleCloseError () { setError(null); }; return ( Container maxWidthmd sx{{ height: 100vh, padding: 0 }} Paper elevation{3} sx{{ height: 100%, display: flex, flexDirection: column, borderRadius: 2, overflow: hidden }} {/* 标题栏 */} Box sx{{ padding: 2, backgroundColor: primary.main, color: white, display: flex, justifyContent: space-between, alignItems: center }} Typography varianth5 componenth1 ChatGLM3-6B 智能助手 /Typography Box Button variantoutlined sizesmall onClick{retryLastMessage} disabled{messages.length 0 || isLoading} startIcon{RefreshIcon /} sx{{ marginRight: 1, color: white, borderColor: white, :hover: { borderColor: white, backgroundColor: rgba(255,255,255,0.1) } }} 重试 /Button Button variantoutlined sizesmall onClick{clearMessages} disabled{messages.length 0 || isLoading} startIcon{ClearIcon /} sx{{ color: white, borderColor: white, :hover: { borderColor: white, backgroundColor: rgba(255,255,255,0.1) } }} 清空 /Button /Box /Box {/* 错误提示 */} Snackbar open{!!error} autoHideDuration{6000} onClose{handleCloseError} anchorOrigin{{ vertical: top, horizontal: center }} Alert severityerror onClose{handleCloseError} sx{{ width: 100% }} {error} /Alert /Snackbar {/* 消息列表区域 */} Box sx{{ flex: 1, overflow: hidden }} {messages.length 0 ? ( Box sx{{ height: 100%, display: flex, flexDirection: column, alignItems: center, justifyContent: center, padding: 4, textAlign: center, color: text.secondary }} Typography varianth6 gutterBottom 欢迎使用 ChatGLM3-6B 智能助手 /Typography Typography variantbody1 paragraph 这是一个基于开源大模型的对话应用你可以问我任何问题。 /Typography Typography variantbody2 试试问我用JavaScript写一个计算器 或者 解释一下什么是机器学习 /Typography /Box ) : ( MessageList messages{messages} / )} {/* 加载指示器 */} {isLoading LoadingIndicator /} /Box {/* 输入区域 */} InputArea onSendMessage{sendMessage} isLoading{isLoading} / /Paper /Container ); }; export default ChatInterface;这个组件把所有的部分组合在一起标题栏、消息列表、输入框、控制按钮。界面看起来专业用起来也顺手。7. 应用入口和样式最后把ChatInterface放到App组件里再加点样式。// src/App.js import React, { useEffect, useState } from react; import { ThemeProvider, createTheme } from mui/material/styles; import CssBaseline from mui/material/CssBaseline; import { Box, CircularProgress, Alert } from mui/material; import ChatInterface from ./components/ChatInterface; import { chatAPI } from ./services/api; import ./App.css; // 创建主题 const theme createTheme({ palette: { primary: { main: #1976d2, }, secondary: { main: #dc004e, }, }, }); function App() { const [isBackendReady, setIsBackendReady] useState(false); const [backendError, setBackendError] useState(null); useEffect(() { // 检查后端服务是否就绪 const checkBackend async () { try { const health await chatAPI.checkHealth(); if (health.status healthy health.model_loaded) { setIsBackendReady(true); setBackendError(null); } else { setBackendError(后端服务未就绪或模型未加载); } } catch (error) { setBackendError(无法连接到后端服务请确保后端正在运行); console.error(后端连接失败:, error); } }; checkBackend(); // 每30秒检查一次 const interval setInterval(checkBackend, 30000); return () clearInterval(interval); }, []); if (backendError) { return ( ThemeProvider theme{theme} CssBaseline / Box sx{{ display: flex, flexDirection: column, alignItems: center, justifyContent: center, height: 100vh, padding: 4 }} Alert severityerror sx{{ marginBottom: 2, maxWidth: 600 }} {backendError} /Alert Typography variantbody1 paragraph 请确保 /Typography Typography variantbody2 componentdiv sx{{ textAlign: left }} 1. 后端服务已启动运行在 http://localhost:8000br / 2. ChatGLM3-6B模型已正确加载br / 3. 网络连接正常 /Typography /Box /ThemeProvider ); } if (!isBackendReady) { return ( ThemeProvider theme{theme} CssBaseline / Box sx{{ display: flex, flexDirection: column, alignItems: center, justifyContent: center, height: 100vh }} CircularProgress size{60} sx{{ marginBottom: 3 }} / Typography varianth6 正在初始化ChatGLM3-6B服务... /Typography Typography variantbody2 sx{{ marginTop: 2, color: text.secondary }} 首次加载模型可能需要几分钟时间 /Typography /Box /ThemeProvider ); } return ( ThemeProvider theme{theme} CssBaseline / ChatInterface / /ThemeProvider ); } export default App;再加点全局样式/* src/App.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f0f2f5; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace; } /* 自定义滚动条样式 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; }8. 启动和测试所有代码都写好了现在来启动应用。# 启动前端在frontend目录下 cd frontend npm start前端会在 http://localhost:3000 启动。确保后端也在运行http://localhost:8000。打开浏览器你应该能看到一个漂亮的聊天界面。试试问几个问题你好介绍一下你自己用Python写一个快速排序算法解释一下量子计算的基本原理界面会显示对话历史AI回复时会有加载动画。你可以清空对话也可以重试上一条消息。9. 进阶功能和优化建议基础功能已经完成了但实际项目中可能还需要更多功能。这里给你一些扩展思路9.1 流式输出现在的实现是等AI生成完整回复后再显示用户要等挺久的。可以改成流式输出让回复一个字一个字地显示出来。后端需要支持Server-Sent EventsSSE或WebSocket# 后端添加流式输出支持 from sse_starlette.sse import EventSourceResponse import asyncio app.post(/chat/stream) async def chat_stream(request: ChatRequest): 流式聊天接口 # ... 参数验证和模型调用 ... async def event_generator(): # 模拟流式输出 full_response # 这里应该是模型的实际流式输出 for chunk in some_streaming_function(query, history): full_response chunk yield { event: message, data: json.dumps({content: chunk, finished: False}) } await asyncio.sleep(0.01) # 控制输出速度 yield { event: message, data: json.dumps({content: , finished: True}) } return EventSourceResponse(event_generator())前端用EventSource接收// 前端流式接收 const eventSource new EventSource(/chat/stream?query${encodeURIComponent(query)}); eventSource.onmessage (event) { const data JSON.parse(event.data); if (data.finished) { eventSource.close(); } else { // 逐步更新消息内容 updateMessageContent(data.content); } };9.2 对话历史管理可以添加本地存储让用户刷新页面后还能看到之前的对话。// 在useChat Hook中添加本地存储 const useChat () { const [messages, setMessages] useState(() { // 从localStorage加载历史记录 const saved localStorage.getItem(chat_history); return saved ? JSON.parse(saved) : []; }); // 保存到localStorage useEffect(() { localStorage.setItem(chat_history, JSON.stringify(messages)); }, [messages]); // ... 其他代码 ... };9.3 参数调整面板让用户可以调整生成参数比如温度、最大长度等。// 参数调整组件 const ParameterPanel ({ parameters, onParametersChange }) { return ( Box sx{{ padding: 2, border: 1px solid #e0e0e0, borderRadius: 1 }} Typography variantsubtitle2 gutterBottom 生成参数 /Typography Box sx{{ marginBottom: 2 }} Typography variantcaption displayblock 温度 (Temperature): {parameters.temperature} /Typography Slider value{parameters.temperature} onChange{(e, value) onParametersChange({ ...parameters, temperature: value })} min{0} max{2} step{0.1} valueLabelDisplayauto / Typography variantcaption colortext.secondary 值越高越有创意值越低越保守 /Typography /Box {/* 其他参数... */} /Box ); };9.4 错误处理和重试机制现在的错误处理还比较简单可以做得更完善// 增强的错误处理 const sendMessage useCallback(async (content, options {}) { // ... 之前的代码 ... try { const response await chatAPI.sendMessage(apiMessages, { signal: abortControllerRef.current.signal, ...options }); // 成功处理... } catch (err) { if (err.name AbortError) { return; } // 根据错误类型显示不同的提示 if (err.message.includes(网络)) { setError(网络连接失败请检查网络设置); } else if (err.message.includes(超时)) { setError(请求超时可能是模型生成时间过长请重试); } else if (err.message.includes(模型)) { setError(模型服务异常请检查后端服务); } else { setError(发送失败: ${err.message}); } // 自动重试逻辑 if (options.retryCount 3) { setTimeout(() { sendMessage(content, { ...options, retryCount: (options.retryCount || 0) 1 }); }, 2000); } } }, [messages]);10. 部署和优化开发完成后你可能想把应用部署到服务器上。这里有几个建议10.1 生产环境部署后端优化使用Gunicorn或Uvicorn workers提高并发添加Nginx反向代理配置HTTPS证书设置合理的超时时间# 生产环境启动命令 gunicorn -w 4 -k uvicorn.workers.UvicornWorker app:app --bind 0.0.0.0:8000 --timeout 120前端构建npm run build然后把build目录下的文件放到Nginx或CDN上。10.2 性能优化模型量化用4-bit或8-bit量化减少显存占用缓存缓存常见问题的回答批处理如果有多个用户可以考虑批处理请求前端优化虚拟滚动处理大量消息图片懒加载代码分割10.3 安全性考虑API密钥如果对外开放需要添加认证输入验证防止注入攻击速率限制防止滥用内容过滤过滤不当内容11. 总结走完这一趟你应该已经掌握了把ChatGLM3-6B集成到React应用的基本方法。我们从后端API搭建开始一步步实现了前端的所有组件包括消息列表、输入框、状态管理等等。实际做项目的时候你可能还会遇到各种具体问题比如性能优化、错误处理、用户体验改进等等。但有了这个基础框架大部分问题都能找到解决思路。React的组件化开发确实很适合这种交互复杂的应用你可以很方便地添加新功能比如文件上传、语音输入、对话导出等等。ChatGLM3-6B的能力也足够强大能满足大多数对话场景的需求。如果你在集成过程中遇到问题或者有新的想法要尝试欢迎继续探索。技术总是在不断进步保持学习和实践的态度最重要。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
ChatGLM3-6B与React前端框架集成
发布时间：2026/5/23 9:49:23
ChatGLM3-6B与React前端框架集成构建交互式AI应用界面想给你的React应用加上一个智能对话大脑吗让用户直接在网页上就能和AI助手聊天今天我们就来聊聊怎么把ChatGLM3-6B这个强大的开源大模型和React前端框架无缝集成在一起。你可能已经知道ChatGLM3-6B是个很不错的对话模型部署起来也不难。但光有后端模型还不够用户需要一个好看、好用的界面来和它交互。这就是React的用武之地了——它能帮你快速搭建一个现代化的聊天界面管理对话状态处理用户输入让整个体验流畅自然。这篇文章我会带你一步步走完整个集成过程从后端API搭建到前端组件设计再到状态管理和错误处理。即使你之前没怎么接触过大模型集成跟着做下来也能搞定。1. 先搞清楚我们要做什么在开始写代码之前我们先明确一下目标。我们要构建的是一个完整的AI对话应用前端用React后端用ChatGLM3-6B提供智能回复。整个架构大概是这样的用户在React前端输入问题前端把问题发给后端API后端调用ChatGLM3-6B生成回答再把回答返回给前端显示。听起来简单但里面有不少细节需要注意。为什么选择ReactReact的组件化开发模式特别适合构建这种交互复杂的应用。聊天界面可以拆分成消息列表、输入框、发送按钮等独立组件每个组件只管自己的事代码好维护也容易扩展。ChatGLM3-6B的优势在于它是个开源的中英双语模型对话流畅部署门槛相对较低而且支持工具调用、代码执行等高级功能。对于大多数应用场景来说它的能力已经足够了。2. 后端API服务搭建前端要和模型交互首先得有个后端服务。这里我们用Python的FastAPI框架因为它轻量、快速写起来也简单。2.1 环境准备和模型加载先确保你的环境准备好了。你需要Python 3.8或更高版本还有足够的GPU内存至少13GB来加载模型。如果显存不够可以考虑用4-bit量化这个后面会提到。# 创建项目目录 mkdir chatglm-react-app cd chatglm-react-app # 创建后端目录 mkdir backend cd backend # 创建虚拟环境可选但推荐 python -m venv venv source venv/bin/activate # Linux/Mac # 或者 venv\Scripts\activate # Windows # 安装依赖 pip install fastapi uvicorn transformers torch接下来写后端的主要代码。创建一个app.py文件from fastapi import FastAPI, HTTPException from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel from typing import List, Optional import torch from transformers import AutoTokenizer, AutoModel app FastAPI(titleChatGLM3-6B API) # 允许跨域请求这样前端才能访问 app.add_middleware( CORSMiddleware, allow_origins[http://localhost:3000], # React开发服务器地址 allow_credentialsTrue, allow_methods[*], allow_headers[*], ) # 定义请求和响应的数据结构 class Message(BaseModel): role: str # user 或 assistant content: str class ChatRequest(BaseModel): messages: List[Message] max_length: Optional[int] 2048 temperature: Optional[float] 0.7 top_p: Optional[float] 0.9 class ChatResponse(BaseModel): response: str history: List[List[str]] # 全局变量存储模型和tokenizer tokenizer None model None app.on_event(startup) async def load_model(): 启动时加载模型 global tokenizer, model print(正在加载ChatGLM3-6B模型...) try: # 加载tokenizer和模型 tokenizer AutoTokenizer.from_pretrained( THUDM/chatglm3-6b, trust_remote_codeTrue ) model AutoModel.from_pretrained( THUDM/chatglm3-6b, trust_remote_codeTrue, devicecuda if torch.cuda.is_available() else cpu ) # 设置为评估模式 model model.eval() print(模型加载完成) except Exception as e: print(f模型加载失败: {e}) raise app.post(/chat, response_modelChatResponse) async def chat_completion(request: ChatRequest): 处理聊天请求 if tokenizer is None or model is None: raise HTTPException(status_code503, detail模型未加载完成) try: # 将消息列表转换为ChatGLM3需要的格式 query request.messages[-1].content # 最后一条消息是用户的最新输入 # 构建历史对话格式[[用户消息1, 助手回复1], [用户消息2, 助手回复2], ...] history [] temp_history [] for i in range(0, len(request.messages) - 1, 2): if i 1 len(request.messages): user_msg request.messages[i] assistant_msg request.messages[i 1] if user_msg.role user and assistant_msg.role assistant: temp_history.append([user_msg.content, assistant_msg.content]) history temp_history # 调用模型生成回复 response, updated_history model.chat( tokenizer, query, historyhistory, max_lengthrequest.max_length, temperaturerequest.temperature, top_prequest.top_p ) return ChatResponse( responseresponse, historyupdated_history ) except Exception as e: raise HTTPException(status_code500, detailf生成回复时出错: {str(e)}) app.get(/health) async def health_check(): 健康检查端点 return { status: healthy, model_loaded: model is not None, device: cuda if torch.cuda.is_available() else cpu }这个后端服务做了几件事启动时自动加载ChatGLM3-6B模型提供/chat接口处理聊天请求支持多轮对话历史可以调整生成参数长度、温度等添加了跨域支持方便前端调用2.2 处理显存不足的情况如果你的GPU显存不够13GB可以用量化版本来减少内存占用。修改模型加载部分# 4-bit量化版本显存需求降到约6GB model AutoModel.from_pretrained( THUDM/chatglm3-6b, trust_remote_codeTrue, devicecuda ).quantize(4).cuda()或者用CPU运行速度会慢很多model AutoModel.from_pretrained( THUDM/chatglm3-6b, trust_remote_codeTrue ).float() # 用CPU运行2.3 启动后端服务保存好代码后启动服务cd backend uvicorn app:app --host 0.0.0.0 --port 8000 --reload看到模型加载完成的提示就说明后端准备好了。你可以用浏览器访问http://localhost:8000/docs看看API文档或者用curl测试一下curl -X POST http://localhost:8000/chat \ -H Content-Type: application/json \ -d { messages: [ {role: user, content: 你好介绍一下你自己} ] }3. React前端开发环境搭建后端跑起来了现在来搞前端。我们用Create React App快速搭建项目。3.1 创建React应用# 回到项目根目录 cd .. # 创建React应用 npx create-react-app frontend cd frontend # 安装一些有用的依赖 npm install axios mui/material mui/icons-material emotion/react emotion/styledaxios用来发HTTP请求mui/material是Material-UI组件库能让界面好看一些。当然你也可以用其他UI库或者自己写样式。3.2 项目结构规划好的项目结构能让代码更清晰。我建议这样组织frontend/ ├── src/ │ ├── components/ │ │ ├── ChatInterface.jsx │ │ ├── MessageList.jsx │ │ ├── InputArea.jsx │ │ └── LoadingIndicator.jsx │ ├── services/ │ │ └── api.js │ ├── hooks/ │ │ └── useChat.js │ ├── utils/ │ │ └── helpers.js │ ├── App.js │ ├── App.css │ └── index.js └── package.json4. 核心组件设计与实现现在开始写React组件。我们从最核心的聊天界面开始。4.1 消息列表组件先创建一个显示消息的组件。每个消息要有发送者头像、内容、时间戳。// src/components/MessageList.jsx import React from react; import { Box, List, ListItem, ListItemAvatar, Avatar, ListItemText, Typography, Paper } from mui/material; import { Person as UserIcon, SmartToy as BotIcon } from mui/icons-material; const MessageList ({ messages }) { return ( Box sx{{ flex: 1, overflow: auto, padding: 2, backgroundColor: #f5f5f5 }} List {messages.map((message, index) ( ListItem key{index} alignItemsflex-start sx{{ justifyContent: message.role user ? flex-end : flex-start, marginBottom: 2 }} {message.role assistant ( ListItemAvatar Avatar sx{{ bgcolor: primary.main }} BotIcon / /Avatar /ListItemAvatar )} Paper elevation{1} sx{{ maxWidth: 70%, padding: 2, backgroundColor: message.role user ? #1976d2 : white, color: message.role user ? white : text.primary, borderRadius: 2, marginLeft: message.role user ? auto : 0, marginRight: message.role user ? 0 : auto }} Typography variantbody1 {message.content} /Typography Typography variantcaption sx{{ display: block, textAlign: right, marginTop: 1, opacity: 0.7, color: message.role user ? rgba(255,255,255,0.7) : text.secondary }} {new Date(message.timestamp).toLocaleTimeString([], { hour: 2-digit, minute: 2-digit })} /Typography /Paper {message.role user ( ListItemAvatar sx{{ marginLeft: 2 }} Avatar sx{{ bgcolor: secondary.main }} UserIcon / /Avatar /ListItemAvatar )} /ListItem ))} /List /Box ); }; export default MessageList;这个组件负责显示对话历史。用户消息靠右显示蓝色气泡AI消息靠左显示白色气泡看起来就像真实的聊天应用。4.2 输入区域组件用户需要地方输入问题。这个组件要处理文本输入、发送按钮还有可能的多行输入。// src/components/InputArea.jsx import React, { useState } from react; import { Box, TextField, IconButton, CircularProgress, Tooltip } from mui/material; import { Send as SendIcon } from mui/icons-material; const InputArea ({ onSendMessage, isLoading }) { const [inputText, setInputText] useState(); const [isComposing, setIsComposing] useState(false); const handleSend () { if (inputText.trim() !isLoading) { onSendMessage(inputText.trim()); setInputText(); } }; const handleKeyDown (e) { // 按Enter发送但如果是中文输入法正在组词就不发送 if (e.key Enter !e.shiftKey !isComposing) { e.preventDefault(); handleSend(); } }; return ( Box sx{{ padding: 2, borderTop: 1px solid #e0e0e0, backgroundColor: white }} Box sx{{ display: flex, alignItems: flex-end }} TextField fullWidth multiline maxRows{4} value{inputText} onChange{(e) setInputText(e.target.value)} onKeyDown{handleKeyDown} onCompositionStart{() setIsComposing(true)} onCompositionEnd{() setIsComposing(false)} placeholder输入你的问题...按Enter发送ShiftEnter换行 variantoutlined disabled{isLoading} sx{{ marginRight: 1 }} / Tooltip title发送消息 span IconButton colorprimary onClick{handleSend} disabled{!inputText.trim() || isLoading} sx{{ height: 56, width: 56, backgroundColor: primary.main, color: white, :hover: { backgroundColor: primary.dark }, .Mui-disabled: { backgroundColor: action.disabledBackground } }} {isLoading ? ( CircularProgress size{24} colorinherit / ) : ( SendIcon / )} /IconButton /span /Tooltip /Box Typography variantcaption colortext.secondary sx{{ display: block, marginTop: 1 }} 支持多轮对话AI会记住之前的聊天内容 /Typography /Box ); }; export default InputArea;输入框支持多行文本按Enter发送ShiftEnter换行。还考虑了中文输入法的兼容性。4.3 加载指示器AI生成回复需要时间得给用户一个等待提示。// src/components/LoadingIndicator.jsx import React from react; import { Box, Typography, CircularProgress } from mui/material; const LoadingIndicator () { return ( Box sx{{ display: flex, alignItems: center, justifyContent: center, padding: 2, color: text.secondary }} CircularProgress size{20} sx{{ marginRight: 1 }} / Typography variantbody2 AI正在思考中... /Typography /Box ); }; export default LoadingIndicator;4.4 API服务层把和后端的通信封装成一个独立的服务这样组件里就不用直接写HTTP请求了。// src/services/api.js import axios from axios; const API_BASE_URL http://localhost:8000; const api axios.create({ baseURL: API_BASE_URL, timeout: 30000, // 30秒超时大模型生成可能需要时间 headers: { Content-Type: application/json, } }); export const chatAPI { // 发送聊天消息 async sendMessage(messages, options {}) { try { const response await api.post(/chat, { messages, max_length: options.maxLength || 2048, temperature: options.temperature || 0.7, top_p: options.topP || 0.9 }); return response.data; } catch (error) { console.error(API请求失败:, error); throw new Error( error.response?.data?.detail || error.message || 请求失败请检查网络连接和后端服务 ); } }, // 检查服务健康状态 async checkHealth() { try { const response await api.get(/health); return response.data; } catch (error) { console.error(健康检查失败:, error); return { status: unhealthy, model_loaded: false }; } } }; export default api;5. 状态管理与自定义HookReact应用的状态管理很重要。我们用自定义Hook来管理聊天状态。5.1 创建useChat Hook// src/hooks/useChat.js import { useState, useCallback, useRef } from react; import { chatAPI } from ../services/api; const useChat () { const [messages, setMessages] useState([]); const [isLoading, setIsLoading] useState(false); const [error, setError] useState(null); const abortControllerRef useRef(null); // 发送消息 const sendMessage useCallback(async (content, options {}) { if (!content.trim()) return; // 取消之前的请求如果有 if (abortControllerRef.current) { abortControllerRef.current.abort(); } // 创建新的AbortController abortControllerRef.current new AbortController(); // 添加用户消息 const userMessage { role: user, content: content.trim(), timestamp: new Date().toISOString() }; setMessages(prev [...prev, userMessage]); setIsLoading(true); setError(null); try { // 准备发送给API的消息格式 const apiMessages [ ...messages.map(msg ({ role: msg.role, content: msg.content })), { role: user, content: content.trim() } ]; // 调用API const response await chatAPI.sendMessage(apiMessages, { signal: abortControllerRef.current.signal, ...options }); // 添加AI回复 const assistantMessage { role: assistant, content: response.response, timestamp: new Date().toISOString() }; setMessages(prev [...prev, assistantMessage]); } catch (err) { // 如果是用户取消的请求不显示错误 if (err.name AbortError) { console.log(请求被取消); return; } setError(err.message || 发送消息失败); console.error(发送消息失败:, err); } finally { setIsLoading(false); abortControllerRef.current null; } }, [messages]); // 清空对话 const clearMessages useCallback(() { setMessages([]); setError(null); // 取消进行中的请求 if (abortControllerRef.current) { abortControllerRef.current.abort(); abortControllerRef.current null; } setIsLoading(false); }, []); // 重试最后一条消息 const retryLastMessage useCallback(() { if (messages.length 0) return; const lastUserMessage [...messages] .reverse() .find(msg msg.role user); if (lastUserMessage) { // 移除最后一条用户消息和之后的AI回复如果有 const lastUserIndex messages.lastIndexOf(lastUserMessage); const newMessages messages.slice(0, lastUserIndex); setMessages(newMessages); // 重新发送 setTimeout(() { sendMessage(lastUserMessage.content); }, 100); } }, [messages, sendMessage]); return { messages, isLoading, error, sendMessage, clearMessages, retryLastMessage, setError }; }; export default useChat;这个Hook封装了所有聊天相关的逻辑发送消息、管理状态、错误处理、取消请求等。组件里用起来会很干净。6. 主聊天界面组件把前面做的组件和Hook组合起来就是完整的聊天界面了。// src/components/ChatInterface.jsx import React from react; import { Box, Container, Paper, Typography, Button, Alert, Snackbar, IconButton } from mui/material; import { Clear as ClearIcon, Refresh as RefreshIcon } from mui/icons-material; import MessageList from ./MessageList; import InputArea from ./InputArea; import LoadingIndicator from ./LoadingIndicator; import useChat from ../hooks/useChat; const ChatInterface () { const { messages, isLoading, error, sendMessage, clearMessages, retryLastMessage, setError } useChat(); const handleCloseError () { setError(null); }; return ( Container maxWidthmd sx{{ height: 100vh, padding: 0 }} Paper elevation{3} sx{{ height: 100%, display: flex, flexDirection: column, borderRadius: 2, overflow: hidden }} {/* 标题栏 */} Box sx{{ padding: 2, backgroundColor: primary.main, color: white, display: flex, justifyContent: space-between, alignItems: center }} Typography varianth5 componenth1 ChatGLM3-6B 智能助手 /Typography Box Button variantoutlined sizesmall onClick{retryLastMessage} disabled{messages.length 0 || isLoading} startIcon{RefreshIcon /} sx{{ marginRight: 1, color: white, borderColor: white, :hover: { borderColor: white, backgroundColor: rgba(255,255,255,0.1) } }} 重试 /Button Button variantoutlined sizesmall onClick{clearMessages} disabled{messages.length 0 || isLoading} startIcon{ClearIcon /} sx{{ color: white, borderColor: white, :hover: { borderColor: white, backgroundColor: rgba(255,255,255,0.1) } }} 清空 /Button /Box /Box {/* 错误提示 */} Snackbar open{!!error} autoHideDuration{6000} onClose{handleCloseError} anchorOrigin{{ vertical: top, horizontal: center }} Alert severityerror onClose{handleCloseError} sx{{ width: 100% }} {error} /Alert /Snackbar {/* 消息列表区域 */} Box sx{{ flex: 1, overflow: hidden }} {messages.length 0 ? ( Box sx{{ height: 100%, display: flex, flexDirection: column, alignItems: center, justifyContent: center, padding: 4, textAlign: center, color: text.secondary }} Typography varianth6 gutterBottom 欢迎使用 ChatGLM3-6B 智能助手 /Typography Typography variantbody1 paragraph 这是一个基于开源大模型的对话应用你可以问我任何问题。 /Typography Typography variantbody2 试试问我用JavaScript写一个计算器 或者 解释一下什么是机器学习 /Typography /Box ) : ( MessageList messages{messages} / )} {/* 加载指示器 */} {isLoading LoadingIndicator /} /Box {/* 输入区域 */} InputArea onSendMessage{sendMessage} isLoading{isLoading} / /Paper /Container ); }; export default ChatInterface;这个组件把所有的部分组合在一起标题栏、消息列表、输入框、控制按钮。界面看起来专业用起来也顺手。7. 应用入口和样式最后把ChatInterface放到App组件里再加点样式。// src/App.js import React, { useEffect, useState } from react; import { ThemeProvider, createTheme } from mui/material/styles; import CssBaseline from mui/material/CssBaseline; import { Box, CircularProgress, Alert } from mui/material; import ChatInterface from ./components/ChatInterface; import { chatAPI } from ./services/api; import ./App.css; // 创建主题 const theme createTheme({ palette: { primary: { main: #1976d2, }, secondary: { main: #dc004e, }, }, }); function App() { const [isBackendReady, setIsBackendReady] useState(false); const [backendError, setBackendError] useState(null); useEffect(() { // 检查后端服务是否就绪 const checkBackend async () { try { const health await chatAPI.checkHealth(); if (health.status healthy health.model_loaded) { setIsBackendReady(true); setBackendError(null); } else { setBackendError(后端服务未就绪或模型未加载); } } catch (error) { setBackendError(无法连接到后端服务请确保后端正在运行); console.error(后端连接失败:, error); } }; checkBackend(); // 每30秒检查一次 const interval setInterval(checkBackend, 30000); return () clearInterval(interval); }, []); if (backendError) { return ( ThemeProvider theme{theme} CssBaseline / Box sx{{ display: flex, flexDirection: column, alignItems: center, justifyContent: center, height: 100vh, padding: 4 }} Alert severityerror sx{{ marginBottom: 2, maxWidth: 600 }} {backendError} /Alert Typography variantbody1 paragraph 请确保 /Typography Typography variantbody2 componentdiv sx{{ textAlign: left }} 1. 后端服务已启动运行在 http://localhost:8000br / 2. ChatGLM3-6B模型已正确加载br / 3. 网络连接正常 /Typography /Box /ThemeProvider ); } if (!isBackendReady) { return ( ThemeProvider theme{theme} CssBaseline / Box sx{{ display: flex, flexDirection: column, alignItems: center, justifyContent: center, height: 100vh }} CircularProgress size{60} sx{{ marginBottom: 3 }} / Typography varianth6 正在初始化ChatGLM3-6B服务... /Typography Typography variantbody2 sx{{ marginTop: 2, color: text.secondary }} 首次加载模型可能需要几分钟时间 /Typography /Box /ThemeProvider ); } return ( ThemeProvider theme{theme} CssBaseline / ChatInterface / /ThemeProvider ); } export default App;再加点全局样式/* src/App.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f0f2f5; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace; } /* 自定义滚动条样式 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; }8. 启动和测试所有代码都写好了现在来启动应用。# 启动前端在frontend目录下 cd frontend npm start前端会在 http://localhost:3000 启动。确保后端也在运行http://localhost:8000。打开浏览器你应该能看到一个漂亮的聊天界面。试试问几个问题你好介绍一下你自己用Python写一个快速排序算法解释一下量子计算的基本原理界面会显示对话历史AI回复时会有加载动画。你可以清空对话也可以重试上一条消息。9. 进阶功能和优化建议基础功能已经完成了但实际项目中可能还需要更多功能。这里给你一些扩展思路9.1 流式输出现在的实现是等AI生成完整回复后再显示用户要等挺久的。可以改成流式输出让回复一个字一个字地显示出来。后端需要支持Server-Sent EventsSSE或WebSocket# 后端添加流式输出支持 from sse_starlette.sse import EventSourceResponse import asyncio app.post(/chat/stream) async def chat_stream(request: ChatRequest): 流式聊天接口 # ... 参数验证和模型调用 ... async def event_generator(): # 模拟流式输出 full_response # 这里应该是模型的实际流式输出 for chunk in some_streaming_function(query, history): full_response chunk yield { event: message, data: json.dumps({content: chunk, finished: False}) } await asyncio.sleep(0.01) # 控制输出速度 yield { event: message, data: json.dumps({content: , finished: True}) } return EventSourceResponse(event_generator())前端用EventSource接收// 前端流式接收 const eventSource new EventSource(/chat/stream?query${encodeURIComponent(query)}); eventSource.onmessage (event) { const data JSON.parse(event.data); if (data.finished) { eventSource.close(); } else { // 逐步更新消息内容 updateMessageContent(data.content); } };9.2 对话历史管理可以添加本地存储让用户刷新页面后还能看到之前的对话。// 在useChat Hook中添加本地存储 const useChat () { const [messages, setMessages] useState(() { // 从localStorage加载历史记录 const saved localStorage.getItem(chat_history); return saved ? JSON.parse(saved) : []; }); // 保存到localStorage useEffect(() { localStorage.setItem(chat_history, JSON.stringify(messages)); }, [messages]); // ... 其他代码 ... };9.3 参数调整面板让用户可以调整生成参数比如温度、最大长度等。// 参数调整组件 const ParameterPanel ({ parameters, onParametersChange }) { return ( Box sx{{ padding: 2, border: 1px solid #e0e0e0, borderRadius: 1 }} Typography variantsubtitle2 gutterBottom 生成参数 /Typography Box sx{{ marginBottom: 2 }} Typography variantcaption displayblock 温度 (Temperature): {parameters.temperature} /Typography Slider value{parameters.temperature} onChange{(e, value) onParametersChange({ ...parameters, temperature: value })} min{0} max{2} step{0.1} valueLabelDisplayauto / Typography variantcaption colortext.secondary 值越高越有创意值越低越保守 /Typography /Box {/* 其他参数... */} /Box ); };9.4 错误处理和重试机制现在的错误处理还比较简单可以做得更完善// 增强的错误处理 const sendMessage useCallback(async (content, options {}) { // ... 之前的代码 ... try { const response await chatAPI.sendMessage(apiMessages, { signal: abortControllerRef.current.signal, ...options }); // 成功处理... } catch (err) { if (err.name AbortError) { return; } // 根据错误类型显示不同的提示 if (err.message.includes(网络)) { setError(网络连接失败请检查网络设置); } else if (err.message.includes(超时)) { setError(请求超时可能是模型生成时间过长请重试); } else if (err.message.includes(模型)) { setError(模型服务异常请检查后端服务); } else { setError(发送失败: ${err.message}); } // 自动重试逻辑 if (options.retryCount 3) { setTimeout(() { sendMessage(content, { ...options, retryCount: (options.retryCount || 0) 1 }); }, 2000); } } }, [messages]);10. 部署和优化开发完成后你可能想把应用部署到服务器上。这里有几个建议10.1 生产环境部署后端优化使用Gunicorn或Uvicorn workers提高并发添加Nginx反向代理配置HTTPS证书设置合理的超时时间# 生产环境启动命令 gunicorn -w 4 -k uvicorn.workers.UvicornWorker app:app --bind 0.0.0.0:8000 --timeout 120前端构建npm run build然后把build目录下的文件放到Nginx或CDN上。10.2 性能优化模型量化用4-bit或8-bit量化减少显存占用缓存缓存常见问题的回答批处理如果有多个用户可以考虑批处理请求前端优化虚拟滚动处理大量消息图片懒加载代码分割10.3 安全性考虑API密钥如果对外开放需要添加认证输入验证防止注入攻击速率限制防止滥用内容过滤过滤不当内容11. 总结走完这一趟你应该已经掌握了把ChatGLM3-6B集成到React应用的基本方法。我们从后端API搭建开始一步步实现了前端的所有组件包括消息列表、输入框、状态管理等等。实际做项目的时候你可能还会遇到各种具体问题比如性能优化、错误处理、用户体验改进等等。但有了这个基础框架大部分问题都能找到解决思路。React的组件化开发确实很适合这种交互复杂的应用你可以很方便地添加新功能比如文件上传、语音输入、对话导出等等。ChatGLM3-6B的能力也足够强大能满足大多数对话场景的需求。如果你在集成过程中遇到问题或者有新的想法要尝试欢迎继续探索。技术总是在不断进步保持学习和实践的态度最重要。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
 简洁读取 API 扩展包)
