search

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.41k stars 2.53k forks source link

[Gallery] Load low-resolution thumbnails first in Gallery #5679

Closed Wauplin closed 10 months ago

Wauplin commented 1 year ago

Is your feature request related to a problem? Please describe.

Loading a Gallery component with a lot of images can take a long time and end up with a degraded user experience. This happened in the "Past generations" section of the (popular) IllusionDiffusion Space.

Describe the solution you'd like

I would like to be able to provide a low-res image in addition to the normal image when calling the Gallery component. So instead of having a tuple (label, path_to_image) I would have (label, path_to_image, path_to_low_res_image). The Gallery would first start to load the low definition images and then (or on-request) the high resolution one.

Even better, it would be great if Gradio can automatically do this work. Generating a compressed version of the image shouldn't be too difficult in the postprocess method (once the HTML/JS part to handle thumbnail is implemented). That would make it available to everyone without breaking changes.

Additional context

First requested in https://huggingface.co/spaces/AP123/IllusionDiffusion/discussions/39 cc @MrIbrahem.

Alternatives

Alternatively we could load only the first N images in the Gallery and when the user scroll down, new images are lazy-loaded. I don't know how complicated this would be to implement but it'd definitely make the loading faster. Those 2 solutions are not exclusive.

abidlabs commented 10 months ago

Thanks @Wauplin I believe you've built a custom component for this already? Feel free to share here!

Wauplin commented 10 months ago

Hey @abidlabs, still an ongoing process unfortunately! To be honest the "Past generations" section did not get much traction outside of IllusionDiffusion viral Space so I did not invest much.

Anyone interested in working on something similar, here is the custom component I've started: https://huggingface.co/spaces/Wauplin/gradio_blurhashimage/tree/main/src. Feel free to reuse anything from it. I started to work on a gr.Image-based custom component and then planning to port it to gr.Gallery as well. The last remaining issue I had for gr.BlurhashImage was the default size of the blurhash image not being resized correctly once the image is loaded. Most likely quite easy to fix front-end side for someone knowing what they do :smile: If I come back to this project I will let you know here but not in the short-term plans.