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

需求分析:

  • 基于大模型,打造一个聊天机器人;
  • 使用开放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})})},

6.完整代码

https://download.csdn.net/download/wang_yong_hui_1234/90150447?spm=1001.2014.3001.5501

替换成自己的id就可以了
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64531.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL笔记--多表查询

1--多表关系 多表关系基本上分为三种: 一对多(多对一); 多对多; 一对一; 1-1--多对一 在多的一方建立外键,指向一的一方的主键; 1-2--多对多 建立第三张中间表,中间表至少…

记一次mysql故障排除和硬盘扩容

问题发现 某天早上发现我的博客突然不能访问了。简单看了一下可能是数据库连接出了问题。这台服务器比较节约,网站和数据库都放在一个机器上。讲道理不该出现数据库连接问题的。 解决思路 首先需要熟悉mysql各个文件保存位置 项目位置日志保存位置/var/log/mysq…

Qt网络通信、线程之间通信详解

一、 网络通信协议主要包括TCP和UDP,但更常用和可靠的是TCP协议。TCP是一种面向连接的、可靠的、面向流的传输协议,特别适合用于连续数据传输。在Qt中,网络通信主要通过QTcpSocket类和QTcpServer类来实现。 QTcpSocket类用于建立TCP客户端和…

【多模态】MiniCPM-V多模态大模型使用学习

MiniCPM-V模型使用 前言1. 模型文件下载和选择2. 环境安装配置3. 模型微调3.1 qlora微调minicpm-v-int43.2 lora微调minicpm-v3.3 merge_lora3.4 lora微调后量化int4 4. 模型推理4.1 huggingface API4.2 swift API(A) swift(不支持batch inference)(B) s…

C#多线程系列章节五

线程创建的几种写法 thread类 threadpool 线程池 task类 Thread t = new Thread(func); t.Start();//线程开始执行threadPool.QueueUserWorkItem(test)创建var t1 = new Task(() => test(“Task 1”));t.start();Task.Run(() => test(“Task 2”));Task.Factory.StartNew…

clickhouse-介绍、安装、数据类型、sql

1、介绍 ClickHouse是俄罗斯的Yandex于2016年开源的列式存储数据库(DBMS),使用C语言编写,主要用于在线分析处理查询(OLAP),能够使用SQL查询实时生成分析数据报告。 OLAP(On-Line A…

Audition 2025 for Mac Au音频编辑软件

Mac分享吧 文章目录 Audition 2025 for Mac Au音频编辑软件 效果图展示一、Audition 2025 Au音频编辑软件 Mac电脑版——v25.0⚠️注意事项:1️⃣:下载软件2️⃣:安装软件2.1 安装AntiCC_5.9_简化版,操作步骤如下:2.2…

JAVA题目笔记(二十五)网络编程综合小练qa!3EF TG6U8.L;

一、多发多收 客户端: import java.io.*; import java.net.Socket; import java.util.Scanner;public class Test1_2 {public static void main(String[] args) throws IOException {//TCP发送端Scanner scnew Scanner(System.in);String b;//创建Socket对象Socket…

决策树的生成与剪枝

决策树的生成与剪枝 决策树的生成生成决策树的过程决策树的生成算法 决策树的剪枝决策树的损失函数决策树的剪枝算法 代码 决策树的生成 生成决策树的过程 为了方便分析描述,我们对上节课中的训练样本进行编号,每个样本加一个ID值,如图所示…

ES6中的map和set

Set ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成 Set 数据结构。 以下代码 const s new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x > s.add(x));for (let i of s…

C# 用语句初始化数据库,创建库和表 MySQL示例

目录 简要说明 代码实现 简要说明 有时候项目中,在部署过程中,单独用工具去创建数据库和表,会消耗很多人力和时间,也不利于后期程序迭代去增加数据表, 那可以在程序启动的时候,去判断数据库和表是否存在…

基于SpringBoot的疫苗在线预约功能实现十二

一、前言介绍: 1.1 项目摘要 随着全球公共卫生事件的频发,如新冠疫情的爆发,疫苗成为了预防和控制传染病的重要手段。传统的疫苗预约方式,如人工挂号或电话预约,存在效率低、易出错、手续繁琐等问题,无法…

java技术点

1 mysql的索引下推: 就是从减少服务层的的回表操作,在引擎层实现联表查询 2 可重入锁: 就是当前:z线程可重复获取锁,比如递归函数里有锁,防止死锁 3 解决redis脑裂: 参数 持久化 优化网络和硬件 4 加密: MD5 不可解 对称算法…

MySQL基础 -----MySQL数据类型

目录 INT类型 tinyint类型 类型大小范围 测试tinyint类型数据 float类型 测试: 测试正常数据范围的数据 测试插入范围超过临界值的数据: 测试float类型的四舍五入 ​编辑 decimal类型 同样测试: 字符串类型 char类型 测试&…

代码开发相关操作

使用Vue项目管理器创建项目:(vue脚手架安装一次就可以全局使用) windowR打开命令窗口,输入vue ui,进入GUI页面,点击创建-> 设置项目名称,在初始化git下面输入:init project&…

Pandas系列|第一期:列值的前N码模糊匹配

背景:物料清单(BOM)在做关键器件筛选时,需要筛选出编码的前N码模糊匹配给定的前缀list的所有bom行 关键点:前N码模糊匹配 df[col].str.startswith(tuple(item_prefix_list)) 解决方法: impor…

如何在 Ubuntu 22.04 上安装和使用 Rust 编程语言环境

简介 Rust 是一门由 Mozilla 开发的系统编程语言,专注于性能、可靠性和内存安全。它在没有垃圾收集的情况下实现了内存安全,这使其成为构建对性能要求苛刻的应用程序(如操作系统、游戏引擎和嵌入式系统)的理想选择。 接下来&…

MybatisPlus-配置加密

配置加密 目前配置文件中的很多参数都是明文,如果开发人员发生流动,很容易导致敏感信息的泄露。所以MybatisPlus支持配置文件的加密和解密功能。 我们以数据库的用户名和密码为例。 生成秘钥 首先,我们利用AES工具生成一个随机秘钥&#…

记录:virt-manager配置Ubuntu arm虚拟机

virt-manager(Virtual Machine Manager)是一个图形用户界面应用程序,通过libvirt管理虚拟机(即作为libvirt的图形前端) 因为要在Linux arm环境做测试,记录下virt-manager配置arm虚拟机的过程 先在VMWare中…

艾体宝案例丨CircleCI 助力 ANA Systems 打造高效 CI/CD 模型

在现代软件开发领域,效率和可靠性是企业在竞争中取胜的关键。本文将深入探讨 ANA Systems 如何通过引入业界领先的 CI/CD 平台——CircleCI,克服传统开发流程的瓶颈,实现开发运营效率的全面提升。同时,本文还将详细解析 CircleCI …