// Cloned by Alfred Iyby on 2 Dec 2023 from World "Image Generation using Generative AI 2" by Alfred Iyby
// Please leave this clone trail here.
// Cloned by Alfred Iyby on 2 Dec 2023 from World "Chat with GPT model" by Starter user
// Please leave this clone trail here.
var engine_id ="stable-diffusion-v1-6";
var stability_api_url ="https://api.stability.ai/v1/generation/" + engine_id + "/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; display:grid; border: 1px solid black; padding: 20px;border-radius: 5px;" class="input-group mb-3">
<label style="padding:5px;"> ENTER PROMPT : </label>
<input type="text" style="width:60vw;" 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." >
<br>
<button class="btn btn-warning" onclick="changePrompt()" style="width:250px";>Generate Random Prompt</button>
        
<br>
<div class="input-group mb-3">
<div class="value left" style="padding:10px;"> Better Quality    </div>
<input type="range" min="0" max="35" value="7" steps="1" id="cfg_value"/>
<div class="value right" style="padding:10px;">  Match Prompt</div>     
<label style="padding:10px;">Select Style : </label>
<select class="form-select" aria-label="Default select example" id="style_preset" style="width:25px">
<option selected value="3d-model">3d-Model</option>
<option value="analog-film">Analog</option>
<option value="anime">Anime</option>
<option value="cinematic">Cinematic</option>
<option value="comic-book">Comic</option>
<option value="digital-art">Digital</option>
<option value="fantasy-art">Fantasy</option>
<option value="line-art">Line Art</option>
<option value="neon-punk">Neon</option>
<option value="origami">Origami</option>
<option value="photographic">Photographic</option>
<option value="pixel-art">Pixel</option>
</select>
</div>
<br>
<button onclick="sendchat();" class="btn btn-success" style="width:5vw"> Send </button>
<br>
<button class="btn btn-danger" onclick="createCard()" style="width:200px;">Create a Christmas Card</button>
<div id="wait"></div>
</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>
` );
const imagePrompts = [
"Enchanted Forest at Dusk",
"Cyberpunk Cityscape",
"Steampunk Adventure",
"Galactic Nebula Exploration",
"Time-Traveling Mechanism",
"Mystical Underwater Kingdom",
"Retro-Futuristic Metropolis",
"Celestial Tea Party",
"Whimsical Bookstore in the Clouds",
"Lunar Eclipse Ritual",
"Neon Jungle Safari",
"Parallel Universe Tea Harvest",
"Enigmatic Desert Oasis",
"Quantum Mechanics Dance Party",
"Dreamlike Ice Cream Galaxy",
"Bioluminescent Rainforest Retreat",
"Robot Orchestra Symphony",
"Cosmic Roller Coaster Ride",
"Surreal Tea Ceremony",
"Clockwork Dragon Parade"
];
function changePrompt() {
const inputElement = document.getElementById("me");
const randomIndex = Math.floor(Math.random() * imagePrompts.length);
inputElement.value = imagePrompts[randomIndex];
}
function setkey()
{
apikey = jQuery("input#apikey").val();
$("#enterkey").html ( "<b> API KEY SET </b>" );
}
// --- Send my line of text ----------------------------------------------------------------
function sendchat()
{
$("#wait").html ( `<p>Generating Image</p>` );
theprompt = $("#me").val();
cfgValue = Number(document.getElementById("cfg_value").value);
style_value = document.getElementById("style_preset").value;
jsonData = {
"cfg_scale": cfgValue,
"clip_guidance_preset": "FAST_BLUE",
"height": 512,
"width": 512,
"sampler": "K_DPM_2_ANCESTRAL",
"samples": 1,
"steps": 40,
"style_preset":style_value,
"text_prompts": [
{
"text": theprompt,
"weight": 1
}
]
}
jsonData = JSON.stringify(jsonData);
$.ajaxSetup({
headers:
{
"Content-Type": "application/json",
"Accept":"application/json",
"Authorization": apikey
}
});
// POST to 3rd party URL:
$.ajax({
type: "POST",
url: stability_api_url,
data: jsonData,
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);
$("#wait").empty();
})
.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>` );
}
$("#wait").empty();
});
}
function createCard(){
$("#wait").html ( `<p>Generating Image</p>` );
jsonData = {
"cfg_scale": 8,
"clip_guidance_preset": "FAST_GREEN",
"height": 512,
"width": 512,
"sampler": "K_DPM_2_ANCESTRAL",
"samples": 1,
"steps": 49,
"style_preset":"photographic",
"text_prompts": [
{
"text": "a christmas card with words happy christmas to all",
"weight": 1
}
]
}
jsonData = JSON.stringify(jsonData);
$.ajaxSetup({
headers:
{
"Content-Type": "application/json",
"Accept":"application/json",
"Authorization": apikey
}
});
$.ajax({
type: "POST",
url: stability_api_url,
data: jsonData,
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);
$("#wait").empty();
})
.fail(function(error) {
err = error.responseJSON;
if(err["message"]) msg =err["message"];
if ( apikey === "" ) $("#them").html ( "<font color=red><b> Enter API KEY to start generation</b></font>" );
else {
$("#them").html ( `<font color=red><h3>RESPONSE</h3><b> ${msg} </b></font>` );
}
$("#wait").empty();
});
}