@gradio/core 1.0.0-dev.0 → 1.0.0

package/dist/src/dependency.js

@@ -0,0 +1,668 @@
+import { AsyncFunction } from "./init_utils";
+import { Client } from "@gradio/client";
+import { LoadingStatus } from "@gradio/statustracker";
+const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
+const NOVALUE = Symbol("NOVALUE");
+/**
+ * A dependency as used by the frontend
+ * This class represents a discrete dependency that can be triggered by an event
+ * It is responsible calling the appropriate functions and reporting back results
+ */
+export class Dependency {
+    id;
+    inputs;
+    outputs;
+    cancels;
+    pending = false;
+    trigger_modes;
+    event_args = {};
+    targets = [];
+    connection_type;
+    // if this dependency has any then, success or failure triggers
+    triggers = [];
+    // the id of the original event_id that caused this dependency to run
+    // in the case of chained events, it would be the id of the initial trigger
+    original_trigger_id = null;
+    show_progress_on = null;
+    component_prop_inputs = [];
+    show_progress;
+    functions;
+    constructor(dep_config) {
+        this.id = dep_config.id;
+        this.original_trigger_id = dep_config.id;
+        this.inputs = dep_config.inputs;
+        this.outputs = dep_config.outputs;
+        this.connection_type = dep_config.connection;
+        this.show_progress = dep_config.show_progress;
+        this.functions = {
+            frontend: dep_config.js
+                ? process_frontend_fn(dep_config.js, dep_config.backend_fn, dep_config.inputs.length, dep_config.outputs.length)
+                : undefined,
+            backend: dep_config.backend_fn,
+            backend_js: dep_config.js_implementation
+                ? new AsyncFunction(`let result = await (${dep_config.js_implementation})(...arguments);
+						return (!Array.isArray(result)) ? [result] : result;`)
+                : undefined
+        };
+        this.targets = dep_config.targets;
+        this.cancels = dep_config.cancels;
+        this.trigger_modes = dep_config.trigger_mode;
+        this.show_progress_on = dep_config.show_progress_on || null;
+        this.component_prop_inputs = dep_config.component_prop_inputs || [];
+        for (let i = 0; i < dep_config.event_specific_args?.length || 0; i++) {
+            const key = dep_config.event_specific_args[i];
+            this.event_args[key] = dep_config[key] ?? null;
+        }
+    }
+    async run(client, data_payload, event_data, target_id) {
+        let _data_payload = data_payload;
+        // if the function is backend_js, then it's the entire event
+        // no need to chain frontend and backend
+        if (this.functions.backend_js) {
+            const data = await this.functions.backend_js(..._data_payload);
+            return { type: "data", data };
+        }
+        // If it has a js implementation, the correct behavior
+        // is to run that and pass the output to the backend
+        if (this.functions.frontend) {
+            _data_payload = await this.functions.frontend(data_payload);
+        }
+        if (this.functions.backend) {
+            return {
+                type: "submit",
+                data: client.submit(this.id, _data_payload, event_data, target_id)
+            };
+        }
+        else if (this.functions.frontend) {
+            return { type: "data", data: _data_payload };
+        }
+        return { type: "void", data: null };
+    }
+    add_trigger(dep_id, condition) {
+        this.triggers.push([dep_id, condition]);
+    }
+    get_triggers() {
+        return {
+            success: this.triggers
+                .filter(([, condition]) => condition === "success")
+                .map(([id]) => id),
+            failure: this.triggers
+                .filter(([, condition]) => condition === "failure")
+                .map(([id]) => id),
+            all: this.triggers
+                .filter(([, condition]) => condition === "all")
+                .map(([id]) => id)
+        };
+    }
+}
+/**
+ * Manages all dependencies for an app acting as a bridge between app state and Dependencies
+ * Responsible for registering dependencies and dispatching events to them
+ * It is also responsible for orchestrating dependencies based on the follwing:
+ * - Cancelling dependencies
+ * - Ensuring individual dependencies respect `trigger_mode`
+ * - Managing then, success and failure events
+ * - Ensuring that dependencies bound to the same id are treated a single unit
+ * - updating loading states
+ * - updating component states
+ */
+export class DependencyManager {
+    dependencies_by_fn = new Map();
+    dependencies_by_event = new Map();
+    render_id_deps = new Map();
+    submissions = new Map();
+    client;
+    queue = new Set();
+    add_to_api_calls;
+    update_state_cb;
+    get_state_cb;
+    rerender_cb;
+    log_cb;
+    loading_stati = new LoadingStatus();
+    constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls) {
+        this.add_to_api_calls = add_to_api_calls;
+        this.log_cb = log_cb;
+        this.update_state_cb = update_state_cb;
+        this.get_state_cb = get_state_cb;
+        this.rerender_cb = rerender_cb;
+        this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb, client);
+    }
+    reload(dependencies, update_state, get_state, rerender, client) {
+        const { by_id, by_event } = this.create(dependencies);
+        this.dependencies_by_event = by_event;
+        this.dependencies_by_fn = by_id;
+        this.client = client;
+        this.update_state_cb = update_state;
+        this.get_state_cb = get_state;
+        this.rerender_cb = rerender;
+        for (const [dep_id, dep] of this.dependencies_by_fn) {
+            for (const [output_id] of dep.targets) {
+                this.set_event_args(output_id, dep.event_args);
+            }
+        }
+        this.register_loading_stati(by_id);
+    }
+    register_loading_stati(deps) {
+        for (const [_, dep] of deps) {
+            this.loading_stati.register(dep.id, dep.show_progress_on || dep.outputs, dep.inputs, dep.show_progress);
+        }
+    }
+    clear_loading_status(component_id) {
+        this.loading_stati.clear(component_id);
+    }
+    async update_loading_stati_state() {
+        for (const [component_id, loading_status] of Object.entries(this.loading_stati.current)) {
+            this.update_state_cb(Number(component_id), {
+                loading_status: loading_status
+            }, false);
+        }
+    }
+    dispatch_state_change_events(result) {
+        if (result.changed_state_ids) {
+            for (const changed_id of result.changed_state_ids) {
+                const change_dep = this.dependencies_by_event.get("change-" + changed_id);
+                change_dep?.forEach((dep) => {
+                    this.dispatch({
+                        type: "fn",
+                        fn_index: dep.id,
+                        target_id: changed_id,
+                        event_data: null
+                    });
+                });
+            }
+        }
+    }
+    /** Dispatches an event to the appropriate dependency
+     * @param event_name the name of the event
+     * @param target_id the id of the component that triggered the event
+     * @param event_data any additional data to pass to the dependency
+     * @returns a value if there is no backend fn, a 'submission' if there is a backend fn, or null if there is no dependency
+     */
+    async dispatch(event_meta) {
+        let deps;
+        if (event_meta.type === "fn") {
+            const dep = this.dependencies_by_fn.get(event_meta.fn_index);
+            if (dep)
+                deps = [dep];
+        }
+        else {
+            deps = this.dependencies_by_event.get(`${event_meta.event_name}-${event_meta.target_id}`);
+        }
+        for (let i = 0; i < (deps?.length || 0); i++) {
+            const dep = deps ? deps[i] : undefined;
+            if (dep) {
+                this.cancel(dep.cancels);
+                const dispatch_status = should_dispatch(dep.trigger_modes, this.submissions.has(dep.id));
+                if (dispatch_status === "skip") {
+                    continue;
+                }
+                else if (dispatch_status === "defer") {
+                    this.queue.add(dep.id);
+                    continue;
+                }
+                // No loading status for js-only deps
+                if (dep.functions.backend) {
+                    this.loading_stati.update({
+                        status: "pending",
+                        fn_index: dep.id,
+                        stream_state: null
+                    });
+                    this.update_loading_stati_state();
+                }
+                const data_payload = await this.gather_state(dep.inputs, dep.component_prop_inputs);
+                const unset_args = await Promise.all(dep.targets.map(([output_id]) => this.set_event_args(output_id, dep.event_args)));
+                const { success, failure, all } = dep.get_triggers();
+                try {
+                    let target_id = null;
+                    if (event_meta.target_id !== undefined ||
+                        event_meta.type === "event") {
+                        target_id = event_meta.target_id || null;
+                    }
+                    else {
+                        target_id = dep.original_trigger_id;
+                    }
+                    if (dep.connection_type === "stream" &&
+                        this.submissions.has(dep.id)) {
+                        const submission = this.submissions.get(dep.id);
+                        let payload = {
+                            fn_index: dep.id,
+                            data: data_payload,
+                            event_data: event_meta.event_data
+                        };
+                        submission.send_chunk(payload);
+                        unset_args.forEach((fn) => fn());
+                        continue;
+                    }
+                    this.add_to_api_calls({
+                        fn_index: dep.id,
+                        data: data_payload,
+                        event_data: event_meta.event_data,
+                        trigger_id: target_id
+                    });
+                    const dep_submission = await dep.run(this.client, data_payload, event_meta.event_data, target_id);
+                    if (dep_submission.type === "void") {
+                        unset_args.forEach((fn) => fn());
+                    }
+                    else if (dep_submission.type === "data") {
+                        await this.handle_data(dep.outputs, dep_submission.data);
+                        unset_args.forEach((fn) => fn());
+                    }
+                    else {
+                        let stream_state = null;
+                        if (dep.connection_type === "stream" &&
+                            !this.submissions.has(dep.id)) {
+                            stream_state = "waiting";
+                        }
+                        this.submissions.set(dep.id, dep_submission.data);
+                        let index = 0;
+                        // fn for this?
+                        submit_loop: for await (const result of dep_submission.data) {
+                            if (index === 0) {
+                                // Clear out previously set validation errors
+                                dep.inputs.forEach((input_id) => {
+                                    this.update_state_cb(input_id, {
+                                        loading_status: {
+                                            validation_error: null
+                                        }
+                                    }, false);
+                                });
+                            }
+                            index += 1;
+                            if (result === null)
+                                continue;
+                            if (result.type === "data") {
+                                await this.handle_data(dep.outputs, result.data);
+                            }
+                            if (result.type === "status") {
+                                if (result.original_msg === "process_starts" &&
+                                    dep.connection_type === "stream") {
+                                    stream_state = "open";
+                                }
+                                const { fn_index, ...status } = result;
+                                // handle status updates here
+                                if (result.stage === "complete") {
+                                    stream_state = "closed";
+                                    success.forEach((dep_id) => {
+                                        this.dispatch({
+                                            type: "fn",
+                                            fn_index: dep_id,
+                                            event_data: null,
+                                            target_id: target_id
+                                        });
+                                    });
+                                    this.dispatch_state_change_events(result);
+                                    // @ts-ignore
+                                    this.loading_stati.update({
+                                        ...status,
+                                        status: status.stage,
+                                        fn_index: dep.id,
+                                        stream_state
+                                    });
+                                    this.update_loading_stati_state();
+                                    break submit_loop;
+                                }
+                                else if (result.stage === "generating") {
+                                    this.dispatch_state_change_events(result);
+                                    // @ts-ignore
+                                    this.loading_stati.update({
+                                        ...status,
+                                        status: status.stage,
+                                        fn_index: dep.id,
+                                        stream_state
+                                    });
+                                    this.update_loading_stati_state();
+                                }
+                                else if (result.stage === "error") {
+                                    if (Array.isArray(result?.message)) {
+                                        result.message.forEach((m, i) => {
+                                            this.update_state_cb(dep.inputs[i], {
+                                                loading_status: {
+                                                    validation_error: !m.is_valid ? m.message : null,
+                                                    show_validation_error: true
+                                                }
+                                            }, false);
+                                        });
+                                        // Manually set the output statuses to null
+                                        // Doing this in update_loading_stati_state would
+                                        // validation errors set above
+                                        // For example, if the input component is an output component (chatinterface)
+                                        dep.outputs.forEach((output_id) => {
+                                            if (dep.inputs.includes(output_id))
+                                                return;
+                                            this.update_state_cb(output_id, {
+                                                loading_status: {
+                                                    status: null
+                                                }
+                                            }, false);
+                                        });
+                                        unset_args.forEach((fn) => fn());
+                                        this.submissions.delete(dep.id);
+                                        if (this.queue.has(dep.id)) {
+                                            this.queue.delete(dep.id);
+                                            this.dispatch(event_meta);
+                                        }
+                                        return;
+                                    }
+                                    const _message = result?.message?.replace(MESSAGE_QUOTE_RE, (_, b) => b);
+                                    this.log_cb(result._title ?? "Error", _message, fn_index, "error", status.duration, status.visible);
+                                    throw new Error("Dependency function failed");
+                                }
+                                else {
+                                    // @ts-ignore
+                                    this.loading_stati.update({
+                                        ...status,
+                                        status: status.stage,
+                                        fn_index: dep.id,
+                                        stream_state
+                                    });
+                                    this.update_loading_stati_state();
+                                }
+                            }
+                            if (result.type === "render") {
+                                this.loading_stati.update({
+                                    status: "complete",
+                                    fn_index: dep.id,
+                                    stream_state: null
+                                });
+                                this.update_loading_stati_state();
+                                const { layout, components, render_id, dependencies } = result.data;
+                                this.rerender_cb(components, layout);
+                                // update dependencies
+                                const { by_id, by_event } = this.create(dependencies);
+                                this.register_loading_stati(by_id);
+                                by_id.forEach((dep) => this.dependencies_by_fn.set(dep.id, dep));
+                                by_event.forEach((dep, key) => this.dependencies_by_event.set(key, dep));
+                                const current_deps = this.render_id_deps.get(render_id);
+                                if (current_deps) {
+                                    current_deps.forEach((old_dep_id) => {
+                                        if (!by_id.has(old_dep_id)) {
+                                            this.dependencies_by_fn.delete(old_dep_id);
+                                        }
+                                    });
+                                }
+                                this.render_id_deps.set(render_id, new Set(Array.from(by_id.keys())));
+                                this.register_loading_stati(by_id);
+                                break submit_loop;
+                            }
+                            if (result.type === "log") {
+                                this.handle_log(result);
+                            }
+                        }
+                        all.forEach((dep_id) => {
+                            this.dispatch({
+                                type: "fn",
+                                fn_index: dep_id,
+                                event_data: null,
+                                target_id: target_id
+                            });
+                        });
+                        unset_args.forEach((fn) => fn());
+                        this.submissions.delete(dep.id);
+                        if (this.queue.has(dep.id)) {
+                            this.queue.delete(dep.id);
+                            this.dispatch(event_meta);
+                        }
+                    }
+                }
+                catch (error) {
+                    this.loading_stati.update({
+                        status: "error",
+                        fn_index: dep.id,
+                        eta: 0,
+                        queue: false,
+                        stream_state: null
+                    });
+                    this.update_loading_stati_state();
+                    this.submissions.delete(dep.id);
+                    failure.forEach((dep_id) => {
+                        this.dispatch({
+                            type: "fn",
+                            fn_index: dep_id,
+                            event_data: null
+                        });
+                    });
+                }
+            }
+        }
+        return;
+    }
+    /**
+     *  Creates a map of dependencies for easy lookup
+     *
+     * @param dependencies the list of dependencies from the backend
+     * @returns a map of dependencies keyed by `${event_name}-${target_id}`
+     * */
+    create(dependencies) {
+        const _deps_by_id = new Map();
+        const _deps_by_event = new Map();
+        const then_triggers = [];
+        for (const dep_config of dependencies) {
+            const dependency = new Dependency(dep_config);
+            for (const [target_id, event_name] of dep_config.targets) {
+                // if the key is already present, add it to the list. Otherwise, create a new element with the list
+                if (!_deps_by_event.has(`${event_name}-${target_id}`)) {
+                    _deps_by_event.set(`${event_name}-${target_id}`, []);
+                }
+                _deps_by_event.get(`${event_name}-${target_id}`)?.push(dependency);
+            }
+            _deps_by_id.set(dep_config.id, dependency);
+            if (dep_config.trigger_after !== undefined) {
+                const then_mode = dep_config.trigger_only_on_failure
+                    ? "failure"
+                    : dep_config.trigger_only_on_success
+                        ? "success"
+                        : "all";
+                then_triggers.push([
+                    dep_config.id,
+                    dep_config.trigger_after,
+                    then_mode
+                ]);
+            }
+        }
+        for (const [dep_id, trigger_after, condition] of then_triggers) {
+            const dependency = _deps_by_id.get(trigger_after);
+            if (dependency) {
+                dependency.add_trigger(dep_id, condition);
+                dependency.original_trigger_id = walk_after_to_original(dependencies, trigger_after);
+            }
+        }
+        return { by_id: _deps_by_id, by_event: _deps_by_event };
+    }
+    handle_log(msg) {
+        const { title, log, fn_index, level, duration, visible } = msg;
+        this.log_cb(title, log, fn_index, level, duration, visible);
+    }
+    /**
+     *  Updates the state of the outputs based on the data received from the dependency
+     *
+     * @param outputs the ids of the output components
+     * @param data the data to update the components with
+     * */
+    async handle_data(outputs, data) {
+        await Promise.all(outputs.map(async (output_id, i) => {
+            const _data = data[i] === undefined ? NOVALUE : data[i];
+            if (_data === NOVALUE)
+                return;
+            if (is_prop_update(_data)) {
+                let pending_visibility_update = false;
+                let pending_visibility_value = null;
+                for (const [update_key, update_value] of Object.entries(_data)) {
+                    if (update_key === "__type__")
+                        continue;
+                    if (update_key === "visible") {
+                        pending_visibility_update = true;
+                        pending_visibility_value = update_value;
+                        continue;
+                    }
+                    await this.update_state_cb(outputs[i], {
+                        [update_key]: update_value
+                    }, false);
+                }
+                if (pending_visibility_update) {
+                    await this.update_state_cb(outputs[i], {
+                        visible: pending_visibility_value
+                    }, true);
+                }
+            }
+            else {
+                await this.update_state_cb(output_id, { value: _data }, false);
+            }
+        }));
+    }
+    /**
+     * Gathers the current state of the inputs
+     *
+     * @param ids the ids of the components to gather state from
+     * @param prop_indices the indices (relative to ids array) that should return all component props instead of just the value
+     * @returns an array of the current state of the components, in the same order as the ids
+     */
+    async gather_state(ids, prop_indices = []) {
+        return (await Promise.all(ids.map((id) => this.get_state_cb(id)))).map((state, index) => {
+            if (prop_indices.includes(index)) {
+                return state ?? null;
+            }
+            return state?.value ?? null;
+        });
+    }
+    /** Sets the event arguments for a specific component
+     *
+     * @param id the id of the component to set the event arguments for
+     * @param args the event arguments to set
+     * @returns a function that can be called to reset the event arguments to their previous values
+     */
+    async set_event_args(id, args) {
+        let current_args = {};
+        const current_state = await this.get_state_cb?.(id);
+        if (!current_state)
+            return () => { };
+        for (const [key] of Object.entries(args)) {
+            current_args[key] = current_state?.[key] ?? null;
+        }
+        if (Object.keys(args).length === 0) {
+            return () => {
+                // do nothing
+            };
+        }
+        await this.update_state_cb(id, args, false);
+        return () => {
+            this.update_state_cb(id, current_args, false);
+        };
+    }
+    async cancel(ids) {
+        if (!ids)
+            return;
+        for (const id of ids) {
+            const submission = this.submissions.get(id);
+            if (submission) {
+                await submission.cancel();
+                this.submissions.delete(id);
+            }
+        }
+    }
+    dispatch_load_events() {
+        this.dependencies_by_fn.forEach((dep) => {
+            dep.targets.forEach(([target_id, event_name]) => {
+                if (event_name === "load") {
+                    this.dispatch({
+                        type: "fn",
+                        fn_index: dep.id,
+                        event_data: null,
+                        target_id: target_id
+                    });
+                }
+            });
+        });
+    }
+    get_fns_from_targets(target_id) {
+        const fn_indices = [];
+        this.dependencies_by_event.forEach((deps, key) => {
+            const [, dep_target_id] = key.split("-");
+            if (Number(dep_target_id) === target_id) {
+                deps.forEach((dep) => {
+                    fn_indices.push(dep.id);
+                });
+            }
+        });
+        return fn_indices;
+    }
+    close_stream(id) {
+        const fn_ids = this.get_fns_from_targets(id);
+        for (const fn_id of fn_ids) {
+            const submission = this.submissions.get(fn_id);
+            if (submission) {
+                submission.close_stream();
+                this.submissions.delete(fn_id);
+            }
+            this.loading_stati.update({
+                status: "complete",
+                fn_index: fn_id,
+                eta: 0,
+                queue: false,
+                stream_state: "closed"
+            });
+        }
+        this.update_loading_stati_state();
+    }
+}
+function is_prop_update(payload) {
+    return (typeof payload === "object" &&
+        payload !== null &&
+        "__type__" in payload &&
+        payload?.__type__ === "update");
+}
+function should_dispatch(mode, is_running) {
+    if (!is_running)
+        return "run";
+    if (mode === "always_last") {
+        return "defer";
+    }
+    else if (mode === "multiple") {
+        return "run";
+    }
+    else if (mode === "once") {
+        return "skip";
+    }
+    return "run";
+}
+/**
+ * Takes a string of source code and returns a function that can be called with arguments
+ * @param source the source code
+ * @param backend_fn if there is also a backend function
+ * @param input_length the number of inputs
+ * @param output_length the number of outputs
+ * @returns The function, or null if the source code is invalid or missing
+ */
+export function process_frontend_fn(source, backend_fn, input_length, output_length) {
+    const wrap = backend_fn ? input_length === 1 : output_length === 1;
+    try {
+        return new AsyncFunction("__fn_args", `  let result = await (${source})(...__fn_args);
+  if (typeof result === "undefined") return [];
+  return (${wrap} && !Array.isArray(result)) ? [result] : result;`);
+    }
+    catch (e) {
+        throw e;
+    }
+}
+/**
+ * Walks the dependency graph to find the original trigger ID for a given dependency.
+ * @param dependency_map The map of all dependencies.
+ * @param dep_id The ID of the dependency to start from.
+ * @returns The ID of the original trigger dependency, or the input ID if not found.
+ */
+function walk_after_to_original(dependency_map, dep_id) {
+    // TODO: hoist this cache later so it is useful across multiple calls
+    let cache = new Map();
+    let current_id = dep_id;
+    let safety_counter = 0;
+    while (safety_counter < 100) {
+        const dep = cache.get(current_id) || dependency_map.find((d) => d.id === current_id);
+        if (!dep)
+            break;
+        cache.set(dep.id, dep);
+        if (dep.trigger_after === null || dep.trigger_after === undefined)
+            break;
+        current_id = dep.trigger_after;
+        safety_counter += 1;
+    }
+    return current_id;
+}