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:
Dariusz L
2025-07-03 01:54:50 +02:00
parent 9e4da30b59
commit 3419061b6c
3 changed files with 89 additions and 9 deletions

View File

@@ -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);
});
}

View File

@@ -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;
}
}
}