xyplon commited on
Commit
58bd2eb
1 Parent(s): 5f3ca6c

Create models.js

Browse files
Files changed (1) hide show
  1. models.js +226 -0
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
+ }