-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
216 lines (208 loc) · 10.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#app {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
background-color: rgb(100, 100, 100);
width: 330px;
height: 400px;
}
</style>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>ChatGPT(由GPT-3开放接口实现)</title>
<script src="./js/axios.min.js"></script>
</head>
<body background="./img/background.jpg" style="background-size: cover;">
<div id="app">
<div style="display: flex;justify-content: center;align-items: center;color:#eee;">
ChatGPT持续型聊天AI
</div>
<div style="display: flex;justify-content: center;align-items: center;">
<textarea id="res" cols="100" rows="20"></textarea>
</div>
<div style="color:#eee;">
请输入需要查询的内容:<br />(使用/help指令获取更多帮助)
</div>
<div>
</div>
<div style="display: flex;justify-content: left;align-items: center;margin: 20">
<textarea id="inputbox" type="text" v-model="info" cols="100" rows="2" style="margin:15"></textarea>
</div>
<div style="display: flex;justify-content: center;align-items: center;margin: 20;">
<button onclick="ask()" style="width: 100%;">发送<br />文本</button>
</div>
<br />
</div>
<script>
window.apikey = "";
window.prompt1 = "";
window.mt = 2048;
window.tpr = 1;
window.tp = 1;
window.fp = 0;
window.pp = 0;
window.mode = "true";
window.csize = 1000;
const textarea = window.document.getElementById("res");
const inputbox = window.document.getElementById("inputbox");
var histories = "";
addText("欢迎使用ChatGPT智能AI客服,本项目基于GPT-3接口开发,能够实现与ChatGPT类似的持续性对话功能,AI将记忆并结合语境对话。");
if (getCookie("apikey") != undefined && getCookie("apikey") != "") {
window.apikey = getCookie("apikey");
} else {
window.apikey = prompt("请在输入框内输入并提交您从官方网站获取的apikey:");
setCookie("apikey", window.apikey);
}
if (getCookie("prompt1") != undefined) {
window.prompt1 = getCookie("prompt1");
}
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 (为每次发送的文本添加前置上下文)\n" +
"/prompt (为每次发送的文本添加前置上下文)\n" +
"/maxtoken (用于控制ChatGPT每次能生成的词数.)\n" +
"/tpr (可以用来控制chatbot生成的话的多样性)\n" +
"/top (可以用来控制chatbot生成的话的质量)\n" +
"/fp (可以用来控制chatbot生成的话的“新颖程度”)\n" +
"/pp (用于控制bot产生的句子的长度)\n" +
"/info (用于显示当前各项参数的值)\n" +
"/mode (用于设置是否启用持续对话模式)\n" +
"/csize (用于设置每次发送给API接口的字符数)\n" +
"/save (用于将设置的参数保存到浏览器的Cookie,有效期30天)");
break;
case "info": addText(
"当前的各项参数:\n\n" +
"apikey:" + window.apikey + "\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("prompt1", 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 "prompt": window.prompt1 = prompt("Prompt 请输入要添加的上下文文本,默认为空"); addText("设置成功"); break;
case "maxtoken": window.mt = Number(prompt("Max_tokens 请输入ChatGPT每次能生成的词数,默认为2048")); 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 = prompt("csize 输入一个0到1000的整数,默认为1000"); addText("设置成功"); break;
default: alert("未知指令");
}
inputbox.value = "";
return;
}
if (window.mode == "false") {
histories = [];
}
histories += "\n" + window.prompt1 + "\nQ:" + intputtext + "。";
let question = "";
if (histories.length <= window.csize) {
question = histories;
} else {
question = histories.substring(histories.length - window.csize)
}
console.log(question);
addText("我说:\n\n" + intputtext);
textarea.value += '\n正在请求数据......';
textarea.scrollTop = textarea.scrollHeight;
axios.post('https://api.openai.com/v1/completions', {
prompt: question, max_tokens: window.mt, model: "text-davinci-003", 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 => {
let arr = textarea.value.split("\n");
arr = arr.slice(0, arr.length - 1);
textarea.value = arr.join("\n");
let result = response.data.choices[0].text;
histories += "\n" + result;
let result1 = result;
addText("AI说:\n" + result1.replace('A:', '').replace('A:', ''));
inputbox.value = "";
}).catch(error => {
console.log(error);
alert("服务器报错:\n" + error);
});
}
function addText(text) {
textarea.value += "\n" + text + "\n" + "————————————————————";
textarea.scrollTop = textarea.scrollHeight;
}
// 添加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;
}
</script>
</body>
</html>