mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-24 14:02:11 -03:00
Add support for importing multiple latest images
Introduces a new backend route and method to fetch all images created since a given timestamp, and updates the frontend to import all new images as layers on auto-refresh. This improves workflow by allowing multiple images generated in a single execution to be imported at once, rather than only the most recent image.
This commit is contained in:
14
js/Canvas.js
14
js/Canvas.js
@@ -459,11 +459,17 @@ export class Canvas {
|
||||
|
||||
_addAutoRefreshToggle() {
|
||||
let autoRefreshEnabled = false;
|
||||
let lastExecutionStartTime = 0;
|
||||
|
||||
const handleExecutionStart = () => {
|
||||
lastExecutionStartTime = Date.now();
|
||||
log.debug(`Execution started, timestamp set to: ${lastExecutionStartTime}`);
|
||||
};
|
||||
|
||||
const handleExecutionSuccess = () => {
|
||||
if (autoRefreshEnabled) {
|
||||
log.info('Auto-refresh triggered, importing latest image.');
|
||||
this.importLatestImage();
|
||||
log.info('Auto-refresh triggered, importing latest images.');
|
||||
this.canvasIO.importLatestImages(lastExecutionStartTime);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -479,10 +485,12 @@ export class Canvas {
|
||||
}
|
||||
);
|
||||
|
||||
api.addEventListener('execution_start', handleExecutionStart);
|
||||
api.addEventListener('execution_success', handleExecutionSuccess);
|
||||
|
||||
this.node.onRemoved = useChainCallback(this.node.onRemoved, () => {
|
||||
log.info('Node removed, cleaning up auto-refresh listener.');
|
||||
log.info('Node removed, cleaning up auto-refresh listeners.');
|
||||
api.removeEventListener('execution_start', handleExecutionStart);
|
||||
api.removeEventListener('execution_success', handleExecutionSuccess);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -744,12 +744,7 @@ export class CanvasIO {
|
||||
img.src = result.image_data;
|
||||
});
|
||||
|
||||
await this.canvas.canvasLayers.addLayerWithImage(img, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: this.canvas.width,
|
||||
height: this.canvas.height,
|
||||
});
|
||||
await this.canvas.canvasLayers.addLayerWithImage(img, {}, 'fit');
|
||||
log.info("Latest image imported and placed on canvas successfully.");
|
||||
return true;
|
||||
} else {
|
||||
@@ -761,4 +756,39 @@ export class CanvasIO {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async importLatestImages(sinceTimestamp) {
|
||||
try {
|
||||
log.info(`Fetching latest images since ${sinceTimestamp}...`);
|
||||
const response = await fetch(`/layerforge/get-latest-images/${sinceTimestamp}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success && result.images && result.images.length > 0) {
|
||||
log.info(`Received ${result.images.length} new images, adding to canvas.`);
|
||||
|
||||
for (const imageData of result.images) {
|
||||
const img = new Image();
|
||||
await new Promise((resolve, reject) => {
|
||||
img.onload = resolve;
|
||||
img.onerror = reject;
|
||||
img.src = imageData;
|
||||
});
|
||||
await this.canvas.canvasLayers.addLayerWithImage(img, {}, 'fit');
|
||||
}
|
||||
log.info("All new images imported and placed on canvas successfully.");
|
||||
return true;
|
||||
|
||||
} else if (result.success) {
|
||||
log.info("No new images found since last generation.");
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
throw new Error(result.error || "Failed to fetch latest images.");
|
||||
}
|
||||
} catch (error) {
|
||||
log.error("Error importing latest images:", error);
|
||||
alert(`Failed to import latest images: ${error.message}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user