diff --git a/CHANGELOG.md b/CHANGELOG.md index 1186f54..d278628 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## Unreleased -+ [优化] 画布多图生成结果合并为单个图片节点。 ++ [优化] 画布多图生成结果合并为单个图片节点，生成期间可展开查看每张图片的实时状态，优先展示最先成功的结果，并始终以已有图片内容为显示依据。 ## v0.14.0 - 2026-08-05 diff --git a/docs/content/docs/development/canvas-data-structure.mdx b/docs/content/docs/development/canvas-data-structure.mdx index 86979a7..ead847b 100644 --- a/docs/content/docs/development/canvas-data-structure.mdx +++ b/docs/content/docs/development/canvas-data-structure.mdx @@ -50,7 +50,7 @@ type CanvasConnection = { Node positions and sizes use canvas-world coordinates. Edges store only node IDs; their paths are calculated while rendering. Deleting a node removes its connected edges. -Common metadata includes content, prompt, status, generation mode, model, size, count, natural dimensions, image results, input order, `storageKey`, MIME type, and byte size. A multi-image generation remains one image node: `images` stores every result and `primaryImageId` selects the result mirrored by the node-level `content` and image metadata. Image and video `content` values are normally session-scoped `blob:` URLs; `storageKey` is the persistent identity. +Common metadata includes content, prompt, status, generation mode, model, size, count, natural dimensions, image results, input order, `storageKey`, MIME type, and byte size. A multi-image generation remains one image node: `images` creates all requested slots before generation starts and records each slot's `status`, `errorDetails`, and completed image data. `primaryImageId` selects the result mirrored by the node-level `content` and image metadata; the first successful slot becomes primary immediately. Image and video `content` values are normally session-scoped `blob:` URLs; `storageKey` is the persistent identity. ## Assistant sessions diff --git a/docs/content/docs/development/canvas-data-structure.zh-CN.mdx b/docs/content/docs/development/canvas-data-structure.zh-CN.mdx index d1daa73..c87fc87 100644 --- a/docs/content/docs/development/canvas-data-structure.zh-CN.mdx +++ b/docs/content/docs/development/canvas-data-structure.zh-CN.mdx @@ -79,6 +79,8 @@ type CanvasNodeData = { ```ts type CanvasNodeImage = { id: string; + status: "idle" | "success" | "loading" | "error"; + errorDetails?: string; content: string; storageKey: string; naturalWidth: number; @@ -115,7 +117,7 @@ type CanvasNodeMetadata = { - 视频节点：`content` 是当前可播放的视频 URL，通常是 `blob:` URL；`storageKey` 指向本地视频 Blob；`bytes/mimeType` 保存文件信息。 - 文本节点：`content` 保存文本内容；`fontSize` 保存字体大小；`prompt/status/errorDetails` 保存生成状态。 - 生成配置节点：`generationMode/model/size/count/inputOrder` 保存生成配置；`generationMode` 可选择文本、图片或视频；上游输入通过 `connections` 计算。 -- 多图图片节点：批量生成仍只保存为一个图片节点，`images` 记录全部结果，`primaryImageId` 指定由节点级 `content` 和图片元数据展示的主图；展开状态仅属于当前界面，不写入项目数据。 +- 多图图片节点：批量生成仍只保存为一个图片节点，请求开始前会在 `images` 中创建全部图片槽位，每个槽位通过 `status/errorDetails` 独立记录实时状态，成功后补充图片数据；最先成功的槽位会立即写入 `primaryImageId`，并由节点级 `content` 和图片元数据展示；展开状态仅属于当前界面，不写入项目数据。 ## 连线结构 diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx index 4b7f29d..245dba8 100644 --- a/docs/content/docs/progress/pending-test.mdx +++ b/docs/content/docs/progress/pending-test.mdx @@ -10,7 +10,7 @@ The current release needs manual verification in these areas: - English and Simplified Chinese switching across navigation, settings, titles, descriptions, Ant Design components, and persisted preferences. - Global Dropdown, Menu, Select, Cascader, and TreeSelect popup backgrounds, hover states, and selected states in both light and dark themes. - Canvas node resize stability, prompt scrolling, generated-prompt restoration, image editing, drag-and-drop references, and generation configuration. -- Multi-image canvas generation: generating N images should create one image node with exactly N stored results and one incoming connection; the collapsed count control should remain clearly legible over any image, hide the floating toolbar when clicked, and expand the N images upward and to the right; every secondary image should keep a clearly legible primary-image action visible in both themes, and clicking the empty canvas should collapse the group. +- Multi-image canvas generation: starting N images should immediately create one image node with N expandable slots and one incoming connection; each empty slot should independently show generating or failure while requests are running, every slot with image content should always display that image, and the first successful image should appear as the primary image immediately. The collapsed count control should remain clearly legible over any image, hide the floating toolbar when clicked, and expand the slots upward and to the right; every completed secondary image should keep a clearly legible primary-image action visible in both themes, and clicking the empty canvas should collapse the group. - Canvas Agent startup, MCP status, model and permission controls, approvals, version reporting, diagnostics, streaming responses, history consistency, multi-tab isolation, and local Skill management. - Agent header tabs in English and Chinese at different panel widths; labels should collapse to icons and counts before either edge is clipped. - Agent message layout, Markdown, code blocks, attachments, token statistics, progress timelines, command groups, and scroll-follow behavior. diff --git a/docs/content/docs/progress/pending-test.zh-CN.mdx b/docs/content/docs/progress/pending-test.zh-CN.mdx index 57bef17..3b2aa73 100644 --- a/docs/content/docs/progress/pending-test.zh-CN.mdx +++ b/docs/content/docs/progress/pending-test.zh-CN.mdx @@ -48,7 +48,7 @@ description: 当前版本已实现但仍需人工验证的变更项 - 画布节点提示词：图片等节点下方的提示词超过输入区域高度后，鼠标悬停在输入区域内滚动应查看提示词内容，不应缩放画布。 - 画布节点提示词回显：单图或多图生成完成后，切换选择生成结果的根节点及任一子节点，下方输入区域都应继续显示生成时的提示词；切换到其他节点再选回来后也不应清空。 - 画布生成配置：连接文本节点后连续点击生成（包含失败重试），组装提示词不应重复追加上游文本；在生图、文本、视频、音频之间切换时，实际请求应始终使用当前面板展示的对应类型模型。 -- 画布多图生成：生成 N 张图片后应只创建一个包含 N 张结果的图片节点，并且来源到结果只保留一条连线；收起状态下右上角应显示醒目的「N 张」数量提示，在任意图片背景上都清晰可辨；点击数量后，浮动工具条应暂时隐藏，主图与其余图片应从当前节点向右上方整齐展开且总数严格为 N；其余图片的「设为主图」应常驻显示，并在亮色、深色主题及不同图片背景上保持清晰；点击画布空白处应自动收起并恢复工具条。 +- 画布多图生成：开始生成 N 张图片后应立即创建一个包含 N 个可展开槽位的图片节点，并且来源到结果只保留一条连线；生成期间空槽位应独立显示生成中或失败，任何已有图片内容的槽位都必须始终显示图片，任意图片率先成功后应立即成为主图并展示，不等待其他请求完成；收起状态下右上角应显示醒目的「N 张」数量提示，在任意图片背景上都清晰可辨；点击数量后，浮动工具条应暂时隐藏，各图片槽位应从当前节点向右上方整齐展开；已成功图片的「设为主图」应常驻显示，并在亮色、深色主题及不同图片背景上保持清晰；点击画布空白处应自动收起并恢复工具条。 - 画布左侧元素列表：点击元素整行应平滑定位并选中对应节点；有内容的图片元素应显示预览按钮，点击后打开大图弹窗且不触发画布定位。 - 配置与用户偏好：导出 JSON 后应包含渠道、默认模型、生成偏好、提示词来源和 WebDAV 配置；在修改当前配置后重新导入该文件，应恢复导出时的设置，错误 JSON 文件应提示格式不正确。配置文件包含 API Key 和 WebDAV 凭据，不应公开分享。 - 模型渠道协议：渠道编辑可选择「火山方舟」并自动填入方舟接口地址；任意名称的生图模型应按方舟 JSON 格式提交参考图，任意名称的视频模型应按方舟任务格式提交和查询，不再依赖模型名包含 `doubao`、`seedream` 或 `seedance`；1080p 不应再因模型名包含 `fast` 被禁用，参考视频应允许最大 200MB、总像素 409600-8295044，并继续校验官方宽高、比例和时长限制。 diff --git a/web/src/components/canvas/canvas-node.tsx b/web/src/components/canvas/canvas-node.tsx index 16f890f..ee2aa24 100644 --- a/web/src/components/canvas/canvas-node.tsx +++ b/web/src/components/canvas/canvas-node.tsx @@ -563,7 +563,7 @@ function TextContent({ node, theme, isEditingContent, textareaRef, mentionRefere } function ImageNodeContent(props: NodeContentRendererProps) { - if (!props.node.metadata?.content) return ; + if (!props.node.metadata?.content && !props.isBatchRoot) return ; return ( 1; const primaryImageId = node.metadata?.primaryImageId || images[0]?.id; + const primaryImage = images.find((image) => image.id === primaryImageId); + const primaryContent = primaryImage?.content || node.metadata?.content; return ( @@ -645,13 +647,17 @@ function ImageContent({ .map((image, index) => onSetBatchPrimary?.(image.id)} />) : null}
- {node.title} event.preventDefault()} - className={`pointer-events-none block h-full w-full select-none ${node.metadata?.freeResize ? "object-fill" : "object-contain"}`} - /> + {primaryContent ? ( + {node.title} event.preventDefault()} + className={`pointer-events-none block h-full w-full select-none ${node.metadata?.freeResize ? "object-fill" : "object-contain"}`} + /> + ) : ( + + )}
{isBatchRoot ? ( + {image.content ? {node.title} : } + {image.content ? ( + + ) : null} + + ); +} + +function ImageSlotStatus({ image }: { image?: CanvasNodeImage }) { + const theme = canvasThemes[useThemeStore((state) => state.theme)]; + const { t } = useTranslation(); + const failed = image?.status === "error"; + return ( +
+ {failed ? {image.errorDetails || t("canvas.node.failed")} :
} + {!failed ? {t("canvas.node.generating")} : null}
); } diff --git a/web/src/lib/canvas/canvas-generation-helpers.ts b/web/src/lib/canvas/canvas-generation-helpers.ts index 53beab1..4e0f7a4 100644 --- a/web/src/lib/canvas/canvas-generation-helpers.ts +++ b/web/src/lib/canvas/canvas-generation-helpers.ts @@ -48,7 +48,7 @@ export async function hydrateCanvasImages(nodes: CanvasNodeData[]) { const content = node.metadata?.content; if ((node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio) && node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveMediaUrl(node.metadata.storageKey, content) } }; if (node.type !== CanvasNodeType.Image || !content) return node; - const images = await Promise.all((node.metadata.images || []).map(async (image) => ({ ...image, content: await resolveImageUrl(image.storageKey, image.content) }))); + const images = await Promise.all((node.metadata.images || []).map(async (image) => (image.content ? { ...image, content: await resolveImageUrl(image.storageKey, image.content) } : image))); if (node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveImageUrl(node.metadata.storageKey, content), images } }; if (!content.startsWith("data:image/")) return node; return { ...node, metadata: { ...node.metadata, ...imageMetadata(await uploadImage(content)) } }; @@ -112,7 +112,19 @@ export function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | u } export function resetInterruptedGeneration(nodes: CanvasNodeData[]) { - return nodes.map((node) => (node.metadata?.status === "loading" ? { ...node, metadata: { ...node.metadata, status: "error" as const, errorDetails: i18n.t("canvas.generation.interrupted") } } : node)); + return nodes.map((node) => + node.metadata?.status === "loading" + ? { + ...node, + metadata: { + ...node.metadata, + status: "error" as const, + errorDetails: i18n.t("canvas.generation.interrupted"), + images: node.metadata.images?.map((image) => (image.status === "loading" ? { ...image, status: "error" as const, errorDetails: i18n.t("canvas.generation.interrupted") } : image)), + }, + } + : node, + ); } export function isGenerationCanceled(error: unknown) { diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx index 5f0e819..3d3d686 100644 --- a/web/src/pages/canvas/project.tsx +++ b/web/src/pages/canvas/project.tsx @@ -293,8 +293,14 @@ function InfiniteCanvasPage() { }); setRunningNodeId((current) => (current === runningId ? null : current)); if (!affectedNodeIds.size) return; - setNodes((prev) => prev.map((node) => (affectedNodeIds.has(node.id) && node.metadata?.status === NODE_STATUS_LOADING ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_IDLE, errorDetails: undefined } } : node))); - }, []); + setNodes((prev) => + prev.map((node) => + affectedNodeIds.has(node.id) && node.metadata?.status === NODE_STATUS_LOADING + ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_IDLE, errorDetails: undefined, images: node.metadata.images?.map((image) => (image.status === NODE_STATUS_LOADING ? { ...image, status: NODE_STATUS_ERROR, errorDetails: t("common.requestCanceled") } : image)) } } + : node, + ), + ); + }, [t]); const confirmStopGeneration = useCallback( (nodeId: string) => { @@ -1454,7 +1460,7 @@ function InfiniteCanvasPage() { prev.map((node) => { if (node.id !== nodeId) return node; const image = node.metadata?.images?.find((item) => item.id === imageId); - if (!image) return node; + if (!image?.content) return node; const size = fitNodeSize(image.naturalWidth, image.naturalHeight); return { ...node, @@ -2063,7 +2069,7 @@ function InfiniteCanvasPage() { metadata: { prompt: effectivePrompt, status: NODE_STATUS_LOADING, - images: [], + images: imageIds.map((id) => ({ id, status: NODE_STATUS_LOADING, content: "", storageKey: "", naturalWidth: 0, naturalHeight: 0, bytes: 0, mimeType: "" })), ...generationMetadata, }, }; @@ -2119,11 +2125,11 @@ function InfiniteCanvasPage() { : await requestGeneration({ ...generationConfig, count: "1" }, effectivePrompt, { signal: controller.signal }).then((items) => items[0]); const uploaded = await uploadImage(image.dataUrl); const imageSize = fitNodeSize(uploaded.width, uploaded.height, imageConfig.width, imageConfig.height); - const item: CanvasNodeImage = { id: imageId, content: uploaded.url, storageKey: uploaded.storageKey, naturalWidth: uploaded.width, naturalHeight: uploaded.height, bytes: uploaded.bytes, mimeType: uploaded.mimeType }; + const item: CanvasNodeImage = { id: imageId, status: NODE_STATUS_SUCCESS, content: uploaded.url, storageKey: uploaded.storageKey, naturalWidth: uploaded.width, naturalHeight: uploaded.height, bytes: uploaded.bytes, mimeType: uploaded.mimeType }; setNodes((prev) => prev.map((node) => { if (node.id !== rootId) return node; - const images = [...(node.metadata?.images || []), item].sort((a, b) => imageIds.indexOf(a.id) - imageIds.indexOf(b.id)); + const images = node.metadata?.images?.map((image) => (image.id === imageId ? item : image)) || []; if (node.metadata?.primaryImageId) return { ...node, metadata: { ...node.metadata, images } }; const center = { x: node.position.x + node.width / 2, y: node.position.y + node.height / 2 }; return { @@ -2152,6 +2158,7 @@ function InfiniteCanvasPage() { const errorDetails = error instanceof Error ? error.message : t("canvas.projectPage.generationFailed"); if (!firstError) firstError = errorDetails; hasFailure = true; + setNodes((prev) => prev.map((node) => (node.id === rootId ? { ...node, metadata: { ...node.metadata, images: node.metadata?.images?.map((image) => (image.id === imageId ? { ...image, status: NODE_STATUS_ERROR, errorDetails } : image)) } } : node))); } return false; }), @@ -2456,6 +2463,7 @@ function InfiniteCanvasPage() { const imageSize = fitNodeSize(uploadedImage.width, uploadedImage.height, imageConfig.width, imageConfig.height); const retryImage: CanvasNodeImage = { id: node.metadata?.primaryImageId || nanoid(), + status: NODE_STATUS_SUCCESS, content: uploadedImage.url, storageKey: uploadedImage.storageKey, naturalWidth: uploadedImage.width, diff --git a/web/src/types/canvas.ts b/web/src/types/canvas.ts index 880055d..b12aae8 100644 --- a/web/src/types/canvas.ts +++ b/web/src/types/canvas.ts @@ -27,6 +27,8 @@ export type CanvasImageGenerationType = "generation" | "edit"; export type CanvasNodeImage = { id: string; + status: CanvasNodeStatus; + errorDetails?: string; content: string; storageKey: string; naturalWidth: number;