// Cloned by Reeve Barreto on 17 Nov 2023 from World "Chat with GPT model" by Starter user
// Please leave this clone trail here.
// talk to OpenAI GPT model (ChatGPT)
// adapted from:
// https://platform.openai.com/docs/api-reference/making-requests
// default API key:
let API_BASE_URL = "https://api.openai.com/v1/";
let apikey = "";
let prompt = ""
let question = ""
let scene = ""
// default body is margin 0 and padding 0
// give it more whitespace:
$('body').css( "margin", "20px" );
$('body').css( "padding", "20px" );
document.write ( `
<style>
.loader {
display: none;
position: relative;
top:50%;
left:50%;
width: 48px;
height: 48px;
border: 5px solid #000;
border-bottom-color: transparent;
border-radius: 50%;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<span class="loader"></span>
<h1> Chat with GPT model </h1>
Running World:
<a href='https://ancientbrain.com/world.php?world=2850716357'>Chat with GPT model</a>.
<br>
Chat with
<A HREF="https://platform.openai.com/docs/models/overview">GPT 3.5</A>
using the
<A HREF="https://en.wikipedia.org/wiki/OpenAI">OpenAI </A> API.
<br>
This is the model
<A HREF="https://en.wikipedia.org/wiki/ChatGPT">ChatGPT</A> uses.
<pre>
</pre>
<h3> Enter API key </h3>
<div id=enterkey>
Enter API key:
<input style='width:25vw;' maxlength='2000' 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;">
<h2>Chat Completions</h2>
<h3>Prompt Engineering</h4>
<p><b>You may select one of the personalities:</b></p>
<input type="radio" id="p1" name="fav_language" value="Pretend you are a pirate captain aboard the notorious pirate ship, 'The Binary Buccaneer'. Give answers in this style.">
<label for="p1">Pretend you are a pirate captain aboard the notorious pirate ship, 'The Binary Buccaneer'. Give answers in this style.</label><br>
<br>
<input type="radio" id="p2" name="fav_language" value="Pretend you are a poetic AI in fair Verona, in the Shakespearean era. Give answers in this style.">
<label for="p2">Pretend you are a poetic AI in fair Verona, in the Shakespearean era. Give answers in this style.</label><br>
<h3> Enter a "prompt" </h3>
<input style="width:100%; padding: 5px 20px;" id="question" placeholder="what do you wanna ask?" >
<button onclick="sendchat();" style="display: block; padding: 5px 20px; margin-top: 10px" class=ab-normbutton > Send </button>
</div>
<pre></pre>
<div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
<h3> GPT replies </h3>
<div id=them > </div>
</div>
<pre>
</pre>
<div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;">
<h2>DALL-E</h2>
<h3>Lets compare DALL-e-3 vs DALL-E-2
<h3> Enter a "scene" </h3>
<input style="width:100%; padding: 5px 20px;" id="scene" placeholder="be a bit descriptive" >
<button onclick="dalle();" style="display: block; padding: 5px 20px; margin-top: 10px" class=ab-normbutton > Send </button>
</div>
<div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
<h3> DALL-E replies </h3>
<div id="img" > </div>
</div>
` );
// --- Send my line of text ----------------------------------------------------------------
function setkey()
{
apikey = $("#apikey").val();
apikey = apikey.trim();
$("#enterkey").html ( "<b> API key has been set. </b>" );
}
async function sendchat() {
const personality_1 = $("#p1")[0].checked
const personality_2 = $("#p2")[0].checked
const question = $("#question").val();
if (!personality_1 && !personality_2) return $("#them").append("<p>Please select one of the personalities.</p>")
if (personality_1)
prompt = $("#p1").val();
else
prompt = $("#p2").val();
// construct request as JSON
let the_input = {
"model": "gpt-3.5-turbo",
"temperature": 0.7,
"messages": [
{
"role": "system",
"content": prompt,
},
{
"role": "user",
"content": question,
}
]
};
let the_input_string = JSON.stringify ( the_input );
try {
$.ajaxSetup({
headers:
{
"Content-Type": "application/json",
"Authorization": "Bearer " + apikey
}
});
$("#them").append("<p>Sending request!<p>")
let res = await $.ajax({
type: "POST",
url: API_BASE_URL + "chat/completions",
data: the_input_string,
dataType: "json",
});
const data = res["choices"][0].message.content;
$("#them").append(`
<p>${data}</p>
`)
} catch (error) {
console.log(error);
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 getImageFileFromURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.onload = function() {
var blob = xhr.response;
var fileName = getFileNameFromURL(url);
var file = new File([blob], fileName, { type: blob.type });
callback(file);
};
xhr.send();
}
function getFileNameFromURL(url) {
// Extract the file name from the URL
var matches = url.match(/\/([^\/?#]+)[^\/]*$/);
return matches && matches.length > 1 ? matches[1] : 'file';
}
async function dalle() {
const scene = $("#scene").val();
let dalle_3 = {
"model": "dall-e-3",
"prompt": scene,
"n": 1,
"size": "1024x1024"
}
let dalle_2 = {
"model": "dall-e-2",
"prompt": "A bright yellow Pokémon that resembles a fluffy dog with sparks of electricity around its fur. It thrives in the summer sun, absorbing its energy to power up its fiery attacks.",
"n": 1,
"size": "1024x1024"
}
const dalle_3_string = JSON.stringify ( dalle_3 );
const dalle_2_string = JSON.stringify ( dalle_2 );
try {
$.ajaxSetup({
headers:
{
"Content-Type": "application/json",
"Authorization": "Bearer " + apikey
}
});
$("#img").append("<p>Sending request!<p>")
let res_1 = await $.ajax({
type: "POST",
url: API_BASE_URL + "images/generations",
data: dalle_3_string,
dataType: "json",
});
let res_2 = await $.ajax({
type: "POST",
url: API_BASE_URL + "images/generations",
data: dalle_2_string,
dataType: "json",
});
$("#img").append(`
<div style="display: grid; grid-template-columns: auto auto; gap: 1rem;">
<div>
<img src=${res_1.data[0].url} width="100%">
<h3>DALL-E-3</p>
</div>
<div>
<img src=${res_2.data[0].url} width="100%">
<h3>DALL-E-2</p>
</div>
</div>
`)
// let imageUrl = res_2.data[0].url;
// getImageFileFromURL(imageUrl, async function(file) {
// var formData = new FormData();
// formData.append('image', file);
// formData.append('model', 'dall-e-2');
// formData.append('n', 1);
// formData.append('size', '1024x1024');
// // Make your AJAX request with the FormData
// $.ajaxSetup({
// headers:
// {
// "Authorization": "Bearer " + apikey
// }
// });
// console.log("<p>Sending request!<p>")
// let res = await $.ajax({
// url: API_BASE_URL + "images/variations",
// type: "POST",
// data: formData,
// processData: false,
// contentType: false,
// });
// console.log(res);
// });
} catch (error) {
console.log(error);
if ( apikey == "" )
$("#img").html ( "<font color=red><b> Enter API key to be able to chat. </b></font>" );
else
$("#img").html ( "<font color=red><b> Unknown error. </b></font>" );
}
}