Allow changing the strength of the codeformer model (1 - fidelity); Improve the styling of the sub-settings

CHANGES.md

@@ -22,11 +22,12 @@
 Our focus continues to remain on an easy installation experience, and an easy user-interface. While still remaining pretty powerful, in terms of features and speed.
 
 ### Detailed changelog
-* 2.5.41 - 4 Jun 2023 - Allow sharing an Easy Diffusion instance via https://try.cloudflare.com/ . You can find this option at the bottom of the Settings tab. Thanks @JeLuf.
+* 2.5.41 - 6 Jun 2023 - Allow changing the strength of CodeFormer, and slightly improved styling of the CodeFormer options.
-* 2.5.41 - 4 Jun 2023 - Show an option to download for tiled images. Shows a button on the generated image. Creates larger images by tiling them with the image generated by Easy Diffusion. Thanks @JeLuf.
+* 2.5.41 - 5 Jun 2023 - Allow sharing an Easy Diffusion instance via https://try.cloudflare.com/ . You can find this option at the bottom of the Settings tab. Thanks @JeLuf.
-* 2.5.41 - 4 Jun 2023 - Allow LoRA strengths between -2 and 2. Thanks @ogmaresca.
+* 2.5.41 - 5 Jun 2023 - Show an option to download for tiled images. Shows a button on the generated image. Creates larger images by tiling them with the image generated by Easy Diffusion. Thanks @JeLuf.
-* 2.5.40 - 4 Jun 2023 - Reduce the VRAM usage of Latent Upscaling when using "balanced" VRAM usage mode.
+* 2.5.41 - 5 Jun 2023 - Allow LoRA strengths between -2 and 2. Thanks @ogmaresca.
-* 2.5.40 - 4 Jun 2023 - Fix the "realesrgan" key error when using CodeFormer with more than 1 image in a batch.
+* 2.5.40 - 5 Jun 2023 - Reduce the VRAM usage of Latent Upscaling when using "balanced" VRAM usage mode.
+* 2.5.40 - 5 Jun 2023 - Fix the "realesrgan" key error when using CodeFormer with more than 1 image in a batch.
 * 2.5.40 - 3 Jun 2023 - Added CodeFormer as another option for fixing faces and eyes. CodeFormer tends to perform better than GFPGAN for many images. Thanks @patriceac for the implementation, and for contacting the CodeFormer team (who were supportive of it being integrated into Easy Diffusion).
 * 2.5.39 - 25 May 2023 - (beta-only) Seamless Tiling - make seamlessly tiled images, e.g. rock and grass textures. Thanks @JeLuf.
 * 2.5.38 - 24 May 2023 - Better reporting of errors, and show an explanation if the user cannot disable the "Use CPU" setting.

ui/easydiffusion/renderer.py

@@ -165,6 +165,7 @@ def filter_images(req: GenerateImageRequest, task_data: TaskData, images: list,
         filters_to_apply.append("codeformer")
 
         filter_params["upscale_faces"] = task_data.codeformer_upscale_faces
+        filter_params["codeformer_fidelity"] = task_data.codeformer_fidelity
     elif task_data.use_face_correction and "gfpgan" in task_data.use_face_correction.lower():
         filters_to_apply.append("gfpgan")
     if task_data.use_upscale:

ui/easydiffusion/types.py

@@ -52,6 +52,7 @@ class TaskData(BaseModel):
     stream_image_progress_interval: int = 5
     clip_skip: bool = False
     codeformer_upscale_faces: bool = False
+    codeformer_fidelity: float = 0.5
 
 
 class MergeRequest(BaseModel):

ui/index.html

@@ -266,11 +266,12 @@
                     <div><ul>
                     <li><b class="settings-subheader">Render Settings</b></li>
                     <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, slower images)</small></label></li>
-                    <li class="pl-5">
+                    <li class="pl-5" id="use_face_correction_container">
                         <input id="use_face_correction" name="use_face_correction" type="checkbox"> <label for="use_face_correction">Fix incorrect faces and eyes</label> <div style="display:inline-block;"><input id="gfpgan_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" /></div>
