-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
294 lines (274 loc) · 12.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0px;
padding: 0px;
background: url(./img/background3.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
}
#app {
z-index: 1;
width: 90%;
max-width: 1000px;
margin: 4vh auto;
border-radius: 30px;
box-shadow: 0px 0px 10px #323131;
padding: 10px;
background: rgba(118, 117, 117, 0.7);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.title {
text-align: center;
font-size: 20px;
font-weight: bold;
color: #ffffff;
}
#res {
width: 100%;
margin: 0;
padding: 0;
height: 350px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 15px;
resize: vertical;
}
.promptText {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #e3e4ee;
}
#inputbox {
width: 100%;
margin: 0;
padding: 0;
height: 60px;
border: 1px solid #ccc;
border-radius: 5px;
padding-top: 10px;
font-size: 16px;
resize: vertical;
}
.sendbox {
text-align: center;
}
button {
padding: 10px 50px;
background-color: #ffffff;
color: rgb(17, 17, 17);
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
display: inline-block;
margin: 10px;
}
</style>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>Chat-GPT-3.5 turbo (由GPT-3.5 turbo 开放接口实现)</title>
<script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
<div class="title">Chat-GPT-3.5 turbo</div>
<textarea id="res"
placeholder="欢迎使用ChatGPT智能AI客服,本项目基于GPT-3.5 turbo接口开发,能够实现与ChatGPT类似的持续性对话功能,AI将记忆并结合语境对话。点击发送按钮发送问题,点击清空按钮清除历史记录。"></textarea>
<div class="promptText">请输入需要查询的内容：(使用/help指令获取更多帮助) </div>
<div class="inputbox">
<textarea id="inputbox" autofocus required type="text" cols="100" rows="2"
placeholder="请在这里输入问题"></textarea>
</div>
<div class="sendbox"><button onclick="clear1()">清空</button><button onclick="ask()">发送</button></div>
</div>
<script>
window.apikey = "";
window.system = "";
window.prompt1 = "";
window.mt = 2096;
window.tpr = 1;
window.tp = 1;
window.fp = 0;
window.pp = 0;
window.mode = "true";
window.csize = 30;
window.username = "user";
const textarea = window.document.getElementById("res");
const inputbox = window.document.getElementById("inputbox");
var histories = [];
addText("欢迎使用ChatGPT智能AI客服,本项目基于GPT-3.5 turbo接口开发,能够实现与ChatGPT类似的持续性对话功能,AI将记忆并结合语境对话。点击发送按钮发送问题,点击清空按钮清除历史记录。");
if (getCookie("apikey") != undefined && getCookie("apikey") != "") {
window.apikey = getCookie("apikey");
} else {
window.apikey = prompt("请在输入框内输入并提交您从官方网站获取的apikey:");
setCookie("apikey", window.apikey);
}
if (getCookie("prompt") != undefined) {
window.prompt1 = getCookie("prompt");
}
if (getCookie("mt") != undefined) {
window.mt = Number(getCookie("mt"));
}
if (getCookie("tpr") != undefined) {
window.tpr = Number(getCookie("tpr"));
}
if (getCookie("tp") != undefined) {
window.tp = Number(getCookie("tp"));
}
if (getCookie("fp") != undefined) {
window.fp = Number(getCookie("fp"));
}
if (getCookie("pp") != undefined) {
window.pp = Number(getCookie("pp"));
}
if (getCookie("mode") != undefined) {
window.mode = getCookie("mode");
}
if (getCookie("csize") != undefined) {
window.csize = Number(getCookie("csize"));
}
function ask() {
let intputtext = inputbox.value;
if (intputtext.startsWith("/")) {
intputtext = intputtext.substring(1);
switch (intputtext) {
case "help":
addText("请输入以下指令来更改ChatGPT的参数:\n\n" +
"/apikey (用于设置apikey,只有在官网注册获取apikey才能正常使用本服务)\n" +
"/system (为每次发送的文本添加系统级描述)\n" +
"/prompt (为每次发送的文本添加前置上下文)\n" +
"/maxtoken (用于控制ChatGPT每次能生成的词数.)\n" +
"/tpr (可以用来控制ChatGPT生成的话的多样性)\n" +
"/top (可以用来控制ChatGPT生成的话的质量)\n" +
"/fp (可以用来控制ChatGPT生成的话的“新颖程度”)\n" +
"/pp (用于控制ChatGPT产生的句子的长度)\n" +
"/info (用于显示当前各项参数的值)\n" +
"/mode (用于设置是否启用持续对话模式)\n" +
"/csize (用于设置记忆历史对话的条数)\n" +
"/save (用于将设置的参数保存到浏览器的Cookie,有效期30天)");
break;
case "info": addText(
"当前的各项参数:\n\n" +
"apikey:" + window.apikey + "\n\n" +
"system:" + window.system + "\n\n" +
"prompt:" + window.prompt1 + "\n\n" +
"Max_tokens:" + window.mt + "\n" +
"Temperature:" + window.tpr + "\n" +
"Top_p:" + window.tp + "\n" +
"Frequency_penalty:" + window.fp + "\n" +
"Presence_penalty:" + window.pp + "\n" +
"mode:" + window.mode + "\n" +
"csize:" + window.csize);
break;
case "save":
setCookie("apikey", window.apikey);
setCookie("system", window.system);
setCookie("prompt", window.prompt1);
setCookie("mt", window.mt);
setCookie("tpr", window.tpr);
setCookie("tp", window.tp);
setCookie("fp", window.fp);
setCookie("pp", window.pp);
setCookie("mode", window.mode);
setCookie("csize", window.csize);
addText("参数保存成功,数据将保存30天");
break;
case "apikey": window.apikey = prompt("apikey 请输入从官网获取到的apikey,默认为空"); addText("设置成功"); break;
case "system": window.system = prompt("system 请输入要添加的系统级描述文本,默认为空"); addText("设置成功"); break;
case "prompt": window.prompt1 = prompt("prompt 请输入要添加的上下文文本,默认为空"); addText("设置成功"); break;
case "maxtoken": window.mt = Number(prompt("Max_tokens 请输入ChatGPT每次能生成的词数,默认为2096")); addText("设置成功"); break;
case "tpr": window.tpr = Number(prompt("Temperature 请输入一个0到1.0的一位小数,默认为1.0")); addText("设置成功"); break;
case "top": window.tp = Number(prompt("Top_p 请输入一个0到1.0的一位小数,默认为1.0")); addText("设置成功"); break;
case "fp": window.fp = Number(prompt("Frequency_penalty 请输入一个-2.0到2.0的一位小数,默认为0")); addText("设置成功"); break;
case "pp": window.pp = Number(prompt("Presence_penalty 请输入一个-2.0到2.0的一位小数,默认为0")); addText("设置成功"); break;
case "mode": window.mode = prompt("mode 输入“true”开启持续对话模式,输入“false”关闭该模式,默认为“true”"); addText("设置成功"); break;
case "csize": window.csize = Number(prompt("csize 用于设置记忆历史对话的条数,默认为30条")); addText("设置成功"); break;
default: alert("未知指令");
}
inputbox.value = "";
return;
}
if (window.mode == "false") {
histories = [];
}
histories.push({ "role": window.username, "content": intputtext });
if (histories.length > window.csize) {
histories = histories.slice(-window.csize);
}
addText(window.username + "说：\n\n" + intputtext);
textarea.value += '\n正在请求数据......';
textarea.scrollTop = textarea.scrollHeight;
const question = JSON.parse(JSON.stringify(histories));
if (window.prompt1 != "") {
question.unshift({ "role": window.username, "content": window.prompt1 });
}
if (window.system != "") {
question.unshift({ "role": 'system', "content": window.system });
}
console.log(question);
axios.post('https://api.openai.com/v1/chat/completions', {
messages: question, max_tokens: window.mt, model: "gpt-3.5-turbo", temperature: window.tpr,
top_p: window.tp, frequency_penalty: window.fp, presence_penalty: window.pp
}, {
headers: { 'Content-type': 'application/json', 'Authorization': 'Bearer ' + window.apikey }
}
).then(response => {
removeLine();
let resultstring = response.data.choices[0].message.content;
let resultname = response.data.choices[0].message.role;
let result = { "role": resultname, "content": resultstring };
histories.push(result);
addText(resultname + "说:\n\n" + resultstring);
inputbox.value = "";
}).catch(error => {
removeLine();
console.log(error);
alert("服务器报错:\n" + error);
});
}
function addText(text) {
textarea.value += "\n" + text + "\n" + "————————————————————";
textarea.scrollTop = textarea.scrollHeight;
}
function removeLine() {
let arr = textarea.value.split("\n");
arr = arr.slice(0, arr.length - 1);
textarea.value = arr.join("\n");
}
// 添加cookie
function setCookie(name, value) {
let days = 10;
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toUTCString();
}
document.cookie = name + '=' + (value || '') + expires + '; path=/';
}
// 读取cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function clear1() {
console.log("已清除对话历史记录。");
histories = [];
textarea.value = "";
}
</script>
</body>
</html>