// Cloned by Hardik Mangla on 24 Nov 2023 from World "Hardik Mangla's World for Assignment 3" by Hardik Mangla 
// Please leave this clone trail here.
 
// Use JS to write whatever HTML and data you want to the page 

// One way of using JS to write HTML and data is with a multi-line string
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals



// Program to display connecting to OpenAI API with Fetch

document.write ( `

<h1 style = "text-align:center; margin-top: 10px">Chat with GPT !!</h1>                                                 // Header

</br>

<p style = "text-align:center">Enter your Search Query.</p>

</br>

<div style = "text-align:center;" id="input_div">                                                                       // Input Query Div

<input style = "width: 500px; height: 60px; maxlength: 1000" id="searchbox"> </input>

<button style = "width: 200px; height: 30px;" onclick = "CallOpenAIAPIWithFetch();">Search</button>

</div>

</br>

<div style = "text-align:center;" id="output_div">                                                                      // Response Display Div

<p>Your Search Result will Appear in the Box Below.</p>

</br>

<input style = "width: 700px; height: 100px;" id="searchresult" readonly> </input>

</div>


` );

async function CallOpenAIAPIWithFetch(){
    console.log("Calling Open AI API with Fetch");
    
    var searchquery = document.getElementById("searchbox").value;
    
    console.log(searchquery);
    
    // Preparing request body
    
    let datatosend = {
        model: "gpt-3.5-turbo",
        messages: [
            {
                "role": "user",
                "content": searchquery
            }
        ],
        temperature:0.7
    };
    
    //Calling the API. API Key is Hard Coded
    
    let response = await fetch(
        'https://api.openai.com/v1/chat/completions', 
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer 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'
            },
            body: JSON.stringify(datatosend)
        }
    );

    //Displaying Result
    
    var result = await response.json();
    
    console.log(result.choices[0].message.content);
    
    document.getElementById("searchresult").value = result.choices[0].message.content;
    
    console.log("Run Completed");
}


//Testing with AJAX Method. Is not used and does not work well. Have not removed from the code since it was part of the experimentation.

function CallOpenAIAPIWithAjax(){
    console.log("Calling Open AI API.");
    
    var BaseURL = 'https://api.openai.com/v1/chat/completions';
    
    var json = {
        "model": "gpt-3.5-turbo",
        "messages": [
            {
                "role": "user",
                "content": "Who won the cricket world cup 2019?"
            }
        ],
        "temperature":0.7
    };
    
    $.ajax({
        type: "POST",
        url: BaseURL,
        dataType: "json",
        data: json,
        beforeSend: function(xhr){
            xhr.setRequestHeader(
                'Content-Type', 'application/json'
            );
            
            xhr.setRequestHeader(
                'Authorization', 'Bearer ' + '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'  //$OPENAI_API_KEY"
            );
                
        },
        success: function(d,s){concole.log(d)},
        error: function(d,s){console.log(d + " ; " +s)}
    });
}