// Use JS to write whatever HTML and data you want to the page
// One way of using JS to write HTML and data is with a multi-line string
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
//I Tried to Create a Blank World and Start writing my code from scratch
// MH edit
const apikey = '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'; // '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';
document.write ( `
<div style = "background-color: black;"> // Main Container Div
</br>
<h1 style = "text-align:center; margin-top: 10px; color:white">Chat with GPT !!</h1> //Header
</br>
<div style = "text-align:center;color:white" id="randomness_div"> // Div for Slider
<p>Use Slider to Change Randomness in Answers.</p>
<input type="range" min="1" max="10" value="7" class="slider" id="randomness_slider" oninput="this.nextElementSibling.value = this.value/10">
<output>0.7</output>
</div>
</br>
<div style = "text-align:center;color:white" id="dropdown_div"> // Div for Dropdown
<p>What would you like the chatbot to do? Select from the dropdown below:</p>
<select name="gptoptions" id="gptoptions">
<option value="Answer Questions">Answer Questions</option>
<option value="Summarize for a 2nd Grader">Summarize for a 2nd Grader</option>
<option value="Grammer Correction">Grammer Correction</option>
<option value="Extract Keywords">Extract Keywords</option>
<option value="Product Name Generator">Product Name Generator</option>
<option value="Tweet Classifier">Tweet Classifier</option>
<option value="Code Explaination">Code Explaination</option>
<option value="English to French Translator">English to French Translator</option>
<option value="Code Efficiency Improver">Code Efficiency Improver</option>
<option value="Graphics">Graphics</option>
</select>
</div>
</br>
<div style = "text-align:center;color:white" id="input_div"> // Div for user query
<p>Enter your Search Query.</p>
<input style = "width: 500px; height: 60px; maxlength: 1000" id="searchbox"> </input>
<button style = "width: 200px; height: 30px;" onclick = "CallOpenAIAPIWithFetch();">Search</button>
</div>
</br>
<div style = "text-align:center; visibility:hidden; color:white" id="loading_div"> // Div to show content is loading
<p>Loading Your Answers. Please wait a few Seconds!!! </p>
</div>
</br>
<div style = "text-align:center; color:white" id="output_div"> // Div to display the answers
<p>Your Search Result will Appear in the Box Below.</p>
<textarea style = "width: 700px; height: 100px;" id="searchresult" readonly> </textarea>
</div>
</br>
<div style = "text-align:center; visibility:hidden; color:white" id="LinkDiv"> // Div to display link to three.js graphics
<a href='#' id="GraphicPageLink" style = "color:hotpink">Graphic's page.</a>
</div>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</div>
` );
//Function to call OpenAI API
async function CallOpenAIAPIWithFetch(){
console.log("Calling Open AI API with Fetch");
document.getElementById("loading_div").style.visibility = "visible";
var searchquery = document.getElementById("searchbox").value;
var tempvalue = document.getElementById("randomness_slider").value;
tempvalue = tempvalue/10; //Slider's value has to be whole number so converting to decimal.
var selectedgptoption = document.getElementById("gptoptions").value;
var gptbehaviormessage = "none";
if(selectedgptoption === "Summarize for a 2nd Grader"){
gptbehaviormessage = "Summarize content you are provided with for a second-grade student.";
}
else if(selectedgptoption === "Grammer Correction"){
gptbehaviormessage = "You will be provided with statements, and your task is to convert them to standard English.";
}
else if(selectedgptoption === "Extract Keywords"){
gptbehaviormessage = "You will be provided with a block of text, and your task is to extract a list of keywords from it.";
}
else if(selectedgptoption === "Product Name Generator"){
gptbehaviormessage = "You will be provided with a product description and seed words, and your task is to generate product names.";
}
else if(selectedgptoption === "Tweet Classifier"){
gptbehaviormessage = "You will be provided with a tweet, and your task is to classify its sentiment as positive, neutral, or negative.";
}
else if(selectedgptoption === "Code Explaination"){
gptbehaviormessage = "You will be provided with a piece of code, and your task is to explain it in a concise way.";
}
else if(selectedgptoption === "English to French Translator"){
gptbehaviormessage = "You will be provided with a sentence in English, and your task is to translate it into French.";
}
else if(selectedgptoption === "Code Efficiency Improver"){
gptbehaviormessage = "You will be provided with a piece of Python code, and your task is to provide ideas for efficiency improvements.";
}
else{
gptbehaviormessage = "No Message";
}
// Preparing the body for the API Request
if(selectedgptoption == "Answer Questions"){
var datatosend = {
model: "gpt-3.5-turbo",
messages: [
{
"role": "user",
"content": searchquery
}
],
temperature:tempvalue
};
}
else if(selectedgptoption == "Graphics"){
searchquery = searchquery + " in Three.js. Give me the code only and do not include any comments or import statements in the code. Assume three.js has been imported. Do not give me any comments. Assume scene is not present so create scene at the top. Add Code for Camera, Render and Animate at the end. Mark the start of code with | symbol. Add | symbol only at the start not before start of every line. Mark the end of code with | symbol.";
var datatosend = {
model: "gpt-3.5-turbo",
messages: [
{
"role": "user",
"content": searchquery
}
],
temperature:tempvalue
};
}
else{
var datatosend = {
model: "gpt-3.5-turbo",
messages: [
{
"role": "system",
"content": gptbehaviormessage
},
{
"role": "user",
"content": searchquery
}
],
temperature:tempvalue
};
}
//Calling the API and Processing the Response
let response = await fetch(
'https://api.openai.com/v1/chat/completions',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apikey
},
body: JSON.stringify(datatosend)
}
);
var result = await response.json();
document.getElementById("loading_div").style.visibility = "hidden";
// Displaying the results
if(selectedgptoption == "Graphics"){
document.getElementById("GraphicPageLink").href = "https://run.ancientbrain.com/run.php?world=7770008181&graphiccode="+result.choices[0].message.content;
document.getElementById("LinkDiv").style.visibility = "visible";
document.getElementById("LinkDiv").style.textAlign = "center";
document.getElementById("searchresult").value = "Your code has been generated. Click on the link below to view the code!!"
console.log(result.choices[0].message.content);
}
else{
document.getElementById("searchresult").value = result.choices[0].message.content;
}
console.log("Run Completed");
}