51工具盒子源码来自GitHub：https://github.com/sbaliyun/chatgpt-html
一、自备官方的api-keys
创建地址：https://platform.openai.com/account/api-keys
二、开始
var xhr = new XMLHttpRequest();
var url = "https://api.openai.com/v1/completions";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer sk-*******************");
直接修改index.html文件的第47行，修改你的api-keys
下载地址：https://xcyp.lanzouf.com/iFfaY0o51ane
三、其他修改
原版有一点点外链，我删减了一下，复制粘贴到index.html里面就可以
<!doctype html>
<html class="no-js" lang="">
\<head\>
\<meta charset="utf-8"\>
\<meta http-equiv="x-ua-compatible" content="ie=edge"\>
\<title\>这里是标题\</title\>
\<meta name="description" content=""\>
\<meta name="viewport" content="width=device-width, initial-scale=1"\>
\<style\>#chatgpt-response { font-family: "宋体"; font-size: 20px; color: #0000FF; font-weight: bold; }\</style\>
\<!-- favicon icon --\>
\<link rel="icon" href="img/favicon.png"\>
\<!-- All CSS Files Here --\>
\<link rel="stylesheet" href="css/bootstrap.min.css"\>
\<link rel="stylesheet" href="css/et-line-fonts.css"\>
\<link rel="stylesheet" href="css/ionicons.min.css"\>
\<link rel="stylesheet" href="css/magnific-popup.css"\>
\<link rel="stylesheet" href="css/meanmenu.css"\>
\<link rel="stylesheet" href="css/global.css"\>
\<link rel="stylesheet" href="style.css"\>
\<link rel="stylesheet" href="css/responsive.css"\>
\<script src="js/vendor/modernizr-2.8.3.min.js"\>\</script\>
\<script\>
async function callCHATGPT() {
var responseText1 = document.getElementById("chatgpt-response");
responseText1.innerHTML = ""
function printMessage(message) {
var responseText = document.getElementById("chatgpt-response");
var index = 0;
// 创建一个定时器，每隔一段时间打印一个字符
var interval = setInterval(function() {
responseText.innerHTML += message[index];
index++;
// 当打印完成时，清除定时器
if (index >= message.length) {
clearInterval(interval);
}
},
150); // 每隔50毫秒打印一个字符
}
var xhr = new XMLHttpRequest();
var url = "https://api.openai.com/v1/completions";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer sk-*****************");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
var response = json.choices[0].text;
// 将CHATGPT的返回值输出到文本框
var responseText = document.getElementById("chatgpt-response");
var index = 0;
// 创建一个定时器，每隔一段时间打印一个字符
var interval = setInterval(function() {
responseText.innerHTML += response[index];
index++;
// 当打印完成时，清除定时器
if (index >= response.length) {
clearInterval(interval);
}
},
50); // 每隔50毫秒打印一个字符
}
};
var data = JSON.stringify({
"prompt": document.getElementById("chat-gpt-input").value,
"max_tokens": 2048,
"temperature": 0.5,
"top_p": 1,
"frequency_penalty": 0,
"presence_penalty": 0,
"model": "text-davinci-003"
});
console.log(data);
await printMessage('正在思考，请等待......');
await xhr.send(data);
}
</script>
\</head\>
\<body\>
\<div class="page-loader"\>
\<div class="loader"\>Loading...\</div\>\</div\>
\<header id="sticky-header"\>
\<div class="header-area"\>
\<div class="container sm-100"\>
\<div class="row"\>
\<div class="col-md-3 col-sm-2"\>
\<div class="logo text-upper"\>
\<h4\>
\<a href="index.html"\>Ai\</a\>\</h4\>
\</div\>
\</div\>
\</div\>
\</div\>
\</div\>
\</header\>
\<div class="basic-portfolio-area ptb-10"\>
\<div class="filter-menu text-center mb-40"\>
\<h4\>ChatGPT\</h4\>
\<h3\>访问费用由站长承担，请勿频繁访问！\</h3\>
\<h3\>此网站为公益网站如果你在某宝某鱼购买的 请申请退款 并举报！\</h3\>
\<h3\>本站仅为方便用户使用Open AI 提供的服务，不对用户使用Open AI服务的任何行为负责！\</h3\>
\<h3\>您在使用的过程中，应遵守相关法规政策、用户协议、规则规范等\</h3\>
\</div\>
\<div class="call-to-action-area gray-bg ptb-60"\>
\<div class="container"\>
\<div class="row"\>
\<div class="col-md-9 col-sm-9 col-xs-12"\>
\<div class="form-group"\>
\<label\>\</label\>
\<textarea class="form-control" id="chat-gpt-input" placeholder="输入描述" rows="3" resize="none" style="width: 135%; margin: 0 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 12px;"\>\</textarea\>
\</div\>
\<div class="col-md-3 col-sm-3 col-xs-12"\>
\<div class="call-to-action"\>
\<button autocomplete="off" class="btn btn-large" href="#" style="background-color: #333; color: #f4f4f4; border-radius: 10px"\>
\<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"\>\</span\>Click to
\<br\>Answer\</button\>\</div\>
\</div\>
\<div class="col-md-9 col-sm-9 col-xs-12"\>
\<div class="form-group"\>
\<label\>\</label\>
\<textarea class="form-control" id="chatgpt-response" placeholder="长途访问，请耐心等待回答 Ai生成它很快，但是由于网络问题我们需要等待，通常内容越长等待越久 如果长时间没反应请刷新页面重试" rows="26" resize="none" style="width: 150%;height: auto; margin: 0 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 10px; overflow: scroll;" readonly="true"\>\</textarea\>
\</div\>
\</div\>
\</div\>
\</div\>
\</div\>
\<footer\>
\<div class="basic-footer gray-bg text-center ptb-90"\>
\<div class="container"\>
\<div class="footer-logo mb-30"\>
\<h3\>\<a href="index.html"\>Open Ai 智能对话\</a\>\</h3\>
\</div\>
\</div\>
\</div\>
\</footer\>
<script src="js/vendor/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.meanmenu.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?05df94d9887ea8acd5a75f70e8a6bb11";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
`</div>
</body>
</html>`
当然api-keys还是在47行修改
最后的页面就是这样的
