Ashrafb commited on
Commit
c3bc67b
1 Parent(s): cead89b

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +70 -55
static/index.html CHANGED
@@ -113,22 +113,7 @@
113
  }
114
 
115
 
116
- .image-container {
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
- .image-box img {
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
- #image-box {
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
- #image-box p {
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
- <div id="output-container" class="image-container">
421
- <div id="image-box" class="image-box">
422
- <p>Your Generated Image Will Appear Here</p>
423
- <div id="sendSpinner" class="spinner" style="display: none;"></div>
 
 
 
 
 
 
 
 
 
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("image-box");
456
- imageBox.innerHTML = "<p>Please enter prompt before sending.</p>";
457
  return;
458
  }
459
 
460
- showSpinner('sendSpinner');
 
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
- imageBox.appendChild(img);
485
- hideSpinner('sendSpinner');
486
  })
487
  .catch(error => {
488
  console.error('Error:', error);
489
- const imageBox = document.getElementById("image-box");
490
- imageBox.innerHTML = "<p>An error occurred. Please try again later.</p>";
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") {