哇(⊙▽⊙),最近ChatGPT一直在爆火,可是把这个开源的语言模型运用到自己的程序中,好像还是有些困难。但是我们可以学习一下AI的原理,自己写一个AI!相信,你也可以!
谁说AI只能靠后端(如Python)来写,哈哈哈,我偏偏要反着来,看我尝试用前端来写一个AI聊天机器人。对,你没听错,就是前端!【源码展示在文末】
项目介绍
这个项目其实在去年暑假就已经预告过了,可是一直拖着,说好7月25日发布,就是没发(#^.^#)。文章现在还留着呢,下面是链接:
小爆AI聊天机器人即将上线啦
现在,我直接把这个闭源项目改成开源项目了,为的就是让各位读者们学习呀!(看到这里,为何不给小编点一个关注呢?哈哈哈!)
窗口展示
原理介绍
HTML+CSS+JavaScript实现AI聊天机器人的原理其实很简单,换做是其他语言照样能写出来。输入对话内容后,JavaScript可以判断是否含有规定的关键字,然后输出对应的回答。如果不含有关键字,则随机输出empty数组中的任意一个字符串,例如“机智的我,竟然不明白你的话……”“我累了,等会儿再聊吧”。这几个数组可以被称为“AI对话库”,对话库的内容越多,回答的结果也就越精确,而不是次次都回答“对不起,我没听懂”。
完整代码(复制粘贴即可使用)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
list-style: none;
}
.box {
margin: 50px auto;
width: 600px;
position: relative;
text-align: center;
}
ul {
width: 80%;
padding: 2px;
min-height: 300px;
overflow-y: auto;
border: 2px solid #666;
border-radius: 2px;
text-align: center;
}
li {
padding: 0 8px;
margin: 2px;
background: #ccc;
float: left;
line-height: 30px;
height: 30px;
border-radius: 10px;
clear: both;
}
.my-msg {
float: right;
background: #58bc58;
color: #fff
}
.text {
margin: 5px;
width: 40%;
min-height: 30px;
}
.status {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: #555;
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<big><b>小爆AI</b></big>
<br>
<small>(C)2022 Coconut</small>
<br>
<hr>
<br>
</ul>
<from>
<input type="text" class="text"/>
<input type="submit" value="发送" class="button" id="auto""/>
</from>
<br><br>
<div class="status">对方正在输入....</div>
</div>
<script>
oBtn = document.querySelector('.button');
oStatus = document.querySelector('.status');
oText = document.querySelector('.text');
oUl = document.querySelector('ul');
document.onkeydown = function(e){
if(!e) e = window.event;//火狐中是 window.event
if((e.keyCode || e.which) == 13){
document.getElementById("auto").click();
}
}
oBtn.onclick = function () {
var text = oText.value;
console.log(text);
oText.value = ''; //清空输入框,不能用text
var oLi = document.createElement('li');
oLi.innerText = text;
console.log(oLi.innerText);
oLi.classList.add('my-msg');
oUl.append(oLi)
oStatus.style.display = 'block';
var q = ["你好!","你好","你多大了","今天心情怎么样","我好伤心啊","你是男是女"];
var a = ["雷猴!消息最好不带标点哦!",["又是一天好心情","你好鸭","Hi!我是AI小爆!你可以跟我聊聊天、问问题哦!"],"我是AI机器人,但我也十分年轻,是小哥哥小姐姐哦","小爆和你一样,心情一直很好呢","别难过了,看!窗外的景色,多美啊!","和你的性别恰恰相反哦"];
var empty = ["机智的我,竟然不明白你的话……","听了你的话,小爆甘拜下风","???","看来我得回家修炼了呢","换句话试试?","发送给我的消息,最好不要带标点哦","我累了,等会儿再聊吧","小爆随时在线哦!","放松一下眼睛吧",]
;
var index = q.indexOf(text);
var responseText = index == -1 ? empty[getNumber(0, empty.length - 1)] : (!Array.isArray(a[index]) ? a[index] :a[index][getNumber(0, a[index].length - 1)]);
var oLiB = document.createElement("li");
oLiB.innerText = responseText;
setTimeout(() => {
oUl.appendChild(oLiB);
oStatus.style.display = 'none'
console.log('1秒');
console.log("最大时间和最小时间:", this.hhh);
}, getNumber(300, 3000));
function getNumber(min, max) {
return hhh = parseInt(Math.random() * (max - min + 1) + min)
}
}
</script>
</body>
</html>
感谢阅读
悄悄告诉你,小编是个初中生(具体内容请:点头像看个人简介)。写代码是我的业余爱好,但也占用了我大量的学习时间,不过我仍然深深爱着电脑、爱着键盘、爱着Java、爱着CSDN,也爱着我的一群可爱的读者们。我总会得意又有些傲气地对朋友说:“我是一名专业的程序员”。有时候我也会觉得自己很孤单,因为生活中很少遇到对编程感兴趣的人。但是我的父母、我的朋友和我的同学们一直陪着我、理解我,与我一起渡过难关。在此,向他们表示由衷的感谢!同时,也感谢我的读者们,你们也一直坚持阅读我的博客,在背后默默支持着我,每回看到阅读量不断蹭蹭地往上涨,我就真正体会到编程的快乐。现在让我对你们说声:谢谢!♪(・ω・)ノ
为了防止走丢,麻烦点个关注吧!这样才能及时看到我的文章哟!如果有什么疑问,欢迎在评论区发言!让我们一起加油!ヾ(◍°∇°◍)ノ゙
版权归原作者 歪子Shabby. 所有, 如有侵权,请联系我们删除。