mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-14 17:37:46 +00:00
feat: add batch image navigation to ImageCompare node (#9151)
## Summary Add batch image navigation to the ImageCompare node so users can browse all images in a batch instead of only seeing the first one. ## Changes The backend already returns all batch images in a_images/b_images arrays, but the frontend only used index [0]. Now all images are mapped to URLs and a navigation bar with prev/next controls appears above the comparison slider when either side has more than one image. A/B sides navigate independently. Extracted a reusable BatchNavigation component for the index selector UI. fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/9098 ## Screenshots (if applicable) https://github.com/user-attachments/assets/a801cc96-9182-4b0d-a342-4e6107290f47 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9151-feat-add-batch-image-navigation-to-ImageCompare-node-3116d73d365081498be6d401773619a3) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -26,22 +26,18 @@ useExtensionService().registerExtension({
|
||||
const { a_images: aImages, b_images: bImages } = output
|
||||
const rand = app.getRandParam()
|
||||
|
||||
const beforeUrl =
|
||||
aImages && aImages.length > 0
|
||||
? api.apiURL(`/view?${new URLSearchParams(aImages[0])}${rand}`)
|
||||
: ''
|
||||
const afterUrl =
|
||||
bImages && bImages.length > 0
|
||||
? api.apiURL(`/view?${new URLSearchParams(bImages[0])}${rand}`)
|
||||
: ''
|
||||
const toUrl = (params: Record<string, string>) =>
|
||||
api.apiURL(`/view?${new URLSearchParams(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 = {
|
||||
before: beforeUrl,
|
||||
after: afterUrl
|
||||
}
|
||||
widget.value = { beforeImages, afterImages }
|
||||
widget.callback?.(widget.value)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user