feat: add Checkbox "Use different CFG scale" to UI

Author: linjiX

javascript/hires_fix.js

@@ -16,3 +16,24 @@ function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_
 
     return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
 }
+
+function toggleUseDifferentHRCFGScale(enabled, cfg_scale, ditilled_cfg_scale) {
+    if (enabled) {
+        return [
+            { interactive: enabled, __type__: "update" },
+            { interactive: enabled, __type__: "update" },
+        ];
+    }
+
+    return [
+        { interactive: enabled, value: ditilled_cfg_scale, __type__: "update" },
+        { interactive: enabled, value: cfg_scale, __type__: "update" },
+    ];
+}
+
+function syncHRCFGScale(enabled, value) {
+    if (enabled) {
+        return { __type__: "update" };
+    }
+    return { value: value, __type__: "update" };
+}

modules/ui.py

@@ -489,6 +489,25 @@ def create_ui():
                             cfg_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.1, label='CFG Scale', value=7.0, elem_id="txt2img_cfg_scale")
                             cfg_scale.change(lambda x: gr.update(interactive=(x != 1)), inputs=[cfg_scale], outputs=[toprow.negative_prompt], queue=False, show_progress=False)
 
+                            hr_use_different_cfg.change(
+                                fn=None,
+                                _js="toggleUseDifferentHRCFGScale",
+                                inputs=[hr_use_different_cfg, distilled_cfg_scale, cfg_scale],
+                                outputs=[hr_distilled_cfg, hr_cfg],
+                            )
+                            distilled_cfg_scale.change(
+                                fn=None,
+                                _js="syncHRCFGScale",
+                                inputs=[hr_use_different_cfg, distilled_cfg_scale],
+                                outputs=[hr_distilled_cfg],
+                            )
+                            cfg_scale.change(
+                                fn=None,
+                                _js="syncHRCFGScale",
+                                inputs=[hr_use_different_cfg, cfg_scale],
+                                outputs=[hr_cfg],
+                            )
+
                     elif category == "checkboxes":
                         with FormRow(elem_classes="checkboxes-row", variant="compact"):
                             restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="txt2img_restore_faces")
@@ -540,8 +559,9 @@ def create_ui():
                                         _js="monitorThisParam('tab_txt2img', 'modules.txt2img.txt2img', 'hr_resize_y')")
 
                                 with FormRow(elem_id="txt2img_hires_fix_row_cfg", variant="compact"):
-                                    hr_distilled_cfg = gr.Slider(minimum=0.0, maximum=30.0, step=0.1, label="Hires Distilled CFG Scale", value=3.5, elem_id="txt2img_hr_distilled_cfg")
-                                    hr_cfg = gr.Slider(minimum=1.0, maximum=30.0, step=0.1, label="Hires CFG Scale", value=7.0, elem_id="txt2img_hr_cfg")
+                                    hr_distilled_cfg = gr.Slider(minimum=0.0, maximum=30.0, step=0.1, label="Hires Distilled CFG Scale", value=3.5, elem_id="txt2img_hr_distilled_cfg", interactive=False)
+                                    hr_cfg = gr.Slider(minimum=1.0, maximum=30.0, step=0.1, label="Hires CFG Scale", value=7.0, elem_id="txt2img_hr_cfg", interactive=False)
+                                    hr_use_different_cfg = gr.Checkbox(label="Use different CFG scale", value=False, elem_id="txt2img_hr_use_different_cfg")
 
                                 with FormRow(elem_id="txt2img_hires_fix_row3", variant="compact", visible=shared.opts.hires_fix_show_sampler) as hr_checkpoint_container:
                                     hr_checkpoint_name = gr.Dropdown(label='Hires Checkpoint', elem_id="hr_checkpoint", choices=["Use same checkpoint"], value="Use same checkpoint", scale=2, multiselect=False)