微信小程序课设(基于云开发)

微信小程序通过Laf云平台接入ChatGPT实现聊天,回答方式采用流式回答。

以下是图片展示其页面

回答次数通过卡密兑换

以下是对话页面的代码

<!--pages/content/content.wxml--><view class="container"><view class="div" hidden="{{AnswerList.length>0}}"><view><image src="../../images/editor.png" mode=""/><text class="one-text">AI创作</text></view><view><image src="../../images/tip.png" mode=""/><text class="one-text">有趣的提问</text></view><view><image src="../../images/book.png" mode=""/><text class="one-text">AI百科</text></view></view><view class="div-two" hidden="{{AnswerList.length>0}}"><view class="div-two-one"><text bindtap="handleTextClick" data-message="写一首赞美祖国的诗">写一首赞美祖国的诗→</text><text bindtap="handleTextClick" data-message="写一篇科幻小说" >写一篇科幻小说→</text><text bindtap="handleTextClick" data-message="安排一场发布会流程" >安排一场发布会流程→</text></view><view class="div-two-one"><view class="div-two-one"><text bindtap="handleTextClick" data-message="有哪些有趣的科学实验" >有哪些有趣的科学实验→</text><text bindtap="handleTextClick" data-message="一个AI也回答不出来的问题" >问一个AI也回答不出来的问题→</text><text bindtap="handleTextClick" data-message="AI会替代人类工作吗?" >AI会替代人类工作吗?→</text></view></view><view class="div-two-one"><text bindtap="handleTextClick" data-message="用简单的术语来解释人工智能" >用简单的术语来解释人工智能→</text><text bindtap="handleTextClick" data-message="红烧牛肉的做法" >红烧牛肉的做法→</text><text bindtap="handleTextClick" data-message="请介绍一下你自己" >请介绍一下你自己→</text></view></view><scroll-view scroll-y="true" hidden="{{AnswerList.length==0}}"><view class="div-answer" wx:for="{{AnswerList}}" wx:key="index"><view class="answer"><image src="../../images/49.webp"></image><rich-text>{{item.message}}</rich-text></view><view class="answer answer-one"><image src="../../images/chatgpt.jpeg"></image><rich-text>{{item.answer || '...'}}</rich-text></view></view></scroll-view><view class="question"><view class="question-one"><textarea disabled="{{isDisable}}" class="texta" value="{{question}}" placeholder="请输入内容" style="width: 80%;" bindinput="inputChange" ></textarea><image src="../../images/send.png" bind:tap="submitQuestion"></image></view></view></view>
//流式响应格式 
const requestTask=wx.request({url: ,method:'POST',data:{message:this.data.AnswerList[this.data.AnswerList.length-1].message,parentMessageId:this.data.conversationId},enableChunked:true,success:(res)=>{//流式输出完成后,修改并保存balancewx.request({url: ,method:'POST',data:{balance:this.data.balance,_id:this.data._id},success:(res)=>{wx.setStorageSync('user', res.data)console.log(res.data);}})}})//通过流式输出响应到页面上,并保存对话idrequestTask.onChunkReceived((response)=>{const arrayBuffer = response.data;const uint8Array = new Uint8Array(arrayBuffer);let text = wx.arrayBufferToBase64(uint8Array);text = Base64.decode(text);const t1=text.split("--!")if (t1.length>1) {this.setData({parentMessageId:t1[1]})}const len=this.data.AnswerList.lengththis.data.AnswerList[len-1]={message:this.data.AnswerList[len-1].message,answer:this.data.AnswerList[len-1].answer+t1[0]}this.setData({AnswerList:this.data.AnswerList,isDisable:false})console.log(t1);})

详细代码通过加企鹅获取

493305086

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

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

相关文章

软件测试学习笔记-使用jmeter进行接口测试

使用jmeter之前首先需要安装jdk&#xff0c;配置其环境变量&#xff0c;然后再安装jmeter 软件测试学习笔记-使用jmeter进行接口测试 1. 断言1. 响应断言2. JSON断言 2. 参数化1. 用户定义的变量2. CSV参数化 3. 接口关联4. 连接数据库 1. 断言 对某个接口其中一些信息进行判断…

DiskGenius v4.30专业版下载

DiskGenius是一款专业级的数据恢复软件&#xff0c;算法精湛、功能强大&#xff0c;用户群体广泛&#xff1b;支持各种情况下的文件恢复和分区恢复&#xff0c;恢复效果好&#xff1b;文件预览、扇区编辑、加密分区恢复、Ext4分区恢复、RAID恢复等高级功能应有尽有&#xff0c;…

Vue3+TS+Vite+Pinia最全学习总结

VUE3介绍 vue2和vue3之间的区别 因为需要遍历data对象上所有属性&#xff0c;所以如果data对象属性结构嵌套很深&#xff0c;就会存在性能问题。因为需要遍历属性&#xff0c;所有需要提前知道对象上有哪些属性&#xff0c;才能将其转化为getter和setter,所以vue2中无法将data新…

一起畅玩!幻兽帕鲁服务器1分钟开服,不服来战!

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

Facebook的社交影响力:用户行为解析与趋势

在当今数字时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分&#xff0c;而Facebook作为全球最大的社交平台之一&#xff0c;其社交影响力愈发显著。本文将深入分析Facebook的社交影响力&#xff0c;解析用户行为&#xff0c;同时探讨当前和未来的社交趋势。 社…

vue项目线上页面刷新报404 解决方法

一.修改配置文件 nginx.conf &#xff0c;并重新加载或重启 我的nginx版本是1.9.9 location / {try_files $uri $uri/ /index.html; }原因&#xff1a; 打包后的dist下只有一个 index.html 文件及一些静态资源&#xff0c;这个是因为Vue是单页应用(SPA)&#xff0c;只有一个…

学习Spring的第十三天

非自定义bean注解开发 设置非自定义bean : 用bean去修饰一个方法 , 最后去返回 , spring就把返回的这个对象,放到Spring容器 一 :名字 : 如果bean配置了参数 , 名字就是参数名 , 如果没有 , 就是方法名字 二 : 如果方法产生对象时 , 需要注入数据 , 在方法参数设置即可 , …

SOME/IP SD 协议介绍(四)服务发现通信行为

服务发现通信行为 启动行为 服务发现将根据服务实例处于以下三个阶段之一&#xff1a; • 初始等待阶段 • 重复阶段 • 主要阶段 一旦系统启动并且用于服务实例的接口连接已建立&#xff0c;服务发现将进入该服务实例的初始等待阶段。 在进入初始等待阶段并在发送第一条服…

VScode+PlatformIO 物联网Iot开发平台环境搭建

1.vscode &#xff08;1&#xff09;安装platformIO插件 &#xff08;2&#xff09;新建项目或导入已有的arduino项目 Name&#xff1a;需要填写你项目的名称&#xff1b; Board&#xff1a;点开是一个下拉框&#xff0c;但是可以输入你想要的开发板&#xff0c;这里选择&quo…

你所不知道的关于库函数和系统调用的那些事

系统调用和库函数的区别 相信大家在面试或者刷面试题的时候经常能看到这样的问题&#xff0c;“简述一下系统调用和库函数的区别”。 系统调用是操作系统提供给用户的接口&#xff0c;能让用户空间的程序有入口访问内核。而库函数数一组标准函数&#xff0c;比如复合 POSIX 或…

90.网游逆向分析与插件开发-游戏窗口化助手-项目需求与需求拆解

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;实现物品使用策略的功能-CSDN博客 项目需求&#xff1a; 在游戏窗口化时&#xff0c;可以在游戏之外弹出一个窗口&#xff0c;可以隐藏或者显示游戏窗口&#xff0c;显示游戏人物的基本状态&#xff…

LeetCode--代码详解 2.两数相加

2.两数相加 题目 难度&#xff1a;中等 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数…

【JavaScript + CSS】随机生成十六进制颜色

效果图 实现 <template><div class"year_area"><div class"year_list"><el-row :span"24"><div :class"showAll"><el-col :span"5" v-for"(item, index) in defaulList" :key&…

电动汽车充放电V2G模型(matlab代码)

目录 1 主要内容 1.1 模型背景 1.2 目标函数 1.3 约束条件 2 部分代码 3 效果图 4 下载链接 1 主要内容 本程序主要建立电动汽车充放电V2G模型&#xff0c;采用粒子群算法&#xff0c;在保证电动汽车用户出行需求的前提下&#xff0c;为了使工作区域电动汽车尽可能多的消…

迁移学习实现图片分类任务

导入工具包 import time import osimport numpy as np from tqdm import tqdmimport torch import torchvision import torch.nn as nn import torch.nn.functional as Fimport matplotlib.pyplot as plt %matplotlib inline# 忽略烦人的红色提示 import warnings warnings.fi…

okhttp 的 拦截器

拦截器有很多作用&#xff0c;实现就是责任链模式&#xff0c;细节&#xff0c;等我有时间补上。 后面有时间更新一下。 OkHttp最核心的工作是在 getResponseWithInterceptorChain() 中进行&#xff0c;在进入这个方法分析之前&#xff0c;我们先来了 解什么是责任链模式&…

Java split 分割字符串避坑

使用split进行字符串分割时需要注意2点 1、特殊字符作为分隔符时需要使用\\进行转义(如\\ -> \\\\; | -> \\| ) 特殊字符 .$|()[{^?*\\ 例如对"|"分隔 未转义 String str "01|02|03"; String[] strArr str.split("|");System.out.…

点击按钮打开自定义iframe弹窗

1、效果 点击按钮打开弹窗&#xff1a; 打开弹窗后&#xff1a; 2、代码 <!DOCTYPE html> <html><head><title>iframe弹窗</title><style>/* 使用媒体查询来实现响应式设计 */media (min-width: 768px) {.popup {width: 80%; /* 设置…

【c/python】GtkBox

一、GtkBox及C语言示例 GtkBox是一个容器部件&#xff0c;用于在GTK&#xff08;GIMP Toolkit&#xff09;应用程序中水平或垂直地排列多个子部件。以下是一个简单的例子&#xff0c;展示了如何在一个基本的GTK应用程序中使用GtkBox来垂直排列两个按钮&#xff1a; 首先&#…

用Python Tkinter打造的精彩连连看小游戏【附源码】

文章目录 连连看小游戏&#xff1a;用Python Tkinter打造的精彩游戏体验游戏简介技术背景MainWindow类:职责:方法:Point类: 主执行部分:完整代码&#xff1a;总结&#xff1a; 连连看小游戏&#xff1a;用Python Tkinter打造的精彩游戏体验 在丰富多彩的游戏世界中&#xff0c…