【Web前端】如何自己写一个AI聊天机器人——小爆AI（html+css+js源码实例）

哇(⊙▽⊙)，最近ChatGPT一直在爆火，可是把这个开源的语言模型运用到自己的程序中，好像还是有些困难。但是我们可以学习一下AI的原理，自己写一个AI！相信，你也可以！

谁说AI只能靠后端（如Python）来写，哈哈哈，我偏偏要反着来，看我尝试用前端来写一个AI聊天机器人。对，你没听错，就是前端！【源码展示在文末】

项目介绍

这个项目其实在去年暑假就已经预告过了，可是一直拖着，说好7月25日发布，就是没发(#^.^#)。文章现在还留着呢，下面是链接：

小爆AI聊天机器人即将上线啦

现在，我直接把这个闭源项目改成开源项目了，为的就是让各位读者们学习呀！（看到这里，为何不给小编点一个关注呢？哈哈哈！）

窗口展示

原理介绍

HTML+CSS+JavaScript实现AI聊天机器人的原理其实很简单，换做是其他语言照样能写出来。输入对话内容后，JavaScript可以判断是否含有规定的关键字，然后输出对应的回答。如果不含有关键字，则随机输出empty数组中的任意一个字符串，例如“机智的我，竟然不明白你的话……”“我累了，等会儿再聊吧”。这几个数组可以被称为“AI对话库”，对话库的内容越多，回答的结果也就越精确，而不是次次都回答“对不起，我没听懂”。

完整代码（复制粘贴即可使用）

        
        
        Document
        
            * {
                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;
            }
        
    
    
        
            

小爆AI
（C）2022 Coconut


---