From af5a72021b131ca2b26fef204d3dc03ad2664238 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 de0ffa61c5..ca00ceb097 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 fb38a1139e..2f515284fe 100644 --- a/src/platform/assets/components/MediaAssetCard.vue +++ b/src/platform/assets/components/MediaAssetCard.vue @@ -236,7 +236,7 @@ const adaptedAsset = computed(() => { name: asset.name, display_name: asset.display_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 2ce724d5dc..da468ca9b3 100644 --- a/src/platform/assets/composables/media/assetMappers.ts +++ b/src/platform/assets/composables/media/assetMappers.ts @@ -45,7 +45,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 } } @@ -63,6 +64,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 { @@ -71,6 +73,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 c13fc64528..9e34cc8c7d 100644 --- a/src/platform/assets/schemas/assetSchema.ts +++ b/src/platform/assets/schemas/assetSchema.ts @@ -11,6 +11,7 @@ const zAsset = z.object({ preview_id: z.string().nullable().optional(), display_name: z.string().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 3d25654c60..beab833bfc 100644 --- a/src/platform/assets/utils/outputAssetUtil.ts +++ b/src/platform/assets/utils/outputAssetUtil.ts @@ -73,7 +73,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 aa576717e2..5d2d7ccaa4 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}`) }) }