@gradio/core 1.1.3 → 1.3.0

package/src/api_docs/CodeSnippet.svelte

@@ -1,75 +1,78 @@
 <script lang="ts">
-	import type { ComponentMeta, Dependency, Payload } from "../types";
+	import type { Dependency, Payload } from "../types";
 	import CopyButton from "./CopyButton.svelte";
-	import { represent_value, is_potentially_nested_file_data } from "./utils";
 	import { Block } from "@gradio/atoms";
 	import EndpointDetail from "./EndpointDetail.svelte";
 
-	interface EndpointParameter {
-		label: string;
-		type: string;
-		python_type: { type: string };
-		component: string;
-		example_input: string;
-		serializer: string;
-	}
-
 	export let dependency: Dependency;
-	export let root: string;
-	export let api_prefix: string;
-	export let space_id: string | null;
-	export let endpoint_parameters: any;
-	export let username: string | null;
-	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp";
 	export let api_description: string | null = null;
 	export let analytics: Record<string, any>;
 	export let markdown_code_snippets: Record<string, Record<string, string>>;
+	export let code_snippets: Record<string, string>;
 	export let last_api_call: Payload | null = null;
 
-	let python_code: HTMLElement;
-	let js_code: HTMLElement;
-	let bash_post_code: HTMLElement;
-	let bash_get_code: HTMLElement;
-
-	let has_file_path = endpoint_parameters.some((param: EndpointParameter) =>
-		is_potentially_nested_file_data(param.example_input)
-	);
-	let blob_components = ["Audio", "File", "Image", "Video"];
-	let blob_examples: any[] = endpoint_parameters.filter(
-		(param: EndpointParameter) => blob_components.includes(param.component)
-	);
+	$: markdown_code_snippets[
+		dependency.api_name as keyof typeof markdown_code_snippets
+	] = {
+		python: code_snippets.python || "",
+		javascript: code_snippets.javascript || "",
+		bash: code_snippets.bash || ""
+	};
 
-	$: normalised_api_prefix = api_prefix ? api_prefix : "/";
-	$: normalised_root = root.replace(/\/$/, "");
+	function escape_html(text: string): string {
+		return text
+			.replace(/&/g, "&amp;")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;");
+	}
 
