// Cloned from World "Chat with GPT model" by Starter user 



const dalleURL = "https://api.openai.com/v1/images/generations"; // can POST to this 3rd party URL


// default API key and prompt:
    var apiKey = "";
    var promptText = "a white siamese cat";
    
    

    $('body').css("margin", "20px");
    $('body').css("padding", "20px");
// The User Interface
    document.write(`
    <center>
        <h1>Generate Images with DALL-E</h1>

        <div>
            <h3>Enter API key</h3>
            <div id="enterkey">
                <label for="apikey">API Key:</label>
                <input style='width:25vw;' maxlength='2000' name="apikey" id="apikey" value=''>
                <button onclick='setKey();' class="ab-normbutton">Set API key</button>
            </div>
        </div>

        <div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;">
            <h3>Enter a prompt</h3>
            <label for="promptInput">Prompt:</label>
            <input style="width:50vw;" id="promptInput" value="${promptText}"> 
            <br> <br>
            <label for="dsize">Size:</label>
<select name="dsize" id="dsize">
  <option value="256x256">256×256</option>
  <option value="512×512">512×512</option>
</select> <br> <br>
 <label for="number">Number:</label>
 <div class="slider"><input type="range" id="RangeVal" min="1" max="5" value="1" oninput="rangeValue.innerText = this.value"><p id="rangeValue">1</p></div>
            <button onclick="sendRequest();" class="ab-normbutton">Generate Image</button></div>
        </div>

        <div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;">
            <h3>DALL-E Image Generation</h3>
            <div id="response"></div>
        </div></center>
    `);

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

    document.getElementById('promptInput').onkeydown = function (event) {
        if (event.keyCode == 13) sendRequest();
    };
        ab = $('#RangeVal').val();
        no = parseInt(ab); 
        // http Request 
    function sendRequest() {
        promptText = $("#promptInput").val();
        dsize = $("#dsize").val();
        ab = $('#RangeVal').val();
        no = parseInt(ab);
        console.log(promptText);
        console.log(dsize);
        console.log(no);
        //The parameters
        const requestData = {
            model: "dall-e-2",
            prompt: promptText,
            size: dsize,
            n: no,
        };

        const settings = {
            async: true,
            crossDomain: true,
            url: dalleURL,
            method: 'POST',
            headers: {
                'content-type': 'application/json',
                'Authorization': `Bearer ${apiKey}`
            },
            processData: false,
            data: JSON.stringify(requestData)
        };
// Response handling
       $.ajax(settings).done(function (response) {
        console.log(response);
        let imagesHTML = '';
        for (let i = 0; i < no; i++) {
            imagesHTML += '<p>DALL-E Image: <br><img src="' + response.data[i].url + '" alt="Generated Image"></p><br> <br>';
        }
        //displaying the images
        $('#response').html(imagesHTML);
    });
    }