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

// Hardcode your API key here
var apikey = "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";

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(`
<style>
     body {
        background-image: url('https://media.giphy.com/media/fvY8JtKw8Bx3bXYlIi/giphy.gif');
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        margin: 0;
        padding-top: 250px; /* Adjust the top padding as needed */
    }
    </style>

   
    <a >Hello world program to test API KEY</a>.
    <br> 
  
    

    <a >OpenAI KEY    </a>  API.
    <br> 



    <pre></pre>

    <div style="width:60vw; background-color:white;  margin:20; padding: 20px;">
        <h3> "Enter a question to interact with GPT 3.5" </h3>
        <input style="width:50vw;" id="me" Placeholder="Put your question here?" >
        <button onclick="sendchat();" class="ab-normbutton" > Send </button> 
    </div>

    <div style="width:60vw;  border: 1px solid black; margin:20; padding: 20px;">
        <h3> Answer</h3>
        <div id="them"> </div>
    </div>



    <pre></pre>
`);

function sendchat() {
    theprompt = $("#me").val();

    // construct request as JSON
    var thedata = {
        "model": themodel,
        "temperature": 0.7,
        "messages": [{
            "role": "user",
            "content": theprompt
        }]
    };

    // then as a string representing that JSON:
    var thedatastring = JSON.stringify(thedata);

    // HTTP headers must be set up with the hardcoded 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(); }
    });
}

function successfn(data, rc) {
    var answer = data["choices"][0].message.content;
    
    $("#them").html("<p>API called successfully</p><p>" + answer + "</p>");

}

function errorfn() {
    $("#them").html("<font color=red><b> Unknown error. </b></font>");
}