-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathChatGptSinglePageAPI.html
207 lines (170 loc) · 6.08 KB
/
ChatGptSinglePageAPI.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
<!DOCTYPE html>
<html>
<head>
<title>Chat GPT Basic HTML API Example</title>
</head>
<body>
<label for="apiKey">OpenAI API Key:</label>
<input type="text" id="apiKey" value="Enter Your OpenAI API Key Here">
<button id="testButton">Test API Key</button>
<text id="result"></text>
<br>
If you need to get a key, log in with your google account and generate one here: <a href="https://beta.openai.com/account/api-keys">https://beta.openai.com/account/api-keys</a><br>
<script>
//select text in api key field when it is focused
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("apiKey").addEventListener("focus", function() {
this.select();
});
});
function testApiKey()
{
var apiKey = document.getElementById("apiKey").value;
var resultElem = document.getElementById("result");
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.openai.com/v1/models");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer " + apiKey);
xhr.onreadystatechange = function()
{
if (xhr.readyState === 4)
{
if (xhr.status === 200) {
resultElem.innerHTML = "API key is valid!";
} else {
resultElem.innerHTML = "API key is invalid: " + xhr.status;
}
}
};
try {
xhr.send();
} catch (error) {
console.error("An error occurred while sending the request to test api key:", error);
}
}
document.getElementById("testButton").addEventListener("click", testApiKey);
</script>
<div id="idContainer">
<textarea id="output" rows="10" style="margin-top: 10px; width: 100%;" placeholder="Output"></textarea>
<div>
<button type="button" id="send">Send</button>
<select id="selModel">
<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
<option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
<option value="gpt-4">gpt-4</option>
<option value="gpt-4-32k">gpt-4-32k</option>
</select>
</div>
<textarea id="input" rows="5" wrap="soft" style="width: 98%; margin-left: 3px; margin-top: 6px" placeholder="Input Text"></textarea>
</div>
<script>
//set up config vars
let wordRangeToSearchForLineBreak = 50;
let chunkWordLimit = 25000;
//set up temp vars
let OPENAI_API_KEY = "";
let textToEvaluate = "";
let summaryChunks = [];
let currentWordCount = 0;
let chunksToEvaluate = [];
let lastNumberOfChunks = 0;
let isWorking = false;
//set up Submit button listener (to be loaded after doc is loaded)
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("send").addEventListener("click", Send);
});
//function to respond to event and evaluate input
async function Send() {
if (isWorking === true)
{
alert("The system is stil processing. Refresh the page if you think it's taking too long. It will take some time as it talks back and forth to ChatGPT");
return;
}
isWorking = true;
textToEvaluate = document.getElementById("input").value;
if (textToEvaluate== "")
{
alert("Type in your question!");
input.focus();
isWorking = false;
return;
}
OPENAI_API_KEY = document.getElementById("apiKey").value;
currentWordCount = textToEvaluate.split(" ").length;
console.log(`The number of words in the input is: ${currentWordCount}`);
if (currentWordCount > chunkWordLimit)
{
alert("Your input is over the limit defined in this ChatGPT interface code. Limit is " + chunkWordLimit + " words.");
}else{
output.value += "\n\n";
output.value += await SendChunk(textToEvaluate);
}
isWorking = false; //restore functionality to submit button
}
async function SendChunk(gptSendText) {
return new Promise((resolve, reject) => {
var oHttp = new XMLHttpRequest();
oHttp.open("POST", "https://api.openai.com/v1/completions");
oHttp.setRequestHeader("Accept", "application/json");
oHttp.setRequestHeader("Content-Type", "application/json");
oHttp.setRequestHeader("OPENAI_API_KEY", OPENAI_API_KEY);
oHttp.setRequestHeader("Authorization", "Bearer " + OPENAI_API_KEY);
oHttp.onreadystatechange = function () {
if (oHttp.readyState === 4) {
var oJson = {};
try {
oJson = JSON.parse(oHttp.responseText);
} catch (ex) {
output.value += "Error: " + ex.message;
reject(ex);
}
if (oJson.error && oJson.error.message) {
output.value += "Error: " + oJson.error.message;
} else if (oJson.choices && oJson.choices[0].text) {
var gptResponse = oJson.choices[0].text;
if (gptResponse === "") gptResponse = "No response";
else if (gptResponse === null) gptResponse = "Null";
resolve(gptResponse);
}
}
};
var data = {
model: "text-davinci-003",
max_tokens: 2048,
prompt: gptSendText
};
try {
oHttp.send(JSON.stringify(data));
} catch (error) {
console.error("An error occurred while sending the request:", error);
return "An error occurred while sending the request: " + error;
}
input.value = "";
});
}
//Enter key submits form, shift+Enter allows user to add acutal newline in text field
document.addEventListener("keydown", function(event) {
if (event.keyCode === 13 && !event.shiftKey) {
event.preventDefault();
document.getElementById("send").click();
}
});
//put cursor in input field on document load
document.addEventListener("DOMContentLoaded", function() {input.focus();});
//standalone script to animate button text of Send button while 'isWorking' is true
document.addEventListener("DOMContentLoaded", function() {
let button = document.getElementById("send");
let states = ["o..", ".o.", "..o"];
let stateIndex = 0;
setInterval(async function() {
if (isWorking === true) {
button.innerHTML = states[stateIndex];
stateIndex = (stateIndex + 1) % states.length;
} else {
button.innerHTML = "Send";
}
}, 1000);
});
</script>
</body>
</html>