wordpress能做任何网站,wordpress不显示样式,文件怎么做网页,网站定位包括哪些内容Web开发全栈集成SmallThinker-3B-Preview#xff1a;从前端到后端的AI功能实现 最近在做一个智能客服项目#xff0c;需要给Web应用加上一个能理解用户问题、还能连续对话的AI大脑。选型时#xff0c;SmallThinker-3B-Preview这个模型进入了我的视线。它体积不大#xff0…Web开发全栈集成SmallThinker-3B-Preview从前端到后端的AI功能实现最近在做一个智能客服项目需要给Web应用加上一个能理解用户问题、还能连续对话的AI大脑。选型时SmallThinker-3B-Preview这个模型进入了我的视线。它体积不大但对话能力不错特别适合集成到现有的Web架构里。今天我就以一个完整的Web应用为例跟你聊聊怎么从前端到后端把这样一个模型丝滑地“塞”进你的项目里让它真正跑起来。整个过程其实可以拆成几个核心环节用户怎么跟AI聊天前端交互请求怎么发到模型后端API模型怎么处理并返回结果服务化以及怎么让AI记住对话上下文状态管理。听起来有点复杂别担心我会用最直白的方式带你走一遍全链路。1. 项目蓝图我们要做一个什么样的应用在动手写代码之前得先想清楚我们要做个什么东西。这次的目标是一个“智能内容助手”Web应用。用户可以在网页上输入问题比如“帮我写一段产品介绍文案”或者“用Python写个快速排序函数”然后AI助手就能理解意图并生成相应的内容回复。这个应用需要几个关键能力实时对话用户输入后能立刻看到AI的回复最好是一个字一个字蹦出来的那种流式效果体验更自然。上下文记忆AI能记住当前对话的历史这样用户问“上面那个函数能再解释一下吗”时AI知道“上面那个”指的是什么。稳定可靠后端服务要能稳定处理请求即使模型推理需要一点时间也不能让前端页面卡死或报错。易于扩展今天集成的是SmallThinker-3B-Preview明天如果想换个大模型或者加个图片理解功能架构上要能支持改动不能太大。基于这些考虑我设计了下面这个技术栈前端用Vue 3 TypeScript组件化开发方便生态丰富。当然你用React也一样思路是相通的。后端API网关用Node.js Express或者Fastify轻量、异步处理能力强适合做中间层。模型服务层这是核心用Python的FastAPI来封装SmallThinker-3B-Preview模型提供专门的推理接口。状态管理用户对话的上下文历史记录存在Redis里读写快还支持设置过期时间。通信方式前端和后端API网关之间用普通的HTTP/HTTPS。API网关和Python模型服务之间考虑到可能要传输较大的文本或需要流式响应可以用HTTP内部网络快问题不大。整个数据流的走向是这样的用户在前端页面输入 - 前端请求发送到Node.js网关 - 网关整理好上下文转发给Python模型服务 - 模型服务加载SmallThinker进行推理 - 推理结果流式返回给网关 - 网关再流式返回给前端 - 前端实时渲染出文字。接下来我们就从离用户最近的前端开始。2. 前端交互打造一个流畅的聊天界面前端是用户直接感知的部分体验好不好第一印象就在这里。我们的目标是做一个类似ChatGPT那样的聊天界面核心是两点一是界面要友好二是接收AI回复要流畅流式输出。2.1 构建聊天界面与组件我用Vue 3的Composition API来写代码结构更清晰。先看核心的聊天页面组件。template div classchat-container !-- 消息列表区域 -- div classmessages refmessagesContainer div v-for(msg, index) in messages :keyindex :class[message, msg.role] div classavatar{{ msg.role user ? 你 : AI }}/div div classcontent !-- 用户消息直接显示 -- template v-ifmsg.role user{{ msg.content }}/template !-- AI消息如果是流式输出则显示不断增长的文本 -- template v-else span v-ifmsg.isStreaming{{ msg.streamingContent }}/span span v-else{{ msg.content }}/span span v-ifmsg.isStreaming classtyping-cursor▌/span /template /div /div /div !-- 输入区域 -- div classinput-area textarea v-modeluserInput placeholder输入你的问题... keydown.enter.exact.preventsendMessage :disabledisLoading /textarea button clicksendMessage :disabled!userInput.trim() || isLoading {{ isLoading ? 思考中... : 发送 }} /button button clickclearHistory classsecondary清空对话/button /div /div /template script setup langts import { ref, onMounted, nextTick } from vue // 定义消息类型 interface ChatMessage { role: user | assistant content: string isStreaming?: boolean // 是否正在流式接收 streamingContent?: string // 流式接收到的部分内容 } // 响应式数据 const messages refChatMessage[]([ { role: assistant, content: 你好我是你的智能助手有什么可以帮你的 } ]) const userInput ref() const isLoading ref(false) const messagesContainer refHTMLElement() // 核心方法发送消息 const sendMessage async () { const inputText userInput.value.trim() if (!inputText || isLoading.value) return // 1. 将用户消息添加到列表 const userMsg: ChatMessage { role: user, content: inputText } messages.value.push(userMsg) userInput.value // 清空输入框 // 2. 添加一个初始的、空的AI消息占位符用于接收流式响应 const assistantMsg: ChatMessage { role: assistant, content: , isStreaming: true, streamingContent: } messages.value.push(assistantMsg) isLoading.value true // 3. 自动滚动到底部 scrollToBottom() try { // 4. 调用后端API并处理流式响应 await fetchStreamingResponse(inputText, assistantMsg) } catch (error) { console.error(请求失败:, error) // 出错时更新最后一条AI消息为错误提示 const lastMsg messages.value[messages.value.length - 1] lastMsg.content 抱歉我好像出错了请稍后再试。 lastMsg.isStreaming false delete lastMsg.streamingContent } finally { isLoading.value false // 确保滚动到底部显示完整回复 scrollToBottom() } } // 处理流式响应的关键函数 const fetchStreamingResponse async (userInput: string, assistantMsg: ChatMessage) { // 构建请求体包含当前对话历史用于上下文 const requestBody { message: userInput, // 只发送最近几轮对话作为上下文避免太长 history: messages.value .filter(m !m.isStreaming) // 过滤掉正在流式的消息 .slice(-4) // 取最近4条 .map(({ role, content }) ({ role, content })) } const response await fetch(/api/chat/stream, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(requestBody) }) if (!response.ok || !response.body) { throw new Error(HTTP error! status: ${response.status}) } // 使用ReadableStream API读取流式数据 const reader response.body.getReader() const decoder new TextDecoder(utf-8) let done false while (!done) { const { value, done: doneReading } await reader.read() done doneReading if (value) { // 解码并处理接收到的数据块 const chunk decoder.decode(value, { stream: true }) // 假设后端以纯文本流式返回每块都是一个字符串片段 // 在实际项目中后端可能会用更结构化的格式如SSE或自定义协议 assistantMsg.streamingContent (assistantMsg.streamingContent || ) chunk // 每次收到新数据都触发视图更新 await nextTick() // 随着内容增长自动滚动 scrollToBottom() } } // 流式接收完毕更新消息状态 assistantMsg.content assistantMsg.streamingContent || assistantMsg.isStreaming false delete assistantMsg.streamingContent } // 工具函数滚动到消息列表底部 const scrollToBottom () { nextTick(() { if (messagesContainer.value) { messagesContainer.value.scrollTop messagesContainer.value.scrollHeight } }) } // 清空对话历史 const clearHistory () { messages.value [{ role: assistant, content: 对话已清空我们可以重新开始了。 }] } // 组件挂载时确保滚动到底部 onMounted(() { scrollToBottom() }) /script style scoped /* 样式部分省略主要包含布局、消息气泡、输入框样式等 */ /style这个组件实现了聊天的核心交互。用户输入后消息立刻显示在界面上同时创建一个空的AI消息项。然后通过fetch请求后端的流式接口并利用ReadableStreamAPI一个字一个字地把AI的回复“拉”回来实时更新到页面上形成打字机效果。2.2 处理流式输出与用户体验优化流式输出是提升体验的关键。除了上面代码展示的基本实现还有几个细节可以优化错误处理与重试网络可能不稳定。可以在流式读取失败时尝试重新连接或者至少给用户一个友好的错误提示。中断生成如果AI回复太长用户可能想中途停止。可以增加一个“停止生成”按钮点击后中断fetch请求。上下文长度管理像SmallThinker这类模型有上下文窗口限制比如4096个token。前端在发送历史记录时可以做个简单的字符数估算只发送最近的有效对话避免请求因过长被后端拒绝。加载状态在等待AI回复时除了按钮禁用还可以在AI消息气泡里显示一个优雅的加载动画让用户知道程序正在工作。前端部分搞定后用户的请求就带着对话历史发往后端的API网关了。3. 后端架构构建稳健的API网关与模型服务后端是承上启下的枢纽。它既要接收前端的请求又要调用模型服务还要管理对话状态。我把它分成两层Node.js网关和Python模型服务。3.1 Node.js API网关请求路由与状态管理网关的作用是“转发”和“管理”。它验证前端请求从Redis获取或更新对话上下文然后把整理好的请求发给Python模型服务最后把模型服务的流式响应再传回前端。// server.js - 使用Express框架 const express require(express) const cors require(cors) const { createProxyMiddleware } require(http-proxy-middleware) const redis require(redis) const app express() const PORT process.env.PORT || 3000 // 中间件 app.use(cors()) // 处理跨域 app.use(express.json()) // 解析JSON请求体 // 创建Redis客户端假设Redis运行在本地默认端口 const redisClient redis.createClient() redisClient.on(error, (err) console.error(Redis Client Error, err)) ;(async () { await redisClient.connect() console.log(Connected to Redis) })() // 核心处理流式聊天请求的端点 app.post(/api/chat/stream, async (req, res) { const { message, history [], sessionId default } req.body if (!message || typeof message ! string) { return res.status(400).json({ error: Invalid message }) } // 1. 准备对话历史 let fullHistory [] try { // 尝试从Redis获取该会话的之前的历史 const storedHistory await redisClient.get(chat:${sessionId}) if (storedHistory) { fullHistory JSON.parse(storedHistory) } } catch (err) { console.error(Failed to read history from Redis:, err) // 出错时仅使用本次请求带来的历史 fullHistory history } // 合并历史存储的历史 本次请求带来的最近历史 新用户消息 // 注意去重和长度控制这里简化处理 const newUserEntry { role: user, content: message } const newAssistantEntry { role: assistant, content: } // 占位等模型填充 const contextToSend [...fullHistory, ...history, newUserEntry] // 简单截断防止过长。生产环境应按token数精确计算。 const truncatedContext contextToSend.slice(-10) // 最多保留最近10轮 // 2. 设置响应头支持流式传输 res.setHeader(Content-Type, text/plain; charsetutf-8) res.setHeader(Cache-Control, no-cache) res.setHeader(Connection, keep-alive) // 注意这里使用简单的文本流。更规范的做法是使用 Server-Sent Events (SSE) res.flushHeaders() // 立即发送头部 let accumulatedResponse // 3. 将请求转发到Python模型服务并建立管道 const modelServiceUrl http://localhost:8001/generate_stream // Python服务地址 const proxyRes await fetch(modelServiceUrl, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: truncatedContext, stream: true, // 明确要求流式输出 max_tokens: 512 // 控制生成长度 }) }) if (!proxyRes.ok || !proxyRes.body) { res.write(Error: Model service responded with status ${proxyRes.status}) res.end() return } // 4. 从模型服务读取流并转发给前端 const reader proxyRes.body.getReader() const decoder new TextDecoder() try { while (true) { const { done, value } await reader.read() if (done) break const chunk decoder.decode(value) accumulatedResponse chunk // 将模型服务返回的每个数据块直接写给前端 res.write(chunk) // 确保数据立即发送 if (typeof res.flush function) { res.flush() } } } catch (err) { console.error(Streaming error:, err) res.write(\n\n[Stream interrupted due to an error]) } finally { // 5. 流式结束将完整的AI回复保存到Redis try { const newHistory [...truncatedContext, { role: assistant, content: accumulatedResponse }] // 保存更新后的历史并设置过期时间例如1小时 await redisClient.setEx(chat:${sessionId}, 3600, JSON.stringify(newHistory)) } catch (err) { console.error(Failed to save history to Redis:, err) } res.end() // 结束响应 } }) // 一个非流式的聊天接口用于对比或简单场景 app.post(/api/chat, async (req, res) { // ... 逻辑类似但等待模型完全生成后一次性返回 }) // 清空某个会话的历史 app.delete(/api/chat/history/:sessionId, async (req, res) { const { sessionId } req.params try { await redisClient.del(chat:${sessionId}) res.json({ success: true }) } catch (err) { res.status(500).json({ error: Failed to clear history }) } }) // 健康检查端点 app.get(/health, (req, res) { res.json({ status: ok, service: chat-api-gateway }) }) app.listen(PORT, () { console.log(API Gateway listening on port ${PORT}) })这个网关做了几件重要的事会话管理用Redis存聊天记录、请求转发把整理好的上下文发给模型、流式管道把模型的流式输出原样传给前端。这样前端和模型服务就解耦了模型服务可以独立部署和扩展。3.2 Python模型服务封装与调用SmallThinker这是AI能力的核心。我们用FastAPI快速搭建一个服务来加载和运行SmallThinker-3B-Preview模型。# model_service.py import asyncio from typing import List, Dict, AsyncGenerator from fastapi import FastAPI, HTTPException from fastapi.responses import StreamingResponse from pydantic import BaseModel import torch from transformers import AutoTokenizer, AutoModelForCausalLM, TextIteratorStreamer from threading import Thread app FastAPI(titleSmallThinker-3B-Preview Service) # 定义请求和响应的数据模型 class ChatRequest(BaseModel): messages: List[Dict[str, str]] # 格式: [{role: user, content: ...}, ...] stream: bool True max_tokens: int 512 temperature: float 0.7 # 全局加载模型和分词器简单示例生产环境需优化 print(Loading model and tokenizer...) MODEL_NAME small-thinker-3b-preview # 假设模型已下载到本地或指定路径 tokenizer AutoTokenizer.from_pretrained(MODEL_NAME, trust_remote_codeTrue) # 注意根据SmallThinker的具体实现可能需要调整加载参数 model AutoModelForCausalLM.from_pretrained( MODEL_NAME, torch_dtypetorch.float16, # 使用半精度减少内存 device_mapauto, # 自动分配模型层到GPU/CPU trust_remote_codeTrue ) print(Model loaded.) def format_chat_history(messages: List[Dict[str, str]]) - str: 将对话历史格式化为模型接受的提示文本。 具体格式需根据SmallThinker-3B-Preview的训练格式调整。 formatted_text for msg in messages: if msg[role] user: formatted_text fHuman: {msg[content]}\n elif msg[role] assistant: formatted_text fAssistant: {msg[content]}\n # 最后加上Assistant的提示让模型开始生成 formatted_text Assistant: return formatted_text app.post(/generate) async def generate_text(request: ChatRequest): 一次性生成完整回复非流式 try: prompt format_chat_history(request.messages) inputs tokenizer(prompt, return_tensorspt).to(model.device) with torch.no_grad(): outputs model.generate( **inputs, max_new_tokensrequest.max_tokens, temperaturerequest.temperature, do_sampleTrue, pad_token_idtokenizer.eos_token_id ) generated_text tokenizer.decode(outputs[0][inputs[input_ids].shape[1]:], skip_special_tokensTrue) return {response: generated_text} except Exception as e: raise HTTPException(status_code500, detailfGeneration failed: {str(e)}) app.post(/generate_stream) async def generate_stream(request: ChatRequest): 流式生成回复 async def stream_generator(): prompt format_chat_history(request.messages) inputs tokenizer(prompt, return_tensorspt).to(model.device) # 创建流式输出器 streamer TextIteratorStreamer(tokenizer, skip_promptTrue, skip_special_tokensTrue) # 在单独线程中运行生成过程 generation_kwargs dict( **inputs, streamerstreamer, max_new_tokensrequest.max_tokens, temperaturerequest.temperature, do_sampleTrue, pad_token_idtokenizer.eos_token_id ) thread Thread(targetmodel.generate, kwargsgeneration_kwargs) thread.start() # 从streamer中异步获取生成的token并yield for text in streamer: # 将每个生成的文本块发送出去 yield text # 添加一个小延迟让流更明显可选 await asyncio.sleep(0.01) thread.join() return StreamingResponse(stream_generator(), media_typetext/plain; charsetutf-8) app.get(/health) async def health_check(): return {status: healthy, model: MODEL_NAME} if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0, port8001)这个服务提供了两个关键接口。/generate_stream是实现流式输出的核心。它利用transformers库的TextIteratorStreamer让模型每生成一个token就能立刻吐出来而不是等全部生成完。StreamingResponse会把这些token块源源不断地推给调用方我们的Node.js网关。部署与优化提示硬件SmallThinker-3B-Preview在消费级GPU如RTX 4090或高端CPU上可以运行。如果资源紧张可以考虑使用量化版本如GPTQ、AWQ来减少内存占用和提升推理速度。性能对于生产环境可以考虑使用更高效的推理引擎如vLLM或TGIText Generation Inference它们对连续批处理和流式输出有更好的支持。并发上面的简单服务一次处理一个请求。如果流量大需要部署多个实例并用Nginx等做负载均衡。4. 全链路联调与问题排查当三个部分前端、Node网关、Python服务都写好之后就是联调了。这个过程可能会遇到一些典型问题。常见问题与解决思路跨域问题CORS前端调用localhost:3000的网关网关再调localhost:8001的模型服务。确保在Node.js网关中正确设置了cors中间件并且模型服务如果被浏览器直接访问通常不会也需要配置CORS。流式中断网络不稳定或服务超时可能导致流式输出中途断开。前端需要增加错误监听和重试逻辑。后端也要设置合理的超时时间避免长时间占用连接。上下文丢失检查Redis连接是否正常键名chat:${sessionId}的生成规则是否一致。前端在清空对话或开始新会话时可以生成新的sessionId例如使用UUID。模型响应慢第一次请求通常较慢加载模型。后续请求如果还慢需要检查服务器资源CPU/GPU/内存。可以考虑为模型服务添加一个简单的请求队列或者使用缓存对相同的问题直接返回缓存答案。内存泄漏长时间运行后如果服务内存持续增长需要检查Python模型服务中是否有全局变量不当累积或者Tensor没有被正确释放。确保使用with torch.no_grad():并在推理后调用torch.cuda.empty_cache()如果用了GPU。调试技巧从前到后一层一层看日志。先看浏览器控制台网络请求是否成功再看Node.js网关日志是否收到请求并转发最后看Python模型服务日志是否正常生成文本。使用curl或Postman单独测试每个接口特别是流式接口可以清楚地看到数据是否一块一块地返回。对于复杂的对话上下文问题可以临时把Redis中存储的历史记录打印出来看看格式是否正确。5. 总结走完这一趟你会发现把一个像SmallThinker-3B-Preview这样的模型集成到Web应用里并不是一个神秘的黑盒操作。它本质上就是构建一个标准的、分层的Web服务只是中间多了一个“AI推理”环节。前端负责展示和交互追求用户体验的流畅性尤其是流式输出带来的实时感。Node.js网关作为中间层很好地承担了路由、状态管理和协议转换的职责让前端和AI模型解耦。后端的Python服务则专心致志地负责加载模型、运行推理并通过流式接口高效地吐出结果。这套架构的好处是清晰、灵活。哪天你想把SmallThinker换成另一个模型或者在前端加个语音输入只需要修改对应的那一层其他部分影响很小。当然这只是个起点。真实项目中你还需要考虑用户认证、限流、监控、更复杂的上下文管理比如向量数据库检索等等。但无论如何核心链路跑通了剩下的就是在此基础上添砖加瓦。希望这个从零到一的梳理能帮你把AI能力更顺畅地融入到自己的下一个Web项目里。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。