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

2024-10-20 08:46:38

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 src="https://code.haiyong.site/wp-content/uploads/2022/10/logo.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 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实现聊天内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解如何利用chatgpt保护您的js代码

正文 ChatGPT是一个非常强大的自然语言处理模型,能够在多种应用场景下帮助人们更加高效地进行文本处理和语言交互.但是,由于其庞大的代码库和数据集,如果未经过适当的保护,可能会面临来自黑客和恶意用户的攻击. 为了保护ChatGPT的安全性,我们可以使用JavaScript混淆加密技术,这是一种将代码转换为难以理解的形式的技术.通过这种方式,黑客和攻击者将很难破解ChatGPT的代码,从而提高了其安全性. 使用JavaScript混淆加密下面是一个使用JavaScript混淆加密的代码案例:
JavaScript基于ChatGPT API实现划词翻译浏览器脚本

目录前言 openAI 提供的接口实现划词翻译 react + antd 实现文本转语音小结前言最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本, 短时间内 star 冲到了 9.7k, 功能上除了支持翻译外,还支持润色和总结功能,除了浏览器插件外,还使用了 tauri 打包了一个桌面客户端,那抛开 tauri 是使用 rust 部分,那浏览器部分实现还是比较简单的,今天我们就来手动实现一下. openAI 提供的接口比如我们可以复制以下代码,在浏览器控制台中发
ChatGPT前端编程秀之别拿编程语言不当语言

目录 TDD第一步就卡住了破门而入,针对性反馈总结一下 TDD第一步就卡住了写完小工具,这一篇回来我们接着写我们的程序.再看一眼我们的程序运行视图: 带着TDD思路,我进入了 ejs_and_yaml_dsl_loader 这个模块,这块因为我切的不是很好,所以这代码有点难写,不过没关系,正好我们实际工作大部分的场景都是这样的.看看我们在这里能玩出点什么来. 那么这次的需求呢是这个样子的,我们需要把ejs模版引擎渲染出的yaml转换为json,那么我们这个功能会非常复杂,所以我们没有以上来
详解微信小程序如何实现类似ChatGPT的流式传输

目录正文小程序上实现流失传输什么是流式传输? 为什么小程序不支持流式传输? 我的解决方案常规方案Axios 另辟蹊径:onChunkReceived方案后端接口配置正文最近指导群里小兄弟技术问题,发现一个让我也棘手的难题.于是激发了我潜意识精神力-干到底. 由于最近沉浸在chatgpt中,很久不用google和百度搜索东西了,正如我所料一般,他们也没有这方面的解决方案.于是,记录一下探索研究的过程,给各位水友一个分享扩展. 小程序上实现流失传输模拟ChatGPT的效果,实现流式传
LangChain简化ChatGPT工程复杂度使用详解

目录什么是LangChain? LangChain中的模块,每个模块如何使用? 具体代码什么是LangChain? 使用ChatGPT大家可能都是知道prompt, (1)想像一下,如果我需要快速读一本书,想通过本书作为prompt,使用ChatGPT根据书本中来回答问题,我们需要怎么做? (2)假设你需要一个问答任务用到prompt A,摘要任务要使用到prompt B,那如何管理这些prompt呢?因此需要用LangChain来管理这些prompt. LangChain的出现,简化了我们
两天没解决的问题chatgpt用了5秒搞定隐藏bug

