@gradio/core 0.0.2

package/src/Embed.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import space_logo from "./images/spaces.svg";
+	import { _ } from "svelte-i18n";
+	export let wrapper: HTMLDivElement;
+	export let version: string;
+	export let initial_height: string;
+	export let fill_width: boolean;
+	export let is_embed: boolean;
+
+	export let space: string | null;
+	export let display: boolean;
+	export let info: boolean;
+	export let loaded: boolean;
+</script>
+
+<div
+	bind:this={wrapper}
+	class:app={!display && !is_embed}
+	class:fill_width
+	class:embed-container={display}
+	class:with-info={info}
+	class="gradio-container gradio-container-{version}"
+	style:min-height={loaded ? "initial" : initial_height}
+	style:flex-grow={!display ? "1" : "auto"}
+	data-iframe-height
+>
+	<div class="main">
+		<slot />
+	</div>
+	{#if display && space && info}
+		<div class="info">
+			<span>
+				<a href="https://huggingface.co/spaces/{space}" class="title">{space}</a
+				>
+			</span>
+			<span>
+				{$_("common.built_with")}
+				<a class="gradio" href="https://gradio.app">Gradio</a>.
+			</span>
+			<span>
+				{$_("common.hosted_on")}
+				<a class="hf" href="https://huggingface.co/spaces"
+					><span class="space-logo">
+						<img src={space_logo} alt="Hugging Face Space" />
+					</span> Spaces</a
+				>
+			</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.gradio-container {
+		display: flex;
+		position: relative;
+		flex-direction: column;
+		padding: 0;
+		min-height: 1px;
+		overflow: hidden;
+		color: var(--button-secondary-text-color);
+	}
+
+	.embed-container {
+		margin: var(--size-4) 0px;
+		border: 1px solid var(--button-secondary-border-color);
+		border-radius: var(--embed-radius);
+	}
+
+	.with-info {
+		padding-bottom: var(--size-7);
+	}
+
+	.embed-container > .main {
+		padding: var(--size-4);
+	}
+
+	.app > .main {
+		display: flex;
+		flex-grow: 1;
+		flex-direction: column;
+	}
+
+	.app {
+		position: relative;
+		margin: auto;
+		padding: var(--size-4) var(--size-8);
+		width: 100%;
+		height: 100%;
+	}
+
+	@media (--screen-sm) {
+		.app:not(.fill_width) {
+			max-width: 640px;
+		}
+	}
+	@media (--screen-md) {
+		.app:not(.fill_width) {
+			max-width: 768px;
+		}
+	}
+	@media (--screen-lg) {
+		.app:not(.fill_width) {
+			max-width: 1024px;
+		}
+	}
+	@media (--screen-xl) {
+		.app:not(.fill_width) {
+			max-width: 1280px;
+		}
+	}
+	@media (--screen-xxl) {
+		.app:not(.fill_width) {
+			max-width: 1536px;
+		}
+	}
+
+	.info {
+		display: flex;
+		position: absolute;
+		bottom: 0;
+		justify-content: flex-start;
+		border-top: 1px solid var(--button-secondary-border-color);
+		padding: var(--size-1) var(--size-5);
+		width: 100%;
+		color: var(--body-text-color-subdued);
+		font-size: var(--text-md);
+		white-space: nowrap;
+	}
+
+	.info > span {
+		word-wrap: break-word;
+		-break: keep-all;
+		display: block;
+		word-break: keep-all;
+	}
+
+	.info > span:nth-child(1) {
+		margin-right: 4px;
+		min-width: 0px;
+		max-width: max-content;
+		overflow: hidden;
+		color: var(--body-text-color);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.info > span:nth-child(2) {
+		margin-right: 3px;
+	}
+
+	.info > span:nth-child(2),
+	.info > span:nth-child(3) {
+		width: max-content;
+	}
+
+	.info > span:nth-child(3) {
+		align-self: flex-end;
+		justify-self: flex-end;
+		margin-left: auto;
+		text-align: right;
+	}
+
+	.info > span:nth-child(1) {
+		flex-shrink: 9;
+	}
+
+	.hidden-title {
+		position: absolute;
+		left: var(--size-5);
+		opacity: 0;
+		background: var(--button-secondary-background-fill);
+		padding-right: 4px;
+	}
+
+	.info a {
+		color: var(--body-text-color);
+	}
+
+	.title {
+		font-size: var(--text-sm);
+		font-family: var(--font-mono);
+	}
+
+	.hf {
+		margin-left: 5px;
+	}
+
+	.space-logo img {
+		display: inline-block;
+		margin-bottom: 4px;
+		height: 12px;
+	}
+
+	a:hover {
+		text-decoration: underline;
+	}
+</style>

package/src/Login.stories.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Login from "./Login.svelte";
+</script>
+
+<Meta
+	title="Components/Login Page"
+	component={Login}
+	argTypes={{
+		auth_message: {
+			control: "text",
+			description: "The optional auth message to display",
+			name: "label",
+			value: "Gradio Button"
+		}
+	}}
+/>
+
+<Template let:args>
+	<Login {...args} />
+</Template>
+
+<Story name="Login page without auth message" args={{ auth_message: null }} />
+<Story
+	name="Login page with auth message"
+	args={{ auth_message: "Log in to this great gradio app" }}
+/>
+<Story
+	name="Login page with HTML auth message"
+	args={{
+		auth_message: "<em>Log in to this <strong>great</strong> gradio app</em>"
+	}}
+/>

package/src/Login.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import Form from "@gradio/form";
+	import { BaseTextbox as Textbox } from "@gradio/textbox";
+	import { BaseButton } from "@gradio/button";
+	import Column from "@gradio/column";
+	import { Block } from "@gradio/atoms";
+	import { _ } from "svelte-i18n";
+	export let root: string;
+	export let auth_message: string | null;
+	export let app_mode: boolean;
+	export let space_id: string | null;
+
+	let username = "";
+	let password = "";
+	let incorrect_credentials = false;
+
+	const submit = async (): Promise<void> => {
+		const formData = new FormData();
+		formData.append("username", username);
+		formData.append("password", password);
+
+		let response = await fetch(root + "/login", {
+			method: "POST",
+			body: formData
+		});
+		if (response.status === 400) {
+			incorrect_credentials = true;
+			username = "";
+			password = "";
+		} else if (response.status == 200) {
+			location.reload();
+		}
+	};
+</script>
+
+<div class="wrap" class:min-h-screen={app_mode}>
+	<Column variant="panel" min_width={480}>
+		<h2>{$_("login.login")}</h2>
+		{#if auth_message}
+			<p class="auth">{@html auth_message}</p>
+		{/if}
+		{#if space_id}
+			<p class="auth">
+				{$_("login.enable_cookies")}
+			</p>
+		{/if}
+		{#if incorrect_credentials}
+			<p class="creds">{$_("login.incorrect_credentials")}</p>
+		{/if}
+		<Form>
+			<Block>
+				<Textbox
+					label="username"
+					lines={1}
+					show_label={true}
+					max_lines={1}
+					on:submit={submit}
+					bind:value={username}
+				/>
+			</Block>
+
+			<Block>
+				<Textbox
+					label="password"
+					lines={1}
+					show_label={true}
+					max_lines={1}
+					type="password"
+					on:submit={submit}
+					bind:value={password}
+				/>
+			</Block>
+		</Form>
+
+		<BaseButton size="lg" variant="primary" on:click={submit}
+			>{$_("login.login")}</BaseButton
+		>
+	</Column>
+</div>
+
+<style>
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: var(--size-3);
+		background: var(--background-fill-primary);
+		width: var(--size-full);
+	}
+
+	h2 {
+		margin-bottom: var(--size-3);
+		color: var(--body-text-color);
+		font-weight: var(--section-header-text-weight);
+		font-size: var(--text-xl);
+	}
+
+	.auth {
+		margin-top: var(--size-1);
+		margin-bottom: var(--size-1);
+		color: var(--body-text-color);
+	}
+
+	.creds {
+		margin-top: var(--size-4);
+		margin-bottom: var(--size-4);
+		color: var(--error-text-color);
+		font-weight: var(--weight-semibold);
+	}
+</style>

package/src/MountComponents.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { onMount, createEventDispatcher } from "svelte";
+	import type { Client } from "@gradio/client";
+	import Render from "./Render.svelte";
+
+	export let rootNode: any;
+	export let root: any;
+	export let target: any;
+	export let theme_mode: any;
+	export let version: any;
+	export let autoscroll: boolean;
+	export let max_file_size: number | null = null;
+	export let client: Client;
+
+	const dispatch = createEventDispatcher<{ mount?: never }>();
+	onMount(() => {
+		dispatch("mount");
+	});
+</script>
+
+<Render
+	node={rootNode}
+	{root}
+	{target}
+	{theme_mode}
+	{version}
+	{autoscroll}
+	{max_file_size}
+	{client}
+/>

package/src/Render.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { Gradio, formatter } from "./gradio_helper";
+	import { onMount, createEventDispatcher, setContext } from "svelte";
+	import type { ComponentMeta, ThemeMode } from "./types";
+	import type { Client } from "@gradio/client";
+	import RenderComponent from "./RenderComponent.svelte";
+
+	export let root: string;
+
+	export let node: ComponentMeta;
+	export let parent: string | null = null;
+	export let target: HTMLElement;
+	export let theme_mode: ThemeMode;
+	export let version: string;
+	export let autoscroll: boolean;
+	export let max_file_size: number | null;
+	export let client: Client;
+
+	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
+	let filtered_children: ComponentMeta[] = [];
+
+	onMount(() => {
+		dispatch("mount", node.id);
+
+		for (const child of filtered_children) {
+			dispatch("mount", child.id);
+		}
+
+		return () => {
+			dispatch("destroy", node.id);
+
+			for (const child of filtered_children) {
+				dispatch("mount", child.id);
+			}
+		};
+	});
+
+	$: node.children =
+		node.children &&
+		node.children.filter((v) => {
+			const valid_node = node.type !== "statustracker";
+			if (!valid_node) {
+				filtered_children.push(v);
+			}
+			return valid_node;
+		});
+
+	setContext("BLOCK_KEY", parent);
+
+	$: {
+		if (node.type === "form") {
+			if (node.children?.every((c) => !c.props.visible)) {
+				node.props.visible = false;
+			} else {
+				node.props.visible = true;
+			}
+		}
+	}
+
+	$: gradio_class = new Gradio<Record<string, any>>(
+		node.id,
+		target,
+		theme_mode,
+		version,
+		root,
+		autoscroll,
+		max_file_size,
+		formatter,
+		client
+	);
+</script>
+
+<RenderComponent
+	_id={node.id}
+	component={node.component}
+	bind:instance={node.instance}
+	bind:value={node.props.value}
+	elem_id={("elem_id" in node.props && node.props.elem_id) ||
+		`component-${node.id}`}
+	elem_classes={("elem_classes" in node.props && node.props.elem_classes) || []}
+	{target}
+	{...node.props}
+	{theme_mode}
+	{root}
+	gradio={gradio_class}
+>
+	{#if node.children && node.children.length}
+		{#each node.children as _node (_node.id)}
+			<svelte:self
+				node={_node}
+				component={_node.component}
+				{target}
+				id={_node.id}
+				{root}
+				{theme_mode}
+				on:destroy
+				on:mount
+				{max_file_size}
+				{client}
+			/>
+		{/each}
+	{/if}
+</RenderComponent>

package/src/RenderComponent.svelte

@@ -0,0 +1,67 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+	import type { Gradio } from "./gradio_helper";
+	import type { ComponentMeta, ThemeMode } from "./types";
+	import type { SvelteComponent, ComponentType } from "svelte";
+	// @ts-ignore
+	import { bind, binding_callbacks } from "svelte/internal";
+
+	export let root: string;
+	export let component: ComponentMeta["component"];
+	export let target: HTMLElement;
+	export let theme_mode: ThemeMode;
+	export let instance: ComponentMeta["instance"];
+	export let value: any;
+	export let gradio: Gradio;
+	export let elem_id: string;
+	export let elem_classes: string[];
+	export let _id: number;
+
+	const s = (id: number, p: string, v: any): CustomEvent =>
+		new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });
+
+	function wrap(
+		component: ComponentType<SvelteComponent>
+	): ComponentType<SvelteComponent> {
+		const ProxiedMyClass = new Proxy(component, {
+			construct(_target, args: Record<string, any>[]) {
+				//@ts-ignore
+				const instance = new _target(...args);
+				const props = Object.keys(instance.$$.props);
+
+				function report(props: string) {
+					return function (propargs: any) {
+						const ev = s(_id, props, propargs);
+						target.dispatchEvent(ev);
+					};
+				}
+				props.forEach((v) => {
+					binding_callbacks.push(() => bind(instance, v, report(v)));
+				});
+
+				return instance;
+			}
+		});
+
+		return ProxiedMyClass;
+	}
+
+	const _component = wrap(component);
+</script>
+
+<svelte:component
+	this={_component}
+	bind:this={instance}
+	bind:value
+	on:prop_change
+	{elem_id}
+	{elem_classes}
+	{target}
+	{...$$restProps}
+	{theme_mode}
+	{root}
+	{gradio}
+>
+	<slot />
+</svelte:component>

package/src/api_docs/ApiBanner.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import api_logo from "./img/api-logo.svg";
+	import Clear from "./img/clear.svelte";
+	import { BaseButton } from "@gradio/button";
+
+	export let root: string;
+	export let api_count: number;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<h2>
+	<img src={api_logo} alt="" />
+	<div class="title">
+		API documentation
+		<div class="url">
+			{root}
+		</div>
+	</div>
+	<span class="counts">
+		<BaseButton
+			size="sm"
+			variant="secondary"
+			elem_id="start-api-recorder"
+			on:click={() => dispatch("close", { api_recorder_visible: true })}
+		>
+			<div class="loading-dot self-baseline"></div>
+			<p class="self-baseline btn-text">API Recorder</p>
+		</BaseButton>
+		<p>
+			<span class="url">{api_count}</span> API endpoint{#if api_count > 1}s{/if}<br
+			/>
+		</p>
+	</span>
+</h2>
+
+<button on:click={() => dispatch("close")}>
+	<Clear />
+</button>
+
+<style>
+	h2 {
+		display: flex;
+		color: var(--body-text-color);
+		font-weight: var(--weight-semibold);
+		gap: var(--size-4);
+	}
+
+	h2 img {
+		margin-right: var(--size-2);
+		width: var(--size-4);
+		display: inline-block;
+	}
+
+	.url {
+		color: var(--color-accent);
+		font-weight: normal;
+	}
+
+	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);
+		}
+
+		h2 img {
+			width: var(--size-5);
+		}
+	}
+
+	.counts {
+		margin-top: auto;
+		margin-right: var(--size-8);
+		margin-bottom: auto;
+		margin-left: auto;
+		color: var(--body-text-color);
+		font-weight: var(--weight-light);
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+
+	.loading-dot {
+		position: relative;
+		left: -9999px;
+		width: 12px;
+		height: 12px;
+		border-radius: 6px;
+		background-color: #fd7b00;
+		color: #fd7b00;
+		box-shadow: 9999px 0 0 -1px;
+		margin-right: 0.3rem;
+	}
+
+	.self-baseline {
+		align-self: baseline;
+	}
+	.title {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+	.btn-text {
+		font-size: var(--text-lg);
+	}
+</style>