「ChatGPT初体验：教你如何使用这个聊天机器人」

1个月前发布 yundic

58 0 0

ChatGPT初体验：教你如何使用这个聊天机器人

【注：本文教程中的代码示例均使用HTML5，适用于现代浏览器。如需兼容旧版浏览器，可能需要使用更老的HTML版本。】

1. 什么是ChatGPT？

ChatGPT是一款聊天机器人，它使用了OpenAI的GPT模型，可以根据用户的输入自动生成回复。与其他聊天机器人不同的是，ChatGPT具有良好的上下文记忆能力，可以对话过程中不断建立上下文，从而生产更为逼真和自然的回复。

2. 如何使用ChatGPT？

首先，你需要在OpenAI官网注册一个账号并申请API Key。在申请成功后，你可以使用以下代码调用ChatGPT API：

“`

const apiKey = ‘YOUR_API_KEY_HERE’;
const chatContainer = document.querySelector(‘.chat-container’);
const chatMessages = chatContainer.querySelector(‘.chat-messages’);
const chatInput = chatContainer.querySelector(‘.chat-input’);

async function sendMessage(message) {
const response = await fetch(`https://api.openai.com/v1/engine/…’
method: ‘POST’,
headers: {
‘Authorization’: `Bearer ${apiKey}`,
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({
“prompt”: message,
“max_tokens”: 50,
“temperature”: 0.7,
“stop”: [“n”]
})
});
const result = await response.json();
const text = result.choices[0].text.trim();
chatMessages.innerHTML += `

${text}

`;
chatMessages.scrollTop = chatMessages.scrollHeight;
}

chatInput.addEventListener(‘keydown’, function(event) {
if (event.keyCode === 13 && chatInput.value.trim() !== ”) {
const message = chatInput.value.trim();
chatInput.value = ”;
chatMessages.innerHTML += `

${message}

`;
chatMessages.scrollTop = chatMessages.scrollHeight;
sendMessage(message);
}
});

“`

这个代码块创建了一个聊天窗口，用户可以在其中输入消息并与ChatGPT进行对话。在窗口中新增了一个“chat-container”元素，它包括一个“chat-messages”元素和一个“chat-input”元素。 “chat-input”元素是一个文本框，用于输入消息。当用户按Enter键时，我们会调用sendMessage函数并将用户在文本框中输入的消息作为参数传递给它。

sendMessage函数会使用fetch API发送POST请求到OpenAI的API端点，并使用API密钥进行身份验证。API请求中带有一些参数，其中包括我们希望ChatGPT返回的最大令牌数（即生成的回复的长度）以及温度参数（温度参数用于控制回复的多样性，介于0和1之间，越接近1，则生成的回复越不可预见，越接近0，则回复越倾向于常见的语言）。当请求完成时，我们将取得返回的JSON响应，并从中提取生成的回复。最后，我们将新的消息作为HTML元素附加到“chat-messages”元素中。

3. 添加样式

现在我们已经完成了ChatGPT的基本功能，但是聊天窗口看起来一点也不友好。让我们添加一些样式，使其看起来更现代和美观。

“`

.chat-container {
position: fixed;
bottom: 10px;
right: 10px;
width: 400px;
height: 600px;
background-color: #f2f2f2;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
border-radius: 10px;
overflow: hidden;
}
.chat-messages {
height: 80%;
padding: 20px;
overflow-y: scroll;
}
.chat-message {
margin-bottom: 20px;
display: flex;
justify-content: flex-end;
}
.chat-message-text {
max-width: 70%;
padding: 10px;
background-color: #007bff;
color: white;
font-size: 16px;
border-radius: 20px;
}
.chat-input {
width: 100%;
height: 20%;
padding: 10px;
font-size: 16px;
border: none;
border-top: 1px solid #ccc;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}