-	$: is_most_recently_used = last_api_call?.fn_index === dependency.id;
+	function highlight_python(code: string): string {
+		let html = escape_html(code);
+		html = html.replace(
+			/\b(from|import|print)\b/g,
+			'<span class="kw">$1</span>'
+		);
+		html = html.replace(
+			/(Client\()("[^"]*")(\))/g,
+			'$1<span class="str">$2</span>$3'
+		);
+		html = html.replace(
+			/(api_name=)("[^"]*")/g,
+			'$1<span class="api-name">$2</span>'
+		);
+		return html;
+	}
 
-	$: actual_data =
-		is_most_recently_used && last_api_call?.data
-			? last_api_call.data.filter((d) => typeof d !== "undefined")
-			: null;
+	function highlight_javascript(code: string): string {
+		let html = escape_html(code);
+		html = html.replace(
+			/\b(import|from|const|await)\b/g,
+			'<span class="kw">$1</span>'
+		);
+		html = html.replace(
+			/(Client\.connect\()("[^"]*")(\))/g,
+			'$1<span class="str">$2</span>$3'
+		);
+		html = html.replace(
+			/(\.predict\()("[^"]*")/g,
+			'$1<span class="api-name">$2</span>'
+		);
+		return html;
+	}
 
-	function getParameterValue(param: any, index: number): any {
-		if (
-			is_most_recently_used &&
-			actual_data &&
-			actual_data[index] !== undefined
-		) {
-			return actual_data[index];
-		}
-		return param.parameter_has_default !== undefined &&
-			param.parameter_has_default
-			? param.parameter_default
-			: param.example_input;
+	function highlight_bash(code: string): string {
+		return escape_html(code);
 	}
 
-	$: markdown_code_snippets[
-		dependency.api_name as keyof typeof markdown_code_snippets
-	] = {
-		python: python_code?.innerText || "",
-		javascript: js_code?.innerText || "",
-		bash: bash_post_code?.innerText || ""
-	};
+	$: python_html = highlight_python(code_snippets.python || "");
+	$: js_html = highlight_javascript(code_snippets.javascript || "");
+	$: bash_html = highlight_bash(code_snippets.bash || "");
 </script>
 
 <div class="container">
@@ -84,37 +87,9 @@
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={python_code?.innerText} />
-				</div>
-				<div bind:this={python_code}>
-					<pre><span class="highlight">from</span> gradio_client <span
-							class="highlight">import</span
-						> Client{#if has_file_path}, handle_file{/if}
-
-client = Client(<span class="token string">"{space_id || root}"</span
-						>{#if username !== null}, auth=("{username}", **password**){/if})
-result = client.<span class="highlight">predict</span
-						>(<!--
--->{#each endpoint_parameters as param, i}<!--
-		-->
-	{param.parameter_name
-								? param.parameter_name + "="
-								: ""}<span
-								class:recent-value={is_most_recently_used &&
-									actual_data?.[i] !== undefined}
-								>{represent_value(
-									getParameterValue(param, i),
-									param.python_type.type,
-									"py"
-								)}</span
-							>,{/each}<!--
-
-	-->
-	api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
-	-->
-)
-<span class="highlight">print</span>(result)</pre>
+					<CopyButton code={code_snippets.python || ""} />
 				</div>
+				<pre>{@html python_html}</pre>
 			</code>
 		</Block>
 	</div>
@@ -122,53 +97,9 @@ result = client.<span class="highlight">predict</span
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={js_code?.innerText} />
-				</div>
-				<div bind:this={js_code}>
-					<pre>import &lbrace; Client &rbrace; from "@gradio/client";
-	{#each blob_examples as { component, example_input }, i}<!--
-	-->
-	const response_{i} = await fetch("{example_input.url}");
-	const example{component} = await response_{i}.blob();
-						{/each}<!--
-	-->
-	const client = await Client.connect(<span class="token string"
-							>"{space_id || root}"</span
-						>{#if username !== null}, &lbrace;auth: ["{username}", **password**]&rbrace;{/if});
-	const result = await client.predict(<span class="api-name"
-							>"/{dependency.api_name}"</span
-						>, &lbrace; <!--
-	-->{#each endpoint_parameters as param, i}<!--
-			-->{#if blob_components.includes(param.component)}<!--
-		-->
-					<span
-									class="example-inputs"
-									>{param.parameter_name}: example{param.component}</span
-								>, <!--
-			--><span class="desc"><!--
-			--></span
-								><!--
-			-->{:else}<!--
-		-->		
-			<span
-									class="example-inputs {is_most_recently_used &&
-									actual_data?.[i] !== undefined
-										? 'recent-value'
-										: ''}"
-									>{param.parameter_name}: {represent_value(
-										getParameterValue(param, i),
-										param.python_type.type,
-										"js"
-									)}</span
-								>, <!--
-	--><!--
-	-->{/if}
-						{/each}
-	&rbrace;);
-
-	console.log(result.data);
-	</pre>
+					<CopyButton code={code_snippets.javascript || ""} />
 				</div>
+				<pre>{@html js_html}</pre>
 			</code>
 		</Block>
 	</div>
@@ -176,29 +107,9 @@ result = client.<span class="highlight">predict</span
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={bash_post_code?.innerText}></CopyButton>
-				</div>
-
-				<div bind:this={bash_post_code}>
-					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
-	"data": [{#each endpoint_parameters as param, i}
-							<!-- 
-	--><span
-								class={is_most_recently_used && actual_data?.[i] !== undefined
-									? "recent-value"
-									: ""}
-								>{represent_value(
-									getParameterValue(param, i),
-									param.python_type.type,
-									"bash"
-								)}</span
-							>{#if i < endpoint_parameters.length - 1},
-							{/if}
-						{/each}
-	]{"}"}' \
-	| awk -F'"' '{"{"} print $4{"}"}'  \
-	| read EVENT_ID; curl -N {normalised_root}{normalised_api_prefix}/call/{dependency.api_name}/$EVENT_ID</pre>
+					<CopyButton code={code_snippets.bash || ""} />
 				</div>
+				<pre>{@html bash_html}</pre>
 			</code>
 		</Block>
 	</div>
@@ -212,11 +123,6 @@ result = client.<span class="highlight">predict</span
 		tab-size: 2;
 	}
 
-	.token.string {
-		display: contents;
-		color: var(--color-accent-base);
-	}
-
 	code {
 		position: relative;
 		display: block;
@@ -238,21 +144,12 @@ result = client.<span class="highlight">predict</span
 		margin-bottom: var(--size-3);
 	}
 
-	.desc {
-		color: var(--body-text-color-subdued);
-	}
-
-	.api-name {
+	:global(.api-name) {
 		color: var(--color-accent);
 	}
 
-	.recent-value {
-		color: #fd7b00;
-		background: #fff4e6;
-		border: 1px solid #ffd9b3;
-		border-radius: var(--radius-sm);
-		padding: 1px 4px;
-		font-weight: var(--weight-medium);
+	:global(.str) {
+		color: var(--color-accent-base);
 	}
 
 	.hidden {

package/src/api_docs/CopyMarkdown.svelte

@@ -10,7 +10,12 @@
 	import { represent_value } from "./utils";
 	import type { Dependency } from "../types";
 
-	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp";
 	export let space_id: string | null;
 	export let root: string;
 	export let api_count: number;
@@ -362,7 +367,7 @@ Read the documentation above so I can ask questions about it.`
 	}
 
 	async function copyMarkdown(
-		current_language: "python" | "javascript" | "bash" | "mcp"
+		current_language: "python" | "javascript" | "bash" | "skill" | "mcp"
 	): Promise<void> {
 		try {
 			if (!markdown_content[current_language]) {

package/src/api_docs/InstallSnippet.svelte

@@ -2,7 +2,12 @@
 	import CopyButton from "./CopyButton.svelte";
 	import { Block } from "@gradio/atoms";
 
-	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp";
 
 	let py_install = "pip install gradio_client";
 	let js_install = "npm i -D @gradio/client";

package/src/api_docs/ParametersSnippet.svelte

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

package/src/api_docs/RecordingSnippet.svelte

@@ -9,7 +9,12 @@
 	export let short_root: string;
 	export let root: string;
 	export let api_prefix = "";
-	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let current_language:
+		| "python"
+		| "javascript"
+		| "bash"
+		| "skill"
+		| "mcp";
 	export let username: string | null;
 
 	let python_code: HTMLElement;

package/src/api_docs/ResponseSnippet.svelte

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

package/src/api_docs/Settings.svelte

@@ -6,6 +6,7 @@
 	import { BaseCheckbox as Checkbox } from "@gradio/checkbox";
 	import { language_choices, changeLocale } from "../i18n";
 	import { locale, _ } from "svelte-i18n";
+	import { get } from "svelte/store";
 	import record from "./img/record.svg";
 
 	let {
@@ -52,15 +53,9 @@
 		};
 	});
 
-	let current_locale: string = $state("en");
+	let current_locale: string = $state(get(locale) ?? "en");
 	let current_theme: "light" | "dark" | "system" = $state("system");
 
-	locale.subscribe((value) => {
-		if (value) {
-			current_locale = value;
-		}
-	});
-
 	function handleLanguageChange(value: string): void {
 		const new_locale = value;
 		changeLocale(new_locale);

package/src/api_docs/SettingsBanner.svelte

@@ -2,11 +2,8 @@
 	import { _ } from "svelte-i18n";
 	import settings_logo from "./img/settings-logo.svg";
 	import Clear from "./img/clear.svelte";
-	import { setupi18n } from "../i18n";
 
 	let { root, onclose }: { root: string; onclose?: () => void } = $props();
-
-	setupi18n();
 </script>
 
 <h2>

package/src/api_docs/SkillSnippet.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { Block } from "@gradio/atoms";
+	import CopyButton from "./CopyButton.svelte";
+
+	export let space_id: string | null;
+
+	$: effective_space_id = space_id || "";
+	$: skill_id = effective_space_id.replace("/", "-");
+	$: install_gradio = "pip install --upgrade gradio";
+	$: install_cmd_claude = `gradio skills add ${effective_space_id} --claude`;
+	$: install_cmd_cursor = `gradio skills add ${effective_space_id} --cursor`;
+	$: install_cmd_codex = `gradio skills add ${effective_space_id} --codex`;
+
+	$: skill_preview = `---
+name: ${skill_id}
+description: Use the ${effective_space_id} Gradio Space via API. Provides Python, JavaScript, and cURL usage examples.
+---
+
+# ${effective_space_id}
+
+This skill describes how to use the ${effective_space_id} Gradio Space programmatically.
+
+## API Endpoints
+...`;
+</script>
+
+<div class="skill-content">
+	<p class="padded">1. Make sure you are using the latest version of Gradio:</p>
+	<Block>
+		<code>
+			<div class="copy">
+				<CopyButton code={install_gradio} />
+			</div>
+			<div>
+				<pre>$ {install_gradio}</pre>
+			</div>
+		</code>
+	</Block>
+
+	<p class="padded">
+		2. Install the usage of this Space as a Skill for your coding agent by
+		running this in your terminal:
+	</p>
+	<Block>
+		<code>
+			<div class="copy">
+				<CopyButton code={install_cmd_claude} />
+			</div>
+			<div>
+				<pre>$ {install_cmd_claude}</pre>
+			</div>
+		</code>
+	</Block>
+	<p class="hint">
+		Instead of <span class="inline-code">--claude</span>, you can use
+		<span class="inline-code">--cursor</span>,
+		<span class="inline-code">--codex</span>, or
+		<span class="inline-code">--opencode</span>. Combine flags to install for
+		multiple agents. Use <span class="inline-code">--global</span> to install user-level
+		instead of per-project.
+	</p>
+
+	<p class="padded">
+		3. This will add a skill to your coding agent that describes how to use this
+		Space via Python, JavaScript, and cURL API. The skill will look like this:
+	</p>
+	<Block>
+		<code>
+			<div class="copy">
+				<CopyButton code={skill_preview} />
+			</div>
+			<div>
+				<pre>{skill_preview}</pre>
+			</div>
+		</code>
+	</Block>
+</div>
+
+<style>
+	.skill-content {
+		margin-top: var(--size-2);
+	}
+
+	p.padded {
+		padding: 15px 0px;
+		font-size: var(--text-lg);
+	}
+
+	.hint {
+		margin-top: var(--size-2);
+		color: var(--body-text-color);
+		opacity: 0.8;
+		font-size: var(--text-md);
+		line-height: 1.6;
+	}
+
+	.inline-code {
+		display: inline;
+		font-family: var(--font-mono);
+		font-size: var(--text-md);
+		background: var(--background-fill-secondary);
+		padding: 1px 4px;
+		border-radius: var(--radius-sm);
+	}
+
+	code pre {
+		overflow-x: auto;
+		color: var(--body-text-color);
+		font-family: var(--font-mono);
+		tab-size: 2;
+	}
+
+	code {
+		position: relative;
+		display: block;
+	}
+
+	.copy {
+		position: absolute;
+		top: 0;
+		right: 0;
+		margin-top: -5px;
+		margin-right: -5px;
+	}
+</style>

package/src/api_docs/img/skill.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="14 22 122 106" style="background-color: #ffffff;">
+<rect x="22" y="28" width="106" height="94" rx="8" fill="none" stroke="#374151" stroke-width="6"/>
+<rect x="22" y="28" width="106" height="20" rx="8" fill="#374151" fill-opacity="0.08"/>
+<circle cx="38" cy="38" r="4" fill="#ff5f57"/>
+<circle cx="52" cy="38" r="4" fill="#febc2e"/>
+<circle cx="66" cy="38" r="4" fill="#28c840"/>
+<text x="38" y="76" fill="#374151" font-family="monospace" font-size="22" font-weight="bold">&gt;_</text>
+<rect x="38" y="88" width="50" height="4" rx="2" fill="#374151" fill-opacity="0.35"/>
+<rect x="38" y="100" width="35" height="4" rx="2" fill="#374151" fill-opacity="0.2"/>
+</svg>

package/src/api_docs/utils.ts

@@ -47,31 +47,6 @@ export function represent_value(
 	return stringify_except_file_function(value);
 }
 
-export function is_potentially_nested_file_data(obj: any): boolean {
-	if (typeof obj === "object" && obj !== null) {
-		if (obj.hasOwnProperty("url") && obj.hasOwnProperty("meta")) {
-			if (
-				typeof obj.meta === "object" &&
-				obj.meta !== null &&
-				obj.meta._type === "gradio.FileData"
-			) {
-				return true;
-			}
-		}
-	}
-	if (typeof obj === "object" && obj !== null) {
-		for (let key in obj) {
-			if (typeof obj[key] === "object") {
-				let result = is_potentially_nested_file_data(obj[key]);
-				if (result) {
-					return true;
-				}
-			}
-		}
-	}
-	return false;
-}
-
 function simplify_file_data(obj: any): any {
 	if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
 		if (

package/src/dependency.ts

@@ -205,8 +205,10 @@ export class DependencyManager {
 	get_state_cb: GetStateCallback;
 	rerender_cb: RerenderCallback;
 	log_cb: LogCallback;
+	on_connection_lost_cb: () => void;
 
 	loading_stati = new LoadingStatus();
+	connection_lost = false;
 
 	constructor(
 		dependencies: IDependency[],
@@ -226,13 +228,15 @@ export class DependencyManager {
 			duration?: number | null,
 			visible?: boolean
 		) => void,
-		add_to_api_calls: (payload: Payload) => void
+		add_to_api_calls: (payload: Payload) => void,
+		on_connection_lost_cb: () => void
 	) {
 		this.add_to_api_calls = add_to_api_calls;
 		this.log_cb = log_cb;
 		this.update_state_cb = update_state_cb;
 		this.get_state_cb = get_state_cb;
 		this.rerender_cb = rerender_cb;
+		this.on_connection_lost_cb = on_connection_lost_cb;
 		this.client = client;
 		this.reload(
 			dependencies,
@@ -318,6 +322,7 @@ export class DependencyManager {
 	 * @returns a value if there is no backend fn, a 'submission' if there is a backend fn, or null if there is no dependency
 	 */
 	async dispatch(event_meta: DispatchFunction | DispatchEvent): Promise<void> {
+		if (this.connection_lost) return;
 		let deps: Dependency[] | undefined;
 		if (event_meta.type === "fn") {
 			const dep = this.dependencies_by_fn.get(event_meta.fn_index!);
@@ -484,6 +489,19 @@ export class DependencyManager {
 									});
 									this.update_loading_stati_state();
 								} else if (result.stage === "error") {
+									if (result.broken || result.session_not_found) {
+										if (!this.connection_lost) {
+											this.connection_lost = true;
+											this.on_connection_lost_cb();
+										}
+										this.loading_stati.update({
+											status: "complete",
+											fn_index: dep.id,
+											stream_state: null
+										});
+										this.update_loading_stati_state();
+										break submit_loop;
+									}
 									if (Array.isArray(result?.message)) {
 										result.message.forEach((m: ValidationError, i) => {
 											this.update_state_cb(
@@ -806,6 +824,26 @@ export class DependencyManager {
 				});
 				this.update_loading_stati_state();
 				this.submissions.delete(id);
+				// Need to trigger any dependencies that are waiting for this one to complete
+				const { failure, all } = this.dependencies_by_fn
+					.get(id)
+					?.get_triggers() || { failure: [], all: [] };
+				failure.forEach((dep_id) => {
+					this.dispatch({
+						type: "fn",
+						fn_index: dep_id,
+						event_data: null,
+						target_id: id
+					});
+				});
+				all.forEach((dep_id) => {
+					this.dispatch({
+						type: "fn",
+						fn_index: dep_id,
+						event_data: null,
+						target_id: id
+					});
+				});
 			}
 		}
 	}