// Cloned by Rajesab Nadaf on 22 Nov 2023 from World "Chat with GPT model" by Starter user
// Please leave this clone trail here.

// Talk to OpenAI GPT model (ChatGPT) and DALL-E image generation
// 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 dalleURL = "https://api.openai.com/v1/images/generations"; // DALL-E API URL

const gptModel = "gpt-3.5-turbo"; // the OpenAI model for ChatGPT
const dalleModel = "image-alpha-001"; // DALL-E model

// 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 and DALL-E </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> Enter a "prompt" </h3>
<INPUT style="width:50vw;" id=me value="when did henry vii die?" >
<button onclick="sendchat();"     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>

<div style="width:60vw; background-color:#e0e0e0;  border: 1px solid black; margin:20; padding: 20px;">
<h3> DALL-E Image Generation </h3>
<button onclick="generateDalleImage();" class=ab-normbutton >Generate DALL-E Image</button>
<div id=dalleImage > </div>
</div>

<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>
`);

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() {
    theprompt = $("#me").val();

    // Construct request as JSON
    var thedata = {
        "model": gptModel,
        "temperature": 0.7,
        "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(); }
    });
}

// DALL-E image generation
function generateDalleImage() {
    // Construct request as JSON
    var dalleData = {
        "model": dalleModel,
        "prompt": "A surreal image with",
        "num_images": 1
    };

    // Then as string representing that JSON:
    var dalleDataString = JSON.stringify(dalleData);

    // POST to DALL-E API
    $.ajax({
        type: "POST",
        url: dalleURL,
        data: dalleDataString,
        dataType: "json",
        success: function (d, rc) { dalleSuccessFn(d, rc); },
        error: function () { dalleErrorFn(); }
    });
}

// DALL-E success function
function dalleSuccessFn(data, rc) {
    var image = data["images"][0];
    $("#dalleImage").html(`<img src="${image}" alt="DALL-E Generated Image" style="max-width: 100%;">`);
}

// DALL-E error function
function dalleErrorFn() {
    $("#dalleImage").html("<font color=red><b> Error generating DALL-E image. </b></font>");
}

// Global variable to examine return data in console
var a;

function successfn(data, rc) {
    a = data;
    var answer = a["choices"][0].message.content;
    $("#them").html(answer);
}


// DALL-E error function
function errorfn(xhr, status, error) {
    console.error(`DALL-E Error: ${status} - ${error}`);
    $("#dalleImage").html("<font color=red><b> Error generating DALL-E image. </b></font>");
}