百川2-13B赋能微信小程序：打造个人AI聊天助手

百川2-13B赋能微信小程序：打造个人AI聊天助手

最近在捣鼓一些AI应用，发现很多朋友都想有个自己的聊天机器人，能随时聊聊天、问问问题。但直接用网页或者App总觉得不够方便，要是能集成在微信小程序里，点开就用，那体验就舒服多了。

正好，像百川2-13B这样能力不错的大语言模型，通过星图GPU平台部署成API后，调用起来很方便。我就琢磨着，能不能把它和微信小程序结合起来，自己动手做一个轻量级的个人AI助手。这想法听起来有点技术含量，但其实拆解开来，前端、后端、模型调用各司其职，实现路径很清晰。今天，我就把自己实践的过程和踩过的坑分享出来，希望能给有同样想法的朋友一些参考。

1. 为什么选择小程序+大模型？

在做技术选型前，我们先聊聊为什么这个组合有吸引力。核心就两点：便捷和个性化。

微信小程序不用安装，即用即走，对于聊天助手这类轻量级、高频次的应用场景再合适不过。用户不需要额外下载一个App，在微信里搜索打开就能用，分享给朋友也特别方便。这大大降低了用户的使用门槛。

而百川2-13B这类大模型，为我们提供了强大的“大脑”。它不仅能进行流畅的对话，还能完成一些简单的创作、问答、总结等任务。相比于调用公开的、功能固定的机器人接口，自己部署的模型API在数据隐私、功能定制和响应速度上更有把控力。你可以决定对话的风格，管理聊天历史，甚至在未来针对特定领域进行微调，让它更懂你。

把这两者结合起来，你就拥有了一个完全属于自己、触手可及的智能伙伴。无论是用来记录灵感、练习外语对话，还是当作一个随时可问的百科书，都非常实用。

2. 整体架构与核心流程

在开始写代码之前，我们先理清整个小程序是如何运作的。它的核心逻辑并不复杂，主要分为三块：小程序前端、后端API服务、以及大模型。

小程序前端负责所有用户能看见和交互的部分：聊天界面、输入框、发送按钮、历史记录列表。它的核心任务是收集用户输入，发送给后端，并优雅地展示模型返回的结果。

后端API服务在这里扮演着“中转站”和“处理器”的角色。它接收小程序发来的请求，进行必要的验证和格式化，然后调用部署在星图GPU平台上的百川2-13B模型API。这里的一个关键点是处理模型的“流式响应”，我们后面会详细说。

百川2-13B模型则是智慧的源泉。它根据接收到的对话历史和当前问题，生成连贯、合理的回复。我们通过API调用的方式获取它的输出。

整个对话的流程可以概括为以下几步：

1. 用户在小程序界面输入问题并点击发送。
2. 小程序将问题、以及本地存储的本次对话历史，打包成一个请求，发送给我们自建的后端API。
3. 后端API将这个请求转发给百川2-13B的API接口。
4. 模型开始生成回复，并以流（Stream）的形式逐步返回文本。
5. 后端接收到流式数据后，实时转发给小程序。
6. 小程序界面上的回答区域，像打字一样，逐字逐句地显示出完整的回复。
7. 对话结束后，小程序将本轮问答保存到本地，以便下次对话能保持上下文。

3. 小程序前端开发实战

前端是小程序的门面，直接决定了用户体验。我们主要关注三个部分：界面设计、网络请求封装和本地存储。

3.1 构建简洁的聊天界面

微信小程序的WXML和WXSS让我们可以快速搭建界面。一个典型的聊天界面需要包含：

• 一个滚动区域，用于展示对话历史（用户问题和AI回答交替出现）。
• 一个底部的输入框和发送按钮。
• 可以考虑添加清除历史、切换模型等辅助功能按钮。

在WXML中，我们用scroll-view组件来包裹对话列表，并确保其能自动滚动到底部。每条消息用一个view来展示，通过不同的样式类（如.user-msg和.ai-msg）来区分用户和AI。

