vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话

vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话

模拟 chatgpt 聊天功能,展示对话效果。其中比较有意义的技术点是:js 实现逐字显示、延时函数,同步遍历。
在这里插入图片描述

<template><div class="chat-gpt"><div id="chat-dialog" class="chat-dialog" ref="chatDialogRef"><div id="chat-list" class="chat-list" ref="chatListRef"><div v-for="(item, index) in chatList" :key="index"><imgv-if="item.status && index % 2 == 0"src="../../public/img/speak1.gif"alt=""/><div :class="index % 2 == 0 ? 'odd' : 'even'">{{ item.content }}</div></div></div></div></div>
</template><script>
export default {data() {return {textCount: 0,timer: null,chatBaseList: ["以今日5辆满电无人车,运输5小时能运完50吨货物的标准,已知每辆无人车运输1小时耗电10%,运输效率是多少,每辆无人车耗电多少?花费多长时间?","运输效率:50吨/5小时=10顿/小时,每辆无人车耗电:10%×5小时=50%,需花费5小时。","以现有运输效率前提下,再增加5辆无人运输车,完成共计150吨物资的运输任务,整体效率会提高到多少?每辆无人车耗电又是多少?共花费多长时间?","增加到10辆无人车,完成共计150吨物资运输任务,整体效率会提高到15顿/小时,每辆无人车耗电百分比是15%。运完150吨的话,总共要耗用1.5小时。","我来想想是否确认执行此调配操作?","您好,请您慎重考虑。我们将根据您的确认来决定是否执行此调配操作。","是"],chatList: []};},mounted() {this.initGPT();},methods: {// 延时函数sleep(delaytime = 10000) {return new Promise(resolve => setTimeout(resolve, delaytime));},// 同步遍历,自定义延时时间async delayDo(iterList,callback = data => console.log(`数据:${data}`),delaytimeList) {let len = iterList.length;for (let i = 0; i < len; i++) {callback(iterList[i], i);await this.sleep(delaytimeList[i]);}},// 逐字显示内容getChatContent(text, index) {this.timer = setInterval(() => {this.textCount++;if (this.textCount == text.length + 1) {this.textCount = 0;this.chatList.splice(index, 1, { content: text, status: false });clearInterval(this.timer);return;}// 取字符串子串let nowStr = text.substring(0, this.textCount);this.chatList.splice(index, 1, { content: nowStr, status: true });}, 200);},// 点击开始聊天initGPT() {// const delaytimeList = [11000, 8000, 6000, 15000, 4000];const delaytimeList = [16000, 11000, 16000, 16000, 5000, 7000];this.delayDo(this.chatBaseList,(item, i) => {this.getChatContent(item, i);},delaytimeList);}}
};
</script><style lang="scss" scoped>
.chat-gpt {width: 33rem;height: 43rem;.chat-dialog {position: relative;height: 43rem;background: 0/33rem url("../../public/img/chat-bg.png") no-repeat;overflow: hidden;.close-icon {position: absolute;top: 1rem;right: 1rem;width: 3.4rem;height: 3.4rem;img {width: 100%;height: 100%;}}.chat-list {display: flex;flex-direction: column;width: 90%;margin: 0 auto;margin-top: 2rem;overflow: auto;>div {display: flex;margin-top: 1rem;>div {max-width: 19rem;padding: 0.6rem;opacity: 0.8;font-size: 0.9rem;font-family: FZLanTingHei-L-GBK;font-weight: 400;color: #c5e7ff;text-align: start;}.odd {align-self: flex-start;background: #435e6f;border-radius: 0px 16px 16px 16px;}.even {align-self: flex-end;background: #31b8c8;border-radius: 16px 0px 16px 16px;}img {width: 2rem;height: 2rem;margin-right: 1rem;}}>div:nth-of-type(odd) {align-self: flex-start;}>div:nth-of-type(even) {align-self: flex-end;}}}.chat-tips {display: flex;height: 5.82rem;margin-top: 1rem;.gpt-icon {height: 100%;img {height: 100%;}}}
}
</style>

chatgpt 聊天效果

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

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

相关文章

3分钟自定义你的chatGPT聊天微信机器人

背景 最近chatGPT实在太火了&#xff0c;不谈下都不好意思说自己在技术圈混了&#xff0c;刚好前段时间公司里面在举办一个企业微信机器人比赛&#xff0c;然后就用注册了openai的一个账号&#xff0c;用python写了一个玩玩&#xff0c;但是想想不过瘾只能公司内部体验&#x…

全开源chatGPT聊天机器人商业版源码

下载&#xff1a;https://download.csdn.net/download/qq_45102995/87772789 全开源chatGPT聊天机器人商业版源码完全开放源代码 CHATGPT商业源码 全开源 全开源 随意改!

ChatGPT聊天机器人程序

ChatGPT聊天机器人程序是一种基于人工智能技术的智能对话程序&#xff0c;利用ChatGPT等自然语言处理模型和算法实现与用户的交互&#xff0c;回答问题、提供服务等。 ChatGPT聊天机器人程序通常包括以下模块&#xff1a; 输入模块&#xff1a;用于接收用户输入的信息&…

ChatGPT聊天软件开发

ChatGPT聊天软件是一款基于OpenAI技术训练的智能AI对话软件&#xff0c;具有自然语言处理、问答系统、语音交互等多种功能。用户可以通过输入文字或语音与ChatGPT进行互动&#xff0c;询问问题&#xff0c;获取信息以及进行娱乐和休闲。ChatGPT聊天软件支持多语言&#xff0c;为…

2023 ChatGPT聊天网站html源码

聊天GPT-Web ChatGPT&#xff0c;页面与官方页面的 API 独立。基于ChatGPT API的ChatGPT网页版&#xff0c;无登录障碍&#xff0c;功能丰富。 2023 ChatGPT聊天网站html源码

一百行代码实现搭建简易版 ChatGPT 聊天机器人,网页搭建

最近&#xff0c;OpenAI 的一款聊天机器人模型 ChatGPT 爆火。本篇文章旨在为大家提供一款简易的聊天机器人&#xff0c;只需一百行代码即可制作。话不多说&#xff0c;先上效果&#xff1a; 一百行代码实现简易版chatgpt聊天机器人 CSS代码&#xff1a; .container-fluid {p…

一键导出ChatGPT聊天记录:让备份更简单

重要性&#xff1a; 备份ChatGPT的聊天记录同样非常重要&#xff0c;因为这些记录可能包含了您与ChatGPT的交互记录&#xff0c;这些记录可能包含了您的个人信息、兴趣爱好、偏好和其他敏感信息。以下是备份ChatGPT聊天记录的一些重要性&#xff1a; 防止数据丢失&#xff1a;…

基于小程序制作一个ChatGPT聊天机器人

在AI技术日新月异的浪潮中,将ChatGPT与实战开发相结合,制作一个随身携带的聊天机器人,紧贴前沿的同时稳固基础。 一、前言1.1、什么是ChatGPT1.2、什么是文本完成二、API2.1、ChatGPT官网申请API所需要的key2.2、搭建API2.3、创建控制器及动作方法三、小程序3.1、页面创建3.…

chatGPT聊天记录消失如何找回

言归正传 记录并没有消失&#xff0c;只是无法显示到侧面列表&#xff0c;搜索浏览器历史记录就可以找回了 每次聊天都有一个独特的地址&#xff1a;/chat/xxxx-xxx-xxxxx-xx 查看浏览器历史记录&#xff0c;搜索以上关键字&#xff0c;找到旧的网址 打开旧的网址&#xff…

史诗级聊天AI ChatGPT来啦!

羿阁 发自 凹非寺量子位 | 公众号 QbitAI 一款新的聊天AI被网友们玩疯了。 能直接生成代码、会自动修复bug、在线问诊、模仿莎士比亚风格写作……各种话题都能hold住&#xff0c;它就是OpenAI刚刚推出的——ChatGPT。 有脑洞大开的网友甚至用它来设计游戏&#xff1a;先用ChatG…

和ChatGPT聊天,一定试试这些提问技巧

在和ChatGPT聊天时&#xff0c;要使用清晰简洁的语言&#xff0c;尽量避免使用含糊不清或模糊的词语和语句。 一、首次提问时&#xff0c;用这些方法提问更高效&#xff1a; 1. 用通俗易懂的语言&#xff1a; 尽可能使用通俗易懂的语言提问&#xff0c;不要使用过于专业或难…

教你用ChatGPT写论文(技巧干货)

目录 引语&#xff1a; 第一步&#xff1a;现象确认 第二步&#xff1a;学术概念化 第三步&#xff1a;定位优质学术资源 第四步&#xff1a;对比分析 第五步&#xff1a;深挖启示 & 第六步&#xff1a;写论文 结语&#xff1a; 引语&#xff1a; 大家好我们是权知…

​反其道而行,大学教授鼓励学生用 ChatGPT 写论文

来源 | AI科技大本营 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 新 AI 工具 ChatGPT 的到来&#xff0c;正在教育圈呈现出冰火两重天的态势&#xff0c;教授们几家欢喜几家愁。 这不近日&#xff0c;来自宾夕法尼亚大学沃顿商学院的一位专门研究创业与创新的…

英国卡迪夫大学学生使用ChatGPT写论文拿到一等成绩

近日&#xff0c;BBC报道了一则新闻&#xff1a; 卡迪夫大学一名学生在期末考试中使用ChatGPT撰写了一篇论文&#xff0c;并获得了一等成绩&#xff0c;要知道这是英国大学中最高等级的成绩&#xff0c;而他的另一篇论文没有使用ChatGPT&#xff0c;只获得了二等一的成绩。 此…

学术界用ChatGPT写论文,真的靠谱吗?

写论文时&#xff0c;赵铭用ChatGPT查询了国内外云计算技术的研究进展&#xff0c;并请它一一详细介绍。他用搜索引擎简单核实了真实性&#xff0c;润色后就放进了论文中&#xff0c;“我感觉它说的东西都是一些现状&#xff0c;也没什么好调整的&#xff0c;就直接用了&#x…

ChatGPT写论文算作弊吗?各校对AI态度不一

都说ChatGPT来了&#xff0c;一堆人要下岗&#xff0c;因为他们的工作会被机器取代。 但也有可能&#xff0c;还没等你走上职场&#xff0c;学生的工作AI也能帮你做了&#xff01; 最近&#xff0c;卡迪夫大学的一位学生使用ChatGPT的论文获得了远超自己水平的高分。 真是服…

留学生用ChatGPT写论文?真的会被开除!!!

转眼进入6月&#xff0c;大家的论文完成的怎么样了&#xff1f;很多留学生都有这样的疑问&#xff0c;用ChatGPT写论文靠谱吗&#xff1f; 其实在最近&#xff0c;&#xff0c;ChatGPT被学生用来辅助写论文&#xff0c;已经不是什么新鲜事了。它作为新型人工智能&#xff0c;搜…

【ChatGPT进阶】如何使用ChatGPT写论文?

大学生最头疼的事情应该就是写论文了&#xff0c;别慌这就教你方法&#xff0c;分分钟搞定&#xff01; 在使用ChatGPT编写论文的时候&#xff0c;重点是说明你的论文课题&#xff0c;以及你需要ChayGPT为你生成什么内容。不要想着一句话就能生成一篇完整的论文给你。 这里以…

五步学会用chatGPT写论文

第一步&#xff1a;登录ChatGPT站点 第二步&#xff1a;输入拟写论文相关信息 方法一&#xff1a;有确定的论文选题&#xff08;可按照选题直接生成摘要和大纲&#xff09; 我是一名金融业从业人员&#xff0c;我的研究生毕业论文选题是“利率市场化问题研究”&#xff0c;那么…

chatgpt帮你写论文

文章目录 一、 询问chatgpt论文有多少部分二、 告知chatgpt论文的其他部分三、 继续补充字数 根据chatgpt上下文衔接的功能&#xff0c;逐步完成论文 一、 询问chatgpt论文有多少部分 二、 告知chatgpt论文的其他部分 三、 继续补充字数