From 697ed678bc8b257c0b343a7caa5893e7823d4da2 Mon Sep 17 00:00:00 2001
From: zombieyang <zombieyang@tencent.com>
Date: Tue, 16 Jul 2024 18:50:04 +0800
Subject: [PATCH] feature: .ccx download button in ComfyUI

---
 javascript/sdppp-comfy.js | 28 ++++++++++++++++++++++++++--
 readme.md                 |  8 ++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/javascript/sdppp-comfy.js b/javascript/sdppp-comfy.js
index 154a305..9fc425e 100644
--- a/javascript/sdppp-comfy.js
+++ b/javascript/sdppp-comfy.js
@@ -1,3 +1,4 @@
+import { $el } from "../../../scripts/ui.js";
 
 (async function() {
 	if (typeof gradioApp != 'undefined') return;
@@ -12,8 +13,32 @@
 	let socket = null;
 	
 	console.log("[sd-ppp]", "Loading js extension");
+	const id = "Comfy.SD-PPP"
+	app.ui.settings.addSetting({
+		id,
+		name: "Download SD-PPP plugin",
+		type: (name, setter, value) => {
+			return $el("tr", [
+				$el("td", [
+					$el("label", {
+						for: id.replaceAll(".", "-"),
+						textContent: "Download SD-PPP plugin",
+					}),
+				]),
+				$el("td", [
+					$el("input", {
+						type: "button",
+						value: "Photoshop .ccx",
+						onclick: async () => {
+							location.href = "/extensions/sd-ppp/plugins/sd-ppp_PS.ccx"
+						},
+					})
+				])
+			])
+		}
+	})
 	app.registerExtension({
-		name: "Comfy.SD-PPP",
+		name: id,
 		init() {
 		},
 		async setup() {
@@ -86,7 +111,6 @@
 					if(onMouseEnter) await onMouseEnter.call(this, ...args);
 					this_handler.call(this);
 				}
-			
 			}
 		}
 	});
diff --git a/readme.md b/readme.md
index 751e77e..62569b8 100644
--- a/readme.md
+++ b/readme.md
@@ -24,10 +24,10 @@ this extension/custom_node is mainly focus on getting/sending picture from/to Ph
 
 2. install Photoshop plugin
     1. by CCX:
-        1. download `http://<your-comfy-url>/extensions/sd-ppp/plugins/sd-ppp_PS.ccx`.
-           > for example: `http://127.0.0.1:8188/extensions/sd-ppp/plugins/sd-ppp_PS.ccx`
-       
-        3. double click the `.ccx` file. OR rename it to `.zip` and extract it into photoshop's plugin directory [like this](https://github.com/zombieyang/sd-ppp/assets/5595819/a86862bb-1e4e-45cb-a869-5c08edad47a8).
+        1. download .ccx in ComfyUI's setting UI.
+
+            <img width=600 src="https://github.com/user-attachments/assets/26d108a1-cad3-46d1-ba7d-294a5e57c6d1" />
+        2. double click the `.ccx` file. OR rename it to `.zip` and extract it into photoshop's plugin directory [like this](https://github.com/zombieyang/sd-ppp/assets/5595819/a86862bb-1e4e-45cb-a869-5c08edad47a8).
     2. by UXP develop Tool (you can debug the code this way):
         1. clone this repository
         2. [optional] Run `npm install` and `npm build` in `photoshop` directory. (if you want to debug or modify the code)