Spaces:
Running
Running
// DO NOT TRY TO COPY MY UI OR STYLE | |
const div = document.getElementById('imshow'); | |
let width = 1024 | |
let height = 1024 | |
let btn = document.getElementById('btn') | |
let prompt = document.getElementById('prompt') | |
let negativePrompt = document.getElementById('negative-prompt') | |
let model = 'RealVisXL4' | |
let style = 'Cinematic' | |
function generateRandomString(length) { | |
var result = ''; | |
var characters = 'abcdefghijklmnopqrstuvwxyz0123456789'; | |
var charactersLength = characters.length; | |
for (var i = 0; i < length; i++) { | |
result += characters.charAt(Math.floor(Math.random() * charactersLength)); | |
} | |
return result; | |
} | |
const modelElement = document.getElementById('model'); | |
modelElement.addEventListener('change', function() { | |
model = this.value | |
if (model == "mobius") { | |
document.getElementById('guidenceRange').value = 2.7 | |
document.getElementById('guidenceValue').innerText = 2.7; | |
document.getElementById('stepValue').innerText = 30 | |
style = 'Creative' | |
} | |
if(model=="rvx4"){ | |
document.getElementById('guidenceRange').value = 3 | |
document.getElementById('guidenceValue').innerText = 3; | |
document.getElementById('stepValue').innerText = 30 | |
} | |
if(model=="sd3"){ | |
document.getElementById('guidenceRange').value = 2.8 | |
document.getElementById('guidenceValue').innerText = 2.8; | |
document.getElementById('stepValue').innerText = 30 | |
} | |
if(model=="animagine"){ | |
document.getElementById('guidenceRange').value = 7 | |
document.getElementById('guidenceValue').innerText = 7; | |
} | |
if(model=="sdflash"){ | |
document.getElementById('guidenceRange').value = 2.7 | |
document.getElementById('guidenceValue').innerText = 2.7; | |
document.getElementById('stepValue').innerText = 8 | |
} | |
if(model=="kivotos"){ | |
document.getElementById('guidenceRange').value = 7 | |
document.getElementById('guidenceValue').innerText = 7; | |
document.getElementById('stepValue').innerText = 28 | |
} | |
if(model=="OpenDalle"){ | |
document.getElementById('guidenceRange').value = 3.8 | |
document.getElementById('guidenceValue').innerText = 3.8; | |
document.getElementById('stepValue').innerText = 30 | |
} | |
}); | |
const ratioElement =document.getElementById('ratio') | |
ratioElement.addEventListener('change',function(){ | |
ratio = this.value | |
if(ratio == '1:1'){ | |
width = 1024; | |
height = 1024; | |
} | |
else if(ratio == '16:9'){ | |
width = 1024; | |
height = 576; | |
} | |
else if(ratio == "9:16"){ | |
width = 576 | |
height = 1024 | |
} | |
else if(ratio=="1:2"){ | |
width = 544; | |
height = 1088; | |
} | |
else if(ratio=='4:3'){ | |
width = 896; | |
height = 672; | |
} | |
}) | |
const styleElement = document.getElementById('style') | |
styleElement.addEventListener('change',function(){ | |
style = this.value | |
}) | |
document.getElementById('stepsRange').addEventListener('input', function() { | |
if(model=='sdflash' && Number(document.getElementById('stepValue').innerText)>16){ | |
document.getElementById('stepValue').innerText = 16 | |
} | |
else { | |
document.getElementById('stepValue').innerText = this.value; | |
} | |
} | |
); | |
document.getElementById('guidenceRange').addEventListener('input', function() { | |
document.getElementById('guidenceValue').innerText = this.value; | |
}); | |
function log(msg){ | |
console.log(msg) | |
} | |
let task = 0 | |
btn.onclick = async () => { | |
async function generateImage() { | |
var params = { | |
'prompt': prompt.value, | |
'negative': negativePrompt.value, | |
"steps": Number(document.getElementById('stepValue').innerText), | |
'scale': Number(document.getElementById('guidenceValue').innerText), | |
"width": Number(width), | |
"height": Number(height), | |
"model": model, | |
'style': style, | |
"hash": generateRandomString(11) | |
}; | |
task+=1 | |
let loader = document.createElement('div') | |
loader.id = 'loader' | |
if (div.firstChild!== loader) { | |
div.insertBefore(loader, div.firstChild); | |
} | |
let text = document.createElement('p') | |
text.style.color = 'white' | |
let loaderImg = document.createElement('img') | |
loaderImg.src = 'https://fumesai.web.app/load.gif' | |
loader.append(loaderImg) | |
text.innerText = '' | |
try { | |
const response = await fetch('https://xyplon-okln.onrender.com/hf/img/gen', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
'Connection': 'keep-alive', | |
}, | |
body: JSON.stringify(params) | |
}); | |
if (!response.ok) { | |
if(response.status==429){ | |
alert('too many requests! 4 concurrent jobs per minute is allowed') | |
loader.parentNode.removeChild(loader); | |
return | |
} | |
if(response.status==500){ | |
alert('Internal Server Error please try again!') | |
loader.parentNode.removeChild(loader); | |
return | |
} | |
if(response.status==502){ | |
alert('Restarting Server! please try again!') | |
loader.parentNode.removeChild(loader); | |
retur | |
} | |
} | |
const reader = response.body.getReader(); | |
const decoder = new TextDecoder(); | |
while (true) { | |
const { done, value } = await reader.read(); | |
if (done) break; | |
const chunk = decoder.decode(value, { stream: true }); | |
const lines = chunk.split('\n'); | |
for (const line of lines) { | |
if (line.startsWith('data: ')) { | |
const jsonChunk = JSON.parse(line.substring(6)); | |
if (jsonChunk.progress === 'done') { | |
loader.parentNode.removeChild(loader); | |
const img = document.createElement('img'); | |
if(jsonChunk.width==1024 && jsonChunk.height==576){ | |
img.id = 'lds' | |
} | |
img.src = jsonChunk.img; | |
if (div.firstChild!== img) { | |
div.insertBefore(img, div.firstChild); | |
task-=1 | |
} | |
} else { | |
text.innerText = `${jsonChunk.progress}%`; | |
loader.appendChild(text); | |
} | |
} | |
} | |
} | |
} catch (error) { | |
console.error(error); | |
} | |
} | |
generateImage() | |
generateImage() | |
} |