Phi-3 Forest Laboratory赋能微信小程序开发智能客服聊天机器人最近在做一个电商项目客户那边提了个需求说想在小程序里加个智能客服能自动回答一些常见问题比如商品咨询、订单状态、退换货政策这些。他们不想用那些大而全的通用对话模型觉得成本高、响应慢而且回答不够精准。正好我手头有一个部署在星图GPU平台上的Phi-3 Forest Laboratory模型。这个模型体积小巧推理速度快特别适合做这种垂直领域的任务。于是我就琢磨着能不能把它和小程序结合起来搭一个轻量又聪明的专属客服试了试还真行。今天这篇文章我就把这个从后端模型部署到前端小程序联调的全过程以及其中遇到的一些坑和解决办法跟大家分享一下。如果你也在考虑为你的小程序增加AI对话能力希望这些经验能帮到你。1. 为什么选择Phi-3 Forest Laboratory在动手之前得先想清楚选型。市面上模型那么多为什么偏偏是Phi-3 Forest Laboratory呢这得从我们客服机器人的实际需求说起。我们的客服机器人主要面对的是电商场景下的用户提问。这类问题有几个特点问题范围相对固定主要围绕商品、订单、售后、需要准确且一致的答案比如退货政策不能今天一个说法明天一个说法、响应速度要快用户等待耐心有限。基于这些我对模型有几个核心要求响应速度快用户发消息后最好能秒回。答案可控、准确不能胡编乱造特别是涉及规则、政策的内容。部署成本低初创项目预算有限。易于集成能方便地通过API被小程序调用。Phi-3 Forest Laboratory在这几点上表现不错。它本身参数量不算巨大在星图GPU平台上部署后单次推理的延迟很低完全能满足“秒回”的要求。更重要的是通过精心的提示词设计和知识库约束我们可以让它的回答牢牢锁定在业务范围内大大减少了“幻觉”即模型瞎编的情况。当然它也不是万能的。对于极其复杂、需要深度推理的开放性问题它可能不如一些百亿级别的大模型。但对我们这个聚焦业务的客服场景来说它是性价比非常高的选择。2. 整体架构与核心思路整个系统的架构不复杂核心就是让微信小程序能和后端的AI模型“说上话”。下面这张图概括了主要的流程用户在小程序输入问题 ↓ 小程序前端通过WebSocket发送消息到后端 ↓ 后端服务接收消息进行预处理如敏感词过滤 ↓ 后端调用Phi-3 Forest Laboratory模型API获取回答 ↓ 后端将模型返回的答案流式推送给小程序 ↓ 小程序界面实时显示回复内容这里有两个关键的技术点通信方式我们选择了WebSocket而不是普通的HTTP。因为客服对话是典型的“一问一答”且有来有回的场景WebSocket能建立持久连接实现双向、低延迟的通信特别适合这种需要实时推送消息比如流式输出的情况。对话管理一个聪明的客服应该能记住上下文。比如用户先问“我的订单发货了吗”接着问“到哪了”客服得知道“到哪了”指的是上一个订单的物流。这就需要后端在调用模型时不仅发送当前问题还要附带上最近几轮的对话历史。3. 后端服务搭建连接模型与业务逻辑后端是整个系统的大脑它既要负责与AI模型交互又要处理业务逻辑。我使用Python的FastAPI框架来搭建因为它轻量、异步支持好写API非常快。3.1 模型API的封装与调用首先需要确保Phi-3 Forest Laboratory模型已经在星图GPU平台上成功部署并获得了可调用的API地址例如https://your-model-endpoint/v1/chat/completions。在后端服务中我创建了一个专门负责与模型对话的客户端。这里有个小技巧为了提升用户体验我让模型支持了流式输出这样用户能看到答案一个字一个字地出现感觉更自然。# model_client.py import aiohttp import json from typing import AsyncGenerator class Phi3Client: def __init__(self, api_url: str, api_key: str): self.api_url api_url self.headers { Authorization: fBearer {api_key}, Content-Type: application/json } async def chat_stream(self, messages: list, max_tokens: int 500) - AsyncGenerator[str, None]: 流式调用模型API payload { model: phi-3-forest-lab, # 根据实际部署模型名调整 messages: messages, # 对话历史 max_tokens: max_tokens, stream: True # 开启流式输出 } async with aiohttp.ClientSession() as session: async with session.post(self.api_url, jsonpayload, headersself.headers) as resp: if resp.status ! 200: error_text await resp.text() yield f[系统错误] 模型服务异常: {error_text} return async for line in resp.content: if line: decoded_line line.decode(utf-8).strip() if decoded_line.startswith(data: ): data decoded_line[6:] # 去掉 data: 前缀 if data ! [DONE]: try: chunk json.loads(data) if choices in chunk and chunk[choices]: delta chunk[choices][0].get(delta, {}) content delta.get(content, ) if content: yield content except json.JSONDecodeError: continue3.2 意图识别与对话管理直接让模型回答所有问题可能会浪费算力也可能回答不精准。我加入了一个简单的“意图识别”层。它的作用是在调用大模型之前先判断一下用户想干嘛。比如用户问“密码忘了怎么办”这明显不是客服的业务范围应该直接引导用户去“找回密码”页面。再比如用户问“今天的天气”这跟电商无关可以礼貌地拒绝回答。# intent_manager.py import re class IntentManager: def __init__(self): # 定义一些业务相关的关键词和对应的处理方式 self.intent_patterns { greeting: [r你好, r嗨, r在吗, rhello], product_query: [r多少钱, r什么价, r价格, r怎么卖, r商品], order_status: [r订单, r发货, r物流, r到哪了, r单号], return_policy: [r退货, r退款, r换货, r售后], out_of_scope: [r天气, r时间, r讲个笑话, r密码忘了] # 业务范围外 } def recognize(self, user_input: str) - dict: 识别用户意图 user_input_lower user_input.lower() for intent, patterns in self.intent_patterns.items(): for pattern in patterns: if re.search(pattern, user_input_lower): # 这里可以返回一个标准回复或者一个意图标签供后续处理 if intent out_of_scope: return {intent: intent, response: 抱歉我是购物助手主要负责商品、订单和售后相关问题哦。您可以尝试问我关于商品信息或订单状态的问题。} # 对于业务内意图返回标签交给大模型处理 return {intent: intent, response: None} # 未匹配到默认交给大模型 return {intent: general_chat, response: None}对话管理则用一个简单的类来维护每个用户的会话历史。为了防止历史过长导致模型性能下降或成本增加我设置了一个长度限制。# conversation_manager.py from collections import deque class Conversation: def __init__(self, session_id: str, max_history10): self.session_id session_id self.history deque(maxlenmax_history) # 使用双端队列自动移除最老记录 # 初始化系统提示词告诉模型它的角色和职责 self.system_prompt { role: system, content: 你是一个专业的电商客服助手名字叫小智。你热情、耐心专注于回答用户关于商品信息、订单状态、退换货政策、促销活动等购物相关问题。对于无法回答或与购物无关的问题应礼貌地表示无法处理并引导用户关注业务问题。回答要简洁、准确、友好。 } self.history.append(self.system_prompt) def add_user_message(self, content: str): self.history.append({role: user, content: content}) def add_assistant_message(self, content: str): self.history.append({role: assistant, content: content}) def get_messages_for_model(self): return list(self.history)3.3 WebSocket服务端实现最后用FastAPI把上面的模块串起来提供一个WebSocket端点供小程序连接。# main.py from fastapi import FastAPI, WebSocket, WebSocketDisconnect from model_client import Phi3Client from intent_manager import IntentManager from conversation_manager import Conversation, ConversationManager import asyncio app FastAPI() model_client Phi3Client(api_urlYOUR_MODEL_ENDPOINT, api_keyYOUR_API_KEY) intent_manager IntentManager() # 用一个字典在内存中管理会话生产环境建议用Redis等 conversation_manager {} app.websocket(/ws/chat) async def websocket_chat(websocket: WebSocket): await websocket.accept() session_id default_session # 实际应从连接参数或token中获取用户唯一标识 # 获取或创建该用户的对话记录 if session_id not in conversation_manager: conversation_manager[session_id] Conversation(session_id) conversation conversation_manager[session_id] try: while True: # 接收用户消息 user_message await websocket.receive_text() conversation.add_user_message(user_message) # 1. 意图识别 intent_result intent_manager.recognize(user_message) if intent_result[response]: # 如果是业务外问题直接返回预设回复 await websocket.send_text(intent_result[response]) conversation.add_assistant_message(intent_result[response]) continue # 2. 准备调用模型 messages_for_model conversation.get_messages_for_model() # 3. 流式调用模型并返回 full_response async for chunk in model_client.chat_stream(messages_for_model): await websocket.send_text(chunk) # 逐块发送给前端 full_response chunk # 可选添加一点延迟让流式输出更明显 # await asyncio.sleep(0.02) # 4. 将完整回复加入历史 conversation.add_assistant_message(full_response) except WebSocketDisconnect: # 连接断开清理资源这里简单示例实际可能保留历史一段时间 # del conversation_manager[session_id] print(f客户端 {session_id} 断开连接)这样一个具备基础意图识别、上下文管理和流式输出的后端服务就搭好了。4. 微信小程序前端打造流畅对话体验后端通了前端的任务就是做一个好看又好用的聊天界面。微信小程序提供了WebSocket和SocketTaskAPI用起来很方便。4.1 建立WebSocket连接与消息处理首先在小程序的生命周期函数如onLoad中建立连接并在onUnload中关闭连接管理好资源。// pages/chat/chat.js Page({ data: { messages: [], // 消息列表 inputValue: , // 输入框内容 socketConnected: false, socketTask: null, }, onLoad: function() { this.connectWebSocket(); }, onUnload: function() { this.closeWebSocket(); }, connectWebSocket: function() { const that this; // 替换为你的后端WebSocket地址注意必须是wss:// (生产环境) const wsUrl wss://your-backend.com/ws/chat; const socketTask wx.connectSocket({ url: wsUrl, success: () { console.log(WebSocket连接创建成功); }, fail: (err) { console.error(WebSocket连接失败, err); wx.showToast({ title: 连接客服失败, icon: none }); } }); this.setData({ socketTask }); socketTask.onOpen(() { console.log(WebSocket连接已打开); that.setData({ socketConnected: true }); that.addSystemMessage(已连接智能客服小智请问有什么可以帮您); }); socketTask.onMessage((res) { // 收到后端推送的消息流式片段或完整回复 const newContent res.data; that.handleIncomingMessage(newContent); }); socketTask.onClose(() { console.log(WebSocket连接已关闭); that.setData({ socketConnected: false }); }); socketTask.onError((err) { console.error(WebSocket发生错误, err); wx.showToast({ title: 连接出现异常, icon: none }); }); }, closeWebSocket: function() { if (this.data.socketTask) { this.data.socketTask.close(); } }, // ... 其他方法 })4.2 实现流式消息接收与渲染流式消息的核心是后端每生成一个词或一段话就立刻推送到前端。前端需要将这些片段拼接到当前正在接收的回复消息上。// pages/chat/chat.js 接上文 handleIncomingMessage: function(content) { let messages this.data.messages; const lastMessage messages[messages.length - 1]; // 判断是否是助手正在回复的消息即上一条消息是用户发的且最后一条消息是助手发的但未结束 if (lastMessage lastMessage.role assistant lastMessage.isStreaming) { // 是流式消息的后续片段追加到上一条消息 lastMessage.content content; // 更新最后一条消息 messages[messages.length - 1] lastMessage; } else { // 是新的一条助手回复消息或者是非流式的完整回复 const newAssistantMsg { role: assistant, content: content, isStreaming: true // 标记为流式输出中 }; messages.push(newAssistantMsg); } this.setData({ messages }); // 滚动到底部确保用户看到最新消息 this.scrollToBottom(); }, // 当收到流式结束的标记或发送下一条消息时需要将上一条助手消息的 isStreaming 设为 false sendMessage: function() { const inputVal this.data.inputValue.trim(); if (!inputVal || !this.data.socketConnected) return; // 1. 将用户消息添加到界面并清空输入框 const userMsg { role: user, content: inputVal }; let messages this.data.messages; // 如果上一条消息是助手且还在流式输出标记其结束 const lastMsg messages[messages.length - 1]; if (lastMsg lastMsg.role assistant lastMsg.isStreaming) { lastMsg.isStreaming false; messages[messages.length - 1] lastMsg; } messages.push(userMsg); this.setData({ messages, inputValue: }); this.scrollToBottom(); // 2. 通过WebSocket发送消息 this.data.socketTask.send({ data: inputVal, success: () { console.log(消息发送成功); }, fail: (err) { console.error(消息发送失败, err); this.addSystemMessage(消息发送失败请检查网络。); } }); }, scrollToBottom: function() { // 利用小程序页面滚动API延迟确保DOM更新 setTimeout(() { wx.pageScrollTo({ scrollTop: 99999, duration: 300 }); }, 100); }, addSystemMessage: function(content) { const msg { role: system, content: content }; this.setData({ messages: [...this.data.messages, msg] }); this.scrollToBottom(); },4.3 设计简洁的对话界面界面设计追求清晰简洁。主要分为三个区域顶部的标题栏、中间的聊天内容区、底部的输入栏。!-- pages/chat/chat.wxml -- view classchat-container !-- 标题栏 -- view classheader text智能客服小智/text view classconnection-status {{socketConnected ? connected : disconnected}} {{socketConnected ? 在线 : 离线}} /view /view !-- 聊天内容区 -- scroll-view classmessage-list scroll-y scroll-top{{scrollTop}} scroll-with-animation block wx:for{{messages}} wx:keyindex view classmessage-item message-{{item.role}} !-- 系统消息样式 -- block wx:if{{item.role system}} view classsystem-message{{item.content}}/view /block !-- 用户消息样式 -- block wx:elif{{item.role user}} view classbubble user-bubble{{item.content}}/view /block !-- 助手消息样式流式消息可能有光标动画 -- block wx:elif{{item.role assistant}} view classbubble assistant-bubble {{item.content}} text classstreaming-cursor wx:if{{item.isStreaming}}▌/text /view /block /view /block /scroll-view !-- 输入栏 -- view classinput-area input classinput-box value{{inputValue}} bindinputonInput bindconfirmsendMessage placeholder请输入您的问题... focus{{autoFocus}} / button classsend-btn bindtapsendMessage disabled{{!inputValue || !socketConnected}}发送/button /view /view相应的样式WXSS可以设计气泡、颜色、布局等让界面看起来更舒适这里就不展开详细代码了。5. 实际效果与优化思考把前后端都跑起来之后一个基本的智能客服机器人就成型了。在实际测试中对于“这个红色衬衫有货吗”、“我昨天的订单发货没”这类标准问题机器人能快速给出准确的回答体验很流畅。当然这只是个起点。要让这个客服真正变得“智能”和“好用”还有不少可以优化的地方知识库增强目前模型主要依靠提示词和有限的对话历史来回答。可以引入一个外部的知识库比如商品数据库、帮助文档当用户提问时先根据问题从知识库里检索出最相关的片段再把“问题知识片段”一起交给模型生成答案。这样能极大提升回答的准确性和专业性。多轮对话优化现在的上下文管理比较简单。对于更复杂的业务流比如退货申请可能需要引导用户一步步提供信息订单号、退货原因、照片等。这需要设计更复杂的对话状态管理。前端体验打磨可以加入消息发送状态发送中、已送达、历史记录查看、常见问题快捷按钮等功能让交互更友好。安全与合规一定要在后端加入敏感词过滤和内容审核机制防止模型被诱导产生不当言论。同时对用户数据进行脱敏处理保护隐私。6. 写在最后这次把Phi-3 Forest Laboratory模型和微信小程序结合搭建智能客服的尝试整体上挺顺利的。最大的感受是对于垂直领域的AI应用选择一个响应快、成本可控的轻量级模型再结合具体的业务逻辑进行“调教”往往比直接上最顶尖的通用大模型效果更好也更经济。小程序端的WebSocket连接和流式渲染稍微花点心思也能做出不错的实时对话体验。这套方案不仅适用于客服稍加改造也能用在智能导购、产品咨询、教育答疑等很多需要即时交互的场景里。如果你正打算为你的小程序增添一些AI互动能力不妨从一个小而专的场景开始试试。先跑通流程再逐步迭代优化。过程中遇到问题多查查文档多在社区里交流总能找到解决办法。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Phi-3 Forest Laboratory赋能微信小程序：开发智能客服聊天机器人
发布时间：2026/7/7 4:48:00
Phi-3 Forest Laboratory赋能微信小程序开发智能客服聊天机器人最近在做一个电商项目客户那边提了个需求说想在小程序里加个智能客服能自动回答一些常见问题比如商品咨询、订单状态、退换货政策这些。他们不想用那些大而全的通用对话模型觉得成本高、响应慢而且回答不够精准。正好我手头有一个部署在星图GPU平台上的Phi-3 Forest Laboratory模型。这个模型体积小巧推理速度快特别适合做这种垂直领域的任务。于是我就琢磨着能不能把它和小程序结合起来搭一个轻量又聪明的专属客服试了试还真行。今天这篇文章我就把这个从后端模型部署到前端小程序联调的全过程以及其中遇到的一些坑和解决办法跟大家分享一下。如果你也在考虑为你的小程序增加AI对话能力希望这些经验能帮到你。1. 为什么选择Phi-3 Forest Laboratory在动手之前得先想清楚选型。市面上模型那么多为什么偏偏是Phi-3 Forest Laboratory呢这得从我们客服机器人的实际需求说起。我们的客服机器人主要面对的是电商场景下的用户提问。这类问题有几个特点问题范围相对固定主要围绕商品、订单、售后、需要准确且一致的答案比如退货政策不能今天一个说法明天一个说法、响应速度要快用户等待耐心有限。基于这些我对模型有几个核心要求响应速度快用户发消息后最好能秒回。答案可控、准确不能胡编乱造特别是涉及规则、政策的内容。部署成本低初创项目预算有限。易于集成能方便地通过API被小程序调用。Phi-3 Forest Laboratory在这几点上表现不错。它本身参数量不算巨大在星图GPU平台上部署后单次推理的延迟很低完全能满足“秒回”的要求。更重要的是通过精心的提示词设计和知识库约束我们可以让它的回答牢牢锁定在业务范围内大大减少了“幻觉”即模型瞎编的情况。当然它也不是万能的。对于极其复杂、需要深度推理的开放性问题它可能不如一些百亿级别的大模型。但对我们这个聚焦业务的客服场景来说它是性价比非常高的选择。2. 整体架构与核心思路整个系统的架构不复杂核心就是让微信小程序能和后端的AI模型“说上话”。下面这张图概括了主要的流程用户在小程序输入问题 ↓ 小程序前端通过WebSocket发送消息到后端 ↓ 后端服务接收消息进行预处理如敏感词过滤 ↓ 后端调用Phi-3 Forest Laboratory模型API获取回答 ↓ 后端将模型返回的答案流式推送给小程序 ↓ 小程序界面实时显示回复内容这里有两个关键的技术点通信方式我们选择了WebSocket而不是普通的HTTP。因为客服对话是典型的“一问一答”且有来有回的场景WebSocket能建立持久连接实现双向、低延迟的通信特别适合这种需要实时推送消息比如流式输出的情况。对话管理一个聪明的客服应该能记住上下文。比如用户先问“我的订单发货了吗”接着问“到哪了”客服得知道“到哪了”指的是上一个订单的物流。这就需要后端在调用模型时不仅发送当前问题还要附带上最近几轮的对话历史。3. 后端服务搭建连接模型与业务逻辑后端是整个系统的大脑它既要负责与AI模型交互又要处理业务逻辑。我使用Python的FastAPI框架来搭建因为它轻量、异步支持好写API非常快。3.1 模型API的封装与调用首先需要确保Phi-3 Forest Laboratory模型已经在星图GPU平台上成功部署并获得了可调用的API地址例如https://your-model-endpoint/v1/chat/completions。在后端服务中我创建了一个专门负责与模型对话的客户端。这里有个小技巧为了提升用户体验我让模型支持了流式输出这样用户能看到答案一个字一个字地出现感觉更自然。# model_client.py import aiohttp import json from typing import AsyncGenerator class Phi3Client: def __init__(self, api_url: str, api_key: str): self.api_url api_url self.headers { Authorization: fBearer {api_key}, Content-Type: application/json } async def chat_stream(self, messages: list, max_tokens: int 500) - AsyncGenerator[str, None]: 流式调用模型API payload { model: phi-3-forest-lab, # 根据实际部署模型名调整 messages: messages, # 对话历史 max_tokens: max_tokens, stream: True # 开启流式输出 } async with aiohttp.ClientSession() as session: async with session.post(self.api_url, jsonpayload, headersself.headers) as resp: if resp.status ! 200: error_text await resp.text() yield f[系统错误] 模型服务异常: {error_text} return async for line in resp.content: if line: decoded_line line.decode(utf-8).strip() if decoded_line.startswith(data: ): data decoded_line[6:] # 去掉 data: 前缀 if data ! [DONE]: try: chunk json.loads(data) if choices in chunk and chunk[choices]: delta chunk[choices][0].get(delta, {}) content delta.get(content, ) if content: yield content except json.JSONDecodeError: continue3.2 意图识别与对话管理直接让模型回答所有问题可能会浪费算力也可能回答不精准。我加入了一个简单的“意图识别”层。它的作用是在调用大模型之前先判断一下用户想干嘛。比如用户问“密码忘了怎么办”这明显不是客服的业务范围应该直接引导用户去“找回密码”页面。再比如用户问“今天的天气”这跟电商无关可以礼貌地拒绝回答。# intent_manager.py import re class IntentManager: def __init__(self): # 定义一些业务相关的关键词和对应的处理方式 self.intent_patterns { greeting: [r你好, r嗨, r在吗, rhello], product_query: [r多少钱, r什么价, r价格, r怎么卖, r商品], order_status: [r订单, r发货, r物流, r到哪了, r单号], return_policy: [r退货, r退款, r换货, r售后], out_of_scope: [r天气, r时间, r讲个笑话, r密码忘了] # 业务范围外 } def recognize(self, user_input: str) - dict: 识别用户意图 user_input_lower user_input.lower() for intent, patterns in self.intent_patterns.items(): for pattern in patterns: if re.search(pattern, user_input_lower): # 这里可以返回一个标准回复或者一个意图标签供后续处理 if intent out_of_scope: return {intent: intent, response: 抱歉我是购物助手主要负责商品、订单和售后相关问题哦。您可以尝试问我关于商品信息或订单状态的问题。} # 对于业务内意图返回标签交给大模型处理 return {intent: intent, response: None} # 未匹配到默认交给大模型 return {intent: general_chat, response: None}对话管理则用一个简单的类来维护每个用户的会话历史。为了防止历史过长导致模型性能下降或成本增加我设置了一个长度限制。# conversation_manager.py from collections import deque class Conversation: def __init__(self, session_id: str, max_history10): self.session_id session_id self.history deque(maxlenmax_history) # 使用双端队列自动移除最老记录 # 初始化系统提示词告诉模型它的角色和职责 self.system_prompt { role: system, content: 你是一个专业的电商客服助手名字叫小智。你热情、耐心专注于回答用户关于商品信息、订单状态、退换货政策、促销活动等购物相关问题。对于无法回答或与购物无关的问题应礼貌地表示无法处理并引导用户关注业务问题。回答要简洁、准确、友好。 } self.history.append(self.system_prompt) def add_user_message(self, content: str): self.history.append({role: user, content: content}) def add_assistant_message(self, content: str): self.history.append({role: assistant, content: content}) def get_messages_for_model(self): return list(self.history)3.3 WebSocket服务端实现最后用FastAPI把上面的模块串起来提供一个WebSocket端点供小程序连接。# main.py from fastapi import FastAPI, WebSocket, WebSocketDisconnect from model_client import Phi3Client from intent_manager import IntentManager from conversation_manager import Conversation, ConversationManager import asyncio app FastAPI() model_client Phi3Client(api_urlYOUR_MODEL_ENDPOINT, api_keyYOUR_API_KEY) intent_manager IntentManager() # 用一个字典在内存中管理会话生产环境建议用Redis等 conversation_manager {} app.websocket(/ws/chat) async def websocket_chat(websocket: WebSocket): await websocket.accept() session_id default_session # 实际应从连接参数或token中获取用户唯一标识 # 获取或创建该用户的对话记录 if session_id not in conversation_manager: conversation_manager[session_id] Conversation(session_id) conversation conversation_manager[session_id] try: while True: # 接收用户消息 user_message await websocket.receive_text() conversation.add_user_message(user_message) # 1. 意图识别 intent_result intent_manager.recognize(user_message) if intent_result[response]: # 如果是业务外问题直接返回预设回复 await websocket.send_text(intent_result[response]) conversation.add_assistant_message(intent_result[response]) continue # 2. 准备调用模型 messages_for_model conversation.get_messages_for_model() # 3. 流式调用模型并返回 full_response async for chunk in model_client.chat_stream(messages_for_model): await websocket.send_text(chunk) # 逐块发送给前端 full_response chunk # 可选添加一点延迟让流式输出更明显 # await asyncio.sleep(0.02) # 4. 将完整回复加入历史 conversation.add_assistant_message(full_response) except WebSocketDisconnect: # 连接断开清理资源这里简单示例实际可能保留历史一段时间 # del conversation_manager[session_id] print(f客户端 {session_id} 断开连接)这样一个具备基础意图识别、上下文管理和流式输出的后端服务就搭好了。4. 微信小程序前端打造流畅对话体验后端通了前端的任务就是做一个好看又好用的聊天界面。微信小程序提供了WebSocket和SocketTaskAPI用起来很方便。4.1 建立WebSocket连接与消息处理首先在小程序的生命周期函数如onLoad中建立连接并在onUnload中关闭连接管理好资源。// pages/chat/chat.js Page({ data: { messages: [], // 消息列表 inputValue: , // 输入框内容 socketConnected: false, socketTask: null, }, onLoad: function() { this.connectWebSocket(); }, onUnload: function() { this.closeWebSocket(); }, connectWebSocket: function() { const that this; // 替换为你的后端WebSocket地址注意必须是wss:// (生产环境) const wsUrl wss://your-backend.com/ws/chat; const socketTask wx.connectSocket({ url: wsUrl, success: () { console.log(WebSocket连接创建成功); }, fail: (err) { console.error(WebSocket连接失败, err); wx.showToast({ title: 连接客服失败, icon: none }); } }); this.setData({ socketTask }); socketTask.onOpen(() { console.log(WebSocket连接已打开); that.setData({ socketConnected: true }); that.addSystemMessage(已连接智能客服小智请问有什么可以帮您); }); socketTask.onMessage((res) { // 收到后端推送的消息流式片段或完整回复 const newContent res.data; that.handleIncomingMessage(newContent); }); socketTask.onClose(() { console.log(WebSocket连接已关闭); that.setData({ socketConnected: false }); }); socketTask.onError((err) { console.error(WebSocket发生错误, err); wx.showToast({ title: 连接出现异常, icon: none }); }); }, closeWebSocket: function() { if (this.data.socketTask) { this.data.socketTask.close(); } }, // ... 其他方法 })4.2 实现流式消息接收与渲染流式消息的核心是后端每生成一个词或一段话就立刻推送到前端。前端需要将这些片段拼接到当前正在接收的回复消息上。// pages/chat/chat.js 接上文 handleIncomingMessage: function(content) { let messages this.data.messages; const lastMessage messages[messages.length - 1]; // 判断是否是助手正在回复的消息即上一条消息是用户发的且最后一条消息是助手发的但未结束 if (lastMessage lastMessage.role assistant lastMessage.isStreaming) { // 是流式消息的后续片段追加到上一条消息 lastMessage.content content; // 更新最后一条消息 messages[messages.length - 1] lastMessage; } else { // 是新的一条助手回复消息或者是非流式的完整回复 const newAssistantMsg { role: assistant, content: content, isStreaming: true // 标记为流式输出中 }; messages.push(newAssistantMsg); } this.setData({ messages }); // 滚动到底部确保用户看到最新消息 this.scrollToBottom(); }, // 当收到流式结束的标记或发送下一条消息时需要将上一条助手消息的 isStreaming 设为 false sendMessage: function() { const inputVal this.data.inputValue.trim(); if (!inputVal || !this.data.socketConnected) return; // 1. 将用户消息添加到界面并清空输入框 const userMsg { role: user, content: inputVal }; let messages this.data.messages; // 如果上一条消息是助手且还在流式输出标记其结束 const lastMsg messages[messages.length - 1]; if (lastMsg lastMsg.role assistant lastMsg.isStreaming) { lastMsg.isStreaming false; messages[messages.length - 1] lastMsg; } messages.push(userMsg); this.setData({ messages, inputValue: }); this.scrollToBottom(); // 2. 通过WebSocket发送消息 this.data.socketTask.send({ data: inputVal, success: () { console.log(消息发送成功); }, fail: (err) { console.error(消息发送失败, err); this.addSystemMessage(消息发送失败请检查网络。); } }); }, scrollToBottom: function() { // 利用小程序页面滚动API延迟确保DOM更新 setTimeout(() { wx.pageScrollTo({ scrollTop: 99999, duration: 300 }); }, 100); }, addSystemMessage: function(content) { const msg { role: system, content: content }; this.setData({ messages: [...this.data.messages, msg] }); this.scrollToBottom(); },4.3 设计简洁的对话界面界面设计追求清晰简洁。主要分为三个区域顶部的标题栏、中间的聊天内容区、底部的输入栏。!-- pages/chat/chat.wxml -- view classchat-container !-- 标题栏 -- view classheader text智能客服小智/text view classconnection-status {{socketConnected ? connected : disconnected}} {{socketConnected ? 在线 : 离线}} /view /view !-- 聊天内容区 -- scroll-view classmessage-list scroll-y scroll-top{{scrollTop}} scroll-with-animation block wx:for{{messages}} wx:keyindex view classmessage-item message-{{item.role}} !-- 系统消息样式 -- block wx:if{{item.role system}} view classsystem-message{{item.content}}/view /block !-- 用户消息样式 -- block wx:elif{{item.role user}} view classbubble user-bubble{{item.content}}/view /block !-- 助手消息样式流式消息可能有光标动画 -- block wx:elif{{item.role assistant}} view classbubble assistant-bubble {{item.content}} text classstreaming-cursor wx:if{{item.isStreaming}}▌/text /view /block /view /block /scroll-view !-- 输入栏 -- view classinput-area input classinput-box value{{inputValue}} bindinputonInput bindconfirmsendMessage placeholder请输入您的问题... focus{{autoFocus}} / button classsend-btn bindtapsendMessage disabled{{!inputValue || !socketConnected}}发送/button /view /view相应的样式WXSS可以设计气泡、颜色、布局等让界面看起来更舒适这里就不展开详细代码了。5. 实际效果与优化思考把前后端都跑起来之后一个基本的智能客服机器人就成型了。在实际测试中对于“这个红色衬衫有货吗”、“我昨天的订单发货没”这类标准问题机器人能快速给出准确的回答体验很流畅。当然这只是个起点。要让这个客服真正变得“智能”和“好用”还有不少可以优化的地方知识库增强目前模型主要依靠提示词和有限的对话历史来回答。可以引入一个外部的知识库比如商品数据库、帮助文档当用户提问时先根据问题从知识库里检索出最相关的片段再把“问题知识片段”一起交给模型生成答案。这样能极大提升回答的准确性和专业性。多轮对话优化现在的上下文管理比较简单。对于更复杂的业务流比如退货申请可能需要引导用户一步步提供信息订单号、退货原因、照片等。这需要设计更复杂的对话状态管理。前端体验打磨可以加入消息发送状态发送中、已送达、历史记录查看、常见问题快捷按钮等功能让交互更友好。安全与合规一定要在后端加入敏感词过滤和内容审核机制防止模型被诱导产生不当言论。同时对用户数据进行脱敏处理保护隐私。6. 写在最后这次把Phi-3 Forest Laboratory模型和微信小程序结合搭建智能客服的尝试整体上挺顺利的。最大的感受是对于垂直领域的AI应用选择一个响应快、成本可控的轻量级模型再结合具体的业务逻辑进行“调教”往往比直接上最顶尖的通用大模型效果更好也更经济。小程序端的WebSocket连接和流式渲染稍微花点心思也能做出不错的实时对话体验。这套方案不仅适用于客服稍加改造也能用在智能导购、产品咨询、教育答疑等很多需要即时交互的场景里。如果你正打算为你的小程序增添一些AI互动能力不妨从一个小而专的场景开始试试。先跑通流程再逐步迭代优化。过程中遇到问题多查查文档多在社区里交流总能找到解决办法。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
 获取与实战)
