【Web前端】如何自己写一个AI聊天机器人——小爆AI（html+css+js源码实例）_ai聊天框自动回复html怎么实现

作者：正经夜光杯 | 2024-08-07 18:37:33

踩

ai聊天框自动回复html怎么实现

哇(⊙▽⊙)，最近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，也爱着我的一群可爱的读者们。我总会得意又有些傲气地对朋友说：“我是一名专业的程序员”。有时候我也会觉得自己很孤单，因为生活中很少遇到对编程感兴趣的人。但是我的父母、我的朋友和我的同学们一直陪着我、理解我，与我一起渡过难关。在此，向他们表示由衷的感谢！同时，也感谢我的读者们，你们也一直坚持阅读我的博客，在背后默默支持着我，每回看到阅读量不断蹭蹭地往上涨，我就真正体会到编程的快乐。现在让我对你们说声：谢谢！♪(･ω･)ﾉ

为了防止走丢，麻烦点个关注吧！这样才能及时看到我的文章哟！如果有什么疑问，欢迎在评论区发言！让我们一起加油！ヾ(◍°∇°◍)ﾉﾞ

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/943956