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

微信小程序通过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)=>{
          //流式输出完成后,修改并保存balance
          wx.request({
            url: ,
            method:'POST',
            data:{
              balance:this.data.balance,
              _id:this.data._id
            },
            success:(res)=>{
              wx.setStorageSync('user', res.data)
              console.log(res.data);
            }
          })
        }
      })
      //通过流式输出响应到页面上,并保存对话id
      requestTask.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.length
          this.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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端工程化基础(二):前端包管理工具npm/yarn/cnpm/npx/pnpm

前端包管理工具 代码共享方案 创建自己的官网&#xff0c; 将代码放到官网上面将代码提交到GitHub上面&#xff0c;负责让使用者下载将代码提交到npm registry上面 下载比较方便&#xff0c;使用npm install xxx即可下载相应的代码npm管理的包 npm配置文件 主要用于存储项目…

视云闪播截图

视云闪播截图 1. 截图设置2. 热键设置3. 视频截取3.1. 保存 -> 完成 References 深度学习图像数据获取工具。 视云闪播 https://www.netposa.com/Service/Download.html 1. 截图设置 视云闪播 -> 系统设置 -> 截图设置 2. 热键设置 视云闪播 -> 系统设置 ->…

洛谷 P3694 邦邦的大合唱站队 【状压DP】

数据约定&#xff1a; N ≤ 1 0 5 , M ≤ 20 N \leq 10^5, M \leq 20 N≤105,M≤20 思路 对于最终排好的状态&#xff0c;如果我们枚举排在最后一位的团队编号 j j j&#xff0c;可以发现&#xff1a;如果这个团队总共有 x x x 人的话&#xff0c;那么 [ n − x 1 , n ] …

计算机设计大赛 深度学习 植物识别算法系统

文章目录 0 前言2 相关技术2.1 VGG-Net模型2.2 VGG-Net在植物识别的优势(1) 卷积核&#xff0c;池化核大小固定(2) 特征提取更全面(3) 网络训练误差收敛速度较快 3 VGG-Net的搭建3.1 Tornado简介(1) 优势(2) 关键代码 4 Inception V3 神经网络4.1 网络结构 5 开始训练5.1 数据集…

一篇文章搞懂CNN(卷积神经网络)及其所含概念

目录 1. 什么是卷积神经网络&#xff1a;2. 应用领域&#xff1a;3. 架构&#xff1a;4. 卷积层的参数和名词参数&#xff1a;名词&#xff1a; 5. 注意&#xff1a;6. 经典网络&#xff1a;小结&#xff1a; 当下&#xff0c;计算机视觉在人工智能领域中扮演着至关重要的角色。…

java数组学习

目录 1.数组概念 2.数组的定义 3.数组的静态初始化 4.地址值 5.数组元素访问 6.索引 7.数组的遍历 8.数组的动态初始化 9.数组两种初始化方式的区别 10.数组常见问题 1.数组概念 数组是一种容器&#xff0c;可以同来存储同种数据类型的多个值。但是数组容器在存储数据…

漫漫数学之旅015

文章目录 经典格言数学习题古今评注名人小传 - 亚里士多德 经典格言 首要问题不是我们知道什么&#xff0c;而是我们如何知道的。——亚里士多德&#xff08;Aristotle&#xff09; 亚里士多德&#xff0c;这位古希腊的大哲学家&#xff0c;如果今天穿越到现代脱口秀舞台&…

SQL注入:sqli第一关

一、实验设备&#xff1a; 需要下载并安装phpstudy_pro&#xff0c;下载sqli-labs-php7-master解压到/phpstudy_pro/www中。 二、实验步骤&#xff1a; 1、在id1后加入一个闭合符号“ ‘ ”&#xff0c;但是当你输入?id1&#xff0c;是会报错的&#xff0c; http://127.0.…

vue3实现命令式弹窗

效果图 代码区域 首先实现弹窗组件my-modal.vue 这里实现一个极简易弹窗作为示例&#xff0c;其他功能和样式可自行补充和优化&#xff1b; <template><div class"modal-mask"><div class"modal-wrap"><div class"modal"…

