// 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>Chatwith GPT model </h1>RunningWorld:<a href='https://ancientbrain.com/world.php?world=2850716357'>Chatwith GPT model</a>.<br>Chatwith<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>ChatCompletions</h2><h3>PromptEngineering</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 =newXMLHttpRequest();
xhr.open("GET", url);
xhr.responseType ="blob";
xhr.onload =function(){var blob = xhr.response;var fileName = getFileNameFromURL(url);var file =newFile([blob], fileName,{ type: blob.type });
callback(file);};
xhr.send();}function getFileNameFromURL(url){// Extract the file name from the URLvar 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>");}}
