@gradio/core 1.0.0 → 1.0.2

package/dist/src/init.svelte.js

@@ -1,6 +1,8 @@
 import { determine_interactivity, get_component, get_inputs_outputs } from "./init_utils";
 import { translate_if_needed } from "./i18n";
 import { tick } from "svelte";
+import { dequal } from "dequal";
+import {} from "@gradio/utils";
 import { allowed_shared_props } from "@gradio/utils";
 import { Client } from "@gradio/client";
 const type_map = {
@@ -21,6 +23,7 @@ export class AppTree {
     client;
     /** the root node of the processed layout tree */
     root = $state();
+    root_untracked;
     /** 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 */
@@ -29,18 +32,23 @@ export class AppTree {
     #pending_components = [];
     #get_callbacks = new Map();
     #set_callbacks = new Map();
+    #event_dispatcher;
     component_ids;
     initial_tabs = {};
     components_to_register = new Set();
     ready;
     ready_resolve;
     resolved = false;
-    constructor(components, layout, dependencies, config, app, reactive_formatter) {
+    #hidden_on_startup = new Set();
+    constructor(components, layout, dependencies, config, app, reactive_formatter, event_dispatcher) {
         this.ready = new Promise((resolve) => {
             this.ready_resolve = resolve;
         });
         this.reactive_formatter = reactive_formatter;
-        this.#config = config;
+        this.#config = {
+            ...config,
+            api_url: new URL(config.api_prefix, config.root).toString()
+        };
         this.#component_payload = components;
         this.#layout_payload = layout;
         this.#dependency_payload = dependencies;
@@ -63,11 +71,16 @@ export class AppTree {
         this.initial_tabs = {};
         gather_initial_tabs(this.root, this.initial_tabs);
         this.postprocess(this.root);
+        this.#event_dispatcher = event_dispatcher;
+        this.root_untracked = this.root;
     }
     reload(components, layout, dependencies, config) {
         this.#layout_payload = layout;
         this.#component_payload = components;
-        this.#config = config;
+        this.#config = {
+            ...config,
+            api_url: new URL(config.api_prefix, config.root).toString()
+        };
         this.#dependency_payload = dependencies;
         this.root = this.create_node({ id: layout.id, children: [] }, new Map(), true);
         for (const comp of components) {
@@ -115,12 +128,13 @@ export class AppTree {
     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)
+            (node) => handle_visibility(node, this.#config.api_url),
+            (node) => untrack_children_of_invisible_parents(node, this.components_to_register),
+            (node) => handle_empty_forms(node, this.components_to_register),
+            (node) => translate_props(node),
+            (node) => apply_initial_tabs(node, this.initial_tabs),
+            (node) => this.find_attached_events(node, this.#dependency_payload),
+            (node) => untrack_children_of_closed_accordions_or_inactive_tabs(node, this.components_to_register, this.#hidden_on_startup)
         ]);
     }
     find_attached_events(node, dependencies) {
@@ -191,7 +205,7 @@ export class AppTree {
         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 processed_props = gather_props(opts.id, component.props, [this.#input_ids, this.#output_ids], this.client, this.#config.api_url, { ...this.#config });
         const type = type_map[component.type] || component.type;
         const node = {
             id: opts.id,
@@ -201,11 +215,12 @@ export class AppTree {
             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 || "")
+                ? get_component(component.type, component.component_class_id, this.#config.api_url || "")
                 : null,
             key: component.key,
             rendered_in: component.rendered_in,
-            documentation: component.documentation
+            documentation: component.documentation,
+            original_visibility: processed_props.shared_props.visible
         };
         return node;
     }
@@ -224,6 +239,15 @@ export class AppTree {
         }
         n.children = subtree.children;
     }
+    async update_visibility(node, new_state) {
+        node.children.forEach((child) => {
+            const _set_data = this.#set_callbacks.get(child.id);
+            if (_set_data) {
+                _set_data(new_state);
+            }
+            this.update_visibility(child, new_state);
+        });
+    }
     /*
      * Updates the state of a component by its ID
      * @param id the ID of the component to update
@@ -242,20 +266,44 @@ export class AppTree {
             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)
+                //@ts-ignore
+                (n) => update_parent_visibility(n, id, new_state.visible),
+                (n) => handle_visibility(n, this.#config.api_url)
             ]);
+            await tick();
             already_updated_visibility = true;
         }
         const _set_data = this.#set_callbacks.get(id);
-        if (!_set_data)
-            return;
-        _set_data(new_state);
+        if (!_set_data) {
+            const old_value = node?.props.props.value;
+            // @ts-ignore
+            const new_props = create_props_shared_props(new_state);
+            node.props.shared_props = {
+                ...node?.props.shared_props,
+                ...new_props.shared_props
+            };
+            node.props.props = { ...node?.props.props, ...new_props.props };
+            if ("value" in new_state && !dequal(old_value, new_state.value)) {
+                this.#event_dispatcher(id, "change", null);
+            }
+        }
+        else if (_set_data) {
+            _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));
+        // Update the visibility in a way that does not
+        // re-render the root/tree. Doing that would nuke
+        // any values currently in the UI.
+        // @ts-ignore
+        await this.update_visibility(node, new_state);
+        const parent_node = find_parent(this.root, id);
+        if (parent_node)
+            // @ts-ignore
+            update_parent_visibility(parent_node, id, new_state.visible);
     }
     /**
      * Gets the current state of a component by its ID
@@ -264,15 +312,34 @@ export class AppTree {
      */
     async get_state(id) {
         const _get_data = this.#get_callbacks.get(id);
-        const component = this.#component_payload.find((c) => c.id === id);
+        const component = find_node_by_id(this.root, id);
         if (!_get_data && !component)
             return null;
         if (_get_data)
             return await _get_data();
         if (component)
-            return Promise.resolve({ value: component.props.value });
+            return Promise.resolve({ value: component.props.props.value });
         return null;
     }
+    async render_previously_invisible_children(id) {
+        this.root = this.traverse(this.root, [
+            (node) => {
+                if (node.id === id) {
+                    make_visible_if_not_rendered(node, this.#hidden_on_startup);
+                }
+                return node;
+            },
+            (node) => handle_visibility(node, this.#config.api_url)
+        ]);
+    }
+}
+function make_visible_if_not_rendered(node, hidden_on_startup) {
+    node.props.shared_props.visible = hidden_on_startup.has(node.id)
+        ? true
+        : node.props.shared_props.visible;
+    node.children.forEach((child) => {
+        make_visible_if_not_rendered(child, hidden_on_startup);
+    });
 }
 /**
  * Process the server function names and return a dictionary of functions
@@ -296,15 +363,7 @@ export function process_server_fn(id, server_fns, app) {
         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 = {}) {
+function create_props_shared_props(props) {
     const _shared_props = {};
     const _props = {};
     for (const key in props) {
@@ -316,14 +375,24 @@ function gather_props(id, props, dependencies, client, additional = {}) {
         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];
         }
     }
+    return { shared_props: _shared_props, props: _props };
+}
+/**
+ * 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, api_url, additional = {}) {
+    const { shared_props: _shared_props, props: _props } = create_props_shared_props(props);
+    _shared_props.server = process_server_fn(id, props.server_fns, client);
     for (const key in additional) {
         if (allowed_shared_props.includes(key)) {
             const _key = key;
@@ -336,22 +405,22 @@ function gather_props(id, props, dependencies, client, additional = {}) {
     _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.load_component = (name, variant) => get_component(name, "", api_url, 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) {
+function handle_visibility(node, api_url) {
     // 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),
+            component: get_component(node.type, node.component_class_id, api_url),
             children: []
         };
         if (node.children) {
-            result.children = node.children.map((child) => handle_visibility(child, root));
+            result.children = node.children.map((child) => handle_visibility(child, api_url));
         }
         return result;
     }
@@ -372,14 +441,46 @@ function _untrack(node, components_to_register) {
     }
     return;
 }
-function untrack_children_of_invisible_parents(node, root, components_to_register) {
+function untrack_children_of_invisible_parents(node, 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) {
+function mark_component_invisible_if_visible(node, hidden_on_startup) {
+    if (node.props.shared_props.visible === true) {
+        hidden_on_startup.add(node.id);
+        node.props.shared_props.visible = false;
+    }
+    node.children.forEach((child) => {
+        mark_component_invisible_if_visible(child, hidden_on_startup);
+    });
+    return node;
+}
+function untrack_children_of_closed_accordions_or_inactive_tabs(node, components_to_register, hidden_on_startup) {
+    // Check if the node is an accordion or tabs
+    if (node.type === "accordion" && node.props.props.open === false) {
+        _untrack(node, components_to_register);
+        if (node.children) {
+            node.children.forEach((child) => {
+                mark_component_invisible_if_visible(child, hidden_on_startup);
+            });
+        }
+    }
+    if (node.type === "tabs") {
+        node.children.forEach((child) => {
+            if (child.type === "tabitem" &&
+                child.props.props.id !==
+                    (node.props.props.selected || node.props.props.initial_tabs[0].id)) {
+                _untrack(child, components_to_register);
+                mark_component_invisible_if_visible(child, hidden_on_startup);
+            }
+        });
+    }
+    return node;
+}
+function handle_empty_forms(node, 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);
@@ -391,7 +492,28 @@ function handle_empty_forms(node, root, components_to_register) {
     }
     return node;
 }
-function translate_props(node, root) {
+function update_parent_visibility(node, child_made_visible, visibility_state) {
+    // This function was added to address a tricky situation:
+    // Form components are wrapped in a Form component automatically.
+    // If all the children of the Form are invisible, the Form itself is marked invisible.
+    // in AppTree.postprocess -> handle_empty_forms
+    // This is to avoid rendering empty forms in the UI. They look ugly.
+    // So what happens when a child inside the Form is made visible again?
+    // The Form needs to become visible again too.
+    // If the child is made invisible, the form should be too if all other children are invisible.
+    // However, we are not doing this now since what we want to do is fetch the latest visibility of all
+    // the children from the UI. However, get_data only returns the props, not the shared props.
+    if (node.type === "form" &&
+        node.children.length &&
+        node.children.some((child) => child.id === child_made_visible)) {
+        if (visibility_state === true)
+            node.props.shared_props.visible = true;
+        else if (!visibility_state && node.children.length === 1)
+            node.props.shared_props.visible = "hidden";
+    }
+    return node;
+}
+function translate_props(node) {
     const supported_props = [
         "description",
         "info",
@@ -413,11 +535,14 @@ function translate_props(node, root) {
     }
     return node;
 }
-function apply_initial_tabs(node, root, initial_tabs) {
+function apply_initial_tabs(node, 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;
     }
+    else if (node.type === "tabitem") {
+        node.props.props.component_id = node.id;
+    }
     return node;
 }
 function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
@@ -434,7 +559,8 @@ function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
             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
+            scale: node.props.shared_props.scale || null,
+            component_id: node.id
         });
         node.props.props.order = order;
     }
@@ -467,3 +593,17 @@ function find_node_by_id(tree, id) {
     }
     return null;
 }
+function find_parent(tree, id) {
+    if (tree.children) {
+        for (const child of tree.children) {
+            if (child.id === id) {
+                return tree;
+            }
+            const result = find_parent(child, id);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+}

package/dist/src/types.d.ts

@@ -28,6 +28,7 @@ export interface ProcessedComponentMeta {
     component_class_id: string;
     key: string | number | null;
     rendered_in?: number;
+    original_visibility: boolean | "hidden";
 }
 /** Dictates whether a dependency is continous and/or a generator */
 export interface DependencyTypes {
@@ -107,5 +108,6 @@ export interface AppConfig {
     max_file_size?: number;
     autoscroll: boolean;
     api_prefix: string;
+    api_url: string;
 }
 export {};

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.25",
-    "@gradio/audio": "^0.20.0",
+    "@gradio/accordion": "^0.5.26",
     "@gradio/atoms": "^0.19.0",
+    "@gradio/annotatedimage": "^0.10.1",
     "@gradio/box": "^0.2.26",
+    "@gradio/audio": "^0.21.0",
     "@gradio/browserstate": "^0.3.3",
-    "@gradio/button": "^0.5.14",
-    "@gradio/annotatedimage": "^0.10.1",
+    "@gradio/button": "^0.6.0",
     "@gradio/chatbot": "^0.28.0",
-    "@gradio/checkbox": "^0.5.0",
-    "@gradio/client": "^2.0.0",
+    "@gradio/checkbox": "^0.5.1",
+    "@gradio/code": "^0.16.0",
     "@gradio/checkboxgroup": "^0.8.0",
+    "@gradio/colorpicker": "^0.5.1",
     "@gradio/column": "^0.3.0",
-    "@gradio/code": "^0.16.0",
-    "@gradio/colorpicker": "^0.5.0",
-    "@gradio/dataframe": "^0.21.0",
+    "@gradio/client": "^2.0.0",
     "@gradio/dataset": "^0.5.0",
-    "@gradio/downloadbutton": "^0.4.13",
+    "@gradio/dataframe": "^0.21.1",
+    "@gradio/dropdown": "^0.10.7",
     "@gradio/datetime": "^0.3.23",
-    "@gradio/dropdown": "^0.10.6",
-    "@gradio/file": "^0.13.1",
+    "@gradio/downloadbutton": "^0.4.14",
     "@gradio/fallback": "^0.4.30",
+    "@gradio/file": "^0.13.1",
     "@gradio/fileexplorer": "^0.5.42",
+    "@gradio/form": "^0.2.27",
+    "@gradio/gallery": "^0.15.36",
     "@gradio/group": "^0.3.0",
-    "@gradio/gallery": "^0.15.35",
-    "@gradio/form": "^0.2.26",
-    "@gradio/highlightedtext": "^0.9.14",
-    "@gradio/html": "^0.8.0",
-    "@gradio/icons": "^0.15.0",
+    "@gradio/highlightedtext": "^0.9.15",
+    "@gradio/html": "^0.8.1",
     "@gradio/image": "^0.24.0",
+    "@gradio/icons": "^0.15.0",
     "@gradio/imageeditor": "^0.18.2",
-    "@gradio/imageslider": "^0.3.1",
     "@gradio/json": "^0.5.32",
-    "@gradio/model3d": "^0.15.1",
-    "@gradio/markdown": "^0.13.23",
+    "@gradio/imageslider": "^0.3.1",
     "@gradio/label": "^0.5.22",
-    "@gradio/multimodaltextbox": "^0.11.0",
-    "@gradio/nativeplot": "^0.9.0",
-    "@gradio/paramviewer": "^0.9.0",
+    "@gradio/markdown": "^0.13.23",
+    "@gradio/model3d": "^0.15.1",
+    "@gradio/multimodaltextbox": "^0.11.1",
     "@gradio/number": "^0.7.2",
     "@gradio/plot": "^0.9.25",
-    "@gradio/row": "^0.3.0",
+    "@gradio/nativeplot": "^0.9.1",
+    "@gradio/paramviewer": "^0.9.0",
     "@gradio/radio": "^0.8.0",
+    "@gradio/row": "^0.3.0",
     "@gradio/sidebar": "^0.1.24",
-    "@gradio/simpledropdown": "^0.3.30",
     "@gradio/simpleimage": "^0.9.1",
+    "@gradio/simpledropdown": "^0.3.30",
     "@gradio/simpletextbox": "^0.3.31",
-    "@gradio/slider": "^0.7.0",
+    "@gradio/slider": "^0.7.1",
     "@gradio/state": "^0.2.0",
+    "@gradio/tabitem": "^0.6.3",
     "@gradio/statustracker": "^0.12.0",
-    "@gradio/tabitem": "^0.6.2",
-    "@gradio/tabs": "^0.5.2",
-    "@gradio/textbox": "^0.12.0",
+    "@gradio/textbox": "^0.12.1",
+    "@gradio/tabs": "^0.5.3",
     "@gradio/theme": "^0.5.0",
     "@gradio/timer": "^0.4.6",
-    "@gradio/uploadbutton": "^0.9.13",
-    "@gradio/upload": "^0.17.2",
+    "@gradio/uploadbutton": "^0.9.14",
+    "@gradio/utils": "^0.10.4",
     "@gradio/vibeeditor": "^0.3.1",
-    "@gradio/utils": "^0.10.3",
-    "@gradio/video": "^0.17.0"
+    "@gradio/video": "^0.18.0",
+    "@gradio/upload": "^0.17.2"
   },
   "msw": {
     "workerDirectory": "public"