@gradio/core 1.0.0-dev.0 → 1.0.0-dev.3

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

@@ -1,29 +1,31 @@
-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;
+    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,12 @@
-<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[];
+
+	$: console.log("API CALLS UPDATED:", api_calls);
+	$: console.log("DEPENDENCIES:", dependencies);
 </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,53 @@
-<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 } 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>>;
+
+	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(/\/$/, "");
+
+	$: 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">
@@ -32,7 +56,7 @@ $: normalised_root = root.replace(/\/$/, "");
 		description={api_description}
 		{analytics}
 	/>
-	{#if current_language === "python"}
+	<div class:hidden={current_language !== "python"}>
 		<Block>
 			<code>
 				<div class="copy">
@@ -67,7 +91,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">
@@ -116,7 +141,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,7 +166,7 @@ result = client.<span class="highlight">predict</span
 				</div>
 			</code>
 		</Block>
-	{/if}
+	</div>
 </div>
 
 <style>
@@ -184,4 +210,8 @@ result = client.<span class="highlight">predict</span
 	.api-name {
 		color: var(--color-accent);
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>

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

@@ -1,27 +1,30 @@
-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>;
+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>>;
+}, {
+    [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;