当前位置：首页 > news >正文

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

news 来源：原创 2025/6/15 4:51:29

需求分析：

基于大模型，打造一个聊天机器人；
使用开放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就可以了
在这里插入图片描述

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

需求分析： 基于大模型，打造一个聊天机器人；使用开放API快速搭建，例如：讯飞星火；先实现UI展示，在接入API。最终实现效果如下： 一.聊天机器人UI部分 1. 创建微信小程序&#xff0c…...

编程日记 2025/6/2 6:37:00

用shell脚本来判断web服务是否运行（端口和进程两种方式）

判断web服务是否运行（1、查看进程的方式判断该程序是否运行，2、通过查看端口的方式判断该程序是否运行），如果没有运行，则启动该服务并配置防火墙规则。------这里以nginx为例一、用进程方式判断 （1&#…...

编程日记 2025/6/4 14:30:00

Android运行低版本项目可能遇到的问题

Android运行低版本项目可能遇到的问题低版本项目总是遇到各种问题的，耐心点一、gradle-xxx.xxx.xxx.zip一直下载不下来在gradle-wrapper.properties可以试下 distributionBaseGRADLE_USER_HOME distributionPathwrapper/dists zipStoreBaseGRADLE_USER_HOME …...

编程日记 2025/6/3 3:14:17

SQL Server 解决游标性能问题的替代方案

在 SQL Server 中，游标（Cursor）是一种用于逐行处理数据集的强大工具，但在某些情况下，它们可能会导致性能问题，尤其是在处理大量数据时。为了提高性能和可维护性，可以考虑使用其他替代方案。以下…...

编程日记 2025/6/1 1:01:23

【论文笔记】CLIP-guided Prototype Modulating for Few-shot Action Recognition

🍎个人主页：小嗷犬的个人主页 🍊个人网站：小嗷犬的技术小站 🥭个人信条：为天地立心，为生民立命，为往圣继绝学，为万世开太平。基本信息标题: CLIP-guided Prototype Mo…...

编程日记 2025/5/31 16:52:44

PHP：从入门到进阶的全方位探索

PHP（Hypertext Preprocessor）作为一种开源的服务器端脚本语言，自1995年问世以来，凭借其简单易学、高效灵活的特点，迅速成为了Web开发领域的中流砥柱。无论是构建动态网页、开发Web应用程序，还是处理复杂的服…...

编程日记 2025/6/4 10:57:37

vue复习

1.试述前端开发技术发展变化历程，理解推动技术发展动力以及对软件开发职业的启发。 2.当前前端开发技术主要特征有哪些？ 前后端分离开发： 前端专注页面展示效果与用户使用体验,后端专注为前端提供数据和服务。工程化特征：模块…...

编程日记 2025/6/2 8:50:25

伊克罗德与九科信息共同发布RPA+AI智能机器人解决方案

12月12日，伊克罗德信息在上海举办“创见AI，迈进智能化未来——科技赋能零售电商”活动，与九科信息、亚马逊云科技共同探讨与分享，融合生成式AI技术和智能自动化（RPA,Robotic Process Automation）在电商零售…...

编程日记 2025/6/4 0:20:03

nano编辑器的使用

nano 是一个非常简单易用的命令行文本编辑器，它常用于在 Linux 或类 Unix 系统中快速编辑文件，特别适用于需要修改配置文件或快速编辑文本的场景。以下是一些常见的 nano 使用技巧和基本操作。 1. 打开文件要使用 nano 编辑文件，打开终端并…...

编程日记 2025/5/30 1:20:17

灵当crm pdf.php存在任意文件读取漏洞

免责声明: 本文旨在提供有关特定漏洞的深入信息，帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步，未经授权访问系统、网络或应用程序，可能会导致法律责任或严重后果。因此，作者不对读者基于本文内容所采取的任何行为承担责任。读者在…...

编程日记 2025/6/1 6:10:31

Liinux下VMware Workstation Pro的安装，建议安装最新版本17.61

