【Web前端】如何自己写一个AI聊天机器人——小爆AI（html+css+js源码实例）
歪子Shabby. 2024-07-10 14:31:02 阅读 96
哇(⊙▽⊙)，最近ChatGPT一直在爆火，可是把这个开源的语言模型运用到自己的程序中，好像还是有些困难。但是我们可以学习一下AI的原理，自己写一个AI！相信，你也可以！
谁说AI只能靠后端（如Python）来写，哈哈哈，我偏偏要反着来，看我尝试用前端来写一个AI聊天机器人。对，你没听错，就是前端！【源码展示在文末】
项目介绍
这个项目其实在去年暑假就已经预告过了，可是一直拖着，说好7月25日发布，就是没发(#^.^#)。文章现在还留着呢，下面是链接：
小爆AI聊天机器人即将上线啦
现在，我直接把这个闭源项目改成开源项目了，为的就是让各位读者们学习呀！（看到这里，为何不给小编点一个关注呢？哈哈哈！）
窗口展示
原理介绍
HTML+CSS+JavaScript实现AI聊天机器人的原理其实很简单，换做是其他语言照样能写出来。输入对话内容后，JavaScript可以判断是否含有规定的关键字，然后输出对应的回答。如果不含有关键字，则随机输出empty数组中的任意一个字符串，例如“机智的我，竟然不明白你的话……”“我累了，等会儿再聊吧”。这几个数组可以被称为“AI对话库”，对话库的内容越多，回答的结果也就越精确，而不是次次都回答“对不起，我没听懂”。
完整代码（复制粘贴即可使用）
<code><html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<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">code>
<ul>
<big><b>小爆AI</b></big>
<br>
<small>（C）2022 Coconut</small>
<br>
<hr>
<br>
</ul>
<from>
<input type="text" class="text"/>code>
<input type="submit" value="发送" class="button" id="auto""/>code>
</from>
<br><br>
<div class="status">对方正在输入....</div>code>
</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，也爱着我的一群可爱的读者们。我总会得意又有些傲气地对朋友说：“我是一名专业的程序员”。有时候我也会觉得自己很孤单，因为生活中很少遇到对编程感兴趣的人。但是我的父母、我的朋友和我的同学们一直陪着我、理解我，与我一起渡过难关。在此，向他们表示由衷的感谢！同时，也感谢我的读者们，你们也一直坚持阅读我的博客，在背后默默支持着我，每回看到阅读量不断蹭蹭地往上涨，我就真正体会到编程的快乐。现在让我对你们说声：谢谢！♪(･ω･)ﾉ
为了防止走丢，麻烦点个关注吧！这样才能及时看到我的文章哟！如果有什么疑问，欢迎在评论区发言！让我们一起加油！ヾ(◍°∇°◍)ﾉﾞ
上一篇： AI多模态模型架构之模态编码器：图像编码、音频编码、视频编码
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。