手搓一个AI聊天机器人网页，隔壁老王都看傻了

前几天有个粉丝私信我，说想做个能聊天的AI机器人放自己网站上，问我有没有现成的代码，我说有啊，但我不想给你，因为给了你,你就不会自己动手了。

后来想想,还是写一篇吧。

其实做一个能对话的AI机器人网页，真的没你想的那么难，我不吹牛，只要你会复制粘贴，这篇文章看完你就能搞定，前提是你得有点耐心,别一看代码就头大。

我先说下这玩意儿能干啥，就是你打开一个网页，输入一句话，它就能回你，它不是ChatGPT那种大模型，没那么聪明，但做个小工具玩玩，或者放自己博客上当个客服机器人,完全够用。

我自己的第一个版本特别糙，就是一行输入框加一个按钮，连个样式都没有，丑得要死，后来慢慢改，加了点CSS,看起来像个正经玩意儿了。

你猜怎么着？我把代码发朋友圈，一个做前端的朋友说：“你这玩意儿能用？”我说你试试，他试完说：“卧槽，还真行。”

好了，废话不多说,直接上思路。

首先你需要一个HTML文件，别怕，就一个文件搞定，不用装什么环境，不用配什么服务器，双击就能打开，它核心就三样东西：一个显示对话的区域，一个输入框，一个发送按钮，然后写点JavaScript,让它能根据你输入的内容返回点东西。

这里我踩过一个坑，就是一开始我弄了个特别复杂的逻辑，想让它智能一点，结果越写越乱，最后自己都看不懂了，后来我明白了，这种东西一开始别想太多,先让它动起来再说。

最简单的做法就是用正则匹配，比如用户说了“你好”，你就回一句“你好呀，有什么我能帮你的？”用户说了“天气”，你就回“今天天气不错，适合出去玩。”当然你要是愿意，可以搞个API接口，让它对接真正的AI大模型,那效果就牛逼了。

但我建议新手先从本地逻辑开始，因为不用联网，不用申请API密钥,自己电脑上就能跑。

还有个事儿得提醒你，界面上加几个预设问题按钮，用户体验会好很多，我一开始没加，结果自己试的时候还得打字，烦得很，加完以后，点一下就能看到效果,舒服多了。

颜色搭配也别太花哨，我之前调了个荧光绿的背景，自己看着都辣眼睛，后来改成白色配浅灰，加一点蓝色的主题色，就很舒服，字体的话，系统默认字体就行，别整那些花里胡哨的,用户看着累。

对了，还有个细节，对话气泡左边是你发的，右边是机器回的，最好做个区分,不然聊了几句就分不清谁说了啥。

我现在的版本大概是这样的：输入框在底部，上面是聊天记录，聊天的内容会滚动到底部，每次新消息出来，自动滚一下,这样用户不用手动往下拉。

另外加了个打字效果，就是机器回消息的时候，字一个一个蹦出来，看起来像真的在思考一样，其实原理很简单，就是setInterval控制一下输出速度，别问我为什么知道,因为我当时为了这个效果折腾了一下午。

说到这儿，我猜你可能会遇到一个问题——怎么让机器人记住前面说过的话，这个其实有点tricky，最简单的方案就是搞个数组，每次对话都把内容存进去，然后下次判断的时候带上上下文，但你要是懒得搞，只做单独的问答也行,反正又不是不能用。

最后说一句，这东西你要是学会了，不仅自己能玩，还能拿去撩妹,虽然大概率会被骂直男。

好了，代码我就不贴了，不然文章变长了，你们自己去动手试试，有问题留言,我会挑几个典型问题专门写文章回答。

别光收藏不练,收藏一万篇不如自己动手写一行代码。

（免费申请加入）AI工具导航网

相关标签： # 自制ai对话机器人html