@gradio/core 1.0.0-dev.0 → 1.0.0-dev.3

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

@@ -0,0 +1,78 @@
+import type { ComponentMeta, ProcessedComponentMeta, LayoutNode, Dependency, AppConfig, ServerFunctions } from "./types";
+import type { SharedProps } from "@gradio/utils";
+import { Client } from "@gradio/client";
+type client_return = Awaited<ReturnType<typeof Client.connect>>;
+type set_data_type = (data: Record<string, unknown>) => void;
+type get_data_type = () => Promise<Record<string, unknown>>;
+type visitor<T> = (node: T) => ProcessedComponentMeta;
+type Tab = {
+    label: string;
+    id: string;
+    visible: boolean;
+    interactive: boolean;
+    elem_id: string | undefined;
+    scale: number | null;
+    order?: number;
+};
+export declare class AppTree {
+    #private;
+    /** Need this to set i18n in re-render */
+    reactive_formatter: (str: string) => string;
+    client: client_return;
+    /** the root node of the processed layout tree */
+    root: ProcessedComponentMeta | undefined;
+    component_ids: number[];
+    initial_tabs: Record<number, Tab[]>;
+    components_to_register: Set<number>;
+    ready: Promise<void>;
+    ready_resolve: () => void;
+    resolved: boolean;
+    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: AppConfig, app: client_return, reactive_formatter: (str: string) => string);
+    reload(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: AppConfig): void;
+    /**
+     * Registers a component with its ID and data callbacks
+     * @param id the ID of the component
+     * @param _set_data the set data callback
+     * @param _get_data the get data callback
+     */
+    register_component(id: number, _set_data: set_data_type, _get_data: get_data_type): void;
+    /**
+     * Preprocess the payloads to get the correct state read to build the tree
+     */
+    prepare(): void;
+    /** Processes the layout payload into a tree of components */
+    process(): void;
+    postprocess(tree: ProcessedComponentMeta): void;
+    find_attached_events(node: ProcessedComponentMeta, dependencies: Dependency[]): ProcessedComponentMeta;
+    /**
+     * Traverses the layout tree and applies a callback to each node
+     * @param node the current layout node
+     * @param visit the callback to apply to each node
+     * @returns the return value of the callback, with a `children` property added for any child nodes
+     */
+    traverse<T extends LayoutNode | ProcessedComponentMeta>(node: T, visit: visitor<T> | visitor<T>[]): ProcessedComponentMeta;
+    /**
+     * Creates a processed component node from a layout node
+     * @param opts the layout node options
+     * @param root whether this is the root node
+     * @returns the processed component node
+     */
+    create_node(opts: LayoutNode, component_map: Map<number, ComponentMeta>, root?: boolean, reactive_formatter?: (str: string) => string): ProcessedComponentMeta;
+    rerender(components: ComponentMeta[], layout: LayoutNode): void;
+    update_state(id: number, new_state: Partial<SharedProps> & Record<string, unknown>, check_visibility?: boolean): Promise<void>;
+    /**
+     * Gets the current state of a component by its ID
+     * @param id the ID of the component to get the state of
+     * @returns the current state of the component, or null if not found
+     */
+    get_state(id: number): Promise<Record<string, unknown> | null>;
+}
+/**
+ * Process the server function names and return a dictionary of functions
+ * @param id the component id
+ * @param server_fns the server function names
+ * @param app the client instance
+ * @returns the actual server functions
+ */
+export declare function process_server_fn(id: number, server_fns: string[] | undefined, app: client_return): ServerFunctions;
+export {};

package/dist/src/init.svelte.js

