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/0679c0659cbd6e253d356a3e6952ee41de55a163/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@0679c0659cbd6e253d356a3e6952ee41de55a163#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/0679c0659cbd6e253d356a3e6952ee41de55a163/gradio-client-1.10.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/0679c0659cbd6e253d356a3e6952ee41de55a163/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
@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!

[abidlabs]

@aliabid94 I was add docs to this PR, particularly how you could write code for different pages in different files, and I think this is not behaving as I would expect:

Consider having the following files:

• app.py
• main_page.py (has the code for the main page)
• second_page.py (has the code for the second page)

app.py

import gradio as gr

import main_page, second_page

with gr.Blocks() as demo:
    main_page.demo.render()
with demo.route("Second Page"):
    second_page.demo.render()

if __name__ == "__main__":
    demo.launch()

main_page.py

import gradio as gr

with gr.Blocks() as demo:
    gr.Image()

if __name__ == "__main__":
    demo.launch()

second_page.py

import gradio as gr

with gr.Blocks() as demo:
    t = gr.Textbox()
    demo.load(lambda : "Loaded", None, t)

if __name__ == "__main__":
    demo.launch()

I would expect this to behave as a regular multipage app, but when I tested this (on a slightly earlier wheel since the latest is broken), I was seeing all of the pages rendered on the main page

I pushed docs for this^ already, but feel free to modify if I'm doing something wrong

[abidlabs]

Ok yeah can confirm that the multiple file issue is now resolved @aliabid94, nice!

[abidlabs]

Can confirm the heartbeat issue is fixed @aliabid94 but the SSR issue is back (where the components from all of the pages are rendered on the main page), see: https://huggingface.co/spaces/abidlabs/multipage-ssr (can also repro locally)

[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)
    ```
    

https://github.com/user-attachments/assets/3fb4a072-1e0d-4385-914c-f552cedcb947