@gradio/core 1.1.3 → 1.3.0

package/dist/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/dist/src/api_docs/ParametersSnippet.svelte.d.ts

@@ -15,7 +15,7 @@ declare const ParametersSnippet: $$__sveltets_2_IsomorphicComponent<{
     is_running: boolean;
     endpoint_returns: any;
     js_returns: any;
-    current_language: "python" | "javascript" | "bash" | "mcp";
+    current_language: "python" | "javascript" | "bash" | "skill" | "mcp";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/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/dist/src/api_docs/RecordingSnippet.svelte.d.ts

@@ -17,7 +17,7 @@ declare const RecordingSnippet: $$__sveltets_2_IsomorphicComponent<{
     short_root: string;
     root: string;
     api_prefix?: string;
-    current_language: "python" | "javascript" | "bash" | "mcp";
+    current_language: "python" | "javascript" | "bash" | "skill" | "mcp";
     username: string | null;
     api_calls?: Payload[];
 }, {

package/dist/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/dist/src/api_docs/ResponseSnippet.svelte.d.ts

@@ -15,7 +15,7 @@ declare const ResponseSnippet: $$__sveltets_2_IsomorphicComponent<{
     is_running: boolean;
     endpoint_returns: any;
     js_returns: any;
-    current_language: "python" | "javascript" | "bash" | "mcp";
+    current_language: "python" | "javascript" | "bash" | "skill" | "mcp";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/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/dist/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/dist/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/dist/src/api_docs/SkillSnippet.svelte.d.ts

@@ -0,0 +1,20 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SkillSnippet: $$__sveltets_2_IsomorphicComponent<{
+    space_id: string | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SkillSnippet = InstanceType<typeof SkillSnippet>;
+export default SkillSnippet;

package/dist/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/dist/src/api_docs/utils.d.ts

@@ -1,4 +1,3 @@
 export declare function represent_value(value: string, type: string | undefined, lang?: "js" | "py" | "bash" | null): string | null | number | boolean | Record<string, unknown>;
-export declare function is_potentially_nested_file_data(obj: any): boolean;
 export declare function format_latency(val: number): string;
 export declare function get_color_from_success_rate(success_rate: number): string;

package/dist/src/api_docs/utils.js

@@ -48,28 +48,6 @@ export function represent_value(value, type, lang = null) {
     }
     return stringify_except_file_function(value);
 }
-export function is_potentially_nested_file_data(obj) {
-    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) {
     if (typeof obj === "object" && obj !== null && !Array.isArray(obj)) {
         if ("url" in obj &&

package/dist/src/dependency.d.ts

@@ -85,8 +85,10 @@ export declare class DependencyManager {
     get_state_cb: GetStateCallback;
     rerender_cb: RerenderCallback;
     log_cb: LogCallback;
+    on_connection_lost_cb: () => void;
     loading_stati: LoadingStatus;
-    constructor(dependencies: IDependency[], client: Client, update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>, get_state_cb: (id: number) => Promise<Record<string, unknown> | null>, rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void, log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void, add_to_api_calls: (payload: Payload) => void);
+    connection_lost: boolean;
+    constructor(dependencies: IDependency[], client: Client, update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>, get_state_cb: (id: number) => Promise<Record<string, unknown> | null>, rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void, log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void, add_to_api_calls: (payload: Payload) => void, on_connection_lost_cb: () => void);
     reload(dependencies: IDependency[], update_state: UpdateStateCallback, get_state: GetStateCallback, rerender: RerenderCallback, client: Client): void;
     register_loading_stati(deps: Map<number, Dependency>): void;
     clear_loading_status(component_id: number): void;

package/dist/src/dependency.js

@@ -118,13 +118,16 @@ export class DependencyManager {
     get_state_cb;
     rerender_cb;
     log_cb;
+    on_connection_lost_cb;
     loading_stati = new LoadingStatus();
-    constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls) {
+    connection_lost = false;
+    constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls, on_connection_lost_cb) {
         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, update_state_cb, get_state_cb, rerender_cb, client);
     }
@@ -180,6 +183,8 @@ 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) {
+        if (this.connection_lost)
+            return;
         let deps;
         if (event_meta.type === "fn") {
             const dep = this.dependencies_by_fn.get(event_meta.fn_index);
@@ -314,6 +319,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, i) => {
                                             this.update_state_cb(dep.inputs[i], {
@@ -567,6 +585,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
+                    });
+                });
             }
         }
     }

package/dist/src/gradio_helper.js

@@ -1,28 +1,20 @@
-import { all_common_keys } from "./i18n";
 import { _ } from "svelte-i18n";
 import { get, derived } from "svelte/store";
 export { Gradio } from "@gradio/utils";
+import { I18N_MARKER, translate_i18n_marker } from "@gradio/utils";
 export function formatter(value) {
     if (value == null) {
         return "";
     }
     const string_value = String(value);
     const translate = get(_);
-    let direct_translation = translate(string_value);
+    if (string_value.includes(I18N_MARKER)) {
+        return translate_i18n_marker(string_value, translate);
+    }
+    const direct_translation = translate(string_value);
     if (direct_translation !== string_value) {
         return direct_translation;
     }
-    const lower_value = string_value.toLowerCase();
-    for (const common_key of all_common_keys) {
-        const key_name = common_key.substring(common_key.indexOf(".") + 1);
-        if (lower_value === key_name) {
-            const translation = translate(common_key);
-            if (translation !== common_key) {
-                return translation;
-            }
-            break;
-        }
-    }
     return string_value;
 }
 export const reactive_formatter = derived(_, () => formatter);

package/dist/src/i18n.d.ts

@@ -15,11 +15,9 @@ export interface LangsRecord {
     };
 }
 export declare function is_translation_metadata(obj: any): obj is I18nData;
-export declare const i18n_marker = "__i18n__";
-export declare function translate_if_needed(value: any): string;
+export { I18N_MARKER as i18n_marker } from "@gradio/utils";
 export declare function process_langs(): LangsRecord;
 export declare const language_choices: [string, string][];
-export declare let all_common_keys: Set<string>;
 export declare function setupi18n(custom_translations?: Record<string, Record<string, string>>, preferred_locale?: string): Promise<void>;
 export declare function changeLocale(new_locale: string): void;
 export declare function get_initial_locale(browser_locale: string | null, available_locales: string[], fallback_locale?: string): string;

package/dist/src/i18n.js

@@ -1,5 +1,4 @@
 import { addMessages, init, getLocaleFromNavigator, locale, register, waitLocale } from "svelte-i18n";
-import { formatter } from "./gradio_helper";
 import { loading } from "./lang/loading";
 const lang_map = {
     ar: "العربية",
@@ -43,55 +42,7 @@ export function is_translation_metadata(obj) {
         typeof obj.key === "string";
     return result;
 }
-export const i18n_marker = "__i18n__";
-// handles strings with embedded JSON metadata of shape "__i18n__{"key": "some.key"}"
-export function translate_if_needed(value) {
-    if (typeof value !== "string") {
-        return value;
-    }
-    const marker_index = value.indexOf(i18n_marker);
-    if (marker_index === -1) {
-        return value;
-    }
-    try {
-        const before_marker = marker_index > 0 ? value.substring(0, marker_index) : "";
-        const after_marker_index = marker_index + i18n_marker.length;
-        const json_start = value.indexOf("{", after_marker_index);
-        let json_end = -1;
-        let bracket_count = 0;
-        for (let i = json_start; i < value.length; i++) {
-            if (value[i] === "{")
-                bracket_count++;
-            if (value[i] === "}")
-                bracket_count--;
-            if (bracket_count === 0) {
-                json_end = i + 1;
-                break;
-            }
-        }
-        if (json_end === -1) {
-            console.error("Could not find end of JSON in i18n string");
-            return value;
-        }
-        const metadata_json = value.substring(json_start, json_end);
-        const after_json = json_end < value.length ? value.substring(json_end) : "";
-        try {
-            const metadata = JSON.parse(metadata_json);
-            if (metadata && metadata.key) {
-                const translated = formatter(metadata.key);
-                return before_marker + translated + after_json;
-            }
-        }
-        catch (jsonError) {
-            console.error("Error parsing i18n JSON:", jsonError);
-        }
-        return value;
-    }
-    catch (e) {
-        console.error("Error processing translation:", e);
-        return value;
-    }
-}
+export { I18N_MARKER as i18n_marker } from "@gradio/utils";
 export function process_langs() {
     const lazy_langs = Object.fromEntries(Object.entries(langs).map(([path, mod]) => [
         path.split("/").pop().split(".")[0],
@@ -105,7 +56,6 @@ export function process_langs() {
 const processed_langs = process_langs();
 const available_locales = Object.keys(processed_langs);
 export const language_choices = Object.entries(processed_langs).map(([code]) => [lang_map[code] || code, code]);
-export let all_common_keys = new Set();
 let i18n_initialized = false;
 let previous_translations;
 function get_lang_from_preferred_locale(header) {
@@ -125,10 +75,13 @@ export async function setupi18n(custom_translations, preferred_locale) {
     if (i18n_initialized && !should_reinitialize) {
         return;
     }
-    previous_translations = custom_translations;
+    const translations_to_use = custom_translations ?? previous_translations ?? {};
+    if (custom_translations !== undefined) {
+        previous_translations = custom_translations;
+    }
     load_translations({
         processed_langs,
-        custom_translations: custom_translations ?? {}
+        custom_translations: translations_to_use
     });
     let initial_locale = null;
     const browser_locale = getLocaleFromNavigator();