🎨 Auto enable unit on image upload (#1704)

Mikubill · Jun 25, 2023 · 95b0079 · 95b0079
1 parent 0b7f431
commit 95b0079
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/javascript/active_units.js b/javascript/active_units.js
@@ -19,12 +19,14 @@ onUiUpdate(() => {
     class GradioTab {
         constructor(tab) {
             this.enabledCheckbox = tab.querySelector('.cnet-unit-enabled input');
+            this.inputImage = tab.querySelector('.cnet-input-image-group .cnet-image input[type="file"]');
             const tabs = tab.parentNode;
             this.tabNav = tabs.querySelector('.tab-nav');
             this.tabIndex = childIndex(tab) - 1; // -1 because tab-nav is also at the same level.            
 
             this.attachEnabledButtonListener();
             this.attachTabNavChangeObserver();
+            this.attachImageUploadListener();
         }
 
         getTabNavButton() {
@@ -63,6 +65,14 @@ onUiUpdate(() => {
             });
             observer.observe(this.tabNav, { childList: true });
         }
+
+        attachImageUploadListener() {
+            this.inputImage.addEventListener('change', (event) => {
+                if (!event.target.files) return;
+                if (!this.enabledCheckbox.checked)
+                    this.enabledCheckbox.click();
+            });
+        }
     }
 
     gradioApp().querySelectorAll('.cnet-unit-tab').forEach(tab => {