建议安装最新版本17.61，否则可能有兼容性问题下载VMware Workstation安装软件从官网网站下载 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro 选择所需版本现在最新版本是17.61，否则可能有兼容性问题…...

编程日记 2025/6/1 21:11:43

性能测试度量指标学习笔记

目录一、概要二、不同系统软件性能测试度量指标三、性能测试度量指标 1、响应时间 2、用户数 3、系统处理能力 4、错误率 5、成功率 6、资源占用率 7、CPU利用率 8、内存页交换速率 9、内存占用率 10、磁盘IO 11、磁盘吞吐量 12、网络吞吐量 13、系统稳定性…...

编程日记 2025/5/30 8:44:12

一款可以替代Navicat的数据库管理工具

Navicat是一款非常受欢迎的数据库管理工具，基本支持市面上的所有数据库、而且支持跨平台。可以说Navicat是一款功能强大、非常全面的数据库管理工具，提供了多种版本和定价方案，以满足不同用户的需求和预算。也是很多企业的首选工具&#…...

编程日记 2025/6/2 20:48:15

使用C#在目录层次结构中搜索文件以查找目标字符串

例程以递归方式搜索目录层次结构中的文件以查找目标字符串。它可以搜索几乎任何类型的文件，即使它不包含 Windows 理解的文本。例如，它可以搜索 DLL 和可执行文件以查看它们是否恰好包含字符串。下面的代码中显示的ListFiles 方法完成了大部分工作。 …...

编程日记 2025/6/2 11:14:42

C++设计模式

C设计模式什么是 C 设计模式？设计模式的用途设计模式的核心原则设计模式的分类 1. 创建型设计模式1.1 单例模式（Singleton Pattern）1.2 工厂方法模式（Factory Method Pattern）1.3 抽象工厂模式（Abstract F…...

编程日记 2025/6/2 18:28:47

1、LM7805稳压器 https://zhuanlan.zhihu.com/p/626577102?utm_campaignshareopn&utm_mediumsocial&utm_psn1852815231102873600&utm_sourcewechat_sessionhttps://zhuanlan.zhihu.com/p/626577102?utm_campaignshareopn&utm_mediumsocial&utm_psn18528…...

编程日记 2025/6/1 19:37:01

使用 MyBatis-Plus Wrapper 构建自定义 SQL 查询

前言 MyBatis-Plus (MP) 是一款基于 MyBatis 的增强工具，它简化了数据库操作，提供了诸如自动分页、条件构造器等功能，极大地提高了开发效率。其中，Wrapper 条件构造器是 MP 的核心功能之一，它允许开发者以链式调用的方…...

编程日记 2025/6/4 13:11:36

C# OpenCvSharp DNN 实现百度网盘AI大赛-表格检测第2名方案第一部分-表格边界框检测

目录说明效果模型项目代码 frmMain.cs YoloDet.cs 参考下载其他说明百度网盘AI大赛-表格检测的第2名方案。该算法包含表格边界框检测、表格分割和表格方向识别三个部分，首先，ppyoloe-plus-x 对边界框进行预测，并对置信…...

编程日记 2025/6/3 2:12:07

手分割数据集labelme格式505张1类别

数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：505 标注数量(json文件个数)：505 标注类别数：1 标注类别名称:["hands"] 每个类别标注的框数&#xf…...

编程日记 2025/5/30 18:00:14

2012年西部数学奥林匹克试题(几何)

2012/G1 △ A B C \triangle ABC △ABC 内有一点 P P P, P P P 在 A B AB AB, A C AC AC 上的投影分别为 E E E, F F F, 射线 B P BP BP, C P CP CP 分别交 △ A B C \triangle ABC △ABC 的外接圆于点 M M M, N N N. r r r 为 △ A B C \triangle ABC △ABC 的内…...

编程日记 2025/6/2 10:30:27

GB28181系列三：GB28181流媒体服务器ZLMediaKit

我的音视频/流媒体开源项目(github) GB28181系列目录目录一、ZLMediaKit介绍二、 ZLMediaKit安装、运行(Ubuntu) 1、安装 2、运行 3、配置三、ZLMediaKit使用一、ZLMediaKit介绍 ZLMediaKit是一个基于C11的高性能运营级流媒体服务框架，项目地址&#xf…...

