gradio-app
diff --git a/‎.changeset/fuzzy-webs-change.md
+14 b/‎.changeset/fuzzy-webs-change.md
+14
diff --git a/‎demo/render_visibility/run.ipynb
+1 b/‎demo/render_visibility/run.ipynb
+1
diff --git a/‎demo/render_visibility/run.py
+20 b/‎demo/render_visibility/run.py
+20
diff --git a/‎demo/render_visibility/screenshot.gif
90.2 KB b/‎demo/render_visibility/screenshot.gif
90.2 KB
diff --git a/‎js/atoms/src/Block.svelte
+1-1 b/‎js/atoms/src/Block.svelte
+1-1
diff --git a/‎js/core/src/Render.svelte
+1 b/‎js/core/src/Render.svelte
+1
diff --git a/‎js/core/src/RenderComponent.svelte
+4 b/‎js/core/src/RenderComponent.svelte
+4
diff --git a/‎js/core/src/init.ts
+13-5 b/‎js/core/src/init.ts
+13-5
diff --git a/‎js/image/shared/Webcam.svelte
+8-2 b/‎js/image/shared/Webcam.svelte
+8-2
diff --git a/‎js/imageeditor/Index.svelte
+3 b/‎js/imageeditor/Index.svelte
+3
diff --git a/‎js/imageeditor/shared/ImageEditor.svelte
+17-1 b/‎js/imageeditor/shared/ImageEditor.svelte
+17-1
diff --git a/‎js/imageeditor/shared/InteractiveImageEditor.svelte
+4-1 b/‎js/imageeditor/shared/InteractiveImageEditor.svelte
+4-1
diff --git a/‎js/imageeditor/shared/layers/Layers.svelte
+30-16 b/‎js/imageeditor/shared/layers/Layers.svelte
+30-16
@@ -0,0 +1,14 @@
+---
+"@gradio/atoms": minor
+"@gradio/core": minor
+"@gradio/image": minor
+"@gradio/imageeditor": minor
+"@gradio/markdown": minor
+"@gradio/markdown-code": minor
+"@gradio/tabitem": minor
+"@gradio/tabs": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Ensure components can be remounted with their previous data
@@ -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}
@@ -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()
@@ -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"}
 
@@ -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)}
 
@@ -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,6 +52,7 @@
 	const _component = wrap(component);
 </script>
 
+<!-- {#if visible} -->
 <svelte:component
 	this={_component}
 	bind:this={instance}
@@ -59,9 +61,11 @@
 	{elem_id}
 	{elem_classes}
 	{target}
+	{visible}
 	{...$$restProps}
 	{theme_mode}
 	{root}
 >
 	<slot />
 </svelte:component>
+<!-- {/if} -->
@@ -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;
 	}
 
@@ -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?.instance?.modify_stream_state) {
+		if (comp && comp.instance?.modify_stream_state) {
 			comp.instance.modify_stream_state(state);
 		}
 	}
 
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 	import {
 		Camera,
 		Circle,
@@ -198,7 +198,7 @@
 				}
 			};
 			ReaderObj.readAsDataURL(video_blob);
-		} else {
+		} else if (typeof MediaRecorder !== "undefined") {
 			dispatch("start_recording");
 			recorded_blobs = [];
 			let validMimeTypes = ["video/webm", "video/mp4"];
@@ -273,6 +273,12 @@
 		event.stopPropagation();
 		options_open = false;
 	}
+
+	onDestroy(() => {
+		if (typeof window === "undefined") return;
+		record_video_or_photo();
+		stream?.getTracks().forEach((track) => track.stop());
+	});
 </script>
 
 <div class="wrap">
 
@@ -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}
@@ -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();
 
@@ -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} />
 
@@ -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}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`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}
Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,7 @@`
`88`	`88`	`{...node.props}`
`89`	`89`	`{theme_mode}`
`90`	`90`	`{root}`
	`91`	`+ visible={typeof node.props.visible === "boolean" ? node.props.visible : true}`
`91`	`92`	`>`
`92`	`93`	`{#if node.children && node.children.length}`
`93`	`94`	`{#each node.children as _node (_node.id)}`