目录前言隐藏的“间谍” code 验证第一位”间谍“ 借助GPT“侦探柯南” 找出"真凶" AI已来,未来已来前言一个说难不难,说简单竟看不出来是哪里问题的一个bug.是的可能自己能力和经验尚浅无法识别,下面你们能否用火眼金睛一眼让bug原形毕露 (这个问题是忽然暴露出来的,无任何征兆,没人改动过,生产上运行了很长时间,故很奇怪,所以这个间谍看来很会隐藏) 隐藏的“间谍” 下面先来看代码(伪代码) code /** * 两个从数据库查询的耗时任务 * @param count
ChatGPT用于OA聊天助手导致访问量服务宕机

目录闲谈开搞面临的问题聊天UI 服务端接口上线宕机优化问题处理流式传输 MD格式看看效果闲谈最近,火到不行的明星团队产品 ChatGPT,热度一度非常高,付费用户都开始通过邀请制,专属登陆链接来限制流量了.开了Plus以后返回内容和速度真是10倍速啊~ 但对于小白或普通用户(也可能非技术行业的大佬),想要访问和体验还是挺麻烦的.除了准备梯子.接码.账号以外还可能遇到节点或网络,多次连接失败的问题. 所以,本着能折腾绝对不休息的原则,2天搞了一个聊天助手,凭借其语义的理解,关联
让chatGPT教你如何使用taro创建mbox

目录 @tarojs/mobx如何使用useLocalstory创建实例这样其他组件或页面能获取到数据变更吗? 那在函数式组件中如何使用inject @tarojs/mobx如何使用useLocalstory创建实例 @tarojs/mobx 是 Taro 框架的 MobX 实现,提供了 useLocalStore hook 用于在函数组件中创建 MobX store. 要使用 useLocalStore 创建实例,需要先定义一个 MobX store 类.例如,下面是一个简单的计数器示例:
一文解析ChatGPT 之 Fetch 请求

目录 SSE 介绍咋和 ChatGPT 控制台看到的内容不一样?
基于html+css+js实现简易计算器代码实例

使用html+css+js实现简易计算器, 效果图如下: html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
js实现简易聊天对话框

本文实例为大家分享了js实现简易聊天对话框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>聊天对话框</title> <style type="text/css"> *{font-size: 14px; padding:0; margin:0;} .main{ posit
js实现消灭星星(web简易版)

昨天看视频之后,整理思路,自己完成了简易版消灭星星思路: 模块1:初始化初始化总分数.当前分数.背景图.选择的星星分数初始化星星(生成二维数组,对二维数组的每一个对象设置样式(长.宽.背景图),生成二维数组个div元素节点插入到游戏面板中) 模块2:预判判断: 鼠标移动到某一个方块,判断上下左右是否有连接着的小方块(采用递归方法),然后将其存储到数组choose[],移到其他方块时,choose置为空闪烁: 将已选中的小方块设置样式(缩放) 显示选择分数: 设置初始分数和递增分数
js 简易版滚动条实例(适用于移动端H5开发)

废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <title>滑动条</title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" conte
js,jq,css多方面实现简易下拉菜单功能

效果图预览一 .css实现 html代码部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html+css下拉菜单</title> <link rel="stylesheet" type="text/css" href="css/style.css" rel="e
Android学习项目之简易版微信为例（一）

这是"Android学习之路"系列文章的开篇,可能会让大家有些失望--这篇文章中我们不介绍简易版微信的实现(不过不是标题党哦,我会在后续文章中一步步实现这个应用程序的).这里主要是和广大朋友们聊聊一个非Java程序员对Android操作系统的理解以及一个Android工程的目录结构,为进一步学习做准备. 1 缘起智能手机的出现与普及为人们的生活.工作带来了极大的便利,我们可以用手机随时随地.随心所欲地购物.玩游戏.聊天.听音乐等等.一个个精心设计.体验良好的移动客户端应用,让用户们爱
Python实现简易版的Web服务器(推荐)

下面给大家介绍python实现简易版的web服务器,具体内容详情大家通过本文学习吧! 1.请自行了解HTTP协议 http://www.jb51.net/article/133883.htm(点击跳转) 2.创建Socket服务,监听指定IP和端口 3.以阻塞方式等待客户端连接 4.读取客户端请求数据并进行解析 5.准备服务器运行上下文 6.处理客户端请求数据 7.根据用户请求路径读取文件 8.返回响应结果给客户端 9.程序入口 10.目录结构 11.运行 python wsgiserver.p
CSS+JS构建的图片查看器

这是一个使用 CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE.Firefox .Opera. JS部分 function showPic (whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; if (whichp
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
js制作简易年历完整实例

本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点. innerHtml的用法现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了. 例如top.innerHTML="";就可以在top对应的位置出现一个button了! 程序实现思

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

相关推荐

随机推荐