// Cloned by Sharjil Dhanani on 2 Dec 2023 from World "Chat with GPT model (clone by Sharjil Dhanani)" by Sharjil Dhanani 
// Please leave this clone trail here.
 


// Cloned by Sharjil Dhanani on 27 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> Chat with GPT model </h1>

    Running World:
    <a href='https://ancientbrain.com/world.php?world=2850716357'>Chat with GPT model</a>.
    <br> 
    Chat with
    <a href="https://platform.openai.com/docs/models/overview">GPT 3.5</a>
    using the
    <a href="https://en.wikipedia.org/wiki/OpenAI">OpenAI    </a>  API.
    <br> 
    This is the model
    <a href="https://en.wikipedia.org/wiki/ChatGPT">ChatGPT</a>   uses.

    <pre></pre>

    <h3> Enter API key </h3>

    The crucial thing is you need an "API key" to talk to OpenAI. <br>
    Register for free and get your API key  
    <a href='https://platform.openai.com/account/api-keys'>here</a>.
    <br>
    You enter your API key below and then chat away.
    Then communications to OpenAI come from your IP address using your API key. 
    <br>
    This World   will never  store your API key. 
    You can view the <a href='https://ancientbrain.com/viewjs.php?world=2850716357'> source code</a>  to see that is true!
    <p>

    <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> Select a Historical Place </h3>
        <select id="historical-place" style="width:50vw;">
            <option value="pyramids">Pyramids</option>
            <option value="eiffel-tower">Eiffel Tower</option>
            <option value="great-wall">Great Wall of China</option>
            <!-- Add more historical places as needed -->
        </select>
        <button onclick="sendChatWithHistoricalPlace();" class=ab-normbutton > Send </button> 
    </div>

    <div style="width:60vw; background-color:#ffffcc;  border: 1px solid black; margin:20; padding: 20px;">
        <h3> GPT replies </h3>
        <div id=them> </div>
    </div>

    <button onclick="clearScreen();" class=ab-normbutton >Clear Screen</button>

    <p> <i> Be warned that GPT replies are often completely inaccurate.<br> 
    All LLM systems <a href="https://www.google.com/search?q=llm+hallucination"> "hallucinate"</a>.
    It is how they work. </i> </p>

    <pre></pre>

    <div id="drawing-section" style="width: 60vw; background-color: #ccffff; border: 1px solid black; margin: 20; padding: 20px;">
        <h3> Drawing Section </h3>
        <!-- Add your drawing elements here -->
    </div>
`);

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

function sendChatWithHistoricalPlace() {
    var selectedPlace = $("#historical-place").val();
    theprompt = `Give me the code to draw ${selectedPlace} in Three.js using jQuery`;

    // Call the sendchat function with the new prompt
    sendchat();
}

// Enter will also send chat:
document.getElementById('me').onkeydown = function (event) { if (event.keyCode == 13) sendchat(); };

// --- Send my line of text ----------------------------------------------------------------
function sendchat() {
    // Use the updated prompt
    var thedata = {
        "model": themodel,
        "temperature": 0.7,
        "messages": [{
            "role": "user",
            "content": theprompt
        }]
    };

    var 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); },
        error: function () { errorfn(); }
    });
}

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

    // Extract the code from the response
    var codeMatch = answer.match(/```([\s\S]*)```/);
    var generatedCode = codeMatch && codeMatch[1] ? codeMatch[1] : '';

    // Run the extracted code
    if (generatedCode) {
        runReceivedCode(generatedCode);
    }
}

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

function clearScreen() {
    $("#them").html("");
    $("#drawing-section").html(""); // Clear the drawing section
}

function runReceivedCode(code) {
    try {
        eval(code);
    } catch (error) {
        console.error("Error executing received code:", error);
    }
}