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>&nbsp;</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) {