//variables for message and the API keyvar API_KEY ="";var message ="";//function to send message
async function getMessage(){
theprompt = $("#message").val();//the prompt is the input valueconst options ={
method:'POST',
headers:{'Authorization':`Bearer ${API_KEY}`,'Content-Type':'application/json'},
body: JSON.stringify({
model:"gpt-3.5-turbo",
temperature:0.7,
messages:[{role:"user",content:theprompt}],
max_tokens:100})};try{const response = await fetch('https://api.openai.com/v1/chat/completions', options);const data = await response.json();//wait for the response
output.textContent = data.choices[0].message.content;//display the outputif(data.choices[0].message.content){//if there are choicesvar pElement = document.createElement('p');//create p tagconst bElement = document.createElement('br');//create br tag
pElement = theprompt;//set the pElement to be the prompt
h.append(bElement,pElement);//appending input to the history}}catch(error){
console.error(error);}}//test function to test adding to thhe history/*function test(){
theprompt = $("#message").val();
var pElement = document.createElement('p');
const bElement = document.createElement('br');
pElement = theprompt;
h.append(bElement,pElement);
}*///to get a fun message
async function getFunMessage(){const options ={
method:'POST',
headers:{'Authorization':`Bearer ${API_KEY}`,'Content-Type':'application/json'},
body: JSON.stringify({
model:"gpt-3.5-turbo",
messages:[{role:"user",content:"give me a fun quote"}],//setting a message
max_tokens:100})};try{const response = await fetch('https://api.openai.com/v1/chat/completions', options);const data = await response.json()
output.textContent = data.choices[0].message.content;}catch(error){
console.error(error);}}function setapikey()//setting the api key {
API_KEY = jQuery("input#apikey").val();
API_KEY = API_KEY.trim();if(jQuery("input#apikey").val()===""){$("#enterkey").html ("<b> Need API KEY. </b><br> Please Reload Page");}else{
$("#enterkey").html ("<b> API key has been set. </b>");}}//this is to load the page when you run the world
document.write(`<style>
h1 {text-align:center;}
body {margin:20px;}
body {padding:20px;position:relative;}#entermessage{
text-align:center;
position:absolute;
bottom:70px;
width:100%;}#enterfunmessage {
text-align:center;
position:absolute;
bottom:10px;
width:100%;}#reply{
text-align:center;
bottom:190px;
left:0;
right:0;
margin:auto;
width:50%;
border-style:outset;
position:absolute;}#output{
padding:10px;}#enterkey{
text-align:center;}#message{
left:0;
right:0;
margin:auto;
width:20%;
border-style:outset;
position:absolute;}#h{
text-align:center;
border-style:outset;
padding:10px;
width:170px;
height:500px;
overflow-x:hidden;
overflow-y:auto;}</style><h1>SAYING HELLO TO THE API</h1><br><div id=enterkey>Enter your PRIVATE API key:<br><input NAME="apikey" id="apikey" VALUE=''><button style="padding:5px; border-radius: 50%;" onclick='setapikey();'class=ab-normbutton >Set key</button></div><br><br><div id=reply><p>TheOutput:</p><p id=output ></p></div><div id=entermessage>To test the API, say anything to Chatgpt and watch its response :)<br><br><input NAME="message" onfocus="this.value=''" id="message" VALUE=''><br><br><button style="padding:5px; border-radius: 50%;" onclick='getMessage();'class=ab-normbutton >SendMessage</button></div><div id=h><p id=history></div><div id=enterfunmessage><button style="padding:5px; border-radius: 50%;"onclick='getFunMessage();'class=ab-normbutton >TryMe</button></div>`)