Only render visible components

.changeset/fuzzy-webs-change.md

@@ -0,0 +1,12 @@
+---
+"@gradio/atoms": minor
+"@gradio/core": minor
+"@gradio/imageeditor": minor
+"@gradio/markdown": minor
+"@gradio/markdown-code": minor
+"@gradio/tabitem": minor
+"@gradio/tabs": minor
+"gradio": minor
+---
+
+feat:Only render visible components

demo/render_visibility/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: render_visibility"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "\n", "def greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tabs():\n", "        with gr.TabItem(\"Tab 1\"):\n", "            t = gr.Textbox(\"Some value\", label=\"Name\", visible=False)\n", "            btn = gr.Button(\"Show\")\n", "            btn.click(lambda: gr.Textbox(visible=True), inputs=None, outputs=t)\n", "        with gr.TabItem(\"Tab 2\"):\n", "            t2 = gr.Textbox(\"Some other value\", label=\"Name\", visible=False)\n", "            btn2 = gr.Button(\"Show\")\n", "            btn2.click(lambda: gr.Textbox(visible=True), inputs=None, outputs=t2)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/render_visibility/run.py

@@ -0,0 +1,20 @@
+import gradio as gr
+
+
+def greet(name):
+    return "Hello " + name + "!"
+
+
+with gr.Blocks() as demo:
+    with gr.Tabs():
+        with gr.TabItem("Tab 1"):
+            t = gr.Textbox("Some value", label="Name", visible=False)
+            btn = gr.Button("Show")
+            btn.click(lambda: gr.Textbox(visible=True), inputs=None, outputs=t)
+        with gr.TabItem("Tab 2"):
+            t2 = gr.Textbox("Some other value", label="Name", visible=False)
+            btn2 = gr.Button("Show")
+            btn2.click(lambda: gr.Textbox(visible=True), inputs=None, outputs=t2)
+
+if __name__ == "__main__":
+    demo.launch()

js/atoms/src/Block.svelte

@@ -62,7 +62,7 @@
 	data-testid={test_id}
 	id={elem_id}
 	class:hidden={visible === false}
-	class="block {elem_classes.join(' ')}"
+	class="block {elem_classes?.join(' ') || ''}"
 	class:padded={padding}
 	class:flex
 	class:border_focus={border_mode === "focus"}

js/core/src/Render.svelte

@@ -88,6 +88,7 @@
 	{...node.props}
 	{theme_mode}
 	{root}
+	visible={typeof node.props.visible === "boolean" ? node.props.visible : true}
 >
 	{#if node.children && node.children.length}
 		{#each node.children as _node (_node.id)}

js/core/src/RenderComponent.svelte

@@ -17,6 +17,7 @@
 	export let elem_id: string;
 	export let elem_classes: string[];
 	export let _id: number;
+	export let visible: boolean;
 
 	const s = (id: number, p: string, v: any): CustomEvent =>
 		new CustomEvent("prop_change", { detail: { id, prop: p, value: v } });
@@ -51,17 +52,20 @@
 	const _component = wrap(component);
 </script>
 
-<svelte:component
-	this={_component}
-	bind:this={instance}
-	bind:value
-	on:prop_change
-	{elem_id}
-	{elem_classes}
-	{target}
-	{...$$restProps}
-	{theme_mode}
-	{root}
->
-	<slot />
-</svelte:component>
+{#if visible}
+	<svelte:component
+		this={_component}
+		bind:this={instance}
+		bind:value
+		on:prop_change
+		{elem_id}
+		{elem_classes}
+		{target}
+		{visible}
+		{...$$restProps}
+		{theme_mode}
+		{root}
+	>
+		<slot />
+	</svelte:component>
+{/if}

js/core/src/init.ts

@@ -300,15 +300,15 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 
 		if (instance.type === "tabs" && !instance.props.initial_tabs) {
 			const tab_items_props =
-				node.children?.map((c) => {
+				node.children?.map((c, i) => {
 					const instance = instance_map[c.id];
-					// console.log("tabs", JSON.stringify(instance.props, null, 2));
 					instance.props.id ??= c.id;
 					return {
 						type: instance.type,
 						props: {
 							...(instance.props as any),
-							id: instance.props.id
+							id: instance.props.id,
+							order: i
 						}
 					};
 				}) || [];
@@ -321,10 +321,18 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 				label: child.props.label,
 				id: child.props.id,
 				visible: child.props.visible,
-				interactive: child.props.interactive
+				interactive: child.props.interactive,
+				order: child.props.order
 			}));
 		}
 
+		if (instance.type === "tabs") {
+			node.children?.forEach((c, i) => {
+				const child = instance_map[c.id];
+				child.props.order = i;
+			});
+		}
+
 		return instance;
 	}
 
@@ -385,7 +393,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		if (!comp) {
 			return null;
 		}
-		if (comp.instance.get_value) {
+		if (comp.instance?.get_value) {
 			return comp.instance.get_value() as Promise<any>;
 		}
 		return comp.props.value;
@@ -414,7 +422,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		state: "open" | "closed" | "waiting"
 	): void {
 		const comp = _component_map.get(id);
-		if (comp && comp.instance.modify_stream_state) {
+		if (comp && comp.instance?.modify_stream_state) {
 			comp.instance.modify_stream_state(state);
 		}
 	}

js/imageeditor/Index.svelte

@@ -57,6 +57,7 @@
 	};
 	export let canvas_size: [number, number] | undefined;
 	export let show_fullscreen_button = true;
+	export let full_history: any = null;
 
 	export let gradio: Gradio<{
 		change: never;
@@ -185,6 +186,7 @@
 		/>
 
 		<InteractiveImageEditor
+			on:history={(e) => (full_history = e.detail)}
 			bind:dragging
 			{canvas_size}
 			on:change={() => handle_history_change()}
@@ -221,6 +223,7 @@
 			upload={(...args) => gradio.client.upload(...args)}
 			stream_handler={(...args) => gradio.client.stream(...args)}
 			{placeholder}
+			{full_history}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

js/imageeditor/shared/ImageEditor.svelte

@@ -2,7 +2,7 @@
 	import type { Writable, Readable } from "svelte/store";
 	import type { Spring } from "svelte/motion";
 	import { type PixiApp } from "./utils/pixi";
-	import { type CommandManager } from "./utils/commands";
+	import { type CommandManager, type CommandNode } from "./utils/commands";
 
 	export const EDITOR_KEY = Symbol("editor");
 	export type context_type = "bg" | "layers" | "crop" | "draw" | "erase";
@@ -71,10 +71,12 @@
 		clear?: never;
 		save: void;
 		change: void;
+		history: CommandManager["current_history"];
 	}>();
 	export let crop_constraint = false;
 	export let canvas_size: [number, number] | undefined;
 	export let parent_height: number;
+	export let full_history: CommandNode | null = null;
 
 	$: orig_canvas_size = canvas_size;
 
@@ -114,7 +116,15 @@
 
 	const { can_redo, can_undo, current_history } = CommandManager;
 
+	function get_start_history(history: any): any {
+		if (history.previous) {
+			return get_start_history(history.previous);
+		}
+		return history;
+	}
+
 	$: $current_history.previous, dispatch("change");
+	$: dispatch("history", get_start_history($current_history));
 
 	$: {
 		history = !!$current_history.previous || $active_tool !== "bg";
@@ -316,6 +326,12 @@
 
 		resize(...$dimensions);
 
+		tick().then(() => {
+			if (full_history) {
+				CommandManager.hydrate(full_history);
+			}
+		});
+
 		return () => {
 			$pixi?.destroy();
 			resizer.disconnect();

js/imageeditor/shared/InteractiveImageEditor.svelte

@@ -16,7 +16,7 @@
 	import { createEventDispatcher } from "svelte";
 	import { type I18nFormatter } from "@gradio/utils";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
-
+	import { type CommandNode } from "./utils/commands";
 	import ImageEditor from "./ImageEditor.svelte";
 	import Layers from "./layers/Layers.svelte";
 	import { type Brush as IBrush } from "./tools/Brush.svelte";
@@ -57,6 +57,7 @@
 	export let dragging: boolean;
 	export let placeholder: string | undefined = undefined;
 	export let height = 450;
+	export let full_history: CommandNode | null = null;
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;
@@ -215,6 +216,7 @@
 	label={label || i18n("image.image")}
 />
 <ImageEditor
+	on:history
 	{canvas_size}
 	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
 	bind:this={editor}
@@ -228,6 +230,7 @@
 	bind:bg
 	{sources}
 	crop_constraint={!!crop_constraint}
+	{full_history}
 >
 	<Tools {i18n}>
 		<Layers layer_files={value?.layers || null} enable_layers={layers} />

js/imageeditor/shared/layers/Layers.svelte

@@ -12,11 +12,22 @@
 	export let layer_files: (FileData | null)[] | null = [];
 	export let enable_layers = true;
 
-	const { pixi, current_layer, dimensions, register_context } =
-		getContext<EditorContext>(EDITOR_KEY);
+	const {
+		pixi,
+		current_layer,
+		dimensions,
+		register_context,
+		command_manager,
+		current_history
+	} = getContext<EditorContext>(EDITOR_KEY);
+
+	const { can_undo } = command_manager;
 
 	const LayerManager = layer_manager();
-	let layers: LayerScene[] = [];
+	const manager_current_layer = LayerManager.active_layer;
+	const layers = LayerManager.layers;
+
+	$: current_layer.set($manager_current_layer);
 
 	register_context("layers", {
 		init_fn: () => {
@@ -28,7 +39,7 @@
 	});
 
 	async function validate_layers(): Promise<void> {
-		let invalid = layers.some(
+		let invalid = $layers.some(
 			(layer) =>
 				layer.composite.texture?.width != $dimensions[0] ||
 				layer.composite.texture?.height != $dimensions[1]
@@ -44,14 +55,17 @@
 	async function new_layer(): Promise<void> {
 		if (!$pixi) return;
 
-		const [active_layer, all_layers] = LayerManager.add_layer(
+		const new_layer = LayerManager.add_layer(
 			$pixi.layer_container,
 			$pixi.renderer,
 			...$dimensions
 		);
 
-		$current_layer = active_layer;
-		layers = all_layers;
+		if ($can_undo || $layers.length > 0) {
+			command_manager.execute(new_layer);
+		} else {
+			new_layer.execute();
+		}
 	}
 
 	$: render_layer_files(layer_files);
@@ -88,20 +102,20 @@
 
 		LayerManager.reset();
 
-		let last_layer: [LayerScene, LayerScene[]] | null = null;
 		for (const blob of blobs.filter(is_not_null)) {
-			last_layer = await LayerManager.add_layer_from_blob(
+			const new_layer = await LayerManager.add_layer_from_blob(
 				$pixi.layer_container,
 				$pixi.renderer,
 				blob,
 				$pixi.view
 			);
-		}
-
-		if (!last_layer) return;
 
-		$current_layer = last_layer[0];
-		layers = last_layer[1];
+			if ($can_undo && $layers.length === 0) {
+				command_manager.execute(new_layer);
+			} else {
+				new_layer.execute();
+			}
+		}
 	}
 
 	onMount(async () => {
@@ -121,13 +135,13 @@
 		<button
 			aria-label="Show Layers"
 			on:click={() => (show_layers = !show_layers)}
-			><span class="icon"><Layers /></span> Layer {layers.findIndex(
+			><span class="icon"><Layers /></span> Layer {$layers.findIndex(
 				(l) => l === $current_layer
 			) + 1}
 		</button>
 		{#if show_layers}
 			<ul>
-				{#each layers as layer, i (i)}
+				{#each $layers as layer, i (i)}
 					<li>
 						<button
 							class:selected_layer={$current_layer === layer}