@gradio/core 0.0.2

package/src/api_docs/EndpointDetail.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	export let api_name: string | null = null;
+	export let fn_index: number | null = null;
+	export let named: boolean;
+</script>
+
+{#if named}
+	<h3>
+		api_name:
+		<span class="post">{"/" + api_name}</span>
+	</h3>
+{:else}
+	<h3>
+		fn_index:
+		<span class="post">{fn_index}</span>
+	</h3>
+{/if}
+
+<style>
+	h3 {
+		color: var(--body-text-color);
+		font-weight: var(--section-header-text-weight);
+		font-size: var(--text-lg);
+	}
+
+	.post {
+		margin-right: var(--size-2);
+		border: 1px solid var(--border-color-accent);
+		border-radius: var(--radius-sm);
+		background: var(--color-accent-soft);
+		padding-right: var(--size-1);
+		padding-bottom: var(--size-1);
+		padding-left: var(--size-1);
+		color: var(--color-accent);
+		font-weight: var(--weight-semibold);
+	}
+</style>

package/src/api_docs/InputPayload.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import type { ComponentMeta, Dependency } from "../types";
+	import { BaseButton } from "@gradio/button";
+	import { Block } from "@gradio/atoms";
+
+	export let dependency: Dependency;
+	export let dependency_failures: boolean[][];
+	export let dependency_index: number;
+	export let instance_map: {
+		[id: number]: ComponentMeta;
+	};
+	export let run: (id: number) => Promise<void>;
+	export let dependency_inputs: string[][];
+
+	function format_label(label: unknown): string {
+		return label ? "'" + label + "'" : "the";
+	}
+</script>
+
+<h4>
+	<div class="toggle-icon">
+		<div class="toggle-dot" />
+	</div>
+	Input Payload
+</h4>
+<Block>
+	<div class="payload-details">
+		&#123;
+		<div class="first-level">"data": [</div>
+		{#each dependency.inputs as component_id, component_index}
+			<div class="second-level">
+				<input
+					class=""
+					type="text"
+					bind:value={dependency_inputs[dependency_index][component_index]}
+				/>
+				{#if dependency_failures[dependency_index][component_index]}
+					<span class="error">ERROR</span>
+				{/if}
+
+				<span class="type">
+					: {instance_map[component_id].documentation?.type?.input_payload ||
+						instance_map[component_id].documentation?.type?.payload},
+				</span>
+				<span class="desc">
+					// represents {instance_map[component_id].documentation?.description
+						?.input_payload ||
+						instance_map[component_id].documentation?.description?.payload} of
+					{format_label(instance_map[component_id].props.label)}
+					<span class="name">
+						{instance_map[component_id].props.name}
+					</span>
+					component
+				</span>
+			</div>
+		{/each}
+		<div class="first-level">]</div>
+		&#125;
+	</div>
+</Block>
+
+<span class="space" />
+<BaseButton variant="primary" on:click={run.bind(null, dependency_index)}>
+	Try It Out
+</BaseButton>
+
+<style>
+	.payload-details {
+		font-family: var(--font-mono);
+	}
+
+	.space {
+		display: flex;
+		flex-basis: 1;
+		margin-top: var(--size-4);
+	}
+
+	h4 {
+		display: flex;
+		align-items: center;
+		margin-top: var(--size-6);
+		margin-bottom: var(--size-3);
+		color: var(--body-text-color);
+		font-weight: var(--weight-bold);
+	}
+
+	.toggle-icon {
+		display: flex;
+		align-items: center;
+		margin-right: var(--size-2);
+		border-radius: var(--radius-full);
+		background: var(--color-grey-300);
+		width: 12px;
+		height: 4px;
+	}
+
+	.toggle-dot {
+		border-radius: var(--radius-full);
+		background: var(--color-grey-700);
+		width: 6px;
+		height: 6px;
+	}
+
+	:global(.dark) .toggle-icon {
+		background: var(--color-grey-500);
+	}
+
+	:global(.dark) .toggle-dot {
+		background: var(--color-grey-400);
+	}
+
+	input[type="text"] {
+		--ring-color: transparent;
+		margin: var(--size-1) 0;
+		outline: none !important;
+		box-shadow: var(--input-shadow);
+		border: var(--input-border-width) solid var(--input-border-color);
+		border-radius: var(--radius-lg);
+		background: var(--input-background-fill);
+		padding: var(--size-1-5);
+		color: var(--body-text-color);
+		font-weight: var(--input-text-weight);
+		font-size: var(--input-text-size);
+		line-height: var(--line-sm);
+	}
+
+	input:focus {
+		box-shadow: var(--input-shadow-focus);
+		border-color: var(--input-border-color-focus);
+	}
+
+	.error {
+		color: var(--error-text-color);
+	}
+
+	.type {
+		color: var(--block-label-text-color);
+	}
+
+	.desc {
+		color: var(--body-text-color-subdued);
+	}
+
+	.name {
+		text-transform: capitalize;
+	}
+
+	.first-level {
+		margin-left: 1rem;
+	}
+
+	.second-level {
+		margin-left: 2rem;
+	}
+</style>

package/src/api_docs/InstallSnippet.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import CopyButton from "./CopyButton.svelte";
+	import { Block } from "@gradio/atoms";
+
+	export let current_language: "python" | "javascript" | "bash";
+
+	let py_install = "pip install gradio_client";
+	let js_install = "npm i -D @gradio/client";
+	let bash_install = "curl --version";
+</script>
+
+<Block border_mode="contrast">
+	<code>
+		{#if current_language === "python"}
+			<div class="copy">
+				<CopyButton code={py_install} />
+			</div>
+			<div>
+				<pre>$ {py_install}</pre>
+			</div>
+		{:else if current_language === "javascript"}
+			<div class="copy">
+				<CopyButton code={js_install} />
+			</div>
+			<div>
+				<pre>$ {js_install}</pre>
+			</div>
+		{:else if current_language === "bash"}
+			<div class="copy">
+				<CopyButton code={bash_install} />
+			</div>
+			<div>
+				<pre>$ {bash_install}</pre>
+			</div>
+		{/if}
+	</code>
+</Block>
+
+<style>
+	code pre {
+		overflow-x: auto;
+		color: var(--body-text-color);
+		font-family: var(--font-mono);
+		tab-size: 2;
+	}
+
+	code {
+		position: relative;
+		display: block;
+	}
+
+	.copy {
+		position: absolute;
+		top: 0;
+		right: 0;
+		margin-top: -5px;
+		margin-right: -5px;
+	}
+</style>

package/src/api_docs/NoApi.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import Clear from "./img/clear.svelte";
+
+	const dispatch = createEventDispatcher();
+
+	export let root: string;
+</script>
+
+<div class="wrap prose">
+	<h1>API Docs</h1>
+	<p class="attention">
+		No API Routes found for
+		<code>
+			{root}
+		</code>
+	</p>
+	<p>
+		To expose an API endpoint of your app in this page, set the <code>
+			api_name
+		</code>
+		parameter of the event listener.
+		<br />
+		For more information, visit the
+		<a href="https://gradio.app/sharing_your_app/#api-page" target="_blank">
+			API Page guide
+		</a>
+		. To hide the API documentation button and this page, set
+		<code>show_api=False</code>
+		in the
+		<code>Blocks.launch()</code>
+		method.
+	</p>
+</div>
+
+<button on:click={() => dispatch("close")}>
+	<Clear />
+</button>
+
+<style>
+	.wrap {
+		padding: var(--size-6);
+	}
+
+	.attention {
+		font-weight: var(--weight-bold);
+		font-size: var(--text-lg);
+	}
+
+	.attention code {
+		border: none;
+		background: none;
+		color: var(--color-accent);
+		font-weight: var(--weight-bold);
+	}
+
+	button {
+		position: absolute;
+		top: var(--size-5);
+		right: var(--size-6);
+		width: var(--size-4);
+		color: var(--body-text-color);
+	}
+
+	button:hover {
+		color: var(--color-accent);
+	}
+
+	@media (--screen-md) {
+		button {
+			top: var(--size-6);
+		}
+	}
+</style>

package/src/api_docs/ParametersSnippet.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { Loader } from "@gradio/statustracker";
+	import { represent_value } from "./utils";
+
+	export let is_running: boolean;
+	export let endpoint_returns: any;
+	export let js_returns: any;
+	export let current_language: "python" | "javascript" | "bash";
+</script>
+
+<h4>
+	<div class="toggle-icon">
+		<div class="toggle-dot" />
+	</div>
+	Accepts {endpoint_returns.length} parameter{#if endpoint_returns.length != 1}s{/if}:
+</h4>
+
+<div class:hide={is_running}>
+	{#each endpoint_returns as { label, python_type, component, parameter_name, parameter_has_default, parameter_default }, i}
+		<hr class="hr" />
+		<div style="margin:10px;">
+			<p style="white-space: nowrap; overflow-x: auto;">
+				<span class="code" style="margin-right: 10px;"
+					>{current_language !== "bash" && parameter_name
+						? parameter_name
+						: "[" + i + "]"}</span
+				>
+				<span class="code highlight" style="margin-right: 10px;"
+					>{#if current_language === "python"}{python_type.type}{#if parameter_has_default && parameter_default === null}&nbsp;|
+							None{/if}{:else}{js_returns[i].type || "any"}{/if}</span
+				>
+				{#if !parameter_has_default || current_language == "bash"}<span
+						style="font-weight:bold">Required</span
+					>{:else}<span> Default: </span><span
+						class="code"
+						style="font-size: var(--text-sm);"
+						>{represent_value(parameter_default, python_type.type, "py")}</span
+					>{/if}
+			</p>
+			<p class="desc">
+				The input value that is provided in the "{label}" <!--
+	-->{component}
+				component<!--
+	-->.
+			</p>
+		</div>
+	{/each}
+</div>
+{#if is_running}
+	<div class="load-wrap">
+		<Loader margin={false} />
+	</div>
+{/if}
+
+<style>
+	.hr {
+		border: 0;
+		height: 1px;
+		background: var(--color-accent-soft);
+		margin-bottom: 12px;
+	}
+
+	.code {
+		font-family: var(--font-mono);
+		display: inline;
+	}
+
+	.highlight {
+		background: var(--color-accent-soft);
+		color: var(--color-accent);
+		padding: var(--size-1);
+	}
+
+	.desc {
+		color: var(--body-text-color-subdued);
+		font-size: var(--text-lg);
+		margin-top: var(--size-1);
+	}
+
+	h4 {
+		display: flex;
+		align-items: center;
+		margin-top: var(--size-6);
+		margin-bottom: var(--size-3);
+		color: var(--body-text-color);
+		font-weight: var(--weight-bold);
+	}
+
+	.toggle-icon {
+		display: flex;
+		align-items: center;
+		margin-right: var(--size-2);
+		border-radius: var(--radius-full);
+		background: var(--color-grey-300);
+		width: 12px;
+		height: 4px;
+	}
+
+	.toggle-dot {
+		border-radius: var(--radius-full);
+		background: var(--color-grey-700);
+		width: 6px;
+		height: 6px;
+		margin-right: auto;
+	}
+</style>

package/src/api_docs/RecordingSnippet.svelte

@@ -0,0 +1,224 @@
+<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 current_language: "python" | "javascript" | "bash";
+	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 + "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">
+	<!-- <EndpointDetail {named} api_name={dependency.api_name} /> -->
+	<Block border_mode={"focus"}>
+		{#if current_language === "python"}
+			<code>
+				<div class="copy">
+					<CopyButton code={python_code_text} />
+				</div>
+				<div bind:this={python_code}>
+					<pre><span class="highlight">from</span> gradio_client <span
+							class="highlight">import</span
+						> Client, file
+
+client = Client(<span class="token string">"{short_root}"</span
+						>{#if username !== null}, auth=("{username}", **password**){/if})
+{#each py_zipped as { call, api_name }}<!--
+-->
+client.<span class="highlight"
+								>predict(
+{call}  api_name=<span class="api-name">"/{api_name}"</span>
+)
+</span>{/each}</pre>
+				</div>
+			</code>
+		{:else if current_language === "javascript"}
+			<code>
+				<div class="copy">
+					<CopyButton code={js_code?.innerText} />
+				</div>
+				<div bind:this={js_code}>
+					<pre>import &lbrace; Client &rbrace; from "@gradio/client";
+
+const app = await Client.connect(<span class="token string">"{short_root}"</span
+						>{#if username !== null}, &lbrace;auth: ["{username}", **password**]&rbrace;{/if});
+					{#each js_zipped as { call, api_name }}<!--
+					-->
+await client.predict(<span
+								class="api-name">
+  "/{api_name}"</span
+							>{#if call},
+							{/if}{call});
+						{/each}</pre>
+				</div>
+			</code>
+		{:else if current_language === "bash"}
+			<code>
+				<div class="copy">
+					<CopyButton code={bash_code?.innerText} />
+				</div>
+				<div bind:this={bash_code}>
+					{#each bash_zipped as { call, api_name }}
+						<pre>curl -X POST {short_root}call/{api_name} -s -H "Content-Type: application/json" -d '{"{"} 
+	"data": [{call}]{"}"}' \
+  | awk -F'"' '{"{"} print $4{"}"}' \
+  | read EVENT_ID; curl -N {short_root}call/{api_name}/$EVENT_ID</pre>
+						<br />
+					{/each}
+				</div>
+			</code>
+		{/if}
+	</Block>
+</div>
+
+<style>
+	code pre {
+		overflow-x: auto;
+		color: var(--body-text-color);
+		font-family: var(--font-mono);
+		tab-size: 2;
+	}
+
+	.token.string {
+		display: contents;
+		color: var(--color-accent-base);
+	}
+
+	code {
+		position: relative;
+		display: block;
+	}
+
+	.copy {
+		position: absolute;
+		top: 0;
+		right: 0;
+		margin-top: -5px;
+		margin-right: -5px;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xxl);
+		margin-top: var(--size-3);
+		margin-bottom: var(--size-3);
+	}
+
+	.api-name {
+		color: var(--color-accent);
+	}
+</style>