一个可运行的聊天机器人是一个可以开发用来回答各类问题的应用程序。聊天机器人是一个网络界面，它能够以尽可能类人的方式回答每一个问题。它基于人工智能的技术。在本文中，我们将学习如何利用 OpenAI 的 API 密钥，结合 HTML、CSS 和 JavaScript 来创建一个可运行的聊天机器人。
!Screenshot-(370).jpg)聊天机器人预览
前置条件：
可运行聊天机器人的分步指南
- 让我们创建一个包含 3 个文件和一个叉号图标的目录：index.html、style.css 和 script.js。添加基本的样板代码，并创建一个带有叉号图标的聊天机器人容器，以便在使用后移除聊天机器人，还要创建两个段落，一个用于接收消息，另一个用于发送消息。此外，还要创建一个发送按钮来发送消息。
- 让我们为容器创建样式，并添加一个错误类，当 API 密钥出现错误时，接收消息的容器会变成浅红色，以显示密钥有误。
- 让我们使用官方网站创建一个免费的 OpenAI 密钥。创建一个账户或登录现有账户，然后前往 API 文档。选择查看秘密 API 密钥的选项，并创建一个新的 API 密钥。请将其保存以备后用。
- 让我们在脚本文件中复制 API 密钥，并使用 fetch 方法生成响应。添加所需的请求头，如果 API 密钥验证成功，则将回答或响应添加到消息中。如果失败，则生成一条错误消息，提示发生了错误。最后，无论创建了什么消息，都将聊天机器人容器向下滚动。
- 发送按钮负责处理消息的发送。
- 点击叉号按钮时，聊天机器人容器将消失，并会收到一条最后的致谢消息。
项目结构：
!project structure.png)项目结构
示例： 本示例演示了聊天机器人的工作原理，它会对用户的查询做出响应，并在 API 密钥出错时显示错误信息。
index.html
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
ChatBot
<span alt="Close"
id="cross"
onclick="cancel()">X
-
Hey! How can I assist you today?
placeholder="Enter a message…">
`
style.css
`
/style.css/
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap‘);
- {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
background-color: #f7f7f7;
}
.chatBot {
border: 3px solid #2F8D46;
border-radius: 10px;
margin: 50px auto;
overflow: hidden;
width: 500px;
overflow-y: clip;
height: 600px;
background: rgb(255, 255, 255) url(gfg-gg-logo.svg);
background-size: contain;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background-repeat: no-repeat;
background-position: center;
}
header {
background-color: #2F8D46;
text-align: center;
padding: 10px 0;
border-radius: 7px 7px 0 0;
}
header h2 {
color: #fff;
margin: 0;
}
.chatbox {
padding: 15px;
list-style: none;
overflow-y: auto;
height: 400px;
}
.chatbox li {
margin-bottom: 10px;
}
.chat p {
padding: 10px;
border-radius: 10px;
max-width: 70%;
word-wrap: break-word;
}
.chat-outgoing p {
background-color: #162887;
align-self: flex-end;
color: #fff;
}
.chat-incoming p {
background-color: #eaeaea;
}
.chat-input {
padding: 10px;
border-top: 1px solid #ccc;
}
.chat-input textarea {
width: 522px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 7px;
resize: none;
outline: none;
overflow-y: scroll;