Qt之使用Qt内置图标

一效果 二.原理 Qt内置图标封装在QStyle中,共七十多个图标,可以直接拿来用,能应付不少简单程序需求,不用自己去找图标并添加到资源文件了。 下面是内置图标的枚举定义: enum StandardPixmap {SP_TitleBarMenuButton,SP_TitleBarMinButton,SP_TitleBarMaxButton,SP_T…

JVM之Java内存区域

JVM-Java内存区域 Java内存区域是Java虚拟机&#xff08;JVM&#xff09;管理的内存资源的逻辑划分&#xff0c;用于存储程序运行时所需的数据。Java内存区域的合理划分和管理对于程序的性能和稳定性具有重要影响。本文将深入探讨Java内存区域的各个部分&#xff0c;包括方法区…

android inset 管理

目录 简介 Insets管理架构 Insets相关类图 app侧的类 WMS侧的类 inset show的流程 接口 流程 WMS侧确定InsetsSourceControl的流程 两个问题 窗口显示时不改变现有的inset状态 全屏窗口上的dialog 不显示statusbar问题 View 和 DecorView 设置insets信息 输入法显…

图数据库(neo4j)在工业控制中的应用

图模型 事物的模型中&#xff0c;除了它自身的某些特征之外&#xff0c;还包括它与其它事物的关系特征&#xff0c;例如一个学生的属性包括姓名&#xff0c;性别&#xff0c;年龄等属性&#xff0c;同时&#xff0c;他还有许多关系属性&#xff0c;比如他属于哪一个院系&#x…

认识Tomcat (一)

认识Tomcat &#xff08;一&#xff09; 一、服务器 1.1 服务器简介 ​ 硬件服务器的构成与一般的PC比较相似&#xff0c;但是服务器在稳定性、安全性、性能等方面都要求更高&#xff0c;因为CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。 ​ 软件服务器&…

数据分析:当当网书籍数据可视化分析

当当网书籍数据可视化分析 作者&#xff1a;i阿极 作者简介&#xff1a;Python领域新星作者、多项比赛获奖者&#xff1a;博主个人首页 &#x1f60a;&#x1f60a;&#x1f60a;如果觉得文章不错或能帮助到你学习&#xff0c;可以点赞&#x1f44d;收藏&#x1f4c1;评论&…

便宜寄快递,就选闪侠惠递,帮您省钱!

随着电子商务的发展&#xff0c;物流也越来越发达&#xff0c;人们的生活中有很多地方都与物流快递打交道。网购或者给远方的亲戚朋友寄礼物等等都需要快递。有时候就止步于昂贵的快递的&#xff0c;其实选对方法&#xff0c;寄快递并不贵... 编辑 现在一般寄快递都是选择去菜鸟…

第三百零七回

文章目录 1. 概念介绍2. 使用方法3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何在输入框中提示错误"相关的内容&#xff0c;本章回中将介绍如何在输入框中处理光标.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在使用TextField组件作为…

OpenCV 配置选项参考

介绍 注意 我们假设您已经阅读了 OpenCV 安装概述教程或具有使用 CMake 的经验。 可以通过几种不同的方式设置配置选项&#xff1a; 命令行&#xff1a;cmake -Doptionvalue ...初始缓存文件&#xff1a;cmake -C my_options.txt ...通过 GUI 进行交互 在本参考中&#xff…

InstantID:一张照片,无需训练,秒级个人写真生成

1. 引言 InstantID是一种基于扩散模型的强大解决方案。设计的即插即用模块仅使用单个面部图像就能熟练地处理各种风格的图像个性化&#xff0c;同时确保高保真度。它的核心是设计了一个新颖的 IdentityNet&#xff0c;通过强加语义和弱空间条件&#xff0c;将面部和地标图像与…

jmeter-04创建请求

文章目录 一、发送请求-查看响应流程二、新建请求三、选择请求方式&#xff0c;填写url1.发送get请求当只有请求方式不一样的时候&#xff0c;参数都填写在参数栏里面&#xff0c;GET请求与POST请求的区别&#xff1f; 2.发送post请求2.1 application/x-www-form-urlencoded2.2…