mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-11 08:00:21 +00:00
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 <img width="255" height="372" alt="image" src="https://github.com/user-attachments/assets/674790b6-04c8-4db0-84c2-2fa2dbaf123d" /> <img width="255" height="372" alt="image" src="https://github.com/user-attachments/assets/1dbe751b-7462-4408-9236-9446b005f5fc" /> 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 <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -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<string, string>) => {
|
||||
const params = new URLSearchParams(record)
|
||||
appendCloudResParam(params, record.filename)
|
||||
return api.apiURL(`/view?${params}${rand}`)
|
||||
}
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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(),
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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}`)
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user