chatgpt这么火?前端如何实现类似chatgpt的对话页面

article/2024/12/22 9:03:57

📋 个人简介

  • 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜
  • 📝 个人主页:馆主阿牛🔥
  • 🎉 支持我:点赞👍+收藏⭐️+留言📝
  • 📣 系列专栏:前端实用小demo🍁
  • 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥

请添加图片描述

目录

    • 📋 个人简介
  • 前言
    • 最终效果
    • 页面布局
      • flex布局一
      • flex布局二(重点)
    • js部分
    • 完整代码
  • 结语

前言

自从去年11月份chatgpt出圈之后,他的热度就居高不减,也出现了很多人借助接口开发的国内版本,那么本篇博客就从前端的角度来看看前端如何实现类似chatgpt的对话功能!

最终效果

源码在文末获取!

在这里插入图片描述
因为这是我写在一个项目中的,单独提出来可能配色效果不同,但功能和做法只要我们掌握了,那么自己想怎么写就怎么写!

页面布局

这一块比较简单,分析过chatgpt的页面的就会知道,他的页面布局方式是采用flex布局的,flex布局确实好用,那么我也是基于Bootsrap+jquery+flex布局完成了简易版的对话功能!主要有两个地方用到了flex布局!

flex布局一

在这里插入图片描述
这里的头像和文字采用的就是flex布局,并且文字和图片顶部对齐,防止文字较多依旧和图片中间对齐的bug。
需要设置css:

display: flex;
align-items: flex-start;

其中align-items: flex-start;的作用就是让文字与图片顶部对齐!

在这里插入图片描述

flex布局二(重点)

第二处用到flex布局的地方就是这个搜索框:
在这里插入图片描述
很多人觉得这个对话框很简单,flex布局实现输入框和按钮在同一行确实简单,但你要好好看看chatgpt的官网,都是有小细节的,这里面还是有很多知识点的。

首先,我要说的是这个输入框用的textarea,而不是input,区别在于,input输入的内容是不能换行的,但textarea文本框可以,但使用textarea的问题是,参数rows设置为一行,这个文本框的高度会很低,达不到chatgpt的那个页面要求,rows设置大一点或者这个文本框的高度给高一点会有一个问题就是输入时他的光标不会在文本框的高度中间,而是在第一行,我们是没法通过其他方式让输入光标垂直居中的,因此这也不符合chatgpt页面的要求,所以这确实是个值的学习的一点!看了chatgpt页面的做法后,我悟了,下面一张图来说明chatgpt是如何做的:

在这里插入图片描述
如图,你只要将textarea边框取消掉,然后focus伪类将边框效果也取消掉,外边再套一个div边框将textarea文本框和按钮套在里面就好了!

.ipt{display:flex;align-items: center;position: absolute;bottom: 60px;margin: 0 15px;padding-right: 15px;border-radius: 15px;width: calc(100% - 30px);height: 50px;border: 1px solid #e7eaec;
}
.ipt textarea {resize: none;overflow-y: auto;border: none;box-shadow: none;
}
.ipt textarea:focus{border: none !important;box-shadow: none !important;
}

最后,将这个输入框定位到页面底部就好!

js部分

首先,页面部分,我们添加消息到页面,包括用户的问题以及ai的回复,添加消息到页面时需要向上滚动:

// 添加用户消息到窗口
function addUserMessage(message) {var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + userIcon + '"><p class="message-text">' + message + '</p></div>');chatWindow.append(messageElement);chatInput.val('');chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);
}// 添加回复消息到窗口
function addBotMessage(message) {var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + botIcon + '"><p class="message-text">' + message + '</p></div>');chatWindow.append(messageElement);chatInput.val('');chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);
}

这里消息添加带页面后,清空了输入框的内容,接下来还需要给输入框添加加一个键盘事件,也就是点击enter键也可以发送消息!

// 处理 Enter 键按下
chatInput.keypress(function(e) {if (e.which == 13) {chatBtn.click();}
});

最后就是发送消息与获得消息的一部分了:

// 处理用户输入
chatBtn.click(function() {var message = chatInput.val();if (message.length == 0){common_ops.alert("请输入内容!")  // 弹窗  return  }addUserMessage(message);chatBtn.attr('disabled',true) // 消息发送后让提交按钮不可点击// 发送信息到后台$.ajax({url: '/chat',method: 'POST',data: {"prompt": JSON.stringify(message)},success: function(res) {res = JSON.parse(res);addBotMessage(res.content);chatBtn.attr('disabled',false)  // 成功接受消息后让提交按钮再次可以点击},error: function(jqXHR, textStatus, errorThrown) {addBotMessage('<span style="color:red;">' + '出错啦!请稍后再试!' + '</span>');chatBtn.attr('disabled',false) }});
});

这些逻辑都很简单,我不再总结,需要注意的是,我在发送消息到后台等待相应的过程让按钮的状态是不可点击的,直到后台返回消息才可以进行下一次问答!但这里我没有处理键盘事件,也就是说你可以点击enter继续向后台发送消息,这也是一个bug,只不过我没有处理,你们不需要的可以去掉这个键盘事件就好了,当然也可以在发送消息到获得回答的这个时间段像禁用发送按钮一样,禁止enter键盘事件或者解绑这个键盘事件,这个你们自己去完成,这里我不在多说(总要留点东西让你们自己去思考去感悟!)

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="../../static/css/bootstrap.min.css" rel="stylesheet"><title>chat</title><style>.answer{width: 100%;position: relative;height: 70vh;}.ipt{display:flex;align-items: center;position: absolute;bottom: 60px;margin: 0 15px;padding-right: 15px;border-radius: 15px;width: calc(100% - 30px);height: 50px;border: 1px solid #e7eaec;}.ipt textarea {resize: none;overflow-y: auto;border: none;box-shadow: none;}.ipt textarea:focus{border: none !important;box-shadow: none !important;}#chatWindow {max-height: calc(70vh - 120px);height:auto;overflow-y: auto;}.message-bubble {padding: 10px;margin: 5px;display: flex;align-items: flex-start;border-bottom: 1px dashed #e7eaec;}.message-bubble p {font-size: 18px;margin-left:15px;}.chat-icon {width: 30px;height: 30px;border-radius: 3px;}</style>
</head>
<body><div><div class="row"><div class="col-xs-12"><div><h1 class="text-center m-b-lg">Chat with ChatGPT</h1></div><div class="answer"><div id="chatWindow" class="mb-3"></div><div class="input-group ipt"><div class="col-xs-12"><textarea id="chatInput" class="form-control" rows="1"></textarea></div><button id="chatBtn" class="btn btn-primary" type="button">Go !</button></div></div></div></div></div></div> 
</body>
<script src="../../static/plugins/jquery-2.1.1.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/plugins/layer/layer.js"></script>
<script src="../../static/js/common.js"></script>
<script>$(document).ready(function() {var chatBtn = $('#chatBtn');var chatInput = $('#chatInput');var chatWindow = $('#chatWindow');var userIcon = '/static/images/user/{{ current_user.avatar }}'var botIcon = '/static/images/aichat/chatgpt.png';// 添加用户消息到窗口function addUserMessage(message) {var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + userIcon + '"><p class="message-text">' + message + '</p></div>');chatWindow.append(messageElement);chatInput.val('');chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);}// 添加回复消息到窗口function addBotMessage(message) {var messageElement = $('<div class="row message-bubble"><img class="chat-icon" src="' + botIcon + '"><p class="message-text">' + message + '</p></div>');chatWindow.append(messageElement);chatInput.val('');chatWindow.animate({ scrollTop: chatWindow.prop('scrollHeight') }, 500);}// 处理用户输入chatBtn.click(function() {var message = chatInput.val();if (message.length == 0){common_ops.alert("请输入内容!")    return  }addUserMessage(message);// messages.push({"role": "user", "content": message})chatBtn.attr('disabled',true) // 消息发送后让提交按钮不可点击// 发送信息到后台$.ajax({url: '/chat',method: 'POST',data: {"prompt": JSON.stringify(message)},success: function(res) {res = JSON.parse(res);addBotMessage(res.content);chatBtn.attr('disabled',false)  // 成功接受消息后让提交按钮再次可以点击},error: function(jqXHR, textStatus, errorThrown) {addBotMessage('<span style="color:red;">' + '出错啦!请稍后再试!' + '</span>');chatBtn.attr('disabled',false) }});});// 处理 Enter 键按下chatInput.keypress(function(e) {if (e.which == 13) {chatBtn.click();}});});
</script>
</html>

这里面用到的layer.js就是一个弹窗组件,百度可以搜到,common.js是我自己对layer.js方法的封装,这个页面其实你不这两个js文件也行,因为整个页面只有下面的代码用到了弹窗:

if (message.length == 0){common_ops.alert("请输入内容!")    return  
}

其实简陋点,一个alert就搞定了!

结语

如果你觉得博主写的还不错的话,可以订阅下面的这个flask专栏,这是博主唯一的付费专栏,我做的这个页面也是最近项目的一部分,这个项目也是用flask做的,我会将他全部总结开源到这个flask专栏中。

【flask从入门到实战】专栏9.9火热订阅中,已包含两个项目,全站独一无二的脚手架搭建,直接复制简单无脑操作,项目结构类似Django,感兴趣的可以看看哦!

🏰系列专栏
👉flask框架快速入门

其他专栏请前往博主主页查看!


http://chatgpt.dhexx.cn/article/uSeTXhh7.shtml

相关文章

实现chatgpt自然对话

1.概述 ChatGPT是当前自然语言处理领域的重要进展之一&#xff0c;通过预训练和微调的方式&#xff0c;ChatGPT可以生成高质量的文本&#xff0c;可应用于多种场景&#xff0c;如智能客服、聊天机器人、语音助手等。本文将详细介绍ChatGPT的原理、实战演练和流程图&#xff0c…

ChatGPT时代:ChatGPT全能应用一本通

引言 随着人工智能技术的不断发展和进步&#xff0c;我们进入了ChatGPT时代。ChatGPT是基于GPT架构的大型语言模型&#xff0c;它具备强大的自然语言处理和生成能力&#xff0c;使得我们能够进行更加自由、流畅的对话。作为ChatGPT的全能应用&#xff0c;它可以被视为一本通&a…

企业软件怎样利用ChatGPT?

文/明道云创始人任向晖 作为商业和科技话题的博主&#xff0c;不评论一下ChatGPT似乎是不应该的。毫无疑问&#xff0c;ChatGPT的出现已经远远超过了科技商业要闻的标准&#xff0c;它的革命性已经被飙速增长的用户所直接证明&#xff0c;以至于留给我们的问题只有两个&#xf…

ChatGPT有哪些应用场景?

&#x1f4d6; 作者简介&#xff1a;在职Java架构师&#xff0c;分享Java、架构相关知识 &#x1f4d6; 多年工作总结&#xff1a;Java学习路线总结&#xff0c;逆袭Java架构师 &#x1f4d6; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动、助你实现技…

【分享】Github上有趣的ChatGPT应用源码与好用的ChatGPT插件

哈喽&#xff0c;大家好&#xff0c;我是木易巷&#xff01; 今天给大家分享几个Github上有趣的ChatGPT应用源码与好用的ChatGPT插件&#xff0c;一起来看看吧&#xff01; 一、Github上有趣的ChatGPT应用源码 1. ChatGPT 源码地址&#xff1a;https://github.com/lencx/Ch…

ChatGPT应用——充当 Linux 终端

我想让你充当 Linux 终端。我将输入命令&#xff0c;您将回复终端应显示的内容。我希望您只在一个唯一的代码块内回复终端输出&#xff0c;而不是其他任何内容。不要写解释。除非我指示您这样做&#xff0c;否则不要键入命令。当我需要用英语告诉你一些事情时&#xff0c;我会把…

ChatGPT应用场景: 基于对话生成的智能客服系统

关于ChatGPT&#xff0c;今天小编简单说下用在客服服务的要点。 ChatGPT可以用于开发基于对话生成的智能客服系统&#xff0c;帮助企业提供高效、便捷、满意的在线客服服务&#xff0c;从而提升客户体验和满意度。 以下是ChatGPT应用于智能客服系统的一些场景&#xff1a; 1.…

ChatGPT应用于软件测试中的切入口(干货!)

以上均为本人原创&#xff0c;转载请说明出处&#xff0c;谢谢&#xff01; 如果您觉得这篇文章还不错的话&#xff0c;请点击关注&#xff0c;转发&#xff0c;再看&#xff1b; 全是干货&#xff0c;话不多说 开搞&#xff01; 1. 测试想法生成器 可以使用ChatGPT技术&…

Edge加载weTab扩展,实现ChatGPT应用

1、找开Edge浏览器&#xff0c;点右上角三个点儿&#xff0c;如下图&#xff0c;再点【扩展】 2、在弹出的窗口中点【管理扩展】 我上这个中&#xff0c;上面已经存在【WeTab-免费ChatGPT新标签页】&#xff0c;说明我已经加载这个扩展项啦 3、再在弹出的扩展页中&#xff0c;…

ChatGPT-计算机应用新起点

ChatGPT是一款由OpenAI公司开发的大型语言模型&#xff0c;采用了GPT-3.5的架构&#xff0c;是目前最为先进的自然语言处理技术之一。该模型可以生成各种类型的自然语言文本&#xff0c;例如文章、对话、摘要等等&#xff0c;并可以理解语义和上下文&#xff0c;生成高质量的语…

ChatGPT 应用汇总及操作手册

汇总手册地址&#xff1a;https://www.mojidoc.com/05dbc-uvhdkr22fjazlowmiihngdoxvq-00b?continueFlag8f75ea3c60f02d7aee7fc531bc0ee944 GPT-3 相关 AI 工具汇总&#xff1a;共615 个 AI 技术落地的工具&#xff0c;包含了共 179 个使用场景&#xff0c;点击这里直接访问 h…

ChatGPT应用实践

运用ExcelPowerBIChatGPT&#xff0c;先让报表有形状&#x1f4b9;&#xff0c;再到“会说话”。全套方案在我的一亩三分地落地了。&#x1f60b;支持私有化部署且近乎零成本(非商用)。

ChatGPT应用与Python实战开发

最近什么最火一定是ChatGPT的AI技术&#xff0c;那什么语言最火呢&#xff0c;那一定是Python语言。这两个最火的语言在一起能擦出什么样的火花呢&#xff0c;来蚂蚁老师课堂学习新鲜出炉的课程吧&#xff0c;帮你解决一大部分的疑惑&#xff0c;感兴趣的小伙伴&#xff0c;查看…

chatgpt应用程序软件开发

作为一个语言模型&#xff0c;ChatGPT被用于各种应用程序和软件中&#xff0c;可以提供以下功能&#xff1a; 自然语言对话&#xff1a;ChatGPT可以与用户进行自然的、流畅的自然语言交互&#xff0c;从而帮助用户解决问题、获取信息或提供娱乐。 文本生成&#xff1a;…

【AI聊天丨 ChatGPT应用案例一】— 仅用30分钟,ChatGPT帮你完成专利交底书!

Hi&#xff0c;大家好&#xff0c;我是零点壹客&#xff0c;今天主要也是想和大家一起唠唠ChatGPT&#xff0c; 尤其这两个月&#xff0c;ChatGPT出奇的火&#xff0c;想必各位圈友们或多或少的都已经有些了解。 ChatGPT的出现很大程度上已经改变了我们的工作方式&#xff0c;尤…

第03课:如何快速构建自己的ChatGPT应用?

本节我们来介绍如何用ChatGPT构建自己的应用。毫无疑问,我们首先应该从官网上去了解和获取一些有用的信息。 官网地址:https://openai.com/ (如果想登陆官网,需要科学上网哈) 如下图所示,首先关注官网上的导航Developers,这是我们开发应用必须要了解的,它给我们提供了…

基于Python开发ChatGPT应用

注意&#xff1a;后续技术分享&#xff0c;第一时间更新&#xff0c;以及更多更及时的技术资讯和学习技术资料&#xff0c;将在公众号CTO Plus发布&#xff0c;请关注公众号&#xff1a;CTO Plus ChatGPT 是目前非常热门的一种人工智能模型&#xff0c;它是基于深度学习技术的一…

ChatGPT 应用——使用 chatGPT 写高考作文

写作文&#xff0c;很简单&#xff0c;但写一篇好的作文&#xff0c;是非常有难度的。 想要写一篇高分作文&#xff0c;需要对作文题目有正确的理解&#xff0c;需要展现独到的观点和深入的思考&#xff0c;需要具备清晰的逻辑结构&#xff0c;需要准确而得体的语言表达。 正…

ChatGPT能做哪些具体应用

ChatGPT是一款由Openai推出的智能AI聊天机器人&#xff0c;它可以完成很多领域的内容创作&#xff0c;他们能够写故事、解决数学问题和撰写理论论文&#xff0c;上知天文下知地理&#xff0c;在实际使用中也达到了令人惊艳的表现。 ChatGPT背后的算法基于Transformer架构&#…

chatgpt能运用到哪些场景

chatgpt能运用到哪些场景?chatgpt可以让我们与聊天机器人进行类似人类的对话&#xff0c;我们可以通过对话获得精准的答案&#xff0c;那我们在使用chatgpt时能运用到哪些场景中呢&#xff1f;当你看到这篇文章你就能发现chatgpt的内容创作能力。 1. 聊天机器人 ChatGPT是由Op…