<!-- pages/chat/chat.wxml 片段 --> <view class="chat-container"> <scroll-view class="message-list" scroll-y scroll-into-view="{{scrollToId}}" scroll-with-animation> <block wx:for="{{messages}}" wx:key="index"> <view class="message-item {{item.role}}"> <view class="avatar">{{item.role === 'user' ? '你' : 'AI'}}</view> <view class="bubble">{{item.content}}</view> </view> </block> </scroll-view> <view class="input-area"> <input value="{{inputValue}}" bindinput="onInput" placeholder="请输入您的问题..." confirm-type="send" bindconfirm="sendMessage"/> <button class="send-btn" bindtap="sendMessage" disabled="{{isLoading}}">发送</button> </view> </view>

对应的WSS需要定义好气泡、头像、布局等样式，让界面看起来清爽美观。重点是让消息列表的滚动体验流畅，输入区域固定在下方便于操作。

3.2 封装网络请求与处理流式响应

这是前端最核心的技术点。与普通API请求不同，大模型的流式响应（Server-Sent Events, SSE）需要特殊处理。

首先，我们不能使用微信小程序自带的wx.request，因为它不支持流式读取。我们需要使用wx.connectSocket来建立WebSocket连接，或者更简单地，使用fetch或自己封装一个支持流式读取的request方法。这里以使用较为底层的API为例，展示思路：

我们在小程序的utils目录下创建一个api.js文件，封装一个专门用于流式对话的函数。

// utils/api.js const API_BASE_URL = 'https://your-backend-server.com'; // 替换为你的后端服务地址 function streamChat(messages, onMessageUpdate, onFinish, onError) { // messages 是对话历史数组，格式如 [{role: 'user', content: '你好'}, {role: 'assistant', content: '你好！'}] return new Promise((resolve, reject) => { wx.request({ url: `${API_BASE_URL}/v1/chat/completions`, // 后端API地址 method: 'POST', data: { messages: messages, stream: true // 关键：告诉后端我们需要流式响应 }, responseType: 'text', // 注意：流式响应通常以文本形式接收 enableChunked: true, // 启用分块传输，用于接收流数据 success(res) { // 注意：对于流式响应，success回调触发时可能只收到了HTTP头，数据在后续事件中 // 这里需要根据后端实际返回的数据格式进行解析。 // 一种常见做法是后端将流数据包装为特定格式（如data: {...}\n\n），前端需要按行解析。 console.log('连接建立成功', res); // 实际的数据处理通常在 `onChunkReceived` 或类似事件中，这里需要根据你使用的HTTP库调整。 // 以下为伪代码逻辑： // 1. 监听数据到达事件 // 2. 将接收到的文本按行分割 // 3. 过滤掉非数据行（如“data: [DONE]”） // 4. 解析JSON，提取 delta content // 5. 调用 onMessageUpdate(deltaContent) 实时更新UI // 6. 流结束时调用 onFinish(fullMessage) }, fail(err) { console.error('请求失败', err); onError && onError(err); reject(err); } }); }); } // 由于微信小程序原生wx.request对SSE支持不完善，实践中更推荐使用第三方库（如weapp-sse）或自己用WebSocket模拟。 // 以下提供一个使用更友好库的示例思路（假设使用一个叫 `sse-client` 的库）： import SSE from './sse-client.js'; // 一个假设的SSE客户端库 function chatWithSSE(messages, onDelta, onComplete) { const url = `${API_BASE_URL}/v1/chat/completions?stream=true`; const eventSource = new SSE(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, payload: JSON.stringify({ messages: messages }) }); let fullResponse = ''; eventSource.addEventListener('message', (e) => { if (e.data === '[DONE]') { eventSource.close(); onComplete && onComplete(fullResponse); return; } try { const parsed = JSON.parse(e.data); const delta = parsed.choices[0]?.delta?.content || ''; if (delta) { fullResponse += delta; onDelta && onDelta(delta); // 每次收到一个片段，就更新UI } } catch (error) { console.error('解析SSE数据失败', error, e.data); } }); eventSource.addEventListener('error', (e) => { console.error('SSE连接错误', e); eventSource.close(); }); return eventSource; } module.exports = { streamChat, chatWithSSE };

