xyplon
commited on
Commit
•
58bd2eb
1
Parent(s):
5f3ca6c
Create models.js
Browse files
models.js
ADDED
@@ -0,0 +1,226 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// DO NOT TRY TO COPY MY UI OR STYLE
|
2 |
+
|
3 |
+
|
4 |
+
|
5 |
+
|
6 |
+
|
7 |
+
const div = document.getElementById('imshow');
|
8 |
+
let width = 1024
|
9 |
+
let height = 1024
|
10 |
+
let btn = document.getElementById('btn')
|
11 |
+
let prompt = document.getElementById('prompt')
|
12 |
+
let negativePrompt = document.getElementById('negative-prompt')
|
13 |
+
let model = 'RealVisXL4'
|
14 |
+
let style = 'Cinematic'
|
15 |
+
function generateRandomString(length) {
|
16 |
+
var result = '';
|
17 |
+
var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
18 |
+
var charactersLength = characters.length;
|
19 |
+
for (var i = 0; i < length; i++) {
|
20 |
+
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
21 |
+
}
|
22 |
+
return result;
|
23 |
+
}
|
24 |
+
|
25 |
+
|
26 |
+
const modelElement = document.getElementById('model');
|
27 |
+
modelElement.addEventListener('change', function() {
|
28 |
+
model = this.value
|
29 |
+
if (model == "mobius") {
|
30 |
+
document.getElementById('guidenceRange').value = 2.7
|
31 |
+
document.getElementById('guidenceValue').innerText = 2.7;
|
32 |
+
document.getElementById('stepValue').innerText = 30
|
33 |
+
style = 'Creative'
|
34 |
+
}
|
35 |
+
if(model=="rvx4"){
|
36 |
+
document.getElementById('guidenceRange').value = 3
|
37 |
+
document.getElementById('guidenceValue').innerText = 3;
|
38 |
+
document.getElementById('stepValue').innerText = 30
|
39 |
+
}
|
40 |
+
if(model=="sd3"){
|
41 |
+
document.getElementById('guidenceRange').value = 2.8
|
42 |
+
document.getElementById('guidenceValue').innerText = 2.8;
|
43 |
+
document.getElementById('stepValue').innerText = 30
|
44 |
+
}
|
45 |
+
if(model=="animagine"){
|
46 |
+
document.getElementById('guidenceRange').value = 7
|
47 |
+
document.getElementById('guidenceValue').innerText = 7;
|
48 |
+
}
|
49 |
+
if(model=="sdflash"){
|
50 |
+
document.getElementById('guidenceRange').value = 2.7
|
51 |
+
document.getElementById('guidenceValue').innerText = 2.7;
|
52 |
+
document.getElementById('stepValue').innerText = 8
|
53 |
+
|
54 |
+
}
|
55 |
+
if(model=="kivotos"){
|
56 |
+
document.getElementById('guidenceRange').value = 7
|
57 |
+
document.getElementById('guidenceValue').innerText = 7;
|
58 |
+
document.getElementById('stepValue').innerText = 28
|
59 |
+
|
60 |
+
}
|
61 |
+
if(model=="OpenDalle"){
|
62 |
+
document.getElementById('guidenceRange').value = 3.8
|
63 |
+
document.getElementById('guidenceValue').innerText = 3.8;
|
64 |
+
document.getElementById('stepValue').innerText = 30
|
65 |
+
|
66 |
+
}
|
67 |
+
});
|
68 |
+
|
69 |
+
const ratioElement =document.getElementById('ratio')
|
70 |
+
ratioElement.addEventListener('change',function(){
|
71 |
+
ratio = this.value
|
72 |
+
if(ratio == '1:1'){
|
73 |
+
width = 1024;
|
74 |
+
height = 1024;
|
75 |
+
}
|
76 |
+
else if(ratio == '16:9'){
|
77 |
+
width = 1024;
|
78 |
+
height = 576;
|
79 |
+
}
|
80 |
+
else if(ratio == "9:16"){
|
81 |
+
width = 576
|
82 |
+
height = 1024
|
83 |
+
}
|
84 |
+
else if(ratio=="1:2"){
|
85 |
+
width = 544;
|
86 |
+
height = 1088;
|
87 |
+
}
|
88 |
+
else if(ratio=='4:3'){
|
89 |
+
width = 896;
|
90 |
+
height = 672;
|
91 |
+
}
|
92 |
+
})
|
93 |
+
|
94 |
+
const styleElement = document.getElementById('style')
|
95 |
+
styleElement.addEventListener('change',function(){
|
96 |
+
style = this.value
|
97 |
+
})
|
98 |
+
|
99 |
+
document.getElementById('stepsRange').addEventListener('input', function() {
|
100 |
+
|
101 |
+
if(model=='sdflash' && Number(document.getElementById('stepValue').innerText)>16){
|
102 |
+
document.getElementById('stepValue').innerText = 16
|
103 |
+
}
|
104 |
+
else {
|
105 |
+
document.getElementById('stepValue').innerText = this.value;
|
106 |
+
}
|
107 |
+
|
108 |
+
}
|
109 |
+
);
|
110 |
+
|
111 |
+
document.getElementById('guidenceRange').addEventListener('input', function() {
|
112 |
+
document.getElementById('guidenceValue').innerText = this.value;
|
113 |
+
});
|
114 |
+
|
115 |
+
|
116 |
+
|
117 |
+
|
118 |
+
|
119 |
+
function log(msg){
|
120 |
+
console.log(msg)
|
121 |
+
}
|
122 |
+
|
123 |
+
let task = 0
|
124 |
+
btn.onclick = async () => {
|
125 |
+
|
126 |
+
|
127 |
+
|
128 |
+
|
129 |
+
|
130 |
+
async function generateImage() {
|
131 |
+
var params = {
|
132 |
+
'prompt': prompt.value,
|
133 |
+
'negative': negativePrompt.value,
|
134 |
+
"steps": Number(document.getElementById('stepValue').innerText),
|
135 |
+
'scale': Number(document.getElementById('guidenceValue').innerText),
|
136 |
+
"width": Number(width),
|
137 |
+
"height": Number(height),
|
138 |
+
"model": model,
|
139 |
+
'style': style,
|
140 |
+
"hash": generateRandomString(11)
|
141 |
+
};
|
142 |
+
task+=1
|
143 |
+
let loader = document.createElement('div')
|
144 |
+
loader.id = 'loader'
|
145 |
+
if (div.firstChild!== loader) {
|
146 |
+
div.insertBefore(loader, div.firstChild);
|
147 |
+
}
|
148 |
+
|
149 |
+
let text = document.createElement('p')
|
150 |
+
text.style.color = 'white'
|
151 |
+
let loaderImg = document.createElement('img')
|
152 |
+
loaderImg.src = 'https://fumesai.web.app/load.gif'
|
153 |
+
loader.append(loaderImg)
|
154 |
+
text.innerText = ''
|
155 |
+
|
156 |
+
try {
|
157 |
+
const response = await fetch('https://xyplon-okln.onrender.com/hf/img/gen', {
|
158 |
+
method: 'POST',
|
159 |
+
headers: {
|
160 |
+
'Content-Type': 'application/json',
|
161 |
+
'Connection': 'keep-alive',
|
162 |
+
},
|
163 |
+
body: JSON.stringify(params)
|
164 |
+
});
|
165 |
+
|
166 |
+
if (!response.ok) {
|
167 |
+
|
168 |
+
if(response.status==429){
|
169 |
+
alert('too many requests! 4 concurrent jobs per minute is allowed')
|
170 |
+
loader.parentNode.removeChild(loader);
|
171 |
+
return
|
172 |
+
}
|
173 |
+
if(response.status==500){
|
174 |
+
alert('Internal Server Error please try again!')
|
175 |
+
loader.parentNode.removeChild(loader);
|
176 |
+
return
|
177 |
+
}
|
178 |
+
if(response.status==502){
|
179 |
+
alert('Restarting Server! please try again!')
|
180 |
+
loader.parentNode.removeChild(loader);
|
181 |
+
retur
|
182 |
+
}
|
183 |
+
}
|
184 |
+
|
185 |
+
const reader = response.body.getReader();
|
186 |
+
const decoder = new TextDecoder();
|
187 |
+
while (true) {
|
188 |
+
const { done, value } = await reader.read();
|
189 |
+
if (done) break;
|
190 |
+
|
191 |
+
const chunk = decoder.decode(value, { stream: true });
|
192 |
+
const lines = chunk.split('\n');
|
193 |
+
|
194 |
+
for (const line of lines) {
|
195 |
+
if (line.startsWith('data: ')) {
|
196 |
+
const jsonChunk = JSON.parse(line.substring(6));
|
197 |
+
|
198 |
+
if (jsonChunk.progress === 'done') {
|
199 |
+
|
200 |
+
loader.parentNode.removeChild(loader);
|
201 |
+
const img = document.createElement('img');
|
202 |
+
if(jsonChunk.width==1024 && jsonChunk.height==576){
|
203 |
+
img.id = 'lds'
|
204 |
+
}
|
205 |
+
img.src = jsonChunk.img;
|
206 |
+
if (div.firstChild!== img) {
|
207 |
+
div.insertBefore(img, div.firstChild);
|
208 |
+
task-=1
|
209 |
+
}
|
210 |
+
|
211 |
+
} else {
|
212 |
+
text.innerText = `${jsonChunk.progress}%`;
|
213 |
+
loader.appendChild(text);
|
214 |
+
}
|
215 |
+
}
|
216 |
+
}
|
217 |
+
}
|
218 |
+
|
219 |
+
} catch (error) {
|
220 |
+
console.error(error);
|
221 |
+
}
|
222 |
+
}
|
223 |
+
generateImage()
|
224 |
+
generateImage()
|
225 |
+
|
226 |
+
}
|