// Cloned by Josh Casey on 13 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


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( "padding", "20px" );


 
document.write ( `

<h1> Learn Computer Science </h1>


<h3> Enter API key </h3>


 <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> What Programming level are You at? </h3>
    <div style="width:30vw; background-color:white;  border: 1px solid black; margin:10; padding: 10px;">
    <h5>Tempature for AI model</h5>
    <INPUT style="width:10vw;" id=tmp value=0.8 >
    </div>
<select id=me style="width: 50vw;">
  <option value="Beginner">Beginner</option>
  <option value="Intermediate">Intermediate</option>
  <option value="Advanced">Advanced</option>
</select>
    <h5>Topic</h5>
    <select id=top style="width: 20vw;">
    <option value="Networks">Networks</option>
    <option value="AI">AI</option>
    <option value="Algorithms">Algorithms</option>
    <option value="Data Structures">Data Structures</option>
    <option value="Programming">Programming</option>
    <option value="Complexity">Complexity</option>
</select>
<button onclick="sendchat();"     class=ab-normbutton > Send </button> 
</div>

<div style="width:60vw; background-color:white;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Answer the Following </h3>
<div id=them > </div>
</div>
 
<div style="width:60vw; background-color:white;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Answer? </h3>
<select id=you style="width: 50vw;">
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>
<button onclick="recievechat();"     class=ab-normbutton > Submit </button> 
</div>

<div style="width:60vw; background-color:white;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Result </h3>
<div id=they > </div>
</div>

<pre>

</pre>

` );




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

let thedatastring;

function sendchat()
{
  theprompt = $("#me").val();
  temp = parseFloat($(tmp).val());
  topic = $("#top").val();
  
// 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."

// MH edit
console.log ( `Compose a computer science question suitable for an ${theprompt} regarding ${topic}, where the solution can be either a 'yes' or 'no'` );


var thedata = {
     "model": themodel,
     "temperature": temp,
     "messages": [{
         "role": "user", 
         "content": `Compose a computer science question suitable for an ${theprompt} regarding ${topic}, where the solution can be either a 'yes' or 'no'`
        }] 
   };
   
   thedatastring = JSON.stringify ( thedata );
   
   $.ajaxSetup({
   headers:
   {
        "Content-Type": "application/json",
        "Authorization": "Bearer " + apikey  
   }
});
   
  $.ajax({
    type: "POST",
    url: openaiURL,
    data: thedatastring,
    dataType: "json",
    success: function ( d, rc ) { successfn ( d, rc, "them" ); },
      error: function()         { errorfn (); }
 });
}


function recievechat()
{
  theprompt = $("#you").val();
  
// 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."

// MH edit
console.log ( `Is ${theprompt} the accurate solution for ${answer}, please provide reasoning or explanation` );

var theRdata = {
     "model": themodel,
     "temperature": 0.8,
     "messages": [{
         "role": "user", 
         "content": `Is ${theprompt} the accurate solution for ${answer}, please provide reasoning or explanation`
        }] 
   };
// then as string representing that JSON:
   
var answerstring = JSON.stringify ( theRdata );
// 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: answerstring,
    dataType: "json",
    success: function ( d, rc ) { successfn ( d, rc, "they" ); },
      error: function()         { errorfn (); }
 });
 
}


 
 // global variable to examine return data in console 
 var a;
 
 
let answer;
function successfn(data, rc, targetDiv) {
  a = data;
  answer = a["choices"][0].message.content;
  $(`#${targetDiv}`).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>" ); 
}