Merge branch 'main' into table-select-event

.changeset/calm-emus-post.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Restore light/dark custom setting

.changeset/calm-roses-suffer.md

@@ -0,0 +1,6 @@
+---
+"@gradio/wasm": patch
+"gradio": patch
+---
+
+fix:Fix Lite dependencies

.changeset/cruel-aliens-reply.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+feat:Set min FastAPI version

.changeset/khaki-lions-search.md

@@ -0,0 +1,6 @@
+---
+"@gradio/button": patch
+"gradio": patch
+---
+
+fix:Fix the behavior of `gr.LoginButton` locally and on Spaces

.changeset/lazy-houses-repair.md

@@ -0,0 +1,7 @@
+---
+"@gradio/core": patch
+"@gradio/tabs": patch
+"gradio": patch
+---
+
+fix:Ensure tabs render in SSR mode and reduce time it takes for them to render.

gradio/oauth.py

@@ -11,6 +11,7 @@
 import fastapi
 from fastapi.responses import RedirectResponse
 from huggingface_hub import HfFolder, whoami
+from starlette.datastructures import URL
 
 from gradio.utils import get_space
 
@@ -23,8 +24,6 @@
 
 
 def attach_oauth(app: fastapi.FastAPI):
-    from gradio.route_utils import API_PREFIX
-
     try:
         from starlette.middleware.sessions import SessionMiddleware
     except ImportError as e:
@@ -36,13 +35,11 @@ def attach_oauth(app: fastapi.FastAPI):
     # Add `/login/huggingface`, `/login/callback` and `/logout` routes to enable OAuth in the Gradio app.
     # If the app is running in a Space, OAuth is enabled normally. Otherwise, we mock the "real" routes to make the
     # user log in with a fake user profile - without any calls to hf.co.
-    router = fastapi.APIRouter(prefix=API_PREFIX)
-    app.include_router(router)
 
     if get_space() is not None:
-        _add_oauth_routes(router)
+        _add_oauth_routes(app)
     else:
-        _add_mocked_oauth_routes(router)
+        _add_mocked_oauth_routes(app)
 
     # Session Middleware requires a secret key to sign the cookies. Let's use a hash
     # of the OAuth secret key to make it unique to the Space + updated in case OAuth
@@ -58,7 +55,7 @@ def attach_oauth(app: fastapi.FastAPI):
     )
 
 
-def _add_oauth_routes(app: fastapi.APIRouter) -> None:
+def _add_oauth_routes(app: fastapi.FastAPI) -> None:
     """Add OAuth routes to the FastAPI app (login, callback handler and logout)."""
     try:
         from authlib.integrations.base_client.errors import MismatchingStateError
@@ -157,7 +154,7 @@ async def oauth_logout(request: fastapi.Request) -> RedirectResponse:
         return _redirect_to_target(request)
 
 
