@gradio/core 0.0.2 → 0.1.0-beta.1

package/dist/src/Blocks.svelte

@@ -0,0 +1,728 @@
+<script>import { tick } from "svelte";
+import { _ } from "svelte-i18n";
+import { Client } from "@gradio/client";
+import { setupi18n } from "./i18n";
+import { ApiDocs, ApiRecorder } from "./api_docs/";
+import { Toast } from "@gradio/statustracker";
+import MountComponents from "./MountComponents.svelte";
+import logo from "./images/logo.svg";
+import api_logo from "./api_docs/img/api-logo.svg";
+import { create_components, AsyncFunction } from "./init";
+setupi18n();
+export let root;
+export let components;
+export let layout;
+export let dependencies;
+export let title = "Gradio";
+export let target;
+export let autoscroll;
+export let show_api = true;
+export let show_footer = true;
+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;
+const {
+  layout: _layout,
+  targets,
+  update_value,
+  get_data,
+  modify_stream,
+  get_stream_state,
+  set_time_limit,
+  loading_status,
+  scheduled_updates,
+  create_layout,
+  rerender_layout
+} = create_components();
+$:
+  create_layout({
+    components,
+    layout,
+    dependencies,
+    root: root + app.api_prefix,
+    app,
+    options: {
+      fill_height
+    }
+  });
+$: {
+  ready = !!$_layout;
+}
+let params = new URLSearchParams(window.location.search);
+let api_docs_visible = params.get("view") === "api" && show_api;
+let api_recorder_visible = params.get("view") === "api-recorder" && show_api;
+function set_api_docs_visible(visible) {
+  api_recorder_visible = false;
+  api_docs_visible = visible;
+  let params2 = new URLSearchParams(window.location.search);
+  if (visible) {
+    params2.set("view", "api");
+  } else {
+    params2.delete("view");
+  }
+  history.replaceState(null, "", "?" + params2.toString());
+}
+let api_calls = [];
+export let render_complete = false;
+async function handle_update(data, fn_index) {
+  const outputs = dependencies.find((dep) => dep.id == fn_index).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);
+  await tick();
+}
+let submit_map = /* @__PURE__ */ new Map();
+let messages = [];
+function new_message(message, fn_index, type, duration = 10, visible = true) {
+  return {
+    message,
+    fn_index,
+    type,
+    id: ++_error_id,
+    duration,
+    visible
+  };
+}
+export function add_new_message(message, type) {
+  messages = [new_message(message, -1, type), ...messages];
+}
+let _error_id = -1;
+let user_left_page = false;
+document.addEventListener("visibilitychange", function() {
+  if (document.visibilityState === "hidden") {
+    user_left_page = true;
+  }
+});
+const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
+const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
+const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
+const MOBILE_RECONNECT_MESSAGE = $_("blocks.lost_connection");
+const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
+const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
+const is_mobile_device = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+  navigator.userAgent
+);
+let showed_duplicate_message = false;
+let showed_mobile_warning = false;
+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) {
+        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) {
+  let dep = dependencies.find((dep2) => dep2.id === dep_index);
+  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) {
+    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;
+        make_prediction(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.trigger_mode === "once") {
+        if (!dep.pending_request)
+          make_prediction(payload, dep.connection == "stream");
+      } else if (dep.trigger_mode === "multiple") {
+        make_prediction(payload, dep.connection == "stream");
+      } else if (dep.trigger_mode === "always_last") {
+        if (!dep.pending_request) {
+          make_prediction(payload, dep.connection == "stream");
+        } else {
+          dep.final_event = payload;
+        }
+      }
+    }
+  }
+  async function make_prediction(payload2, streaming = false) {
+    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}/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;
+      messages = [new_message(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 (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.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((dep2, i) => {
+        if (dep2.rendered_in === 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,
+        dependencies,
+        render_id
+      });
+    }
+    function handle_log(msg) {
+      const { log, fn_index, level, duration, visible } = msg;
+      messages = [
+        new_message(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) {
+      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(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(MOBILE_QUEUE_WARNING, fn_index, "warning"),
+          ...messages
+        ];
+      }
+      if (status.stage === "complete") {
+        status.changed_state_ids?.forEach((id) => {
+          dependencies.filter((dep2) => dep2.targets.some(([_id, _2]) => _id === id)).forEach((dep2) => {
+            wait_then_trigger_api_call(dep2.id, payload2.trigger_id);
+          });
+        });
+        dependencies.forEach(async (dep2) => {
+          if (dep2.trigger_after === fn_index) {
+            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.broken && is_mobile_device && user_left_page) {
+        window.setTimeout(() => {
+          messages = [
+            new_message(MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
+            ...messages
+          ];
+        }, 0);
+        wait_then_trigger_api_call(dep.id, payload2.trigger_id, event_data);
+        user_left_page = false;
+      } else if (status.stage === "error") {
+        if (status.message) {
+          const _message = status.message.replace(
+            MESSAGE_QUOTE_RE,
+            (_2, b) => b
+          );
+          messages = [
+            new_message(
+              _message,
+              fn_index,
+              "error",
+              status.duration,
+              status.visible
+            ),
+            ...messages
+          ];
+        }
+        dependencies.map(async (dep2) => {
+          if (dep2.trigger_after === fn_index && !dep2.trigger_only_on_success) {
+            wait_then_trigger_api_call(dep2.id, payload2.trigger_id);
+          }
+        });
+      }
+    }
+  }
+}
+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");
+  }
+  dependencies.forEach((dep) => {
+    if (dep.targets.some((dep2) => dep2[1] === "load")) {
+      wait_then_trigger_api_call(dep.id);
+    }
+  });
+  if (render_complete)
+    return;
+  target.addEventListener("prop_change", (e) => {
+    if (!isCustomEvent(e))
+      throw new Error("not a custom event");
+    const { id, prop, value } = e.detail;
+    update_value([{ id, prop, value }]);
+  });
+  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" || event === "warning") {
+      messages = [new_message(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)) {
+          app.post_data(
+            // @ts-ignore
+            `${app.config.root}/stream/${submit_map.get(dep_id).event_id()}/close`,
+            {}
+          );
+        }
+      });
+    } else {
+      const deps = $targets[id]?.[event];
+      deps?.forEach((dep_id) => {
+        requestAnimationFrame(() => {
+          wait_then_trigger_api_call(dep_id, id, data);
+        });
+      });
+    }
+  });
+  render_complete = true;
+}
+$:
+  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]) => {
+    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;
+}
+</script>
+
+<svelte:head>
+	{#if control_page_title}
+		<title>{title}</title>
+	{/if}
+</svelte:head>
+
+<div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
+	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
+		{#if $_layout && app.config}
+			<MountComponents
+				rootNode={$_layout}
+				{root}
+				{target}
+				{theme_mode}
+				on:mount={handle_mount}
+				{version}
+				{autoscroll}
+				max_file_size={app.config.max_file_size}
+				client={app}
+			/>
+		{/if}
+	</div>
+
+	{#if show_footer}
+		<footer>
+			{#if show_api}
+				<button
+					on:click={() => {
+						set_api_docs_visible(!api_docs_visible);
+					}}
+					class="show-api"
+				>
+					{$_("errors.use_via_api")}
+					<img src={api_logo} alt={$_("common.logo")} />
+				</button>
+				<div>·</div>
+			{/if}
+			<a
+				href="https://gradio.app"
+				class="built-with"
+				target="_blank"
+				rel="noreferrer"
+			>
+				{$_("common.built_with_gradio")}
+				<img src={logo} alt={$_("common.logo")} />
+			</a>
+		</footer>
+	{/if}
+</div>
+
+{#if api_recorder_visible}
+	<!-- 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;
+		}}
+	>
+		<ApiRecorder {api_calls} {dependencies} />
+	</div>
+{/if}
+
+{#if api_docs_visible && $_layout}
+	<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);
+			}}
+		/>
+		<div class="api-docs-wrap">
+			<ApiDocs
+				root_node={$_layout}
+				on:close={(event) => {
+					set_api_docs_visible(false);
+					api_calls = [];
+					api_recorder_visible = event.detail.api_recorder_visible;
+				}}
+				{dependencies}
+				{root}
+				{app}
+				{space_id}
+				{api_calls}
+				{username}
+			/>
+		</div>
+	</div>
+{/if}
+
+{#if messages}
+	<Toast {messages} on:close={handle_error_close} />
+{/if}
+
+<style>
+	.wrap {
+		display: flex;
+		flex-grow: 1;
+		flex-direction: column;
+		width: var(--size-full);
+		font-weight: var(--body-text-weight);
+		font-size: var(--body-text-size);
+	}
+
+	.contain {
+		display: flex;
+		flex-direction: column;
+	}
+
+	footer {
+		display: flex;
+		justify-content: center;
+		margin-top: var(--size-4);
+		color: var(--body-text-color-subdued);
+	}
+
+	footer > * + * {
+		margin-left: var(--size-2);
+	}
+
+	.show-api {
+		display: flex;
+		align-items: center;
+	}
+	.show-api:hover {
+		color: var(--body-text-color);
+	}
+
+	.show-api img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-2);
+		width: var(--size-3);
+	}
+
+	.built-with {
+		display: flex;
+		align-items: center;
+	}
+
+	.built-with:hover {
+		color: var(--body-text-color);
+	}
+
+	.built-with img {
+		margin-right: var(--size-1);
+		margin-left: var(--size-1);
+		margin-bottom: 1px;
+		width: var(--size-4);
+	}
+
+	.api-docs {
+		display: flex;
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: var(--layer-top);
+		background: rgba(0, 0, 0, 0.5);
+		width: var(--size-screen);
+		height: var(--size-screen-h);
+	}
+
+	.backdrop {
+		flex: 1 1 0%;
+		-webkit-backdrop-filter: blur(4px);
+		backdrop-filter: blur(4px);
+	}
+
+	.api-docs-wrap {
+		box-shadow: var(--shadow-drop-lg);
+		background: var(--background-fill-primary);
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	@media (--screen-md) {
+		.api-docs-wrap {
+			border-top-left-radius: var(--radius-lg);
+			border-bottom-left-radius: var(--radius-lg);
+			width: 950px;
+		}
+	}
+
+	@media (--screen-xxl) {
+		.api-docs-wrap {
+			width: 1150px;
+		}
+	}
+
+	#api-recorder-container {
+		position: fixed;
+		left: 10px;
+		bottom: 10px;
+		z-index: 1000;
+	}
+</style>