From 90bc1456c9ff62a84231a372cd89414c91ac8c43 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Tue, 8 Oct 2024 18:54:06 +0530
Subject: [PATCH] Suggest guidance value for Flux and non-Flux models

---
 ui/index.html         |  1 +
 ui/media/css/main.css |  5 +++++
 ui/media/js/main.js   | 26 ++++++++++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/ui/index.html b/ui/index.html
index 2fd11a5c..74f07984 100644
--- a/ui/index.html
+++ b/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>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index c5e862fe..aabdccf9 100644
--- a/ui/media/css/main.css
+++ b/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;
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 2b90a6d3..a1023286 100644
--- a/ui/media/js/main.js
+++ b/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")) {