From b1f802e6b5f1817fc8c8a779d33d9f29bb95aaaf Mon Sep 17 00:00:00 2001
From: AI Lab <129358391+1038lab@users.noreply.github.com>
Date: Sun, 5 Oct 2025 01:03:55 -0700
Subject: [PATCH] Add files via upload

---
 web/js/appearance.js  |  9 +++++++--
 web/js/colorWidget.js | 16 ++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/web/js/appearance.js b/web/js/appearance.js
index 0b32ba3..ca16e32 100644
--- a/web/js/appearance.js
+++ b/web/js/appearance.js
@@ -2,7 +2,7 @@ import { app } from "/scripts/app.js";
 
 const COLOR_THEMES = {
     segment: { nodeColor: "#222e40", nodeBgColor: "#364254", width: 340 },
-    utility: { nodeColor: "#2e3e57", nodeBgColor: "#4b5b73", width: 320 },
+    utility: { nodeColor: "#2e3e57", nodeBgColor: "#4b5b73", width: 300 },
 };
 
 const NODE_COLORS = {
@@ -40,9 +40,14 @@ const NODE_COLORS = {
     "AILab_CropObject": "utility",
     "AILab_ImageCompare": "utility",
     "AILab_ColorInput": "utility",
-    "AILab_ImageMaskResize": "utility",
+    "AILab_ReferenceLatentMask": "utility",
     "AILab_LamaRemover": "utility",
     "AILab_SDMatte": "utility",
+    "AILab_ImageResize": "utility",
+    "AILab_ImageToList": "utility",
+    "AILab_MaskToList": "utility",
+    "AILab_ImageMaskToList": "utility",
+    "AILab_ColorToMask": "utility",
 };
 
 function setNodeColors(node, theme) {
diff --git a/web/js/colorWidget.js b/web/js/colorWidget.js
index aaaaa3f..f1f2238 100644
--- a/web/js/colorWidget.js
+++ b/web/js/colorWidget.js
@@ -23,16 +23,16 @@ const getContrastTextColor = (hexColor) => {
 };
 
 const AILabColorWidget = {
-    COLOR: (key, val) => {
+    COLORCODE: (key, val) => {
         const widget = {};
         widget.y = 0;
         widget.name = key;
-        widget.type = 'COLOR';
+        widget.type = 'COLORCODE';
         widget.options = { default: '#222222' };
-        widget.value = typeof val === 'string' ? val : '#222222'; // validate incoming value
+        widget.value = typeof val === 'string' ? val : '#222222';
 
         widget.draw = function (ctx, node, widgetWidth, widgetY, height) {
-            const hide = this.type !== 'COLOR' && app.canvas.ds.scale > 0.5;
+            const hide = this.type !== 'COLORCODE' && app.canvas.ds.scale > 0.5;
             if (hide) {
                 return;
             }
@@ -66,7 +66,7 @@ const AILabColorWidget = {
             ctx.font = '12px sans-serif';
             ctx.textAlign = 'center';
 
-            const text = `background_color (${this.value})`;
+            const text = `${this.name} (${this.value})`;
             ctx.fillText(text, widgetWidth * 0.5, widgetY + height * 0.65);
         };
 
@@ -112,10 +112,10 @@ app.registerExtension({
 
     getCustomWidgets() {
         return {
-            COLOR: (node, inputName, inputData) => {
+            COLORCODE: (node, inputName, inputData) => {
                 return {
                     widget: node.addCustomWidget(
-                        AILabColorWidget.COLOR(inputName, inputData?.[1]?.default || '#222222')
+                        AILabColorWidget.COLORCODE(inputName, inputData?.[1]?.default || '#222222')
                     ),
                     minWidth: 150,
                     minHeight: 32,
@@ -123,4 +123,4 @@ app.registerExtension({
             }
         };
     }
-});
+});
\ No newline at end of file