小程序新玩法：用通义千问打造逐字输出聊天机器人

摘要： 随着人工智能技术的不断进步，聊天机器人已成为提升用户体验的重要工具。本文将详细介绍如何在小程序中集成阿里的通义千问API，实现一个引人入胜的逐字输出聊天功能，让你的小程序交互更加生动。

一、实现方式

实现AI助理：

• 大模型出现之前的传统的方式：nlp[自然语言处理]-> word embedding->seq2seq-> Bert

• 大模型出现以后：

  1. 采用langchain/fastgpt大模型框架调用常见的大模型的接口：Chatgpt/月之暗面kimi/通义千问Qwen/百川Baichuan/盘古/文心一言/讯飞星火。

  2. 采用ollama开源模型[百川/通义/GPT/llama/ChatGLM]基于A100/H100/V100/4090的GPU进行本地模型部署，采用loRA技术进行训练微调，然后使用自己的程序去对接自己的大模型。 二、引言 在这个信息爆炸的时代，用户对交互体验的要求越来越高。逐字输出的聊天功能，能够模拟真实对话场景，给用户带来新奇的体验。本文将带你一步步实现这一功能。

三、通义千问简介

• 通义千问是一个专门响应人类指令的大模型，是一个灵活多变的全能型选手，能够写邮件、周报、提纲，创作诗歌、小说、剧本、coding、制表、甚至角色扮演。
• 通义千问作为国内能够访问的大模型，不需要魔法。并且新用户有限时免费~ 通义千问

四、小程序逐字输出聊天功能设计

• 功能概述：阐述逐字输出聊天功能的工作流程和用户体验目标。零等待，增加用户体验。
• 技术选型：选择小程序作为开发平台，以及技术实现的可行性。
• 通过流式传输聊天完成可以节省多少时间？从时间比较，两个请求大约需要 4 到 5 秒才能完全完成。但是，通过流式请求，我们在 0.1 秒后收到第一个令牌，然后每隔约 0.01-0.02 秒收到后续令牌。

五、环境搭建与API接入

• 申请key值并保存,按照 DashScope SDK ，或者直接api调用。
• 按照文档流程，接入通义千问API。可以使用 nodejs 等后端语言。API对接文档

// 流式输出返回示例 

{
    "status_code": 200,
    "request_id": "5d768057-2820-91ba-8c99-31cd520e7628",
    "code": "",
    "message": "",
    "output": {
        "text": null,
        "finish_reason": null,
        "choices": [
            {
                "finish_reason": "stop",
                "message": {
                    "role": "assistant",
                    "content": "材料：\n西红柿2个，鸡蛋3个，油适量，盐适量，糖适量，葱花适量。\n\n步骤：\n\n1. 鸡蛋打入碗中，加入少许盐，用筷子搅拌均匀，放置一会儿让蛋白和蛋黄充分融合。\n\n2. 西红柿洗净，切成小块。如果喜欢口感更沙一些，可以切得稍微大一些；如果喜欢口感细腻，可以切得小一些。\n\n3. 热锅凉油，油热后倒入打好的鸡蛋液，用铲子快速搅拌，炒至鸡蛋凝固并变成金黄色，盛出备用。\n\n4. 锅中再加一点油，放入切好的西红柿，用中小火慢慢翻煮，让西红柿出汁，这样炒出来的西红柿才会更甜。\n\n5. 西红柿出汁后，加入适量的糖，继续翻煮，直到西红柿变得软烂。\n\n6. 将炒好的鸡蛋倒回锅中，与西红柿一起翻煮均匀，让鸡蛋充分吸收西红柿的汁水。\n\n7. 最后，根据个人口味加入适量的盐调味，撒上葱花进行提香，翻炒均匀即可出锅。\n\n8. 如果喜欢汤汁多一些，可以适当加点水，调整一下浓稠度。\n\n西红柿炒鸡蛋就做好了，简单易做，营养美味，是一道家常菜的经典之作。"
                }
            }
        ]
    },
    "usage": {
        "input_tokens": 25,
        "output_tokens": 289,
        "total_tokens": 314
    }
}

六、实现逐字输出效果

• 前端逻辑：在小程序前端实现逐字输出。 在小程序中使用 onChunkReceived api，接受服务端的流式响应。监听 Transfer-Encoding Chunk Received 事件。当接收到新的chunk时触发。

• 数据处理：展示如何处理API返回的数据，以实现逐字输出。

七、源码示例

// 开启小程序请求设置， enableChunked
const requestTask = wx.request({

enableChunked: true,

url: `${settings_index.settings.host}/chat/stream-gpt?prompt=${encodeURIComponent(prompt)}`,

method: "GET",

responseType: "arraybuffer",

timeout: '120000',

success(res) {

// 请求成功的处理逻辑

},

fail: function (error) {

console.error(error);

},

complete: function () {

that.setData({

loading: false

});

}

});

// 处理流式响应回调
requestTask.onChunkReceived(res => {

const text = this.decodeChunk(new Uint8Array(res.data));

console.log('text:::', text);

// 拼接接收到的数据

this.setData({

fullContent: this.data.fullContent + text,

currentContent: this.data.currentContent + text

});


// 如果没有在显示逐字效果，则开始逐字显示

if (!this.data.isTyping) {

this.startTyping(this.data.currentContent);

}

});

八、总结

• 结合流式响应逐字输出，增加交互体验。
• 结合AI打造自己的智能助手，文件整理、图片生产。

结尾：

• 目前项目已经提交仓库，项目源码_欢迎star 感兴趣的老铁可以舔砖加瓦~
• 小程序体验码

参考文献与资源：

• 通义千问 官方文档
• 小程序文档 onChunkReceived

---