@gradio/core 1.0.0-dev.0 → 1.0.0

package/src/init_utils.ts

@@ -0,0 +1,99 @@
+import { load_component } from "virtual:component-loader";
+import type { Dependency, LoadingComponent } from "./types";
+
+/**
+ * Load a component given its type and class_id without awaiting it
+ * @param type
+ * @param class_id
+ * @param root
+ * @returns the loading component
+ */
+export function get_component(
+	type: string,
+	class_id: string,
+	root: string,
+	variant: "component" | "example" | "base" = "component"
+): LoadingComponent {
+	if (type === "api") type = "state";
+
+	return load_component({
+		api_url: root,
+		name: type,
+		id: class_id,
+		variant
+	}).component;
+}
+
+/**
+ * Get all component ids that are an input dependency and all that are an output dependency
+ * @param dep the dependency
+ * @param inputs the set of inputs
+ * @param outputs the set of outputs
+ * @returns a tuple of the inputs and outputs
+ */
+export function get_inputs_outputs(
+	dependencies: Dependency[]
+): [Set<number>, Set<number>] {
+	const inputs = new Set<number>();
+	const outputs = new Set<number>();
+	for (const dep of dependencies) {
+		dep.inputs.forEach((input) => inputs.add(input));
+		dep.outputs.forEach((output) => outputs.add(output));
+	}
+	return [inputs, outputs];
+}
+
+/**
+ * Determines if a component is interactive
+ * explicitly set interactive prop takes precedence
+ * if not set, then if the component is an input to a dependency, it is interactive
+ * if not an input, but has no outputs and no default value, it is interactive (for dev)
+ * everything else is not interactive
+ * @param id component id
+ * @param interactive_prop value of the interactive prop
+ * @param value the main value of the component
+ * @param dependencies a tuple of sets of input and output component ids
+ * @returns if the component is interactive
+ */
+export function determine_interactivity(
+	id: number,
+	interactive_prop: boolean | undefined,
+	value: any,
+	dependencies: [Set<number>, Set<number>]
+): boolean {
+	const [inputs, outputs] = dependencies;
+
+	if (interactive_prop === false) {
+		return false;
+	} else if (interactive_prop === true) {
+		return true;
+	} else if (
+		inputs.has(id) ||
+		(!outputs.has(id) && has_no_default_value(value))
+	) {
+		return true;
+	}
+
+	return false;
+}
+
+/**
+ * Check if a value is not a default value
+ * @param value the value to check
+ * @returns default value boolean
+ */
+function has_no_default_value(value: any): boolean {
+	return (
+		(Array.isArray(value) && value.length === 0) ||
+		value === "" ||
+		value === 0 ||
+		!value
+	);
+}
+
+/** An async version of 'new Function' */
+export const AsyncFunction: new (
+	...args: string[]
+) => (...args: any[]) => Promise<any> = Object.getPrototypeOf(
+	async function () {}
+).constructor;

package/src/lang/en.json

@@ -36,7 +36,16 @@
 		"cancel": "Cancel",
 		"like": "Like",
 		"dislike": "Dislike",
-		"clear": "Clear"
+		"clear": "Clear",
+		"copy_message": "Copy message",
+		"copied_message": "Copied message"
+	},
+	"chat_interface": {
+		"new_chat": "New chat",
+		"message_placeholder": "Type a message...",
+		"additional_inputs": "Additional inputs",
+		"chatbot": "Chatbot",
+		"conversation": "Conversation"
 	},
 	"checkbox": {
 		"checkbox": "Checkbox",

package/src/lang/get_lang_names.js

@@ -23,6 +23,3 @@ for (const lang of langs) {
 			lang_data?.common?.loading || "Loading...";
 	}
 }
-
-console.log(lang_names);
-console.log(lang_loading);

package/src/lang/ru.json

@@ -150,6 +150,15 @@
 		"cancel": "Отмена",
 		"like": "Нравится",
 		"dislike": "Не нравится",
-		"clear": "Очистить чат"
+		"clear": "Очистить чат",
+		"copy_message": "Копировать сообщение",
+		"copied_message": "Сообщение скопировано"
+	},
+	"chat_interface": {
+		"new_chat": "Новый чат",
+		"message_placeholder": "Введите сообщение...",
+		"additional_inputs": "Дополнительные поля",
+		"chatbot": "Чат-бот",
+		"conversation": "Разговор"
 	}
 }

package/src/stores.ts

@@ -1,27 +1,27 @@
 import { type Writable, writable, get } from "svelte/store";
 
