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:
Terry Jia
2026-02-23 23:56:46 -05:00
committed by GitHub
parent 724827d8cc
commit 3b5649232d
5 changed files with 324 additions and 82 deletions

View File

@@ -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)
}
}