@gradio/core 0.0.2 → 0.0.3

package/dist/src/api_docs/CodeSnippet.svelte

@@ -0,0 +1,184 @@
+<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 dependency_index;
+export let root;
+export let space_id;
+export let endpoint_parameters;
+export let named;
+export let username;
+export let current_language;
+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)
+);
+</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/dist/src/api_docs/CodeSnippet.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { Dependency } from "../types";
+declare const __propDef: {
+    props: {
+        dependency: Dependency;
+        dependency_index: number;
+        root: string;
+        space_id: string | null;
+        endpoint_parameters: any;
+        named: boolean;
+        username: string | null;
+        current_language: "python" | "javascript" | "bash";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/src/api_docs/CopyButton.svelte

@@ -0,0 +1,15 @@
+<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>
+
+<BaseButton size="sm" on:click={copy}>
+	{copy_text}
+</BaseButton>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        code: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/src/api_docs/EndpointDetail.svelte

@@ -0,0 +1,36 @@
+<script>export let api_name = null;
+export let fn_index = null;
+export let named;
+</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/dist/src/api_docs/EndpointDetail.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        api_name?: (string | null) | undefined;
+        fn_index?: (number | null) | undefined;
+        named: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EndpointDetailProps = typeof __propDef.props;
+export type EndpointDetailEvents = typeof __propDef.events;
+export type EndpointDetailSlots = typeof __propDef.slots;
+export default class EndpointDetail extends SvelteComponent<EndpointDetailProps, EndpointDetailEvents, EndpointDetailSlots> {
+}
+export {};

package/dist/src/api_docs/InputPayload.svelte

@@ -0,0 +1,149 @@
+<script>import { BaseButton } from "@gradio/button";
+import { Block } from "@gradio/atoms";
+export let dependency;
+export let dependency_failures;
+export let dependency_index;
+export let instance_map;
+export let run;
+export let dependency_inputs;
+function format_label(label) {
+  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/dist/src/api_docs/InputPayload.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentMeta, Dependency } from "../types";
+declare const __propDef: {
+    props: {
+        dependency: Dependency;
+        dependency_failures: boolean[][];
+        dependency_index: number;
+        instance_map: {
+            [id: number]: ComponentMeta;
+        };
+        run: (id: number) => Promise<void>;
+        dependency_inputs: string[][];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputPayloadProps = typeof __propDef.props;
+export type InputPayloadEvents = typeof __propDef.events;
+export type InputPayloadSlots = typeof __propDef.slots;
+export default class InputPayload extends SvelteComponent<InputPayloadProps, InputPayloadEvents, InputPayloadSlots> {
+}
+export {};

package/dist/src/api_docs/InstallSnippet.svelte

@@ -0,0 +1,56 @@
+<script>import CopyButton from "./CopyButton.svelte";
+import { Block } from "@gradio/atoms";
+export let current_language;
+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/dist/src/api_docs/InstallSnippet.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        current_language: "python" | "javascript" | "bash";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InstallSnippetProps = typeof __propDef.props;
+export type InstallSnippetEvents = typeof __propDef.events;
+export type InstallSnippetSlots = typeof __propDef.slots;
+export default class InstallSnippet extends SvelteComponent<InstallSnippetProps, InstallSnippetEvents, InstallSnippetSlots> {
+}
+export {};

package/dist/src/api_docs/NoApi.svelte

@@ -0,0 +1,71 @@
+<script>import { createEventDispatcher } from "svelte";
+import Clear from "./img/clear.svelte";
+const dispatch = createEventDispatcher();
+export let root;
+</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/dist/src/api_docs/NoApi.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        root: string;
+    };
+    events: {
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NoApiProps = typeof __propDef.props;
+export type NoApiEvents = typeof __propDef.events;
+export type NoApiSlots = typeof __propDef.slots;
+export default class NoApi extends SvelteComponent<NoApiProps, NoApiEvents, NoApiSlots> {
+}
+export {};