编程日记 2025/6/4 6:49:58

【微服务】SpringBoot 整合Redis Stack 构建本地向量数据库相似性查询

目录一、前言二、向量数据库介绍 2.1 什么是向量数据库 2.2 向量数据库特点 2.3 向量数据库使用场景三、常用的向量数据库解决方案 3.1 Milvus 3.1.1 Milvus是什么 3.1.2 Milvus主要特点 3.2 Faiss 3.2.1 Faiss是什么 3.2.2 Faiss主要特点 3.3 Pinecone 3.3.1 …...

编程日记 2025/5/31 18:12:40

神州数码DCME-320 online_list.php存在任意文件读取漏洞

编程日记 2025/6/3 6:34:45

Shadcn UI 实战：打造可维护的企业级组件库

"我们真的需要自己写一套组件库吗？"上周的技术评审会上,我正在和团队讨论组件库的选型。作为一个快速发展的创业公司,我们既需要高质量的组件,又想保持灵活的定制能力。在对比了多个方案后,我们选择了 shadcn/ui 这个相对较新的解决方案。说实话,最开始…...

编程日记 2025/6/3 7:16:24

C#速成（GID+图形编程）

常用类类说明Brush填充图形形状,画刷GraphicsGDI绘图画面，无法继承Pen定义绘制的对象直线等（颜色，粗细）Font定义文本格式（字体，字号） 常用结构结构说明Color颜色Point在平面中定义点Rectan…...

编程日记 2025/6/2 16:28:42

CMD使用SSH登陆Ubuntu

1.确认sshserver是否安装好 ps -e | grep sshd 450 ? 00:00:00 sshd 2、如果看到sshd那说明ssh-server已经启动了其实在/etc/ssh下有一个sshd_config 文件。对这个文件进行修改vim sshd_config。往文件中添加如下内容： Port 22 Protocol 2 PermitRootLogin yes P…...

编程日记 2025/5/29 14:21:27

Fay环境安装及使用

一、项目源码代码地址 ： Fay 2D数字人源码地址：xuniren LLM用是清华开源的ChatGLM源码地址：ChatGLM-6B 模型地址chatglm2-6b-int4 （大模型的安装直接参考了我的另一篇文章：ChatGLM2-6B-int4的…...

编程日记 2025/6/4 17:26:14

重写 `equals` 和 `hashCode` 的一致性

重写 equals 和 hashCode 的一致性在 Java 中，当我们重写 equals 方法时，通常需要同时重写 hashCode 方法，以确保对象在逻辑上相等时，其哈希值也相等。这是一种重要的契约（contract），主要用于…...

编程日记 2025/6/3 19:28:21

【游戏设计原理】14 - MDA：游戏的机制、运行和体验

1. 学习、分析并总结 MDA 原理 MDA (Mechanics, Dynamics, and Aesthetics) 是一种用来分析和理解游戏设计的框架，由 Marc LeBlanc, Robin Hunicke, 和 Robert Zubek 提出。这个框架将游戏分解为三个核心要素： Mechanics（机制）&…...

编程日记 2025/5/31 19:02:06

鸿蒙Next创建自定义组件总结

一、引言在鸿蒙Next开发中，自定义组件是构建高效、可维护UI的重要组成部分。它具有可组合、可重用以及数据驱动UI更新等特点，能帮助开发者更好地实现代码复用、业务逻辑与UI分离等目标。本文将详细总结创建自定义组件的相关知识，包括其基本…...

编程日记 2025/6/1 15:42:44

redis 缓存使用

工具类 package org.springblade.questionnaire.redis;import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.core.type.TypeReference; import com.fasterxml.jackson.databind.ObjectMapper; import org.springframework.beans.factor…...

编程日记 2025/6/3 13:18:14

一.聊天机器人UI部分

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

2. 初始化工具库

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

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

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

6.完整代码

相关文章：