gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
33.57k stars 2.54k forks source link

Feature Request: Image Slider Component for Comparison Between Two Images #9708

Closed MomenSirri closed 2 weeks ago

MomenSirri commented 2 weeks ago

I often find it frustrating when trying to visually compare two images in the Gradio interface. Currently, the available components don't provide an intuitive or efficient way to display and interactively compare two images side by side, making it harder to spot subtle differences.

I would like to request an image slider component, similar to those used in image comparison tools. This component would allow users to upload two images and interactively slide between them for easy comparison. The slider could be placed in the middle, allowing users to drag it left or right to reveal more of one image or the other. This would be particularly useful for tasks involving before-and-after comparisons or highlighting differences in image processing workflows.

This feature would enhance user experience in cases where comparing visual differences is essential, such as image enhancement, noise reduction, or any image editing tasks. A similar implementation can be found in many image comparison applications or websites. A screenshot or reference of such a slider could provide further context if needed.

abidlabs commented 2 weeks ago

Such a slider does exist as a custom component, but we need to make it work with Gradio 5, cc @pngwn

freddyaboulton commented 2 weeks ago

Please file an issue regarding 5.0 compatibility here!

https://github.com/pngwn/gradio-imageslider

Thanks!