@gradio/core 0.29.2 → 1.0.0-dev.3

package/src/api_docs/IconArrowUpRight.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames || "menu-icon-arrow"}
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path d="M7 7h10v10"></path>
+	<path d="M7 17 17 7"></path>
+</svg>
+
+<style>
+	.menu-icon-arrow {
+		width: 1rem;
+		height: 1rem;
+		color: rgb(107, 114, 128);
+		flex-shrink: 0;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.menu-icon-arrow {
+			color: rgb(209, 213, 219);
+		}
+	}
+</style>

package/src/api_docs/IconCaret.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	width="1em"
+	height="1em"
+	viewBox="0 0 12 7"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M1 1L6 6L11 1" stroke="currentColor" />
+</svg>
+
+<style>
+	.caret-icon {
+		transition: transform 0.2s ease-in-out;
+		color: rgb(156, 163, 175);
+		overflow: visible;
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+
+	@media (max-width: 640px) {
+		.caret-icon {
+			width: 0.625rem;
+			height: 0.625rem;
+		}
+	}
+
+	.rotate-180 {
+		transform: rotate(180deg);
+	}
+
+	.rotate-0 {
+		transform: rotate(0deg);
+	}
+</style>

package/src/api_docs/IconHuggingChat.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames || "icon-size"}
+	width="1em"
+	height="1em"
+	viewBox="5 5 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<title>HuggingChat</title>
+	<path
+		d="M16.0006 25.9992C13.8266 25.999 11.7118 25.2901 9.97686 23.9799C8.2419 22.6698 6.98127 20.8298 6.38599 18.7388C5.79071 16.6478 5.89323 14.4198 6.678 12.3923C7.46278 10.3648 8.88705 8.64837 10.735 7.50308C12.5829 6.35779 14.7538 5.84606 16.9187 6.04544C19.0837 6.24481 21.1246 7.14442 22.7323 8.60795C24.34 10.0715 25.4268 12.0192 25.8281 14.1559C26.2293 16.2926 25.9232 18.5019 24.9561 20.449C24.7703 20.8042 24.7223 21.2155 24.8211 21.604L25.4211 23.8316C25.4803 24.0518 25.4805 24.2837 25.4216 24.5039C25.3627 24.7242 25.2468 24.925 25.0856 25.0862C24.9244 25.2474 24.7235 25.3633 24.5033 25.4222C24.283 25.4811 24.0512 25.4809 23.831 25.4217L21.6034 24.8217C21.2172 24.7248 20.809 24.7729 20.4558 24.9567C19.0683 25.6467 17.5457 26.0068 16.0006 26.0068V25.9992Z"
+		fill="black"
+		class="block dark:hidden"
+	/>
+	<path
+		d="M9.62598 16.0013C9.62598 15.3799 10.1294 14.8765 10.7508 14.8765C11.3721 14.8765 11.8756 15.3799 11.8756 16.0013C11.8756 17.0953 12.3102 18.1448 13.0838 18.9184C13.8574 19.692 14.9069 20.1266 16.001 20.1267C17.095 20.1267 18.1445 19.692 18.9181 18.9184C19.6918 18.1448 20.1264 17.0953 20.1264 16.0013C20.1264 15.3799 20.6299 14.8765 21.2512 14.8765C21.8725 14.8765 22.3759 15.3799 22.3759 16.0013C22.3759 17.6921 21.7046 19.3137 20.509 20.5093C19.3134 21.7049 17.6918 22.3762 16.001 22.3762C14.3102 22.3762 12.6885 21.7049 11.4929 20.5093C10.2974 19.3137 9.62598 17.6921 9.62598 16.0013Z"
+		fill="white"
+		class="block dark:hidden"
+	/>
+	<path
+		d="M16.0006 25.9992C13.8266 25.999 11.7118 25.2901 9.97686 23.9799C8.2419 22.6698 6.98127 20.8298 6.38599 18.7388C5.79071 16.6478 5.89323 14.4198 6.678 12.3923C7.46278 10.3648 8.88705 8.64837 10.735 7.50308C12.5829 6.35779 14.7538 5.84606 16.9187 6.04544C19.0837 6.24481 21.1246 7.14442 22.7323 8.60795C24.34 10.0715 25.4268 12.0192 25.8281 14.1559C26.2293 16.2926 25.9232 18.5019 24.9561 20.449C24.7703 20.8042 24.7223 21.2155 24.8211 21.604L25.4211 23.8316C25.4803 24.0518 25.4805 24.2837 25.4216 24.5039C25.3627 24.7242 25.2468 24.925 25.0856 25.0862C24.9244 25.2474 24.7235 25.3633 24.5033 25.4222C24.283 25.4811 24.0512 25.4809 23.831 25.4217L21.6034 24.8217C21.2172 24.7248 20.809 24.7729 20.4558 24.9567C19.0683 25.6467 17.5457 26.0068 16.0006 26.0068V25.9992Z"
+		fill="white"
+		class="hidden dark:block"
+	/>
+	<path
+		d="M9.62598 16.0013C9.62598 15.3799 10.1294 14.8765 10.7508 14.8765C11.3721 14.8765 11.8756 15.3799 11.8756 16.0013C11.8756 17.0953 12.3102 18.1448 13.0838 18.9184C13.8574 19.692 14.9069 20.1266 16.001 20.1267C17.095 20.1267 18.1445 19.692 18.9181 18.9184C19.6918 18.1448 20.1264 17.0953 20.1264 16.0013C20.1264 15.3799 20.6299 14.8765 21.2512 14.8765C21.8725 14.8765 22.3759 15.3799 22.3759 16.0013C22.3759 17.6921 21.7046 19.3137 20.509 20.5093C19.3134 21.7049 17.6918 22.3762 16.001 22.3762C14.3102 22.3762 12.6885 21.7049 11.4929 20.5093C10.2974 19.3137 9.62598 17.6921 9.62598 16.0013Z"
+		fill="black"
+		class="hidden dark:block"
+	/>
+</svg>
+
+<style>
+	.icon-size {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+
+	@media (max-width: 640px) {
+		.icon-size {
+			width: 0.625rem;
+			height: 0.625rem;
+		}
+	}
+
+	.menu-icon {
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.block {
+		display: block;
+	}
+</style>

package/src/api_docs/MCPSnippet.svelte

@@ -5,16 +5,15 @@
 	import { format_latency, get_color_from_success_rate } from "./utils";
 
 	export let mcp_server_active: boolean;
-	export let mcp_server_url: string;
 	export let mcp_server_url_streamable: string;
 	export let tools: Tool[];
 	export let all_tools: Tool[] = [];
 	export let selected_tools: Set<string> = new Set();
-	export let mcp_json_sse: any;
 	export let mcp_json_stdio: any;
 	export let file_data_present: boolean;
 	export let mcp_docs: string;
 	export let analytics: Record<string, any>;
+	export let config_snippets: Record<string, string>;
 
 	interface ToolParameter {
 		title?: string;
@@ -36,13 +35,12 @@
 		};
 	}
 
-	type Transport = "streamable_http" | "sse" | "stdio";
+	type Transport = "streamable_http" | "stdio";
 	let current_transport: Transport = "streamable_http";
 	let include_file_upload = true;
 
 	const transports = [
 		["streamable_http", "Streamable HTTP"],
-		["sse", "SSE"],
 		["stdio", "STDIO"]
 	] as const;
 
@@ -52,8 +50,7 @@
 		prompt: Prompt
 	};
 
