//Michael Regan 22112111
//CA318 Hello world for Nightmare Simulator
//This may be a clone of the chatGPT world however all of the code is original


//Insert HTML
document.write ( `
    <header>
        DALL-E Image Generation                                            
    </header>
    <section class="image-section"></section>
    <section class="bottom-section">
        <div class="input-container">
            <div>API Key<input class = "apikey"/></div>
            <div>prompt<input class = "prompt" /></div>
            <button id="submit-icon">submit</button>
        </div>
    </section>
   
`);


//Get user inputs
const submitIcon = document.querySelector("#submit-icon")
const  inputElement = document.querySelector(".prompt")
const  apikeyElement = document.querySelector(".apikey")
const imageSection = document.querySelector('.image-section')

const getImages = async () => {
    const options = {
        method: "POST",                                                                           //Post Request       
        headers: {
            "Authorization": `Bearer ${apikeyElement.value}`,                                     //Apikey
            'Content-Type': "application/json"                                                    //Body will be JSON
        },
        body: JSON.stringify({
            "prompt" :  inputElement.value,                                                       //Prompt is the user's input
            "n": 1,                                                                               //Get 1 image
            "size": "256x256"                                                                     //Image size is 256x256
        })
    }
    try {
        const responce = await fetch('https://api.openai.com/v1/images/generations', options)     //Asynchronously fetching from OpenAI
        const data = await responce.json()                                                        //Turning responce into json
        
        //For each image url retuned for DALL-E
        data?.data.forEach(imageObject => {
            const ImageContainer = document.createElement('div')                                  //Create div to put images
            ImageContainer.classList.add('image-container')                                       //Create container for image
            const imageElement = document.createElement('img')                                    //create img tag
            imageElement.setAttribute('src', imageObject.url  )                                   //Put DALL-E generated image in img tag
            ImageContainer.append(imageElement)                                                   //Put img tag in container
            imageSection.append(ImageContainer)                                                   //Put container in section
        })
        
        
        
    } catch (error){                                                                              //Error handling
        console.error(error)                                                                      //Print error
    }
}



submitIcon.addEventListener('click', getImages )                                                  //When button is clicked call getImages()