@gradio/core 0.1.0-beta.1 → 0.1.0-beta.3

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @gradio/core
 
+## 0.1.0-beta.3
+
+### Features
+
+- [#9412](https://github.com/gradio-app/gradio/pull/9412) [`c2c2fd9`](https://github.com/gradio-app/gradio/commit/c2c2fd989348f826566773c07c0e0bda200199ff) - fix SSR apps on spaces.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/video@0.11.0-beta.3
+- @gradio/code@0.10.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/button@0.3.0-beta.3
+- @gradio/gallery@0.13.0-beta.3
+- @gradio/file@0.10.0-beta.3
+- @gradio/image@0.16.0-beta.3
+
+## 0.1.0-beta.2
+
+### Features
+
+- [#9323](https://github.com/gradio-app/gradio/pull/9323) [`06babda`](https://github.com/gradio-app/gradio/commit/06babda0395fd3fbd323c1c3cb33704ecfd6deb0) - Disable liking user message in chatbot by default but make it configurable.  Thanks @freddyaboulton!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9269](https://github.com/gradio-app/gradio/pull/9269) [`e05f568`](https://github.com/gradio-app/gradio/commit/e05f568f47e9fa33ef91dbbe5cc477d32762bc36) - Fix reload mode and streaming in 5.0 dev.  Thanks @freddyaboulton!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+- [#9335](https://github.com/gradio-app/gradio/pull/9335) [`b543465`](https://github.com/gradio-app/gradio/commit/b543465d06d7d1b399c4d0755da05e022611a97f) - Remove lite/theme.css from the Git-managed file tree.  Thanks @whitphx!
+
+### Fixes
+
+- [#9299](https://github.com/gradio-app/gradio/pull/9299) [`aa35b07`](https://github.com/gradio-app/gradio/commit/aa35b0788e613fdd45446d267513e6f94fa208ea) - Trigger state change event on iterators.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/gallery@0.13.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/markdown@0.10.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/plot@0.6.5-beta.2
+- @gradio/button@0.3.0-beta.2
+- @gradio/file@0.10.0-beta.2
+- @gradio/image@0.16.0-beta.2
+- @gradio/video@0.11.0-beta.2
+- @gradio/code@0.10.0-beta.2
+- @gradio/paramviewer@0.4.22-beta.2
+- @gradio/checkbox@0.4.0-beta.2
+- @gradio/column@0.2.0-beta.0
+- @gradio/textbox@0.7.0-beta.2
+- @gradio/tabs@0.3.0-beta.2
+
 ## 0.1.0-beta.1
 
 ### Features
@@ -39,33 +93,41 @@
 - [#9052](https://github.com/gradio-app/gradio/pull/9052) [`f3652eb`](https://github.com/gradio-app/gradio/commit/f3652ebe08211e12739df73c15fd97e5ff81276a) - Video gallery.  Thanks @dawoodkhan82!
 - [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
 
+## 0.0.4
+
+### Fixes
+
+- [#9188](https://github.com/gradio-app/gradio/pull/9188) [`8f8e1c6`](https://github.com/gradio-app/gradio/commit/8f8e1c6a0b09b0d1985b8377d94d693cb00f8a18) - Fix multiple trigger bug when function has js.  Thanks @freddyaboulton!
+
+## 0.0.3
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
 
 ### Dependency updates
 
-- @gradio/utils@0.7.0-beta.0
-- @gradio/statustracker@0.8.0-beta.0
-- @gradio/atoms@0.8.1-beta.0
-- @gradio/paramviewer@0.4.22-beta.0
-- @gradio/code@0.9.1-beta.0
-- @gradio/client@1.6.0-beta.0
-- @gradio/icons@0.8.0-beta.0
-- @gradio/button@0.2.51-beta.0
-- @gradio/upload@0.12.4-beta.0
-- @gradio/wasm@0.13.1-beta.0
-- @gradio/theme@0.2.5-beta.0
-- @gradio/image@0.16.0-beta.0
-- @gradio/video@0.11.0-beta.0
-- @gradio/file@0.9.4-beta.0
-- @gradio/checkbox@0.3.13-beta.0
-- @gradio/column@0.2.0-beta.0
-- @gradio/markdown@0.9.4-beta.0
-- @gradio/gallery@0.13.0-beta.0
-- @gradio/plot@0.6.5-beta.0
-- @gradio/textbox@0.7.0-beta.0
-- @gradio/tabs@0.2.14-beta.0
+- @gradio/code@0.9.1
+- @gradio/paramviewer@0.4.22
+- @gradio/utils@0.6.1
+- @gradio/statustracker@0.7.6
+- @gradio/atoms@0.8.1
+- @gradio/icons@0.7.2
+- @gradio/wasm@0.13.1
+- @gradio/client@1.5.2
+- @gradio/upload@0.12.4
+- @gradio/button@0.2.51
+- @gradio/markdown@0.9.4
+- @gradio/gallery@0.12.2
+- @gradio/theme@0.2.5
+- @gradio/plot@0.6.5
+- @gradio/textbox@0.7.0
+- @gradio/image@0.15.1
+- @gradio/video@0.10.4
+- @gradio/file@0.9.4
+- @gradio/checkbox@0.3.13
+- @gradio/column@0.1.4
+- @gradio/tabs@0.2.14
 
 ## 0.0.2
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Embed } from "./src/Embed.svelte";
 export { prefix_css, mount_css } from "./src/css";
+export { create_components } from "./src/init";
 export * from "./src/i18n";
 export * from "./src/types";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { default as Embed } from "./src/Embed.svelte";
 export { prefix_css, mount_css } from "./src/css";
+export { create_components } from "./src/init";
 export * from "./src/i18n";
 export * from "./src/types";

package/dist/src/Blocks.svelte

@@ -1,4 +1,4 @@
-<script>import { tick } from "svelte";
+<script>import { tick, onMount } from "svelte";
 import { _ } from "svelte-i18n";
 import { Client } from "@gradio/client";
 import { setupi18n } from "./i18n";
@@ -28,7 +28,10 @@ export let js;
 export let fill_height = false;
 export let ready;
 export let username;
-const {
+export let api_prefix;
+export let max_file_size;
+export let initial_layout = void 0;
+let {
   layout: _layout,
   targets,
   update_value,
@@ -41,33 +44,37 @@ const {
   create_layout,
   rerender_layout
 } = create_components();
+$_layout = initial_layout;
 $:
-  create_layout({
+  components, layout, dependencies, root, app, fill_height, target, run();
+$: {
+  ready = !!$_layout;
+}
+async function run() {
+  await create_layout({
     components,
     layout,
     dependencies,
-    root: root + app.api_prefix,
+    root: root + 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;
+export let search_params;
+let api_docs_visible = search_params.get("view") === "api" && show_api;
+let api_recorder_visible = search_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);
+  let params = new URLSearchParams(window.location.search);
   if (visible) {
-    params2.set("view", "api");
+    params.set("view", "api");
   } else {
-    params2.delete("view");
+    params.delete("view");
   }
-  history.replaceState(null, "", "?" + params2.toString());
+  history.replaceState(null, "", "?" + params.toString());
 }
 let api_calls = [];
 export let render_complete = false;
@@ -124,22 +131,17 @@ export function add_new_message(message, type) {
 }
 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 WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
 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 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 = () => {
   };
@@ -165,6 +167,14 @@ async function get_component_value_or_event_data(component_id, trigger_id, event
 }
 async function trigger_api_call(dep_index, trigger_id = null, event_data = null) {
   let dep = dependencies.find((dep2) => dep2.id === dep_index);
+  if (inputs_waiting.length > 0) {
+    for (const input of inputs_waiting) {
+      if (dep.inputs.includes(input)) {
+        add_new_message(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") {
@@ -188,7 +198,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
     ).then((v) => {
       if (dep.backend_fn) {
         payload.data = v;
-        make_prediction(payload);
+        trigger_prediction(dep, payload);
       } else {
         handle_update(v, dep_index);
       }
@@ -203,17 +213,20 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
     );
   } 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;
-        }
+      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;
       }
     }
   }
@@ -231,7 +244,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       } 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()}`,
+          `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_index).event_id()}`,
           { ...payload2, session_hash: app.session_hash }
         );
         return;
@@ -273,7 +286,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       const { data, fn_index } = message;
       if (dep.pending_request && dep.final_event) {
         dep.pending_request = false;
-        make_prediction(dep.final_event);
+        make_prediction(dep.final_event, dep.connection == "stream");
       }
       dep.pending_request = false;
       handle_update(data, fn_index);
@@ -349,12 +362,14 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
           ...messages
         ];
       }
-      if (status.stage === "complete") {
+      if (status.stage === "complete" || status.stage === "generating") {
         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);
           });
         });
+      }
+      if (status.stage === "complete") {
         dependencies.forEach(async (dep2) => {
           if (dep2.trigger_after === fn_index) {
             wait_then_trigger_api_call(dep2.id, payload2.trigger_id);
@@ -439,13 +454,19 @@ async function handle_mount() {
       wait_then_trigger_api_call(dep.id);
     }
   });
-  if (render_complete)
+  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;
     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))
@@ -464,7 +485,7 @@ async function handle_mount() {
         if (submit_map.has(dep_id)) {
           app.post_data(
             // @ts-ignore
-            `${app.config.root}/stream/${submit_map.get(dep_id).event_id()}/close`,
+            `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}/close`,
             {}
           );
         }
@@ -524,6 +545,16 @@ function set_status(statuses) {
 function isCustomEvent(event) {
   return "detail" in event;
 }
+onMount(() => {
+  document.addEventListener("visibilitychange", function() {
+    if (document.visibilityState === "hidden") {
+      user_left_page = true;
+    }
+  });
+  is_mobile_device = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+});
 </script>
 
 <svelte:head>
@@ -534,19 +565,19 @@ function isCustomEvent(event) {
 
 <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}
+		<!-- {#if $_layout} -->
+		<MountComponents
+			rootNode={$_layout}
+			{root}
+			{target}
+			{theme_mode}
+			on:mount={handle_mount}
+			{version}
+			{autoscroll}
+			{max_file_size}
+			client={app}
+		/>
+		<!-- {/if} -->
 	</div>
 
 	{#if show_footer}

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

@@ -24,6 +24,10 @@ declare const __propDef: {
         fill_height?: boolean | undefined;
         ready: boolean;
         username: string | null;
+        api_prefix: string;
+        max_file_size: number;
+        initial_layout?: LayoutNode | undefined;
+        search_params: URLSearchParams;
         render_complete?: boolean | undefined;
         add_new_message?: ((message: string, type: ToastMessage["type"]) => void) | undefined;
     };

package/dist/src/MountComponents.svelte

@@ -14,13 +14,15 @@ onMount(() => {
 });
 </script>
 
-<Render
-	node={rootNode}
-	{root}
-	{target}
-	{theme_mode}
-	{version}
-	{autoscroll}
-	{max_file_size}
-	{client}
-/>
+{#if rootNode}
+	<Render
+		node={rootNode}
+		{root}
+		{target}
+		{theme_mode}
+		{version}
+		{autoscroll}
+		{max_file_size}
+		{client}
+	/>
+{/if}

package/dist/src/Render.svelte

@@ -25,17 +25,20 @@ onMount(() => {
     }
   };
 });
-$:
-  node.children = node.children && node.children.filter((v) => {
-    const valid_node = node.type !== "statustracker";
-    if (!valid_node) {
-      filtered_children.push(v);
-    }
-    return valid_node;
-  });
+$: {
+  if (node) {
+    node.children = node.children && node.children.filter((v) => {
+      const valid_node = node.type !== "statustracker";
+      if (!valid_node) {
+        filtered_children.push(v);
+      }
+      return valid_node;
+    });
+  }
+}
 setContext("BLOCK_KEY", parent);
 $: {
-  if (node.type === "form") {
+  if (node && node.type === "form") {
     if (node.children?.every((c) => !c.props.visible)) {
       node.props.visible = false;
     } else {
@@ -44,7 +47,7 @@ $: {
   }
 }
 $:
-  gradio_class = new Gradio(
+  node.props.gradio = new Gradio(
     node.id,
     target,
     theme_mode,
@@ -59,7 +62,7 @@ $:
 </script>
 
 <RenderComponent
-	_id={node.id}
+	_id={node?.id}
 	component={node.component}
 	bind:instance={node.instance}
 	bind:value={node.props.value}
@@ -70,7 +73,6 @@ $:
 	{...node.props}
 	{theme_mode}
 	{root}
-	gradio={gradio_class}
 >
 	{#if node.children && node.children.length}
 		{#each node.children as _node (_node.id)}

package/dist/src/RenderComponent.svelte

@@ -7,7 +7,6 @@ export let target;
 export let theme_mode;
 export let instance;
 export let value;
-export let gradio;
 export let elem_id;
 export let elem_classes;
 export let _id;
@@ -19,6 +18,8 @@ function wrap(component2) {
       const props = Object.keys(instance2.$$.props);
       function report(props2) {
         return function(propargs) {
+          if (!target)
+            return;
           const ev = s(_id, props2, propargs);
           target.dispatchEvent(ev);
         };
@@ -45,7 +46,6 @@ const _component = wrap(component);
 	{...$$restProps}
 	{theme_mode}
 	{root}
-	{gradio}
 >
 	<slot />
 </svelte:component>

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import type { Gradio } from "./gradio_helper";
 import type { ComponentMeta, ThemeMode } from "./types";
 declare const __propDef: {
     props: {
@@ -10,7 +9,6 @@ declare const __propDef: {
         theme_mode: ThemeMode;
         instance: ComponentMeta["instance"];
         value: any;
-        gradio: Gradio;
         elem_id: string;
         elem_classes: string[];
         _id: number;

package/dist/src/css.js

@@ -1,5 +1,6 @@
 let supports_adopted_stylesheets = false;
-if ("attachShadow" in Element.prototype &&
+if (typeof window !== "undefined" &&
+    "attachShadow" in Element.prototype &&
     "adoptedStyleSheets" in Document.prototype) {
     // Both Shadow DOM and adoptedStyleSheets are supported
     const shadow_root_test = document

package/dist/src/init.d.ts

@@ -30,7 +30,7 @@ export declare function create_components(): {
         options: {
             fill_height: boolean;
         };
-    }) => void;
+    }) => Promise<void>;
     rerender_layout: (args: {
         render_id: number;
         components: ComponentMeta[];

package/dist/src/init.js

@@ -3,6 +3,10 @@ import { load_component } from "virtual:component-loader";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
 let pending_updates = [];
+const is_browser = typeof window !== "undefined";
+const raf = is_browser
+    ? requestAnimationFrame
+    : async (fn) => await fn();
 /**
  * Create a store with the layout and a map of targets
  * @returns A store with the layout and a map of targets
@@ -21,17 +25,19 @@ export function create_components() {
     let app;
     let keyed_component_values = {};
     let _rootNode;
-    function set_stream_every(dependencies) {
+    function set_event_specific_args(dependencies) {
         dependencies.forEach((dep) => {
             dep.targets.forEach((target) => {
                 const instance = instance_map[target[0]];
-                if (instance && dep.connection == "stream") {
-                    instance.props.stream_every = dep.stream_every;
+                if (instance && dep.event_specific_args?.length > 0) {
+                    dep.event_specific_args?.forEach((arg) => {
+                        instance.props[arg] = dep[arg];
+                    });
                 }
             });
         });
     }
-    function create_layout({ app: _app, components, layout, dependencies, root, options }) {
+    async function create_layout({ app: _app, components, layout, dependencies, root, options }) {
         // make sure the state is settled before proceeding
         flush();
         app = _app;
@@ -66,10 +72,9 @@ export function create_components() {
             acc[c.id] = c;
             return acc;
         }, {});
-        walk_layout(layout, root).then(() => {
-            layout_store.set(_rootNode);
-        });
-        set_stream_every(dependencies);
+        await walk_layout(layout, root);
+        layout_store.set(_rootNode);
+        set_event_specific_args(dependencies);
     }
     /**
      * Rerender the layout when the config has been modified to attach new components
@@ -118,7 +123,7 @@ export function create_components() {
         walk_layout(layout, root, current_element.parent).then(() => {
             layout_store.set(_rootNode);
         });
-        set_stream_every(dependencies);
+        set_event_specific_args(dependencies);
     }
     async function walk_layout(node, root, parent) {
         const instance = instance_map[node.id];
@@ -190,7 +195,7 @@ export function create_components() {
         if (!update_scheduled) {
             update_scheduled = true;
             update_scheduled_store.set(true);
-            requestAnimationFrame(flush);
+            raf(flush);
         }
     }
     function get_data(id) {
@@ -231,7 +236,7 @@ export function create_components() {
         set_time_limit,
         loading_status,
         scheduled_updates: update_scheduled_store,
-        create_layout: (...args) => requestAnimationFrame(() => create_layout(...args)),
+        create_layout: create_layout,
         rerender_layout
     };
 }

package/dist/src/lang/en.json

@@ -22,7 +22,8 @@
 	"blocks": {
 		"connection_can_break": "On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue.",
 		"long_requests_queue": "There is a long queue of requests pending. Duplicate this Space to skip.",
-		"lost_connection": "Lost connection due to leaving page. Rejoining queue..."
+		"lost_connection": "Lost connection due to leaving page. Rejoining queue...",
+		"waiting_for_inputs": "Waiting for file(s) to finish uploading, please retry."
 	},
 	"checkbox": {
 		"checkbox": "Checkbox",

package/dist/src/types.d.ts

@@ -67,6 +67,8 @@ export interface Dependency {
     connection: "stream" | "sse";
     time_limit: number;
     stream_every: number;
+    like_user_message: boolean;
+    event_specific_args: string[];
 }
 interface TypeDescription {
     input_payload?: string;

package/index.ts

@@ -1,4 +1,5 @@
 export { default as Embed } from "./src/Embed.svelte";
 export { prefix_css, mount_css } from "./src/css";
+export { create_components } from "./src/init";
 export * from "./src/i18n";
 export * from "./src/types";

package/package.json

@@ -1,64 +1,64 @@
 {
   "name": "@gradio/core",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.3",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.3.23-beta.1",
-    "@gradio/annotatedimage": "^0.7.2-beta.1",
-    "@gradio/audio": "^0.14.0-beta.1",
-    "@gradio/atoms": "^0.8.1-beta.1",
-    "@gradio/button": "^0.3.0-beta.1",
-    "@gradio/box": "^0.1.25-beta.1",
-    "@gradio/chatbot": "^0.14.0-beta.1",
-    "@gradio/checkbox": "^0.4.0-beta.1",
-    "@gradio/checkboxgroup": "^0.6.0-beta.1",
-    "@gradio/client": "^1.6.0-beta.1",
-    "@gradio/colorpicker": "^0.3.13-beta.1",
-    "@gradio/code": "^0.9.1-beta.1",
+    "@gradio/accordion": "^0.3.23-beta.2",
+    "@gradio/annotatedimage": "^0.8.0-beta.3",
+    "@gradio/audio": "^0.14.0-beta.3",
+    "@gradio/atoms": "^0.9.0-beta.2",
+    "@gradio/button": "^0.3.0-beta.3",
+    "@gradio/chatbot": "^0.14.0-beta.3",
+    "@gradio/box": "^0.2.0-beta.0",
+    "@gradio/checkbox": "^0.4.0-beta.2",
+    "@gradio/client": "^1.6.0-beta.3",
+    "@gradio/colorpicker": "^0.3.13-beta.2",
+    "@gradio/checkboxgroup": "^0.6.0-beta.2",
+    "@gradio/code": "^0.10.0-beta.3",
     "@gradio/column": "^0.2.0-beta.0",
-    "@gradio/dataframe": "^0.10.1-beta.1",
-    "@gradio/dataset": "^0.2.5-beta.1",
-    "@gradio/downloadbutton": "^0.1.28-beta.1",
-    "@gradio/datetime": "^0.1.4-beta.1",
-    "@gradio/dropdown": "^0.7.13-beta.1",
-    "@gradio/fallback": "^0.3.13-beta.1",
-    "@gradio/file": "^0.9.4-beta.1",
-    "@gradio/fileexplorer": "^0.4.19-beta.1",
-    "@gradio/form": "^0.1.25-beta.1",
-    "@gradio/gallery": "^0.13.0-beta.1",
-    "@gradio/highlightedtext": "^0.7.7-beta.1",
+    "@gradio/dataframe": "^0.11.0-beta.3",
+    "@gradio/dataset": "^0.2.5-beta.3",
+    "@gradio/datetime": "^0.1.4-beta.2",
+    "@gradio/downloadbutton": "^0.1.28-beta.3",
+    "@gradio/dropdown": "^0.7.13-beta.2",
+    "@gradio/file": "^0.10.0-beta.3",
+    "@gradio/fallback": "^0.3.13-beta.2",
+    "@gradio/fileexplorer": "^0.5.0-beta.3",
+    "@gradio/form": "^0.1.25-beta.2",
+    "@gradio/gallery": "^0.13.0-beta.3",
     "@gradio/group": "^0.2.0-beta.1",
-    "@gradio/html": "^0.3.6-beta.1",
-    "@gradio/icons": "^0.8.0-beta.1",
-    "@gradio/imageeditor": "^0.11.0-beta.1",
-    "@gradio/image": "^0.16.0-beta.1",
-    "@gradio/json": "^0.4.1-beta.1",
-    "@gradio/label": "^0.3.13-beta.1",
-    "@gradio/markdown": "^0.9.4-beta.1",
-    "@gradio/multimodaltextbox": "^0.6.0-beta.1",
-    "@gradio/model3d": "^0.12.2-beta.1",
-    "@gradio/number": "^0.4.13-beta.1",
-    "@gradio/nativeplot": "^0.3.2-beta.1",
-    "@gradio/paramviewer": "^0.4.22-beta.1",
-    "@gradio/plot": "^0.6.5-beta.1",
-    "@gradio/radio": "^0.6.0-beta.1",
-    "@gradio/row": "^0.1.5-beta.0",
-    "@gradio/simpledropdown": "^0.2.13-beta.1",
-    "@gradio/simpleimage": "^0.7.1-beta.1",
-    "@gradio/slider": "^0.5.0-beta.1",
-    "@gradio/simpletextbox": "^0.2.13-beta.1",
-    "@gradio/state": "^0.1.2-beta.0",
-    "@gradio/statustracker": "^0.8.0-beta.1",
-    "@gradio/tabitem": "^0.3.0-beta.1",
-    "@gradio/tabs": "^0.3.0-beta.1",
-    "@gradio/textbox": "^0.7.0-beta.1",
+    "@gradio/highlightedtext": "^0.7.7-beta.2",
+    "@gradio/html": "^0.4.0-beta.2",
+    "@gradio/image": "^0.16.0-beta.3",
+    "@gradio/icons": "^0.8.0-beta.2",
+    "@gradio/imageeditor": "^0.11.0-beta.3",
+    "@gradio/label": "^0.3.13-beta.2",
+    "@gradio/markdown": "^0.10.0-beta.2",
+    "@gradio/json": "^0.5.0-beta.2",
+    "@gradio/model3d": "^0.13.0-beta.3",
+    "@gradio/multimodaltextbox": "^0.6.0-beta.3",
+    "@gradio/number": "^0.4.13-beta.2",
+    "@gradio/paramviewer": "^0.4.22-beta.2",
+    "@gradio/plot": "^0.6.5-beta.2",
+    "@gradio/radio": "^0.6.0-beta.2",
+    "@gradio/row": "^0.2.0-beta.1",
+    "@gradio/simpledropdown": "^0.2.13-beta.2",
+    "@gradio/nativeplot": "^0.4.0-beta.2",
+    "@gradio/simpletextbox": "^0.2.13-beta.2",
+    "@gradio/state": "^0.1.2",
+    "@gradio/slider": "^0.5.0-beta.2",
+    "@gradio/statustracker": "^0.8.0-beta.2",
+    "@gradio/simpleimage": "^0.8.0-beta.3",
+    "@gradio/tabs": "^0.3.0-beta.2",
+    "@gradio/textbox": "^0.7.0-beta.2",
     "@gradio/theme": "^0.3.0-beta.1",
-    "@gradio/timer": "^0.3.3-beta.1",
-    "@gradio/upload": "^0.12.4-beta.1",
-    "@gradio/uploadbutton": "^0.6.19-beta.1",
-    "@gradio/utils": "^0.7.0-beta.1",
-    "@gradio/video": "^0.11.0-beta.1",
-    "@gradio/wasm": "^0.13.1-beta.1"
+    "@gradio/uploadbutton": "^0.7.0-beta.3",
+    "@gradio/video": "^0.11.0-beta.3",
+    "@gradio/tabitem": "^0.3.0-beta.2",
+    "@gradio/timer": "^0.3.3-beta.2",
+    "@gradio/utils": "^0.7.0-beta.2",
+    "@gradio/wasm": "^0.14.0-beta.2",
+    "@gradio/upload": "^0.13.0-beta.3"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from "svelte";
+	import { tick, onMount } from "svelte";
 	import { _ } from "svelte-i18n";
 	import { Client } from "@gradio/client";
 
@@ -45,8 +45,11 @@
 	export let fill_height = false;
 	export let ready: boolean;
 	export let username: string | null;
+	export let api_prefix: string;
+	export let max_file_size: number;
+	export let initial_layout: LayoutNode | undefined = undefined;
 
-	const {
+	let {
 		layout: _layout,
 		targets,
 		update_value,
@@ -60,24 +63,32 @@
 		rerender_layout
 	} = create_components();
 
-	$: create_layout({
-		components,
-		layout,
-		dependencies,
-		root: root + app.api_prefix,
-		app,
-		options: {
-			fill_height
-		}
-	});
+	// @ts-ignore
+	$_layout = initial_layout;
+
+	$: components, layout, dependencies, root, app, fill_height, target, run();
 
 	$: {
 		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;
+	async function run(): Promise<void> {
+		await create_layout({
+			components,
+			layout,
+			dependencies,
+			root: root + api_prefix,
+			app,
+			options: {
+				fill_height
+			}
+		});
+	}
+
+	export let search_params: URLSearchParams;
+	let api_docs_visible = search_params.get("view") === "api" && show_api;
+	let api_recorder_visible =
+		search_params.get("view") === "api-recorder" && show_api;
 	function set_api_docs_visible(visible: boolean): void {
 		api_recorder_visible = false;
 		api_docs_visible = visible;
@@ -169,25 +180,19 @@
 	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 WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
 	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 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
 	function wait_then_trigger_api_call(
@@ -233,7 +238,14 @@
 		event_data: unknown = null
 	): Promise<void> {
 		let dep = dependencies.find((dep) => dep.id === dep_index)!;
-
+		if (inputs_waiting.length > 0) {
+			for (const input of inputs_waiting) {
+				if (dep.inputs.includes(input)) {
+					add_new_message(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") {
@@ -261,7 +273,7 @@
 				.then((v: unknown[]) => {
 					if (dep.backend_fn) {
 						payload.data = v;
-						make_prediction(payload);
+						trigger_prediction(dep, payload);
 					} else {
 						handle_update(v, dep_index);
 					}
@@ -276,17 +288,21 @@
 			);
 		} 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") {
+				trigger_prediction(dep, payload);
+			}
+		}
+
+		function trigger_prediction(dep: Dependency, payload: Payload): void {
+			if (dep.trigger_mode === "once") {
+				if (!dep.pending_request)
 					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;
-					}
+			} 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;
 				}
 			}
 		}
@@ -315,7 +331,7 @@
 				) {
 					await app.post_data(
 						// @ts-ignore
-						`${app.config.root}/stream/${submit_map.get(dep_index).event_id()}`,
+						`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_index).event_id()}`,
 						{ ...payload, session_hash: app.session_hash }
 					);
 					return;
@@ -360,7 +376,7 @@
 				const { data, fn_index } = message;
 				if (dep.pending_request && dep.final_event) {
 					dep.pending_request = false;
-					make_prediction(dep.final_event);
+					make_prediction(dep.final_event, dep.connection == "stream");
 				}
 				dep.pending_request = false;
 				handle_update(data, fn_index);
@@ -417,6 +433,7 @@
 				}
 			}
 
+			/* eslint-disable complexity */
 			function handle_status_update(message: StatusMessage): void {
 				const { fn_index, ...status } = message;
 				if (status.stage === "streaming" && status.time_limit) {
@@ -463,7 +480,7 @@
 					];
 				}
 
-				if (status.stage === "complete") {
+				if (status.stage === "complete" || status.stage === "generating") {
 					status.changed_state_ids?.forEach((id) => {
 						dependencies
 							.filter((dep) => dep.targets.some(([_id, _]) => _id === id))
@@ -471,6 +488,8 @@
 								wait_then_trigger_api_call(dep.id, payload.trigger_id);
 							});
 					});
+				}
+				if (status.stage === "complete") {
 					dependencies.forEach(async (dep) => {
 						if (dep.trigger_after === fn_index) {
 							wait_then_trigger_api_call(dep.id, payload.trigger_id);
@@ -519,6 +538,7 @@
 			}
 		}
 	}
+	/* eslint-enable complexity */
 
 	function trigger_share(title: string | undefined, description: string): void {
 		if (space_id === null) {
@@ -571,12 +591,18 @@
 			}
 		});
 
-		if (render_complete) return;
+		if (!target || render_complete) return;
 
 		target.addEventListener("prop_change", (e: Event) => {
 			if (!isCustomEvent(e)) throw new Error("not a custom event");
 			const { id, prop, value } = e.detail;
 			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: Event) => {
 			if (!isCustomEvent(e)) throw new Error("not a custom event");
@@ -596,7 +622,7 @@
 					if (submit_map.has(dep_id)) {
 						app.post_data(
 							// @ts-ignore
-							`${app.config.root}/stream/${submit_map.get(dep_id).event_id()}/close`,
+							`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}/close`,
 							{}
 						);
 					}
@@ -671,6 +697,19 @@
 	function isCustomEvent(event: Event): event is CustomEvent {
 		return "detail" in event;
 	}
+
+	onMount(() => {
+		document.addEventListener("visibilitychange", function () {
+			if (document.visibilityState === "hidden") {
+				user_left_page = true;
+			}
+		});
+
+		is_mobile_device =
+			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+				navigator.userAgent
+			);
+	});
 </script>
 
 <svelte:head>
@@ -681,19 +720,19 @@
 
 <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}
+		<!-- {#if $_layout} -->
+		<MountComponents
+			rootNode={$_layout}
+			{root}
+			{target}
+			{theme_mode}
+			on:mount={handle_mount}
+			{version}
+			{autoscroll}
+			{max_file_size}
+			client={app}
+		/>
+		<!-- {/if} -->
 	</div>
 
 	{#if show_footer}

package/src/MountComponents.svelte

@@ -18,13 +18,15 @@
 	});
 </script>
 
-<Render
-	node={rootNode}
-	{root}
-	{target}
-	{theme_mode}
-	{version}
-	{autoscroll}
-	{max_file_size}
-	{client}
-/>
+{#if rootNode}
+	<Render
+		node={rootNode}
+		{root}
+		{target}
+		{theme_mode}
+		{version}
+		{autoscroll}
+		{max_file_size}
+		{client}
+	/>
+{/if}

package/src/Render.svelte

@@ -36,20 +36,24 @@
 		};
 	});
 
-	$: node.children =
-		node.children &&
-		node.children.filter((v) => {
-			const valid_node = node.type !== "statustracker";
-			if (!valid_node) {
-				filtered_children.push(v);
-			}
-			return valid_node;
-		});
+	$: {
+		if (node) {
+			node.children =
+				node.children &&
+				node.children.filter((v) => {
+					const valid_node = node.type !== "statustracker";
+					if (!valid_node) {
+						filtered_children.push(v);
+					}
+					return valid_node;
+				});
+		}
+	}
 
 	setContext("BLOCK_KEY", parent);
 
 	$: {
-		if (node.type === "form") {
+		if (node && node.type === "form") {
 			if (node.children?.every((c) => !c.props.visible)) {
 				node.props.visible = false;
 			} else {
@@ -58,7 +62,7 @@
 		}
 	}
 
-	$: gradio_class = new Gradio<Record<string, any>>(
+	$: node.props.gradio = new Gradio<Record<string, any>>(
 		node.id,
 		target,
 		theme_mode,
@@ -73,7 +77,7 @@
 </script>
 
 <RenderComponent
-	_id={node.id}
+	_id={node?.id}
 	component={node.component}
 	bind:instance={node.instance}
 	bind:value={node.props.value}
@@ -84,7 +88,6 @@
 	{...node.props}
 	{theme_mode}
 	{root}
-	gradio={gradio_class}
 >
 	{#if node.children && node.children.length}
 		{#each node.children as _node (_node.id)}

package/src/RenderComponent.svelte

@@ -13,7 +13,7 @@
 	export let theme_mode: ThemeMode;
 	export let instance: ComponentMeta["instance"];
 	export let value: any;
-	export let gradio: Gradio;
+	// export let gradio: Gradio;
 	export let elem_id: string;
 	export let elem_classes: string[];
 	export let _id: number;
@@ -32,6 +32,7 @@
 
 				function report(props: string) {
 					return function (propargs: any) {
+						if (!target) return;
 						const ev = s(_id, props, propargs);
 						target.dispatchEvent(ev);
 					};
@@ -61,7 +62,6 @@
 	{...$$restProps}
 	{theme_mode}
 	{root}
-	{gradio}
 >
 	<slot />
 </svelte:component>

package/src/css.ts

@@ -1,6 +1,7 @@
 let supports_adopted_stylesheets = false;
 
 if (
+	typeof window !== "undefined" &&
 	"attachShadow" in Element.prototype &&
 	"adoptedStyleSheets" in Document.prototype
 ) {

package/src/init.ts

@@ -18,6 +18,10 @@ export interface UpdateTransaction {
 }
 
 let pending_updates: UpdateTransaction[][] = [];
+const is_browser = typeof window !== "undefined";
+const raf = is_browser
+	? requestAnimationFrame
+	: async (fn: () => Promise<void> | void) => await fn();
 
 /**
  * Create a store with the layout and a map of targets
@@ -42,7 +46,7 @@ export function create_components(): {
 		options: {
 			fill_height: boolean;
 		};
-	}) => void;
+	}) => Promise<void>;
 	rerender_layout: (args: {
 		render_id: number;
 		components: ComponentMeta[];
@@ -67,18 +71,20 @@ export function create_components(): {
 	let keyed_component_values: Record<string | number, any> = {};
 	let _rootNode: ComponentMeta;
 
-	function set_stream_every(dependencies: Dependency[]): void {
+	function set_event_specific_args(dependencies: Dependency[]): void {
 		dependencies.forEach((dep) => {
 			dep.targets.forEach((target) => {
 				const instance = instance_map[target[0]];
-				if (instance && dep.connection == "stream") {
-					instance.props.stream_every = dep.stream_every;
+				if (instance && dep.event_specific_args?.length > 0) {
+					dep.event_specific_args?.forEach((arg: string) => {
+						instance.props[arg] = dep[arg as keyof Dependency];
+					});
 				}
 			});
 		});
 	}
 
-	function create_layout({
+	async function create_layout({
 		app: _app,
 		components,
 		layout,
@@ -94,7 +100,7 @@ export function create_components(): {
 		options: {
 			fill_height: boolean;
 		};
-	}): void {
+	}): Promise<void> {
 		// make sure the state is settled before proceeding
 		flush();
 		app = _app;
@@ -146,11 +152,10 @@ export function create_components(): {
 			{} as { [id: number]: ComponentMeta }
 		);
 
-		walk_layout(layout, root).then(() => {
-			layout_store.set(_rootNode);
-		});
+		await walk_layout(layout, root);
 
-		set_stream_every(dependencies);
+		layout_store.set(_rootNode);
+		set_event_specific_args(dependencies);
 	}
 
 	/**
@@ -227,7 +232,7 @@ export function create_components(): {
 			layout_store.set(_rootNode);
 		});
 
-		set_stream_every(dependencies);
+		set_event_specific_args(dependencies);
 	}
 
 	async function walk_layout(
@@ -333,7 +338,7 @@ export function create_components(): {
 		if (!update_scheduled) {
 			update_scheduled = true;
 			update_scheduled_store.set(true);
-			requestAnimationFrame(flush);
+			raf(flush);
 		}
 	}
 
@@ -384,8 +389,7 @@ export function create_components(): {
 		set_time_limit,
 		loading_status,
 		scheduled_updates: update_scheduled_store,
-		create_layout: (...args) =>
-			requestAnimationFrame(() => create_layout(...args)),
+		create_layout: create_layout,
 		rerender_layout
 	};
 }

package/src/lang/en.json

@@ -22,7 +22,8 @@
 	"blocks": {
 		"connection_can_break": "On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue.",
 		"long_requests_queue": "There is a long queue of requests pending. Duplicate this Space to skip.",
-		"lost_connection": "Lost connection due to leaving page. Rejoining queue..."
+		"lost_connection": "Lost connection due to leaving page. Rejoining queue...",
+		"waiting_for_inputs": "Waiting for file(s) to finish uploading, please retry."
 	},
 	"checkbox": {
 		"checkbox": "Checkbox",

package/src/types.ts

@@ -72,6 +72,8 @@ export interface Dependency {
 	connection: "stream" | "sse";
 	time_limit: number;
 	stream_every: number;
+	like_user_message: boolean;
+	event_specific_args: string[];
 }
 
 interface TypeDescription {