@gradio/core 1.0.0-dev.0 → 1.0.0

package/src/api_docs/EndpointDetail.svelte

@@ -1,30 +1,45 @@
 <script lang="ts">
+	import type { Payload } from "../types";
 	export let api_name: string | null = null;
 	export let description: string | null = null;
 	export let analytics: Record<string, any>;
+	export let last_api_call: Payload | null = null;
+	export let dependency_id: number | null = null;
 	import { format_latency, get_color_from_success_rate } from "./utils";
+	import PercentileChart from "./PercentileChart.svelte";
 
 	const success_rate = api_name ? analytics[api_name]?.success_rate : 0;
 	const color = get_color_from_success_rate(success_rate);
+	$: is_most_recently_used = last_api_call?.fn_index === dependency_id;
 </script>
 
 <h3>
 	API name:
 	<span class="post">{"/" + api_name}</span>
-	<span class="desc">{description}</span>
-	{#if analytics && api_name && analytics[api_name]}
-		<span class="analytics">
-			Total requests: {analytics[api_name].total_requests} (<span style={color}
-				>{Math.round(success_rate * 100)}%</span
-			>
-			successful) &nbsp;|&nbsp; p50/p90/p99:
-			{format_latency(analytics[api_name].process_time_percentiles["50th"])}
-			/
-			{format_latency(analytics[api_name].process_time_percentiles["90th"])}
-			/
-			{format_latency(analytics[api_name].process_time_percentiles["99th"])}
-		</span>
-	{/if}
+	<span class="desc">
+		{description}
+		{#if analytics && api_name && analytics[api_name]}
+			{@const endpoint_analytics = analytics[api_name]}
+			{@const p50 = endpoint_analytics.process_time_percentiles["50th"]}
+			{@const p90 = endpoint_analytics.process_time_percentiles["90th"]}
+			{@const p99 = endpoint_analytics.process_time_percentiles["99th"]}
+			<span class="analytics-inline">
+				<span class="analytics-content">
+					<span class="analytics-text-wrapper">
+						{endpoint_analytics.total_requests} requests ({Math.round(
+							success_rate * 100
+						)}% successful, p50: {format_latency(p50)})
+					</span>
+					<div class="analytics-tooltip">
+						<PercentileChart {p50} {p90} {p99} />
+					</div>
+				</span>
+				{#if is_most_recently_used}
+					<span class="most-recently-used">Most recently used</span>
+				{/if}
+			</span>
+		{/if}
+	</span>
 </h3>
 
 <style>
@@ -46,14 +61,55 @@
 		font-weight: var(--weight-semibold);
 	}
 
-	.analytics {
+	.analytics-inline {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--size-2);
+		margin-left: var(--size-2);
 		color: var(--body-text-color-subdued);
-		margin-top: var(--size-1);
+	}
+
+	.analytics-content {
+		position: relative;
+		display: inline-block;
+	}
+
+	.analytics-text-wrapper {
+		cursor: help;
+	}
+
+	.analytics-tooltip {
+		position: absolute;
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-bottom: var(--size-2);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.2s ease;
+		z-index: 1000;
+	}
+
+	.analytics-content:hover .analytics-tooltip {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.most-recently-used {
+		display: inline-block;
+		color: #fd7b00;
+		background: #fff4e6;
+		border: 1px solid #ffd9b3;
+		border-radius: var(--radius-sm);
+		padding: var(--size-1) var(--size-2);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-medium);
+		white-space: nowrap;
 	}
 
 	.desc {
 		color: var(--body-text-color);
 		font-size: var(--text-lg);
-		margin-top: var(--size-1);
+		margin-left: var(--size-2);
 	}
 </style>

package/src/api_docs/IconArrowUpRight.svelte

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

package/src/api_docs/IconCaret.svelte

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

package/src/api_docs/IconHuggingChat.svelte

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

package/src/api_docs/MCPSnippet.svelte

@@ -3,18 +3,19 @@
 	import CopyButton from "./CopyButton.svelte";
 	import { Tool, Prompt, Resource } from "@gradio/icons";
 	import { format_latency, get_color_from_success_rate } from "./utils";
+	import PercentileChart from "./PercentileChart.svelte";
 
 	export let mcp_server_active: boolean;
-	export let mcp_server_url: string;
 	export let mcp_server_url_streamable: string;
+	export let root: string;
 	export let tools: Tool[];
 	export let all_tools: Tool[] = [];
 	export let selected_tools: Set<string> = new Set();
-	export let mcp_json_sse: any;
 	export let mcp_json_stdio: any;
 	export let file_data_present: boolean;
 	export let mcp_docs: string;
 	export let analytics: Record<string, any>;
+	export let config_snippets: Record<string, string>;
 
 	interface ToolParameter {
 		title?: string;
@@ -36,13 +37,12 @@
 		};
 	}
 
-	type Transport = "streamable_http" | "sse" | "stdio";
+	type Transport = "streamable_http" | "stdio";
 	let current_transport: Transport = "streamable_http";
 	let include_file_upload = true;
 
 	const transports = [
 		["streamable_http", "Streamable HTTP"],
-		["sse", "SSE"],
 		["stdio", "STDIO"]
 	] as const;
 
@@ -52,8 +52,7 @@
 		prompt: Prompt
 	};
 
