Fix #20 and adapt to newest version of ControlNet

miniPaint/package-lock.json

@@ -31,8 +31,8 @@
         "css-loader": "^5.2.6",
         "source-map-loader": "^3.0.0",
         "style-loader": "^2.0.0",
-        "webpack": "^5.94.0",
+        "webpack": "^5.95.0",
-        "webpack-cli": "^4.7.2",
+        "webpack-cli": "^4.10.0",
         "webpack-dev-server": "^4.3.1"
       }
     },
@@ -5787,10 +5787,11 @@
       "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
     },
     "node_modules/webpack": {
-      "version": "5.94.0",
+      "version": "5.95.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
-      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
@@ -5837,6 +5838,7 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
       "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.2.0",
@@ -10451,9 +10453,9 @@
       "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
     },
     "webpack": {
-      "version": "5.94.0",
+      "version": "5.95.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
-      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "requires": {
         "@types/estree": "^1.0.5",

miniPaint/package.json

@@ -29,8 +29,8 @@
     "css-loader": "^5.2.6",
     "source-map-loader": "^3.0.0",
     "style-loader": "^2.0.0",
-    "webpack": "^5.94.0",
+    "webpack": "^5.95.0",
-    "webpack-cli": "^4.7.2",
+    "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.3.1"
   },
   "dependencies": {

miniPaint/src/js/modules/file/send.js

@@ -8,6 +8,7 @@ import File_open_class from './open.js';
 import Helper_class from './../../libs/helpers.js';
 
 var instance = null;
+let isForge = false
 
 /** 
  * manages sending files to other tabs
@@ -29,9 +30,10 @@ class File_send_class {
 		this.Helper = new Helper_class();
 		window.parent.a1111minipaint.recieve = this.recieveImage
 		window.parent.a1111minipaint.createSendButton = this.createSendToMiniPaintButton
+		isForge = window.parent.gradio_config.version >= "4.0.0"
 	}
 
-	
+
 
 	dataURLtoFile(dataurl, filename) {
 		var arr = dataurl.split(','),
@@ -47,13 +49,22 @@ class File_send_class {
 		return new File([u8arr], filename, { type: mime });
 	}
 	updateGradioImage(element, dt) {
-		let clearButton = element.querySelector("button[aria-label='Clear']");
+		let clearButton;
+		if (isForge) {
+			clearButton = element.querySelector('button.forge-btn[title="Remove"]');
+		} else {
+			clearButton = element.querySelector("button[aria-label='Remove Image']");
+		}
 
 		if (clearButton) {
 			clearButton.click();
 		}
-
+		let input;
-		const input = element.querySelector("input[type='file']");
+		if (isForge) {
+			input = element.querySelector("input.forge-file-upload[type='file']");
+		} else {
+			input = element.querySelector("input[type='file']");
+		}
 		input.value = ''
 		input.files = dt.files
 		input.dispatchEvent(
@@ -80,11 +91,17 @@ class File_send_class {
 			window.parent.switch_to_inpaint();
 		}
 
-		let container = window.parent.gradioApp().querySelector(selector);
+		let container;
-
+		let imageElems;
-		const imageElems = container.querySelectorAll('div[data-testid="image"]')
+		if (isForge) {
-
+			container = window.parent.gradioApp().querySelector("#" + type + "_tab");
-		this.updateGradioImage(imageElems[0], dt);
+			imageElems = container.querySelectorAll('div.forge-container')[0];
+			this.updateGradioImage(imageElems, dt);
+		} else {
+			container = window.parent.gradioApp().querySelector(selector);
+			imageElems = container.querySelectorAll('div[data-testid="image"]');
+			this.updateGradioImage(imageElems[0], dt);
+		};
 	}
 
 	async sendImageCanvasEditorControlNet(type, index) {
@@ -124,42 +141,54 @@ class File_send_class {
 				return
 			}
 		}
+		let imageElems = element.querySelectorAll('div[data-testid="image"]')
+		if (isForge) {
+			if (!imageElems[Number(index)]) {
+				let accordion = element.querySelector('.icon');
+				if (accordion) {
+					accordion.click();
+				}
+			}
+			imageElems = Array.from(window.parent.gradioApp().querySelector(selector).querySelector("#controlnet").querySelectorAll('[id]')).filter(el =>
+				el.id.match(new RegExp(String.raw`^${type}_controlnet_ControlNet-\d+_input_image$`, "g")))[index];
+			this.updateGradioImage(imageElems, dt);
+		}
+		else {
+			let _this = this
+			if (!imageElems[Number(index)]) {
+				let accordion = element.querySelector('.icon');
 
-		const imageElems = element.querySelectorAll('div[data-testid="image"]')
+				if (accordion) {
-		let _this = this
+					accordion.click();
-		if (!imageElems[Number(index)]) {
-			let accordion = element.querySelector('.icon');
 
-			if (accordion) {
+					let controlNetAppeared = false;
-				accordion.click();
 
-				let controlNetAppeared = false;
+					let observer = new MutationObserver(function (mutations) {
+						mutations.forEach(function (mutation) {
+							if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+								for (let i = 0; i < mutation.addedNodes.length; i++) {
+									if (mutation.addedNodes[i].tagName === "INPUT") {
 
-				let observer = new MutationObserver(function (mutations) {
+										controlNetAppeared = true;
-					mutations.forEach(function (mutation) {
-						if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-							for (let i = 0; i < mutation.addedNodes.length; i++) {
-								if (mutation.addedNodes[i].tagName === "INPUT") {
 
-									controlNetAppeared = true;
+										const imageElems2 = element.querySelectorAll('div[data-testid="image"]');
 
-									const imageElems2 = element.querySelectorAll('div[data-testid="image"]');
+										_this.updateGradioImage(imageElems2[Number(index)], dt);
 
-									_this.updateGradioImage(imageElems2[Number(index)], dt);
+										observer.disconnect();
 
-									observer.disconnect();
+										return;
-
+									}
-									return;
 								}
 							}
-						}
+						});
 					});
-				});
 
-				observer.observe(element, { childList: true, subtree: true });
+					observer.observe(element, { childList: true, subtree: true });
+				}
+			} else {
+				this.updateGradioImage(imageElems[Number(index * 4)], dt);
 			}
-		} else {
-			this.updateGradioImage(imageElems[Number(index*2)], dt);
 		}
 
 	};
@@ -201,28 +230,40 @@ class File_send_class {
 		this.POP.show(settings);
 	}
 
-	async GUISendExtras(){
+	async GUISendExtras() {
 		const imageDataURL = await this.Saver.export_data_url();
 		var file = this.dataURLtoFile(imageDataURL, 'image.png');
 		const dt = new DataTransfer();
 		dt.items.add(file);
 		let container = window.parent.gradioApp().querySelector("#extras_image");
-		const imageElems = container.querySelectorAll('div[data-testid="image"]')
+		let imageElems;
-		this.updateGradioImage(imageElems[0], dt);
+		if (isForge) {
-		window.parent.switch_to_extras()
+			imageElems = container.querySelectorAll('div.forge-container')[0];
+			window.parent.switch_to_extras()
+			this.updateGradioImage(imageElems, dt);
+		} else {
+			imageElems = container.querySelectorAll('div[data-testid="image"]')
+			window.parent.switch_to_extras()
+			this.updateGradioImage(imageElems[0], dt);
+		}
 	}
 
 	createSendToMiniPaintButton(queryId, gallery) {
 		var existingButton = window.parent.gradioApp().querySelector(`#${queryId} button`);
 		const FSC = new File_send_class();
-		const addButton = () => {FSC.recieveImage(gallery)}
+		const addButton = () => { FSC.recieveImage(gallery) }
-		if (window.parent.gradioApp().querySelector(`#${queryId}_open_in_minipaint`) == null){
+		if (window.parent.gradioApp().querySelector(`#${queryId}_open_in_minipaint`) == null) {
 			const newButton = existingButton.cloneNode(true);
 			newButton.id = `${queryId}_open_in_minipaint`;
 			newButton.textContent = "✏️";
-			newButton.title= "Send image to miniPaint tab.";
+			newButton.title = "Send image to miniPaint tab.";
 			newButton.addEventListener("click", addButton);
-			window.parent.gradioApp().querySelector(`#${queryId} .form`).appendChild(newButton);
+			if (isForge) {
+				window.parent.gradioApp().querySelector(`#${queryId}`).appendChild(newButton);
+			}
+			else {
+				window.parent.gradioApp().querySelector(`#${queryId} .form`).appendChild(newButton);
+			}
 		}
 		else {
 			existingButton = window.parent.gradioApp().querySelector(`#${queryId}_open_in_minipaint`);