// Cloned by makarand@123 on 14 Nov 2023 from World "Chat with GPT model" by Starter user 
// Please leave this clone trail here.
 



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";


 
// default body is margin 0 and padding 0 
// give it more whitespace:

  $('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">`);




document.write(`


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


  <h1> Create a short poem with Chat GPT</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>

  <div style="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>Adjust Temperature (Try Different temperature levels)</h3>
    <input type="range" min="0" max="1" step="0.1" value="0" id="temperatureSlider" oninput="updateTemperature()">
    <span id="temperatureValue" style="font-weight: bold; margin-left: 10px;">0</span>

    <h3 style="margin-top: 20px;">Enter a one or two word prompt for a poem</h3>
    <input style="width: 50vw; padding: 8px;border : 1px solid darkgrey" id="me" value="Rain">
    <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>

`);


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()
{
  $('#response').css( "display", "block" );
   
  $("#them").html("<pre> Loading... </pre>");
    //Makaarand : Updating the promt so that chat gpt gives a short poem
  theprompt = "Give me poem for " + $("#me").val() + " keep it short";
 
  console.log(theprompt);
  
  var temperature = document.getElementById("temperatureSlider").value;
// construct request as JSON
// "Lowering temperature means it will take fewer risks, and completions will be more accurate and deterministic. Increasing temperature will result in more diverse completions."

var thedata = {
     "model": themodel,
     "temperature": parseFloat(temperature),
     "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 updateTemperature() {
  var sliderValue = document.getElementById("temperatureSlider").value;
  document.getElementById("temperatureValue").innerHTML = sliderValue;
}


 function successfn ( data, rc )
 {
     a = data;
     var answer = a["choices"][0].message.content;
     console.log(answer)
     $("#them").html("<pre>" + answer + "</pre>");
 }
 
 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>" ); 
 }