Spaces:
Running
improvisation
Improve performance and refresh the UI
While using the gallery, it became clear that things were slowing down — mainly because we were loading full-resolution images directly from Hugging Face and making too many separate data requests. This PR focuses on fixing those bottlenecks and making the overall experience faster and smoother.
What changed
⚡ Faster image loading
- Switched image delivery to wsrv.nl, which acts as an image cache and resizer.
- Instead of pulling 5MB+ PNGs for thumbnails, we now serve small, optimized WebP images.
- This significantly reduces load times and bandwidth usage.
📦 Simplified data fetching
- Consolidated everything into a single
unified-data.json. - The page now only needs one request to load all required data.
- Much easier to maintain and reason about.
🖥️ UI improvements
- Infinite scroll
Rendering 1,000+ cards at once was freezing the browser. Infinite scroll now loads items as you scroll. - Sorting & filtering
Added sorting by name and last updated date to make browsing large lists easier.
Preview
+67510/-2279
This is why programmers still need to design code and not stupid chatbots.
You cannot unify the data. It's separated on purpose.
All these data files are automatically updated by a different process whenever new models are uploaded.
This other process dgaf about your unified design.
What do you mean by "data files are automatically updated"? I assume that a script still needs to be run manually to update the json files with new loras, images, etc.
The main reason for a unified/single json file was to reduce the network request to only one file. I have not discarded the old design completely; the script which updates the json files can still work, and a simple merge script (merge.js) can join them into the unified version.
The main issue I observed at first was the slow loading of images. Regardless of how the data is structured, pulling raw, full-res PNGs from Hugging Face for gallery thumbnails is a major bottleneck. A big part of this PR is the image proxy optimization using wsrv.nl to serve resized WebP versions, which reduces image weight by about 90% and makes the site load instantly.
I just tried to help here and make the UX/performance slightly better.
I see. In that case, I'm sorry for the harsh reaction, it was a misunderstanding on my part. I do not mean to demotivate anyone from improving what they care about.
Personally, I haven't experienced this slow loading, even getting the entire 1414 list in a single page is near instantaneous (perhaps my browser has some built in lazy loading).
But I agree it's a good idea to reduce traffic for slower networks (although actually downloading the loras from hf might prove a far more significant bottleneck...).
The single network request thing, I'm not so sure it'd boost performance to a degree justifying the added code and update step.
Infinite scroll is its own feature / design choice, it has drawbacks compared to pagination.
So, I wouldn't bundle these changes with the performance improvement.
There's already a "models per page" setting, if reducing the thumbnails' sizes to 10% makes the full load instant for you then that's the pr with highest effectiveness / disruption ratio.
Interesting that you don't see the lag! 🤔 It’s probably a geographical thing. For me, fetching the raw assets from Hugging Face is a real bottleneck, even with low "models per page" settings. The latency is high enough that the page feels pretty sluggish until everything eventually pops in.
On the data side, the unified JSON was just my way of keeping things tidy and minimizing network handshakes, but since there's a script automating the individual files, I'm fine with sticking to the original structure.
I also hear you on infinite scroll—it’s definitely a design preference. I personally find it smoother for browsing large galleries, but I get that pagination has its own benefits.
Ultimately, I think we agree that the image resizing/caching is the biggest win. Even if we changed nothing else, using the proxy would solve 90% of the performance issues for people on slower connections or in distant regions without being disruptive to the existing workflow.
Anyway its up to Malcolm for the considerations.
Hey hey, thanks to both of you for the PRs and inputs :-)
I will definitely take a look into that.
First and foremost I can definitely see it lagging for someone with slower connection because we indeed load the original images from HF. This is why added pagination as a band-aid but I guess this may still be problematic for some.
The smaller and cached webp's are a nice solution though we definitely need to keep the original samples once we load the person's modal (since people would want to get the metadata from it and webp would not have it) (or maybe a link to do download/open the source image.
Since huggingface does not show nicely the changes in the index.html I can't at first glance take a look on what was changed, I will have to inspect it in my IDE, but, is it possible for you @sayantan47 to upload it into your space so we could see how it works? (like @Symbiomatrix did?)
Also I will probably take some of the design changes, but not all (i do like the "copy link" and "magnifying glass" icons :P) and I don't like the capitalized 1st letter in the person ident ;-)
Cheers!
p.s. I will take a look at it soon but probably not today, I came back from a short trip today a bit sick and i still need/want to upload the 200~ models today :)
Oh, as for the two files being separate, it is because they are created during two different stages. I need the images sooner for producing samples but the upload dates info I only get after uploading the model to HF.
But I can definitely see benefit in merging it for the purposes of browser's display so I will incorporate that too :)
Hey, thanks for the follow-up and the clarifications.
Here’s the UI hosted on my Hugging Face Space:
https://huggingface.co/spaces/sayantan47/Malcolm-model-browser
Regarding the original source image for the metadata—let me explore what can be done there. 👍
Cool, since I have some stuff to care for before, then you have time to explore :)
Thanks for the demo, I now see that I will definitely add the infinite scroller (but as an alternative, not instead of pagination :P). Looks really cool and fast :-)
Cheers!