mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-21 20:52:12 -03:00
Add WebSocket-based RAM output for CanvasNode
Introduces a WebSocket-based mechanism for CanvasNode to send and receive canvas image and mask data in RAM, enabling fast, diskless data transfer between frontend and backend. Adds a new WebSocketManager utility, updates CanvasIO to support RAM output mode, and modifies CanvasView to send canvas data via WebSocket before prompt execution. The backend (canvas_node.py) is updated to handle WebSocket data storage and retrieval, with improved locking and cleanup logic. This change improves workflow speed and reliability by avoiding unnecessary disk I/O and ensuring up-to-date canvas data is available during node execution.
This commit is contained in:
Dariusz L
@@ -125,12 +125,29 @@ export function cloneLayers(layers) {
|
||||
* @returns {string} Sygnatura JSON
|
||||
*/
|
||||
export function getStateSignature(layers) {
|
||||
return JSON.stringify(layers.map(layer => {
|
||||
const sig = {...layer};
|
||||
if (sig.imageId) {
|
||||
sig.imageId = sig.imageId;
|
||||
return JSON.stringify(layers.map((layer, index) => {
|
||||
const sig = {
|
||||
index: index,
|
||||
x: Math.round(layer.x * 100) / 100, // Round to avoid floating point precision issues
|
||||
y: Math.round(layer.y * 100) / 100,
|
||||
width: Math.round(layer.width * 100) / 100,
|
||||
height: Math.round(layer.height * 100) / 100,
|
||||
rotation: Math.round((layer.rotation || 0) * 100) / 100,
|
||||
zIndex: layer.zIndex,
|
||||
blendMode: layer.blendMode || 'normal',
|
||||
opacity: layer.opacity !== undefined ? Math.round(layer.opacity * 100) / 100 : 1
|
||||
};
|
||||
|
||||
// Include imageId if available
|
||||
if (layer.imageId) {
|
||||
sig.imageId = layer.imageId;
|
||||
}
|
||||
delete sig.image;
|
||||
|
||||
// Include image src as fallback identifier
|
||||
if (layer.image && layer.image.src) {
|
||||
sig.imageSrc = layer.image.src.substring(0, 100); // First 100 chars to avoid huge signatures
|
||||
}
|
||||
|
||||
return sig;
|
||||
}));
|
||||
}
|
||||
|
||||
160
js/utils/WebSocketManager.js
Normal file
160
js/utils/WebSocketManager.js
Normal file
@@ -0,0 +1,160 @@
|
||||
import {createModuleLogger} from "./LoggerUtils.js";
|
||||
|
||||
const log = createModuleLogger('WebSocketManager');
|
||||
|
||||
class WebSocketManager {
|
||||
constructor(url) {
|
||||
this.url = url;
|
||||
this.socket = null;
|
||||
this.messageQueue = [];
|
||||
this.isConnecting = false;
|
||||
this.reconnectAttempts = 0;
|
||||
this.maxReconnectAttempts = 10;
|
||||
this.reconnectInterval = 5000; // 5 seconds
|
||||
this.ackCallbacks = new Map(); // Store callbacks for messages awaiting ACK
|
||||
this.messageIdCounter = 0;
|
||||
|
||||
this.connect();
|
||||
}
|
||||
|
||||
connect() {
|
||||
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
|
||||
log.debug("WebSocket is already open.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isConnecting) {
|
||||
log.debug("Connection attempt already in progress.");
|
||||
return;
|
||||
}
|
||||
|
||||
this.isConnecting = true;
|
||||
log.info(`Connecting to WebSocket at ${this.url}...`);
|
||||
|
||||
try {
|
||||
this.socket = new WebSocket(this.url);
|
||||
|
||||
this.socket.onopen = () => {
|
||||
this.isConnecting = false;
|
||||
this.reconnectAttempts = 0;
|
||||
log.info("WebSocket connection established.");
|
||||
this.flushMessageQueue();
|
||||
};
|
||||
|
||||
this.socket.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
log.debug("Received message:", data);
|
||||
|
||||
if (data.type === 'ack' && data.nodeId) {
|
||||
const callback = this.ackCallbacks.get(data.nodeId);
|
||||
if (callback) {
|
||||
log.debug(`ACK received for nodeId: ${data.nodeId}, resolving promise.`);
|
||||
callback.resolve(data);
|
||||
this.ackCallbacks.delete(data.nodeId);
|
||||
}
|
||||
}
|
||||
// Handle other incoming messages if needed
|
||||
} catch (error) {
|
||||
log.error("Error parsing incoming WebSocket message:", error);
|
||||
}
|
||||
};
|
||||
|
||||
this.socket.onclose = (event) => {
|
||||
this.isConnecting = false;
|
||||
if (event.wasClean) {
|
||||
log.info(`WebSocket closed cleanly, code=${event.code}, reason=${event.reason}`);
|
||||
} else {
|
||||
log.warn("WebSocket connection died. Attempting to reconnect...");
|
||||
this.handleReconnect();
|
||||
}
|
||||
};
|
||||
|
||||
this.socket.onerror = (error) => {
|
||||
this.isConnecting = false;
|
||||
log.error("WebSocket error:", error);
|
||||
// The onclose event will be fired next, which will handle reconnection.
|
||||
};
|
||||
} catch (error) {
|
||||
this.isConnecting = false;
|
||||
log.error("Failed to create WebSocket connection:", error);
|
||||
this.handleReconnect();
|
||||
}
|
||||
}
|
||||
|
||||
handleReconnect() {
|
||||
if (this.reconnectAttempts < this.maxReconnectAttempts) {
|
||||
this.reconnectAttempts++;
|
||||
log.info(`Reconnect attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts}...`);
|
||||
setTimeout(() => this.connect(), this.reconnectInterval);
|
||||
} else {
|
||||
log.error("Max reconnect attempts reached. Giving up.");
|
||||
}
|
||||
}
|
||||
|
||||
sendMessage(data, requiresAck = false) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const nodeId = data.nodeId;
|
||||
if (requiresAck && !nodeId) {
|
||||
return reject(new Error("A nodeId is required for messages that need acknowledgment."));
|
||||
}
|
||||
|
||||
const message = JSON.stringify(data);
|
||||
|
||||
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
|
||||
this.socket.send(message);
|
||||
log.debug("Sent message:", data);
|
||||
if (requiresAck) {
|
||||
log.debug(`Message for nodeId ${nodeId} requires ACK. Setting up callback.`);
|
||||
// Set a timeout for the ACK
|
||||
const timeout = setTimeout(() => {
|
||||
this.ackCallbacks.delete(nodeId);
|
||||
reject(new Error(`ACK timeout for nodeId ${nodeId}`));
|
||||
log.warn(`ACK timeout for nodeId ${nodeId}.`);
|
||||
}, 10000); // 10-second timeout
|
||||
|
||||
this.ackCallbacks.set(nodeId, {
|
||||
resolve: (responseData) => {
|
||||
clearTimeout(timeout);
|
||||
resolve(responseData);
|
||||
},
|
||||
reject: (error) => {
|
||||
clearTimeout(timeout);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
resolve(); // Resolve immediately if no ACK is needed
|
||||
}
|
||||
} else {
|
||||
log.warn("WebSocket not open. Queuing message.");
|
||||
// Note: The current queueing doesn't support ACK promises well.
|
||||
// For simplicity, we'll focus on the connected case.
|
||||
// A more robust implementation would wrap the queued message in a function.
|
||||
this.messageQueue.push(message);
|
||||
if (!this.isConnecting) {
|
||||
this.connect();
|
||||
}
|
||||
// For now, we reject if not connected and ACK is required.
|
||||
if (requiresAck) {
|
||||
reject(new Error("Cannot send message with ACK required while disconnected."));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
flushMessageQueue() {
|
||||
log.debug(`Flushing ${this.messageQueue.length} queued messages.`);
|
||||
// Note: This simple flush doesn't handle ACKs for queued messages.
|
||||
// This should be acceptable as data is sent right before queueing a prompt,
|
||||
// at which point the socket should ideally be connected.
|
||||
while (this.messageQueue.length > 0) {
|
||||
const message = this.messageQueue.shift();
|
||||
this.socket.send(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create a singleton instance of the WebSocketManager
|
||||
const wsUrl = `ws://${window.location.host}/layerforge/canvas_ws`;
|
||||
export const webSocketManager = new WebSocketManager(wsUrl);
|
||||
Reference in New Issue
Block a user