我的编程空间,编程开发者的网络收藏夹
学习永远不晚

html+css+js实现简易版ChatGPT聊天机器人

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

html+css+js实现简易版ChatGPT聊天机器人

OpenAI的一款聊天机器人模型ChatGPT爆火,本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>test</title>
	<style type="text/css">
		@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Poppins:wght@200;300&display=swap");
		* {
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;
		  font-family: "Poppins", sans-serif;
		}
		body {
		  background: #4b5c66;
		}
		.container {
			--light-color: #fff;
			height: 580px;
			background: var(--light-color);
			bottom: 50px;
			right: 10px;
			box-shadow: 0px 0px 15px 0px black;
		}
		@media screen and (min-width:440px) {
			.container {
				position: fixed;
			}
		}
		.chat-header {
		  height: 60px;
		  display: flex;
		  align-items: center;
		  padding: 0px 30px;
		  background-color: #0652c0;
		  color: var(--light-color);
		  font-size: 1.5rem;
		}

		.chat-header .logo {
		  height: 35px;
		  width: 35px;
		  box-shadow: 0px 0px 10px 0px black;
		}
		.chat-header img {
		  height: 100%;
		  width: 100%;
		}
		.chat-header .title {
		  padding-left: 10px;
		}
		.chat-body {
		  height: 465px;
		  display: flex;
		  flex-direction: column;
		  padding: 8px 10px;
		  align-items: flex-end;
		  overflow-y: auto;
		}
		.chat-input {
		  height: 60px;
		  display: flex;
		  align-items: center;
		  border-top: 1px solid #ccc;
		}
		.input-sec {
		  flex: 9;
		}
		.send {
		  flex: 1;
		  padding-right: 4px;
		}
		#txtInput {
		  line-height: 30px;
		  padding: 8px 10px;
		  border: none;
		  outline: none;
		  caret-color: black;
		  font-size: 1rem;
		  width: 100%;
		}

		.chatbot-message,
		.user-message {
		  padding: 8px;
		  background: #ccc;
		  margin: 5px;
		  width: max-content;
		  border-radius: 10px 3px 10px 10px;
		}
		.chatbot-message {
		  background: #0652c0;
		  color: var(--light-color);
		  align-self: flex-start;
		  border-radius: 10px 10px 3px 10px;
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="chat-header">
			<div class="logo"><img class="lazy" data-src="/file/imgs/upload/202302/25/qpbq155bes2.jpg" alt="cwt" /></div>
			<div class="title">简易版Chat GPT</div>
		</div>
		<div class="chat-body"></div>
		<div class="chat-input">
			<div class="input-sec"><input type="text" id="txtInput" placeholder="在这里写" autofocus /></div>
			<div class="send"><img class="lazy" data-src="https://haiyong.site/img/svg/send.svg" alt="send" /></div>
		</div>
	</div>
	<script>
		const responseObj = {
			你好: "你好,我是最强人工智能ChatGPT,我能回答你所有问题,快来和我聊天吧!",
			五块钱怎么花三天: "坐公交回去找妈妈",				
			你是小黑子吗: "不,我不是小黑子。我是OpenAI的聊天机器人模型ChatGPT",
			你为什么和我聊天: "只因你太美",
			嘿: "嘿! 这是怎么回事",
			今天几号: new Date().toDateString(),
			几点了: new Date().toLocaleTimeString(),
		};
		const chatBody = document.querySelector(".chat-body");
		const txtInput = document.querySelector("#txtInput");
		const send = document.querySelector(".send");
		send.addEventListener("click", () => renderUserMessage());
		txtInput.addEventListener("keyup", (event) => {
			if (event.keyCode === 13) {
				renderUserMessage();
			}
		});
		const renderUserMessage = () => {
			const userInput = txtInput.value;
			renderMessageEle(userInput, "user");
			txtInput.value = "";
			setTimeout(() => {
				renderChatbotResponse(userInput);
				setScrollPosition();
			}, 600);
		};
		const renderChatbotResponse = (userInput) => {
			const res = getChatbotResponse(userInput);
			renderMessageEle(res);
		};
		const renderMessageEle = (txt, type) => {
			let className = "user-message";
			if (type !== "user") {
				className = "chatbot-message";
			}
			const messageEle = document.createElement("div");
			const txtNode = document.createTextNode(txt);
			messageEle.classList.add(className);
			messageEle.append(txtNode);
			chatBody.append(messageEle);
		};
		const getChatbotResponse = (userInput) => {
			return responseObj[userInput] == undefined ?
				"听不太懂呢试试输点别的" :
				responseObj[userInput];
		};
		const setScrollPosition = () => {
			if (chatBody.scrollHeight > 0) {
				chatBody.scrollTop = chatBody.scrollHeight;
			}
		};

	</script>	
</body>
</html>

到此这篇关于html+css+js实现简易版ChatGPT聊天机器人的文章就介绍到这了,更多相关html+css+js实现聊天内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

html+css+js实现简易版ChatGPT聊天机器人

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

html+css+js实现简易版ChatGPT聊天机器人

OpenAI的一款聊天机器人模型ChatGPT爆火,本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人。
2023-02-25

怎么使用html+css+js实现简易版ChatGPT聊天机器人

本篇内容介绍了“怎么使用html+css+js实现简易版ChatGPT聊天机器人”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码如下:
2023-07-05

Java怎么实现简单聊天机器人

这篇文章主要为大家展示了“Java怎么实现简单聊天机器人”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Java怎么实现简单聊天机器人”这篇文章吧。具体内容如下整个小案例:整合了Java sock
2023-06-20

ChatGPT Python API使用指南:实现语音聊天机器人

ChatGPT Python API使用指南:实现语音聊天机器人引言:随着人工智能技术的不断发展和普及,语音聊天机器人在各类应用场景中的需求越来越大。OpenAI开源的ChatGPT提供了一个强大的自然语言处理模型,通过使用ChatGPT
ChatGPT Python API使用指南:实现语音聊天机器人
2023-10-28

如何利用ChatGPT和Python实现聊天机器人性能优化

如何利用ChatGPT和Python实现聊天机器人性能优化摘要:随着人工智能技术的不断发展,聊天机器人已成为各种应用领域中的重要工具。本文将介绍如何利用ChatGPT和Python编程语言实现聊天机器人的性能优化,并提供具体的代码示例。引言
2023-10-27

可插拔的跨域聊天机器人实现方案复盘(postMessage版)

由于笔者之前的项目中接触过聊天机器人的项目,主要实现机器人客服模块,以及支持跨多平台使用的目的,所以特地总结一下,希望有所收获。

如何使用ChatGPT PHP实现智能聊天机器人的情感分析功能

如何使用ChatGPT PHP实现智能聊天机器人的情感分析功能智能聊天机器人在现代社交网络和商务应用中越来越被广泛使用,但要使机器人更加智能,除了基本的问答功能外,情感分析也是非常重要的一环。通过情感分析,机器人可以更好地理解用户的情绪和意
2023-10-24

基于ChatGPT+SpringBoot实现智能聊天AI机器人接口并上线至服务器的方法

ChatGPT是一款基于自然语言处理技术的聊天机器人,ChatGPT可以模拟真实的人类对话,并能够更贴近用户的需求,提供更有价值的服务,这篇文章主要介绍了基于ChatGPT+SpringBoot实现智能聊天AI机器人接口并上线至服务器,需要的朋友可以参考下
2023-02-16

编程热搜

目录