-	$: display_url =
-		current_transport === "sse" ? mcp_server_url : mcp_server_url_streamable;
+	$: display_url = mcp_server_url_streamable;
 
 	// Helper function to add/remove file upload tool from config
 	function update_config_with_file_upload(
@@ -72,9 +69,7 @@
 					"gradio[mcp]",
 					"gradio",
 					"upload-mcp",
-					current_transport === "sse"
-						? mcp_server_url
-						: mcp_server_url_streamable,
+					mcp_server_url_streamable,
 					"<UPLOAD_DIRECTORY>"
 				]
 			};
@@ -87,13 +82,10 @@
 	}
 
 	$: mcp_json_streamable_http = update_config_with_file_upload(
-		mcp_json_sse
+		mcp_json_stdio
 			? {
-					...mcp_json_sse,
 					mcpServers: {
-						...mcp_json_sse.mcpServers,
 						gradio: {
-							...mcp_json_sse.mcpServers.gradio,
 							url: mcp_server_url_streamable
 						}
 					}
@@ -102,14 +94,15 @@
 		include_file_upload
 	);
 
-	$: mcp_json_sse_updated = update_config_with_file_upload(
-		mcp_json_sse,
-		include_file_upload
-	);
 	$: mcp_json_stdio_updated = update_config_with_file_upload(
 		mcp_json_stdio,
 		include_file_upload
 	);
+
+	$: config_snippets = {
+		streamable_http: JSON.stringify(mcp_json_streamable_http, null, 2),
+		stdio: JSON.stringify(mcp_json_stdio_updated, null, 2)
+	};
 </script>
 
 {#if mcp_server_active}
@@ -134,10 +127,8 @@
 		<Block>
 			<div class="mcp-url">
 				<label for="mcp-server-url"
-					><span class="status-indicator active">●</span>MCP Server URL ({current_transport ===
-					"sse"
-						? "SSE"
-						: "Streamable HTTP"})</label
+					><span class="status-indicator active">●</span>MCP Server URL
+					(Streamable HTTP)</label
 				>
 				<div class="textbox">
 					<input id="mcp-server-url" type="text" readonly value={display_url} />
@@ -290,7 +281,7 @@
 	</div>
 	<p>&nbsp;</p>
 
-	{#if current_transport === "streamable_http"}
+	<div class:hidden={current_transport !== "streamable_http"}>
 		<strong>Streamable HTTP Transport</strong>: To add this MCP to clients that
 		support Streamable HTTP, simply add the following configuration to your MCP
 		config.
@@ -298,32 +289,15 @@
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton
-						code={JSON.stringify(mcp_json_streamable_http, null, 2)}
-					/>
-				</div>
-				<div>
-					<pre>{JSON.stringify(mcp_json_streamable_http, null, 2)}</pre>
-				</div>
-			</code>
-		</Block>
-	{:else if current_transport === "sse"}
-		<strong>SSE Transport</strong>: The SSE transport has been deprecated by the
-		MCP spec. We recommend using the Streamable HTTP transport instead. But to
-		add this MCP to clients that only support server-sent events (SSE), simply
-		add the following configuration to your MCP config.
-		<p>&nbsp;</p>
-		<Block>
-			<code>
-				<div class="copy">
-					<CopyButton code={JSON.stringify(mcp_json_sse_updated, null, 2)} />
+					<CopyButton code={config_snippets.streamable_http} />
 				</div>
 				<div>
-					<pre>{JSON.stringify(mcp_json_sse_updated, null, 2)}</pre>
+					<pre>{config_snippets.streamable_http}</pre>
 				</div>
 			</code>
 		</Block>
-	{:else if current_transport === "stdio"}
+	</div>
+	<div class:hidden={current_transport !== "stdio"}>
 		<strong>STDIO Transport</strong>: For clients that only support stdio (e.g.
 		Claude Desktop), first
 		<a href="https://nodejs.org/en/download/" target="_blank">install Node.js</a
@@ -332,14 +306,14 @@
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={JSON.stringify(mcp_json_stdio_updated, null, 2)} />
+					<CopyButton code={config_snippets.stdio} />
 				</div>
 				<div>
-					<pre>{JSON.stringify(mcp_json_stdio_updated, null, 2)}</pre>
+					<pre>{config_snippets.stdio}</pre>
 				</div>
 			</code>
 		</Block>
-	{/if}
+	</div>
 	{#if file_data_present}
 		<div class="file-upload-section">
 			<label class="checkbox-label">
@@ -665,4 +639,8 @@
 	a {
 		text-decoration: underline;
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

package/src/api_docs/NoApi.svelte

@@ -26,7 +26,7 @@
 			API Page guide
 		</a>
 		. To hide the API documentation button and this page, set
-		<code>show_api=False</code>
+		<code>footer_links=["gradio", "settings"]</code>
 		in the
 		<code>Blocks.launch()</code>
 		method.

package/src/api_docs/ParametersSnippet.svelte

@@ -5,7 +5,7 @@
 	export let is_running: boolean;
 	export let endpoint_returns: any;
 	export let js_returns: any;
-	export let current_language: "python" | "javascript" | "bash";
+	export let current_language: "python" | "javascript" | "bash" | "mcp";
 </script>
 
 <h4>

package/src/api_docs/ResponseSnippet.svelte

@@ -4,7 +4,7 @@
 	export let is_running: boolean;
 	export let endpoint_returns: any;
 	export let js_returns: any;
-	export let current_language: "python" | "javascript" | "bash";
+	export let current_language: "python" | "javascript" | "bash" | "mcp";
 </script>
 
 <h4>

package/src/api_docs/Settings.svelte

@@ -2,17 +2,21 @@
 	/* eslint-disable */
 	import { onMount } from "svelte";
 	import SettingsBanner from "./SettingsBanner.svelte";
-	export let root: string;
-	export let space_id: string | null;
-	export let pwa_enabled: boolean | undefined;
 	import { BaseDropdown as Dropdown } from "@gradio/dropdown";
 	import { BaseCheckbox as Checkbox } from "@gradio/checkbox";
 	import { language_choices, changeLocale } from "../i18n";
 	import { locale, _ } from "svelte-i18n";
-	import { setupi18n } from "../i18n";
 	import record from "./img/record.svg";
 	import { createEventDispatcher } from "svelte";
 
+	let {
+		root,
+		space_id,
+		pwa_enabled,
+		allow_zoom = $bindable(),
+		allow_video_trim = $bindable()
+	} = $props();
+
 	const dispatch = createEventDispatcher();
 	if (root === "") {
 		root = location.protocol + "//" + location.host + location.pathname;
@@ -34,7 +38,7 @@
 	}
 
 	onMount(() => {
-		document.body.style.overflow = "hidden";
+		// document.body.style.overflow = "hidden";
 		if ("parentIFrame" in window) {
 			window.parentIFrame?.scrollTo(0, 0);
 		}
@@ -46,10 +50,8 @@
 		};
 	});
 
-	let current_locale: string;
-	let current_theme: "light" | "dark" | "system" = "system";
-	export let allow_zoom = true;
-	export let allow_video_trim = true;
+	let current_locale: string = $state("en");
+	let current_theme: "light" | "dark" | "system" = $state("system");
 
 	locale.subscribe((value) => {
 		if (value) {
@@ -69,8 +71,6 @@
 	function handleVideoTrimChange(e: CustomEvent): void {
 		allow_video_trim = e.detail;
 	}
-
-	setupi18n();
 </script>
 
 <div class="banner-wrap">

package/src/api_docs/img/IconCheck.svelte

@@ -0,0 +1,33 @@
+<script>
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames || "icon-size"}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	height="16"
+	viewBox="0 0 16 16"
+	version="1.1"
+	width="16"
+	data-view-component="true"
+	><path
+		fill-rule="evenodd"
+		fill="rgb(255, 124, 1)"
+		d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+	></path></svg
+>
+
+<style>
+	.icon-size {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+
+	@media (max-width: 640px) {
+		.icon-size {
+			width: 0.625rem;
+			height: 0.625rem;
+		}
+	}
+</style>

package/src/api_docs/img/IconCopy.svelte

@@ -0,0 +1,40 @@
+<script>
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	fill="currentColor"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
+		transform="translate(0)"
+	/>
+	<path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)" /><rect
+		fill="none"
+		width="32"
+		height="32"
+	/>
+</svg>
+
+<style>
+	.icon-size {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+
+	@media (max-width: 640px) {
+		.icon-size {
+			width: 0.625rem;
+			height: 0.625rem;
+		}
+	}
+</style>