-                        <div id="codeformer_settings" class="displayNone sub-settings">
+                        <table id="codeformer_settings" class="displayNone sub-settings">
-                            <input id="codeformer_upscale_faces" name="codeformer_upscale_faces" type="checkbox" checked><label for="codeformer_upscale_faces">Upscale Faces <small>(improves the resolution of faces)</small></label>
+                            <tr class="pl-5"><td><label for="codeformer_fidelity_slider">Strength:</label></td><td><input id="codeformer_fidelity_slider" name="codeformer_fidelity_slider" class="editor-slider" value="10" type="range" min="0" max="10"> <input id="codeformer_fidelity" name="codeformer_fidelity" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
-                        </div>
+                            <tr class="pl-5"><td><label for="codeformer_upscale_faces">Upscale Faces:</label></td><td><input id="codeformer_upscale_faces" name="codeformer_upscale_faces" type="checkbox" checked> <label><small>(improves the resolution of faces)</small></label></td></tr>
+                        </table>
                     </li>
                     <li class="pl-5">
                         <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Scale up by</label> 
@@ -284,9 +285,9 @@
                             <option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>
                             <option value="latent_upscaler">Latent Upscaler 2x</option>
                         </select>
-                        <div id="latent_upscaler_settings" class="displayNone sub-settings">
+                        <table id="latent_upscaler_settings" class="displayNone sub-settings">
-                            <label for="latent_upscaler_steps_slider">Upscaling Steps:</label></td><td> <input id="latent_upscaler_steps_slider" name="latent_upscaler_steps_slider" class="editor-slider" value="10" type="range" min="1" max="50"> <input id="latent_upscaler_steps" name="latent_upscaler_steps" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)">
+                            <tr class="pl-5"><td><label for="latent_upscaler_steps_slider">Upscaling Steps:</label></td><td><input id="latent_upscaler_steps_slider" name="latent_upscaler_steps_slider" class="editor-slider" value="10" type="range" min="1" max="50"> <input id="latent_upscaler_steps" name="latent_upscaler_steps" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
-                        </div>
+                        </table>
                     </li>
                     <li class="pl-5"><input id="show_only_filtered_image" name="show_only_filtered_image" type="checkbox" checked> <label for="show_only_filtered_image">Show only the corrected/upscaled image</label></li>
                     </ul></div>

ui/media/css/main.css

@@ -1324,6 +1324,14 @@ body.wait-pause {
     margin-left: 0.5em;
 }
 
+.expandedSettingRow {
+    background: var(--background-color1);
+    width: 95%;
+    border-radius: 4pt;
+    margin-top: 5pt;
+    margin-bottom: 3pt;
+}
+
 /* TOAST NOTIFICATIONS */
 .toast-notification {
     position: fixed;

ui/media/js/main.js

@@ -94,6 +94,8 @@ let upscaleAmountField = document.querySelector("#upscale_amount")
 let latentUpscalerSettings = document.querySelector("#latent_upscaler_settings")
 let latentUpscalerStepsSlider = document.querySelector("#latent_upscaler_steps_slider")
 let latentUpscalerStepsField = document.querySelector("#latent_upscaler_steps")
+let codeformerFidelitySlider = document.querySelector("#codeformer_fidelity_slider")
+let codeformerFidelityField = document.querySelector("#codeformer_fidelity")
 let stableDiffusionModelField = new ModelDropdown(document.querySelector("#stable_diffusion_model"), "stable-diffusion")
 let clipSkipField = document.querySelector("#clip_skip")
 let tilingField = document.querySelector("#tiling")
@@ -1266,6 +1268,7 @@ function getCurrentUserRequest() {
 
         if (gfpganModelField.value.includes("codeformer")) {
             newTask.reqBody.codeformer_upscale_faces = document.querySelector("#codeformer_upscale_faces").checked
+            newTask.reqBody.codeformer_fidelity = 1 - parseFloat(codeformerFidelityField.value)
         }
     }
     if (useUpscalingField.checked) {
@@ -1588,8 +1591,10 @@ function onFixFaceModelChange() {
     let codeformerSettings = document.querySelector("#codeformer_settings")
     if (gfpganModelField.value === "codeformer" && !gfpganModelField.disabled) {
         codeformerSettings.classList.remove("displayNone")
+        codeformerSettings.classList.add("expandedSettingRow")
     } else {
         codeformerSettings.classList.add("displayNone")
+        codeformerSettings.classList.remove("expandedSettingRow")
     }
 }
 gfpganModelField.addEventListener("change", onFixFaceModelChange)
@@ -1610,9 +1615,11 @@ function onUpscaleModelChange() {
         upscale4x.disabled = true
         upscaleAmountField.value = "2"
         latentUpscalerSettings.classList.remove("displayNone")
+        latentUpscalerSettings.classList.add("expandedSettingRow")
     } else {
         upscale4x.disabled = false
         latentUpscalerSettings.classList.add("displayNone")
+        latentUpscalerSettings.classList.remove("expandedSettingRow")
     }
 }
 upscaleModelField.addEventListener("change", onUpscaleModelChange)
@@ -1627,6 +1634,27 @@ document.onkeydown = function(e) {
     }
 }
 
