Suggest guidance value for Flux and non-Flux models

ui/index.html

@@ -414,6 +414,7 @@
                     </td></tr>
                     <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" type="number" min="1" step="1" style="width: 42pt" value="25" onkeypress="preventNonNumericalInput(event)" inputmode="numeric"></td></tr>
                     <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="11" max="500"> <input id="guidance_scale" name="guidance_scale" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)" inputmode="decimal"></td></tr>
+                    <tr class="pl-5 displayNone" id="guidanceWarning"><td></td><td id="guidanceWarningText"></td></tr>
                     <tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <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" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)" inputmode="decimal"><br/></td></tr>
                     <tr id="lora_model_container" class="pl-5 gated-feature" data-feature-keys="backend_ed_diffusers backend_webui">
                         <td>

ui/media/css/main.css

@@ -670,6 +670,11 @@ div.img-preview img {
     display: none;
 }
 
+#guidanceWarningText {
+    color: var(--status-orange);
+    font-size: 9pt;
+}
+
 .display-settings {
     float: right;
     position: relative;

ui/media/js/main.js

@@ -1858,6 +1858,32 @@ controlImagePreview.addEventListener("load", onControlnetModelChange)
 controlImagePreview.addEventListener("unload", onControlnetModelChange)
 onControlnetModelChange()
 
+// tip for Flux
+let sdModelField = document.querySelector("#stable_diffusion_model")
+function checkGuidanceValue() {
+    let guidance = parseFloat(guidanceScaleField.value)
+    let guidanceWarning = document.querySelector("#guidanceWarning")
+    let guidanceWarningText = document.querySelector("#guidanceWarningText")
+    if (sdModelField.value.toLowerCase().includes("flux")) {
+        if (guidance > 1.5) {
+            guidanceWarningText.innerText = "Flux recommends a guidance scale of 1"
+            guidanceWarning.classList.remove("displayNone")
+        } else {
+            guidanceWarning.classList.add("displayNone")
+        }
+    } else {
+        if (guidance < 2) {
+            guidanceWarningText.innerText = "A higher Guidance Scale is recommended!"
+            guidanceWarning.classList.remove("displayNone")
+        } else {
+            guidanceWarning.classList.add("displayNone")
+        }
+    }
+}
+sdModelField.addEventListener("change", checkGuidanceValue)
+guidanceScaleField.addEventListener("change", checkGuidanceValue)
+guidanceScaleSlider.addEventListener("change", checkGuidanceValue)
+
 // function onControlImageFilterChange() {
 //     let filterId = controlImageFilterField.value
 //     if (filterId.includes("openpose")) {