First time loading performance optimization (#8571)

* performance: add gradio_api_info

* format code

* fix ts check

* fix ts check

* add changeset

* add changeset

* format globals.d.ts

---------

Co-authored-by: jianting.bjt <[email protected]>
Co-authored-by: gradio-pr-bot <[email protected]>
Co-authored-by: Abubakar Abid <[email protected]>

Author: 4 people

.changeset/stale-crabs-return.md

@@ -0,0 +1,7 @@
+---
+"@gradio/app": patch
+"@gradio/client": patch
+"gradio": patch
+---
+
+feat:First time loading performance optimization

client/js/src/globals.d.ts

@@ -1,9 +1,10 @@
-import { Config } from "./types";
+import { ApiData, ApiInfo, Config } from "./types";
 
 declare global {
 	interface Window {
 		__gradio_mode__: "app" | "website";
 		gradio_config: Config;
+		gradio_api_info: ApiInfo<ApiData> | { api: ApiInfo<ApiData> };
 		__is_colab__: boolean;
 		__gradio_space__: string | null;
 	}

client/js/src/utils/view_api.ts

@@ -26,32 +26,33 @@ export async function view_api(this: Client): Promise<any> {
 
 	try {
 		let response: Response;
-
-		if (semiver(config?.version || "2.0.0", "3.30") < 0) {
-			response = await this.fetch(SPACE_FETCHER_URL, {
-				method: "POST",
-				body: JSON.stringify({
-					serialize: false,
-					config: JSON.stringify(config)
-				}),
-				headers,
-				credentials: "include"
-			});
+		let api_info: ApiInfo<ApiData> | { api: ApiInfo<ApiData> };
+		if (typeof window !== "undefined" && window.gradio_api_info) {
+			api_info = window.gradio_api_info;
 		} else {
-			const url = join_urls(config.root, API_INFO_URL);
-			response = await this.fetch(url, {
-				headers,
-				credentials: "include"
-			});
-		}
+			if (semiver(config?.version || "2.0.0", "3.30") < 0) {
+				response = await this.fetch(SPACE_FETCHER_URL, {
+					method: "POST",
+					body: JSON.stringify({
+						serialize: false,
+						config: JSON.stringify(config)
+					}),
+					headers,
+					credentials: "include"
+				});
+			} else {
+				const url = join_urls(config.root, API_INFO_URL);
+				response = await this.fetch(url, {
+					headers,
+					credentials: "include"
+				});
+			}
 
-		if (!response.ok) {
-			throw new Error(BROKEN_CONNECTION_MSG);
+			if (!response.ok) {
+				throw new Error(BROKEN_CONNECTION_MSG);
+			}
+			api_info = await response.json();
 		}
-
-		let api_info = (await response.json()) as
-			| ApiInfo<ApiData>
-			| { api: ApiInfo<ApiData> };
 		if ("api" in api_info) {
 			api_info = api_info.api;
 		}

globals.d.ts

@@ -1,10 +1,12 @@
+import { ApiData, ApiInfo } from "client/js/src/types";
 declare global {
 	interface Window {
 		__gradio_mode__: "app" | "website";
 		__gradio_space__: string | null;
 		launchGradio: Function;
 		launchGradioFromSpaces: Function;
 		gradio_config: Config;
+		gradio_api_info: ApiInfo<ApiData> | { api: ApiInfo<ApiData> };
 		scoped_css_attach: (link: HTMLLinkElement) => void;
 		__is_colab__: boolean;
 		parentIFrame?: {

gradio/routes.py

@@ -400,9 +400,14 @@ def main(request: fastapi.Request, user: str = Depends(get_current_user)):
                 template = (
                     "frontend/share.html" if blocks.share else "frontend/index.html"
                 )
+                gradio_api_info = api_info(False)
                 return templates.TemplateResponse(
                     template,
-                    {"request": request, "config": config},
+                    {
+                        "request": request,
+                        "config": config,
+                        "gradio_api_info": gradio_api_info,
+                    },
                 )
             except TemplateNotFound as err:
                 if blocks.share:

js/app/build_plugins.ts

@@ -9,7 +9,11 @@ export function inject_ejs(): Plugin {
 		name: "inject-ejs",
 		enforce: "post",
 		transformIndexHtml: (html) => {
-			return html.replace(
+			const replace_gradio_info_info_html = html.replace(
+				/%gradio_api_info%/,
+				`<script>window.gradio_api_info = {{ gradio_api_info | toorjson }};</script>`
+			);
+			return replace_gradio_info_info_html.replace(
 				/%gradio_config%/,
 				`<script>window.gradio_config = {{ config | toorjson }};</script>`
 			);

js/app/index.html

@@ -68,7 +68,7 @@
 			);
 		</script>
 
-		%gradio_config%
+		%gradio_config%%gradio_api_info%
 
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link