@gradio/core 0.1.0-beta.4 → 0.1.0-beta.6

package/CHANGELOG.md

@@ -1,5 +1,90 @@
 # @gradio/core
 
+## 0.1.0-beta.6
+
+### Features
+
+- [#9590](https://github.com/gradio-app/gradio/pull/9590) [`e853c41`](https://github.com/gradio-app/gradio/commit/e853c413583d91186aef3aceb0849d0ec0494834) - SSR e2e + fixes.  Thanks @pngwn!
+- [#9575](https://github.com/gradio-app/gradio/pull/9575) [`4ec2feb`](https://github.com/gradio-app/gradio/commit/4ec2feb04e452d2c77482c09543c59948567be67) - Update gr.Dataframe UI with action popover.  Thanks @hannahblair!
+- [#9576](https://github.com/gradio-app/gradio/pull/9576) [`430a26a`](https://github.com/gradio-app/gradio/commit/430a26a4fbcbabb5e9ddb6173bf658a00960e88e) - Fix reload mode.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/code@0.10.0-beta.8
+- @gradio/paramviewer@0.4.22-beta.5
+- @gradio/tabitem@0.3.0-beta.4
+- @gradio/tabs@0.3.0-beta.3
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/image@0.16.0-beta.7
+- @gradio/video@0.11.0-beta.7
+- @gradio/button@0.3.0-beta.7
+- @gradio/markdown@0.10.0-beta.5
+- @gradio/gallery@0.13.0-beta.7
+- @gradio/plot@0.7.0-beta.6
+- @gradio/column@0.2.0-beta.2
+- @gradio/textbox@0.7.0-beta.5
+- @gradio/checkbox@0.4.0-beta.5
+- @gradio/file@0.10.0-beta.7
+
+## 0.1.0-beta.5
+
+### Features
+
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/tabitem@0.3.0-beta.4
+- @gradio/code@0.10.0-beta.7
+- @gradio/paramviewer@0.4.22-beta.4
+- @gradio/video@0.11.0-beta.6
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/image@0.16.0-beta.6
+- @gradio/gallery@0.13.0-beta.6
+- @gradio/markdown@0.10.0-beta.4
+- @gradio/plot@0.7.0-beta.5
+- @gradio/column@0.2.0-beta.2
+- @gradio/button@0.3.0-beta.6
+- @gradio/textbox@0.7.0-beta.4
+- @gradio/checkbox@0.4.0-beta.4
+- @gradio/file@0.10.0-beta.6
+
+## 0.1.0-beta.4
+
+### Dependency updates
+
+- @gradio/code@0.10.0-beta.6
+
+## 0.1.0-beta.4
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/video@0.11.0-beta.5
+- @gradio/tabs@0.3.0-beta.3
+- @gradio/column@0.2.0-beta.1
+- @gradio/tabitem@0.3.0-beta.3
+- @gradio/code@0.10.0-beta.5
+- @gradio/paramviewer@0.4.22-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/button@0.3.0-beta.5
+- @gradio/markdown@0.10.0-beta.3
+- @gradio/gallery@0.13.0-beta.5
+- @gradio/plot@0.7.0-beta.4
+- @gradio/file@0.10.0-beta.5
+- @gradio/checkbox@0.4.0-beta.3
+- @gradio/image@0.16.0-beta.5
+- @gradio/textbox@0.7.0-beta.3
+
 ## 0.1.0-beta.4
 
 ### Features
@@ -118,6 +203,13 @@
 
 ## 0.0.4
 
+### Dependency updates
+
+- @gradio/code@0.9.1
+- @gradio/paramviewer@0.4.22
+
+## 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!

package/dist/src/Blocks.svelte

@@ -5,6 +5,7 @@ import { setupi18n } from "./i18n";
 import { ApiDocs, ApiRecorder } from "./api_docs/";
 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 { create_components, AsyncFunction } from "./init";
@@ -31,6 +32,7 @@ export let username;
 export let api_prefix = "";
 export let max_file_size = void 0;
 export let initial_layout = void 0;
+export let css = null;
 let {
   layout: _layout,
   targets,
@@ -43,8 +45,7 @@ let {
   scheduled_updates,
   create_layout,
   rerender_layout
-} = create_components();
-$_layout = initial_layout;
+} = create_components(initial_layout);
 $:
   components, layout, dependencies, root, app, fill_height, target, run();
 $: {
@@ -151,8 +152,10 @@ function wait_then_trigger_api_call(dep_index, trigger_id = null, event_data = n
   if ($scheduled_updates) {
     _unsub = scheduled_updates.subscribe((updating) => {
       if (!updating) {
-        trigger_api_call(dep_index, trigger_id, event_data);
-        unsub();
+        tick().then(() => {
+          trigger_api_call(dep_index, trigger_id, event_data);
+          unsub();
+        });
       }
     });
   } else {
@@ -242,7 +245,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) === "waiting")) {
         return;
       } else if (submit_map.has(dep_index) && dep.inputs.some((id) => get_stream_state(id) === "open")) {
-        await app.post_data(
+        await app.send_ws_message(
           // @ts-ignore
           `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_index).event_id()}`,
           { ...payload2, session_hash: app.session_hash }
@@ -483,11 +486,9 @@ async function handle_mount() {
       const deps = $targets[id]?.[data];
       deps?.forEach((dep_id) => {
         if (submit_map.has(dep_id)) {
-          app.post_data(
-            // @ts-ignore
-            `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}/close`,
-            {}
-          );
+          const url = `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}`;
+          app.post_data(`${url}/close`, {});
+          app.close_ws(url);
         }
       });
     } else {
@@ -561,23 +562,26 @@ onMount(() => {
 	{#if control_page_title}
 		<title>{title}</title>
 	{/if}
+	{#if css}
+		{@html `\<style\>${prefix_css(css, version)}</style>`}
+	{/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} -->
-		<MountComponents
-			rootNode={$_layout}
-			{root}
-			{target}
-			{theme_mode}
-			on:mount={handle_mount}
-			{version}
-			{autoscroll}
-			{max_file_size}
-			client={app}
-		/>
-		<!-- {/if} -->
+		{#if $_layout && app.config}
+			<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

@@ -26,7 +26,8 @@ declare const __propDef: {
         username: string | null;
         api_prefix?: string | undefined;
         max_file_size?: number | undefined;
-        initial_layout?: LayoutNode | undefined;
+        initial_layout?: ComponentMeta | undefined;
+        css?: string | null | undefined;
         search_params: URLSearchParams;
         render_complete?: boolean | undefined;
         add_new_message?: ((message: string, type: ToastMessage["type"]) => void) | undefined;

package/dist/src/Login.svelte

@@ -46,6 +46,7 @@ const submit = async () => {
 		<Form>
 			<Block>
 				<Textbox
+					{root}
 					label="username"
 					lines={1}
 					show_label={true}
@@ -57,6 +58,7 @@ const submit = async () => {
 
 			<Block>
 				<Textbox
+					{root}
 					label="password"
 					lines={1}
 					show_label={true}

package/dist/src/api_docs/ParametersSnippet.svelte

@@ -39,7 +39,7 @@ export let current_language;
 				The input value that is provided in the "{label}" <!--
 	-->{component}
 				component<!--
-	-->.
+	-->. {python_type.description}
 			</p>
 		</div>
 	{/each}

package/dist/src/css.d.ts

@@ -1,2 +1,2 @@
 export declare function mount_css(url: string, target: HTMLElement): Promise<void>;
-export declare function prefix_css(string: string, version: string, style_element?: HTMLStyleElement): HTMLStyleElement | null;
+export declare function prefix_css(string: string, version: string, style_element?: HTMLStyleElement): string | null;

package/dist/src/css.js

@@ -26,9 +26,12 @@ export function mount_css(url, target) {
         target.appendChild(link);
     });
 }
-export function prefix_css(string, version, style_element = document.createElement("style")) {
+export function prefix_css(string, version, style_element) {
     if (!supports_adopted_stylesheets)
-        return null;
+        return string;
+    if (!style_element) {
+        style_element = document.createElement("style");
+    }
     style_element.remove();
     const stylesheet = new CSSStyleSheet();
     stylesheet.replaceSync(string);
@@ -39,7 +42,7 @@ export function prefix_css(string, version, style_element = document.createEleme
     });
     const rules = stylesheet.cssRules;
     let css_string = "";
-    let gradio_css_infix = `gradio-app .gradio-container.gradio-container-${version} .contain `;
+    let gradio_css_infix = `.gradio-container.gradio-container-${version} .contain `;
     for (let i = 0; i < rules.length; i++) {
         const rule = rules[i];
         let is_dark_rule = rule.cssText.includes(".dark");
@@ -87,8 +90,5 @@ export function prefix_css(string, version, style_element = document.createEleme
             css_string += `@font-face { ${rule.style.cssText} }`;
         }
     }
-    css_string = importString + css_string;
-    style_element.textContent = css_string;
-    document.head.appendChild(style_element);
-    return style_element;
+    return importString + css_string;
 }

package/dist/src/init.d.ts

@@ -11,7 +11,7 @@ export interface UpdateTransaction {
  * Create a store with the layout and a map of targets
  * @returns A store with the layout and a map of targets
  */
-export declare function create_components(): {
+export declare function create_components(initial_layout: ComponentMeta | undefined): {
     layout: Writable<ComponentMeta>;
     targets: Writable<TargetMap>;
     update_value: (updates: UpdateTransaction[]) => void;

package/dist/src/init.js

@@ -11,7 +11,7 @@ const raf = is_browser
  * Create a store with the layout and a map of targets
  * @returns A store with the layout and a map of targets
  */
-export function create_components() {
+export function create_components(initial_layout) {
     let _component_map;
     let target_map = writable({});
     let _target_map = {};
@@ -20,7 +20,7 @@ export function create_components() {
     let constructor_map;
     let instance_map;
     let loading_status = create_loading_status_store();
-    const layout_store = writable();
+    const layout_store = writable(initial_layout);
     let _components = [];
     let app;
     let keyed_component_values = {};
@@ -199,7 +199,11 @@ export function create_components() {
         }
     }
     function get_data(id) {
-        const comp = _component_map.get(id);
+        let comp = _component_map.get(id);
+        if (!comp) {
+            const layout = get(layout_store);
+            comp = findComponentById(layout, id);
+        }
         if (!comp) {
             return null;
         }
@@ -208,6 +212,20 @@ export function create_components() {
         }
         return comp.props.value;
     }
+    function findComponentById(node, id) {
+        if (node.id === id) {
+            return node;
+        }
+        if (node.children) {
+            for (const child of node.children) {
+                const result = findComponentById(child, id);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
     function modify_stream(id, state) {
         const comp = _component_map.get(id);
         if (comp && comp.instance.modify_stream_state) {

package/dist/src/lang/en.json

@@ -55,8 +55,12 @@
 	},
 	"dataframe": {
 		"incorrect_format": "Incorrect format, only CSV and TSV files are supported",
-		"new_column": "New column",
-		"new_row": "New row"
+		"new_column": "Add column",
+		"new_row": "New row",
+		"add_row_above": "Add row above",
+		"add_row_below": "Add row below",
+		"add_column_left": "Add column to the left",
+		"add_column_right": "Add column to the right"
 	},
 	"dropdown": {
 		"dropdown": "Dropdown"

package/package.json

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

package/src/Blocks.svelte

@@ -14,6 +14,7 @@
 	import type { ToastMessage } from "@gradio/statustracker";
 	import type { ShareData, ValueData } from "@gradio/utils";
 	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";
@@ -47,8 +48,8 @@
 	export let username: string | null;
 	export let api_prefix = "";
 	export let max_file_size: number | undefined = undefined;
-	export let initial_layout: LayoutNode | undefined = undefined;
-
+	export let initial_layout: ComponentMeta | undefined = undefined;
+	export let css: string | null | undefined = null;
 	let {
 		layout: _layout,
 		targets,
@@ -61,10 +62,7 @@
 		scheduled_updates,
 		create_layout,
 		rerender_layout
-	} = create_components();
-
-	// @ts-ignore
-	$_layout = initial_layout;
+	} = create_components(initial_layout);
 
 	$: components, layout, dependencies, root, app, fill_height, target, run();
 
@@ -207,8 +205,10 @@
 		if ($scheduled_updates) {
 			_unsub = scheduled_updates.subscribe((updating) => {
 				if (!updating) {
-					trigger_api_call(dep_index, trigger_id, event_data);
-					unsub();
+					tick().then(() => {
+						trigger_api_call(dep_index, trigger_id, event_data);
+						unsub();
+					});
 				}
 			});
 		} else {
@@ -329,7 +329,7 @@
 					submit_map.has(dep_index) &&
 					dep.inputs.some((id) => get_stream_state(id) === "open")
 				) {
-					await app.post_data(
+					await app.send_ws_message(
 						// @ts-ignore
 						`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_index).event_id()}`,
 						{ ...payload, session_hash: app.session_hash }
@@ -620,11 +620,10 @@
 				const deps = $targets[id]?.[data];
 				deps?.forEach((dep_id) => {
 					if (submit_map.has(dep_id)) {
-						app.post_data(
-							// @ts-ignore
-							`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}/close`,
-							{}
-						);
+						// @ts-ignore
+						const url = `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}`;
+						app.post_data(`${url}/close`, {});
+						app.close_ws(url);
 					}
 				});
 			} else {
@@ -716,23 +715,26 @@
 	{#if control_page_title}
 		<title>{title}</title>
 	{/if}
+	{#if css}
+		{@html `\<style\>${prefix_css(css, version)}</style>`}
+	{/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} -->
-		<MountComponents
-			rootNode={$_layout}
-			{root}
-			{target}
-			{theme_mode}
-			on:mount={handle_mount}
-			{version}
-			{autoscroll}
-			{max_file_size}
-			client={app}
-		/>
-		<!-- {/if} -->
+		{#if $_layout && app.config}
+			<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/Login.svelte

@@ -50,6 +50,7 @@
 		<Form>
 			<Block>
 				<Textbox
+					{root}
 					label="username"
 					lines={1}
 					show_label={true}
@@ -61,6 +62,7 @@
 
 			<Block>
 				<Textbox
+					{root}
 					label="password"
 					lines={1}
 					show_label={true}

package/src/api_docs/ParametersSnippet.svelte

@@ -41,7 +41,7 @@
 				The input value that is provided in the "{label}" <!--
 	-->{component}
 				component<!--
-	-->.
+	-->. {python_type.description}
 			</p>
 		</div>
 	{/each}

package/src/css.ts

@@ -36,9 +36,12 @@ export function mount_css(url: string, target: HTMLElement): Promise<void> {
 export function prefix_css(
 	string: string,
 	version: string,
-	style_element = document.createElement("style")
-): HTMLStyleElement | null {
-	if (!supports_adopted_stylesheets) return null;
+	style_element?: HTMLStyleElement
+): string | null {
+	if (!supports_adopted_stylesheets) return string;
+	if (!style_element) {
+		style_element = document.createElement("style");
+	}
 	style_element.remove();
 
 	const stylesheet = new CSSStyleSheet();
@@ -53,7 +56,7 @@ export function prefix_css(
 	const rules = stylesheet.cssRules;
 
 	let css_string = "";
-	let gradio_css_infix = `gradio-app .gradio-container.gradio-container-${version} .contain `;
+	let gradio_css_infix = `.gradio-container.gradio-container-${version} .contain `;
 
 	for (let i = 0; i < rules.length; i++) {
 		const rule = rules[i];
@@ -109,9 +112,5 @@ export function prefix_css(
 			css_string += `@font-face { ${rule.style.cssText} }`;
 		}
 	}
-	css_string = importString + css_string;
-	style_element.textContent = css_string;
-
-	document.head.appendChild(style_element);
-	return style_element;
+	return importString + css_string;
 }

package/src/init.test.ts

@@ -481,14 +481,17 @@ describe("get_component", () => {
 		const id = "test-random";
 		const variant = "component";
 		const handlers = [
-			http.get(`${api_url}/custom_component/${id}/${variant}/style.css`, () => {
-				return new HttpResponse('console.log("boo")', {
-					status: 200,
-					headers: {
-						"Content-Type": "text/css"
-					}
-				});
-			})
+			http.get(
+				`${api_url}/custom_component/${id}/client/${variant}/style.css`,
+				() => {
+					return new HttpResponse('console.log("boo")', {
+						status: 200,
+						headers: {
+							"Content-Type": "text/css"
+						}
+					});
+				}
+			)
 		];
 
 		// vi.mock calls are always hoisted out of the test function to the top of the file
@@ -498,7 +501,7 @@ describe("get_component", () => {
 		});
 
 		vi.mock(
-			`example.com/custom_component/test-random/component/index.js`,
+			`example.com/custom_component/test-random/client/component/index.js`,
 			async () => {
 				mock();
 				return {

package/src/init.ts

@@ -27,7 +27,7 @@ const raf = is_browser
  * Create a store with the layout and a map of targets
  * @returns A store with the layout and a map of targets
  */
-export function create_components(): {
+export function create_components(initial_layout: ComponentMeta | undefined): {
 	layout: Writable<ComponentMeta>;
 	targets: Writable<TargetMap>;
 	update_value: (updates: UpdateTransaction[]) => void;
@@ -65,7 +65,7 @@ export function create_components(): {
 	let instance_map: { [id: number]: ComponentMeta };
 	let loading_status: ReturnType<typeof create_loading_status_store> =
 		create_loading_status_store();
-	const layout_store: Writable<ComponentMeta> = writable();
+	const layout_store: Writable<ComponentMeta> = writable(initial_layout);
 	let _components: ComponentMeta[] = [];
 	let app: client_return;
 	let keyed_component_values: Record<string | number, any> = {};
@@ -341,9 +341,12 @@ export function create_components(): {
 			raf(flush);
 		}
 	}
-
 	function get_data(id: number): any | Promise<any> {
-		const comp = _component_map.get(id);
+		let comp = _component_map.get(id);
+		if (!comp) {
+			const layout = get(layout_store);
+			comp = findComponentById(layout, id);
+		}
 		if (!comp) {
 			return null;
 		}
@@ -353,6 +356,24 @@ export function create_components(): {
 		return comp.props.value;
 	}
 
+	function findComponentById(
+		node: ComponentMeta,
+		id: number
+	): ComponentMeta | undefined {
+		if (node.id === id) {
+			return node;
+		}
+		if (node.children) {
+			for (const child of node.children) {
+				const result = findComponentById(child, id);
+				if (result) {
+					return result;
+				}
+			}
+		}
+		return undefined;
+	}
+
 	function modify_stream(
 		id: number,
 		state: "open" | "closed" | "waiting"

package/src/lang/en.json

@@ -55,8 +55,12 @@
 	},
 	"dataframe": {
 		"incorrect_format": "Incorrect format, only CSV and TSV files are supported",
-		"new_column": "New column",
-		"new_row": "New row"
+		"new_column": "Add column",
+		"new_row": "New row",
+		"add_row_above": "Add row above",
+		"add_row_below": "Add row below",
+		"add_column_left": "Add column to the left",
+		"add_column_right": "Add column to the right"
 	},
 	"dropdown": {
 		"dropdown": "Dropdown"