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

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @gradio/core
 
+## 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 +76,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,20 +213,25 @@ 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;
       }
     }
   }
+  $:
+    console.log({ app });
   async function make_prediction(payload2, streaming = false) {
     if (api_recorder_visible) {
       api_calls = [...api_calls, JSON.parse(JSON.stringify(payload2))];
@@ -231,7 +246,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 +288,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 +364,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 +456,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 +487,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 +547,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 +567,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";