在页面的JS文件中，我们调用这个API，并实时更新页面数据。

// pages/chat/chat.js const api = require('../../utils/api.js'); Page({ data: { messages: [], inputValue: '', isLoading: false, currentStreamingMessage: '' // 用于存储当前正在流式接收的AI回复 }, sendMessage() { const userInput = this.data.inputValue.trim(); if (!userInput || this.data.isLoading) return; // 1. 将用户消息加入列表并清空输入框 const newUserMsg = { role: 'user', content: userInput }; this.setData({ messages: [...this.data.messages, newUserMsg], inputValue: '', isLoading: true, currentStreamingMessage: '' // 准备接收新的流式回复 }); // 2. 构建本次请求的对话历史（通常只发送最近几轮以控制token数量） const chatHistory = this.getRecentHistory(); // 一个自定义函数，截取最近N条历史 // 3. 调用流式API this.eventSource = api.chatWithSSE( [...chatHistory, newUserMsg], (delta) => { // 收到流式数据片段，实时更新当前AI消息 this.setData({ currentStreamingMessage: this.data.currentStreamingMessage + delta }); // 滚动到底部 this.scrollToBottom(); }, (fullResponse) => { // 流式接收完毕 const newAiMsg = { role: 'assistant', content: fullResponse }; // 将完整的AI消息加入历史，并清空临时流式消息 this.setData({ messages: [...this.data.messages, newAiMsg], isLoading: false, currentStreamingMessage: '' }); // 保存到本地存储 this.saveChatHistory(); this.eventSource = null; } ); }, getRecentHistory() { // 简单示例：返回最近5轮对话（可根据token长度优化） return this.data.messages.slice(-10); // 10条消息（5轮对话） }, scrollToBottom() { // 实现滚动到底部的逻辑，例如设置scroll-into-view const lastMsgId = `msg-${this.data.messages.length}`; this.setData({ scrollToId: lastMsgId }); }, saveChatHistory() { // 使用wx.setStorageSync将this.data.messages保存到本地 try { wx.setStorageSync('chat_history', this.data.messages); } catch (e) { console.error('保存聊天记录失败', e); } }, onUnload() { // 页面卸载时关闭SSE连接 if (this.eventSource) { this.eventSource.close(); } } });

3.3 实现对话历史本地存储

为了让聊天有连续性，我们需要保存对话历史。微信小程序提供了wx.setStorageSync和wx.getStorageSync这两个同步API，非常适合这个场景。

在上面的saveChatHistory方法中，我们已经看到了如何保存。同样，在页面加载时（onLoad生命周期），我们需要读取历史记录。

// pages/chat/chat.js 的 onLoad 函数 onLoad() { // 从本地存储加载聊天历史 try { const history = wx.getStorageSync('chat_history') || []; this.setData({ messages: history }); } catch (e) { console.error('加载聊天记录失败', e); } }

你还可以增加一个“清除历史”的功能，只需清空data中的messages并调用wx.removeStorageSync('chat_history')即可。

4. 后端API服务搭建要点

小程序前端不能直接调用部署在星图GPU平台上的模型API，主要是出于域名白名单（wx.request要求后端域名已备案并加入小程序后台白名单）和安全考虑。因此，我们需要一个简单的后端服务做中转。

这个后端服务可以用任何你熟悉的语言编写，比如Python（Flask/FastAPI）、Node.js（Express/Koa）等。它的核心职责非常明确：

