gradio-app
diff --git a/‎.changeset/fuzzy-webs-change.md‎
Lines changed: 14 additions & 0 deletions b/‎.changeset/fuzzy-webs-change.md‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎demo/render_visibility/run.ipynb‎
Lines changed: 1 addition & 0 deletions b/‎demo/render_visibility/run.ipynb‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎demo/render_visibility/run.py‎
Lines changed: 20 additions & 0 deletions b/‎demo/render_visibility/run.py‎
Lines changed: 20 additions & 0 deletions
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‎
Lines changed: 1 addition & 1 deletion b/‎js/atoms/src/Block.svelte‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎js/core/src/Render.svelte‎
Lines changed: 1 addition & 0 deletions b/‎js/core/src/Render.svelte‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎js/core/src/RenderComponent.svelte‎
Lines changed: 4 additions & 0 deletions b/‎js/core/src/RenderComponent.svelte‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎js/core/src/init.ts‎
Lines changed: 13 additions & 5 deletions b/‎js/core/src/init.ts‎
Lines changed: 13 additions & 5 deletions
diff --git a/‎js/image/shared/Webcam.svelte‎
Lines changed: 8 additions & 2 deletions b/‎js/image/shared/Webcam.svelte‎
Lines changed: 8 additions & 2 deletions
diff --git a/‎js/imageeditor/Index.svelte‎
Lines changed: 3 additions & 0 deletions b/‎js/imageeditor/Index.svelte‎
Lines changed: 3 additions & 0 deletions
@@ -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}
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)}`