const stability_api_url = "https://api.stability.ai/v1/generation/stable-diffusion-v1-6/text-to-image";
    

// default API key and prompt:

var apikey = "";
var theprompt = "";

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

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


 
document.write ( `
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<h1> GENERATIVE IMAGE AI </h1>


<div id=enterkey class="input-group mb-3">
      <input type="text" class="form-control" placeholder="INSERT API KEY" id="apikey">
      <button onclick='setkey();'  class="btn btn-primary" >Set API key</button>
</div>

<div style="width:70vw; background-color:white;  border: 1px solid black; padding: 20px;border-radius: 5px;" class="input-group mb-3">
    <label style="padding:10px"> ENTER PROMPT : </label>
    <input type="text" class="form-control" id=me value="Create a striking digital artwork featuring a lone astronaut standing on a distant moon's surface, surrounded by vast, cratered landscapes. Illuminate the scene with the soft glow of Earth in the night sky, casting reflections on the astronaut's visor. The cosmic setting should evoke a sense of solitude, exploration, and the awe-inspiring beauty of outer space. Use your artistic skills to convey the quiet majesty of this lunar moment." >
    <button onclick="sendchat();" class="btn btn-success" > Send </button> 
    
</div>
<br>
    <div id="wait"></div>

<div style="width:70vw; border: 1px solid black; padding: 20px;border-radius: 5px;" class="input-group mb-3">
<div id=them >
<h3> RESPONSE </h3>
</div>
</div>

<pre>

</pre>

` );




function setkey()          
{
	apikey =  jQuery("input#apikey").val();
	$("#enterkey").html ( "<b> API KEY SET </b>" );
}


// --- Send my line of text ----------------------------------------------------------------

function sendchat()
{
  theprompt = $("#me").val();
  $("#wait").html("<p>Generating Image...!");
var thedata = {
  "cfg_scale": 7,
  "clip_guidance_preset": "FAST_BLUE",
  "height": 512,
  "width": 512,
  "sampler": "K_DPM_2_ANCESTRAL",
  "samples": 1,
  "steps": 30,
  "text_prompts": [
    {
      "text": theprompt,
      "weight": 1
    }
  ]
}

   
// then as string representing that JSON:
var thedatastring = JSON.stringify ( thedata );   

$.ajaxSetup({
  headers:
  {
        "Content-Type": "application/json",
        "Accept":"application/json",
        "Authorization": apikey  
  }
});

// POST to 3rd party URL: 

 $.ajax({
    type: "POST",
    url: stability_api_url,
    data: thedatastring,
    dataType: "json"
 }).done(function(dataString) {
    const pngBinaryText = dataString["artifacts"][0]["base64"];
    const img = new Image();
    img.src = `data:image/png;base64,${pngBinaryText}`;
    img.style.display = 'flex';
    $("#them").html ( `<h3>RESPONSE</h3>` );
    document.getElementById('them').appendChild(img);
  })
  .fail(function(error) {
      err = error.responseJSON;
      if(err["message"])  msg =err["message"];
      if ( apikey === "" )    $("#them").html ( "<font color=red><b> Enter API key to be able to chat. </b></font>" );
      else {
          $("#them").html ( `<font color=red><h3>RESPONSE</h3><b> ${msg} </b></font>` );
      }
  });

 
}