@gradio/core 1.0.0-dev.0 → 1.0.0

package/dist/src/Blocks.svelte

@@ -1,867 +1,412 @@
-<script>import { tick, onMount } from "svelte";
-import { _ } from "svelte-i18n";
-import { Client } from "@gradio/client";
-import { writable } from "svelte/store";
-import { setupi18n } from "./i18n";
-import { Toast } from "@gradio/statustracker";
-import MountComponents from "./MountComponents.svelte";
-import { prefix_css } from "./css";
-import logo from "./images/logo.svg";
-import api_logo from "./api_docs/img/api-logo.svg";
-import settings_logo from "./api_docs/img/settings-logo.svg";
-import record_stop from "./api_docs/img/record-stop.svg";
-import { create_components, AsyncFunction } from "./init";
-import * as screen_recorder from "./screen_recorder";
-export let root;
-export let components;
-export let layout;
-export let dependencies;
-export let title = "Gradio";
-export let target;
-export let autoscroll;
-export let footer_links = ["gradio", "settings", "api"];
-export let control_page_title = false;
-export let app_mode;
-export let theme_mode;
-export let app;
-export let space_id;
-export let version;
-export let js;
-export let fill_height = false;
-export let ready;
-export let username;
-export let api_prefix = "";
-export let max_file_size = void 0;
-export let initial_layout = void 0;
-export let css = null;
-export let vibe_mode = false;
-let broken_connection = false;
-let {
-  layout: _layout,
-  targets,
-  update_value,
-  get_data,
-  modify_stream,
-  get_stream_state,
-  set_time_limit,
-  loading_status,
-  scheduled_updates,
-  create_layout,
-  rerender_layout,
-  value_change
-} = create_components({
-  initial_layout
-});
-$: components, layout, dependencies, root, app, fill_height, target, run();
-$: {
-  ready = !!$_layout;
-}
-let old_dependencies = dependencies;
-$: if (dependencies !== old_dependencies && render_complete && !layout_creating) {
-  handle_load_triggers();
-  old_dependencies = dependencies;
-}
-let vibe_editor_width = 350;
-async function run() {
-  await setupi18n(app.config?.i18n_translations || void 0);
-  layout_creating = true;
-  await create_layout({
-    components,
-    layout,
-    dependencies,
-    root: root + api_prefix,
-    app,
-    options: {
-      fill_height
-    }
-  });
-  layout_creating = false;
-}
-export let search_params;
-let api_docs_visible = search_params.get("view") === "api" && footer_links.includes("api");
-let settings_visible = search_params.get("view") === "settings";
-let api_recorder_visible = search_params.get("view") === "api-recorder" && footer_links.includes("api");
-let allow_zoom = true;
-let allow_video_trim = true;
-let ApiDocs = null;
-let ApiRecorder = null;
-let Settings = null;
-let VibeEditor = null;
-async function loadApiDocs() {
-  if (!ApiDocs || !ApiRecorder) {
-    const api_docs_module = await import("./api_docs/ApiDocs.svelte");
-    const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
-    if (!ApiDocs) ApiDocs = api_docs_module.default;
-    if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
-  }
-}
-async function loadApiRecorder() {
-  if (!ApiRecorder) {
-    const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
-    ApiRecorder = api_recorder_module.default;
-  }
-}
-async function loadSettings() {
-  if (!Settings) {
-    const settings_module = await import("./api_docs/Settings.svelte");
-    Settings = settings_module.default;
-  }
-}
-async function loadVibeEditor() {
-  if (!VibeEditor) {
-    const vibe_editor_module = await import("@gradio/vibeeditor");
-    VibeEditor = vibe_editor_module.default;
-  }
-}
-async function set_api_docs_visible(visible) {
-  api_recorder_visible = false;
-  if (visible) {
-    await loadApiDocs();
-  }
-  api_docs_visible = visible;
-  let params = new URLSearchParams(window.location.search);
-  if (visible) {
-    params.set("view", "api");
-  } else {
-    params.delete("view");
-  }
-  history.replaceState(null, "", "?" + params.toString());
-}
-async function set_settings_visible(visible) {
-  if (visible) {
-    await loadSettings();
-  }
-  let params = new URLSearchParams(window.location.search);
-  if (visible) {
-    params.set("view", "settings");
-  } else {
-    params.delete("view");
-  }
-  history.replaceState(null, "", "?" + params.toString());
-  settings_visible = !settings_visible;
-}
-let api_calls = [];
-let layout_creating = false;
-export let render_complete = false;
-async function handle_update(data, fn_index) {
-  const dep = dependencies.find((dep2) => dep2.id === fn_index);
-  const input_type = components.find(
-    (comp) => comp.id === dep?.inputs[0]
-  )?.type;
-  if (allow_zoom && dep && input_type !== "dataset") {
-    if (dep && dep.inputs && dep.inputs.length > 0 && $is_screen_recording) {
-      screen_recorder.zoom(true, dep.inputs, 1);
-    }
-    if (dep && dep.outputs && dep.outputs.length > 0 && $is_screen_recording) {
-      screen_recorder.zoom(false, dep.outputs, 2);
-    }
-  }
-  if (!dep) {
-    return;
-  }
-  const outputs = dep.outputs;
-  const meta_updates = data?.map((value, i) => {
-    return {
-      id: outputs[i],
-      prop: "value_is_output",
-      value: true
-    };
-  });
-  update_value(meta_updates);
-  await tick();
-  const updates = [];
-  data?.forEach((value, i) => {
-    if (typeof value === "object" && value !== null && value.__type__ === "update") {
-      for (const [update_key, update_value2] of Object.entries(value)) {
-        if (update_key === "__type__") {
-          continue;
-        } else {
-          updates.push({
-            id: outputs[i],
-            prop: update_key,
-            value: update_value2
-          });
-        }
-      }
-    } else {
-      updates.push({
-        id: outputs[i],
-        prop: "value",
-        value
-      });
-    }
-  });
-  update_value(updates);
-  updates.forEach((update) => {
-    const component = components.find((comp) => comp.id === update.id);
-    if (component && component.type === "navbar") {
-      import("./navbar_store").then(({ navbar_config }) => {
-        navbar_config.update((current) => ({
-          ...current,
-          [update.prop]: update.value
-        }));
-      });
-    }
-  });
-  await tick();
-}
-let submit_map = /* @__PURE__ */ new Map();
-let messages = [];
-function new_message(title2, message, fn_index, type, duration = 10, visible = true) {
-  return {
-    title: title2,
-    message,
-    fn_index,
-    type,
-    id: ++_error_id,
-    duration,
-    visible
-  };
-}
-export function add_new_message(title2, message, type) {
-  messages = [new_message(title2, message, -1, type), ...messages];
-}
-let _error_id = -1;
-const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
-const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
-const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
-const LOST_CONNECTION_MESSAGE = "Connection to the server was lost. Attempting reconnection...";
-const CHANGED_CONNECTION_MESSAGE = "Reconnected to server, but the server has changed. You may need to <a href=''>refresh the page</a>.";
-const RECONNECTION_MESSAGE = "Connection re-established.";
-const SESSION_NOT_FOUND_MESSAGE = "Session not found - this is likely because the machine you were connected to has changed. <a href=''>Refresh the page</a> to continue.";
-const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
-const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
-const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
-let is_mobile_device = false;
-let showed_duplicate_message = false;
-let showed_mobile_warning = false;
-let inputs_waiting = [];
-function wait_then_trigger_api_call(dep_index, trigger_id = null, event_data = null) {
-  let _unsub = () => {
-  };
-  function unsub() {
-    _unsub();
-  }
-  if ($scheduled_updates) {
-    _unsub = scheduled_updates.subscribe((updating) => {
-      if (!updating) {
-        tick().then(() => {
-          trigger_api_call(dep_index, trigger_id, event_data);
-          unsub();
-        });
-      }
-    });
-  } else {
-    trigger_api_call(dep_index, trigger_id, event_data);
-  }
-}
-async function get_component_value_or_event_data(component_id, trigger_id, event_data) {
-  if (component_id === trigger_id && event_data && event_data.is_value_data === true) {
-    return event_data.value;
-  }
-  return get_data(component_id);
-}
-async function trigger_api_call(dep_index, trigger_id = null, event_data = null) {
-  const _dep = dependencies.find((dep2) => dep2.id === dep_index);
-  if (_dep === void 0) {
-    return;
-  }
-  const dep = _dep;
-  if (inputs_waiting.length > 0) {
-    for (const input of inputs_waiting) {
-      if (dep.inputs.includes(input)) {
-        add_new_message("Warning", WAITING_FOR_INPUTS_MESSAGE, "warning");
-        return;
-      }
-    }
-  }
-  const current_status = loading_status.get_status_for_fn(dep_index);
-  messages = messages.filter(({ fn_index }) => fn_index !== dep_index);
-  if (current_status === "pending" || current_status === "generating") {
-    dep.pending_request = true;
-  }
-  let payload = {
-    fn_index: dep_index,
-    data: await Promise.all(
-      dep.inputs.map(
-        (id) => get_component_value_or_event_data(id, trigger_id, event_data)
-      )
-    ),
-    event_data: dep.collects_event_data ? event_data : null,
-    trigger_id
-  };
-  if (dep.frontend_fn && typeof dep.frontend_fn !== "boolean") {
-    dep.frontend_fn(
-      payload.data.concat(
-        await Promise.all(dep.outputs.map((id) => get_data(id)))
-      )
-    ).then((v) => {
-      if (dep.backend_fn) {
-        payload.data = v;
-        trigger_prediction(dep, payload);
-      } else {
-        handle_update(v, dep_index);
-      }
-    });
-  } else if (dep.types.cancel && dep.cancels) {
-    await Promise.all(
-      dep.cancels.map(async (fn_index) => {
-        const submission = submit_map.get(fn_index);
-        submission?.cancel();
-        return submission;
-      })
-    );
-  } else {
-    if (dep.backend_fn) {
-      if (dep.js_implementation) {
-        let js_fn = new AsyncFunction(
-          `let result = await (${dep.js_implementation})(...arguments);
-						return (!Array.isArray(result)) ? [result] : result;`
-        );
-        js_fn(...payload.data).then((js_result) => {
-          handle_update(js_result, dep_index);
-          payload.js_implementation = true;
-        }).catch((error) => {
-          console.error(error);
-          payload.js_implementation = false;
-        });
-      }
-      trigger_prediction(dep, payload);
-    }
-  }
-  function trigger_prediction(dep2, payload2) {
-    if (dep2.trigger_mode === "once") {
-      if (!dep2.pending_request)
-        make_prediction(payload2, dep2.connection == "stream");
-    } else if (dep2.trigger_mode === "multiple") {
-      make_prediction(payload2, dep2.connection == "stream");
-    } else if (dep2.trigger_mode === "always_last") {
-      if (!dep2.pending_request) {
-        make_prediction(payload2, dep2.connection == "stream");
-      } else {
-        dep2.final_event = payload2;
-      }
-    }
-  }
-  async function reconnect() {
-    const connection_status = await app.reconnect();
-    if (connection_status === "broken") {
-      setTimeout(reconnect, 1e3);
-    } else if (connection_status === "changed") {
-      broken_connection = false;
-      messages = [
-        new_message(
-          "Changed Connection",
-          CHANGED_CONNECTION_MESSAGE,
-          -1,
-          "info",
-          3,
-          true
-        ),
-        ...messages.map(
-          (m) => m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
-        )
-      ];
-    } else if (connection_status === "connected") {
-      broken_connection = false;
-      messages = [
-        new_message(
-          "Reconnected",
-          RECONNECTION_MESSAGE,
-          -1,
-          "success",
-          null,
-          true
-        ),
-        ...messages.map(
-          (m) => m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
-        )
-      ];
-    }
-  }
-  async function make_prediction(payload2, streaming = false) {
-    if (allow_video_trim) {
-      screen_recorder.markRemoveSegmentStart();
-    }
-    if (api_recorder_visible) {
-      api_calls = [...api_calls, JSON.parse(JSON.stringify(payload2))];
-    }
-    let submission;
-    app.set_current_payload(payload2);
-    if (streaming) {
-      if (!submit_map.has(dep_index)) {
-        dep.inputs.forEach((id) => modify_stream(id, "waiting"));
-      } else if (submit_map.has(dep_index) && dep.inputs.some((id) => get_stream_state(id) === "waiting")) {
-        return;
-      } else if (submit_map.has(dep_index) && dep.inputs.some((id) => get_stream_state(id) === "open")) {
-        await app.post_data(
-          // @ts-ignore
-          `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_index).event_id()}`,
-          { ...payload2, session_hash: app.session_hash }
-        );
-        return;
-      }
-    }
-    try {
-      submission = app.submit(
-        payload2.fn_index,
-        payload2.data,
-        payload2.event_data,
-        payload2.trigger_id
-      );
-    } catch (e) {
-      const fn_index = 0;
-      if (app.closed) return;
-      messages = [
-        new_message("Error", String(e), fn_index, "error"),
-        ...messages
-      ];
-      loading_status.update({
-        status: "error",
-        fn_index,
-        eta: 0,
-        queue: false,
-        queue_position: null
-      });
-      set_status($loading_status);
-      return;
-    }
-    submit_map.set(dep_index, submission);
-    for await (const message of submission) {
-      if (payload2.js_implementation) {
-        return;
-      }
-      if (message.type === "data") {
-        handle_data(message);
-      } else if (message.type === "render") {
-        handle_render(message);
-      } else if (message.type === "status") {
-        handle_status_update(message);
-      } else if (message.type === "log") {
-        handle_log(message);
-      }
-    }
-    function handle_data(message) {
-      const { data, fn_index } = message;
-      if (dep.pending_request && dep.final_event) {
-        dep.pending_request = false;
-        make_prediction(dep.final_event, dep.connection == "stream");
-      }
-      dep.pending_request = false;
-      handle_update(data, fn_index);
-      set_status($loading_status);
-    }
-    function handle_render(message) {
-      const { data } = message;
-      let _components = data.components;
-      let render_layout = data.layout;
-      let _dependencies = data.dependencies;
-      let render_id = data.render_id;
-      let deps_to_remove = [];
-      dependencies.forEach((old_dep, i) => {
-        if (old_dep.rendered_in === dep.render_id) {
-          deps_to_remove.push(i);
-        }
-      });
-      deps_to_remove.reverse().forEach((i) => {
-        dependencies.splice(i, 1);
-      });
-      _dependencies.forEach((dep2) => {
-        dependencies.push(dep2);
-      });
-      rerender_layout({
-        components: _components,
-        layout: render_layout,
-        root: root + api_prefix,
-        dependencies,
-        render_id
-      });
-      _dependencies.forEach((dep2) => {
-        if (dep2.targets.some((dep3) => dep3[1] === "load")) {
-          wait_then_trigger_api_call(dep2.id);
-        }
-      });
-    }
-    function handle_log(msg) {
-      const { title: title2, log, fn_index, level, duration, visible } = msg;
-      messages = [
-        new_message(title2, log, fn_index, level, duration, visible),
-        ...messages
-      ];
-    }
-    function open_stream_events(status, id, dep2) {
-      if (status.original_msg === "process_starts" && dep2.connection === "stream") {
-        modify_stream(id, "open");
-      }
-    }
-    function handle_status_update(message) {
-      if (message.code === "validation_error") {
-        const dep2 = dependencies.find((dep3) => dep3.id === message.fn_index);
-        if (dep2 === void 0 || message.message === void 0 || typeof message.message === "string") {
-          return;
-        }
-        const validation_error_data = [];
-        message.message.forEach((message2, i) => {
-          if (message2.is_valid) {
-            return;
-          }
-          validation_error_data.push({
-            id: dep2.inputs[i],
-            prop: "validation_error",
-            value: message2.message
-          });
-          validation_error_data.push({
-            id: dep2.inputs[i],
-            prop: "loading_status",
-            value: { validation_error: message2.message }
-          });
-        });
-        if (validation_error_data.length > 0) {
-          update_value(validation_error_data);
-          loading_status.update({
-            status: "complete",
-            fn_index: message.fn_index,
-            eta: 0,
-            queue: false,
-            queue_position: null
-          });
-          set_status($loading_status);
-          return;
-        }
-      }
-      if (message.broken && !broken_connection) {
-        messages = [
-          new_message(
-            "Broken Connection",
-            LOST_CONNECTION_MESSAGE,
-            -1,
-            "error",
-            null,
-            true
-          ),
-          ...messages
-        ];
-        broken_connection = true;
-        setTimeout(reconnect, 1e3);
-      }
-      if (message.session_not_found) {
-        messages = [
-          new_message(
-            "Session Not Found",
-            SESSION_NOT_FOUND_MESSAGE,
-            -1,
-            "error",
-            null,
-            true
-          ),
-          ...messages
-        ];
-      }
-      const { fn_index, ...status } = message;
-      if (status.stage === "streaming" && status.time_limit) {
-        dep.inputs.forEach((id) => {
-          set_time_limit(id, status.time_limit);
-        });
-      }
-      dep.inputs.forEach((id) => {
-        open_stream_events(message, id, dep);
-      });
-      loading_status.update({
-        ...status,
-        time_limit: status.time_limit,
-        status: status.stage,
-        progress: status.progress_data,
-        fn_index
-      });
-      set_status($loading_status);
-      if (!showed_duplicate_message && space_id !== null && status.position !== void 0 && status.position >= 2 && status.eta !== void 0 && status.eta > SHOW_DUPLICATE_MESSAGE_ON_ETA) {
-        showed_duplicate_message = true;
-        messages = [
-          new_message("Warning", DUPLICATE_MESSAGE, fn_index, "warning"),
-          ...messages
-        ];
-      }
-      if (!showed_mobile_warning && is_mobile_device && status.eta !== void 0 && status.eta > SHOW_MOBILE_QUEUE_WARNING_ON_ETA) {
-        showed_mobile_warning = true;
-        messages = [
-          new_message("Warning", MOBILE_QUEUE_WARNING, fn_index, "warning"),
-          ...messages
-        ];
-      }
-      if (status.stage === "complete" || status.stage === "generating") {
-        const deps_triggered_by_state = /* @__PURE__ */ new Set();
-        status.changed_state_ids?.forEach((id) => {
-          dependencies.filter((dep2) => dep2.targets.some(([_id, _2]) => _id === id)).forEach((dep2) => {
-            deps_triggered_by_state.add(dep2);
-          });
-        });
-        deps_triggered_by_state.forEach((dep2) => {
-          wait_then_trigger_api_call(dep2.id, payload2.trigger_id);
-        });
-      }
-      if (status.stage === "complete") {
-        dependencies.forEach(async (dep2) => {
-          if (dep2.trigger_after === fn_index && !dep2.trigger_only_on_failure) {
-            wait_then_trigger_api_call(dep2.id, payload2.trigger_id);
-          }
-        });
-        dep.inputs.forEach((id) => {
-          modify_stream(id, "closed");
-        });
-        submit_map.delete(dep_index);
-      }
-      if (status.stage === "error" && !broken_connection && !message.session_not_found) {
-        if (status.message && typeof status.message === "string") {
-          const _message = status.message.replace(
-            MESSAGE_QUOTE_RE,
-            (_2, b) => b
-          );
-          const _title = status.title ?? "Error";
-          messages = [
-            new_message(
-              _title,
-              _message,
-              fn_index,
-              "error",
-              status.duration,
-              status.visible
-            ),
-            ...messages
-          ];
-        }
-        dependencies.map(async (dep2) => {
-          if (dep2.trigger_after === fn_index && (!dep2.trigger_only_on_success || dep2.trigger_only_on_failure)) {
-            wait_then_trigger_api_call(dep2.id, payload2.trigger_id);
-          }
-        });
-      }
-    }
-    if (allow_video_trim) {
-      screen_recorder.markRemoveSegmentEnd();
-    }
-  }
-}
-function trigger_share(title2, description) {
-  if (space_id === null) {
-    return;
-  }
-  const discussion_url = new URL(
-    `https://huggingface.co/spaces/${space_id}/discussions/new`
-  );
-  if (title2 !== void 0 && title2.length > 0) {
-    discussion_url.searchParams.set("title", title2);
-  }
-  discussion_url.searchParams.set("description", description);
-  window.open(discussion_url.toString(), "_blank");
-}
-function handle_error_close(e) {
-  const _id = e.detail;
-  messages = messages.filter((m) => m.id !== _id);
-}
-const is_external_url = (link) => !!(link && new URL(link, location.href).origin !== location.origin);
-async function handle_mount() {
-  if (js) {
-    let blocks_frontend_fn = new AsyncFunction(
-      `let result = await (${js})();
-					return (!Array.isArray(result)) ? [result] : result;`
-    );
-    await blocks_frontend_fn();
-  }
-  await tick();
-  var a = target.getElementsByTagName("a");
-  for (var i = 0; i < a.length; i++) {
-    const _target = a[i].getAttribute("target");
-    const _link = a[i].getAttribute("href");
-    if (is_external_url(_link) && _target !== "_blank")
-      a[i].setAttribute("target", "_blank");
-  }
-  handle_load_triggers();
-  if (!target || render_complete) return;
-  target.addEventListener("prop_change", (e) => {
-    if (!isCustomEvent(e)) throw new Error("not a custom event");
-    const { id, prop, value } = e.detail;
-    if (prop === "value") {
-      update_value([
-        {
-          id,
-          prop: "loading_status",
-          value: { validation_error: void 0 }
-        }
-      ]);
-    }
-    update_value([{ id, prop, value }]);
-    if (prop === "input_ready" && value === false) {
-      inputs_waiting.push(id);
-    }
-    if (prop === "input_ready" && value === true) {
-      inputs_waiting = inputs_waiting.filter((item) => item !== id);
-    }
-  });
-  target.addEventListener("gradio", (e) => {
-    if (!isCustomEvent(e)) throw new Error("not a custom event");
-    const { id, event, data } = e.detail;
-    if (event === "share") {
-      const { title: title2, description } = data;
-      trigger_share(title2, description);
-    } else if (event === "error") {
-      messages = [new_message("Error", data, -1, event), ...messages];
-    } else if (event === "warning") {
-      messages = [new_message("Warning", data, -1, event), ...messages];
-    } else if (event === "info") {
-      messages = [new_message("Info", data, -1, event), ...messages];
-    } else if (event == "clear_status") {
-      update_status(id, "complete", data);
-    } else if (event == "close_stream") {
-      const deps = $targets[id]?.[data];
-      deps?.forEach((dep_id) => {
-        if (submit_map.has(dep_id)) {
-          const url = `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}`;
-          app.post_data(`${url}/close`, {});
-        }
-      });
-    } else {
-      const deps = $targets[id]?.[event];
-      deps?.forEach((dep_id) => {
-        requestAnimationFrame(() => {
-          wait_then_trigger_api_call(dep_id, id, data);
-        });
-      });
-    }
-  });
-  render_complete = true;
-}
-value_change((id, value) => {
-  const deps = $targets[id]?.["change"];
-  deps?.forEach((dep_id) => {
-    requestAnimationFrame(() => {
-      wait_then_trigger_api_call(dep_id, id, value);
-    });
-  });
-});
-const handle_load_triggers = () => {
-  dependencies.forEach((dep) => {
-    if (dep.targets.some((dep2) => dep2[1] === "load")) {
-      wait_then_trigger_api_call(dep.id);
-    }
-  });
-};
-$: set_status($loading_status);
-function update_status(id, status, data) {
-  data.status = status;
-  update_value([
-    {
-      id,
-      prop: "loading_status",
-      value: data
-    }
-  ]);
-}
-function set_status(statuses) {
-  let updates = [];
-  Object.entries(statuses).forEach(([id, loading_status2]) => {
-    if (app.closed && loading_status2.status === "error") {
-      return;
-    }
-    let dependency = dependencies.find(
-      (dep) => dep.id == loading_status2.fn_index
-    );
-    if (dependency === void 0) {
-      return;
-    }
-    loading_status2.scroll_to_output = dependency.scroll_to_output;
-    loading_status2.show_progress = dependency.show_progress;
-    updates.push({
-      id: parseInt(id),
-      prop: "loading_status",
-      value: loading_status2
-    });
-  });
-  const inputs_to_update = loading_status.get_inputs_to_update();
-  const additional_updates = Array.from(inputs_to_update).map(
-    ([id, pending_status]) => {
-      return {
-        id,
-        prop: "pending",
-        value: pending_status === "pending"
-      };
-    }
-  );
-  update_value([...updates, ...additional_updates]);
-}
-function isCustomEvent(event) {
-  return "detail" in event;
-}
-let is_screen_recording = writable(false);
-onMount(() => {
-  is_mobile_device = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-    navigator.userAgent
-  );
-  screen_recorder.initialize(
-    root,
-    (title2, message, type) => {
-      add_new_message(title2, message, type);
-    },
-    (isRecording) => {
-      $is_screen_recording = isRecording;
-    }
-  );
-  const handleVibeEditorResize = (event) => {
-    vibe_editor_width = event.detail.width;
-  };
-  window.addEventListener(
-    "vibeEditorResize",
-    handleVibeEditorResize
-  );
-  if (api_docs_visible) {
-    loadApiDocs();
-  }
-  if (api_recorder_visible) {
-    loadApiRecorder();
-  }
-  if (settings_visible) {
-    loadSettings();
-  }
-  if (vibe_mode) {
-    loadVibeEditor();
-  }
-});
-function screen_recording() {
-  if ($is_screen_recording) {
-    screen_recorder.stopRecording();
-  } else {
-    screen_recorder.startRecording();
-  }
-}
-let footer_height = 0;
-let root_container;
-function get_root_node(container) {
-  if (!container) return null;
-  return container.children[container.children.length - 1];
-}
-function handle_resize() {
-  if ("parentIFrame" in window) {
-    const box = root_container.children[0].getBoundingClientRect();
-    if (!box) return;
-    window.parentIFrame?.size(box.bottom + footer_height + 32);
-  }
-}
-onMount(() => {
-  if ("parentIFrame" in window) {
-    window.parentIFrame?.autoResize(false);
-  }
-  const mut = new MutationObserver(handle_resize);
-  const res = new ResizeObserver(handle_resize);
-  mut.observe(root_container, {
-    childList: true,
-    subtree: true,
-    attributes: true
-  });
-  res.observe(root_container);
-  return () => {
-    mut.disconnect();
-    res.disconnect();
-  };
-});
+<script lang="ts">
+	import { tick, onMount, setContext, settled, untrack } from "svelte";
+	import { _ } from "svelte-i18n";
+	import { Client } from "@gradio/client";
+	import { writable } from "svelte/store";
+
+	// import type { LoadingStatus, LoadingStatusCollection } from "./stores";
+
+	import type {
+		ComponentMeta,
+		Dependency as IDependency,
+		LayoutNode
+	} from "./types";
+	// import type { UpdateTransaction } from "./_init";
+	import { setupi18n } from "./i18n";
+	import type { ThemeMode, Payload } from "./types";
+	import { Toast } from "@gradio/statustracker";
+	import type { ToastMessage } from "@gradio/statustracker";
+	import { type ShareData, type ValueData, GRADIO_ROOT } from "@gradio/utils";
+
+	import MountComponents from "./MountComponents.svelte";
+	import { prefix_css } from "./css";
+	import { reactive_formatter } from "./gradio_helper";
+
+	import type ApiDocsInterface from "./api_docs/ApiDocs.svelte";
+	import type ApiRecorderInterface from "./api_docs/ApiRecorder.svelte";
+	import type SettingsInterface from "./api_docs/Settings.svelte";
+	// import type { ComponentType } from "svelte";
+
+	import logo from "./images/logo.svg";
+	import api_logo from "./api_docs/img/api-logo.svg";
+	import settings_logo from "./api_docs/img/settings-logo.svg";
+	import record_stop from "./api_docs/img/record-stop.svg";
+	import { AppTree } from "./init.svelte";
+	// import type {
+	// 	LogMessage,
+	// 	RenderMessage,
+	// 	StatusMessage,
+	// } from "@gradio/client";
+	import * as screen_recorder from "./screen_recorder";
+
+	import { DependencyManager } from "./dependency";
+
+	let {
+		root,
+		components,
+		layout,
+		dependencies,
+		title,
+		target,
+		autoscroll,
+		footer_links,
+		control_page_title,
+		app_mode,
+		theme_mode,
+		app,
+		space_id,
+		version,
+		js,
+		fill_height,
+		username,
+		api_prefix,
+		max_file_size,
+		initial_layout,
+		css,
+		vibe_mode,
+		search_params,
+		render_complete = false,
+		ready = $bindable(false),
+		reload_count = $bindable(0),
+		add_new_message = $bindable()
+	}: {
+		root: string;
+		components: ComponentMeta[];
+		layout: LayoutNode;
+		dependencies: IDependency[];
+		title: string;
+		target: HTMLElement;
+		autoscroll: boolean;
+		footer_links: string[];
+		control_page_title: boolean;
+		app_mode: boolean;
+		theme_mode: ThemeMode;
+		app: Awaited<ReturnType<typeof Client.connect>>;
+		space_id: string | null;
+		version: string;
+		js: string | null;
+		fill_height: boolean;
+		username: string | null;
+		api_prefix: string;
+		max_file_size: number | undefined;
+		initial_layout: ComponentMeta | undefined;
+		css: string | null | undefined;
+		vibe_mode: boolean;
+		search_params: URLSearchParams;
+		render_complete: boolean;
+		ready: boolean;
+		reload_count: number;
+		add_new_message: (title: string, message: string, type: string) => void;
+	} = $props();
+
+	components.forEach((comp) => {
+		if (!comp.props.i18n) {
+			comp.props.i18n = $reactive_formatter;
+		}
+	});
+
+	let app_tree = new AppTree(
+		components,
+		layout,
+		dependencies,
+		{
+			root,
+			theme: theme_mode,
+			version,
+			api_prefix,
+			max_file_size,
+			autoscroll
+		},
+		app,
+		$reactive_formatter
+	);
+
+	setContext(GRADIO_ROOT, {
+		register: app_tree.register_component.bind(app_tree),
+		dispatcher: gradio_event_dispatcher
+	});
+
+	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
+
+	function gradio_event_dispatcher(
+		id: number,
+		event: string,
+		data: unknown
+	): void {
+		if (event === "share") {
+			const { title, description } = data as ShareData;
+			// trigger_share(title, description);
+			// TODO: lets combine all of the into a log type with levels
+		} else if (event === "error") {
+			new_message("Error", data, -1, event, 10, true);
+		} else if (event === "warning") {
+			new_message("Warning", data, -1, event, 10, true);
+		} else if (event === "info") {
+			new_message("Info", data, -1, event, 10, true);
+		} else if (event == "clear_status") {
+			app_tree.update_state(
+				id,
+				{
+					loading_status: {}
+				},
+				false
+			);
+			dep_manager.clear_loading_status(id);
+			// TODO: the loading_status store should handle this via a method
+			// update_status(id, "complete", data);
+		} else if (event == "close_stream") {
+			dep_manager.close_stream(id);
+		} else {
+			// Tabs are a bit weird. The Tabs component dispatches 'select' events
+			// but the target id corresponds to the child Tab component that was selected.
+			// So the id we get from the dispatcher belongs to the Tabs,
+			// so we need to pull out the correct id here.
+			if (event === "select" && id in app_tree.initial_tabs) {
+				// this is the id of the selected tab
+				id = data.id;
+			}
+			dep_manager.dispatch({
+				type: "event",
+				event_name: event,
+				target_id: id,
+				event_data: data
+			});
+		}
+	}
+
+	let api_calls: Payload[] = $state([]);
+	let last_api_call: Payload | null = $state(null);
+	// We need a callback to add to api_calls from the DependencyManager
+	// We can't update a state variable from inside the DependencyManager because
+	// svelte won't see it and won't update the UI.
+	let add_to_api_calls = (payload: Payload): void => {
+		last_api_call = payload;
+		if (!api_recorder_visible) return;
+		api_calls = [...api_calls, last_api_call];
+	};
+
+	let dep_manager = new DependencyManager(
+		dependencies,
+		app,
+		app_tree.update_state.bind(app_tree),
+		app_tree.get_state.bind(app_tree),
+		app_tree.rerender.bind(app_tree),
+		new_message,
+		add_to_api_calls
+	);
+
+	$effect(() => {
+		reload_count;
+		untrack(() => {
+			app_tree.reload(components, layout, dependencies, {
+				root,
+				theme: theme_mode,
+				version,
+				api_prefix,
+				max_file_size,
+				autoscroll
+			});
+			dep_manager.reload(
+				dependencies,
+				app_tree.update_state.bind(app_tree),
+				app_tree.get_state.bind(app_tree),
+				app_tree.rerender.bind(app_tree),
+				app
+			);
+		});
+	});
+
+	let vibe_editor_width = 350;
+
+	// export let
+	let api_docs_visible = $derived(
+		search_params.get("view") === "api" && footer_links.includes("api")
+	);
+	let settings_visible = $derived(search_params.get("view") === "settings");
+	let api_recorder_visible = $derived(
+		search_params.get("view") === "api-recorder" && footer_links.includes("api")
+	);
+	let allow_zoom = true;
+	let allow_video_trim = true;
+
+	// Lazy component loading state
+	let ApiDocs: ComponentType<ApiDocsInterface> | null = null;
+	let ApiRecorder: ComponentType<ApiRecorderInterface> | null = null;
+	let Settings: ComponentType<SettingsInterface> | null = null;
+	let VibeEditor: any = $state(null);
+
+	async function loadApiDocs(): Promise<void> {
+		if (!ApiDocs || !ApiRecorder) {
+			const api_docs_module = await import("./api_docs/ApiDocs.svelte");
+			const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
+			if (!ApiDocs) ApiDocs = api_docs_module.default;
+			if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
+		}
+	}
+
+	async function loadApiRecorder(): Promise<void> {
+		if (!ApiRecorder) {
+			const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
+			ApiRecorder = api_recorder_module.default;
+		}
+	}
+
+	async function loadSettings(): Promise<void> {
+		if (!Settings) {
+			const settings_module = await import("./api_docs/Settings.svelte");
+			Settings = settings_module.default;
+		}
+	}
+
+	async function loadVibeEditor(): Promise<void> {
+		if (!VibeEditor) {
+			const vibe_editor_module = await import("@gradio/vibeeditor");
+			VibeEditor = vibe_editor_module.default;
+		}
+	}
+
+	async function set_api_docs_visible(visible: boolean): Promise<void> {
+		api_recorder_visible = false;
+		if (visible) {
+			await loadApiDocs();
+		}
+		api_docs_visible = visible;
+		let params = new URLSearchParams(window.location.search);
+		if (visible) {
+			params.set("view", "api");
+		} else {
+			params.delete("view");
+		}
+		history.replaceState(null, "", "?" + params.toString());
+	}
+
+	async function set_settings_visible(visible: boolean): Promise<void> {
+		if (visible) {
+			await loadSettings();
+		}
+		let params = new URLSearchParams(window.location.search);
+		if (visible) {
+			params.set("view", "settings");
+		} else {
+			params.delete("view");
+		}
+		history.replaceState(null, "", "?" + params.toString());
+		settings_visible = !settings_visible;
+	}
+
+	let layout_creating = false;
+	//
+
+	function new_message(
+		title: string,
+		message: string,
+		fn_index: number,
+		type: ToastMessage["type"],
+		duration: number | null = 10,
+		visible = false
+	): void {
+		if (!visible) return;
+		messages.push({
+			title,
+			message,
+			fn_index,
+			type,
+			id: ++_error_id,
+			duration,
+			visible
+		});
+	}
+
+	add_new_message = new_message;
+
+	let _error_id = -1;
+
+	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
+
+	const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
+	const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
+	const LOST_CONNECTION_MESSAGE =
+		"Connection to the server was lost. Attempting reconnection...";
+	const CHANGED_CONNECTION_MESSAGE =
+		"Reconnected to server, but the server has changed. You may need to <a href=''>refresh the page</a>.";
+	const RECONNECTION_MESSAGE = "Connection re-established.";
+	const SESSION_NOT_FOUND_MESSAGE =
+		"Session not found - this is likely because the machine you were connected to has changed. <a href=''>Refresh the page</a> to continue.";
+	const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
+	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
+	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
+	let is_mobile_device = false;
+	let showed_duplicate_message = false;
+	let showed_mobile_warning = false;
+	let inputs_waiting: number[] = [];
+
+	// as state updates are not synchronous, we need to ensure updates are flushed before triggering any requests
+
+	let is_screen_recording = writable(false);
+
+	let footer_height = 0;
+
+	let root_container: HTMLElement;
+
+	function get_root_node(container: HTMLElement | null): HTMLElement | null {
+		if (!container) return null;
+		return container.children[container.children.length - 1] as HTMLElement;
+	}
+
+	function handle_resize(): void {
+		if ("parentIFrame" in window) {
+			const box = root_container.children[0].getBoundingClientRect();
+			if (!box) return;
+			window.parentIFrame?.size(box.bottom + footer_height + 32);
+		}
+	}
+
+	function screen_recording(): void {
+		if ($is_screen_recording) {
+			screen_recorder.stopRecording();
+		} else {
+			screen_recorder.startRecording();
+		}
+	}
+
+	onMount(() => {
+		is_mobile_device =
+			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+				navigator.userAgent
+			);
+
+		if ("parentIFrame" in window) {
+			window.parentIFrame?.autoResize(false);
+		}
+
+		const mut = new MutationObserver(handle_resize);
+		const res = new ResizeObserver(handle_resize);
+
+		mut.observe(root_container, {
+			childList: true,
+			subtree: true,
+			attributes: true
+		});
+		res.observe(root_container);
+
+		app_tree.ready.then(() => {
+			ready = true;
+			dep_manager.dispatch_load_events();
+		});
+
+		if (vibe_mode) {
+			void loadVibeEditor();
+		}
+
+		return () => {
+			mut.disconnect();
+			res.disconnect();
+		};
+	});
+
+	function handle_close(id: number): void {
+		messages = messages.filter((m) => m.id !== id);
+	}
 </script>
 
 <svelte:head>
