From a70901ea0be2c935340f002acdae8b95a9c4bbb1 Mon Sep 17 00:00:00 2001 From: zombieyang Date: Thu, 18 Jul 2024 12:53:37 +0800 Subject: [PATCH] feature: show ComfyProgress in photoshop --- javascript/sdppp-comfy.js | 23 ++++++++------ photoshop/dist/index.js | 41 ++++++++++++++++++++----- photoshop/src/panels/Main.jsx | 23 ++++++++++++-- photoshop/src/styles.css | 11 +++++-- photoshop/src/system/ComfyConnection.js | 3 ++ sdppp_python/apis.py | 8 +++++ 6 files changed, 88 insertions(+), 21 deletions(-) diff --git a/javascript/sdppp-comfy.js b/javascript/sdppp-comfy.js index a8fb5a5..2a939ea 100644 --- a/javascript/sdppp-comfy.js +++ b/javascript/sdppp-comfy.js @@ -9,7 +9,20 @@ let layerStrs = []; let boundsStrs = []; let setLayerStrs = []; - let socket = null; + let socket = socketio(location.origin, { + transports: ["websocket"], + path: '/sd-ppp/', + query: { + api_level: 2, + type: 'comfyui' + } + }); + api.addEventListener("progress", ({ detail }) => { + if (!detail || isNaN(detail.value / detail.max)) return; + socket.emit('c_progress', { + progress: Math.round(detail.value / detail.max * 100) + }); + }); console.log("[sd-ppp]", "Loading js extension"); const id = "Comfy.SD-PPP" @@ -42,14 +55,6 @@ }, async setup() { - socket = socketio(location.origin, { - transports: ["websocket"], - path: '/sd-ppp/', - query: { - api_level: 2, - type: 'comfyui' - } - }); socket.on('connect', () => { socket.emit('c_reset_changes'); diff --git a/photoshop/dist/index.js b/photoshop/dist/index.js index ff2a13b..f065be0 100644 --- a/photoshop/dist/index.js +++ b/photoshop/dist/index.js @@ -114,9 +114,20 @@ class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component { }); }); _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].onPageInstancesChange(data => { - this.setState({ - pageInstances: data.pages || [] - }); + if (data.pages) { + this.setState({ + pageInstances: data.pages || [] + }); + } else if (data.progress) { + this.state.pageInstances.forEach(instance => { + if (instance.sid == data.sid) { + instance.progress = data.progress == 100 ? 0 : data.progress; + } + }); + this.setState({ + pageInstances: this.state.pageInstances + }); + } }); uxp__WEBPACK_IMPORTED_MODULE_2__.storage.secureStorage.getItem('backendURL').then(value => { if (!value) return; @@ -167,13 +178,19 @@ class Main extends react__WEBPACK_IMPORTED_MODULE_0__.Component { return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("li", { key: item, className: "client-list-item" + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { + className: "client-list-item-left" }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-label", { class: "client-name" - }, item.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-link", { + }, item.name)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { + className: "client-list-item-right" + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-label", { + class: "client-progress" + }, item.progress ? `${item.progress}%` : ""), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("sp-link", { onClick: () => { _system_ComfyConnection__WEBPACK_IMPORTED_MODULE_1__["default"].instance?.pageInstanceRun(item.sid); } - }, item.type == "comfy" ? "Queue Prompt" : "Generate")); + }, item.type == "comfy" ? "Queue Prompt" : "Generate"))); }))); } } @@ -350,6 +367,9 @@ class ComfyConnection { socket.on('s_confirm', data => { this.serverType = data.server_type; }); + socket.on('c_progress', data => { + ComfyConnection._callPageInstancesChange(data); + }); setInterval(() => { socket.emit('b_get_pages', data => { ComfyConnection._callPageInstancesChange(data); @@ -5307,11 +5327,18 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.tabbar { justify-content: space-between; align-items: center; } -.client-list-item .client-name { +.client-list-item .client-list-item-left { margin-left: 5px; } -.client-list-item sp-link { +.client-list-item .client-progress { + margin-right: 5px; + text-align: right; + display: flex; + justify-content: end; +} +.client-list-item .client-list-item-right { margin-right: 10px; + display: flex; }`, ""]); // Exports /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); diff --git a/photoshop/src/panels/Main.jsx b/photoshop/src/panels/Main.jsx index 91bde6d..cc69ff6 100644 --- a/photoshop/src/panels/Main.jsx +++ b/photoshop/src/panels/Main.jsx @@ -22,7 +22,19 @@ export default class Main extends React.Component { }) }); ComfyConnection.onPageInstancesChange((data) => { - this.setState({ pageInstances: data.pages || [] }); + if (data.pages) { + this.setState({ pageInstances: data.pages || [] }); + + } else if (data.progress) { + this.state.pageInstances.forEach(instance => { + if (instance.sid == data.sid) { + instance.progress = data.progress == 100 ? 0 : data.progress; + } + }) + this.setState({ + pageInstances: this.state.pageInstances + }) + } }); storage.secureStorage.getItem('backendURL').then((value) => { if (!value) return @@ -84,8 +96,13 @@ export default class Main extends React.Component { this.state.pageInstances.map((item) => { return (
  • - {item.name} - { ComfyConnection.instance?.pageInstanceRun(item.sid) }}>{item.type == "comfy" ? "Queue Prompt" : "Generate"} +
    + {item.name} +
    +
    + {item.progress ? `${item.progress}%` : ""} + { ComfyConnection.instance?.pageInstanceRun(item.sid) }}>{item.type == "comfy" ? "Queue Prompt" : "Generate"} +
    • ) }) diff --git a/photoshop/src/styles.css b/photoshop/src/styles.css index a35a87f..8ae0ba3 100644 --- a/photoshop/src/styles.css +++ b/photoshop/src/styles.css @@ -51,9 +51,16 @@ justify-content: space-between; align-items: center; } -.client-list-item .client-name { +.client-list-item .client-list-item-left { margin-left: 5px; } -.client-list-item sp-link { +.client-list-item .client-progress { + margin-right: 5px; + text-align: right; + display: flex; + justify-content: end; +} +.client-list-item .client-list-item-right { margin-right: 10px; + display: flex; } \ No newline at end of file diff --git a/photoshop/src/system/ComfyConnection.js b/photoshop/src/system/ComfyConnection.js index bc8d6d5..f31a216 100644 --- a/photoshop/src/system/ComfyConnection.js +++ b/photoshop/src/system/ComfyConnection.js @@ -134,6 +134,9 @@ class ComfyConnection { socket.on('s_confirm', (data) => { this.serverType = data.server_type }) + socket.on('c_progress', (data) => { + ComfyConnection._callPageInstancesChange(data); + }) setInterval(() => { socket.emit('b_get_pages', (data) => { ComfyConnection._callPageInstancesChange(data); diff --git a/sdppp_python/apis.py b/sdppp_python/apis.py index e7ea5e6..031051d 100644 --- a/sdppp_python/apis.py +++ b/sdppp_python/apis.py @@ -163,4 +163,12 @@ def registerSocketEvents(sdppp, sio): async def c_reset_instance_name(sid, data): instance = sdppp.page_instances[sid] instance["name"] = data["name"] + + @sio.event + async def c_progress(sid, data): + photoshop_sid = sdppp.get_ps_instance().sid + await sio.emit('c_progress', { + 'progress': data['progress'], + 'sid': sid + }, to=photoshop_sid)