@gradio/core 0.16.1 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @gradio/core
 
+## 0.18.0
+
+### Features
+
+- [#11224](https://github.com/gradio-app/gradio/pull/11224) [`834e92c`](https://github.com/gradio-app/gradio/commit/834e92c187f200665c78c344f0b38f5adede807b) - Fix re-rendering with key when setting a value to None.  Thanks @aliabid94!
+- [#10832](https://github.com/gradio-app/gradio/pull/10832) [`d457438`](https://github.com/gradio-app/gradio/commit/d4574381bdd12709183c3affe740fada82b8baea) - Screen recording.  Thanks @dawoodkhan82!
+
+## 0.17.0
+
+### Features
+
+- [#11155](https://github.com/gradio-app/gradio/pull/11155) [`30a1d9e`](https://github.com/gradio-app/gradio/commit/30a1d9e2ac3013d9c844b236410010bce97ffaf5) - Improvements to MCP page.  Thanks @abidlabs!
+- [#11047](https://github.com/gradio-app/gradio/pull/11047) [`6d4b8a7`](https://github.com/gradio-app/gradio/commit/6d4b8a7f10daefc9c79aa224635da23fbaeebb76) - Implement custom i18n.  Thanks @hannahblair!
+
+### Fixes
+
+- [#11206](https://github.com/gradio-app/gradio/pull/11206) [`c196ac2`](https://github.com/gradio-app/gradio/commit/c196ac25b7744e9dcfa788b1ac8edf6551eec1ff) - Render key fixes.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/code@0.14.4
+- @gradio/paramviewer@0.7.9
+- @gradio/statustracker@0.10.11
+- @gradio/atoms@0.16.1
+- @gradio/client@1.15.0
+- @gradio/upload@0.16.5
+- @gradio/button@0.5.0
+- @gradio/image@0.22.6
+- @gradio/video@0.14.14
+- @gradio/file@0.12.18
+- @gradio/column@0.2.0
+- @gradio/gallery@0.15.19
+- @gradio/plot@0.9.16
+- @gradio/textbox@0.10.11
+- @gradio/checkbox@0.4.21
+
+## 0.16.1
+
+### Dependency updates
+
+- @gradio/tabs@0.4.4
+- @gradio/tabitem@0.4.4
+
 ## 0.16.1
 
 ### Fixes

package/dist/src/Blocks.svelte

@@ -1,6 +1,7 @@
 <script>import { tick, onMount } from "svelte";
 import { _ } from "svelte-i18n";
 import { Client } from "@gradio/client";
+import { writable } from "svelte/store";
 import { setupi18n } from "./i18n";
 import { ApiDocs, ApiRecorder, Settings } from "./api_docs/";
 import { Toast } from "@gradio/statustracker";
@@ -9,8 +10,9 @@ import { prefix_css } from "./css";
 import logo from "./images/logo.svg";
 import api_logo from "./api_docs/img/api-logo.svg";
 import settings_logo from "./api_docs/img/settings-logo.svg";
+import record_stop from "./api_docs/img/record-stop.svg";
 import { create_components, AsyncFunction } from "./init";
-setupi18n();
+import * as screen_recorder from "./screen_recorder";
 export let root;
 export let components;
 export let layout;
@@ -34,6 +36,7 @@ export let api_prefix = "";
 export let max_file_size = void 0;
 export let initial_layout = void 0;
 export let css = null;
+setupi18n(app.config?.i18n_translations ?? void 0);
 let {
   layout: _layout,
   targets,
@@ -74,6 +77,8 @@ export let search_params;
 let api_docs_visible = search_params.get("view") === "api" && show_api;
 let settings_visible = search_params.get("view") === "settings";
 let api_recorder_visible = search_params.get("view") === "api-recorder" && show_api;
+let allow_zoom = true;
+let allow_video_trim = true;
 function set_api_docs_visible(visible) {
   api_recorder_visible = false;
   api_docs_visible = visible;
@@ -99,6 +104,17 @@ let api_calls = [];
 export let render_complete = false;
 async function handle_update(data, fn_index) {
   const dep = dependencies.find((dep2) => dep2.id === fn_index);
+  const input_type = components.find(
+    (comp) => comp.id === dep?.inputs[0]
+  )?.type;
+  if (allow_zoom && dep && input_type !== "dataset") {
+    if (dep && dep.inputs && dep.inputs.length > 0 && $is_screen_recording) {
+      screen_recorder.zoom(true, dep.inputs, 1);
+    }
+    if (dep && dep.outputs && dep.outputs.length > 0 && $is_screen_recording) {
+      screen_recorder.zoom(false, dep.outputs, 2);
+    }
+  }
   if (!dep) {
     return;
   }
@@ -285,6 +301,9 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
     }
   }
   async function make_prediction(payload2, streaming = false) {
+    if (allow_video_trim) {
+      screen_recorder.markRemoveSegmentStart();
+    }
     if (api_recorder_visible) {
       api_calls = [...api_calls, JSON.parse(JSON.stringify(payload2))];
     }
@@ -472,6 +491,9 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
         });
       }
     }
+    if (allow_video_trim) {
+      screen_recorder.markRemoveSegmentEnd();
+    }
   }
 }
 function trigger_share(title2, description) {
@@ -612,6 +634,7 @@ function set_status(statuses) {
 function isCustomEvent(event) {
   return "detail" in event;
 }
+let is_screen_recording = writable(false);
 onMount(() => {
   document.addEventListener("visibilitychange", function() {
     if (document.visibilityState === "hidden") {
@@ -621,7 +644,23 @@ onMount(() => {
   is_mobile_device = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
     navigator.userAgent
   );
+  screen_recorder.initialize(
+    root,
+    (title2, message, type) => {
+      add_new_message(title2, message, type);
+    },
+    (isRecording) => {
+      $is_screen_recording = isRecording;
+    }
+  );
 });
+function screen_recording() {
+  if ($is_screen_recording) {
+    screen_recorder.stopRecording();
+  } else {
+    screen_recorder.startRecording();
+  }
+}
 </script>
 
 <svelte:head>
@@ -659,7 +698,11 @@ onMount(() => {
 					}}
 					class="show-api"
 				>
-					{$_("errors.use_via_api")}
+					{#if app.config?.mcp_server}
+						{$_("errors.use_via_api_or_mcp")}
+					{:else}
+						{$_("errors.use_via_api")}
+					{/if}
 					<img src={api_logo} alt={$_("common.logo")} />
 				</button>
 				<div class="divider show-api-divider">·</div>
@@ -673,6 +716,17 @@ onMount(() => {
 				{$_("common.built_with_gradio")}
 				<img src={logo} alt={$_("common.logo")} />
 			</a>
+			<div class="divider" class:hidden={!$is_screen_recording}>·</div>
+			<button
+				class:hidden={!$is_screen_recording}
+				on:click={() => {
+					screen_recording();
+				}}
+				class="record"
+			>
+				{$_("common.stop_recording")}
+				<img src={record_stop} alt={$_("common.stop_recording")} />
+			</button>
 			<div class="divider">·</div>
 			<button
 				on:click={() => {
@@ -745,9 +799,14 @@ onMount(() => {
 		/>
 		<div class="api-docs-wrap">
 			<Settings
+				bind:allow_zoom
+				bind:allow_video_trim
 				on:close={(event) => {
 					set_settings_visible(false);
 				}}
+				on:start_recording={(event) => {
+					screen_recording();
+				}}
 				pwa_enabled={app.config.pwa}
 				{root}
 				{space_id}
@@ -787,7 +846,8 @@ onMount(() => {
 	}
 
 	.show-api,
-	.settings {
+	.settings,
+	.record {
 		display: flex;
 		align-items: center;
 	}
@@ -807,13 +867,20 @@ onMount(() => {
 		width: var(--size-4);
 	}
 
+	.record img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-1);
+		width: var(--size-3);
+	}
+
 	.built-with {
 		display: flex;
 		align-items: center;
 	}
 
 	.built-with:hover,
-	.settings:hover {
+	.settings:hover,
+	.record:hover {
 		color: var(--body-text-color);
 	}
 
@@ -884,4 +951,8 @@ onMount(() => {
 	.show-api:hover {
 		color: var(--body-text-color);
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

package/dist/src/Render.svelte

@@ -1,4 +1,4 @@
-<script>import { Gradio, formatter } from "./gradio_helper";
+<script>import { Gradio, reactive_formatter } from "./gradio_helper";
 import { onMount, createEventDispatcher, setContext } from "svelte";
 import RenderComponent from "./RenderComponent.svelte";
 import { load_component } from "virtual:component-loader";
@@ -55,7 +55,7 @@ $:
     root,
     autoscroll,
     max_file_size,
-    formatter,
+    $reactive_formatter,
     client,
     load_component
   );

package/dist/src/RenderComponent.svelte

@@ -1,6 +1,7 @@
 <svelte:options immutable={true} />
 
-<script>import { bind, binding_callbacks } from "svelte/internal";
+<script>import { translate_if_needed } from "./i18n";
+import { bind, binding_callbacks } from "svelte/internal";
 export let root;
 export let component;
 export let target;
@@ -34,6 +35,25 @@ function wrap(component2) {
   return ProxiedMyClass;
 }
 const _component = wrap(component);
+const supported_props = [
+  "description",
+  "info",
+  "title",
+  "placeholder",
+  "value",
+  "label"
+];
+function translate_prop(obj) {
+  for (const key in obj) {
+    if (supported_props.includes(key)) {
+      obj[key] = translate_if_needed(obj[key]);
+    }
+  }
+}
+$:
+  translate_prop($$restProps);
+$:
+  value = translate_if_needed(value);
 </script>
 
 <!-- {#if visible} -->

package/dist/src/api_docs/ApiDocs.svelte

@@ -23,6 +23,7 @@ const js_docs = "https://www.gradio.app/guides/getting-started-with-the-js-clien
 const py_docs = "https://www.gradio.app/guides/getting-started-with-the-python-client";
 const bash_docs = "https://www.gradio.app/guides/querying-gradio-apps-with-curl";
 const spaces_docs_suffix = "#connecting-to-a-hugging-face-space";
+const mcp_docs = "https://www.gradio.app/guides/building-mcp-server-with-gradio";
 let api_count = dependencies.filter(
   (dependency) => dependency.show_api
 ).length;
@@ -326,7 +327,11 @@ onMount(() => {
 									</code>
 								</Block>
 								<p>&nbsp;</p>
-								<p>&nbsp;</p>
+								<p>
+									<a href={mcp_docs} target="_blank">
+										Read more about MCP in the Gradio docs
+									</a>
+								</p>
 							{:else}
 								This Gradio app can also serve as an MCP server, with an MCP
 								tool corresponding to each API endpoint. To enable this, launch

package/dist/src/api_docs/Settings.svelte

@@ -4,9 +4,13 @@ export let root;
 export let space_id;
 export let pwa_enabled;
 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";
+const dispatch = createEventDispatcher();
 if (root === "") {
   root = location.protocol + "//" + location.host + location.pathname;
 }
@@ -38,6 +42,8 @@ onMount(() => {
 });
 let current_locale;
 let current_theme = "system";
+export let allow_zoom = true;
+export let allow_video_trim = true;
 locale.subscribe((value) => {
   if (value) {
     current_locale = value;
@@ -47,6 +53,12 @@ function handleLanguageChange(e) {
   const new_locale = e.detail;
   changeLocale(new_locale);
 }
+function handleZoomChange(e) {
+  allow_zoom = e.detail;
+}
+function handleVideoTrimChange(e) {
+  allow_video_trim = e.detail;
+}
 setupi18n();
 </script>
 
@@ -112,6 +124,44 @@ setupi18n();
 		{/if}
 	</p>
 </div>
+<div class="banner-wrap">
+	<h2>{$_("common.screen_studio")} <span class="beta-tag">beta</span></h2>
+	<p class="padded">
+		Screen Studio allows you to record your screen and generates a video of your
+		app with automatically adding zoom in and zoom out effects as well as
+		trimming the video to remove the prediction time.
+		<br /><br />
+		Start recording by clicking the <i>Start Recording</i> button below and then
+		sharing the current browser tab of your Gradio demo. Use your app as you
+		would normally to generate a prediction.
+		<br />
+		Stop recording by clicking the <i>Stop Recording</i> button in the footer of
+		the demo.
+		<br /><br />
+		<Checkbox
+			label="Include automatic zoom in/out"
+			interactive={true}
+			value={allow_zoom}
+			on:change={handleZoomChange}
+		/>
+		<Checkbox
+			label="Include automatic video trimming"
+			interactive={true}
+			value={allow_video_trim}
+			on:change={handleVideoTrimChange}
+		/>
+	</p>
+	<button
+		class="record-button"
+		on:click={() => {
+			dispatch("close");
+			dispatch("start_recording");
+		}}
+	>
+		<img src={record} alt="Start Recording" />
+		Start Recording
+	</button>
+</div>
 
 <style>
 	.banner-wrap {
@@ -142,7 +192,8 @@ setupi18n();
 		margin-left: var(--size-2);
 	}
 
-	.theme-button {
+	.theme-button,
+	.record-button {
 		display: flex;
 		align-items: center;
 		border: 1px solid var(--border-color-primary);
@@ -154,6 +205,15 @@ setupi18n();
 		cursor: pointer;
 	}
 
+	.record-button img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-1);
+		width: var(--size-3);
+	}
+	.record-button:hover {
+		border-color: red;
+	}
+
 	.current-theme {
 		border: 1px solid var(--body-text-color-subdued);
 		color: var(--body-text-color);
@@ -173,4 +233,17 @@ setupi18n();
 		all: unset;
 		cursor: pointer;
 	}
+
+	.beta-tag {
+		position: relative;
+		top: -5px;
+		font-size: var(--text-xs);
+		background-color: var(--color-accent);
+		color: white;
+		padding: 2px 6px;
+		border-radius: 10px;
+		margin-left: 5px;
+		font-weight: normal;
+		text-transform: uppercase;
+	}
 </style>

package/dist/src/api_docs/Settings.svelte.d.ts

@@ -4,9 +4,12 @@ declare const __propDef: {
         root: string;
         space_id: string | null;
         pwa_enabled: boolean | undefined;
+        allow_zoom?: boolean | undefined;
+        allow_video_trim?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;
+        start_recording: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/src/api_docs/img/record-stop.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>record [#982]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-380.000000, -3839.000000)" fill="#FF0000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M338,3689 C338,3691.209 336.209,3693 334,3693 C331.791,3693 330,3691.209 330,3689 C330,3686.791 331.791,3685 334,3685 C336.209,3685 338,3686.791 338,3689 M334,3697 C329.589,3697 326,3693.411 326,3689 C326,3684.589 329.589,3681 334,3681 C338.411,3681 342,3684.589 342,3689 C342,3693.411 338.411,3697 334,3697 M334,3679 C328.477,3679 324,3683.477 324,3689 C324,3694.523 328.477,3699 334,3699 C339.523,3699 344,3694.523 344,3689 C344,3683.477 339.523,3679 334,3679" id="record-[#982]"> </path> </g> </g> </g> </g></svg>

package/dist/src/api_docs/img/record.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>record [#982]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-380.000000, -3839.000000)" fill="#808080"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M338,3689 C338,3691.209 336.209,3693 334,3693 C331.791,3693 330,3691.209 330,3689 C330,3686.791 331.791,3685 334,3685 C336.209,3685 338,3686.791 338,3689 M334,3697 C329.589,3697 326,3693.411 326,3689 C326,3684.589 329.589,3681 334,3681 C338.411,3681 342,3684.589 342,3689 C342,3693.411 338.411,3697 334,3697 M334,3679 C328.477,3679 324,3683.477 324,3689 C324,3694.523 328.477,3699 334,3699 C339.523,3699 344,3694.523 344,3689 C344,3683.477 339.523,3679 334,3679" id="record-[#982]"> </path> </g> </g> </g> </g></svg>

package/dist/src/gradio_helper.d.ts

@@ -1,14 +1,4 @@
 export { Gradio } from "@gradio/utils";
 export type I18nFormatter = typeof formatter;
-/**
- * i18n formatter with fallback to svelte-i18n's format function.
- *
- * @param value - The string to translate or format
- * @returns The translated string
- *
- * This formatter attempts translation in the following order:
- * 1. Direct translation of the input string
- * 2. Checks if input matches any common key names
- * 3. Falls back to svelte-i18n's format function
- */
 export declare function formatter(value: string | null | undefined): string;
+export declare const reactive_formatter: import("svelte/store").Readable<typeof formatter>;

package/dist/src/gradio_helper.js

@@ -1,25 +1,13 @@
-import { format, _ } from "svelte-i18n";
-import { get } from "svelte/store";
 import { all_common_keys } from "./i18n";
+import { _ } from "svelte-i18n";
+import { get, derived } from "svelte/store";
 export { Gradio } from "@gradio/utils";
-/**
- * i18n formatter with fallback to svelte-i18n's format function.
- *
- * @param value - The string to translate or format
- * @returns The translated string
- *
- * This formatter attempts translation in the following order:
- * 1. Direct translation of the input string
- * 2. Checks if input matches any common key names
- * 3. Falls back to svelte-i18n's format function
- */
 export function formatter(value) {
     if (value == null) {
         return "";
     }
     const string_value = String(value);
     const translate = get(_);
-    const initial_formatter = get(format);
     let direct_translation = translate(string_value);
     if (direct_translation !== string_value) {
         return direct_translation;
@@ -35,10 +23,6 @@ export function formatter(value) {
             break;
         }
     }
-    // fall back to the svelte-i18n formatter to maintain compatibility
-    const formatted = initial_formatter(string_value);
-    if (formatted !== string_value) {
-        return formatted;
-    }
     return string_value;
 }
+export const reactive_formatter = derived(_, () => formatter);

package/dist/src/i18n.d.ts

@@ -1,9 +1,16 @@
-type LangsRecord = Record<string, {
-    [key: string]: any;
-}>;
+export interface I18nData {
+    __type__: "translation_metadata";
+    key: string;
+}
+export interface LangsRecord {
+    [lang: string]: any;
+}
+export declare function is_translation_metadata(obj: any): obj is I18nData;
+export declare function translate_if_needed(value: any): string;
 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(): Promise<void>;
+export declare function setupi18n(custom_translations?: Record<string, Record<string, string>>): Promise<void>;
 export declare function changeLocale(new_locale: string): void;
-export {};
+export declare function get_initial_locale(browser_locale: string | null, available_locales: string[], fallback_locale?: string): string;
+export declare function load_translations(translations: LangsRecord | null | undefined): void;

package/dist/src/i18n.js

@@ -1,27 +1,87 @@
-import { addMessages, init, getLocaleFromNavigator, locale, _ } from "svelte-i18n";
+import { addMessages, init, getLocaleFromNavigator, locale } from "svelte-i18n";
+import { formatter } from "./gradio_helper";
 const langs = import.meta.glob("./lang/*.json", {
     eager: true
 });
-export function process_langs() {
-    let _langs = {};
-    for (const lang in langs) {
-        const code = lang.split("/").pop().split(".").shift();
-        _langs[code] = langs[lang].default;
+export function is_translation_metadata(obj) {
+    console.log(obj);
+    const result = obj &&
+        typeof obj === "object" &&
+        obj.__type__ === "translation_metadata" &&
+        typeof obj.key === "string";
+    return result;
+}
+// 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 i18n_marker = "__i18n__";
+    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;
     }
-    return _langs;
+}
+export function process_langs() {
+    return Object.fromEntries(Object.entries(langs).map(([path, module]) => [
+        path.split("/").pop().split(".")[0],
+        module.default
+    ]));
 }
 const processed_langs = process_langs();
 const available_locales = Object.keys(processed_langs);
 export const language_choices = Object.entries(processed_langs).map(([code, data]) => [data._name || code, code]);
 export let all_common_keys = new Set();
-for (const lang in processed_langs) {
-    addMessages(lang, processed_langs[lang]);
-}
 let i18n_initialized = false;
-export async function setupi18n() {
-    if (i18n_initialized) {
+let previous_translations;
+export async function setupi18n(custom_translations) {
+    const should_reinitialize = i18n_initialized && custom_translations !== previous_translations;
+    if (i18n_initialized && !should_reinitialize) {
         return;
     }
+    previous_translations = custom_translations;
+    load_translations({
+        ...processed_langs,
+        ...(custom_translations ?? {})
+    });
     const browser_locale = getLocaleFromNavigator();
     let initial_locale = browser_locale && available_locales.includes(browser_locale)
         ? browser_locale
@@ -53,3 +113,24 @@ export async function setupi18n() {
 export function changeLocale(new_locale) {
     locale.set(new_locale);
 }
+export function get_initial_locale(browser_locale, available_locales, fallback_locale = "en") {
+    if (!browser_locale)
+        return fallback_locale;
+    if (available_locales.includes(browser_locale)) {
+        return browser_locale;
+    }
+    return fallback_locale;
+}
+export function load_translations(translations) {
+    if (!translations) {
+        return;
+    }
+    try {
+        for (const lang in translations) {
+            addMessages(lang, translations[lang]);
+        }
+    }
+    catch (e) {
+        console.error("Error loading translations:", e);
+    }
+}