@gradio/core 1.0.0-dev.0 → 1.0.0

package/src/api_docs/CodeSnippet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ComponentMeta, Dependency } from "../types";
+	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";
@@ -20,9 +20,11 @@
 	export let space_id: string | null;
 	export let endpoint_parameters: any;
 	export let username: string | null;
-	export let current_language: "python" | "javascript" | "bash";
+	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;
@@ -39,6 +41,35 @@
 
 	$: 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">
@@ -46,8 +77,10 @@
 		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">
@@ -62,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}<!--
@@ -82,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">
@@ -102,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
 								>, <!--
@@ -131,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">
@@ -140,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}
 	]{"}"}' \
@@ -155,7 +201,7 @@ result = client.<span class="highlight">predict</span
 				</div>
 			</code>
 		</Block>
-	{/if}
+	</div>
 </div>
 
 <style>
@@ -199,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/src/api_docs/CopyButton.svelte

@@ -1,17 +1,71 @@
 <script lang="ts">
-	import { BaseButton } from "@gradio/button";
+	import IconCopy from "./img/IconCopy.svelte";
+	import IconCheck from "./img/IconCheck.svelte";
+
 	export let code: string;
-	let copy_text = "copy";
+
+	let copied = false;
 
 	function copy(): void {
 		navigator.clipboard.writeText(code);
-		copy_text = "copied!";
+		copied = true;
 		setTimeout(() => {
-			copy_text = "copy";
+			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>