Client-based pagination with javascript not working in Gradio

[haljpeg]

Describe the bug

I have a large list of items that I am displaying in an HTML grid. This grid is generated dynamically based on the ML model output. In some cases, I get up to 500 items to display in a grid (image + text) which is heavy for the browser.

That brings me to the pagination. I implemented a small python script (LINK: https://github.com/bowtiedhal/gradio_pagination/blob/main/pagination.py) that uses javascript to hold the list of all objects and depending on the page javascript decides a set of items to display together with a Next button that takes you to the next page

However, when I run the exact same code inside the Gradio app (LINK: https://github.com/bowtiedhal/gradio_pagination/blob/main/app.py) it does not render the grid which is dynamically generated by javascript. It only shows the static part.

My suspicion is that javascript does not run due to the way gradio iframe is setup.

Please see screenshots of the issue.

PS: Ideally, I would like to implement it with a backend solution (for example call a python function that returns the next list of items to display, but as far as I am aware it is not supported by Gradio right now)

Reproduction

https://github.com/bowtiedhal/gradio_pagination

Screenshot

Standalone HTML output outside of gradio app

Output inside gradio app. Notice no item grid with next button:

Logs

No response

System Info

Gradio version: 2.8.14
Operating System: macOS Monterey
Browsers: Safari and Chrome

Severity

blocker

[abidlabs]

Hi @bowtiedhal thanks for creating this issue! We are going to take a look at it soon

[haljpeg]

Thanks @abidlabs please keep me updated!

[haljpeg]

Hi, @abidlabs are there any updates on this front?

[abidlabs]

Not yet, sorry! We need to merge some development changes in before we can fix this. We should be able to get to this early next week -- flagging @aliabid94 so it's on his radar.

[haljpeg]

Thanks, will be waiting

[pngwn]

Hey, quick update on this.

The reason this doesn't work when passing the code via HTML is that browsers will not execute javascript contained within HTML that are injected into the page via innerHTML (which is how we ultimately insert HTML into an app). There are technically ways to make it work but the situation isn't ideal.

What we do propose however is more powerful ways to interact with a gradio app (as well as a better API for mebedding graadio apps into an existing HTML page). This (as yet undefined) API will allow you to respond to changes within a gradio app and perform arbitrary action in response to those changes. This will be an event driven API that will allow you to respond to things like API requests (as well as gaining access to the returned data), state or data changes (likewise gaining access to that state). This API should give you flexibility you need to do pretty much anything when embedding gradio apps, it will no longer be a blackbox that you can't interact with.

I'll be putting together a more comprehensive proposal with a proposed API after I have figured out one or two technical details. WIll comment again here when I have that ready.

[pngwn]

We now have a web component based delivery mechanism for Gradio and have the architecture to support this. However, we need to dispatch a custom event when data in the application changes (and/or when a request is made/succeeds/fails) and make the data accessible outside of the component. We also probably need some way of controlling the application from outside as well, probably via custom methods on the web component class.

[ye7iaserag]

I'm facing this too when adding script tags with JavaScript in a gradio HTML component Currently there is no way to inject JS, which is needed if you are creating an extension to the existing WebUIs now days