Playground / models.js
xyplon
Update models.js
d93c5f4 verified
raw
history blame
7.06 kB
// 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()
}