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

news2024/11/27 8:43:43

微信小程序通过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

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

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

相关文章

服务器使用过程中遇到常见故障及解决方案(包括蓝屏死机、无法删除的文件如何清理、网络卡、服务器连接不上等)

互联网时代&#xff0c;服务器的安全性和稳定性尤为重要&#xff0c;支撑着整个互联网行业的信息和数据安全。最近经常有客户咨询服务器的日常故障排除方法。由于服务器复杂的硬件结构和繁琐的运行原理&#xff0c;经常会出现这样那样的问题&#xff0c;有时即使是最小的问题也…

Redis -- set集合

挑战自己&#xff0c;每天进步一点点&#xff0c;成就将属于不停止脚步的你。 目录 Redis集合&#xff1f; 集合基本命令 sadd smembers sismember scard spop srandmember smove srem 集合间操作 sinter sinterstore sunion sdiff sdiifstore Redis集合&#…

Apple Vision Pro:新的隐私噩梦?

长期以来&#xff0c;苹果被誉为最注重隐私的科技公司之一&#xff0c;但如今&#xff0c;凭借售价 3499 美元的 Vision Pro&#xff0c;苹果可能已经打造出了一款终极监控机器。 作为苹果首款头戴式“空间计算”显示设备&#xff0c;号称将打造数字世界与物理世界交汇的新空间…

如何在本地部署chatGLM3

文章目录 1. 参考2. ChatGLM3 介绍3. 本地运行3.1 硬件配置3.2 下载ChatGLM3代码3.3 下载需要加载的模型3.4 运行大模型3.4.1 ChatGLM3目录介绍3.4.2 安装依赖3.4.2 综合demo演示3.4.3 启动对话模式工具模式代码解释器 4. 总结 前面一章节有讲到 基于MacBook Pro M1芯片运行ch…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之MenuItemGroup组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之MenuItemGroup组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、MenuItemGroup组件 该组件用来展示菜单MenuItem的分组。 子组件 无 接…

一次Kubernetes Pod内存异常导致的测试环境耗时异常问题排查过程

概述 在使用公司内部后台系统测试环境时发现一个请求加载慢的问题&#xff0c;简简单单的列表&#xff0c;查询MongoDB数据库&#xff0c;测试环境不过几百上千条数据而已&#xff0c;请求耗时居然高达5~6秒&#xff1a; 作为对比&#xff0c;生产环境的请求响应截图如下&…

flask+vue+python跨区通勤人员健康体检预约管理系统

跨区通勤人员健康管理系统设计的目的是为用户提供体检项目等功能。 与其它应用程序相比&#xff0c;跨区通勤人员健康的设计主要面向于跨区通勤人员&#xff0c;旨在为管理员和用户提供一个跨区通勤人员健康管理系统。用户可以通过系统及时查看体检预约等。 跨区通勤人员健康管…

Leetcode834. 树中距离之和

Every day a Leetcode 题目来源&#xff1a;834. 树中距离之和 解法1&#xff1a;换根 DP 题解&#xff1a;【图解】一张图秒懂换根 DP&#xff01;&#xff08;Python/Java/C/Go/JS&#xff09; 暴力做法是&#xff0c;以点 i 为为树根&#xff0c;从 i 出发对树进行深度…

【MATLAB源码-第135期】基于matlab的变色龙群优化算法CSA)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 变色龙群优化算法&#xff08;Chameleon Swarm Algorithm&#xff0c;CSA&#xff09;是一种新颖的群体智能优化算法&#xff0c;受到自然界中变色龙捕食和社交行为的启发。变色龙以其独特的适应能力而著称&#xff0c;能够根…

一分钟了解电脑关机快捷键是什么!

在日常使用电脑的过程中&#xff0c;了解一些基本的快捷键是提高效率的关键之一。其中&#xff0c;电脑关机快捷键是一个方便且迅速的操作&#xff0c;使您可以在不用通过烦琐的菜单操作的情况下&#xff0c;快速关机电脑。在本文中&#xff0c;我们将探讨电脑关机快捷键是什么…

