@gradio/core 1.1.3 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @gradio/core
 
+## 1.2.0
+
+### Features
+
+- [#12839](https://github.com/gradio-app/gradio/pull/12839) [`1c671b3`](https://github.com/gradio-app/gradio/commit/1c671b39830ccf1c87f6cfcb4669e97dfb3a7367) - Hide forms with no elements.  Thanks @aliabid94!
+
+### Fixes
+
+- [#12875](https://github.com/gradio-app/gradio/pull/12875) [`d0b3422`](https://github.com/gradio-app/gradio/commit/d0b34228d756334d901fc34971959ea422eb55bd) - Fix stop button not switching back to submit button in chat interface.  Thanks @freddyaboulton!
+- [#12797](https://github.com/gradio-app/gradio/pull/12797) [`6a0c6ea`](https://github.com/gradio-app/gradio/commit/6a0c6eae53931ec137c0b8379428acc8a7ea27c9) - Refactor translation logic.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/utils@0.11.3
+- @gradio/atoms@0.22.0
+- @gradio/statustracker@0.12.4
+- @gradio/tabs@0.5.6
+- @gradio/code@0.17.3
+- @gradio/paramviewer@0.9.4
+- @gradio/upload@0.17.6
+- @gradio/video@0.20.3
+- @gradio/file@0.14.3
+- @gradio/image@0.25.3
+- @gradio/gallery@0.17.1
+- @gradio/plot@0.10.4
+- @gradio/checkbox@0.6.3
+- @gradio/textbox@0.13.4
+- @gradio/dropdown@0.11.4
+- @gradio/audio@0.22.3
+
 ## 1.1.3
 
 ### Fixes

package/dist/src/Blocks.svelte

@@ -12,7 +12,6 @@
 		LayoutNode
 	} from "./types";
 	// import type { UpdateTransaction } from "./_init";
-	import { setupi18n } from "./i18n";
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
 	import type { ToastMessage } from "@gradio/statustracker";

package/dist/src/_init.js

@@ -3,7 +3,7 @@ import { dequal } from "dequal";
 import { load_component } from "virtual:component-loader";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
-import { i18n_marker } from "./i18n";
+import { has_i18n_marker } from "@gradio/utils";
 const shared_props = [
     "elem_id",
     "elem_classes",
@@ -225,7 +225,7 @@ export function create_components({ initial_layout = undefined } = {
             const _type = instance.type === "walkthrough" ? "walkthroughstep" : "tabitem";
             const child_tab_items = tab_items_props.filter((child) => child.type === _type);
             instance.props.initial_tabs = child_tab_items?.map((child) => ({
-                label: child.props.label.includes(i18n_marker) ? "" : child.props.label,
+                label: has_i18n_marker(child.props.label) ? "" : child.props.label,
                 id: child.props.id,
                 visible: typeof child.props.visible === "boolean" ||
                     child.props.visible === "hidden"

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/dependency.js

@@ -567,6 +567,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();

package/dist/src/init.svelte.js

@@ -1,5 +1,4 @@
 import { determine_interactivity, get_component, get_inputs_outputs } from "./init_utils";
-import { translate_if_needed } from "./i18n";
 import { tick } from "svelte";
 import { dequal } from "dequal";
 import {} from "@gradio/utils";
@@ -130,8 +129,6 @@ export class AppTree {
         this.root = this.traverse(tree, [
             (node) => handle_visibility(node, this.#config.api_url),
             (node) => untrack_children_of_invisible_parents(node, this.components_to_register),
-            (node) => handle_empty_forms(node, this.components_to_register),
-            (node) => translate_props(node),
             (node) => apply_initial_tabs(node, this.initial_tabs),
             (node) => this.find_attached_events(node, this.#dependency_payload),
             (node) => untrack_children_of_closed_accordions_or_inactive_tabs(node, this.components_to_register, this.#hidden_on_startup)
@@ -269,7 +266,6 @@ export class AppTree {
                 //@ts-ignore
                 (n) => set_visibility_for_updated_node(n, id, new_state.visible),
                 //@ts-ignore
-                (n) => update_parent_visibility(n, id, new_state.visible),
                 (n) => handle_visibility(n, this.#config.api_url)
             ]);
             await tick();
@@ -302,10 +298,6 @@ export class AppTree {
         // any values currently in the UI.
         // @ts-ignore
         await this.update_visibility(node, new_state);
-        const parent_node = find_parent(this.root, id);
-        if (parent_node)
-            // @ts-ignore
-            update_parent_visibility(parent_node, id, new_state.visible);
     }
     /**
      * Gets the current state of a component by its ID
@@ -482,61 +474,6 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(node, components
     }
     return node;
 }
-function handle_empty_forms(node, components_to_register) {
-    // Check if the node is visible
-    if (node.type === "form") {
-        const all_children_invisible = node.children.every((child) => child.props.shared_props.visible === false);
-        if (all_children_invisible) {
-            node.props.shared_props.visible = false;
-            components_to_register.delete(node.id);
-            return node;
-        }
-    }
-    return node;
-}
-function update_parent_visibility(node, child_made_visible, visibility_state) {
-    // This function was added to address a tricky situation:
-    // Form components are wrapped in a Form component automatically.
-    // If all the children of the Form are invisible, the Form itself is marked invisible.
-    // in AppTree.postprocess -> handle_empty_forms
-    // This is to avoid rendering empty forms in the UI. They look ugly.
-    // So what happens when a child inside the Form is made visible again?
-    // The Form needs to become visible again too.
-    // If the child is made invisible, the form should be too if all other children are invisible.
-    // However, we are not doing this now since what we want to do is fetch the latest visibility of all
-    // the children from the UI. However, get_data only returns the props, not the shared props.
-    if (node.type === "form" &&
-        node.children.length &&
-        node.children.some((child) => child.id === child_made_visible)) {
-        if (visibility_state === true)
-            node.props.shared_props.visible = true;
-        else if (!visibility_state && node.children.length === 1)
-            node.props.shared_props.visible = "hidden";
-    }
-    return node;
-}
-function translate_props(node) {
-    const supported_props = [
-        "description",
-        "info",
-        "title",
-        "placeholder",
-        "value",
-        "label"
-    ];
-    for (const attr of Object.keys(node.props.shared_props)) {
-        if (supported_props.includes(attr)) {
-            // @ts-ignore
-            node.props.shared_props[attr] = translate_if_needed(node.props.shared_props[attr]);
-        }
-    }
-    for (const attr of Object.keys(node.props.props)) {
-        if (supported_props.includes(attr)) {
-            node.props.props[attr] = translate_if_needed(node.props.props[attr]);
-        }
-    }
-    return node;
-}
 function apply_initial_tabs(node, initial_tabs) {
     if (node.type === "tabs" && node.id in initial_tabs) {
         const tabs = initial_tabs[node.id].sort((a, b) => a.order - b.order);

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/atoms": "^0.21.0",
-    "@gradio/annotatedimage": "^0.11.2",
-    "@gradio/audio": "^0.22.2",
-    "@gradio/box": "^0.2.29",
-    "@gradio/accordion": "^0.5.30",
+    "@gradio/accordion": "^0.5.31",
+    "@gradio/audio": "^0.22.3",
+    "@gradio/atoms": "^0.22.0",
+    "@gradio/box": "^0.2.30",
+    "@gradio/annotatedimage": "^0.11.3",
     "@gradio/browserstate": "^0.3.6",
     "@gradio/button": "^0.6.3",
-    "@gradio/checkbox": "^0.6.2",
-    "@gradio/checkboxgroup": "^0.9.2",
-    "@gradio/code": "^0.17.2",
-    "@gradio/colorpicker": "^0.5.5",
+    "@gradio/checkbox": "^0.6.3",
+    "@gradio/checkboxgroup": "^0.9.3",
     "@gradio/client": "^2.0.4",
+    "@gradio/code": "^0.17.3",
+    "@gradio/colorpicker": "^0.5.6",
+    "@gradio/dataframe": "^0.21.5",
+    "@gradio/dataset": "^0.5.4",
+    "@gradio/chatbot": "^0.29.4",
     "@gradio/column": "^0.3.2",
-    "@gradio/chatbot": "^0.29.3",
-    "@gradio/dataframe": "^0.21.4",
-    "@gradio/datetime": "^0.4.2",
-    "@gradio/dataset": "^0.5.3",
+    "@gradio/datetime": "^0.4.3",
+    "@gradio/dropdown": "^0.11.4",
+    "@gradio/fallback": "^0.4.34",
+    "@gradio/file": "^0.14.3",
+    "@gradio/form": "^0.3.0",
     "@gradio/downloadbutton": "^0.4.17",
-    "@gradio/dropdown": "^0.11.3",
-    "@gradio/fallback": "^0.4.33",
-    "@gradio/fileexplorer": "^0.6.2",
-    "@gradio/form": "^0.2.30",
-    "@gradio/file": "^0.14.2",
-    "@gradio/gallery": "^0.17.0",
+    "@gradio/gallery": "^0.17.1",
+    "@gradio/fileexplorer": "^0.6.3",
     "@gradio/group": "^0.3.2",
-    "@gradio/highlightedtext": "^0.11.1",
-    "@gradio/html": "^0.9.2",
+    "@gradio/highlightedtext": "^0.11.2",
+    "@gradio/html": "^0.9.3",
     "@gradio/icons": "^0.15.1",
-    "@gradio/image": "^0.25.2",
-    "@gradio/imageeditor": "^0.18.5",
-    "@gradio/imageslider": "^0.4.2",
-    "@gradio/json": "^0.7.1",
-    "@gradio/markdown": "^0.13.27",
-    "@gradio/label": "^0.6.2",
-    "@gradio/model3d": "^0.16.3",
-    "@gradio/multimodaltextbox": "^0.11.5",
-    "@gradio/nativeplot": "^0.10.1",
-    "@gradio/number": "^0.8.2",
-    "@gradio/paramviewer": "^0.9.3",
-    "@gradio/radio": "^0.9.2",
-    "@gradio/plot": "^0.10.3",
-    "@gradio/simpledropdown": "^0.3.33",
-    "@gradio/sidebar": "^0.2.2",
+    "@gradio/imageeditor": "^0.18.6",
+    "@gradio/image": "^0.25.3",
+    "@gradio/label": "^0.6.3",
+    "@gradio/json": "^0.7.2",
+    "@gradio/imageslider": "^0.4.3",
+    "@gradio/markdown": "^0.13.28",
+    "@gradio/model3d": "^0.16.4",
+    "@gradio/multimodaltextbox": "^0.11.6",
+    "@gradio/paramviewer": "^0.9.4",
+    "@gradio/nativeplot": "^0.10.2",
+    "@gradio/number": "^0.8.3",
+    "@gradio/plot": "^0.10.4",
+    "@gradio/radio": "^0.9.3",
     "@gradio/row": "^0.3.1",
-    "@gradio/simpleimage": "^0.9.4",
-    "@gradio/simpletextbox": "^0.3.35",
-    "@gradio/slider": "^0.7.4",
+    "@gradio/simpletextbox": "^0.3.36",
+    "@gradio/simpledropdown": "^0.3.34",
+    "@gradio/sidebar": "^0.2.3",
+    "@gradio/simpleimage": "^0.9.5",
+    "@gradio/slider": "^0.7.6",
     "@gradio/state": "^0.2.2",
-    "@gradio/statustracker": "^0.12.3",
     "@gradio/tabitem": "^0.6.5",
-    "@gradio/tabs": "^0.5.5",
-    "@gradio/textbox": "^0.13.3",
+    "@gradio/statustracker": "^0.12.4",
+    "@gradio/tabs": "^0.5.6",
     "@gradio/theme": "^0.6.1",
-    "@gradio/upload": "^0.17.5",
+    "@gradio/textbox": "^0.13.4",
+    "@gradio/upload": "^0.17.6",
     "@gradio/timer": "^0.4.8",
-    "@gradio/utils": "^0.11.2",
     "@gradio/uploadbutton": "^0.9.17",
-    "@gradio/vibeeditor": "^0.3.4",
-    "@gradio/video": "^0.20.2"
+    "@gradio/utils": "^0.11.3",
+    "@gradio/video": "^0.20.3",
+    "@gradio/vibeeditor": "^0.3.5"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -12,7 +12,6 @@
 		LayoutNode
 	} from "./types";
 	// import type { UpdateTransaction } from "./_init";
-	import { setupi18n } from "./i18n";
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
 	import type { ToastMessage } from "@gradio/statustracker";

package/src/_init.ts

@@ -12,8 +12,8 @@ import { load_component } from "virtual:component-loader";
 import type { client_return } from "@gradio/client";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
-import { i18n_marker } from "./i18n";
 import type { SharedProps } from "@gradio/utils";
+import { has_i18n_marker } from "@gradio/utils";
 
 export interface UpdateTransaction {
 	id: number;
@@ -423,7 +423,7 @@ export function create_components(
 			);
 
 			instance.props.initial_tabs = child_tab_items?.map((child) => ({
-				label: child.props.label.includes(i18n_marker) ? "" : child.props.label,
+				label: has_i18n_marker(child.props.label) ? "" : child.props.label,
 				id: child.props.id,
 				visible:
 					typeof child.props.visible === "boolean" ||

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/dependency.ts

@@ -806,6 +806,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/src/gradio_helper.ts

@@ -1,7 +1,7 @@
-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 type I18nFormatter = typeof formatter;
 
@@ -12,27 +12,15 @@ export function formatter(value: string | null | undefined): string {
 	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;
 }
 

package/src/i18n.test.ts

@@ -11,12 +11,12 @@ import { Lang, process_langs } from "./i18n";
 import languagesByAnyCode from "wikidata-lang/indexes/by_any_code";
 import BCP47 from "./lang/BCP47_codes";
 import {
-	translate_if_needed,
 	get_initial_locale,
 	load_translations,
 	changeLocale,
 	is_translation_metadata
 } from "./i18n";
+import { formatter } from "./gradio_helper";
 import { loading } from "./lang/loading";
 
 const loading_count = Object.keys(loading).length;
@@ -28,8 +28,16 @@ vi.mock("svelte-i18n", () => ({
 	init: vi.fn().mockResolvedValue(undefined)
 }));
 
+const mock_translations: Record<string, string> = {
+	"common.submit": "Submit",
+	"common.name": "Name",
+	"common.greeting": "Hello",
+	"common.submit_es": "Enviar",
+	"common.name_es": "Nombre"
+};
+
 vi.mock("svelte/store", () => ({
-	get: vi.fn((store) => store),
+	get: vi.fn(() => (key: string) => mock_translations[key] ?? key),
 	derived: vi.fn()
 }));
 
@@ -66,13 +74,6 @@ describe("i18n", () => {
 		);
 	});
 
-	describe("basic functions", () => {
-		test("translate_if_needed handles regular strings", () => {
-			const regularString = "hello world";
-			expect(translate_if_needed(regularString)).toBe(regularString);
-		});
-	});
-
 	describe("locale management", () => {
 		test("get_initial_locale returns browser locale when available", () => {
 			const result = get_initial_locale("fr", ["en", "fr", "de"]);
@@ -155,4 +156,35 @@ describe("i18n", () => {
 			expect(Boolean(is_translation_metadata("not an object"))).toBe(false);
 		});
 	});
+
+	describe("formatter", () => {
+		test("translates i18n markers", () => {
+			expect(formatter('__i18n__{"key":"common.submit"}')).toBe("Submit");
+			expect(formatter('Click: __i18n__{"key":"common.submit"}')).toBe(
+				"Click: Submit"
+			);
+			expect(formatter('__i18n__{"key":"common.name"} field')).toBe(
+				"Name field"
+			);
+			expect(formatter('__i18n__{"key":"common.submit_es"}')).toBe("Enviar");
+		});
+
+		test("returns key when no translation exists", () => {
+			expect(formatter('__i18n__{"key":"unknown.key"}')).toBe("unknown.key");
+		});
+
+		test("handles null, undefined, and plain text", () => {
+			expect(formatter(null)).toBe("");
+			expect(formatter(undefined)).toBe("");
+			expect(formatter("Hello world")).toBe("Hello world");
+		});
+
+		test("handles malformed markers", () => {
+			expect(formatter("__i18n__")).toBe("__i18n__");
+			expect(formatter('__i18n__{"key":"test.key"')).toBe(
+				'__i18n__{"key":"test.key"'
+			);
+			expect(formatter("__i18n__{invalid}")).toBe("__i18n__{invalid}");
+		});
+	});
 });

package/src/i18n.ts

@@ -6,7 +6,6 @@ import {
 	register,
 	waitLocale
 } from "svelte-i18n";
-import { formatter } from "./gradio_helper";
 import { loading } from "./lang/loading";
 
 const lang_map = {
@@ -71,63 +70,7 @@ export function is_translation_metadata(obj: any): obj is I18nData {
 	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: any): string {
-	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(): LangsRecord {
 	const lazy_langs = Object.fromEntries(
@@ -150,8 +93,6 @@ export const language_choices: [string, string][] = Object.entries(
 	processed_langs
 ).map(([code]) => [lang_map[code as keyof typeof lang_map] || code, code]);
 
-export let all_common_keys: Set<string> = new Set();
-
 let i18n_initialized = false;
 let previous_translations: Record<string, Record<string, string>> | undefined;
 
@@ -183,15 +124,21 @@ export async function setupi18n(
 		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: string | null = null;
 	const browser_locale = getLocaleFromNavigator();
+
 	if (preferred_locale) {
 		initial_locale = get_lang_from_preferred_locale(preferred_locale);
 	} else {

package/src/init.svelte.ts

@@ -3,7 +3,6 @@ import {
 	get_component,
 	get_inputs_outputs
 } from "./init_utils";
-import { translate_if_needed } from "./i18n";
 import { tick } from "svelte";
 import { dequal } from "dequal";
 
@@ -222,8 +221,6 @@ export class AppTree {
 					node,
 					this.components_to_register
 				),
-			(node) => handle_empty_forms(node, this.components_to_register),
-			(node) => translate_props(node),
 			(node) => apply_initial_tabs(node, this.initial_tabs),
 			(node) => this.find_attached_events(node, this.#dependency_payload),
 			(node) =>
@@ -422,7 +419,6 @@ export class AppTree {
 				//@ts-ignore
 				(n) => set_visibility_for_updated_node(n, id, new_state.visible),
 				//@ts-ignore
-				(n) => update_parent_visibility(n, id, new_state.visible),
 				(n) => handle_visibility(n, this.#config.api_url)
 			]);
 			await tick();
@@ -453,10 +449,6 @@ export class AppTree {
 		// any values currently in the UI.
 		// @ts-ignore
 		await this.update_visibility(node, new_state);
-		const parent_node = find_parent(this.root!, id);
-		if (parent_node)
-			// @ts-ignore
-			update_parent_visibility(parent_node, id, new_state.visible);
 	}
 
 	/**
@@ -701,78 +693,6 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(
 	return node;
 }
 
-function handle_empty_forms(
-	node: ProcessedComponentMeta,
-	components_to_register: Set<number>
-): ProcessedComponentMeta {
-	// Check if the node is visible
-	if (node.type === "form") {
-		const all_children_invisible = node.children.every(
-			(child) => child.props.shared_props.visible === false
-		);
-
-		if (all_children_invisible) {
-			node.props.shared_props.visible = false;
-			components_to_register.delete(node.id);
-			return node;
-		}
-	}
-
-	return node;
-}
-
-function update_parent_visibility(
-	node: ProcessedComponentMeta,
-	child_made_visible: number,
-	visibility_state: boolean | "hidden"
-): ProcessedComponentMeta {
-	// This function was added to address a tricky situation:
-	// Form components are wrapped in a Form component automatically.
-	// If all the children of the Form are invisible, the Form itself is marked invisible.
-	// in AppTree.postprocess -> handle_empty_forms
-	// This is to avoid rendering empty forms in the UI. They look ugly.
-	// So what happens when a child inside the Form is made visible again?
-	// The Form needs to become visible again too.
-	// If the child is made invisible, the form should be too if all other children are invisible.
-	// However, we are not doing this now since what we want to do is fetch the latest visibility of all
-	// the children from the UI. However, get_data only returns the props, not the shared props.
-	if (
-		node.type === "form" &&
-		node.children.length &&
-		node.children.some((child) => child.id === child_made_visible)
-	) {
-		if (visibility_state === true) node.props.shared_props.visible = true;
-		else if (!visibility_state && node.children.length === 1)
-			node.props.shared_props.visible = "hidden";
-	}
-	return node;
-}
-
-function translate_props(node: ProcessedComponentMeta): ProcessedComponentMeta {
-	const supported_props = [
-		"description",
-		"info",
-		"title",
-		"placeholder",
-		"value",
-		"label"
-	];
-	for (const attr of Object.keys(node.props.shared_props)) {
-		if (supported_props.includes(attr as string)) {
-			// @ts-ignore
-			node.props.shared_props[attr] = translate_if_needed(
-				node.props.shared_props[attr as keyof SharedProps]
-			);
-		}
-	}
-	for (const attr of Object.keys(node.props.props)) {
-		if (supported_props.includes(attr as string)) {
-			node.props.props[attr] = translate_if_needed(node.props.props[attr]);
-		}
-	}
-	return node;
-}
-
 function apply_initial_tabs(
 	node: ProcessedComponentMeta,
 	initial_tabs: Record<number, Tab[]>