-	$: display_url =
-		current_transport === "sse" ? mcp_server_url : mcp_server_url_streamable;
+	$: display_url = mcp_server_url_streamable;
 
 	// Helper function to add/remove file upload tool from config
 	function update_config_with_file_upload(
@@ -72,9 +71,7 @@
 					"gradio[mcp]",
 					"gradio",
 					"upload-mcp",
-					current_transport === "sse"
-						? mcp_server_url
-						: mcp_server_url_streamable,
+					root,
 					"<UPLOAD_DIRECTORY>"
 				]
 			};
@@ -87,13 +84,10 @@
 	}
 
 	$: mcp_json_streamable_http = update_config_with_file_upload(
-		mcp_json_sse
+		mcp_json_stdio
 			? {
-					...mcp_json_sse,
 					mcpServers: {
-						...mcp_json_sse.mcpServers,
 						gradio: {
-							...mcp_json_sse.mcpServers.gradio,
 							url: mcp_server_url_streamable
 						}
 					}
@@ -102,14 +96,15 @@
 		include_file_upload
 	);
 
-	$: mcp_json_sse_updated = update_config_with_file_upload(
-		mcp_json_sse,
-		include_file_upload
-	);
 	$: mcp_json_stdio_updated = update_config_with_file_upload(
 		mcp_json_stdio,
 		include_file_upload
 	);
+
+	$: config_snippets = {
+		streamable_http: JSON.stringify(mcp_json_streamable_http, null, 2),
+		stdio: JSON.stringify(mcp_json_stdio_updated, null, 2)
+	};
 </script>
 
 {#if mcp_server_active}
@@ -134,10 +129,8 @@
 		<Block>
 			<div class="mcp-url">
 				<label for="mcp-server-url"
-					><span class="status-indicator active">●</span>MCP Server URL ({current_transport ===
-					"sse"
-						? "SSE"
-						: "Streamable HTTP"})</label
+					><span class="status-indicator active">●</span>MCP Server URL
+					(Streamable HTTP)</label
 				>
 				<div class="textbox">
 					<input id="mcp-server-url" type="text" readonly value={display_url} />
@@ -227,34 +220,19 @@
 									: "⚠︎ No description provided in function docstring"}
 							</span>
 							{#if analytics[tool.meta.endpoint_name]}
-								<span
-									class="tool-analytics"
-									style="color: var(--body-text-color-subdued); margin-left: 1em;"
-								>
-									Total requests: {analytics[tool.meta.endpoint_name]
-										.total_requests}
-									<span style={color}
-										>({Math.round(success_rate * 100)}% successful)</span
+								{@const endpoint_analytics = analytics[tool.meta.endpoint_name]}
+								{@const p50 =
+									endpoint_analytics.process_time_percentiles["50th"]}
+								<div class="tool-analytics-wrapper" style="margin-left: 1em;">
+									<span
+										class="tool-analytics"
+										style="color: var(--body-text-color-subdued);"
 									>
-									&nbsp;|&nbsp; p50/p90/p99:
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"50th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"90th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"99th"
-										]
-									)}
-								</span>
+										{endpoint_analytics.total_requests} requests ({Math.round(
+											success_rate * 100
+										)}% successful, p50: {format_latency(p50)})
+									</span>
+								</div>
 							{/if}
 						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
@@ -290,7 +268,7 @@
 	</div>
 	<p>&nbsp;</p>
 
