feat: reorder image filter parameters and remove grayscale option

docs/websocket_nodes.md

@@ -145,15 +145,14 @@ A dedicated node for managing and transmitting WebSocket settings parameters sep
           "bgColourPicker": "#222222",
           "serverMessages": "",
           "filters": {
-            "blur": 4,
+            "opacity": 1.0,
             "brightness": 1.2,
             "contrast": 1.1,
-            "grayscale": 0.0,
+            "saturate": 1.4,
             "hueRotate": 180,
             "invert": 0.0,
-            "saturate": 1.4,
             "sepia": 0.2,
-            "opacity": 1.0
+            "blur": 4
           }
         }
       }
@@ -176,15 +175,16 @@ Provides adjustable CSS image filter parameters as a JSON object for composition
 1. **Add the `IMAGE Filter Settings @ vrch.ai` node to your workflow.**
 
 2. **Configure Filter Parameters (inputs):**
-  - **`blur`**: Integer pixels (0–50) – matches `blur(px)`.
-  - **`brightness`**: Float (0.0–2.0) – 1.0 is neutral.
-  - **`contrast`**: Float (0.0–2.0) – 1.0 is neutral.
-  - **`grayscale`**: Float (0.0–1.0) – 0 is color, 1 is fully grayscale.
-  - **`hue_rotate`**: Integer degrees (0–360) – applied as CSS `hue-rotate()`.
-  - **`invert`**: Float (0.0–1.0) – 0 no invert, 1 full invert.
-  - **`saturate`**: Float (0.0–2.0) – 1.0 is neutral.
+  Order (updated): `opacity`, `brightness`, `contrast`, `saturate`, `hue_rotate`, `invert`, `sepia`, `blur`.
+  - **`opacity`**: Float (0.0–1.0) – 1.0 fully opaque.
+  - **`brightness`**: Float (0.0–2.0) – 1.0 neutral.
+  - **`contrast`**: Float (0.0–2.0) – 1.0 neutral.
+  - **`saturate`**: Float (0.0–2.0) – 1.0 neutral.
+  - **`hue_rotate`**: Integer degrees (0–360) – CSS `hue-rotate()`.
+  - **`invert`**: Float (0.0–1.0) – 0 none, 1 full invert.
   - **`sepia`**: Float (0.0–1.0) – 0 none, 1 full sepia.
-  - **`opacity`**: Float (0.0–1.0) – 1.0 is fully opaque.
+  - **`blur`**: Integer pixels (0–50) – `blur(px)`.
+  (Deprecated: `grayscale` has been removed.)
 
 3. **UI Convenience:**
   - A small green "Reset Filters" button (in the node UI) resets all parameters to their defaults.
@@ -194,15 +194,14 @@ Provides adjustable CSS image filter parameters as a JSON object for composition
     ```json
     {
       "filters": {
-        "blur": 0,
+        "opacity": 1.0,
         "brightness": 1.0,
         "contrast": 1.0,
-        "grayscale": 0.0,
+        "saturate": 1.0,
         "hueRotate": 0,
         "invert": 0.0,
-        "saturate": 1.0,
         "sepia": 0.0,
-        "opacity": 1.0
+        "blur": 0
       }
     }
     ```
@@ -212,8 +211,8 @@ Provides adjustable CSS image filter parameters as a JSON object for composition
   - Execute the settings node (with `send_settings=True`) to broadcast both regular settings and filters to the viewer.
 
 **Notes:**
-- The key names (`blur`, `brightness`, `contrast`, `grayscale`, `hueRotate`, `invert`, `saturate`, `sepia`) match the front‑end's `applyRemoteFilters()` expectations.
-- The key names (`blur`, `brightness`, `contrast`, `grayscale`, `hueRotate`, `invert`, `saturate`, `sepia`, `opacity`) match the front‑end's `applyRemoteFilters()` expectations.
+- The key names (`opacity`, `brightness`, `contrast`, `saturate`, `hueRotate`, `invert`, `sepia`, `blur`) match the front‑end's `applyRemoteFilters()` expectations.
+- Legacy workflows containing `grayscale` will ignore that value silently.
 - Values are clamped on the viewer side as a safety measure; staying within documented ranges ensures predictable results.
 - You can route this JSON through additional logic or merge nodes before feeding into the settings node to implement animations or dynamic modulation.
 

