Allow building multipage Gradio apps

[aliabid94]

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]

🪼 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/1fb08530e719e073c9741898d6923c51d2b3f547/gradio-5.14.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/1fb08530e719e073c9741898d6923c51d2b3f547/gradio-client-1.10.0.tgz

Use Lite from this PR

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

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/client	minor
@gradio/core	minor
@gradio/lite	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.

Allow building multipage Gradio apps

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.

[abidlabs]

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

[aliabid94]

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

Whoops fixed

[abidlabs]

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.

[hannahblair]

do we need to remove this comment?

[hannahblair]

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]

SSR mode (and dev mode) now work @abidlabs

[abidlabs]

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]

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

[freddyaboulton]

Was testing out the latest commit. The multipage demo works well (event tried sub-mounting it into a larger fastapi app and it worked). But I noticed that a vanilla interface demo (demo/calculator) will not render? Doesn't happen with Blocks or ChatInterface.

This is the error in the console

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at get_slot_context (svelte.js:169:26)
    at create_slot (svelte.js:164:20)
    at fe (Block.svelte:91:24)
    at _e (Block.svelte:60:11)
    at init (svelte.js:3283:34)
    at new ae (Block.svelte:40:10)
    at ue (Index.svelte:80:16)
    at init (svelte.js:3283:34)
    at new Se (Index.svelte:55:17)
    at Object.construct (RenderComponent.svelte:31:11)

2025-02-04_10-56-47.mp4

[aliabid94]

But I noticed that a vanilla interface demo (demo/calculator) will not render

Fixed!

[freddyaboulton]

Works great! Noticed a couple of small issues. Also reload mode does not work with multiple pages (every link in the navbar will point to the same page).

[aliabid94]

Works great! Noticed a couple of small issues

I think I've fixed them all now!

[abidlabs]

Works well in my tests locally and on Spaces. Great work @aliabid94!