From 3a2c2419c424f3949d9d44bc3ec52377faaf1ad6 Mon Sep 17 00:00:00 2001
From: solidlime <solidlime@gmail.com>
Date: Wed, 7 Jan 2026 22:06:30 +0900
Subject: [PATCH] UI: Completely hide image_data and add instant preview

Changes:
1. Complete widget hiding:
   - Added .hidden = true
   - Added setTimeout for reliability
   - Added serializeValue to preserve data

2. Instant preview on file load:
   - Create Image object from base64
   - Set node.imgs for preview display
   - Call setSizeForImage() and setDirtyCanvas()
   - Preview shows immediately without execution

Now has clean UI and instant visual feedback!
---
 web/random_image_picker.js | 33 ++++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/web/random_image_picker.js b/web/random_image_picker.js
index 65fa01b..4fef985 100644
--- a/web/random_image_picker.js
+++ b/web/random_image_picker.js
@@ -11,12 +11,16 @@ app.registerExtension({
                 const result = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
                 const node = this;
                 
-                // Hide image_data widget (it's auto-filled by file picker)
-                const imageDataWidget = node.widgets.find(w => w.name === "image_data");
-                if (imageDataWidget) {
-                    imageDataWidget.type = "converted-widget";
-                    imageDataWidget.computeSize = () => [0, -4]; // Hide it
-                }
+                // Completely hide image_data widget
+                setTimeout(() => {
+                    const imageDataWidget = node.widgets.find(w => w.name === "image_data");
+                    if (imageDataWidget) {
+                        imageDataWidget.type = "converted-widget";
+                        imageDataWidget.hidden = true;
+                        imageDataWidget.computeSize = () => [0, -4];
+                        imageDataWidget.serializeValue = () => imageDataWidget.value;
+                    }
+                }, 10);
                 
                 // Add file picker button
                 node.addWidget("button", "📁 Choose File", null, () => {
@@ -39,17 +43,20 @@ app.registerExtension({
                             reader.onload = (event) => {
                                 const base64Data = event.target.result;
                                 
-                                // Store image_data in node properties
-                                if (!node.properties) {
-                                    node.properties = {};
-                                }
-                                node.properties.image_data = base64Data;
-                                
-                                // Also try to set widget if it exists
+                                // Store image_data in widget
                                 let imageDataWidget = node.widgets.find(w => w.name === "image_data");
                                 if (imageDataWidget) {
                                     imageDataWidget.value = base64Data;
                                 }
+                                
+                                // Show instant preview
+                                const img = new Image();
+                                img.onload = () => {
+                                    node.imgs = [img];
+                                    node.setSizeForImage?.();
+                                    app.graph.setDirtyCanvas(true);
+                                };
+                                img.src = base64Data;
                             };
                             
                             reader.readAsDataURL(file);