mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-11 16:10:05 +00:00
af5a72021b
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>
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
|
|
import type { NodeOutputWith } from '@/schemas/apiSchema'
|
|
import { api } from '@/scripts/api'
|
|
import { app } from '@/scripts/app'
|
|
import { useExtensionService } from '@/services/extensionService'
|
|
|
|
type ImageCompareOutput = NodeOutputWith<{
|
|
a_images?: Record<string, string>[]
|
|
b_images?: Record<string, string>[]
|
|
}>
|
|
|
|
useExtensionService().registerExtension({
|
|
name: 'Comfy.ImageCompare',
|
|
|
|
async nodeCreated(node: LGraphNode) {
|
|
if (node.constructor.comfyClass !== 'ImageCompare') return
|
|
|
|
const [oldWidth, oldHeight] = node.size
|
|
node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 350)])
|
|
|
|
const onExecuted = node.onExecuted
|
|
|
|
node.onExecuted = function (output: ImageCompareOutput) {
|
|
onExecuted?.call(this, output)
|
|
|
|
const { a_images: aImages, b_images: bImages } = output
|
|
const rand = app.getRandParam()
|
|
|
|
const toUrl = (record: Record<string, string>) => {
|
|
const params = new URLSearchParams(record)
|
|
return api.apiURL(`/view?${params}${rand}`)
|
|
}
|
|
|
|
const beforeImages =
|
|
aImages && aImages.length > 0 ? aImages.map(toUrl) : []
|
|
const afterImages =
|
|
bImages && bImages.length > 0 ? bImages.map(toUrl) : []
|
|
|
|
const widget = node.widgets?.find((w) => w.type === 'imagecompare')
|
|
|
|
if (widget) {
|
|
widget.value = { beforeImages, afterImages }
|
|
widget.callback?.(widget.value)
|
|
}
|
|
}
|
|
}
|
|
})
|