Multipage #10433

aliabid94 · 2025-01-24T16:07:15Z

Closes: #2654

Implemented multipage. This is the syntax:

import gradio as gr

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    ...

with demo.route("Test", "/test"):
    num = gr.Number()
    ....

demo.launch()

See demo/multipage/run.py below:

Initially I had implemented separate routes as separate Blocks but then it got real messy with trying to unify the queue, Stateholder and other backend things across multiple Blocks, so now we just keep the configs separate for different pages but the Blocks is shared.

Did not yet implement shared state or components across pages, because it's still unclear what the intended behaviour should be, still need to discuss.

gradio-pr-bot · 2025-01-24T16:07:57Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/0c10c409d744142f7463a583e97cb4755de016c5/gradio-5.13.1-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@0c10c409d744142f7463a583e97cb4755de016c5#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/0c10c409d744142f7463a583e97cb4755de016c5/gradio-client-1.10.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/0c10c409d744142f7463a583e97cb4755de016c5/dist/lite.js""></script>

gradio-pr-bot · 2025-01-24T16:08:04Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/client`	`minor`
`@gradio/core`	`minor`
`@self/app`	`minor`
`@self/spa`	`minor`
`gradio`	`minor`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Multipage

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

Maintainers can change the version label to modify the version bump.
If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

…ages_2

abidlabs · 2025-01-24T22:47:49Z

I get this error when trying demo/multipage/run.py or the toy example above:

TypeError: document..inner_doc() takes 1 positional argument but 2 were given

…ages_2

aliabid94 · 2025-01-27T17:26:14Z

I get this error when trying demo/multipage/run.py or the toy example above:

Whoops fixed

abidlabs · 2025-01-27T19:58:16Z

Thanks @aliabid94, the demo is working for me now in regular mode.

However, SSR mode demo.launch(ssr_mode=True) is not working for me, which means it doesn't work by default on Spaces. The content for both of the pages loads together and cliking on the "Up" has no effect:

Btw without SSR, multipage does feel a bit slow on Spaces: https://huggingface.co/spaces/abidlabs/multipage

For the navbar UI, I suggest moving the links to the right (to be more compatible with gr.Sidebar and to potentially leave space in the left for a navbar brand image), removing the bullets, and using background shading to indicate the currently selected page.

…ages_2

hannahblair · 2025-01-28T00:14:03Z

gradio/routes.py

@@ -592,6 +609,7 @@ def api_info(request: fastapi.Request):
        @app.get("/config", dependencies=[Depends(login_check)])
        def get_config(request: fastapi.Request):
            config = utils.safe_deepcopy(app.get_blocks().config)
+            # del config["page"]


do we need to remove this comment?

hannahblair · 2025-01-28T00:20:12Z

For the navbar UI, I suggest moving the links to the right (to be more compatible with gr.Sidebar and to potentially leave space in the left for a navbar brand image), removing the bullets, and using background shading to indicate the currently selected page.

I'm not sure I agree about moving the links to the right but I do like the background shading idea! I do think we need the nav links to stand out a bit more. I can also experiment a little bit myself.

aliabid94 · 2025-01-28T06:38:36Z

SSR mode (and dev mode) now work @abidlabs

abidlabs · 2025-01-28T06:56:29Z

I do think we need the nav links to stand out a bit more.

I agree! In terms of a visual heirarchy, if a gradio app has both pages and tabs, the page links in the navbar should be more prominent but right now, they are less prominent than the tabs

abidlabs · 2025-01-28T06:59:32Z

Really nice @aliabid94: https://huggingface.co/spaces/abidlabs/multipage-ssr!

abidlabs · 2025-01-28T07:02:06Z

guides/03_building-with-blocks/05_more-blocks-features

+
+## Multipage Apps
+
+Your Gradio app can support multiple pages with the `gr.Blocks().route()` method. 


I would suggest creating a separate guide for multipage apps where we discuss multipages in more depth including the fact that you can't share components, event listeners, otherwise you should use tabs, etc. Its likely we'll expand on multipages as well with dynamic routes and so on so worth having its own section imo and also for seo purposes.

gradio/blocks.py

abidlabs · 2025-01-28T07:07:17Z

gradio/routes.py

@@ -1741,3 +1762,18 @@ async def new_lifespan(app: FastAPI):

    app.mount(path, gradio_app)
    return app
+
+
+EXISTING_ROUTES = [


note we have similar logic here, would be good to consolidate:

if ( getattr(blocks, "node_process", None) is not None and blocks.node_port is not None and not path.startswith("/gradio_api") and path not in ["/config", "/favicon.ico"] and not path.startswith("/theme") and not path.startswith("/svelte") and not path.startswith("/static") and not path.startswith("/login") and not path.startswith("/logout") and not path.startswith("/manifest.json") and not path.startswith("/pwa_icon") ):

abidlabs · 2025-01-28T07:08:10Z

gradio/blocks.py

+                num = gr.Number()
+                ...
+        """
+        if path:


I would probably do some basic validation to ensure that the path does not contain invalid characters such as "?"

Also make sure that a user doesn't accidentally reuse the same route for multiple pages in their Gradio app

Currently, if you reuse the same path, something funny happens:

abidlabs · 2025-01-28T07:09:04Z

gradio/blocks.py

+        """
+        if path:
+            path = path.strip("/")
+        if path in EXISTING_ROUTES:


Nit: EXISTING_ROUTES sounds like routes that are already part of their Gradio app, INTERNAL_ROUTES would probably be more suitable

abidlabs · 2025-01-28T07:11:33Z

Nice that each page has "its own" view api page:

gradio/blocks.py

abidlabs · 2025-01-28T07:25:39Z

@aliabid94 this is working pretty well for me! Just a few minor points:

(1) We should probably handle a large number of long page titles better (the navbar needs a bigger redesign anyways as mentioned in the comments above):

(2) Perhaps we should add a parameter in Blocks.route() to allow people to exclude a page from the Navbar. Also, is there a way to rename the Home page?

(3) I feel like there are small indentation changes that might trip up users as they don't give informative errors. For example, this fails and the resulting Gradio app just hangs:

import gradio as gr

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    with demo.route("Test", "/test"):
        num = gr.Number()
    with demo.route("Test", "test2"):
        num = gr.Number()

demo.launch()

abidlabs · 2025-01-28T07:31:49Z

Actually noticing some issues with further testing. For example, all of the modals appear twice when triggered. Initially I thought it was that all events were getting triggered twice but its just the modals:

import gradio as gr

def check():
    gr.Info("Hello")
    return 

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    num = gr.Number()
    demo.load(check, None, None) 

    demo.load(lambda x:x+1, num, num)
    btn = gr.Button()
    btn.click(lambda x:x+1, num, num)

demo.launch()

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

…ages_2

aliabid94 · 2025-01-28T22:04:39Z

made the navbar a little more prominent, though feel free to suggest something else entirely @hannahblair

abidlabs · 2025-01-28T23:51:17Z

Rendering slightly different for me, just wondering is the gray outline intentional?

changes

41d43d3

aliabid94 requested review from abidlabs, dawoodkhan82, pngwn and freddyaboulton January 24, 2025 16:07

add changeset

d76ec7c

Ali Abid added 2 commits January 24, 2025 08:10

changes

7852e0b

Merge branch 'pages_2' of https://github.com/gradio-app/gradio into p…

f5cd14a

…ages_2

abidlabs requested review from hysts and yvrjsharma January 24, 2025 18:03

Merge branch 'main' into pages_2

09475d4

Ali Abid added 2 commits January 27, 2025 09:25

chnages

275b17c

Merge branch 'pages_2' of https://github.com/gradio-app/gradio into p…

c610bc3

…ages_2

abidlabs and others added 3 commits January 27, 2025 11:58

Merge branch 'main' into pages_2

4bae335

changes

291a230

Merge branch 'pages_2' of https://github.com/gradio-app/gradio into p…

f50e3b2

…ages_2

hannahblair reviewed Jan 28, 2025

View reviewed changes

Ali Abid and others added 2 commits January 27, 2025 22:37

changes

cb3d4df

add changeset

f6e31eb

Merge branch 'main' into pages_2

2c4e46a

abidlabs reviewed Jan 28, 2025

View reviewed changes

gradio/blocks.py Show resolved Hide resolved

abidlabs reviewed Jan 28, 2025

View reviewed changes

gradio/blocks.py Outdated Show resolved Hide resolved

abidlabs reviewed Jan 28, 2025

View reviewed changes

gradio/blocks.py Outdated Show resolved Hide resolved

aliabid94 and others added 4 commits January 28, 2025 13:10

Update gradio/blocks.py

9a4b5bd

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

Update gradio/blocks.py

2f938b7

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

changes

97db25c

Merge branch 'pages_2' of https://github.com/gradio-app/gradio into p…

0c10c40

…ages_2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multipage #10433

Multipage #10433

aliabid94 commented Jan 24, 2025 •

edited by abidlabs

Loading

gradio-pr-bot commented Jan 24, 2025 •

edited

Loading

gradio-pr-bot commented Jan 24, 2025 •

edited

Loading

Something isn't right?

abidlabs commented Jan 24, 2025

aliabid94 commented Jan 27, 2025

abidlabs commented Jan 27, 2025

hannahblair Jan 28, 2025

hannahblair commented Jan 28, 2025

aliabid94 commented Jan 28, 2025

abidlabs commented Jan 28, 2025

abidlabs commented Jan 28, 2025

abidlabs Jan 28, 2025

abidlabs Jan 28, 2025 •

edited

Loading

abidlabs Jan 28, 2025

abidlabs Jan 28, 2025

abidlabs Jan 28, 2025

abidlabs Jan 28, 2025

abidlabs commented Jan 28, 2025

abidlabs commented Jan 28, 2025

abidlabs commented Jan 28, 2025

aliabid94 commented Jan 28, 2025

abidlabs commented Jan 28, 2025


		## Multipage Apps

		Your Gradio app can support multiple pages with the `gr.Blocks().route()` method.

Multipage #10433

Are you sure you want to change the base?

Multipage #10433

Conversation

aliabid94 commented Jan 24, 2025 • edited by abidlabs Loading

gradio-pr-bot commented Jan 24, 2025 • edited Loading

🪼 branch checks and previews

gradio-pr-bot commented Jan 24, 2025 • edited Loading

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

abidlabs commented Jan 24, 2025

aliabid94 commented Jan 27, 2025

abidlabs commented Jan 27, 2025

hannahblair Jan 28, 2025

Choose a reason for hiding this comment

hannahblair commented Jan 28, 2025

aliabid94 commented Jan 28, 2025

abidlabs commented Jan 28, 2025

abidlabs commented Jan 28, 2025

abidlabs Jan 28, 2025

Choose a reason for hiding this comment

abidlabs Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

abidlabs Jan 28, 2025

Choose a reason for hiding this comment

abidlabs Jan 28, 2025

Choose a reason for hiding this comment

abidlabs Jan 28, 2025

Choose a reason for hiding this comment

abidlabs Jan 28, 2025

Choose a reason for hiding this comment

abidlabs commented Jan 28, 2025

abidlabs commented Jan 28, 2025

abidlabs commented Jan 28, 2025

aliabid94 commented Jan 28, 2025

abidlabs commented Jan 28, 2025

aliabid94 commented Jan 24, 2025 •

edited by abidlabs

Loading

gradio-pr-bot commented Jan 24, 2025 •

edited

Loading

gradio-pr-bot commented Jan 24, 2025 •

edited

Loading

abidlabs Jan 28, 2025 •

edited

Loading