nodes/zombieyang-sd-ppp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: show ComfyProgress in photoshop

Browse Source
This commit is contained in:
zombieyang
2024-07-18 12:53:37 +08:00
parent 0372de681d
commit a70901ea0b
6 changed files with 88 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/sdppp-comfy.js
+14 -9
View File
@@ -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');
photoshop/dist/index.js
Vendored
+34 -7
View File
@@ -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___);
photoshop/src/panels/Main.jsx
+20 -3
View File
@@ -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 (
<li key={item} className="client-list-item">
<sp-label class="client-name">{item.name}</sp-label>
<sp-link onClick={() => { ComfyConnection.instance?.pageInstanceRun(item.sid) }}>{item.type == "comfy" ? "Queue Prompt" : "Generate"}</sp-link>
<div className="client-list-item-left">
<sp-label class="client-name">{item.name}</sp-label>
</div>
<div className="client-list-item-right">
<sp-label class="client-progress">{item.progress ? `${item.progress}%` : ""}</sp-label>
<sp-link onClick={() => { ComfyConnection.instance?.pageInstanceRun(item.sid) }}>{item.type == "comfy" ? "Queue Prompt" : "Generate"}</sp-link>
</div>
</li>
)
})
photoshop/src/styles.css
+9 -2
View File
@@ -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;
}
photoshop/src/system/ComfyConnection.js
+3
View File
@@ -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);
sdppp_python/apis.py
+8
View File
@@ -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)