// Cloned by makarand@123 on 22 Nov 2023 from World "Flickr World" by Starter user 
// Please leave this clone trail here.
 



// default body is margin 0 and padding 0 

 $('body').css( "margin", "20px" );
  $('body').css("color","#181818")
  $('body').css( "padding", "20px" );
  $('body').css("font-family","Poppins")
  $("head").append(`<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">`);
  
//OPEN AI API implementation

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 
    

// default API key and prompt:

var apikey = "";
var theprompt = "hello";

 


document.write ( `



` );

// GPT Hellow world 

document.write(`


<div style='margin-top: 50px; padding: 20px; text-align: center;'>


  <h1> \Hello world Program for AI API </h1>

  <div id="enterkey" style="margin-bottom: 20px;">
    <h4>Enter API key</h4>
    <input style="width: 25vw; padding: 8px;border : 1px solid darkgrey" maxlength="2000" name="apikey" id="apikey" value="">
    <button onclick="setkey();"  style="display: inline;padding: 10px 10px;border-width: 0;outline: none;border-radius: 2px;background-color: #1D1D1D;color: #ecf0f1;">Set API key</button>
  </div>


    <h3 style="margin-top: 20px;">Talk with Chat GPT here</h3>
    <input style="width: 50vw; padding: 8px;border : 1px solid darkgrey" id="me" value="Who is the president of America?">
    <button onclick="sendchat();" style="display: inline;padding: 10px 10px;border-width: 0;outline: none;border-radius: 2px;background-color: #1D1D1D;color: #ecf0f1;">Send</button>
  </div>

  <div id="response" style="display: none;width: 60vw; background-color: #f9f9f9; border: 1px solid  #f0f0f0; border-radius : 15px; margin: 20px auto; padding: 20px; text-align: center;box-shadow: 1px 3px 10px #b3b3b3">
    <h3>GPT Response</h3>
    <div id="them">
    
    </div>
    
  </div>
  

</div>

`);


//Makarand : Created Launch Button using AB.Launchworld to link other 2 worlds

document.write ( `

<div style='margin-top:50px; padding:20px; text-align : center '>

<h2> Use cases of AI API </h2>

You can launch the use case of my AI API by clicking below world.

	` );

document.write(`<pre>1. Create a 2D animation with GPT</pre>`)
document.write ( "<center>" + 	AB.launchWorld ( "5485947560", "CA 686 Assignment 2 P5 Animation" )+ "</center>" );
document.write(`<pre>2.Create a Poem with GPT</pre>`)
document.write ( "<center>" + 	AB.launchWorld ( "8936587599", "CA 686 Assignment 2 Poet GPT" )+ "</center>" );
document.write ( "</div>" );



function setkey()          
{
	apikey =  jQuery("input#apikey").val();
	apikey = apikey.trim();
	$("#enterkey").html ( "<b> API key has been set. </b>" );
}





document.getElementById('me').onkeydown   = function(event) 	{ if (event.keyCode == 13)  sendchat(); };



function sendchat()
{
  $('#response').css( "display", "block" );
  $("#them").html("<pre> Loading... </pre>");
  theprompt = $("#me").val();
  
var thedata = {
     "model": themodel,
     "temperature": 0.7,
     "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;
     console.log(answer)
     $('#link').css( "display", "block" );
     $("#them").html ( 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>" ); 
 }