@gradio/core 0.0.2

package/src/api_docs/ApiDocs.svelte

@@ -0,0 +1,418 @@
+<script lang="ts">
+	/* eslint-disable */
+	import { onMount, createEventDispatcher } from "svelte";
+	import type { ComponentMeta, Dependency } from "../types";
+	import NoApi from "./NoApi.svelte";
+	import type { Client } from "@gradio/client";
+	import type { Payload } from "../types";
+
+	import ApiBanner from "./ApiBanner.svelte";
+	import Button from "../../../button/shared/Button.svelte";
+	import ParametersSnippet from "./ParametersSnippet.svelte";
+	import InstallSnippet from "./InstallSnippet.svelte";
+	import CodeSnippet from "./CodeSnippet.svelte";
+	import RecordingSnippet from "./RecordingSnippet.svelte";
+
+	import python from "./img/python.svg";
+	import javascript from "./img/javascript.svg";
+	import bash from "./img/bash.svg";
+	import ResponseSnippet from "./ResponseSnippet.svelte";
+
+	export let dependencies: Dependency[];
+	export let root: string;
+	export let app: Awaited<ReturnType<typeof Client.connect>>;
+	export let space_id: string | null;
+	export let root_node: ComponentMeta;
+	export let username: string | null;
+
+	const js_docs =
+		"https://www.gradio.app/guides/getting-started-with-the-js-client";
+	const py_docs =
+		"https://www.gradio.app/guides/getting-started-with-the-python-client";
+	const bash_docs =
+		"https://www.gradio.app/guides/querying-gradio-apps-with-curl";
+	const spaces_docs_suffix = "#connecting-to-a-hugging-face-space";
+
+	let api_count = dependencies.filter(
+		(dependency) => dependency.show_api
+	).length;
+
+	if (root === "") {
+		root = location.protocol + "//" + location.host + location.pathname;
+	}
+	if (!root.endsWith("/")) {
+		root += "/";
+	}
+
+	export let api_calls: Payload[] = [];
+	let current_language: "python" | "javascript" | "bash" = "python";
+
+	const langs = [
+		["python", python],
+		["javascript", javascript],
+		["bash", bash]
+	] as const;
+
+	let is_running = false;
+
+	async function get_info(): Promise<{
+		named_endpoints: any;
+		unnamed_endpoints: any;
+	}> {
+		let response = await fetch(root + "info");
+		let data = await response.json();
+		return data;
+	}
+	async function get_js_info(): Promise<Record<string, any>> {
+		let js_api_info = await app.view_api();
+		return js_api_info;
+	}
+
+	let info: {
+		named_endpoints: any;
+		unnamed_endpoints: any;
+	};
+
+	let js_info: Record<string, any>;
+
+	get_info().then((data) => {
+		info = data;
+	});
+
+	get_js_info().then((js_api_info) => {
+		js_info = js_api_info;
+	});
+
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
+		document.body.style.overflow = "hidden";
+		if ("parentIFrame" in window) {
+			window.parentIFrame?.scrollTo(0, 0);
+		}
+		return () => {
+			document.body.style.overflow = "auto";
+		};
+	});
+</script>
+
+{#if info}
+	{#if api_count}
+		<div class="banner-wrap">
+			<ApiBanner on:close root={space_id || root} {api_count} />
+		</div>
+
+		<div class="docs-wrap">
+			<div class="client-doc">
+				<p style="font-size: var(--text-lg);">
+					Choose a language to see the code snippets for interacting with the
+					API.
+				</p>
+			</div>
+			<div class="endpoint">
+				<div class="snippets">
+					{#each langs as [language, img]}
+						<li
+							class="snippet
+						{current_language === language ? 'current-lang' : 'inactive-lang'}"
+							on:click={() => (current_language = language)}
+						>
+							<img src={img} alt="" />
+							{language}
+						</li>
+					{/each}
+				</div>
+				{#if api_calls.length}
+					<div>
+						<p
+							id="num-recorded-api-calls"
+							style="font-size: var(--text-lg); font-weight:bold; margin: 10px 0px;"
+						>
+							🪄 Recorded API Calls <span class="api-count"
+								>[{api_calls.length}]</span
+							>
+						</p>
+						<p>
+							Here is the code snippet to replay the most recently recorded API
+							calls using the {current_language}
+							client.
+						</p>
+
+						<RecordingSnippet
+							{current_language}
+							{api_calls}
+							{dependencies}
+							{root}
+							short_root={space_id || root}
+							{username}
+						/>
+						<p>
+							Note: Some API calls only affect the UI, so when using the
+							clients, the desired result may be achieved with only a subset of
+							the recorded calls.
+						</p>
+					</div>
+					<p
+						style="font-size: var(--text-lg); font-weight:bold; margin: 30px 0px 10px;"
+					>
+						API Documentation
+					</p>
+				{:else}
+					<p class="padded">
+						{#if current_language == "python" || current_language == "javascript"}
+							1. Install the
+							<span style="text-transform:capitalize">{current_language}</span>
+							client (<a
+								href={current_language == "python" ? py_docs : js_docs}
+								target="_blank">docs</a
+							>) if you don't already have it installed.
+						{:else}
+							1. Confirm that you have cURL installed on your system.
+						{/if}
+					</p>
+
+					<InstallSnippet {current_language} />
+
+					<p class="padded">
+						2. Find the API endpoint below corresponding to your desired
+						function in the app. Copy the code snippet, replacing the
+						placeholder values with your own input data.
+						{#if space_id}If this is a private Space, you may need to pass your
+							Hugging Face token as well (<a
+								href={current_language == "python"
+									? py_docs + spaces_docs_suffix
+									: current_language == "javascript"
+										? js_docs + spaces_docs_suffix
+										: bash_docs}
+								class="underline"
+								target="_blank">read more</a
+							>).{/if}
+
+						Or use the
+						<Button
+							size="sm"
+							variant="secondary"
+							on:click={() => dispatch("close", { api_recorder_visible: true })}
+						>
+							<div class="loading-dot"></div>
+							<p class="self-baseline">API Recorder</p>
+						</Button>
+						to automatically generate your API requests.
+						{#if current_language == "bash"}<br />&nbsp;<br />Making a
+							prediction and getting a result requires
+							<strong>2 requests</strong>: a
+							<code>POST</code>
+							and a <code>GET</code> request. The <code>POST</code> request
+							returns an <code>EVENT_ID</code>, which is used in the second
+							<code>GET</code> request to fetch the results. In these snippets,
+							we've used <code>awk</code> and <code>read</code> to parse the
+							results, combining these two requests into one command for ease of
+							use. {#if username !== null}
+								Note: connecting to an authenticated app requires an additional
+								request.{/if} See
+							<a href={bash_docs} target="_blank">curl docs</a>.
+						{/if}
+
+						<!-- <span
+							id="api-recorder"
+							on:click={() => dispatch("close", { api_recorder_visible: true })}
+							>🪄 API Recorder</span
+						> to automatically generate your API requests! -->
+					</p>
+				{/if}
+
+				{#each dependencies as dependency, dependency_index}
+					{#if dependency.show_api && info.named_endpoints["/" + dependency.api_name]}
+						<div class="endpoint-container">
+							<CodeSnippet
+								named={true}
+								endpoint_parameters={info.named_endpoints[
+									"/" + dependency.api_name
+								].parameters}
+								{dependency}
+								{dependency_index}
+								{current_language}
+								{root}
+								{space_id}
+								{username}
+							/>
+
+							<ParametersSnippet
+								endpoint_returns={info.named_endpoints[
+									"/" + dependency.api_name
+								].parameters}
+								js_returns={js_info.named_endpoints["/" + dependency.api_name]
+									.parameters}
+								{is_running}
+								{current_language}
+							/>
+
+							<ResponseSnippet
+								endpoint_returns={info.named_endpoints[
+									"/" + dependency.api_name
+								].returns}
+								js_returns={js_info.named_endpoints["/" + dependency.api_name]
+									.returns}
+								{is_running}
+								{current_language}
+							/>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{:else}
+		<NoApi {root} on:close />
+	{/if}
+{/if}
+
+<style>
+	.banner-wrap {
+		position: relative;
+		border-bottom: 1px solid var(--border-color-primary);
+		padding: var(--size-4) var(--size-6);
+		font-size: var(--text-md);
+	}
+
+	@media (--screen-md) {
+		.banner-wrap {
+			font-size: var(--text-xl);
+		}
+	}
+
+	.docs-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xxl);
+	}
+
+	.endpoint {
+		border-radius: var(--radius-md);
+		background: var(--background-fill-primary);
+		padding: var(--size-6);
+		padding-top: var(--size-1);
+		font-size: var(--text-md);
+	}
+
+	.client-doc {
+		padding-top: var(--size-6);
+		padding-right: var(--size-6);
+		padding-left: var(--size-6);
+		font-size: var(--text-md);
+	}
+
+	.library {
+		border: 1px solid var(--border-color-accent);
+		border-radius: var(--radius-sm);
+		background: var(--color-accent-soft);
+		padding: 0px var(--size-1);
+		color: var(--color-accent);
+		font-size: var(--text-md);
+		text-decoration: none;
+	}
+
+	.snippets {
+		display: flex;
+		align-items: center;
+		margin-bottom: var(--size-4);
+	}
+
+	.snippets > * + * {
+		margin-left: var(--size-2);
+	}
+
+	.snippet {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--border-color-primary);
+
+		border-radius: var(--radius-md);
+		padding: var(--size-1) var(--size-1-5);
+		color: var(--body-text-color-subdued);
+		color: var(--body-text-color);
+		line-height: 1;
+		user-select: none;
+		text-transform: capitalize;
+	}
+
+	.current-lang {
+		border: 1px solid var(--body-text-color-subdued);
+		color: var(--body-text-color);
+	}
+
+	.inactive-lang {
+		cursor: pointer;
+		color: var(--body-text-color-subdued);
+	}
+
+	.inactive-lang:hover,
+	.inactive-lang:focus {
+		box-shadow: var(--shadow-drop);
+		color: var(--body-text-color);
+	}
+
+	.snippet img {
+		margin-right: var(--size-1-5);
+		width: var(--size-3);
+	}
+
+	.header {
+		margin-top: var(--size-6);
+		font-size: var(--text-xl);
+	}
+
+	.endpoint-container {
+		margin-top: var(--size-3);
+		margin-bottom: var(--size-3);
+		border: 1px solid var(--body-text-color);
+		border-radius: var(--radius-xl);
+		padding: var(--size-3);
+		padding-top: 0;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	p.padded {
+		padding: 15px 0px;
+		font-size: var(--text-lg);
+	}
+
+	#api-recorder {
+		border: 1px solid var(--color-accent);
+		background-color: var(--color-accent-soft);
+		padding: 0px var(--size-2);
+		border-radius: var(--size-1);
+		cursor: pointer;
+	}
+
+	code {
+		font-size: var(--text-md);
+	}
+	.loading-dot {
+		position: relative;
+		left: -9999px;
+		width: 10px;
+		height: 10px;
+		border-radius: 5px;
+		background-color: #fd7b00;
+		color: #fd7b00;
+		box-shadow: 9999px 0 0 -1px;
+		margin-right: 0.25rem;
+	}
+	:global(.docs-wrap .sm.secondary) {
+		padding-top: 1px;
+		padding-bottom: 1px;
+	}
+	.self-baseline {
+		align-self: baseline;
+	}
+	.api-count {
+		font-weight: bold;
+		color: #fd7b00;
+		align-self: baseline;
+		font-family: var(--font-mono);
+		font-size: var(--text-md);
+	}
+</style>

package/src/api_docs/ApiRecorder.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Payload, Dependency } from "../types";
+	import Button from "../../../button/shared/Button.svelte";
+
+	export let api_calls: Payload[] = [];
+	export let dependencies: Dependency[];
+</script>
+
+<div id="api-recorder">
+	<Button size="sm" variant="secondary">
+		<div class="loading-dot self-baseline"></div>
+		<p class="self-baseline">Recording API Calls:</p>
+		<p class="self-baseline api-section">
+			<span class="api-count">
+				[{api_calls.length}]
+			</span>
+			{#if api_calls.length > 0}
+				<span class="api-name"
+					>/{dependencies[api_calls[api_calls.length - 1].fn_index]
+						.api_name}</span
+				>
+			{/if}
+		</p>
+	</Button>
+</div>
+
+<style>
+	.api-name {
+		font-size: var(--text-sm);
+		font-family: var(--font-mono);
+		color: #fd7b00;
+	}
+	.loading-dot {
+		position: relative;
+		left: -9999px;
+		width: 10px;
+		height: 10px;
+		border-radius: 5px;
+		background-color: #fd7b00;
+		color: #fd7b00;
+		box-shadow: 9999px 0 0 -1px;
+		animation: loading-dot 2s infinite linear;
+		animation-delay: 0.25s;
+		margin-left: 0.25rem;
+		margin-right: 0.5rem;
+	}
+	:global(.docs-wrap .sm.secondary) {
+		padding-top: 1px;
+		padding-bottom: 1px;
+	}
+	.self-baseline {
+		align-self: baseline;
+	}
+	@keyframes loading-dot {
+		0% {
+			box-shadow: 9999px 0 0 -1px;
+		}
+		50% {
+			box-shadow: 9999px 0 0 2px;
+		}
+		100% {
+			box-shadow: 9999px 0 0 -1px;
+		}
+	}
+	.api-count {
+		font-weight: bold;
+		color: #fd7b00;
+		align-self: baseline;
+		font-family: var(--font-mono);
+		font-size: var(--text-sm);
+	}
+	.api-section {
+		margin-left: 4px;
+	}
+</style>

package/src/api_docs/CodeSnippet.svelte

@@ -0,0 +1,198 @@
+<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 dependency_index: number;
+	export let root: string;
+	export let space_id: string | null;
+	export let endpoint_parameters: any;
+	export let named: boolean;
+	export let username: string | null;
+	export let current_language: "python" | "javascript" | "bash";
+
+	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)
+	);
+</script>
+
+<div class="container">
+	{#if named}
+		<EndpointDetail {named} api_name={dependency.api_name} />
+	{:else}
+		<EndpointDetail {named} fn_index={dependency_index} />
+	{/if}
+	{#if current_language === "python"}
+		<Block>
+			<code>
+				<div class="copy">
+					<CopyButton code={python_code?.innerText} />
+				</div>
+				<div bind:this={python_code}>
+					<pre><span class="highlight">from</span> gradio_client <span
+							class="highlight">import</span
+						> Client{#if has_file_path}, handle_file{/if}
+
+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}<!--
+        -->
+		{parameter_name
+								? parameter_name + "="
+								: ""}<span
+								>{represent_value(
+									parameter_has_default ? parameter_default : example_input,
+									python_type.type,
+									"py"
+								)}</span
+							>,{/each}<!--
+
+		-->
+		api_name=<span class="api-name">"/{dependency.api_name}"</span><!--
+		-->
+)
+<span class="highlight">print</span>(result)</pre>
+				</div>
+			</code>
+		</Block>
+	{:else if current_language === "javascript"}
+		<Block>
+			<code>
+				<div class="copy">
+					<CopyButton code={js_code?.innerText} />
+				</div>
+				<div bind:this={js_code}>
+					<pre>import &lbrace; Client &rbrace; from "@gradio/client";
+{#each blob_examples as { component, example_input }, i}<!--
+-->
+const response_{i} = await fetch("{example_input.url}");
+const example{component} = await response_{i}.blob();
+						{/each}<!--
+-->
+const client = await Client.connect(<span class="token string"
+							>"{space_id || root}"</span
+						>{#if username !== null}, &lbrace;auth: ["{username}", **password**]&rbrace;{/if});
+const result = await client.predict({#if named}<span class="api-name"
+								>"/{dependency.api_name}"</span
+							>{:else}{dependency_index}{/if}, &lbrace; <!--
+-->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
+		-->{#if blob_components.includes(component)}<!--
+	-->
+				<span
+									class="example-inputs"
+									>{parameter_name}: example{component}</span
+								>, <!--
+		--><span class="desc"><!--
+		--></span
+								><!--
+		-->{:else}<!--
+	-->		
+		<span class="example-inputs"
+									>{parameter_name}: {represent_value(
+										example_input,
+										python_type.type,
+										"js"
+									)}</span
+								>, <!--
+--><!--
+-->{/if}
+						{/each}
+&rbrace;);
+
+console.log(result.data);
+</pre>
+				</div>
+			</code>
+		</Block>
+	{:else if current_language === "bash"}
+		<Block>
+			<code>
+				<div class="copy">
+					<CopyButton code={bash_post_code?.innerText}></CopyButton>
+				</div>
+
+				<div bind:this={bash_post_code}>
+					<pre>curl -X POST {root}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}
+							<!-- 
+-->{represent_value(
+								example_input,
+								python_type.type,
+								"bash"
+							)}{#if i < endpoint_parameters.length - 1},
+							{/if}
+						{/each}
+]{"}"}' \
+  | awk -F'"' '{"{"} print $4{"}"}'  \
+  | read EVENT_ID; curl -N {root}call/{dependency.api_name}/$EVENT_ID</pre>
+				</div>
+			</code>
+		</Block>
+	{/if}
+</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);
+	}
+
+	.desc {
+		color: var(--body-text-color-subdued);
+	}
+
+	.api-name {
+		color: var(--color-accent);
+	}
+</style>

package/src/api_docs/CopyButton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { BaseButton } from "@gradio/button";
+	export let code: string;
+	let copy_text = "copy";
+
+	function copy(): void {
+		navigator.clipboard.writeText(code);
+		copy_text = "copied!";
+		setTimeout(() => {
+			copy_text = "copy";
+		}, 1500);
+	}
+</script>
+
+<BaseButton size="sm" on:click={copy}>
+	{copy_text}
+</BaseButton>