Allow building multipage Gradio apps

.changeset/large-beans-retire.md

@@ -0,0 +1,9 @@
+---
+"@gradio/client": minor
+"@gradio/core": minor
+"@self/app": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Multipage

client/js/src/types.ts

@@ -179,6 +179,15 @@ export interface Config {
 	show_api: boolean;
 	stylesheets: string[];
 	path: string;
+	current_page: string;
+	page?: Record<
+		string,
+		{
+			components: ComponentMeta[];
+			dependencies: Dependency[];
+			layout: any;
+		}
+	>;
 	protocol: "sse_v3" | "sse_v2.1" | "sse_v2" | "sse_v1" | "sse" | "ws";
 	max_file_size?: number;
 	theme_hash?: number;

demo/multipage/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: multipage"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "\n", "with gr.Blocks() as demo:\n", "    name = gr.Textbox(label=\"Name\")\n", "    output = gr.Textbox(label=\"Output Box\")\n", "    greet_btn = gr.Button(\"Greet\")\n", "    @gr.on([greet_btn.click, name.submit], inputs=name, outputs=output)\n", "    def greet(name):\n", "        return \"Hello \" + name + \"!\"\n", "\n", "with demo.route(\"Up\") as incrementer_demo:\n", "    num = gr.Number()\n", "    incrementer_demo.load(lambda: random.randint(10, 40), None, num)\n", "\n", "    with gr.Row():\n", "        inc_btn = gr.Button(\"Increase\")\n", "        dec_btn = gr.Button(\"Decrease\")\n", "    inc_btn.click(fn=lambda x: x + 1, inputs=num, outputs=num, api_name=\"increment\")\n", "    dec_btn.click(fn=lambda x: x - 1, inputs=num, outputs=num, api_name=\"decrement\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/multipage/run.py

@@ -0,0 +1,23 @@
+import gradio as gr
+import random
+
+with gr.Blocks() as demo:
+    name = gr.Textbox(label="Name")
+    output = gr.Textbox(label="Output Box")
+    greet_btn = gr.Button("Greet")
+    @gr.on([greet_btn.click, name.submit], inputs=name, outputs=output)
+    def greet(name):
+        return "Hello " + name + "!"
+
+with demo.route("Up") as incrementer_demo:
+    num = gr.Number()
+    incrementer_demo.load(lambda: random.randint(10, 40), None, num)
+
+    with gr.Row():
+        inc_btn = gr.Button("Increase")
+        dec_btn = gr.Button("Decrease")
+    inc_btn.click(fn=lambda x: x + 1, inputs=num, outputs=num, api_name="increment")
+    dec_btn.click(fn=lambda x: x - 1, inputs=num, outputs=num, api_name="decrement")
+
+if __name__ == "__main__":
+    demo.launch(ssr_mode=True)

gradio/blocks.py

@@ -69,7 +69,7 @@
 from gradio.helpers import create_tracker, skip, special_args
 from gradio.node_server import start_node_server
 from gradio.route_utils import API_PREFIX, MediaStream
-from gradio.routes import VERSION, App, Request
+from gradio.routes import EXISTING_ROUTES, VERSION, App, Request
 from gradio.state_holder import SessionState, StateHolder
 from gradio.themes import Default as DefaultTheme
 from gradio.themes import ThemeClass as Theme
@@ -137,6 +137,7 @@ def __init__(
         self.share_token = secrets.token_urlsafe(32)
         self.parent: BlockContext | None = None
         self.rendered_in: Renderable | None = None
+        self.page: str
         self.is_rendered: bool = False
         self._constructor_args: list[dict]
         self.state_session_capacity = 10000
@@ -187,6 +188,7 @@ def render(self):
                 f"A block with id: {self._id} has already been rendered in the current Blocks."
             )
         if render_context is not None:
+            self.page = root_context.root_block.current_page
             render_context.add(self)
         if root_context is not None:
             root_context.blocks[self._id] = self
@@ -467,6 +469,7 @@ def fill_expected_parents(self):
                     pseudo_parent.parent = self
                     children.append(pseudo_parent)
                     pseudo_parent.add_child(child)
+                    pseudo_parent.page = child.page
                     if root_context:
                         root_context.blocks[pseudo_parent._id] = pseudo_parent
                 child.parent = pseudo_parent
@@ -521,6 +524,7 @@ def __init__(
         stream_every: float = 0.5,
         like_user_message: bool = False,
         event_specific_args: list[str] | None = None,
+        page: str = "",
     ):
         self.fn = fn
         self._id = _id
@@ -554,6 +558,7 @@ def __init__(
         ) or inspect.isasyncgenfunction(self.fn)
         self.renderable = renderable
         self.rendered_in = rendered_in
+        self.page = page
 
         # We need to keep track of which events are cancel events
         # so that the client can call the /cancel route directly
@@ -871,14 +876,27 @@ def set_event_trigger(
             stream_every=stream_every,
             like_user_message=like_user_message,
             event_specific_args=event_specific_args,
+            page=self.root_block.current_page,
         )
 
         self.fns[self.fn_id] = block_fn
         self.fn_id += 1
         return block_fn, block_fn._id
 
     def get_config(self, renderable: Renderable | None = None):
-        config = {}
+        config = {
+            "page": {},
+            "components": [],
+            "dependencies": [],
+        }
+
+        def setup_page(page: str):
+            if page not in config["page"]:
+                config["page"][page] = {
+                    "layout": {"id": self._id, "children": []},
+                    "components": [],
+                    "dependencies": [],
+                }
 
         rendered_ids = []
 
@@ -888,16 +906,20 @@ def get_layout(block: Block):
                 return {"id": block._id}
             children_layout = []
             for child in block.children:
-                children_layout.append(get_layout(child))
+                layout = get_layout(child)
+                children_layout.append(layout)
             return {"id": block._id, "children": children_layout}
 
         if renderable:
             root_block = self.blocks[renderable.container_id]
         else:
             root_block = self.root_block
         config["layout"] = get_layout(root_block)
+        for root_child in config["layout"]["children"]:
+            block = self.blocks[root_child["id"]]
+            setup_page(block.page)
+            config["page"][block.page]["layout"]["children"].append(root_child)
 
-        config["components"] = []
         blocks_items = list(
             self.blocks.items()
         )  # freeze as list to prevent concurrent re-renders from changing the dict during loop, see https://github.com/gradio-app/gradio/issues/9991
@@ -930,11 +952,17 @@ def get_layout(block: Block):
                     block_config["api_info_as_output"] = block.api_info()  # type: ignore
                 block_config["example_inputs"] = block.example_inputs()  # type: ignore
             config["components"].append(block_config)
+            setup_page(block.page)
+            config["page"][block.page]["components"].append(block_config)
 
         dependencies = []
         for fn in self.fns.values():
             if renderable is None or fn.rendered_in == renderable:
-                dependencies.append(fn.get_config())
+                dependency_config = fn.get_config()
+                dependencies.append(dependency_config)
+                setup_page(fn.page)
+                config["page"][fn.page]["dependencies"].append(dependency_config)
+
         config["dependencies"] = dependencies
         return config
 
@@ -1136,6 +1164,9 @@ def __init__(
         self.root_path = os.environ.get("GRADIO_ROOT_PATH", "")
         self.proxy_urls = set()
 
+        self.pages: list[tuple[str, str]] = [["", "Home"]]
+        self.current_page = ""
+
         if self.analytics_enabled:
             is_custom_theme = not any(
                 self.theme.to_dict() == built_in_theme.to_dict()
@@ -2172,6 +2203,7 @@ def get_config_file(self) -> BlocksConfigDict:
             "fill_width": self.fill_width,
             "theme_hash": self.theme_hash,
             "pwa": self.pwa,
+            "pages": self.pages,
         }
         config.update(self.default_config.get_config())  # type: ignore
         config["connect_heartbeat"] = utils.connect_heartbeat(
@@ -2206,6 +2238,7 @@ def __exit__(self, exc_type: type[BaseException] | None = None, *args):
         self.progress_tracking = any(
             block_fn.tracks_progress for block_fn in self.fns.values()
         )
+        self.page = ""
         self.exited = True
 
     def clear(self):
@@ -2254,7 +2287,6 @@ def queue(
             blocks=self,
             default_concurrency_limit=default_concurrency_limit,
         )
-        self.config = self.get_config_file()
         self.app = App.create_app(self)
         return self
 
@@ -3033,3 +3065,30 @@ def get_event_targets(
             event = getattr(block, event_name)
             target_events.append(event)
         return target_events
+
+    @document()
+    def route(self, name: str, path: str | None = None):
+        """
+        Adds a new page to the Blocks app.
+        Parameters:
+            name: The name of the page as it appears in the nav bar.
+            path: The url path of the page. If not provided, it is generated from the name.
+        Example:
+            with gr.Blocks() as demo:
+                name = gr.Textbox(label="Name")
+                ...
+            with demo.route("Test", "/test"):
+                num = gr.Number()
+                ...
+        """
+        if path:
+            path = path.strip("/")
+        if path in EXISTING_ROUTES:
+            raise ValueError(f"Route with path '{path}' already exists")
+        if path is None:
+            path = name.lower().replace(" ", "-")
+        if path in EXISTING_ROUTES:
+            path = "_" + path
+        self.pages.append((path, name))
+        self.current_page = path
+        return self

gradio/interface.py

@@ -546,8 +546,6 @@ def __init__(
             self.render_examples()
             self.render_article()
 
-        self.config = self.get_config_file()
-
     def render_title_description(self) -> None:
         if self.title:
             Markdown(

gradio/routes.py

@@ -524,18 +524,39 @@ def _(path: str):
                 )
             )
 
+        for page, _ in blocks.pages:
+
+            @app.get(f"/{page}", response_class=HTMLResponse)
+            @app.get(f"/{page}/", response_class=HTMLResponse)
+            def page_route(
+                request: fastapi.Request,
+                user: str = Depends(get_current_user),
+                page=page,
+            ):
+                return main(request, user, page)
+
         @app.head("/", response_class=HTMLResponse)
         @app.get("/", response_class=HTMLResponse)
-        def main(request: fastapi.Request, user: str = Depends(get_current_user)):
+        def main(
+            request: fastapi.Request,
+            user: str = Depends(get_current_user),
+            page: str = "",
+        ):
             mimetypes.add_type("application/javascript", ".js")
             blocks = app.get_blocks()
             root = route_utils.get_root_url(
-                request=request, route_path="/", root_path=app.root_path
+                request=request,
+                route_path=f"/{page}",
+                root_path=app.root_path,
             )
             if (app.auth is None and app.auth_dependency is None) or user is not None:
                 config = utils.safe_deepcopy(blocks.config)
                 config = route_utils.update_root_in_config(config, root)
                 config["username"] = user
+                config["components"] = config["page"][page]["components"]
+                config["dependencies"] = config["page"][page]["dependencies"]
+                config["layout"] = config["page"][page]["layout"]
+                config["current_page"] = page
             elif app.auth_dependency:
                 raise HTTPException(
                     status_code=status.HTTP_401_UNAUTHORIZED, detail="Not authenticated"
@@ -1741,3 +1762,18 @@ async def new_lifespan(app: FastAPI):
 
     app.mount(path, gradio_app)
     return app
+
+
+EXISTING_ROUTES = [
+    "theme.css",
+    "robots.txt",
+    "pwa_icon",
+    "manifest.json",
+    "login",
+    "logout",
+    "svelte",
+    "config",
+    "static",
+    "assets",
+    "favicon.ico",
+]

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

@@ -70,3 +70,9 @@ In the  2 player tic-tac-toe demo below, a user can select a cell in the `DataFr
 
 $code_tictactoe
 $demo_tictactoe
+
+## Multipage Apps
+
+Your Gradio app can support multiple pages with the `gr.Blocks().route()` method. 
+
+$code_multipage

js/app/src/routes/+layout.server.ts

@@ -7,7 +7,4 @@ export function load({ url }): void {
 	if (dev && url.pathname.startsWith("/theme")) {
 		redirect(308, `http://127.0.0.1:7860${pathname}${search}`);
 	}
-	if (url.pathname !== "/") {
-		redirect(308, "/");
-	}
 }

js/app/src/routes/[...catchall]/+page.ts

@@ -21,7 +21,6 @@ export async function load({
 }> {
 	const api_url =
 		browser && !local_dev_mode ? new URL(".", location.href).href : server;
-	// console.log("API URL", api_url, "-", location.href, "-");
 	const app = await Client.connect(api_url, {
 		with_null_state: true,
 		events: ["data", "log", "status", "render"]
@@ -31,13 +30,26 @@ export async function load({
 		throw new Error("No config found");
 	}
 
+	let pathname = url.pathname;
+	if (pathname.startsWith("/")) {
+		pathname = pathname.slice(1);
+	}
+	if (pathname.endsWith("/")) {
+		pathname = pathname.slice(0, -1);
+	}
+	let page_config =
+		app.config.page && pathname in app.config.page
+			? app.config.page[pathname]
+			: app.config;
+	let page = app.config.page && pathname in app.config.page ? pathname : "";
+
 	const { create_layout, layout } = create_components(undefined);
 
 	await create_layout({
 		app,
-		components: app.config.components,
-		dependencies: app.config.dependencies,
-		layout: app.config.layout,
+		components: page_config.components,
+		dependencies: page_config.dependencies,
+		layout: page_config.layout,
 		root: app.config.root + app.config.api_prefix,
 		options: {
 			fill_height: app.config.fill_height
@@ -48,7 +60,7 @@ export async function load({
 
 	return {
 		Render: app.config?.auth_required ? Login : Blocks,
-		config: app.config,
+		config: { ...app.config, ...page_config, current_page: page },
 		api_url,
 		layout: layouts,
 		app