+/********************* CodeFormer Fidelity **************************/
+function updateCodeformerFidelity() {
+    codeformerFidelityField.value = codeformerFidelitySlider.value / 10
+    codeformerFidelityField.dispatchEvent(new Event("change"))
+}
+
+function updateCodeformerFidelitySlider() {
+    if (codeformerFidelityField.value < 0) {
+        codeformerFidelityField.value = 0
+    } else if (codeformerFidelityField.value > 1) {
+        codeformerFidelityField.value = 1
+    }
+
+    codeformerFidelitySlider.value = codeformerFidelityField.value * 10
+    codeformerFidelitySlider.dispatchEvent(new Event("change"))
+}
+
+codeformerFidelitySlider.addEventListener("input", updateCodeformerFidelity)
+codeformerFidelityField.addEventListener("input", updateCodeformerFidelitySlider)
+updateCodeformerFidelity()
+
 /********************* Latent Upscaler Steps **************************/
 function updateLatentUpscalerSteps() {
     latentUpscalerStepsField.value = latentUpscalerStepsSlider.value
@@ -1981,25 +2009,25 @@ resumeBtn.addEventListener("click", function() {
 
 function tunnelUpdate(event) {
     if ("cloudflare" in event) {
-        document.getElementById('cloudflare-off').classList.add("displayNone")
+        document.getElementById("cloudflare-off").classList.add("displayNone")
-        document.getElementById('cloudflare-on').classList.remove("displayNone")
+        document.getElementById("cloudflare-on").classList.remove("displayNone")
         cloudflareAddressField.innerHTML = event.cloudflare
-        document.getElementById('toggle-cloudflare-tunnel').innerHTML = "Stop"
+        document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Stop"
     } else {
-        document.getElementById('cloudflare-on').classList.add("displayNone")
+        document.getElementById("cloudflare-on").classList.add("displayNone")
-        document.getElementById('cloudflare-off').classList.remove("displayNone")
+        document.getElementById("cloudflare-off").classList.remove("displayNone")
-        document.getElementById('toggle-cloudflare-tunnel').innerHTML = "Start"
+        document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Start"
     }
 }
 
-document.getElementById('toggle-cloudflare-tunnel').addEventListener("click", async function() {
+document.getElementById("toggle-cloudflare-tunnel").addEventListener("click", async function() {
     let command = "stop"
-    if (document.getElementById('toggle-cloudflare-tunnel').innerHTML == "Start") {
+    if (document.getElementById("toggle-cloudflare-tunnel").innerHTML == "Start") {
-       command = "start"
+        command = "start"
     }
     showToast(`Cloudflare tunnel ${command} initiated. Please wait.`)
 
-    let res = await fetch("/tunnel/cloudflare/"+command, {
+    let res = await fetch("/tunnel/cloudflare/" + command, {
         method: "POST",
         headers: {
             "Content-Type": "application/json",