Update static/index.html
Browse files- static/index.html +147 -50
static/index.html
CHANGED
@@ -150,57 +150,112 @@
|
|
150 |
font-size: 20px;
|
151 |
color: white;
|
152 |
}
|
153 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
154 |
</style>
|
155 |
</head>
|
156 |
<body>
|
157 |
<div class="container">
|
158 |
<h1>Aiconvert.online </h1>
|
159 |
-
|
160 |
-
<div>
|
161 |
-
<
|
162 |
-
|
163 |
-
|
164 |
-
|
165 |
-
|
166 |
-
<
|
167 |
-
|
168 |
-
|
|
|
169 |
</div>
|
170 |
<br>
|
171 |
<div id="cont">
|
172 |
-
|
173 |
-
|
174 |
-
|
175 |
-
|
|
|
|
|
|
|
|
|
|
|
176 |
</div>
|
177 |
<br>
|
178 |
-
|
179 |
-
|
180 |
-
|
181 |
-
|
182 |
-
|
183 |
-
|
184 |
-
|
185 |
-
|
186 |
-
|
187 |
-
|
188 |
-
|
189 |
-
|
190 |
-
|
191 |
-
|
192 |
-
|
193 |
-
|
194 |
-
|
195 |
-
|
196 |
-
|
|
|
197 |
|
198 |
-
|
199 |
-
<button onclick="
|
200 |
-
<div id="sendSpinner" class="spinner" style="display: none;"></div>
|
201 |
-
</div>
|
202 |
</div>
|
203 |
-
|
204 |
<br>
|
205 |
<div id="output-container" class="image-container">
|
206 |
<div id="image-box" class="image-box">
|
@@ -210,13 +265,7 @@
|
|
210 |
</div>
|
211 |
|
212 |
<script>
|
213 |
-
function
|
214 |
-
const checkbox = document.getElementById("additional-options-toggle");
|
215 |
-
const options = document.getElementById("additional-options");
|
216 |
-
options.style.display = checkbox.checked ? "block" : "none";
|
217 |
-
}
|
218 |
-
|
219 |
-
function showSpinner(spinnerId) {
|
220 |
document.getElementById(spinnerId).style.display = 'block';
|
221 |
}
|
222 |
|
@@ -239,16 +288,27 @@
|
|
239 |
});
|
240 |
}
|
241 |
|
242 |
-
|
243 |
-
showSpinner('sendSpinner');
|
244 |
const inputs = document.getElementById("inputs").value;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
245 |
const noiseLevel = document.getElementById("noise_level").value;
|
246 |
-
const isNegative = document.getElementById("is_negative").
|
247 |
const steps = document.getElementById("steps").value;
|
248 |
const cfgScale = document.getElementById("cfg_scale").value;
|
249 |
const seed = document.getElementById("seed").value;
|
250 |
fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
|
251 |
-
.then(response =>
|
|
|
|
|
|
|
|
|
|
|
252 |
.then(data => {
|
253 |
const imageBox = document.getElementById("image-box");
|
254 |
const img = new Image();
|
@@ -265,10 +325,47 @@
|
|
265 |
})
|
266 |
.catch(error => {
|
267 |
console.error('Error:', error);
|
|
|
|
|
268 |
hideSpinner('sendSpinner');
|
269 |
});
|
270 |
}
|
271 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
272 |
</script>
|
273 |
</body>
|
274 |
</html>
|
|
|
150 |
font-size: 20px;
|
151 |
color: white;
|
152 |
}
|
153 |
+
#showadv{
|
154 |
+
padding: 10px 20px;
|
155 |
+
margin: 10px;
|
156 |
+
background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
|
157 |
+
border: none;
|
158 |
+
border-radius: 8px;
|
159 |
+
cursor: pointer;
|
160 |
+
color: #fff;
|
161 |
+
|
162 |
+
}
|
163 |
+
#advanced-options {
|
164 |
+
flex-grow: 1;
|
165 |
+
padding: 10px;
|
166 |
+
margin: 10px;
|
167 |
+
background: transparent;
|
168 |
+
border: none;
|
169 |
+
border-radius: 8px;
|
170 |
+
box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
|
171 |
+
color: #fff;
|
172 |
+
outline: none;
|
173 |
+
background-color: #030303;
|
174 |
+
padding: 0px;
|
175 |
+
border-radius: 12px;
|
176 |
+
box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
|
177 |
+
display: none;
|
178 |
+
align-items: center;
|
179 |
+
border: 2px solid rgb(247, 6, 187);
|
180 |
+
}
|
181 |
+
#advanced-options label, #advanced-options input {
|
182 |
+
margin: 10px;
|
183 |
+
color: #fff;
|
184 |
+
}
|
185 |
+
#advanced-options input[type="number"] {
|
186 |
+
width: 50px;
|
187 |
+
padding: 5px;
|
188 |
+
|
189 |
+
}
|
190 |
+
#advanced-options button {
|
191 |
+
padding: 10px 20px;
|
192 |
+
margin: 10px;
|
193 |
+
background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
|
194 |
+
border: none;
|
195 |
+
border-radius: 8px;
|
196 |
+
cursor: pointer;
|
197 |
+
color: #fff;
|
198 |
+
|
199 |
+
}
|
200 |
+
#advanced-options button:hover {
|
201 |
+
background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
|
202 |
+
}
|
203 |
+
|
204 |
+
|
205 |
</style>
|
206 |
</head>
|
207 |
<body>
|
208 |
<div class="container">
|
209 |
<h1>Aiconvert.online </h1>
|
210 |
+
|
211 |
+
<div id="cont">
|
212 |
+
<div>
|
213 |
+
<label for="prompt">Enter text:</label>
|
214 |
+
<input type="text" id="prompt" name="prompt">
|
215 |
+
</div>
|
216 |
+
<br>
|
217 |
+
<div>
|
218 |
+
<button onclick="generatePrompts()">Generate Prompts</button>
|
219 |
+
<div id="promptSpinner" class="spinner" style="display: none;"></div>
|
220 |
+
</div>
|
221 |
</div>
|
222 |
<br>
|
223 |
<div id="cont">
|
224 |
+
<div>
|
225 |
+
<label for="inputs">Enter prompt:</label>
|
226 |
+
<input type="text" id="inputs" name="inputs">
|
227 |
+
</div>
|
228 |
+
<br>
|
229 |
+
<div>
|
230 |
+
<button onclick="sendInputs()">generate image </button>
|
231 |
+
<div id="sendSpinner" class="spinner" style="display: none;"></div>
|
232 |
+
</div>
|
233 |
</div>
|
234 |
<br>
|
235 |
+
<button id="showadv" onclick="toggleAdvancedOptions()">Advanced Options</button>
|
236 |
+
<div id="advanced-options">
|
237 |
+
<label for="is_negative">Is Negative:</label>
|
238 |
+
<input type="text" id="is_negative" name="is_negative" value="blurry, fuzziness">
|
239 |
+
<br>
|
240 |
+
<label for="steps">Steps:</label>
|
241 |
+
<input type="range" id="steps" name="steps" min="30" max="100" value="50">
|
242 |
+
<span id="steps-value">50</span>
|
243 |
+
<br>
|
244 |
+
<label for="cfg_scale">Guidance Scale:</label>
|
245 |
+
<input type="range" id="cfg_scale" name="cfg_scale" min="5" max="14" value="7.5" step="1">
|
246 |
+
<span id="cfg-scale-value">7.5</span>
|
247 |
+
<br>
|
248 |
+
<label for="seed">Seed:</label>
|
249 |
+
<input type="range" id="seed" name="seed" min="1" max="99999" value="0" step="1">
|
250 |
+
<span id="seed-value">0</span>
|
251 |
+
<br>
|
252 |
+
<label for="noise_level">Noise Level:</label>
|
253 |
+
<input type="range" id="noise_level" name="noise_level" min="0" max="10" step="1" value="0">
|
254 |
+
<span id="noise-level-value">0</span>
|
255 |
|
256 |
+
<br>
|
257 |
+
<button onclick="toggleAdvancedOptions()">Hide Advanced Options</button>
|
|
|
|
|
258 |
</div>
|
|
|
259 |
<br>
|
260 |
<div id="output-container" class="image-container">
|
261 |
<div id="image-box" class="image-box">
|
|
|
265 |
</div>
|
266 |
|
267 |
<script>
|
268 |
+
function showSpinner(spinnerId) {
|
|
|
|
|
|
|
|
|
|
|
|
|
269 |
document.getElementById(spinnerId).style.display = 'block';
|
270 |
}
|
271 |
|
|
|
288 |
});
|
289 |
}
|
290 |
|
291 |
+
function sendInputs() {
|
|
|
292 |
const inputs = document.getElementById("inputs").value;
|
293 |
+
if (!inputs) {
|
294 |
+
const imageBox = document.getElementById("image-box");
|
295 |
+
imageBox.innerHTML = "<p>Please enter prompt before sending.</p>";
|
296 |
+
return;
|
297 |
+
}
|
298 |
+
|
299 |
+
showSpinner('sendSpinner');
|
300 |
const noiseLevel = document.getElementById("noise_level").value;
|
301 |
+
const isNegative = document.getElementById("is_negative").value;
|
302 |
const steps = document.getElementById("steps").value;
|
303 |
const cfgScale = document.getElementById("cfg_scale").value;
|
304 |
const seed = document.getElementById("seed").value;
|
305 |
fetch(`/send_inputs?inputs=${encodeURIComponent(inputs)}&noise_level=${noiseLevel}&is_negative=${isNegative}&steps=${steps}&cfg_scale=${cfgScale}&seed=${seed}`)
|
306 |
+
.then(response => {
|
307 |
+
if (!response.ok) {
|
308 |
+
throw new Error('Network response was not ok');
|
309 |
+
}
|
310 |
+
return response.json();
|
311 |
+
})
|
312 |
.then(data => {
|
313 |
const imageBox = document.getElementById("image-box");
|
314 |
const img = new Image();
|
|
|
325 |
})
|
326 |
.catch(error => {
|
327 |
console.error('Error:', error);
|
328 |
+
const imageBox = document.getElementById("image-box");
|
329 |
+
imageBox.innerHTML = "<p>An error occurred. Please try again later.</p>";
|
330 |
hideSpinner('sendSpinner');
|
331 |
});
|
332 |
}
|
333 |
|
334 |
+
function toggleAdvancedOptions() {
|
335 |
+
const advancedOptions = document.getElementById("advanced-options");
|
336 |
+
if (advancedOptions.style.display === "none") {
|
337 |
+
advancedOptions.style.display = "block";
|
338 |
+
} else {
|
339 |
+
advancedOptions.style.display = "none";
|
340 |
+
}
|
341 |
+
}
|
342 |
+
|
343 |
+
// Function to update slider value display
|
344 |
+
function updateSliderValue(sliderId, spanId) {
|
345 |
+
const slider = document.getElementById(sliderId);
|
346 |
+
const span = document.getElementById(spanId);
|
347 |
+
span.textContent = slider.value;
|
348 |
+
}
|
349 |
+
|
350 |
+
// Event listeners to update slider values
|
351 |
+
document.getElementById("steps").addEventListener("input", () => {
|
352 |
+
updateSliderValue("steps", "steps-value");
|
353 |
+
});
|
354 |
+
|
355 |
+
document.getElementById("cfg_scale").addEventListener("input", () => {
|
356 |
+
updateSliderValue("cfg_scale", "cfg-scale-value");
|
357 |
+
});
|
358 |
+
|
359 |
+
document.getElementById("seed").addEventListener("input", () => {
|
360 |
+
updateSliderValue("seed", "seed-value");
|
361 |
+
});
|
362 |
+
|
363 |
+
document.getElementById("noise_level").addEventListener("input", () => {
|
364 |
+
updateSliderValue("noise_level", "noise-level-value");
|
365 |
+
});
|
366 |
+
|
367 |
+
|
368 |
+
|
369 |
</script>
|
370 |
</body>
|
371 |
</html>
|