From 1a5b28541863946c2b8304130aa6ba51bea04578 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 17 Jan 2026 07:47:43 +0000 Subject: [PATCH] Fix image history carousel by syncing IDs with saved filenames The save-generation API changed to use prompt+hash based filenames for deduplication, but the workflow store was still using timestamp-based IDs in imageHistory/videoHistory. This caused the carousel to fail loading images since the IDs didn't match the actual saved filenames. Now we capture the API response and update the history entry with the actual imageId returned by the save-generation endpoint. This is backward compatible - old workflows with timestamp-based filenames continue to work. --- src/store/workflowStore.ts | 138 ++++++++++++++++++++++++++++++++----- 1 file changed, 120 insertions(+), 18 deletions(-) diff --git a/src/store/workflowStore.ts b/src/store/workflowStore.ts index 78a5e240..b2ac19f9 100644 --- a/src/store/workflowStore.ts +++ b/src/store/workflowStore.ts @@ -1036,9 +1036,26 @@ export const useWorkflowStore = create((set, get) => ({ prompt: text, imageId, }), - }).catch((err) => { - console.error("Failed to save generation:", err); - }); + }) + .then((res) => res.json()) + .then((saveResult) => { + // Update imageHistory with actual saved ID for carousel loading + if (saveResult.success && saveResult.imageId && saveResult.imageId !== imageId) { + const currentNode = get().nodes.find((n) => n.id === node.id); + if (currentNode) { + const currentData = currentNode.data as NanoBananaNodeData; + const updatedHistory = [...(currentData.imageHistory || [])]; + const entryIndex = updatedHistory.findIndex((h) => h.id === imageId); + if (entryIndex !== -1) { + updatedHistory[entryIndex] = { ...updatedHistory[entryIndex], id: saveResult.imageId }; + updateNodeData(node.id, { imageHistory: updatedHistory }); + } + } + } + }) + .catch((err) => { + console.error("Failed to save generation:", err); + }); } } else { logger.error('api.error', `${provider} API generation failed`, { @@ -1238,9 +1255,26 @@ export const useWorkflowStore = create((set, get) => ({ prompt: text, imageId: videoId, }), - }).catch((err) => { - console.error("Failed to save video generation:", err); - }); + }) + .then((res) => res.json()) + .then((saveResult) => { + // Update videoHistory with actual saved ID for carousel loading + if (saveResult.success && saveResult.imageId && saveResult.imageId !== videoId) { + const currentNode = get().nodes.find((n) => n.id === node.id); + if (currentNode) { + const currentData = currentNode.data as GenerateVideoNodeData; + const updatedHistory = [...(currentData.videoHistory || [])]; + const entryIndex = updatedHistory.findIndex((h) => h.id === videoId); + if (entryIndex !== -1) { + updatedHistory[entryIndex] = { ...updatedHistory[entryIndex], id: saveResult.imageId }; + updateNodeData(node.id, { videoHistory: updatedHistory }); + } + } + } + }) + .catch((err) => { + console.error("Failed to save video generation:", err); + }); } } else if (result.success && result.image) { // Some models might return an image preview; treat as video for now @@ -1276,9 +1310,26 @@ export const useWorkflowStore = create((set, get) => ({ prompt: text, imageId: videoId, }), - }).catch((err) => { - console.error("Failed to save video generation:", err); - }); + }) + .then((res) => res.json()) + .then((saveResult) => { + // Update videoHistory with actual saved ID for carousel loading + if (saveResult.success && saveResult.imageId && saveResult.imageId !== videoId) { + const currentNode = get().nodes.find((n) => n.id === node.id); + if (currentNode) { + const currentData = currentNode.data as GenerateVideoNodeData; + const updatedHistory = [...(currentData.videoHistory || [])]; + const entryIndex = updatedHistory.findIndex((h) => h.id === videoId); + if (entryIndex !== -1) { + updatedHistory[entryIndex] = { ...updatedHistory[entryIndex], id: saveResult.imageId }; + updateNodeData(node.id, { videoHistory: updatedHistory }); + } + } + } + }) + .catch((err) => { + console.error("Failed to save video generation:", err); + }); } } else { logger.error('api.error', `${provider} API video generation failed`, { @@ -1765,9 +1816,26 @@ export const useWorkflowStore = create((set, get) => ({ prompt: text, imageId, }), - }).catch((err) => { - console.error("Failed to save generation:", err); - }); + }) + .then((res) => res.json()) + .then((saveResult) => { + // Update imageHistory with actual saved ID for carousel loading + if (saveResult.success && saveResult.imageId && saveResult.imageId !== imageId) { + const currentNode = get().nodes.find((n) => n.id === nodeId); + if (currentNode) { + const currentData = currentNode.data as NanoBananaNodeData; + const updatedHistory = [...(currentData.imageHistory || [])]; + const entryIndex = updatedHistory.findIndex((h) => h.id === imageId); + if (entryIndex !== -1) { + updatedHistory[entryIndex] = { ...updatedHistory[entryIndex], id: saveResult.imageId }; + updateNodeData(nodeId, { imageHistory: updatedHistory }); + } + } + } + }) + .catch((err) => { + console.error("Failed to save generation:", err); + }); } } else { updateNodeData(nodeId, { @@ -2021,9 +2089,26 @@ export const useWorkflowStore = create((set, get) => ({ prompt: text, imageId: videoId, }), - }).catch((err) => { - console.error("Failed to save video generation:", err); - }); + }) + .then((res) => res.json()) + .then((saveResult) => { + // Update videoHistory with actual saved ID for carousel loading + if (saveResult.success && saveResult.imageId && saveResult.imageId !== videoId) { + const currentNode = get().nodes.find((n) => n.id === nodeId); + if (currentNode) { + const currentData = currentNode.data as GenerateVideoNodeData; + const updatedHistory = [...(currentData.videoHistory || [])]; + const entryIndex = updatedHistory.findIndex((h) => h.id === videoId); + if (entryIndex !== -1) { + updatedHistory[entryIndex] = { ...updatedHistory[entryIndex], id: saveResult.imageId }; + updateNodeData(nodeId, { videoHistory: updatedHistory }); + } + } + } + }) + .catch((err) => { + console.error("Failed to save video generation:", err); + }); } } else if (result.success && result.image) { const timestamp = Date.now(); @@ -2058,9 +2143,26 @@ export const useWorkflowStore = create((set, get) => ({ prompt: text, imageId: videoId, }), - }).catch((err) => { - console.error("Failed to save video generation:", err); - }); + }) + .then((res) => res.json()) + .then((saveResult) => { + // Update videoHistory with actual saved ID for carousel loading + if (saveResult.success && saveResult.imageId && saveResult.imageId !== videoId) { + const currentNode = get().nodes.find((n) => n.id === nodeId); + if (currentNode) { + const currentData = currentNode.data as GenerateVideoNodeData; + const updatedHistory = [...(currentData.videoHistory || [])]; + const entryIndex = updatedHistory.findIndex((h) => h.id === videoId); + if (entryIndex !== -1) { + updatedHistory[entryIndex] = { ...updatedHistory[entryIndex], id: saveResult.imageId }; + updateNodeData(nodeId, { videoHistory: updatedHistory }); + } + } + } + }) + .catch((err) => { + console.error("Failed to save video generation:", err); + }); } } else { logger.error('api.error', `${provider} API video regeneration failed`, {