-	{#if current_transport === "streamable_http"}
+	<div class:hidden={current_transport !== "streamable_http"}>
 		<strong>Streamable HTTP Transport</strong>: To add this MCP to clients that
 		support Streamable HTTP, simply add the following configuration to your MCP
 		config.
@@ -298,32 +276,15 @@
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton
-						code={JSON.stringify(mcp_json_streamable_http, null, 2)}
-					/>
+					<CopyButton code={config_snippets.streamable_http} />
 				</div>
 				<div>
-					<pre>{JSON.stringify(mcp_json_streamable_http, null, 2)}</pre>
+					<pre>{config_snippets.streamable_http}</pre>
 				</div>
 			</code>
 		</Block>
-	{:else if current_transport === "sse"}
-		<strong>SSE Transport</strong>: The SSE transport has been deprecated by the
-		MCP spec. We recommend using the Streamable HTTP transport instead. But to
-		add this MCP to clients that only support server-sent events (SSE), simply
-		add the following configuration to your MCP config.
-		<p>&nbsp;</p>
-		<Block>
-			<code>
-				<div class="copy">
-					<CopyButton code={JSON.stringify(mcp_json_sse_updated, null, 2)} />
-				</div>
-				<div>
-					<pre>{JSON.stringify(mcp_json_sse_updated, null, 2)}</pre>
-				</div>
-			</code>
-		</Block>
-	{:else if current_transport === "stdio"}
+	</div>
+	<div class:hidden={current_transport !== "stdio"}>
 		<strong>STDIO Transport</strong>: For clients that only support stdio (e.g.
 		Claude Desktop), first
 		<a href="https://nodejs.org/en/download/" target="_blank">install Node.js</a
@@ -332,14 +293,14 @@
 		<Block>
 			<code>
 				<div class="copy">
-					<CopyButton code={JSON.stringify(mcp_json_stdio_updated, null, 2)} />
+					<CopyButton code={config_snippets.stdio} />
 				</div>
 				<div>
-					<pre>{JSON.stringify(mcp_json_stdio_updated, null, 2)}</pre>
+					<pre>{config_snippets.stdio}</pre>
 				</div>
 			</code>
 		</Block>
-	{/if}
+	</div>
 	{#if file_data_present}
 		<div class="file-upload-section">
 			<label class="checkbox-label">
@@ -380,10 +341,16 @@
 {/if}
 
 <style>
+	.tool-analytics-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+
 	.tool-analytics {
 		font-size: 0.95em;
 		color: var(--body-text-color-subdued);
 	}
+
 	.transport-selection {
 		margin-bottom: var(--size-4);
 	}
@@ -665,4 +632,8 @@
 	a {
 		text-decoration: underline;
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

package/src/api_docs/ParametersSnippet.svelte

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

package/src/api_docs/PercentileChart.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { format_latency } from "./utils";
+
+	export let p50: number;
+	export let p90: number;
+	export let p99: number;
+
+	$: max_latency = Math.max(p50, p90, p99);
+</script>
+
+<div class="tooltip-chart">
+	<div class="tooltip-arrow"></div>
+	<div class="chart-bars">
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p50</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p50 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p50)}</div>
+		</div>
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p90</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p90 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p90)}</div>
+		</div>
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p99</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p99 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p99)}</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.tooltip-chart {
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-md);
+		padding: var(--size-3);
+		box-shadow: var(--shadow-drop-lg);
+		min-width: 200px;
+		position: relative;
+	}
+
+	.tooltip-arrow {
+		position: absolute;
+		bottom: -8px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		border-top: 8px solid var(--border-color-primary);
+	}
+
+	.tooltip-arrow::after {
+		content: "";
+		position: absolute;
+		bottom: 1px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 7px solid transparent;
+		border-right: 7px solid transparent;
+		border-top: 7px solid var(--background-fill-primary);
+	}
+
+	.chart-bars {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
+	}
+
+	.chart-bar-container {
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	.chart-bar-label {
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		color: var(--body-text-color);
+		min-width: 30px;
+	}
+
+	.chart-bar-wrapper {
+		flex: 1;
+		height: 16px;
+		background: var(--background-fill-secondary);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		position: relative;
+	}
+
+	.chart-bar {
+		height: 100%;
+		background: var(--color-accent);
+		border-radius: var(--radius-sm);
+		transition: width 0.3s ease;
+	}
+
+	.chart-bar-value {
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		min-width: 50px;
+		text-align: right;
+		font-family: var(--font-mono);
+	}
+</style>

package/src/api_docs/ResponseSnippet.svelte

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

package/src/api_docs/Settings.svelte

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