@gradio/core 1.0.0-dev.0 → 1.0.0

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

@@ -0,0 +1,22 @@
+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 PercentileChart: $$__sveltets_2_IsomorphicComponent<{
+    p50: number;
+    p90: number;
+    p99: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PercentileChart = InstanceType<typeof PercentileChart>;
+export default PercentileChart;

package/dist/src/api_docs/RecordingSnippet.svelte

@@ -1,113 +1,127 @@
-<script>import CopyButton from "./CopyButton.svelte";
-import { Block } from "@gradio/atoms";
-import { represent_value } from "./utils";
-import { onMount, tick } from "svelte";
-export let dependencies;
-export let short_root;
-export let root;
-export let api_prefix = "";
-export let current_language;
-export let username;
-let python_code;
-let python_code_text;
-let js_code;
-let bash_code;
-export let api_calls = [];
-async function get_info() {
-  let response = await fetch(
-    root.replace(/\/$/, "") + api_prefix + "/info/?all_endpoints=true"
-  );
-  let data = await response.json();
-  return data;
-}
-let endpoints_info;
-let py_zipped = [];
-let js_zipped = [];
-let bash_zipped = [];
-function format_api_call(call, lang) {
-  const api_name = `/${dependencies[call.fn_index].api_name}`;
-  let call_data_excluding_state = call.data.filter(
-    (d) => typeof d !== "undefined"
-  );
-  const params = call_data_excluding_state.map((param, index) => {
-    if (endpoints_info[api_name]) {
-      const param_info = endpoints_info[api_name].parameters[index];
-      if (!param_info) {
-        return void 0;
-      }
-      const param_name = param_info.parameter_name;
-      const python_type = param_info.python_type.type;
-      if (lang === "py") {
-        return `  ${param_name}=${represent_value(
-          param,
-          python_type,
-          "py"
-        )}`;
-      } else if (lang === "js") {
-        return `    ${param_name}: ${represent_value(
-          param,
-          python_type,
-          "js"
-        )}`;
-      } else if (lang === "bash") {
-        return `    ${represent_value(
-          param,
-          python_type,
-          "bash"
-        )}`;
-      }
-    }
-    return `  ${represent_value(param, void 0, lang)}`;
-  }).filter((d) => typeof d !== "undefined").join(",\n");
-  if (params) {
-    if (lang === "py") {
-      return `${params},
-`;
-    } else if (lang === "js") {
-      return `{
-${params},
-}`;
-    } else if (lang === "bash") {
-      return `
-${params}
-`;
-    }
-  }
-  if (lang === "py") {
-    return "";
-  }
-  return "\n";
-}
-onMount(async () => {
-  const data = await get_info();
-  endpoints_info = data["named_endpoints"];
-  let py_api_calls = api_calls.map(
-    (call) => format_api_call(call, "py")
-  );
-  let js_api_calls = api_calls.map(
-    (call) => format_api_call(call, "js")
-  );
-  let bash_api_calls = api_calls.map(
-    (call) => format_api_call(call, "bash")
-  );
-  let api_names = api_calls.map(
-    (call) => dependencies[call.fn_index].api_name || ""
-  );
-  py_zipped = py_api_calls.map((call, index) => ({
-    call,
-    api_name: api_names[index]
-  }));
-  js_zipped = js_api_calls.map((call, index) => ({
-    call,
-    api_name: api_names[index]
-  }));
-  bash_zipped = bash_api_calls.map((call, index) => ({
-    call,
-    api_name: api_names[index]
-  }));
-  await tick();
-  python_code_text = python_code.innerText;
-});
+<script lang="ts">
+	import type { Dependency, Payload } from "../types";
+	import CopyButton from "./CopyButton.svelte";
+	import { Block } from "@gradio/atoms";
+	import { represent_value } from "./utils";
+	import { onMount, tick } from "svelte";
+
+	export let dependencies: Dependency[];
+	export let short_root: string;
+	export let root: string;
+	export let api_prefix = "";
+	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let username: string | null;
+
+	let python_code: HTMLElement;
+	let python_code_text: string;
+	let js_code: HTMLElement;
+	let bash_code: HTMLElement;
+
+	export let api_calls: Payload[] = [];
+
+	async function get_info(): Promise<{
+		named_endpoints: any;
+		unnamed_endpoints: any;
+	}> {
+		let response = await fetch(
+			root.replace(/\/$/, "") + api_prefix + "/info/?all_endpoints=true"
+		);
+		let data = await response.json();
+		return data;
+	}
+
+	let endpoints_info: any;
+	let py_zipped: { call: string; api_name: string }[] = [];
+	let js_zipped: { call: string; api_name: string }[] = [];
+	let bash_zipped: { call: string; api_name: string }[] = [];
+
+	function format_api_call(call: Payload, lang: "py" | "js" | "bash"): string {
+		const api_name = `/${dependencies[call.fn_index].api_name}`;
+		// If an input is undefined (distinct from null) then it corresponds to a State component.
+		let call_data_excluding_state = call.data.filter(
+			(d) => typeof d !== "undefined"
+		);
+
+		const params = call_data_excluding_state
+			.map((param, index) => {
+				if (endpoints_info[api_name]) {
+					const param_info = endpoints_info[api_name].parameters[index];
+					if (!param_info) {
+						return undefined;
+					}
+					const param_name = param_info.parameter_name;
+					const python_type = param_info.python_type.type;
+					if (lang === "py") {
+						return `  ${param_name}=${represent_value(
+							param as string,
+							python_type,
+							"py"
+						)}`;
+					} else if (lang === "js") {
+						return `    ${param_name}: ${represent_value(
+							param as string,
+							python_type,
+							"js"
+						)}`;
+					} else if (lang === "bash") {
+						return `    ${represent_value(
+							param as string,
+							python_type,
+							"bash"
+						)}`;
+					}
+				}
+				return `  ${represent_value(param as string, undefined, lang)}`;
+			})
+			.filter((d) => typeof d !== "undefined")
+			.join(",\n");
+		if (params) {
+			if (lang === "py") {
+				return `${params},\n`;
+			} else if (lang === "js") {
+				return `{\n${params},\n}`;
+			} else if (lang === "bash") {
+				return `\n${params}\n`;
+			}
+		}
+		if (lang === "py") {
+			return "";
+		}
+		return "\n";
+	}
+
+	onMount(async () => {
+		const data = await get_info();
+		endpoints_info = data["named_endpoints"];
+		let py_api_calls: string[] = api_calls.map((call) =>
+			format_api_call(call, "py")
+		);
+		let js_api_calls: string[] = api_calls.map((call) =>
+			format_api_call(call, "js")
+		);
+		let bash_api_calls: string[] = api_calls.map((call) =>
+			format_api_call(call, "bash")
+		);
+		let api_names: string[] = api_calls.map(
+			(call) => dependencies[call.fn_index].api_name || ""
+		);
+		py_zipped = py_api_calls.map((call, index) => ({
+			call,
+			api_name: api_names[index]
+		}));
+		js_zipped = js_api_calls.map((call, index) => ({
+			call,
+			api_name: api_names[index]
+		}));
+		bash_zipped = bash_api_calls.map((call, index) => ({
+			call,
+			api_name: api_names[index]
+		}));
+
+		await tick();
+
+		python_code_text = python_code.innerText;
+	});
 </script>
 
 <div class="container">

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

@@ -1,25 +1,27 @@
-import { SvelteComponent } from "svelte";
 import type { Dependency, Payload } from "../types";
-declare const __propDef: {
-    props: {
-        dependencies: Dependency[];
-        short_root: string;
-        root: string;
-        api_prefix?: string;
-        current_language: "python" | "javascript" | "bash" | "mcp";
-        username: string | null;
-        api_calls?: Payload[];
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type RecordingSnippetProps = typeof __propDef.props;
-export type RecordingSnippetEvents = typeof __propDef.events;
-export type RecordingSnippetSlots = typeof __propDef.slots;
-export default class RecordingSnippet extends SvelteComponent<RecordingSnippetProps, RecordingSnippetEvents, RecordingSnippetSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const RecordingSnippet: $$__sveltets_2_IsomorphicComponent<{
+    dependencies: Dependency[];
+    short_root: string;
+    root: string;
+    api_prefix?: string;
+    current_language: "python" | "javascript" | "bash" | "mcp";
+    username: string | null;
+    api_calls?: Payload[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RecordingSnippet = InstanceType<typeof RecordingSnippet>;
+export default RecordingSnippet;

package/dist/src/api_docs/ResponseSnippet.svelte

@@ -1,8 +1,10 @@
-<script>import { Loader } from "@gradio/statustracker";
-export let is_running;
-export let endpoint_returns;
-export let js_returns;
-export let current_language;
+<script lang="ts">
+	import { Loader } from "@gradio/statustracker";
+
+	export let is_running: boolean;
+	export let endpoint_returns: any;
+	export let js_returns: any;
+	export let current_language: "python" | "javascript" | "bash" | "mcp";
 </script>
 
 <h4>

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

@@ -1,21 +1,23 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        is_running: boolean;
-        endpoint_returns: any;
-        js_returns: any;
-        current_language: "python" | "javascript" | "bash";
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ResponseSnippetProps = typeof __propDef.props;
-export type ResponseSnippetEvents = typeof __propDef.events;
-export type ResponseSnippetSlots = typeof __propDef.slots;
-export default class ResponseSnippet extends SvelteComponent<ResponseSnippetProps, ResponseSnippetEvents, ResponseSnippetSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ResponseSnippet: $$__sveltets_2_IsomorphicComponent<{
+    is_running: boolean;
+    endpoint_returns: any;
+    js_returns: any;
+    current_language: "python" | "javascript" | "bash" | "mcp";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ResponseSnippet = InstanceType<typeof ResponseSnippet>;
+export default ResponseSnippet;

package/dist/src/api_docs/Settings.svelte

@@ -1,65 +1,76 @@
-<script>import { onMount } from "svelte";
-import SettingsBanner from "./SettingsBanner.svelte";
-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;
-}
-if (!root.endsWith("/")) {
-  root += "/";
-}
-function setTheme(theme) {
-  const url = new URL(window.location.href);
-  if (theme === "system") {
-    url.searchParams.delete("__theme");
-    current_theme = "system";
-  } else {
-    url.searchParams.set("__theme", theme);
-    current_theme = theme;
-  }
-  window.location.href = url.toString();
-}
-onMount(() => {
-  document.body.style.overflow = "hidden";
-  if ("parentIFrame" in window) {
-    window.parentIFrame?.scrollTo(0, 0);
-  }
-  const url = new URL(window.location.href);
-  const theme = url.searchParams.get("__theme");
-  current_theme = theme || "system";
-  return () => {
-    document.body.style.overflow = "auto";
-  };
-});
-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;
-  }
-});
-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 lang="ts">
+	/* eslint-disable */
+	import { onMount } from "svelte";
+	import SettingsBanner from "./SettingsBanner.svelte";
+	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 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;
+	}
+	if (!root.endsWith("/")) {
+		root += "/";
+	}
+
+	function setTheme(theme: "light" | "dark" | "system") {
+		const url = new URL(window.location.href);
+		if (theme === "system") {
+			url.searchParams.delete("__theme");
+			current_theme = "system";
+		} else {
+			url.searchParams.set("__theme", theme);
+			current_theme = theme;
+		}
+		window.location.href = url.toString();
+	}
+
+	onMount(() => {
+		// document.body.style.overflow = "hidden";
+		if ("parentIFrame" in window) {
+			window.parentIFrame?.scrollTo(0, 0);
+		}
+		const url = new URL(window.location.href);
+		const theme = url.searchParams.get("__theme");
+		current_theme = (theme as "light" | "dark" | "system") || "system";
+		return () => {
+			document.body.style.overflow = "auto";
+		};
+	});
+
+	let current_locale: string = $state("en");
+	let current_theme: "light" | "dark" | "system" = $state("system");
+
+	locale.subscribe((value) => {
+		if (value) {
+			current_locale = value;
+		}
+	});
+
+	function handleLanguageChange(e: CustomEvent): void {
+		const new_locale = e.detail;
+		changeLocale(new_locale);
+	}
+
+	function handleZoomChange(e: CustomEvent): void {
+		allow_zoom = e.detail;
+	}
+
+	function handleVideoTrimChange(e: CustomEvent): void {
+		allow_video_trim = e.detail;
+	}
 </script>
 
 <div class="banner-wrap">