const openaiURL = "https://api.openai.com/v1/chat/completions"; // can POST to this 3rd party URL
const themodel = "gpt-3.5-turbo"; // the OpenAI model we are going to talk to
const threeScript = document.createElement('script');
threeScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
document.head.appendChild(threeScript);
// default API key and prompt:
var apikey = "";
var theprompt = "hello";
// default body is margin 0 and padding 0
// give it more whitespace:
$('body').css("margin", "20px");
$('body').css("padding", "20px");
document.write(`
<style>
body {
background-image: url('https://media.giphy.com/media/fvY8JtKw8Bx3bXYlIi/giphy.gif');
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
margin: 0;
padding-top: 250px; /* Adjust the top padding as needed */
}
h1, h3, p {
color: #2e4053; /* Dark blue-gray text color */
text-align: center;
}
a {
color: #3498db; /* Dodger blue link color */
}
input, button {
margin-top: 10px;
}
pre {
margin-bottom: 20px;
}
#enterkey {
text-align: center;
}
#drawing-section {
background-color: #ecf0f1; /* Light gray background for drawing section */
margin-top: 20px; /* Adjust the top margin for the drawing section */
}
</style>
<h1> Chat with GPT model </h1>
Running World:
<a href='https://ancientbrain.com/world.php?world=2850716357'>Chat with GPT model</a>.
<br>
<pre></pre>
<h3> Enter API key </h3>
The crucial thing is you need an "API key" to talk to OpenAI. <br>
Register for free and get your API key
<a href='https://platform.openai.com/account/api-keys'>here</a>.
<br>
You enter your API key below and then chat away.
Then communications to OpenAI come from your IP address using your API key.
<br>
This World will never store your API key.
You can view the <a href='https://ancientbrain.com/viewjs.php?world=2850716357'> source code</a> to see that is true!
<p>
<div id=enterkey>
Enter API key:
<input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
<button onclick='setkey();' class=ab-normbutton >Set API key</button>
</div>
<pre></pre>
<div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;">
<h3> Enter any question? </h3>
<h4> To generate any graphical shape ask question in this format: can you draw two boxes in three.js under jquery? </h4>
<input style="width:50vw;" id=me placeholder="Enter question?" >
<button onclick="sendchat();" class=ab-normbutton > Send </button>
</div>
<div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
<h3> GPT replies </h3>
<div id=them> </div>
</div>
<div>
<h3 style="text-align: center;">Set Temperature</h3>
<h3 style="text-align: center;">Default temperature is 0.7</h3>
<select id="temperatureDropdown" style="margin-top: 10px; margin-bottom: 10px; width: 60%; display: block; margin-left: auto; margin-right: auto;">
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<!-- Add more options as needed -->
</select>
<button onclick="submitTemperature();" class="ab-normbutton" style="display: block; margin-left: auto; margin-right: auto;">Submit Temperature</button>
</div>
<button onclick="clearScreen();" class=ab-normbutton >Clear Screen</button>
<pre></pre>
<div id="drawing-section" style="width: 60vw; border: 1px solid black; margin: 20; padding: 20px;">
<h3> Drawing Section </h3>
<!-- Add your drawing elements here -->
</div>
`);
function setkey() {
apikey = jQuery("input#apikey").val();
apikey = apikey.trim();
$("#enterkey").html("<b> API key has been set. </b>");
}
// Enter will also send chat:
document.getElementById('me').onkeydown = function (event) { if (event.keyCode == 13) sendchat(); };
// --- Send my line of text ----------------------------------------------------------------
function sendchat() {
theprompt = $("#me").val();
var selectedTemperature = $("#temperatureDropdown").val();
// Construct request as JSON with the selected temperature
var thedata = {
"model": themodel,
"temperature": parseFloat(selectedTemperature), // Convert to float
"messages": [{
"role": "user",
"content": theprompt
}]
};
// construct request as JSON
var thedata = {
"model": themodel,
"temperature": 0.1,
"messages": [{
"role": "user",
"content": theprompt
}]
};
// then as string representing that JSON:
var thedatastring = JSON.stringify(thedata);
// HTTP headers must be set up with API key:
$.ajaxSetup({
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + apikey
}
});
// POST to 3rd party URL:
$.ajax({
type: "POST",
url: openaiURL,
data: thedatastring,
dataType: "json",
success: function (d, rc) { successfn(d, rc); },
error: function () { errorfn(); }
});
}
// global variable to examine return data in console
var a;
function successfn(data, rc) {
a = data;
var answer = a["choices"][0].message.content;
$("#them").append("<p>" + answer + "</p>");
// Run the code received from GPT and display the result in the drawing section
runReceivedCode(answer);
}
function errorfn() {
if (apikey == "") $("#them").html("<font color=red><b> Enter API key to be able to chat. </b></font>");
else $("#them").html("<font color=red><b> Unknown error. </b></font>");
}
function clearScreen() {
$("#them").html("");
$("#drawing-section").html("");
// Clear the drawing section
$("canvas").remove();
}
function runReceivedCode(code) {
console.log("Received code:", code);
try {
// Remove the first word from the code (assuming words are space-separated)
const modifiedCode = code.split(' ').slice(1).join(' ');
eval(modifiedCode);
} catch (error) {
}
}