support new Forge

The sliders are still a bit jank...

CHANGELOG.md

@@ -1,3 +1,6 @@
+### v2.2.2 - 2024 Aug.27
+- Fix **Color Picker** for Gradio **4**
+
 ### v2.2.1 - 2024 Aug.02
 - `@torch.inference_mode()`
 

README.md

@@ -2,9 +2,7 @@
 This is an Extension for the [Automatic1111 Webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui), which performs a kind of **Offset Noise** natively,
 allowing you to adjust the brightness, contrast, and color of the generations.
 
-> Also compatible with [Forge](https://github.com/lllyasviel/stable-diffusion-webui-forge)!
+> Also supports both old & new [Forge](https://github.com/lllyasviel/stable-diffusion-webui-forge)
-
-> Now supports SDXL!
 
 > [Sample Images](#sample-images)
 

javascript/vec_cc.js

@@ -79,30 +79,38 @@ class VectorscopeCC {
 
 }
 
-onUiLoaded(async () => {
+onUiLoaded(() => {
 
     ['txt', 'img'].forEach((mode) => {
-        const container = gradioApp().getElementById(`cc-colorwheel-${mode}`);
+        const container = document.getElementById(`cc-colorwheel-${mode}`);
         container.style.height = '200px';
         container.style.width = '200px';
 
-        while (container.firstChild.nodeName.toLowerCase() !== 'img')
-            container.firstChild.remove();
-
         const wheel = container.querySelector('img');
+        container.insertBefore(wheel, container.firstChild);
+
+        while (container.firstChild !== container.lastChild)
+            container.lastChild.remove();
+
         wheel.ondragstart = (e) => { e.preventDefault(); return false; };
         wheel.id = `cc-img-${mode}`;
 
-        sliders = [
+        const sliders = [
-            [gradioApp().getElementById(`cc-r-${mode}`).querySelector('input[type=number]'),
+            [
-            gradioApp().getElementById(`cc-r-${mode}`).querySelector('input[type=range]')],
+                document.getElementById(`cc-r-${mode}`).querySelector('input[type=number]'),
-            [gradioApp().getElementById(`cc-g-${mode}`).querySelector('input[type=number]'),
+                document.getElementById(`cc-r-${mode}`).querySelector('input[type=range]')
-            gradioApp().getElementById(`cc-g-${mode}`).querySelector('input[type=range]')],
+            ],
-            [gradioApp().getElementById(`cc-b-${mode}`).querySelector('input[type=number]'),
+            [
-            gradioApp().getElementById(`cc-b-${mode}`).querySelector('input[type=range]')]
+                document.getElementById(`cc-g-${mode}`).querySelector('input[type=number]'),
+                document.getElementById(`cc-g-${mode}`).querySelector('input[type=range]')
+            ],
+            [
+                document.getElementById(`cc-b-${mode}`).querySelector('input[type=number]'),
+                document.getElementById(`cc-b-${mode}`).querySelector('input[type=range]')
+            ]
         ];
 
-        const temp = gradioApp().getElementById(`cc-temp-${mode}`);
+        const temp = document.getElementById(`cc-temp-${mode}`);
 
         const dot = temp.querySelector('img');
         dot.id = `cc-dot-${mode}`;
@@ -114,14 +122,6 @@ onUiLoaded(async () => {
 
         VectorscopeCC.dot[mode] = dot;
         VectorscopeCC.registerPicker(wheel, sliders, dot);
-
-        const row1 = gradioApp().getElementById(`cc-apply-${mode}`).parentNode;
-        row1.style.alignItems = 'end';
-        row1.style.gap = '1em';
-
-        const row2 = gradioApp().getElementById(`cc-save-${mode}`).parentNode;
-        row2.style.alignItems = 'end';
-        row2.style.gap = '1em';
     });
 
 });

scripts/cc.py

@@ -10,7 +10,7 @@ from random import seed
 import gradio as gr
 
 
-VERSION = "v2.2.1"
+VERSION = "v2.2.2"
 
 
 style_manager = StyleManager()
@@ -113,7 +113,7 @@ class VectorscopeCC(scripts.Script):
 
             with gr.Accordion("Styles", open=False):
 
-                with gr.Row():
+                with gr.Row(elem_classes="style-rows"):
                     style_choice = gr.Dropdown(
                         label="Styles", choices=style_manager.list_style(), scale=3
                     )
@@ -122,7 +122,7 @@ class VectorscopeCC(scripts.Script):
                     )
                     refresh_btn = gr.Button(value="Refresh Style", scale=2)
 
-                with gr.Row():
+                with gr.Row(elem_classes="style-rows"):
                     style_name = gr.Textbox(label="Style Name", scale=3)
                     save_btn = gr.Button(
                         value="Save Style", elem_id=f"cc-save-{mode}", scale=2
@@ -133,9 +133,7 @@ class VectorscopeCC(scripts.Script):
                 with gr.Row():
                     doHR = gr.Checkbox(label="Process Hires. fix")
                     doAD = gr.Checkbox(label="Process Adetailer")
-
                     doRN = gr.Checkbox(label="Randomize using Seed")
-                    doRN.do_not_save_to_config = True
 
                 method = gr.Radio(
                     [
@@ -233,12 +231,18 @@ class VectorscopeCC(scripts.Script):
                 reset_btn.click(
                     fn=on_reset,
                     outputs=[*comps],
+                    show_progress="hidden",
                 ).then(
                     None,
                     inputs=[r, g, b],
                     _js=f"(r, g, b) => {{ VectorscopeCC.updateCursor(r, g, b, {m}); }}",
                 )
-                random_btn.click(fn=on_random, outputs=[bri, con, sat, r, g, b]).then(
+
+                random_btn.click(
+                    fn=on_random,
+                    outputs=[bri, con, sat, r, g, b],
+                    show_progress="hidden",
+                ).then(
                     None,
                     inputs=[r, g, b],
                     _js=f"(r, g, b) => {{ VectorscopeCC.updateCursor(r, g, b, {m}); }}",
@@ -257,6 +261,7 @@ class VectorscopeCC(scripts.Script):
             (method, "Vec CC Noise"),
             (doHR, "Vec CC Proc HrF"),
             (doAD, "Vec CC Proc Ade"),
+            (doRN, "Vec CC Seed Randomize"),
             (scaling, "Vec CC Scaling"),
         ]
 

style.css

@@ -24,12 +24,14 @@
     border-radius: 0.5em;
 }
 
-#vec-cc-txt fieldset>div {
+#vec-cc-txt .style-rows {
-    gap: 0.2em 0.4em;
+    align-items: end;
+    gap: 1em;
 }
 
-#vec-cc-img fieldset>div {
+#vec-cc-img .style-rows {
-    gap: 0.2em 0.4em;
+    align-items: end;
+    gap: 1em;
 }
 
 #vec-hdr-txt label, #vec-hdr-img label {