小程序快速实现大模型聊天机器人

需求分析：

基于大模型，打造一个聊天机器人；
使用开放API快速搭建，例如：讯飞星火；
先实现UI展示，在接入API。

最终实现效果如下：

在这里插入图片描述

一.聊天机器人UI部分

1. 创建微信小程序，基于TS模版开发

在这里插入图片描述

项目根目录执行以下命令：

npm init -ynpm install

在project.config.json文件找到‘setting’并添加如下配置

    "packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}],

执行构建npm

在这里插入图片描述

2. 初始化工具库

在项目根目录执行以下命令：

npm install crypto-js
npm install @types/crypto-js

在 miniprogram 下执行 npm init -y 快速创建 package.json 文件
在 miniprogram 目录下执行 npm i crypto-js
执行开发者工具菜单中的: 工具 -> 构建 npm，确保在 miniprogram 下面生成 miniprogram_npm 目录
重新运行小程序

导入towxml，进行格式化输出使用。
详细教程：https://github.com/sbfkcel/towxml

导入Vant Weapp组件库
https://vant-ui.github.io/vant-weapp/#/quickstart

3. 最终项目基本目录如下

在这里插入图片描述

4. 实现页面头部和底部布局

top-bar显示内容：背景渐变

在这里插入图片描述

bottom-bar显示内容：文字输入

在这里插入图片描述

5.实现聊天消息页面显示

使用讯飞星火大模型，官方注册帐号

在这里插入图片描述

使用WebSocket调用接口核心代码如下：

接口鉴权

// 讯飞接口鉴权
export function generateUrl(str: string, host: string, path: string, type: string) {const APIKey = ConfigUtil.APIKey;const APISecret = ConfigUtil.APISecret;const date = new Date().toUTCString();const tmp = `host: ${host}\ndate: ${date}\n${type} ${path} HTTP/1.1`;const tmp_sha = CryptoJS.HmacSHA256(tmp, APISecret);const signature = CryptoJS.enc.Base64.stringify(tmp_sha);const authorization_origin = `api_key="${APIKey}", algorithm="hmac-sha256", headers="host date request-line", signature="${signature}"`;const authorization = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(authorization_origin));const url = `${str}${host}${path}?authorization=${encodeURIComponent(authorization)}&date=${encodeURIComponent(date)}&host=${encodeURIComponent(host)}`;return url;
}

socket建立连接

//socket链接
connectWebsocket(str: string) {const that = thislet isFirst = false;//首条非空数据const socketTask = wx.connectSocket({url: utils.generateUrl('wss://', ConfigUtil.Host, ConfigUtil.Path, 'GET'),success(res) {console.log('连接成功', res)},fail(err) {console.log(err)that.setData({sendState: 0})}});socketTask.onOpen(function () {let text = { "role": "user", "content": str }console.log('onOpen 发送数据 text=', text)socketTask.send({data: JSON.stringify(utils.sendParams(text, that.data.historys))})})socketTask.onMessage(function (res: any) {console.log(res.data)const result = JSON.parse(res.data)let code=result.header.codeif (code != 0) {that.setData({sendState: 0})that.data.socketQueue.push(result.header.message)that.proMessage()return}let status = result.payload.choices.statuslet text=result.payload.choices.text[0].contentif (text != undefined) {isFirst = true}if (isFirst) {//首条非空数据that.setData({sendState: 2})}if (status == 2) {//最后一条数据that.setData({sendState: 0})}if (text != undefined) {that.data.socketQueue.push(text)that.proMessage()}})socketTask.onError(function (res) {console.log('onError=', res)})socketTask.onClose((res) => {console.log('onClose', res)that.setData({sendState: 0})})},