From cede61be9baa17d592609b636c17239df73a75c2 Mon Sep 17 00:00:00 2001 From: AustinMroz Date: Mon, 9 Mar 2026 16:03:32 -0700 Subject: [PATCH] Use preview downscaling in fewer places (#9678) Thumbnail downscaling is currently being used in more places than it should be. - Nodes which display images will display incorrect resolution indicators image image This is particularly confusing with output nodes, which claim the output is not of the intended resolution - The "Download Image" and "Open Image" context menu actions will incorrectly download the downscaled thumbnail. - The assets panel will incorrectly display the thumbnail resolution as the resolution of the output - The lightbox (zoom) of an image will incorrectly display a downscaled thumbnail. This PR is a quick workaround to staunch the major problems - Nodes always display full previews. - Resolution downscaling is applied on the assert card, not on the assetItem itself - Due to implementation, this means that asset cards will still incorrectly show the resolution of the thumbnail instead of the size of the full image. --------- Co-authored-by: GitHub Action Co-authored-by: Alexander Brown --- src/extensions/core/imageCompare.ts | 2 -- src/platform/assets/components/MediaAssetCard.vue | 2 +- src/platform/assets/composables/media/assetMappers.ts | 7 +++++-- src/platform/assets/schemas/assetSchema.ts | 1 + src/platform/assets/utils/outputAssetUtil.ts | 3 ++- src/stores/nodeOutputStore.ts | 3 --- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/extensions/core/imageCompare.ts b/src/extensions/core/imageCompare.ts index de0ffa61c51..ca00ceb097c 100644 --- a/src/extensions/core/imageCompare.ts +++ b/src/extensions/core/imageCompare.ts @@ -1,6 +1,5 @@ import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode' import type { NodeOutputWith } from '@/schemas/apiSchema' -import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil' import { api } from '@/scripts/api' import { app } from '@/scripts/app' import { useExtensionService } from '@/services/extensionService' @@ -29,7 +28,6 @@ useExtensionService().registerExtension({ const toUrl = (record: Record) => { const params = new URLSearchParams(record) - appendCloudResParam(params, record.filename) return api.apiURL(`/view?${params}${rand}`) } diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue index 8f05cdfc828..6f58dc09af3 100644 --- a/src/platform/assets/components/MediaAssetCard.vue +++ b/src/platform/assets/components/MediaAssetCard.vue @@ -235,7 +235,7 @@ const adaptedAsset = computed(() => { id: asset.id, name: asset.name, kind: fileKind.value, - src: asset.preview_url || '', + src: asset.thumbnail_url || asset.preview_url || '', size: asset.size, tags: asset.tags || [], created_at: asset.created_at, diff --git a/src/platform/assets/composables/media/assetMappers.ts b/src/platform/assets/composables/media/assetMappers.ts index 096d9696ecf..24bc748ac88 100644 --- a/src/platform/assets/composables/media/assetMappers.ts +++ b/src/platform/assets/composables/media/assetMappers.ts @@ -44,7 +44,8 @@ export function mapTaskOutputToAssetItem( ? new Date(taskItem.executionStartTimestamp).toISOString() : new Date().toISOString(), tags: ['output'], - preview_url: output.previewUrl, + thumbnail_url: output.previewUrl, + preview_url: output.url, user_metadata: metadata } } @@ -62,6 +63,7 @@ export function mapInputFileToAssetItem( directory: 'input' | 'output' = 'input' ): AssetItem { const params = new URLSearchParams({ filename, type: directory }) + const preview_url = api.apiURL(`/view?${params}`) appendCloudResParam(params, filename) return { @@ -70,6 +72,7 @@ export function mapInputFileToAssetItem( size: 0, created_at: new Date().toISOString(), tags: [directory], - preview_url: api.apiURL(`/view?${params}`) + thumbnail_url: api.apiURL(`/view?${params}`), + preview_url } } diff --git a/src/platform/assets/schemas/assetSchema.ts b/src/platform/assets/schemas/assetSchema.ts index d6941e18cfa..32a5f0c650f 100644 --- a/src/platform/assets/schemas/assetSchema.ts +++ b/src/platform/assets/schemas/assetSchema.ts @@ -10,6 +10,7 @@ const zAsset = z.object({ tags: z.array(z.string()).optional().default([]), preview_id: z.string().nullable().optional(), preview_url: z.string().optional(), + thumbnail_url: z.string().optional(), created_at: z.string().optional(), updated_at: z.string().optional(), is_immutable: z.boolean().optional(), diff --git a/src/platform/assets/utils/outputAssetUtil.ts b/src/platform/assets/utils/outputAssetUtil.ts index 81e4d31fc30..6238e1adf21 100644 --- a/src/platform/assets/utils/outputAssetUtil.ts +++ b/src/platform/assets/utils/outputAssetUtil.ts @@ -72,7 +72,8 @@ function mapOutputsToAssetItems({ size: 0, created_at: createdAtValue, tags: ['output'], - preview_url: output.previewUrl, + thumbnail_url: output.previewUrl, + preview_url: output.url, user_metadata: { jobId, nodeId: output.nodeId, diff --git a/src/stores/nodeOutputStore.ts b/src/stores/nodeOutputStore.ts index aa576717e29..5d2d7ccaa40 100644 --- a/src/stores/nodeOutputStore.ts +++ b/src/stores/nodeOutputStore.ts @@ -10,7 +10,6 @@ import type { ResultItem, ResultItemType } from '@/schemas/apiSchema' -import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil' import { api } from '@/scripts/api' import { app } from '@/scripts/app' import { clone } from '@/scripts/utils' @@ -120,11 +119,9 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => { const rand = app.getRandParam() const previewParam = getPreviewParam(node, outputs) - const isImage = isImageOutputs(node, outputs) return outputs.images.map((image) => { const params = new URLSearchParams(image) - if (isImage) appendCloudResParam(params, image.filename) return api.apiURL(`/view?${params}${previewParam}${rand}`) }) }