 GPT答： |
7i24.cn
|
并展示出来
```
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 16px;
}
#container {
width: 800px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size:24px;
}
#question-box {
width: 700px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 10px;
}
#answer-box {
padding: 10px;
margin: 10px auto;
width:700px;
border:1px solid #ccc;
}
.btn {
background-color: #0088cc;
color: white;
padding: 10px 20px;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<h1>Chatgpt机器人</h1>
<div id="question-box">
您想要问的问题
</div>
<div>
<button type="button" class="btn">提问</button>
</div>
<div id="answer-box">
Chatgpt机器人给出的回答
</div>
</div>
</body>
</html>
```
Javascript代码（使用Chatgpt官方API）：
```
document.querySelector('button').addEventListener('click',
function(){
//获取提问框输入的内容
var question = document.querySelector('#question-box').value;
//请求Chatgpt官方API
fetch('https://api.chatgpt.com/v1/data/question', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"question": question
})
})
.then(function(response) {
return response.json();
})
.then(function(responseJSON) {
//获取Chatgpt机器人返回的回答
var answer = responseJSON.data.answer;
//显示在回答框
document.querySelector('#answer-box').innerHTML = answer;
});
});
```
|
