Preserve value in reload mode

.changeset/metal-tables-beg.md

@@ -0,0 +1,9 @@
+---
+"@gradio/client": patch
+"@gradio/core": patch
+"@self/app": patch
+"@self/spa": patch
+"gradio": patch
+---
+
+fix:Preserve value in reload mode

client/js/src/client.ts

@@ -272,9 +272,13 @@ export class Client {
 		app_reference: string,
 		options: ClientOptions = {
 			events: ["data"]
-		}
+		},
+		session_hash: string | null = null
 	): Promise<Client> {
 		const client = new this(app_reference, options); // this refers to the class itself, not the instance
+		if (session_hash) {
+			client.session_hash = session_hash;
+		}
 		await client.init();
 		return client;
 	}

gradio/state_holder.py

@@ -25,12 +25,6 @@ def set_blocks(self, blocks: Blocks):
         blocks.state_holder = self
         self.capacity = blocks.state_session_capacity
 
-    def reset(self, blocks: Blocks):
-        """Reset the state holder with new blocks. Used during reload mode."""
-        self.session_data = OrderedDict()
-        # Call set blocks again to set new ids
-        self.set_blocks(blocks)
-
     def __getitem__(self, session_id: str) -> SessionState:
         if session_id not in self.session_data:
             self.session_data[session_id] = SessionState(self.blocks)

gradio/utils.py

@@ -129,7 +129,7 @@ def swap_blocks(self, demo: Blocks):
         demo.has_launched = True
         demo.max_file_size = self.running_app.blocks.max_file_size
         demo.is_running = True
-        self.running_app.state_holder.reset(demo)
+        self.running_app.state_holder.set_blocks(demo)
         self.running_app.blocks = demo
 
 
@@ -361,44 +361,52 @@ def _serialize(a: Any) -> bytes:
 
 
 def reassign_keys(old_blocks: Blocks, new_blocks: Blocks):
-    from gradio.blocks import BlockContext
+    from gradio.blocks import BlockContext, Block
 
-    assigned_keys = [
-        block.key for block in new_blocks.children if block.key is not None
+    new_keys = [
+        block.key for block in new_blocks.blocks.values() if block.key is not None
     ]
 
     def reassign_context_keys(
-        old_context: BlockContext | None, new_context: BlockContext
+        old_block: Block | None, new_block: Block, top_level=False,
     ):
-        for i, new_block in enumerate(new_context.children):
-            if old_context and i < len(old_context.children):
-                old_block = old_context.children[i]
+        same_block_type = old_block.__class__ == new_block.__class__
+        if new_block.key is None:
+            if (
+                same_block_type
+                and old_block is not None
+                and old_block.key not in new_keys
+                and deep_equal(
+                    getattr(old_block, "value", None),
+                    getattr(new_block, "value", None),
+                )
+            ):
+                new_block.key = old_block.key
             else:
-                old_block = None
-            if new_block.key is None:
-                if (
-                    old_block.__class__ == new_block.__class__
-                    and old_block is not None
-                    and old_block.key not in assigned_keys
-                    and deep_equal(
-                        getattr(old_block, "value", None),
-                        getattr(new_block, "value", None),
-                    )
-                ):
-                    new_block.key = old_block.key
-                else:
-                    new_block.key = f"__{new_block._id}__"
-
-            if isinstance(new_block, BlockContext):
-                if (
-                    isinstance(old_block, BlockContext)
-                    and old_block.__class__ == new_block.__class__
-                ):
-                    reassign_context_keys(old_block, new_block)
+                new_block.key = f"__{new_block._id}__"
+
+        if old_block and same_block_type and old_block.key is not None and old_block.key == new_block.key:
+            if not top_level:
+                new_blocks.default_config.blocks[old_block._id] = new_blocks.default_config.blocks[new_block._id]
+                del new_blocks.default_config.blocks[new_block._id]
+            for fn in new_blocks.default_config.fns.values():
+                for target_idx, target in enumerate(fn.targets):
+                    if target[0] == new_block._id:
+                        fn.targets[target_idx] = (old_block._id, target[1])
+
+            new_block._id = old_block._id
+
+
+        if isinstance(new_block, BlockContext) and isinstance(old_block, BlockContext) and same_block_type:
+            for i, new_block_child in enumerate(new_block.children):
+                if i < len(old_block.children):
+                    old_block_child = old_block.children[i]
                 else:
-                    reassign_context_keys(None, new_block)
+                    old_block_child = None
+                reassign_context_keys(old_block_child, new_block_child)
 
-    reassign_context_keys(old_blocks, new_blocks)
+    old_blocks.key = new_blocks.key = "__blocks__"
+    reassign_context_keys(old_blocks, new_blocks, top_level=True)
 
 
 def colab_check() -> bool:

js/app/src/routes/[...catchall]/+page.svelte

@@ -310,11 +310,15 @@
 				});
 				stream.addEventListener("reload", async (event) => {
 					app.close();
-					app = await Client.connect(data.api_url, {
-						status_callback: handle_status,
-						with_null_state: true,
-						events: ["data", "log", "status", "render"]
-					});
+					app = await Client.connect(
+						data.api_url,
+						{
+							status_callback: handle_status,
+							with_null_state: true,
+							events: ["data", "log", "status", "render"]
+						},
+						app.session_hash
+					);
 
 					if (!app.config) {
 						throw new Error("Could not resolve app config");

js/core/src/init.ts

@@ -107,6 +107,15 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		flush();
 		app = _app;
 
+		if (instance_map) {
+			// re-render in reload mode
+			components.forEach((c) => {
+				if (c.props.value == null && c.id in instance_map) {
+					c.props.value = instance_map[c.id].props.value;
+				}
+			});
+		}
+
 		_components = components;
 		inputs = new Set();
 		outputs = new Set();

js/spa/src/Index.svelte

@@ -391,11 +391,15 @@
 				});
 				stream.addEventListener("reload", async (event) => {
 					app.close();
-					app = await Client.connect(api_url, {
-						status_callback: handle_status,
-						with_null_state: true,
-						events: ["data", "log", "status", "render"]
-					});
+					app = await Client.connect(
+						api_url,
+						{
+							status_callback: handle_status,
+							with_null_state: true,
+							events: ["data", "log", "status", "render"]
+						},
+						app.session_hash
+					);
 
 					if (!app.config) {
 						throw new Error("Could not resolve app config");