Update static/index.html
Browse files- static/index.html +70 -55
static/index.html
CHANGED
@@ -113,22 +113,7 @@
|
|
113 |
}
|
114 |
|
115 |
|
116 |
-
|
117 |
-
display: flex;
|
118 |
-
justify-content: center;
|
119 |
-
align-items: center;
|
120 |
-
flex-wrap: wrap;
|
121 |
-
gap: 10px;
|
122 |
-
}
|
123 |
-
|
124 |
-
.image-box {
|
125 |
-
width: 100px; /* Adjust the width as needed */
|
126 |
-
height: 200px; /* Adjust the height as needed */
|
127 |
-
border: 2px solid #ffffff; /* Set the border color to white */
|
128 |
-
border-radius: 10px;
|
129 |
-
overflow: hidden; /* Ensure the image does not overflow the box */
|
130 |
-
position: relative; /* Positioning context for absolute positioning of image */
|
131 |
-
}
|
132 |
|
133 |
.spinner {
|
134 |
border: 3px solid rgba(255, 255, 255, 0.3);
|
@@ -148,14 +133,7 @@
|
|
148 |
100% { transform: rotate(360deg); }
|
149 |
}
|
150 |
|
151 |
-
|
152 |
-
position: absolute;
|
153 |
-
top: 0;
|
154 |
-
left: 0;
|
155 |
-
width: 100%;
|
156 |
-
height: 100%;
|
157 |
-
object-fit: cover; /* Maintain aspect ratio and cover the entire box */
|
158 |
-
}
|
159 |
|
160 |
|
161 |
|
@@ -170,24 +148,9 @@
|
|
170 |
color: #fff;
|
171 |
outline: none;
|
172 |
}
|
173 |
-
|
174 |
-
border: 2px solid blue;
|
175 |
-
width: 265px;
|
176 |
-
height: 300px;
|
177 |
-
display: flex;
|
178 |
-
flex-direction: column;
|
179 |
-
overflow-y: scroll;
|
180 |
-
margin: auto;
|
181 |
-
margin-top: 30px;
|
182 |
-
padding-bottom: 7px;
|
183 |
-
gap: 14px;
|
184 |
-
background: linear-gradient(black, black) padding-box,
|
185 |
-
linear-gradient(to right, red, blue) border-box;
|
186 |
-
border-radius: 20px;
|
187 |
-
border: 2.5px solid transparent;
|
188 |
-
}
|
189 |
|
190 |
-
#
|
191 |
|
192 |
font-size: 20px;
|
193 |
color: white;
|
@@ -355,6 +318,31 @@
|
|
355 |
|
356 |
#generate:hover {
|
357 |
background-color: #45a049; /* Hover effect */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
358 |
}
|
359 |
</style>
|
360 |
</head>
|
@@ -415,12 +403,21 @@
|
|
415 |
<br>
|
416 |
<div>
|
417 |
<button id="generate" onclick="sendInputs()">generate image </button>
|
418 |
-
|
419 |
</div>
|
420 |
-
|
421 |
-
|
422 |
-
|
423 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
424 |
</div>
|
425 |
</div>
|
426 |
</div>
|
@@ -452,17 +449,21 @@
|
|
452 |
function sendInputs() {
|
453 |
const inputs = document.getElementById("inputs").value;
|
454 |
if (!inputs) {
|
455 |
-
const imageBox = document.getElementById("
|
456 |
-
imageBox.innerHTML = "<p>Please enter prompt before sending.</p>";
|
457 |
return;
|
458 |
}
|
459 |
|
460 |
-
|
|
|
461 |
const noiseLevel = document.getElementById("noise_level").value;
|
462 |
const isNegative = document.getElementById("is_negative").value;
|
463 |
const steps = document.getElementById("steps").value;
|
464 |
const cfgScale = document.getElementById("cfg_scale").value;
|
465 |
const seed = document.getElementById("seed").value;
|
|
|
|
|
|
|
466 |
fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
|
467 |
.then(response => {
|
468 |
if (!response.ok) {
|
@@ -471,8 +472,10 @@ function sendInputs() {
|
|
471 |
return response.json();
|
472 |
})
|
473 |
.then(data => {
|
474 |
-
const imageBox = document.getElementById("image-box");
|
475 |
const img = new Image();
|
|
|
|
|
|
|
476 |
img.src = 'data:image/jpeg;base64,' + data.image_base64;
|
477 |
const maxWidth = 200;
|
478 |
const maxHeight = 200;
|
@@ -481,17 +484,29 @@ function sendInputs() {
|
|
481 |
img.width *= ratio;
|
482 |
img.height *= ratio;
|
483 |
}
|
484 |
-
|
485 |
-
|
486 |
})
|
487 |
.catch(error => {
|
488 |
console.error('Error:', error);
|
489 |
-
|
490 |
-
|
491 |
-
hideSpinner('sendSpinner');
|
492 |
});
|
493 |
}
|
494 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
495 |
function toggleAdvancedOptions() {
|
496 |
const advancedOptions = document.getElementById("advanced-options");
|
497 |
if (advancedOptions.style.display === "none") {
|
|
|
113 |
}
|
114 |
|
115 |
|
116 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
117 |
|
118 |
.spinner {
|
119 |
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
|
133 |
100% { transform: rotate(360deg); }
|
134 |
}
|
135 |
|
136 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
137 |
|
138 |
|
139 |
|
|
|
148 |
color: #fff;
|
149 |
outline: none;
|
150 |
}
|
151 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
152 |
|
153 |
+
#resultContainer p {
|
154 |
|
155 |
font-size: 20px;
|
156 |
color: white;
|
|
|
318 |
|
319 |
#generate:hover {
|
320 |
background-color: #45a049; /* Hover effect */
|
321 |
+
}
|
322 |
+
#resultImage {
|
323 |
+
border: 2px solid blue;
|
324 |
+
width: 265px;
|
325 |
+
height: 300px;
|
326 |
+
display: flex;
|
327 |
+
flex-direction: column;
|
328 |
+
overflow-y: scroll;
|
329 |
+
margin: auto;
|
330 |
+
margin-top: 30px;
|
331 |
+
padding-bottom: 7px;
|
332 |
+
gap: 14px;
|
333 |
+
background: linear-gradient(black , black) padding-box,
|
334 |
+
linear-gradient(to right, red, blue) border-box;
|
335 |
+
border-radius: 20px;
|
336 |
+
border: 2.5px solid transparent;
|
337 |
+
}
|
338 |
+
|
339 |
+
|
340 |
+
|
341 |
+
#resultContainer img {
|
342 |
+
max-width: 100%;
|
343 |
+
height: auto;
|
344 |
+
display: block;
|
345 |
+
margin: auto;
|
346 |
}
|
347 |
</style>
|
348 |
</head>
|
|
|
403 |
<br>
|
404 |
<div>
|
405 |
<button id="generate" onclick="sendInputs()">generate image </button>
|
406 |
+
|
407 |
</div>
|
408 |
+
<div id="resultImage">
|
409 |
+
|
410 |
+
<div id="loadingSpinner" style="display: none;"></div>
|
411 |
+
<div id="resultContainer">
|
412 |
+
<p>Your Generated Image Will Appear Here</p>
|
413 |
+
</div>
|
414 |
+
|
415 |
+
|
416 |
+
|
417 |
+
|
418 |
+
|
419 |
+
|
420 |
+
|
421 |
</div>
|
422 |
</div>
|
423 |
</div>
|
|
|
449 |
function sendInputs() {
|
450 |
const inputs = document.getElementById("inputs").value;
|
451 |
if (!inputs) {
|
452 |
+
const imageBox = document.getElementById("resultContainer");
|
453 |
+
imageBox.innerHTML = "<p>Please enter a prompt before sending.</p>";
|
454 |
return;
|
455 |
}
|
456 |
|
457 |
+
const loadingSpinner = document.getElementById('loadingSpinner');
|
458 |
+
loadingSpinner.style.display = 'block';
|
459 |
const noiseLevel = document.getElementById("noise_level").value;
|
460 |
const isNegative = document.getElementById("is_negative").value;
|
461 |
const steps = document.getElementById("steps").value;
|
462 |
const cfgScale = document.getElementById("cfg_scale").value;
|
463 |
const seed = document.getElementById("seed").value;
|
464 |
+
|
465 |
+
const resultContainer = document.getElementById("resultContainer");
|
466 |
+
|
467 |
fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
|
468 |
.then(response => {
|
469 |
if (!response.ok) {
|
|
|
472 |
return response.json();
|
473 |
})
|
474 |
.then(data => {
|
|
|
475 |
const img = new Image();
|
476 |
+
img.onload = () => {
|
477 |
+
loadingSpinner.style.display = 'none'; // Hide the loading spinner after the image is loaded
|
478 |
+
};
|
479 |
img.src = 'data:image/jpeg;base64,' + data.image_base64;
|
480 |
const maxWidth = 200;
|
481 |
const maxHeight = 200;
|
|
|
484 |
img.width *= ratio;
|
485 |
img.height *= ratio;
|
486 |
}
|
487 |
+
resultContainer.innerHTML = ""; // Clear previous content
|
488 |
+
resultContainer.appendChild(img); // Append new image
|
489 |
})
|
490 |
.catch(error => {
|
491 |
console.error('Error:', error);
|
492 |
+
resultContainer.innerHTML = "<p>An error occurred. Please try again later.</p>";
|
493 |
+
loadingSpinner.style.display = 'none'; // Hide the loading spinner on error
|
|
|
494 |
});
|
495 |
}
|
496 |
|
497 |
+
|
498 |
+
|
499 |
+
|
500 |
+
|
501 |
+
|
502 |
+
|
503 |
+
|
504 |
+
|
505 |
+
|
506 |
+
|
507 |
+
|
508 |
+
|
509 |
+
|
510 |
function toggleAdvancedOptions() {
|
511 |
const advancedOptions = document.getElementById("advanced-options");
|
512 |
if (advancedOptions.style.display === "none") {
|