-def _add_mocked_oauth_routes(app: fastapi.APIRouter) -> None:
+def _add_mocked_oauth_routes(app: fastapi.FastAPI) -> None:
     """Add fake oauth routes if Gradio is run locally and OAuth is enabled.
 
     Clicking on a gr.LoginButton will have the same behavior as in a Space (i.e. gets redirected in a new tab) but
@@ -189,13 +186,9 @@ async def oauth_redirect_callback(request: fastapi.Request) -> RedirectResponse:
     @app.get("/logout")
     async def oauth_logout(request: fastapi.Request) -> RedirectResponse:
         """Endpoint that logs out the user (e.g. delete cookie session)."""
-        from gradio.route_utils import API_PREFIX
-
         request.session.pop("oauth_info", None)
-        logout_url = str(request.url).replace(
-            f"{API_PREFIX}/logout", "/"
-        )  # preserve query params
-        return RedirectResponse(url=logout_url)
+        logout_url = URL("/").include_query_params(**request.query_params)
+        return RedirectResponse(url=logout_url, status_code=302)
 
 
 def _generate_redirect_uri(request: fastapi.Request) -> str:

gradio/themes/base.py

@@ -86,7 +86,7 @@ def repl_func(match):
             + "\n}"
         )
         dark_css_code = (
-            "@media (prefers-color-scheme: dark) {\n:root {\n"
+            "\n:root .dark {\n"
             + "\n".join([f"  --{attr}: {val};" for attr, val in dark_css.items()])
             + "\n}\n}"
         )

js/button/shared/Button.svelte

@@ -190,8 +190,12 @@
 	}
 
 	.huggingface {
-		border: var(--button-border-width) solid
-			var(--button-secondary-border-color);
-		background: var(--background-fill-primary);
+		background: rgb(20, 28, 46);
+		color: white;
+	}
+
+	.huggingface:hover {
+		background: rgb(40, 48, 66);
+		color: white;
 	}
 </style>

js/core/src/init.ts

@@ -290,6 +290,26 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 			);
 		}
 
+		if (instance.type === "tabs") {
+			instance.children =
+				instance?.children?.map((c) => ({
+					...c,
+					props: {
+						...c.props,
+						id: c.props.id || c.id
+					}
+				})) || [];
+			const child_tab_items = instance.children?.filter(
+				(child) => child.type === "tabitem"
+			);
+			instance.props.inital_tabs = child_tab_items?.map((child) => ({
+				label: child.props.label,
+				id: child.props.id,
+				visible: child.props.visible,
+				interactive: child.props.interactive
+			}));
+		}
+
 		return instance;
 	}
 

js/dropdown/dropdown.test.ts

@@ -273,7 +273,7 @@ describe("Dropdown", () => {
 			{
 				show_label: true,
 				loading_status,
-				value: "",
+				value: "apple",
 				allow_custom_value: false,
 				label: "Dropdown",
 				choices: [
@@ -303,7 +303,7 @@ describe("Dropdown", () => {
 			{
 				show_label: true,
 				loading_status,
-				value: "",
+				value: "apple",
 				allow_custom_value: true,
 				label: "Dropdown",
 				choices: [
@@ -333,7 +333,7 @@ describe("Dropdown", () => {
 			{
 				show_label: true,
 				loading_status,
-				value: "",
+				value: "apple",
 				allow_custom_value: false,
 				label: "Dropdown",
 				choices: [
@@ -377,7 +377,7 @@ describe("Dropdown", () => {
 			{
 				show_label: true,
 				loading_status,
-				value: "",
+				value: "apple_internal_value",
 				allow_custom_value: false,
 				label: "Dropdown",
 				choices: [
@@ -477,6 +477,7 @@ describe("Dropdown", () => {
 			show_label: true,
 			loading_status,
 			allow_custom_value: false,
+			value: "apple_internal_value",
 			label: "Dropdown",
 			choices: [
 				["apple_choice", "apple_internal_value"],
@@ -491,7 +492,7 @@ describe("Dropdown", () => {
 		await expect(item.value).toBe("apple_choice");
 	});
 
-	test("ensure dropdown works when initial value is undefined and allow custom value is set", async () => {
+	test("ensure dropdown works when initial value is undefined and allow_custom_value is true", async () => {
 		const { getByLabelText } = await render(Dropdown, {
 			show_label: true,
 			loading_status,
@@ -508,6 +509,6 @@ describe("Dropdown", () => {
 		const item: HTMLInputElement = getByLabelText(
 			"Dropdown"
 		) as HTMLInputElement;
-		await expect(item.value).toBe("apple_choice");
+		await expect(item.value).toBe("");
 	});
 });

js/tabs/Index.svelte

@@ -9,10 +9,19 @@
 
 	const dispatch = createEventDispatcher();
 
+	interface Tab {
+		name: string;
+		id: string | number;
+		elem_id: string | undefined;
+		visible: boolean;
+		interactive: boolean;
+	}
+
 	export let visible = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string;
+	export let inital_tabs: Tab[];
 	export let gradio: Gradio<{
 		change: never;
 		select: SelectData;
@@ -28,6 +37,7 @@
 	bind:selected
 	on:change={() => gradio.dispatch("change")}
 	on:select={(e) => gradio.dispatch("select", e.detail)}
+	{inital_tabs}
 >
 	<slot />
 </Tabs>

js/tabs/shared/Tabs.svelte

@@ -7,15 +7,16 @@
 		setContext,
 		createEventDispatcher,
 		onMount,
-		onDestroy
+		onDestroy,
+		tick
 	} from "svelte";
 	import OverflowIcon from "./OverflowIcon.svelte";
 	import { writable } from "svelte/store";
 	import type { SelectData } from "@gradio/utils";
 
 	interface Tab {
 		name: string;
-		id: object;
+		id: string | number;
 		elem_id: string | undefined;
 		visible: boolean;
 		interactive: boolean;
@@ -24,9 +25,10 @@
 	export let visible = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let selected: number | string | object;
+	export let selected: number | string;
+	export let inital_tabs: Tab[];
 
-	let tabs: Tab[] = [];
+	let tabs: Tab[] = inital_tabs;
 	let overflow_menu_open = false;
 	let overflow_menu: HTMLElement;
 
@@ -35,8 +37,12 @@
 	let tab_nav_el: HTMLElement;
 	let overflow_nav: HTMLElement;
 
-	const selected_tab = writable<false | object | number | string>(false);
-	const selected_tab_index = writable<number>(0);
+	const selected_tab = writable<false | number | string>(
+		selected || tabs[0]?.id || false
+	);
+	const selected_tab_index = writable<number>(
+		tabs.findIndex((t) => t.id === selected) || 0
+	);
 	const dispatch = createEventDispatcher<{
 		change: undefined;
 		select: SelectData;
@@ -72,20 +78,19 @@
 		selected_tab_index
 	});
 
-	function change_tab(id: object | string | number): void {
+	function change_tab(id: string | number): void {
 		const tab_to_activate = tabs.find((t) => t.id === id);
 		if (
 			tab_to_activate &&
 			tab_to_activate.interactive &&
-			tab_to_activate.visible
+			tab_to_activate.visible &&
+			$selected_tab !== tab_to_activate.id
 		) {
 			selected = id;
 			$selected_tab = id;
 			$selected_tab_index = tabs.findIndex((t) => t.id === id);
 			dispatch("change");
 			overflow_menu_open = false;
-		} else {
-			console.warn("Attempted to select a non-interactive or hidden tab.");
 		}
 	}
 
@@ -149,10 +154,19 @@
 
 		nav_items.forEach((item) => tab_nav_el.appendChild(item));
 		overflow_items.forEach((item) => overflow_nav.appendChild(item));
+		overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
+	}
+
+	$: overflow_has_selected_tab =
+		handle_overflow_has_selected_tab($selected_tab);
 
-		overflow_has_selected_tab = tabs.some(
+	function handle_overflow_has_selected_tab(
+		selected_tab: number | string | false
+	): boolean {
+		if (selected_tab === false || !overflow_nav) return false;
+		return tabs.some(
 			(t) =>
-				t.id === $selected_tab &&
+				t.id === selected_tab &&
 				overflow_nav.contains(document.querySelector(`[data-tab-id="${t.id}"]`))
 		);
 	}

js/wasm/src/webworker/index.ts

@@ -80,15 +80,6 @@ async function initializeEnvironment(
 	updateProgress("Loading Gradio wheels");
 	await pyodide.loadPackage(["ssl", "setuptools"]);
 	await micropip.add_mock_package("ffmpy", "0.3.0");
-	await micropip.install.callKwargs(
-		[
-			"typing-extensions>=4.8.0", // Typing extensions needs to be installed first otherwise the versions from the pyodide lockfile is used which is incompatible with the latest fastapi.
-			"markdown-it-py[linkify]~=2.2.0", // On 3rd June 2023, markdown-it-py 3.0.0 has been released. The `gradio` package depends on its `>=2.0.0` version so its 3.x will be resolved. However, it conflicts with `mdit-py-plugins`'s dependency `markdown-it-py >=1.0.0,<3.0.0` and micropip currently can't resolve it. So we explicitly install the compatible version of the library here.
-			"anyio==3.*", // `fastapi` depends on `anyio>=3.4.0,<5` so its 4.* can be installed, but it conflicts with the anyio version `httpx` depends on, `==3.*`. Seems like micropip can't resolve it for now, so we explicitly install the compatible version of the library here.
-			"fastapi<0.111.0" // `fastapi==0.111.0` added `ujson` as a dependency, but it's not available on Pyodide yet.
-		],
-		{ keep_going: true }
-	);
 	await micropip.install.callKwargs(gradioWheelUrls, {
 		keep_going: true
 	});

requirements.txt

@@ -1,6 +1,6 @@
 aiofiles>=22.0,<24.0
 anyio>=3.0,<5.0
-fastapi<1.0
+fastapi>=0.115.2,<1.0
 ffmpy
 gradio_client==1.4.0
 httpx>=0.24.1
@@ -17,6 +17,7 @@ python-multipart>=0.0.9  # required for fastapi forms
 pydub
 pyyaml>=5.0,<7.0
 semantic_version~=2.0
+starlette>=0.40.0,<1.0; sys.platform != 'emscripten'
 typing_extensions~=4.0
 urllib3~=2.0; sys.platform == 'emscripten'  # urllib3 is used for Lite support. Version spec can be omitted because urllib3==2.1.0 is prebuilt for Pyodide and urllib>=2.2.0 supports Pyodide as well.
 uvicorn>=0.14.0; sys.platform != 'emscripten'