@gradio/core 0.0.2 → 0.0.3

package/dist/src/Embed.svelte

@@ -0,0 +1,195 @@
+<script>import space_logo from "./images/spaces.svg";
+import { _ } from "svelte-i18n";
+export let wrapper;
+export let version;
+export let initial_height;
+export let fill_width;
+export let is_embed;
+export let space;
+export let display;
+export let info;
+export let loaded;
+</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/dist/src/Embed.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        wrapper: HTMLDivElement;
+        version: string;
+        initial_height: string;
+        fill_width: boolean;
+        is_embed: boolean;
+        space: string | null;
+        display: boolean;
+        info: boolean;
+        loaded: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EmbedProps = typeof __propDef.props;
+export type EmbedEvents = typeof __propDef.events;
+export type EmbedSlots = typeof __propDef.slots;
+export default class Embed extends SvelteComponent<EmbedProps, EmbedEvents, EmbedSlots> {
+}
+export {};

package/dist/src/Login.svelte

@@ -0,0 +1,107 @@
+<script>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;
+export let auth_message;
+export let app_mode;
+export let space_id;
+let username = "";
+let password = "";
+let incorrect_credentials = false;
+const submit = async () => {
+  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/dist/src/Login.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        root: string;
+        auth_message: string | null;
+        app_mode: boolean;
+        space_id: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoginProps = typeof __propDef.props;
+export type LoginEvents = typeof __propDef.events;
+export type LoginSlots = typeof __propDef.slots;
+export default class Login extends SvelteComponent<LoginProps, LoginEvents, LoginSlots> {
+}
+export {};

package/dist/src/MountComponents.svelte

@@ -0,0 +1,26 @@
+<script>import { onMount, createEventDispatcher } from "svelte";
+import Render from "./Render.svelte";
+export let rootNode;
+export let root;
+export let target;
+export let theme_mode;
+export let version;
+export let autoscroll;
+export let max_file_size = null;
+export let client;
+const dispatch = createEventDispatcher();
+onMount(() => {
+  dispatch("mount");
+});
+</script>
+
+<Render
+	node={rootNode}
+	{root}
+	{target}
+	{theme_mode}
+	{version}
+	{autoscroll}
+	{max_file_size}
+	{client}
+/>

package/dist/src/MountComponents.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Client } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        rootNode: any;
+        root: any;
+        target: any;
+        theme_mode: any;
+        version: any;
+        autoscroll: boolean;
+        max_file_size?: (number | null) | undefined;
+        client: Client;
+    };
+    events: {
+        mount?: CustomEvent<undefined> | undefined;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MountComponentsProps = typeof __propDef.props;
+export type MountComponentsEvents = typeof __propDef.events;
+export type MountComponentsSlots = typeof __propDef.slots;
+export default class MountComponents extends SvelteComponent<MountComponentsProps, MountComponentsEvents, MountComponentsSlots> {
+}
+export {};

package/dist/src/Render.svelte

@@ -0,0 +1,91 @@
+<script>import { Gradio, formatter } from "./gradio_helper";
+import { onMount, createEventDispatcher, setContext } from "svelte";
+import RenderComponent from "./RenderComponent.svelte";
+import { load_component } from "virtual:component-loader";
+export let root;
+export let node;
+export let parent = null;
+export let target;
+export let theme_mode;
+export let version;
+export let autoscroll;
+export let max_file_size;
+export let client;
+const dispatch = createEventDispatcher();
+let filtered_children = [];
+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(
+    node.id,
+    target,
+    theme_mode,
+    version,
+    root,
+    autoscroll,
+    max_file_size,
+    formatter,
+    client,
+    load_component
+  );
+</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/dist/src/Render.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentMeta, ThemeMode } from "./types";
+import type { Client } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        root: string;
+        node: ComponentMeta;
+        parent?: (string | null) | undefined;
+        target: HTMLElement;
+        theme_mode: ThemeMode;
+        version: string;
+        autoscroll: boolean;
+        max_file_size: number | null;
+        client: Client;
+    };
+    events: {
+        mount: CustomEvent<number>;
+        destroy: CustomEvent<number>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RenderProps = typeof __propDef.props;
+export type RenderEvents = typeof __propDef.events;
+export type RenderSlots = typeof __propDef.slots;
+export default class Render extends SvelteComponent<RenderProps, RenderEvents, RenderSlots> {
+}
+export {};

package/dist/src/RenderComponent.svelte

@@ -0,0 +1,51 @@
+<svelte:options immutable={true} />
+
+<script>import { bind, binding_callbacks } from "svelte/internal";
+export let root;
+export let component;
+export let target;
+export let theme_mode;
+export let instance;
+export let value;
+export let gradio;
+export let elem_id;
+export let elem_classes;
+export let _id;
+const s = (id, p, v) => new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });
+function wrap(component2) {
+  const ProxiedMyClass = new Proxy(component2, {
+    construct(_target, args) {
+      const instance2 = new _target(...args);
+      const props = Object.keys(instance2.$$.props);
+      function report(props2) {
+        return function(propargs) {
+          const ev = s(_id, props2, propargs);
+          target.dispatchEvent(ev);
+        };
+      }
+      props.forEach((v) => {
+        binding_callbacks.push(() => bind(instance2, v, report(v)));
+      });
+      return instance2;
+    }
+  });
+  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/dist/src/RenderComponent.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { Gradio } from "./gradio_helper";
+import type { ComponentMeta, ThemeMode } from "./types";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        root: string;
+        component: ComponentMeta["component"];
+        target: HTMLElement;
+        theme_mode: ThemeMode;
+        instance: ComponentMeta["instance"];
+        value: any;
+        gradio: Gradio;
+        elem_id: string;
+        elem_classes: string[];
+        _id: number;
+    };
+    events: {
+        prop_change: any;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RenderComponentProps = typeof __propDef.props;
+export type RenderComponentEvents = typeof __propDef.events;
+export type RenderComponentSlots = typeof __propDef.slots;
+export default class RenderComponent extends SvelteComponent<RenderComponentProps, RenderComponentEvents, RenderComponentSlots> {
+}
+export {};