@@ -880,167 +425,155 @@ onMount(() => {
 		bind:this={root_container}
 		style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
 	>
-		{#if $_layout && app.config}
-			<MountComponents
-				rootNode={$_layout}
-				{root}
-				{target}
-				{theme_mode}
-				on:mount={handle_mount}
-				{version}
-				{autoscroll}
-				{max_file_size}
-				client={app}
-			/>
-		{/if}
-	</div>
+		<MountComponents node={app_tree.root} />
 
-	{#if footer_links.length > 0}
-		<footer bind:clientHeight={footer_height}>
-			{#if footer_links.includes("api")}
+		{#if footer_links.length > 0}
+			<footer bind:clientHeight={footer_height}>
+				{#if footer_links.includes("api")}
+					<button
+						on:click={() => {
+							set_api_docs_visible(!api_docs_visible);
+						}}
+						on:mouseenter={() => {
+							loadApiDocs();
+							loadApiRecorder();
+						}}
+						class="show-api"
+					>
+						{#if app.config?.mcp_server}
+							{$_("errors.use_via_api_or_mcp")}
+						{:else}
+							{$_("errors.use_via_api")}
+						{/if}
+						<img src={api_logo} alt={$_("common.logo")} />
+					</button>
+				{/if}
+				{#if footer_links.includes("gradio")}
+					<div class="divider show-api-divider">·</div>
+					<a
+						href="https://gradio.app"
+						class="built-with"
+						target="_blank"
+						rel="noreferrer"
+					>
+						{$_("common.built_with_gradio")}
+						<img src={logo} alt={$_("common.logo")} />
+					</a>
+				{/if}
 				<button
+					class:hidden={!$is_screen_recording}
 					on:click={() => {
-						set_api_docs_visible(!api_docs_visible);
+						screen_recording();
 					}}
-					on:mouseenter={() => {
-						loadApiDocs();
-						loadApiRecorder();
-					}}
-					class="show-api"
+					class="record"
 				>
-					{#if app.config?.mcp_server}
-						{$_("errors.use_via_api_or_mcp")}
-					{:else}
-						{$_("errors.use_via_api")}
-					{/if}
-					<img src={api_logo} alt={$_("common.logo")} />
+					{$_("common.stop_recording")}
+					<img src={record_stop} alt={$_("common.stop_recording")} />
 				</button>
-			{/if}
-			{#if footer_links.includes("gradio")}
-				<div class="divider show-api-divider">·</div>
-				<a
-					href="https://gradio.app"
-					class="built-with"
-					target="_blank"
-					rel="noreferrer"
-				>
-					{$_("common.built_with_gradio")}
-					<img src={logo} alt={$_("common.logo")} />
-				</a>
-			{/if}
-			<button
-				class:hidden={!$is_screen_recording}
-				on:click={() => {
-					screen_recording();
-				}}
-				class="record"
-			>
-				{$_("common.stop_recording")}
-				<img src={record_stop} alt={$_("common.stop_recording")} />
-			</button>
-			<div class="divider">·</div>
-			{#if footer_links.includes("settings")}
-				<div class="divider" class:hidden={!$is_screen_recording}>·</div>
-				<button
-					on:click={() => {
-						set_settings_visible(!settings_visible);
-					}}
-					on:mouseenter={() => {
-						loadSettings();
-					}}
-					class="settings"
-				>
-					{$_("common.settings")}
-					<img src={settings_logo} alt={$_("common.settings")} />
-				</button>
-			{/if}
-		</footer>
-	{/if}
-</div>
-
-{#if api_recorder_visible && ApiRecorder}
-	<!-- TODO: fix -->
-	<!-- svelte-ignore a11y-click-events-have-key-events-->
-	<!-- svelte-ignore a11y-no-static-element-interactions-->
-	<div
-		id="api-recorder-container"
-		on:click={() => {
-			set_api_docs_visible(true);
-			api_recorder_visible = false;
-		}}
-	>
-		<svelte:component this={ApiRecorder} {api_calls} {dependencies} />
+				<div class="divider">·</div>
+				{#if footer_links.includes("settings")}
+					<div class="divider" class:hidden={!$is_screen_recording}>·</div>
+					<button
+						on:click={() => {
+							set_settings_visible(!settings_visible);
+						}}
+						on:mouseenter={() => {
+							loadSettings();
+						}}
+						class="settings"
+					>
+						{$_("common.settings")}
+						<img src={settings_logo} alt={$_("common.settings")} />
+					</button>
+				{/if}
+			</footer>
+		{/if}
 	</div>
-{/if}
-
-{#if api_docs_visible && $_layout && ApiDocs}
-	<div class="api-docs">
+	{#if api_recorder_visible && ApiRecorder}
 		<!-- TODO: fix -->
 		<!-- svelte-ignore a11y-click-events-have-key-events-->
 		<!-- svelte-ignore a11y-no-static-element-interactions-->
 		<div
-			class="backdrop"
+			id="api-recorder-container"
 			on:click={() => {
-				set_api_docs_visible(false);
+				set_api_docs_visible(true);
+				api_recorder_visible = false;
 			}}
-		/>
-		<div class="api-docs-wrap">
-			<svelte:component
-				this={ApiDocs}
-				root_node={$_layout}
-				on:close={(event) => {
+		>
+			<svelte:component this={ApiRecorder} {api_calls} {dependencies} />
+		</div>
+	{/if}
+
+	{#if api_docs_visible && app_tree.root && ApiDocs}
+		<div class="api-docs">
+			<!-- TODO: fix -->
+			<!-- svelte-ignore a11y-click-events-have-key-events-->
+			<!-- svelte-ignore a11y-no-static-element-interactions-->
+			<div
+				class="backdrop"
+				on:click={() => {
 					set_api_docs_visible(false);
-					api_calls = [];
-					api_recorder_visible = api_recorder_visible =
-						event.detail?.api_recorder_visible;
 				}}
-				{dependencies}
-				{root}
-				{app}
-				{space_id}
-				{api_calls}
-				{username}
 			/>
+			<div class="api-docs-wrap">
+				<svelte:component
+					this={ApiDocs}
+					root_node={app_tree.root}
+					on:close={(event) => {
+						set_api_docs_visible(false);
+						api_calls = [];
+						api_recorder_visible = api_recorder_visible =
+							event.detail?.api_recorder_visible;
+					}}
+					{dependencies}
+					{root}
+					{app}
+					{space_id}
+					{api_calls}
+					{username}
+					{last_api_call}
+				/>
+			</div>
 		</div>
-	</div>
-{/if}
+	{/if}
 
-{#if settings_visible && $_layout && app.config && Settings}
-	<div class="api-docs">
-		<!-- TODO: fix -->
-		<!-- svelte-ignore a11y-click-events-have-key-events-->
-		<!-- svelte-ignore a11y-no-static-element-interactions-->
-		<div
-			class="backdrop"
-			on:click={() => {
-				set_settings_visible(false);
-			}}
-		/>
-		<div class="api-docs-wrap">
-			<svelte:component
-				this={Settings}
-				bind:allow_zoom
-				bind:allow_video_trim
-				on:close={() => {
+	{#if settings_visible && app.config && app_tree.root && Settings}
+		<div class="api-docs">
+			<!-- TODO: fix -->
+			<!-- svelte-ignore a11y-click-events-have-key-events-->
+			<!-- svelte-ignore a11y-no-static-element-interactions-->
+			<div
+				class="backdrop"
+				on:click={() => {
 					set_settings_visible(false);
 				}}
-				on:start_recording={() => {
-					screen_recording();
-				}}
-				pwa_enabled={app.config.pwa}
-				{root}
-				{space_id}
 			/>
+			<div class="api-docs-wrap">
+				<svelte:component
+					this={Settings}
+					bind:allow_zoom
+					bind:allow_video_trim
+					on:close={() => {
+						set_settings_visible(false);
+					}}
+					on:start_recording={() => {
+						screen_recording();
+					}}
+					pwa_enabled={app.config.pwa}
+					{root}
+					{space_id}
+				/>
+			</div>
 		</div>
-	</div>
-{/if}
+	{/if}
 
-{#if messages}
-	<Toast {messages} on:close={handle_error_close} />
-{/if}
+	{#if vibe_mode && VibeEditor}
+		<svelte:component this={VibeEditor} {app} {root} />
+	{/if}
+</div>
 
-{#if vibe_mode && VibeEditor}
-	<svelte:component this={VibeEditor} {app} {root} />
+{#if messages}
+	<Toast {messages} on_close={handle_close} />
 {/if}
 
 <style>