nodes/websocket_nodes.py

@@ -329,16 +329,17 @@ class VrchImageWebSocketFilterSettingsNode:
     def INPUT_TYPES(cls):
         return {
             "required": {
-                # Pure parameter node (no channel/server). Ranges mirror applyRemoteFilters().
-                "blur": ("INT", {"default": 0, "min": 0, "max": 50}),
+                # Reordered & streamlined (grayscale removed)
+                # New order requested:
+                # opacity, brightness, contrast, saturate, hueRotate, invert, sepia, blur
+                "opacity": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01}),
                 "brightness": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 2.0, "step": 0.01}),
                 "contrast": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 2.0, "step": 0.01}),
-                "grayscale": ("FLOAT", {"default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01}),
+                "saturate": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 2.0, "step": 0.01}),
                 "hue_rotate": ("INT", {"default": 0, "min": 0, "max": 360}),
                 "invert": ("FLOAT", {"default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01}),
-                "saturate": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 2.0, "step": 0.01}),
                 "sepia": ("FLOAT", {"default": 0.0, "min": 0.0, "max": 1.0, "step": 0.01}),
-                "opacity": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01}),
+                "blur": ("INT", {"default": 0, "min": 0, "max": 50}),
             }
         }
 
@@ -349,27 +350,31 @@ class VrchImageWebSocketFilterSettingsNode:
     CATEGORY = CATEGORY
 
     def build_filters_json(self,
-                           blur,
+                           opacity,
                            brightness,
                            contrast,
-                           grayscale,
+                           saturate,
                            hue_rotate,
                            invert,
-                           saturate,
                            sepia,
-                           opacity):
+                           blur,
+                           **legacy):
+        """Build the filters JSON.
+
+        Note: grayscale has been removed. Any legacy workflows providing a
+        grayscale positional/keyword argument will be ignored gracefully via **legacy.
+        """
         # Produce object matching previous spec {"filters": {...}} for backward compatibility
         payload = {
             "filters": {
-                "blur": int(blur),
+                "opacity": float(opacity),
                 "brightness": float(brightness),
                 "contrast": float(contrast),
-                "grayscale": float(grayscale),
+                "saturate": float(saturate),
                 "hueRotate": int(hue_rotate),
                 "invert": float(invert),
-                "saturate": float(saturate),
                 "sepia": float(sepia),
-                "opacity": float(opacity),
+                "blur": int(blur),
             }
         }
         return (payload,)

web/comfyui/websocket_nodes.js

@@ -295,27 +295,26 @@ app.registerExtension({
     name: "vrch.ImageWebSocketFilterSettings",
     async nodeCreated(node) {
         if (node.comfyClass === "VrchImageWebSocketFilterSettingsNode") {
+            // New order (grayscale removed): opacity, brightness, contrast, saturate, hue_rotate, invert, sepia, blur
             const widgetNames = [
-                "blur",
+                "opacity",
                 "brightness",
                 "contrast",
-                "grayscale",
+                "saturate",
                 "hue_rotate",
                 "invert",
-                "saturate",
                 "sepia",
-                "opacity"
+                "blur"
             ];
             const defaults = {
-                blur: 0,
+                opacity: 1.0,
                 brightness: 1.0,
                 contrast: 1.0,
-                grayscale: 0.0,
+                saturate: 1.0,
                 hue_rotate: 0,
                 invert: 0.0,
-                saturate: 1.0,
                 sepia: 0.0,
-                opacity: 1.0,
+                blur: 0,
             };
 
             // Create button container