From d13e08e53bcea3ace15670ac577bf086046a6981 Mon Sep 17 00:00:00 2001 From: cmdr2 <secondary.cmdr2@gmail.com> Date: Wed, 14 Sep 2022 11:01:12 +0530 Subject: [PATCH] Make Prompt Strength editable via a text box; Restrict the max prompt strength to 0.99, since 1 caused CUDA errors for a few users; Color tweak for the stop button --- ui/index.html | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/ui/index.html b/ui/index.html index bb6483d9..677a856f 100644 --- a/ui/index.html +++ b/ui/index.html @@ -54,7 +54,7 @@ #editor-settings-entries li { padding-bottom: 3pt; } - #guidance_scale_slider { + .editor-slider { transform: translateY(30%); } #outputMsg { @@ -152,7 +152,7 @@ } #stopImage { flex: 0 0 70px; - background: rgb(185, 12, 0); + background: rgb(132, 8, 0); border: 2px solid rgb(122, 29, 0); color: rgb(255, 221, 255); width: 100%; @@ -372,8 +372,8 @@ </select> </li> <li><label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="50"></li> - <li><label for="guidance_scale_slider">Guidance Scale:</label> <input id="guidance_scale_slider" name="guidance_scale_slider" value="75" type="range" min="10" max="200"> <input id="guidance_scale" name="guidance_scale" size="4"></li> - <li><span id="prompt_strength_container"><label for="prompt_strength">Prompt Strength:</label> <input id="prompt_strength" name="prompt_strength" value="8" type="range" min="0" max="10"> <span id="prompt_strength_value"></span><br/></span></li> + <li><label for="guidance_scale_slider">Guidance Scale:</label> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="200"> <input id="guidance_scale" name="guidance_scale" size="4"></li> + <li><span id="prompt_strength_container"><label for="prompt_strength_slider">Prompt Strength:</label> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></span></li> <li> </li> <li><input id="save_to_disk" name="save_to_disk" type="checkbox"> <label for="save_to_disk">Automatically save to <input id="diskPath" name="diskPath" size="40" disabled></label></li> <li><input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label></li> @@ -454,8 +454,8 @@ let saveToDiskField = document.querySelector('#save_to_disk') let diskPathField = document.querySelector('#diskPath') // let allowNSFWField = document.querySelector("#allow_nsfw") let useBetaChannelField = document.querySelector("#use_beta_channel") +let promptStrengthSlider = document.querySelector('#prompt_strength_slider') let promptStrengthField = document.querySelector('#prompt_strength') -let promptStrengthValueLabel = document.querySelector('#prompt_strength_value') let useFaceCorrectionField = document.querySelector("#use_face_correction") let useUpscalingField = document.querySelector("#use_upscale") let upscaleModelField = document.querySelector("#upscale_model") @@ -836,7 +836,7 @@ async function makeImage() { if (IMAGE_REGEX.test(initImagePreview.src)) { reqBody['init_image'] = initImagePreview.src - reqBody['prompt_strength'] = parseInt(promptStrengthField.value) / 10 + reqBody['prompt_strength'] = promptStrengthField.value // if (IMAGE_REGEX.test(maskImagePreview.src)) { // reqBody['mask'] = maskImagePreview.src @@ -1019,10 +1019,21 @@ guidanceScaleField.addEventListener('input', updateGuidanceScaleSlider) updateGuidanceScale() function updatePromptStrength() { - promptStrengthValueLabel.innerHTML = promptStrengthField.value / 10 + promptStrengthField.value = promptStrengthSlider.value / 100 } -promptStrengthField.addEventListener('input', updatePromptStrength) +function updatePromptStrengthSlider() { + if (promptStrengthField.value < 0) { + promptStrengthField.value = 0 + } else if (promptStrengthField.value > 0.99) { + promptStrengthField.value = 0.99 + } + + promptStrengthSlider.value = promptStrengthField.value * 100 +} + +promptStrengthSlider.addEventListener('input', updatePromptStrength) +promptStrengthField.addEventListener('input', updatePromptStrengthSlider) updatePromptStrength() useBetaChannelField.addEventListener('click', async function(e) {