@gradio/core 1.0.0-dev.0 → 1.0.0

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

@@ -1,29 +1,32 @@
-import { SvelteComponent } from "svelte";
 import type { ComponentMeta, Dependency } from "../types";
 import type { Client } from "@gradio/client";
 import type { Payload } from "../types";
-declare const __propDef: {
-    props: {
-        dependencies: Dependency[];
-        root: string;
-        app: Awaited<ReturnType<typeof Client.connect>>;
-        space_id: string | null;
-        root_node: ComponentMeta;
-        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: {
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ApiDocsProps = typeof __propDef.props;
-export type ApiDocsEvents = typeof __propDef.events;
-export type ApiDocsSlots = typeof __propDef.slots;
-export default class ApiDocs extends SvelteComponent<ApiDocsProps, ApiDocsEvents, ApiDocsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ApiDocs: $$__sveltets_2_IsomorphicComponent<{
+    dependencies: Dependency[];
+    root: string;
+    app: Awaited<ReturnType<typeof Client.connect>>;
+    space_id: string | null;
+    root_node: ComponentMeta;
+    username: string | null;
+    last_api_call?: Payload | null;
+    api_calls?: Payload[];
+}, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ApiDocs = InstanceType<typeof ApiDocs>;
+export default ApiDocs;

package/dist/src/api_docs/ApiRecorder.svelte

@@ -1,6 +1,9 @@
-<script>import { BaseButton as Button } from "@gradio/button";
-export let api_calls = [];
-export let dependencies;
+<script lang="ts">
+	import type { Payload, Dependency } from "../types";
+	import { BaseButton as Button } from "@gradio/button";
+
+	export let api_calls: Payload[] = [];
+	export let dependencies: Dependency[];
 </script>
 
 <div id="api-recorder">

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

@@ -1,20 +1,22 @@
-import { SvelteComponent } from "svelte";
 import type { Payload, Dependency } from "../types";
-declare const __propDef: {
-    props: {
-        api_calls?: Payload[];
-        dependencies: Dependency[];
+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 ApiRecorderProps = typeof __propDef.props;
-export type ApiRecorderEvents = typeof __propDef.events;
-export type ApiRecorderSlots = typeof __propDef.slots;
-export default class ApiRecorder extends SvelteComponent<ApiRecorderProps, ApiRecorderEvents, ApiRecorderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ApiRecorder: $$__sveltets_2_IsomorphicComponent<{
+    api_calls?: Payload[];
+    dependencies: Dependency[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ApiRecorder = InstanceType<typeof ApiRecorder>;
+export default ApiRecorder;

package/dist/src/api_docs/CodeSnippet.svelte

@@ -1,29 +1,75 @@
-<script>import CopyButton from "./CopyButton.svelte";
-import { represent_value, is_potentially_nested_file_data } from "./utils";
-import { Block } from "@gradio/atoms";
-import EndpointDetail from "./EndpointDetail.svelte";
-export let dependency;
-export let root;
-export let api_prefix;
-export let space_id;
-export let endpoint_parameters;
-export let username;
-export let current_language;
-export let api_description = null;
-export let analytics;
-let python_code;
-let js_code;
-let bash_post_code;
-let bash_get_code;
-let has_file_path = endpoint_parameters.some(
-  (param) => is_potentially_nested_file_data(param.example_input)
-);
-let blob_components = ["Audio", "File", "Image", "Video"];
-let blob_examples = endpoint_parameters.filter(
-  (param) => blob_components.includes(param.component)
-);
-$: normalised_api_prefix = api_prefix ? api_prefix : "/";
-$: normalised_root = root.replace(/\/$/, "");
+<script lang="ts">
+	import type { ComponentMeta, Dependency, Payload } from "../types";
+	import CopyButton from "./CopyButton.svelte";
+	import { represent_value, is_potentially_nested_file_data } from "./utils";
+	import { Block } from "@gradio/atoms";
+	import EndpointDetail from "./EndpointDetail.svelte";
+
+	interface EndpointParameter {
+		label: string;
+		type: string;
+		python_type: { type: string };
+		component: string;
+		example_input: string;
+		serializer: string;
+	}
+
+	export let dependency: Dependency;
+	export let root: string;
+	export let api_prefix: string;
+	export let space_id: string | null;
+	export let endpoint_parameters: any;
+	export let username: string | null;
+	export let current_language: "python" | "javascript" | "bash" | "mcp";
+	export let api_description: string | null = null;
+	export let analytics: Record<string, any>;
+	export let markdown_code_snippets: Record<string, Record<string, string>>;
+	export let last_api_call: Payload | null = null;
+
+	let python_code: HTMLElement;
+	let js_code: HTMLElement;
+	let bash_post_code: HTMLElement;
+	let bash_get_code: HTMLElement;
+
+	let has_file_path = endpoint_parameters.some((param: EndpointParameter) =>
+		is_potentially_nested_file_data(param.example_input)
+	);
+	let blob_components = ["Audio", "File", "Image", "Video"];
+	let blob_examples: any[] = endpoint_parameters.filter(
+		(param: EndpointParameter) => blob_components.includes(param.component)
+	);
+
+	$: normalised_api_prefix = api_prefix ? api_prefix : "/";
+	$: normalised_root = root.replace(/\/$/, "");
+
+	$: is_most_recently_used = last_api_call?.fn_index === dependency.id;
+
+	$: actual_data =
+		is_most_recently_used && last_api_call?.data
+			? last_api_call.data.filter((d) => typeof d !== "undefined")
+			: null;
+
+	function getParameterValue(param: any, index: number): any {
+		if (
+			is_most_recently_used &&
+			actual_data &&
+			actual_data[index] !== undefined
+		) {
+			return actual_data[index];
+		}
+		return param.parameter_has_default !== undefined &&
+			param.parameter_has_default
+			? param.parameter_default
+			: param.example_input;
+	}
+
+	$: markdown_code_snippets[
+		dependency.api_name as keyof typeof markdown_code_snippets
+	] = {
+		python: python_code?.innerText || "",
+		javascript: js_code?.innerText || "",
+		bash: bash_post_code?.innerText || ""
+	};
 </script>
 
 <div class="container">
@@ -31,8 +77,10 @@ $: normalised_root = root.replace(/\/$/, "");
 		api_name={dependency.api_name}
 		description={api_description}
 		{analytics}
+		{last_api_call}
+		dependency_id={dependency.id}
 	/>
-	{#if current_language === "python"}
+	<div class:hidden={current_language !== "python"}>
 		<Block>
 			<code>
 				<div class="copy">
@@ -47,14 +95,16 @@ client = Client(<span class="token string">"{space_id || root}"</span
 						>{#if username !== null}, auth=("{username}", **password**){/if})
 result = client.<span class="highlight">predict</span
 						>(<!--
--->{#each endpoint_parameters as { python_type, example_input, parameter_name, parameter_has_default, parameter_default }, i}<!--
+-->{#each endpoint_parameters as param, i}<!--
 		-->
-	{parameter_name
-								? parameter_name + "="
+	{param.parameter_name
+								? param.parameter_name + "="
 								: ""}<span
+								class:recent-value={is_most_recently_used &&
+									actual_data?.[i] !== undefined}
 								>{represent_value(
-									parameter_has_default ? parameter_default : example_input,
-									python_type.type,
+									getParameterValue(param, i),
+									param.python_type.type,
 									"py"
 								)}</span
 							>,{/each}<!--
@@ -67,7 +117,8 @@ result = client.<span class="highlight">predict</span
 				</div>
 			</code>
 		</Block>
-	{:else if current_language === "javascript"}
+	</div>
+	<div class:hidden={current_language !== "javascript"}>
 		<Block>
 			<code>
 				<div class="copy">
@@ -87,22 +138,26 @@ result = client.<span class="highlight">predict</span
 	const result = await client.predict(<span class="api-name"
 							>"/{dependency.api_name}"</span
 						>, &lbrace; <!--
-	-->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
-			-->{#if blob_components.includes(component)}<!--
+	-->{#each endpoint_parameters as param, i}<!--
+			-->{#if blob_components.includes(param.component)}<!--
 		-->
 					<span
 									class="example-inputs"
-									>{parameter_name}: example{component}</span
+									>{param.parameter_name}: example{param.component}</span
 								>, <!--
 			--><span class="desc"><!--
 			--></span
 								><!--
 			-->{:else}<!--
 		-->		
-			<span class="example-inputs"
-									>{parameter_name}: {represent_value(
-										example_input,
-										python_type.type,
+			<span
+									class="example-inputs {is_most_recently_used &&
+									actual_data?.[i] !== undefined
+										? 'recent-value'
+										: ''}"
+									>{param.parameter_name}: {represent_value(
+										getParameterValue(param, i),
+										param.python_type.type,
 										"js"
 									)}</span
 								>, <!--
@@ -116,7 +171,8 @@ result = client.<span class="highlight">predict</span
 				</div>
 			</code>
 		</Block>
-	{:else if current_language === "bash"}
+	</div>
+	<div class:hidden={current_language !== "bash"}>
 		<Block>
 			<code>
 				<div class="copy">
@@ -125,13 +181,18 @@ result = client.<span class="highlight">predict</span
 
 				<div bind:this={bash_post_code}>
 					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
-	"data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
+	"data": [{#each endpoint_parameters as param, i}
 							<!-- 
-	-->{represent_value(
-								example_input,
-								python_type.type,
-								"bash"
-							)}{#if i < endpoint_parameters.length - 1},
+	--><span
+								class={is_most_recently_used && actual_data?.[i] !== undefined
+									? "recent-value"
+									: ""}
+								>{represent_value(
+									getParameterValue(param, i),
+									param.python_type.type,
+									"bash"
+								)}</span
+							>{#if i < endpoint_parameters.length - 1},
 							{/if}
 						{/each}
 	]{"}"}' \
@@ -140,7 +201,7 @@ result = client.<span class="highlight">predict</span
 				</div>
 			</code>
 		</Block>
-	{/if}
+	</div>
 </div>
 
 <style>
@@ -184,4 +245,17 @@ result = client.<span class="highlight">predict</span
 	.api-name {
 		color: var(--color-accent);
 	}
+
+	.recent-value {
+		color: #fd7b00;
+		background: #fff4e6;
+		border: 1px solid #ffd9b3;
+		border-radius: var(--radius-sm);
+		padding: 1px 4px;
+		font-weight: var(--weight-medium);
+	}
+
+	.hidden {
+		display: none;
+	}
 </style>

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

@@ -1,27 +1,31 @@
-import { SvelteComponent } from "svelte";
-import type { Dependency } from "../types";
-declare const __propDef: {
-    props: {
-        dependency: Dependency;
-        root: string;
-        api_prefix: string;
-        space_id: string | null;
-        endpoint_parameters: any;
-        username: string | null;
-        current_language: "python" | "javascript" | "bash";
-        api_description?: string | null;
-        analytics: Record<string, any>;
+import type { Dependency, Payload } from "../types";
+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 CodeSnippetProps = typeof __propDef.props;
-export type CodeSnippetEvents = typeof __propDef.events;
-export type CodeSnippetSlots = typeof __propDef.slots;
-export default class CodeSnippet extends SvelteComponent<CodeSnippetProps, CodeSnippetEvents, CodeSnippetSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CodeSnippet: $$__sveltets_2_IsomorphicComponent<{
+    dependency: Dependency;
+    root: string;
+    api_prefix: string;
+    space_id: string | null;
+    endpoint_parameters: any;
+    username: string | null;
+    current_language: "python" | "javascript" | "bash" | "mcp";
+    api_description?: string | null;
+    analytics: Record<string, any>;
+    markdown_code_snippets: Record<string, Record<string, string>>;
+    last_api_call?: Payload | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CodeSnippet = InstanceType<typeof CodeSnippet>;
+export default CodeSnippet;

package/dist/src/api_docs/CopyButton.svelte

@@ -1,15 +1,71 @@
-<script>import { BaseButton } from "@gradio/button";
-export let code;
-let copy_text = "copy";
-function copy() {
-  navigator.clipboard.writeText(code);
-  copy_text = "copied!";
-  setTimeout(() => {
-    copy_text = "copy";
-  }, 1500);
-}
+<script lang="ts">
+	import IconCopy from "./img/IconCopy.svelte";
+	import IconCheck from "./img/IconCheck.svelte";
+
+	export let code: string;
+
+	let copied = false;
+
+	function copy(): void {
+		navigator.clipboard.writeText(code);
+		copied = true;
+		setTimeout(() => {
+			copied = false;
+		}, 1500);
+	}
+
+	$: copied;
 </script>
 
-<BaseButton size="sm" on:click={copy}>
-	{copy_text}
-</BaseButton>
+<button on:click={copy} class="copy-button" aria-live="polite">
+	<span
+		class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0"
+	>
+		{#if copied}
+			<IconCheck classNames="w-3 h-3 max-sm:w-2.5 max-sm:h-2.5" />
+		{:else}
+			<IconCopy classNames="w-3 h-3 max-sm:w-2.5 max-sm:h-2.5" />
+		{/if}
+	</span>
+</button>
+
+<style>
+	.copy-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		height: 24px;
+		padding-left: 8px;
+		padding-right: 8px;
+		font-size: 11px;
+		font-weight: 500;
+		color: rgb(31, 41, 55);
+		border: 1px solid rgb(229, 231, 235);
+		border-radius: 6px;
+		background-color: white;
+
+		@media (max-width: 640px) {
+			gap: 2px;
+			height: 20px;
+			padding-left: 6px;
+			padding-right: 6px;
+			font-size: 9px;
+			border-top-left-radius: 4px;
+			border-bottom-left-radius: 4px;
+		}
+
+		&:hover {
+			box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+		}
+
+		@media (prefers-color-scheme: dark) {
+			border-color: rgb(38, 38, 38);
+			background-color: rgb(10, 10, 10);
+			color: rgb(229, 231, 235);
+
+			&:hover {
+				background-color: rgb(38, 38, 38);
+			}
+		}
+	}
+</style>

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

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        code: string;
+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 CopyButtonProps = typeof __propDef.props;
-export type CopyButtonEvents = typeof __propDef.events;
-export type CopyButtonSlots = typeof __propDef.slots;
-export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CopyButton: $$__sveltets_2_IsomorphicComponent<{
+    code: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CopyButton = InstanceType<typeof CopyButton>;
+export default CopyButton;