1. 接收请求：提供一个HTTP端点（如/v1/chat/completions），接收来自小程序的POST请求，请求体中包含messages和stream参数。
2. 转发请求：将接收到的请求，按照百川2-13B API要求的格式（包括认证头，如Authorization: Bearer {api_key}），转发给星图平台提供的模型API地址。
3. 处理流式响应：如果小程序请求了流式输出（stream: true），后端需要以流式方式从模型API读取数据，并同样以流式（如SSE）的形式返回给小程序。这是体验流畅的关键。
4. 错误处理与日志：处理模型API可能返回的错误，并记录日志以便排查问题。

这里是一个使用Node.js和Express框架的极简示例，展示核心逻辑：

// server.js (Node.js + Express) const express = require('express'); const axios = require('axios'); const app = express(); app.use(express.json()); const MODEL_API_URL = 'https://星图平台提供的模型API地址/v1/chat/completions'; const API_KEY = '你的星图平台API密钥'; app.post('/v1/chat/completions', async (req, res) => { const { messages, stream } = req.body; try { const response = await axios({ method: 'post', url: MODEL_API_URL, headers: { 'Authorization': `Bearer ${API_KEY}`, 'Content-Type': 'application/json', }, data: { messages, stream }, responseType: stream ? 'stream' : 'json', // 关键：根据请求决定响应类型 }); if (stream) { // 设置SSE相关的响应头 res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); // 将模型API的流式输出直接pipe到客户端响应 response.data.pipe(res); } else { // 非流式响应，直接返回JSON res.json(response.data); } } catch (error) { console.error('调用模型API失败:', error); res.status(500).json({ error: '模型服务暂时不可用' }); } }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`后端服务运行在 http://localhost:${PORT}`); });

重要提示：在实际部署时，你需要将这个后端服务部署到一个公网可访问的服务器（如云服务器），并配置好HTTPS（小程序要求），最后将服务地址配置到小程序后台的request合法域名中。

5. 效果展示与体验优化

当把前后端都跑通后，你就能在微信开发者工具里看到自己的AI聊天助手了。输入问题，AI的回答会像真人打字一样，一个字一个字地出现，这种体验比等待整个句子生成完再一次性显示要好得多。

为了让它更好用，这里有几个优化方向：

• 上下文长度管理：大模型有token限制。在发送历史消息给后端时，不要无限制地发送全部历史。可以只发送最近N轮对话，或者计算token数并截断最老的对话。这个逻辑可以在小程序前端或后端实现。
• 网络状态提示：在发送请求时显示“思考中...”，网络出错时给出友好提示，增强用户体验。
• 美化界面：为AI和用户的对话气泡设计不同的颜色、头像，甚至可以加入加载动画（如“正在输入...”的闪烁光标）。
• 多轮对话保持：确保本地存储和发送的历史消息逻辑一致，让AI能真正记住上下文。
• 功能扩展：可以增加语音输入（利用微信小程序的录音API）、对话导出、主题切换等功能。

6. 总结

走完这一趟，你会发现将一个百川2-13B这样的大模型塞进微信小程序，并没有想象中那么复杂。核心就是做好三件事：一个处理流式请求的小程序前端、一个负责中转的后端服务、以及一个稳定可靠的模型API。

这种个人AI助手的玩法，想象空间其实很大。它不仅仅是一个聊天玩具。你可以把它改造成一个专属的旅行顾问，只给你推荐喜欢的景点和美食；或者变成一个学习伙伴，用你指定的风格和你练习口语对话。因为后端和模型都是你自己控制的，所以怎么定制、怎么扩展，完全由你说了算。

过程中最关键的可能是流式响应的处理，它直接决定了用户体验的流畅度。另外，后端服务的稳定性和安全性也需要多花点心思，比如加上请求频率限制、简单的身份验证等。如果你对模型效果有更高要求，未来还可以探索如何在星图平台上对百川2-13B进行轻量微调，让它更擅长某个特定领域。

动手试试吧，从最简单的“你好”开始，看着自己打造的AI助手在手机微信里回应你，那种成就感还是挺棒的。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。