【vue3学习笔记】自定义hook;toRef与toRefs

尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 课程 P156节 《自定义hook》笔记&#xff1a; 实现一个鼠标“打点”功能&#xff1a; 注意点&#xff1a; &#xff08;1&#xff09;组件卸载时需要接触window上的事件绑定&#xff0c;否则组件卸载后window上绑定的事件还在生…

R语言学习case10:ggplot基础画图Parallel Coordinate Plot 平行坐标图

step1: 导入ggplot2库文件 library(ggplot2)step2&#xff1a;带入自带的iris数据集 iris <- datasets::irisstep3&#xff1a;查看数据信息 dim(iris)维度为 [150,5] head(iris)查看数据前6行的信息 step4&#xff1a;利用ggplot工具包绘图 plot5 <- ggparcoord(…

mac如何实现升级node版本、切换node版本

一、 查看node所有版本&#xff08;前提:安装了nodejs&#xff09; npm view node versions二、安装指定node版本 sudo n 版本号三、检查目前安装了哪些版本的node&#xff0c;会出现已安装的node版本 n四、切换已安装的node版本 sudo n 版本号其他命令 1、sudo npm cache…

ChatGPT之制作短视频

引言 今天带来了如何使用 ChatGPT和剪映来制作简单的短视频教程&#xff0c;在这其中 ChatGPT的作用主要是帮我们生成文案&#xff0c;剪映的功能就是根据文案自动生成视频&#xff0c;并配上一些图片、动画、字幕和解说。 ChatGPT生成文案 首先&#xff0c;我们需要使用提示…

Open CASCADE学习|拉伸

目录 1、沿方向拉伸 2、沿路径拉伸 3、变形拉伸 1、沿方向拉伸 #include <Geom_CylindricalSurface.hxx> #include <gp_Ax3.hxx> #include <GeomAPI_Interpolate.hxx> #include <BRepAdaptor_Curve.hxx> #include <BRepBuilderAPI_MakeEdge.hxx&…

挖矿系列:细说Python、conda 和 pip 之间的关系

继续挖矿&#xff0c;挖金矿&#xff01; 1. Python、conda 和 pip Python、conda 和 pip 是在现代数据科学和软件开发中常用的工具&#xff0c;它们各自有不同的作用&#xff0c;但相互之间存在密切的关系&#xff1a; Python&#xff1a;是一种解释型、面向对象的高级程序设…

Jenkins升级后,构建任务配置界面重复错位

最近我把公司的Jenkins服务升级到了最新版本&#xff0c;升级完成后&#xff0c;点了一下构建任务&#xff0c;发现能够构建成功&#xff0c;就以为顺利完成升级了&#xff0c;下班走了&#xff0c;结果第二天&#xff0c;进入构建任务配置界面发现&#xff0c;界面一团乱麻&am…

Django的web框架Django Rest_Framework精讲(四)

文章目录 1.DRF认证组件Authentication2.权限Permissions3.限流Throttling4.过滤Filtering5.排序6.分页Pagination7.异常处理 Exceptions8.自动生成接口文档 大家好&#xff0c;我是景天&#xff0c;今天我们继续DRF的最后一讲&#xff0c;Django的web框架Django Rest_Framewor…

边缘计算网关在智能制造中有哪些应用?-天拓四方

在智能制造和工业生产环境中&#xff0c;数据已经成为新的生产要素&#xff0c;工业生产对实时性、灵活性和智能化也提出了更高的要求。而在这个过程中&#xff0c;边缘计算网关发挥着不可或缺的作用。它作为设备层与网络层之间的关键桥梁&#xff0c;确保了数据的实时、高效处…

Unity3d Cinemachine篇(六)— TargetGroup

文章目录 前言使用TargetGroup追随多个模型1. 创建二个游戏物体2. 创建TargetGroup相机3. 设置相机4. 完成 前言 上一期我们简单的使用了ClearShot相机&#xff0c;这次我们来使用一下TargetGroup 使用TargetGroup追随多个模型 1. 创建二个游戏物体 2. 创建TargetGroup相机 3…