<!-- Cloned by Daniel Marcu on 1 Dec 2023 from World "Chat with GPT model" by Starter user -->
<!-- Please leave this clone trail here. -->

<!-- talk to Stable Diffusion API -->
const stableDiffusionURL = "https://stablediffusionapi.com/api/v5/text2video";
const apiKeyPrompt = "Enter API key for Stable Diffusion API:";
var stableDiffusionApiKey = "";

// default body is margin 0 and padding 0
// give it more whitespace:

$('body').css("margin", "20px");
$('body').css("padding", "20px");

document.write(`
<h1> Calling the Stable Diffusion API </h1>

<pre>

</pre>

<h3> Enter API key </h3>

The crucial thing is you need an "API key" to talk to the Stable Diffusion AI API. <br>
You enter your API key below.
<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>
    ${apiKeyPrompt}
    <input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''>
    <button onclick='setStableDiffusionKey();' 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> Call the Stable Diffusion API </h3>
    <button onclick="sendchat();" class=ab-normbutton > Call the API </button>
</div>

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

</pre>
`);

function setStableDiffusionKey() {
    stableDiffusionApiKey = jQuery("input#apikey").val();
    stableDiffusionApiKey = stableDiffusionApiKey.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() {
    if (!stableDiffusionApiKey) {
        $("#them").html("<font color=red><b> Enter API key to be able to call the API. </b></font>");
        return;
    }

    // construct request as JSON
    var thedata = {
        "api_key": stableDiffusionApiKey,        
        "text": "Hello World"
    };

    // then as a 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 " + stableDiffusionApiKey
        }
    });

    // POST to 3rd party URL:
    $.ajax({
        type: "POST",
        url: stableDiffusionURL,
        data: thedatastring,
        dataType: "json",
        success: function (d, rc) { successfn(d, rc); },
        error: function () { errorfn(); }
    });
}

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

function successfn(data, rc) {
    a = data;
    console.log(a);   // MH edit
    var videoUrl = a["video_url"];

    if (videoUrl) {
        $("#them").html(`<video width="320" height="240" controls>
                            <source src="${videoUrl}" type="video/mp4">
                         Your browser does not support the video tag.
                       </video>`);
    } else {
        $("#them").html("<b> API call failed. See console for return data. </b>");      // MH edit 
        // $("#them").html("<b>Hello World</b>");
    }
}

function errorfn() {
    if (stableDiffusionApiKey == "") $("#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>");
}