@@ -0,0 +1,469 @@
+import { determine_interactivity, get_component, get_inputs_outputs } from "./init_utils";
+import { translate_if_needed } from "./i18n";
+import { tick } from "svelte";
+import { allowed_shared_props } from "@gradio/utils";
+import { Client } from "@gradio/client";
+const type_map = {
+    walkthrough: "tabs",
+    walkthroughstep: "tabitem"
+};
+export class AppTree {
+    /** the raw component structure received from the backend */
+    #component_payload;
+    /** the raw layout node structure received from the backend */
+    #layout_payload;
+    /** the raw dependency structure received from the backend */
+    #dependency_payload;
+    /** Need this to set i18n in re-render */
+    reactive_formatter = (str) => str;
+    /** the config for the app */
+    #config;
+    client;
+    /** the root node of the processed layout tree */
+    root = $state();
+    /** a set of all component IDs that are inputs to dependencies */
+    #input_ids = new Set();
+    /** a set of all component IDs that are outputs of dependencies */
+    #output_ids = new Set();
+    /** A list of components that are currently loading */
+    #pending_components = [];
+    #get_callbacks = new Map();
+    #set_callbacks = new Map();
+    component_ids;
+    initial_tabs = {};
+    components_to_register = new Set();
+    ready;
+    ready_resolve;
+    resolved = false;
+    constructor(components, layout, dependencies, config, app, reactive_formatter) {
+        this.ready = new Promise((resolve) => {
+            this.ready_resolve = resolve;
+        });
+        this.reactive_formatter = reactive_formatter;
+        this.#config = config;
+        this.#component_payload = components;
+        this.#layout_payload = layout;
+        this.#dependency_payload = dependencies;
+        this.root = this.create_node({ id: layout.id, children: [] }, new Map(), true);
+        for (const comp of components) {
+            if (comp.props.visible != false)
+                this.components_to_register.add(comp.id);
+        }
+        this.client = app;
+        this.prepare();
+        const component_map = components.reduce((map, comp) => {
+            map.set(comp.id, comp);
+            return map;
+        }, new Map());
+        this.root.children = this.#layout_payload.children.map((node) => this.traverse(node, (node) => {
+            const new_node = this.create_node(node, component_map, false, this.reactive_formatter);
+            return new_node;
+        }));
+        this.component_ids = components.map((c) => c.id);
+        this.initial_tabs = {};
+        gather_initial_tabs(this.root, this.initial_tabs);
+        this.postprocess(this.root);
+    }
+    reload(components, layout, dependencies, config) {
+        this.#layout_payload = layout;
+        this.#component_payload = components;
+        this.#config = config;
+        this.#dependency_payload = dependencies;
+        this.root = this.create_node({ id: layout.id, children: [] }, new Map(), true);
+        for (const comp of components) {
+            if (comp.props.visible != false)
+                this.components_to_register.add(comp.id);
+        }
+        this.prepare();
+        const component_map = components.reduce((map, comp) => {
+            map.set(comp.id, comp);
+            return map;
+        }, new Map());
+        this.root.children = this.#layout_payload.children.map((node) => this.traverse(node, (node) => {
+            const new_node = this.create_node(node, component_map, false, this.reactive_formatter);
+            return new_node;
+        }));
+        this.component_ids = components.map((c) => c.id);
+        this.initial_tabs = {};
+        gather_initial_tabs(this.root, this.initial_tabs);
+        this.postprocess(this.root);
+    }
+    /**
+     * Registers a component with its ID and data callbacks
+     * @param id the ID of the component
+     * @param _set_data the set data callback
+     * @param _get_data the get data callback
+     */
+    register_component(id, _set_data, _get_data) {
+        this.#set_callbacks.set(id, _set_data);
+        this.#get_callbacks.set(id, _get_data);
+        this.components_to_register.delete(id);
+        if (this.components_to_register.size === 0 && !this.resolved) {
+            this.resolved = true;
+            this.ready_resolve();
+        }
+    }
+    /**
+     * Preprocess the payloads to get the correct state read to build the tree
+     */
+    prepare() {
+        const [inputs, outputs] = get_inputs_outputs(this.#dependency_payload);
+        this.#input_ids = inputs;
+        this.#output_ids = outputs;
+    }
+    /** Processes the layout payload into a tree of components */
+    process() { }
+    postprocess(tree) {
+        this.root = this.traverse(tree, [
+            (node) => handle_visibility(node, this.#config.root),
+            (node) => untrack_children_of_invisible_parents(node, this.#config.root, this.components_to_register),
+            (node) => handle_empty_forms(node, this.#config.root, this.components_to_register),
+            (node) => translate_props(node, this.#config.root),
+            (node) => apply_initial_tabs(node, this.#config.root, this.initial_tabs),
+            (node) => this.find_attached_events(node, this.#dependency_payload)
+        ]);
+    }
+    find_attached_events(node, dependencies) {
+        const attached_events = dependencies
+            .filter((dep) => dep.targets.find(([id]) => id === node.id))
+            .map((dep) => {
+            const target = dep.targets.find(([id]) => id === node.id);
+            return target ? target[1] : null;
+        })
+            .filter(Boolean);
+        node.props.shared_props.attached_events = attached_events;
+        return node;
+    }
+    /**
+     * Traverses the layout tree and applies a callback to each node
+     * @param node the current layout node
+     * @param visit the callback to apply to each node
+     * @returns the return value of the callback, with a `children` property added for any child nodes
+     */
+    traverse(node, visit) {
+        function single_visit(node, visit, traverse_fn) {
+            const result = visit(node);
+            if ("children" in node && node.children.length > 0) {
+                result.children =
+                    node.children?.map((child) => traverse_fn(child, visit)) || [];
+            }
+            return result;
+        }
+        if (Array.isArray(visit)) {
+            let result = node;
+            for (const v of visit) {
+                result = single_visit(result, v, this.traverse.bind(this));
+            }
+            return result;
+        }
+        else {
+            return single_visit(node, visit, this.traverse.bind(this));
+        }
+    }
+    /**
+     * Creates a processed component node from a layout node
+     * @param opts the layout node options
+     * @param root whether this is the root node
+     * @returns the processed component node
+     */
+    create_node(opts, component_map, root = false, reactive_formatter) {
+        let component;
+        if (!root) {
+            component = component_map.get(opts.id);
+        }
+        else {
+            component = {
+                type: "column",
+                id: opts.id,
+                // @ts-ignore
+                props: {
+                    visible: true,
+                    root: "",
+                    theme_mode: "light"
+                },
+                component_class_id: "column",
+                key: null
+            };
+        }
+        if (!component) {
+            throw new Error(`Component with ID ${opts.id} not found`);
+        }
+        if (reactive_formatter) {
+            component.props.i18n = reactive_formatter;
+        }
+        const processed_props = gather_props(opts.id, component.props, [this.#input_ids, this.#output_ids], this.client, { ...this.#config });
+        const type = type_map[component.type] || component.type;
+        const node = {
+            id: opts.id,
+            type: type,
+            props: processed_props,
+            children: [],
+            show_progress_on: null,
+            component_class_id: component.component_class_id || component.type,
+            component: processed_props.shared_props.visible !== false
+                ? get_component(component.type, component.component_class_id, this.#config.root || "")
+                : null,
+            key: component.key,
+            rendered_in: component.rendered_in,
+            documentation: component.documentation
+        };
+        return node;
+    }
+    rerender(components, layout) {
+        const component_map = components.reduce((map, comp) => {
+            map.set(comp.id, comp);
+            return map;
+        }, new Map());
+        const subtree = this.traverse(layout, (node) => {
+            const new_node = this.create_node(node, component_map, false, this.reactive_formatter);
+            return new_node;
+        });
+        const n = find_node_by_id(this.root, subtree.id);
+        if (!n) {
+            throw new Error("Rerender failed: root node not found in current tree");
+        }
+        n.children = subtree.children;
+    }
+    /*
+     * Updates the state of a component by its ID
+     * @param id the ID of the component to update
+     * @param new_state the new state to set
+     * */
+    async update_state(id, new_state, check_visibility = true) {
+        // Visibility is tricky 😅
+        // If the component is not visible, it has not been rendered
+        // and so it has no _set_data callback
+        // Therefore, we need to traverse the tree and set the visible prop to true
+        // and then render it and its children. After that, we can call the _set_data callback
+        const node = find_node_by_id(this.root, id);
+        let already_updated_visibility = false;
+        if (check_visibility && !node?.component) {
+            await tick();
+            this.root = this.traverse(this.root, [
+                //@ts-ignore
+                (n) => set_visibility_for_updated_node(n, id, new_state.visible),
+                (n) => handle_visibility(n, this.#config.root)
+            ]);
+            already_updated_visibility = true;
+        }
+        const _set_data = this.#set_callbacks.get(id);
+        if (!_set_data)
+            return;
+        _set_data(new_state);
+        if (!check_visibility || already_updated_visibility)
+            return;
+        // need to let the UI settle before traversing again
+        // otherwise there could be
+        await tick();
+        this.root = this.traverse(this.root, (n) => handle_visibility(n, this.#config.root));
+    }
+    /**
+     * Gets the current state of a component by its ID
+     * @param id the ID of the component to get the state of
+     * @returns the current state of the component, or null if not found
+     */
+    async get_state(id) {
+        const _get_data = this.#get_callbacks.get(id);
+        const component = this.#component_payload.find((c) => c.id === id);
+        if (!_get_data && !component)
+            return null;
+        if (_get_data)
+            return await _get_data();
+        if (component)
+            return Promise.resolve({ value: component.props.value });
+        return null;
+    }
+}
+/**
+ * Process the server function names and return a dictionary of functions
+ * @param id the component id
+ * @param server_fns the server function names
+ * @param app the client instance
+ * @returns the actual server functions
+ */
+export function process_server_fn(id, server_fns, app) {
+    if (!server_fns) {
+        return {};
+    }
+    return server_fns.reduce((acc, fn) => {
+        acc[fn] = async (...args) => {
+            if (args.length === 1) {
+                args = args[0];
+            }
+            const result = await app.component_server(id, fn, args);
+            return result;
+        };
+        return acc;
+    }, {});
+}
+/**
+ * Gathers the props for a component
+ * @param id the ID of the component
+ * @param props the props of the component
+ * @param dependencies the component's dependencies
+ * @param additional any additional props to include
+ * @returns the gathered props as an object with `shared_props` and `props` keys
+ */
+function gather_props(id, props, dependencies, client, additional = {}) {
+    const _shared_props = {};
+    const _props = {};
+    for (const key in props) {
+        // For Tabs (or any component that already has an id prop)
+        // Set the id to the props so that it doesn't get overwritten
+        if (key === "id" || key === "autoscroll") {
+            _props[key] = props[key];
+        }
+        else if (allowed_shared_props.includes(key)) {
+            const _key = key;
+            _shared_props[_key] = props[key];
+            if (_key === "server_fns") {
+                _shared_props.server = process_server_fn(id, props.server_fns, client);
+            }
+        }
+        else {
+            _props[key] = props[key];
+        }
+    }
+    for (const key in additional) {
+        if (allowed_shared_props.includes(key)) {
+            const _key = key;
+            _shared_props[_key] = additional[key];
+        }
+        else {
+            _props[key] = additional[key];
+        }
+    }
+    _shared_props.client = client;
+    _shared_props.id = id;
+    _shared_props.interactive = determine_interactivity(id, _shared_props.interactive, _props.value, dependencies);
+    _shared_props.load_component = (name, variant) => get_component(name, "", _shared_props.root || "", variant);
+    _shared_props.visible =
+        _shared_props.visible === undefined ? true : _shared_props.visible;
+    _shared_props.loading_status = {};
+    return { shared_props: _shared_props, props: _props };
+}
+function handle_visibility(node, root) {
+    // Check if the node is visible
+    if (node.props.shared_props.visible && !node.component) {
+        const result = {
+            ...node,
+            component: get_component(node.type, node.component_class_id, root),
+            children: []
+        };
+        if (node.children) {
+            result.children = node.children.map((child) => handle_visibility(child, root));
+        }
+        return result;
+    }
+    else {
+        return node;
+    }
+}
+function set_visibility_for_updated_node(node, id, visible) {
+    if (node.id == id) {
+        node.props.shared_props.visible = visible;
+    }
+    return node;
+}
+function _untrack(node, components_to_register) {
+    components_to_register.delete(node.id);
+    if (node.children) {
+        node.children.forEach((child) => _untrack(child, components_to_register));
+    }
+    return;
+}
+function untrack_children_of_invisible_parents(node, root, components_to_register) {
+    // Check if the node is visible
+    if (node.props.shared_props.visible !== true) {
+        _untrack(node, components_to_register);
+    }
+    return node;
+}
+function handle_empty_forms(node, root, components_to_register) {
+    // Check if the node is visible
+    if (node.type === "form") {
+        const all_children_invisible = node.children.every((child) => child.props.shared_props.visible === false);
+        if (all_children_invisible) {
+            node.props.shared_props.visible = false;
+            components_to_register.delete(node.id);
+            return node;
+        }
+    }
+    return node;
+}
+function translate_props(node, root) {
+    const supported_props = [
+        "description",
+        "info",
+        "title",
+        "placeholder",
+        "value",
+        "label"
+    ];
+    for (const attr of Object.keys(node.props.shared_props)) {
+        if (supported_props.includes(attr)) {
+            // @ts-ignore
+            node.props.shared_props[attr] = translate_if_needed(node.props.shared_props[attr]);
+        }
+    }
+    for (const attr of Object.keys(node.props.props)) {
+        if (supported_props.includes(attr)) {
+            node.props.props[attr] = translate_if_needed(node.props.props[attr]);
+        }
+    }
+    return node;
+}
+function apply_initial_tabs(node, root, initial_tabs) {
+    if (node.type === "tabs" && node.id in initial_tabs) {
+        const tabs = initial_tabs[node.id].sort((a, b) => a.order - b.order);
+        node.props.props.initial_tabs = tabs;
+    }
+    return node;
+}
+function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
+    if (parent_tab_id !== null && node.type === "tabitem") {
+        if (!(parent_tab_id in initial_tabs)) {
+            initial_tabs[parent_tab_id] = [];
+        }
+        if (!("id" in node.props.props)) {
+            node.props.props.id = node.id;
+        }
+        initial_tabs[parent_tab_id].push({
+            label: node.props.shared_props.label,
+            id: node.props.props.id,
+            elem_id: node.props.shared_props.elem_id,
+            visible: node.props.shared_props.visible,
+            interactive: node.props.shared_props.interactive,
+            scale: node.props.shared_props.scale || null
+        });
+        node.props.props.order = order;
+    }
+    if (node.children) {
+        node.children.forEach((child, i) => {
+            _gather_initial_tabs(child, initial_tabs, node.type === "tabs" ? node.id : null, node.type === "tabs" ? i : null);
+        });
+    }
+    return;
+}
+function gather_initial_tabs(node, initial_tabs) {
+    function single_visit(node) {
+        if ("children" in node && node.children.length > 0) {
+            node.children?.forEach((child) => _gather_initial_tabs(child, initial_tabs, node.type === "tabs" ? node.id : null, null));
+        }
+    }
+    return single_visit(node);
+}
+function find_node_by_id(tree, id) {
+    if (tree.id === id) {
+        return tree;
+    }
+    if (tree.children) {
+        for (const child of tree.children) {
+            const result = find_node_by_id(child, id);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+}

package/dist/src/init_utils.d.ts

@@ -0,0 +1,32 @@
+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 declare function get_component(type: string, class_id: string, root: string, variant?: "component" | "example" | "base"): LoadingComponent;
+/**
+ * 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 declare function get_inputs_outputs(dependencies: Dependency[]): [Set<number>, Set<number>];
+/**
+ * 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 declare function determine_interactivity(id: number, interactive_prop: boolean | undefined, value: any, dependencies: [Set<number>, Set<number>]): boolean;
+/** An async version of 'new Function' */
+export declare const AsyncFunction: new (...args: string[]) => (...args: any[]) => Promise<any>;

package/dist/src/init_utils.js

@@ -0,0 +1,73 @@
+import { load_component } from "virtual:component-loader";
+/**
+ * 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, class_id, root, variant = "component") {
+    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) {
+    const inputs = new Set();
+    const outputs = new Set();
+    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, interactive_prop, value, dependencies) {
+    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) {
+    return ((Array.isArray(value) && value.length === 0) ||
+        value === "" ||
+        value === 0 ||
+        !value);
+}
+/** An async version of 'new Function' */
+export const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;

package/dist/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/dist/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);