const genBtn = document.getElementById('Generate');
var prompt = document.getElementById("prompt");
const progress = document.getElementById('pg');
const colour = document.getElementById('colour');
const style = document.getElementById('style');
const method = document.getElementById('method');

const dezgoURL = 'https://dezgo.p.rapidapi.com/text2image';           // can POST to this 3rd party URL

// default API key and prompt:

var apikey = "d4ec74dfd6msh9d46cdc7cd4aa16p13f2cfjsnc1c2457842cb";
var theprompt = "hello";

async function generateImage() {
    console.log(colour.value, style.value, method.value);
    const encodedParams = new URLSearchParams();
    encodedParams.append('prompt', '${prompt.value}, with ${colour.value} color, and use this art style ${style.value}.');
    encodedParams.append('guidance', '7');
    encodedParams.append('steps', '30');
    encodedParams.append('sampler', method.value);
    encodedParams.append('upscale', '1');
    encodedParams.append('model', 'epic_diffusion_1_1');

    const options = {
      method: 'POST',
      url: dezgoURL,
      headers: {
        'content-type': 'application/x-www-form-urlencoded',
        'X-RapidAPI-Key': apikey,
        'X-RapidAPI-Host': 'dezgo.p.rapidapi.com'
      },
      data: encodedParams
    };
    
    var response = await fetch('https://dezgo.p.rapidapi.com/text2image', options)
    var pngBlob = await response.blob();    

    alert('Promt : '+prompt.value)
    console.log("Got the image as a blob:", pngBlob)
    prompt.value = ''
    document.getElementById("image").src = URL.createObjectURL(pngBlob);
    progress.classList.remove('animation')
    }

    genBtn.addEventListener('click', (e)=>{
    e.preventDefault()
    
    genBtn.disabled = true
    if(prompt.value){
    	progress.classList.add('animation')
    	generateImage()
    }
    genBtn.disabled = false

})