-export interface LoadingStatus {
-	eta: number | null;
-	status: "pending" | "error" | "complete" | "generating" | "streaming";
-	queue: boolean;
-	queue_position: number | null;
-	queue_size?: number;
-	fn_index: number;
-	message?: string | null;
-	scroll_to_output?: boolean;
-	show_progress?: "full" | "minimal" | "hidden";
-	time_limit?: number | null | undefined;
-	progress?: {
-		progress: number | null;
-		index: number | null;
-		length: number | null;
-		unit: string | null;
-		desc: string | null;
-	}[];
-	validation_error?: string | null;
-}
-
-export type LoadingStatusCollection = Record<number, LoadingStatus>;
+// export interface LoadingStatus {
+// 	eta: number | null;
+// 	status: "pending" | "error" | "complete" | "generating" | "streaming";
+// 	queue: boolean;
+// 	queue_position: number | null;
+// 	queue_size?: number;
+// 	fn_index: number;
+// 	message?: string | null;
+// 	scroll_to_output?: boolean;
+// 	show_progress?: "full" | "minimal" | "hidden";
+// 	time_limit?: number | null | undefined;
+// 	progress?: {
+// 		progress: number | null;
+// 		index: number | null;
+// 		length: number | null;
+// 		unit: string | null;
+// 		desc: string | null;
+// 	}[];
+// 	validation_error?: string | null;
+// }
+
+// export type LoadingStatusCollection = Record<number, LoadingStatus>;
 
 interface LoadingStatusStore {
 	update: (status: LoadingStatus) => void;

package/src/types.ts

@@ -1,16 +1,10 @@
-import type { ComponentType } from "svelte";
-import type { SvelteComponent } from "svelte";
+import type { Component } from "svelte";
+import type { SharedProps } from "@gradio/utils";
 
-/** The props that are always present on a component */
-interface SharedProps {
-	elem_id?: string;
-	elem_classes?: string[];
-	components?: string[];
-	server_fns?: string[];
-	interactive: boolean;
-	visible: boolean | "hidden";
-	[key: string]: unknown;
-}
+export type ServerFunctions = Record<string, (...args: any[]) => Promise<any>>;
+
+// import type { I18nFormatter } from "./i18n.js";
+// import type { component_loader } from "./init.js";
 
 /** The metadata for a component
  * The non optional fields are what are received from the backend
@@ -19,19 +13,27 @@ interface SharedProps {
 export interface ComponentMeta {
 	type: string;
 	id: number;
-	has_modes: boolean;
-	props: SharedProps;
-	instance: SvelteComponent;
-	component: ComponentType<SvelteComponent>;
+	props: SharedProps & Record<string, unknown>;
 	documentation?: Documentation;
-	children?: ComponentMeta[];
-	parent?: ComponentMeta;
 	value?: any;
 	component_class_id: string;
 	key: string | number | null;
 	rendered_in?: number;
 }
 
+export interface ProcessedComponentMeta {
+	type: string;
+	id: number;
+	props: { shared_props: SharedProps; props: Record<string, unknown> };
+	component: Component | LoadingComponent | null;
+	documentation?: Documentation;
+	children: ProcessedComponentMeta[];
+	//	parent?: ProcessedComponentMeta;
+	component_class_id: string; // ?;
+	key: string | number | null; // ?;
+	rendered_in?: number; // ?;
+}
+
 /** Dictates whether a dependency is continous and/or a generator */
 export interface DependencyTypes {
 	generator: boolean;
@@ -54,32 +56,33 @@ export interface Dependency {
 	inputs: number[];
 	outputs: number[];
 	backend_fn: boolean;
-	js: string | null;
-	scroll_to_output: boolean;
-	show_progress: "full" | "minimal" | "hidden";
-	show_progress_on: number[] | null;
-	frontend_fn: ((...args: unknown[]) => Promise<unknown[]>) | null;
-	status?: string;
-	queue: boolean | null;
-	api_name: string | null;
+	js: string | null; // frontend fn
+	scroll_to_output: boolean; // used by loading_status
+	show_progress: "full" | "minimal" | "hidden"; // used by loading_status
+	show_progress_on: number[] | null; // used by loading_status
+	// frontend_fn: ((...args: unknown[]) => Promise<unknown[]>) | null;
+	//status?: string; // I can't find this
+	queue: boolean | null; // used by client
+	api_name: string | null; // used by client
 	cancels: number[];
 	types: DependencyTypes;
 	collects_event_data: boolean;
-	pending_request?: boolean;
-	trigger_after?: number;
-	trigger_only_on_success?: boolean;
-	trigger_only_on_failure?: boolean;
-	trigger_mode: "once" | "multiple" | "always_last";
-	final_event: Payload | null;
-	api_visibility: "public" | "private" | "undocumented";
-	rendered_in: number | null;
-	render_id: number | null;
-	connection: "stream" | "sse";
-	time_limit: number;
-	stream_every: number;
-	like_user_message: boolean;
-	event_specific_args: string[];
-	js_implementation: string | null;
+	//pending_request?: boolean; // added, not received from backend, unneeded
+	trigger_after?: number; // then events
+	trigger_only_on_success?: boolean; // success events
+	trigger_only_on_failure?: boolean; // failure events
+	trigger_mode: "once" | "multiple" | "always_last"; // dispatch policy
+	// final_event: Payload | null; // added, not received from backend
+	show_api: boolean; // use by api_doc
+	rendered_in: number | null; // which component the new config should be added to
+	render_id: number | null; // dno
+	connection: "stream" | "sse"; // dno
+	time_limit: number; // time limit for streaming
+	stream_every: number; // chunk timeout for media recorder
+	like_user_message: boolean; // dno, this shouldnt be here surely
+	event_specific_args: ("time_limit" | "stream_every" | "like_user_message")[]; // `click(fn, some_arg=val)`
+	js_implementation: string | null; // pythong -> js transpilation
+	component_prop_inputs: number[]; // inputs that request all component props
 }
 
 interface TypeDescription {
@@ -108,10 +111,19 @@ export type TargetMap = Record<number, Record<string, number[]>>;
 
 /** A component that has been loaded via dynamic import */
 export type LoadedComponent = {
-	default: ComponentMeta["component"];
+	default: Component;
 };
 
 /**A component that is loading */
 export type LoadingComponent = Promise<{
-	default: ComponentMeta["component"];
+	default: Component;
 }>;
+
+export interface AppConfig {
+	root: string;
+	theme: string;
+	version: string;
+	max_file_size?: number;
+	autoscroll: boolean;
+	api_prefix: string;
+}

package/dist/src/Render.svelte

@@ -1,105 +0,0 @@
-<script>import { Gradio, reactive_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);
-    }
-  };
-});
-$: {
-  if (node) {
-    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 && node.type === "form") {
-    const allChildrenInvisible = node.children?.every(
-      (c) => c.props.visible === false || c.props.visible === "hidden"
-    );
-    if (allChildrenInvisible) {
-      const hasHiddenChild = node.children?.some(
-        (c) => c.props.visible === "hidden"
-      );
-      node.props.visible = hasHiddenChild ? "hidden" : false;
-    } else {
-      node.props.visible = true;
-    }
-  }
-}
-$: node.props.gradio = new Gradio(
-  node.id,
-  target,
-  theme_mode,
-  version,
-  root,
-  autoscroll,
-  max_file_size,
-  $reactive_formatter,
-  client,
-  load_component
-);
-</script>
-
-{#if node.component}
-	<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}
-		visible={typeof node.props.visible === "boolean" ||
-		node.props.visible === "hidden"
-			? node.props.visible
-			: true}
-	>
-		{#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>
-{/if}

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

@@ -1,31 +0,0 @@
-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;
-        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: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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

@@ -1,72 +0,0 @@
-<svelte:options immutable={true} />
-
-<script>import { translate_if_needed } from "./i18n";
-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 elem_id;
-export let elem_classes;
-export let _id;
-export let visible;
-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) {
-          if (!target) return;
-          const ev = s(_id, props2, propargs);
-          target.dispatchEvent(ev);
-        };
-      }
-      props.forEach((v) => {
-        binding_callbacks.push(() => bind(instance2, v, report(v)));
-      });
-      return instance2;
-    }
-  });
-  return ProxiedMyClass;
-}
-let _component = wrap(component);
-const supported_props = [
-  "description",
-  "info",
-  "title",
-  "placeholder",
-  "value",
-  "label"
-];
-function translate_prop(obj) {
-  for (const key in obj) {
-    if (supported_props.includes(key)) {
-      obj[key] = translate_if_needed(obj[key]);
-    }
-  }
-}
-$: translate_prop($$restProps);
-$: value = translate_if_needed(value);
-</script>
-
-{#if visible}
-	<svelte:component
-		this={_component}
-		bind:this={instance}
-		bind:value
-		on:prop_change
-		{elem_id}
-		{elem_classes}
-		{target}
-		{visible}
-		{...$$restProps}
-		{theme_mode}
-		{root}
-	>
-		<slot />
-	</svelte:component>
-{/if}

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

@@ -1,33 +0,0 @@
-import { SvelteComponent } from "svelte";
-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;
-        elem_id: string;
-        elem_classes: string[];
-        _id: number;
-        visible: boolean | "hidden";
-    };
-    events: {
-        prop_change: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-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 {};